/* Lern-App im neuen Design (Relaunch 2026, nur mit Cookie lg_design=2).
   Markup baut js/learn.js (Konstante V2) aus den lg-*-Klassen von lg/bundle.css; hier stehen nur die
   Ergänzungen für die echte App: Rahmen (AppBar statt Header, Fokusmodus), Vorab-Inhalt, Lernscreens,
   Dialoge, Hinweise, Zertifikat-Druck. Nur Tokens, logische Eigenschaften. Alles unter .lg-v2. */

/* ---------- Rahmen ---------- */
/* Die AppBar ersetzt in der Lern-App den Website-Header (README „Rahmen und Seiten“). */
/* In Lektion, Einstufung und Abschluss bleibt der (kompakte) Website-Header stehen — sonst gibt es dort
   keinen Weg zu Menü, Konto und Sprache. */
body.lg-v2.lg-learnpage:has(#app .lg-appbar) > .lg-page > .lg-header,
body.lg-v2.lg-focusmode > .lg-page > .lg-header__iosbar,
body.lg-v2.lg-focusmode > .lg-page > .lg-footer { display: none; }
body.lg-v2.lg-learnpage .lg-appbar { margin-bottom: 0; }
body.lg-v2.lg-learnpage #app { display: block; min-height: 60vh; }
.lg-v2 .lg-appbar__top { min-width: 0; }
.lg-v2 .lg-appbar .lg-header__logo { display: inline-flex; align-items: center; gap: var(--space-2); font: 800 20px/1 var(--font-display); letter-spacing: -.03em; color: var(--text); text-decoration: none; flex: none; }
.lg-v2 .lg-lv-pair { color: var(--text); text-decoration: none; min-width: 0; }
.lg-v2 .lg-lv-pair > span:not(.lg-langbadge):not(.lg-special__icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-v2 .lg-lv-pair:hover { border-color: var(--text); }
.lg-v2 .lg-lv-trk { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; flex: none; }
.lg-v2 .lg-appbar__end .lg-btn[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.lg-v2 a.lg-tab { text-decoration: none; }
.lg-v2 a.lg-tab[aria-current="page"] { color: var(--text); }
.lg-v2 a.lg-tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--space-2); bottom: -1px; height: 3px; background: var(--accent); border-radius: 2px 2px 0 0; }
.lg-v2 .lg-tab:focus-visible, .lg-v2 .lg-lv-bdgbtn:focus-visible, .lg-v2 .lg-lessons a:focus-visible, .lg-v2 .lg-lv-fc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@container lg (max-width: 599px) {
  .lg-v2 .lg-appbar__top { gap: var(--space-2); }
  .lg-v2 .lg-appbar__end { gap: 2px; }
  .lg-v2 .lg-appbar__end .lg-btn--icon { --_h: 36px; }
  .lg-v2 .lg-lv-pair { max-width: 42vw; }
}

/* ---------- Grundgerüst der Screens ---------- */
.lg-v2 .lg-lv { display: grid; gap: var(--space-5); align-content: start; padding-block: var(--space-6) var(--space-12); }
.lg-v2 .lg-lv-narrow { max-width: 808px; }
.lg-v2 .lg-lv-set { max-width: 932px; }
.lg-v2 .lg-lv > * { min-width: 0; }
.lg-v2 .lg-lv-h1 { margin: 0; font: 850 clamp(26px, 3.6cqi, 36px)/1.1 var(--font-display); letter-spacing: -.02em; }
.lg-v2 .lg-lv-h2 { margin: var(--space-4) 0 var(--space-3); font: 750 22px/1.2 var(--font-display); }
.lg-v2 .lg-lv-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.lg-v2 .lg-lv-head p, .lg-v2 .lg-lv > p { margin: 4px 0 0; }
.lg-v2 .lg-lv-loading { padding: var(--space-10) var(--space-4); text-align: center; color: var(--text-muted); }
.lg-v2 .lg-lv-empty { display: grid; gap: var(--space-4); justify-items: center; padding: var(--space-8) var(--space-5); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text-muted); text-align: center; margin: 0; }
.lg-v2 .lg-lv-donemsg { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: 750 20px/1.3 var(--font-display); color: var(--text); }
.lg-v2 .lg-lv-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.lg-v2 .lg-lv-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lg-v2 .lg-lv-push { margin-inline-start: auto; }
.lg-v2 .lg-lv-small { font-size: 14px; margin: 0; }
.lg-v2 .lg-lv-lead { margin: 0; max-width: 52ch; }
.lg-v2 .lg-lv-center { justify-items: center; justify-content: center; text-align: center; }
.lg-v2 .lg-lv-w { width: 100%; }
.lg-v2 .lg-lv-start { text-align: start; }
.lg-v2 .lg-lv kbd, .lg-v2 .lg-lv-kbd kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; font: 600 12px/1.4 var(--font-text); background: var(--surface); color: var(--text); }
.lg-v2 .lg-lv-kbd { margin: 0; text-align: center; font-size: 13px; }
@media (hover: none) { .lg-v2 .lg-lv-kbd { display: none; } }

/* ---------- Vorab-Inhalt (Server, bis das Skript läuft; auch für Suchmaschinen) ---------- */
.lg-v2 .lg-lv-ssr { display: grid; gap: var(--space-4); padding-block: var(--space-8) var(--space-12); }
.lg-v2 .lg-lv-ssr h1 { margin: 0; font: 850 clamp(28px, 4cqi, 44px)/1.05 var(--font-display); letter-spacing: -.03em; }
.lg-v2 .lg-lv-ssr h2 { margin: var(--space-4) 0 0; font: 750 22px/1.2 var(--font-display); }
.lg-v2 .lg-lv-ssr p { margin: 0; }
.lg-v2 .lg-lv-lead { color: var(--text-muted); font-size: 18px; }
.lg-v2 .lg-lpick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-3); align-items: center; padding: var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration: none; }
.lg-v2 .lg-lpick > .lg-langbadge { grid-row: span 2; }
.lg-v2 .lg-lpick b { font: 700 16px/1.2 var(--font-display); }
.lg-v2 .lg-lpick small { font-size: 13px; color: var(--text-muted); }
.lg-v2 .lg-lpick:hover { border-color: var(--text); }

/* ---------- Sprachwahl ---------- */
.lg-v2 .lg-lv-pick { padding-bottom: var(--space-8); }
.lg-v2 .lg-lv-pick .lg-pick li[hidden] { display: none; }
.lg-v2 .lg-lv-pick .lg-pick small:empty { display: none; }
.lg-v2 .lg-lv-tracks { display: grid; gap: var(--space-3); }
.lg-v2 .lg-lv-tracks h2 { margin: var(--space-4) 0 0; font: 750 20px/1.2 var(--font-display); }
.lg-v2 .lg-special label { position: relative; cursor: pointer; }
.lg-v2 .lg-special label.is-selected { border-color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); background: var(--accent-soft); }
.lg-v2 .lg-special label:has(input:focus-visible), .lg-v2 .lg-pick label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.lg-v2 .lg-special .lg-special__icon { grid-row: span 2; }
.lg-v2 .lg-nextbar { z-index: 5; }
.lg-v2 .lg-nextbar #pickSel { min-width: 0; }

/* ---------- Übersicht ---------- */
.lg-v2 .lg-lv-dash { padding-top: 0; }
.lg-v2 .lg-lv-hello { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.lg-v2 .lg-lv-hello h1 { flex: 1 1 100%; }
.lg-v2 .lg-lv-hello .lg-link { margin-inline-start: auto; }
.lg-v2 .lg-lv-big { font: 800 40px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lg-v2 .lg-lv-goal { flex-direction: row; align-items: center; gap: var(--space-4); }
.lg-v2 .lg-lv-cont .lg-eyebrow { color: var(--highlight); }
.lg-v2 .lg-lv-cont .lg-tile__title { font-size: 26px; }
.lg-v2 .lg-lv-cont .lg-progress { background: var(--gray-700); box-shadow: none; }
.lg-v2 .lg-lv-cont .lg-btn { align-self: flex-start; margin-top: var(--space-2); }
.lg-v2 .lg-lv-start.lg-btn { align-self: flex-start; margin-top: auto; }
.lg-v2 .lg-lv-bdg { padding: 0; }
.lg-v2 .lg-lv-bdgbtn { display: flex; align-items: center; gap: var(--space-3); width: 100%; height: 100%; padding: var(--space-5); border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.lg-v2 .lg-lv-bdgbtn > .lg-icon { margin-inline-start: auto; color: var(--accent-text); flex: none; }
.lg-v2 .lg-lv-sleepcard { background: var(--gray-1000); border-color: var(--gray-1000); color: var(--gray-50); text-decoration: none; }
.lg-v2 .lg-lv-sleepcard .lg-tile__icon { background: var(--gray-800); color: var(--gray-50); }
.lg-v2 .lg-lv-sleepcard .lg-tile__meta { color: var(--gray-300); }
.lg-v2 .lg-lv-sleepcta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-weight: 700; color: var(--gray-50); }
.lg-v2 .lg-lv-dash .lg-adzone-app { display: grid; justify-items: center; }

/* ---------- Lernpfad ---------- */
.lg-v2 .lg-lv-path .lg-tab .lg-level { min-width: 32px; }
@container lg (max-width: 599px) { .lg-v2 .lg-lv-path .lg-lv-lvname { display: none; } }
.lg-v2 .lg-lessons a:not([href]) { cursor: not-allowed; }
.lg-v2 .lg-lessons a[href]:hover { border-color: var(--text); }
.lg-v2 .lg-lessons a.is-done[href]:hover, .lg-v2 .lg-lessons a.is-current:hover { filter: brightness(1.1); }
.lg-v2 .lg-lv-legend { list-style: none; padding: 0; margin: 0; }
.lg-v2 .lg-lv-certtile { flex-direction: row; align-items: center; gap: var(--space-4); }
.lg-v2 .lg-lv-certtile .lg-tile__arrow { margin-inline-start: auto; position: static; }

/* ---------- Lektion (Fokusmodus) ---------- */
.lg-v2 .lg-lv-lesson { grid-template-rows: none; align-content: start; gap: var(--space-5); padding-inline: var(--space-4); padding-block: var(--space-5) var(--space-10); box-sizing: border-box; }
.lg-v2 .lg-lv-lesson .lg-learnad { padding-inline: 0; }
.lg-v2 .lg-lv-lesson .lg-learnad .lg-ad { margin-block: var(--space-2) var(--space-4); }
.lg-v2 .lg-lv-stage { display: grid; gap: var(--space-5); }
.lg-v2 .lg-lv-pos { font-weight: 700; min-width: 3.5em; text-align: end; }
.lg-v2 .lg-lv-cardtop { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); width: 100%; }
.lg-v2 .lg-lv-cardtop .lg-btn--text { font-size: 13px; }
.lg-v2 .lg-lesson__card .lg-word__term { font-size: clamp(36px, 7cqi, 64px); }
.lg-v2 .lg-lesson__card .lg-word__ipa { font-size: 20px; }
.lg-v2 .lg-lesson__card .lg-word__tr { font-size: 19px; }
.lg-v2 .lg-lesson__card .lg-karaoke { margin: 0; font-size: clamp(22px, 4cqi, 30px); }
.lg-v2 .lg-karaoke .kw { border-radius: 3px; padding: 0 2px; transition: background var(--dur-fast); }
.lg-v2 .lg-karaoke .kw.is-done { color: var(--text-muted); }
.lg-v2 .lg-karaoke .kw.on { background: var(--highlight); color: var(--on-highlight); }
.lg-v2 .lg-lesson__foot .lg-btn--primary { min-width: 0; }
@container lg (max-width: 599px) { .lg-v2 .lg-lv-lesson .lg-lesson__card { padding: var(--space-6) var(--space-5); } }

/* ---------- Abschluss-Screen ---------- */
.lg-v2 .lg-lv-done { padding-block: var(--space-10) var(--space-12); }
.lg-v2 .lg-lv-done .lg-kpi b { font-size: 36px; }
.lg-v2 .lg-lv-kpistreak { font-size: inherit; padding: 0; background: none; min-height: 0; }
.lg-v2 .lg-lv-actions { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lg-v2 .lg-lv-done .lg-adzone-app { display: grid; justify-items: center; margin-top: var(--space-12); }

/* ---------- Karteikarten ---------- */
.lg-v2 .lg-lv-leitner > span { display: grid; gap: 2px; padding: var(--space-3) var(--space-2); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.lg-v2 .lg-lv-leitner > span b { font: 800 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.lg-v2 .lg-lv-leitner > span span { font-size: 12px; color: var(--text-muted); }
.lg-v2 .lg-lv-leitner > span.is-due b { color: var(--accent-text); }
.lg-v2 .lg-lv-fc { cursor: pointer; align-content: center; }
.lg-v2 .lg-lv-fcside { display: grid; gap: var(--space-2); justify-items: center; }
.lg-v2 .lg-lv-fcown { font: 700 26px/1.2 var(--font-display); overflow-wrap: anywhere; }
.lg-v2 .lg-lv-fcdiv { width: 100%; border: 0; border-top: 1px dashed var(--line-strong); margin: var(--space-2) 0; }
.lg-v2 .lg-lv-fc:not(.flip) .lg-lv-fcback, .lg-v2 .lg-lv-fc.flip .lg-lv-fccue { display: none; }
.lg-v2 .lg-lv-fb { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 15px; transition: opacity var(--dur-base); }
.lg-v2 .lg-lv-fb.ok { background: var(--success-soft); color: var(--success-text); }
.lg-v2 .lg-lv-fb.again { background: var(--warning-soft); color: var(--warning-text); }
.lg-v2 .lg-lv-fb.fade { opacity: 0; }
.lg-v2 .lg-lv-round { justify-items: center; text-align: center; padding-block: var(--space-8); }
.lg-v2 .lg-lv-round .lg-kpis { width: 100%; max-width: 360px; }
@container lg (max-width: 599px) { .lg-v2 .lg-lv-leitner > span { padding-inline: 2px; } .lg-v2 .lg-lv-leitner > span b { font-size: 20px; } }

/* ---------- Eigene Sets ---------- */
.lg-v2 .lg-lv-split { gap: var(--space-6); }
@container lg (min-width: 960px) { .lg-v2 .lg-lv-split { grid-template-columns: minmax(0, 1fr) 300px; } }
.lg-v2 .lg-lv-decks { display: grid; gap: var(--space-2); }
.lg-v2 .lg-lv-deck { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.lg-v2 .lg-lv-split .lg-aside .lg-ad { margin-block: 0; }
.lg-v2 .lg-lv-deckedit { gap: var(--space-4); }
.lg-v2 .lg-lv-decktbl .lg-input { min-height: 40px; font-size: 16px; }
.lg-v2 .lg-lv-decktbl td:last-child, .lg-v2 .lg-lv-decktbl th:last-child { width: 48px; }
.lg-v2 .lg-input.bad, .lg-v2 .lg-paste.bad { border-color: var(--danger); background: var(--danger-soft); }

/* ---------- Aussprache ---------- */
.lg-v2 .lg-lv-pron { padding: 0; max-width: none; }
.lg-v2 .lg-lv-pron .lg-word { display: grid; gap: var(--space-2); }
.lg-v2 .lg-lv-pron .lg-focus__center { min-height: 260px; align-content: center; }
.lg-v2 .lg-lv-meterph { height: 48px; }
.lg-v2 .lg-lv-count { display: grid; place-items: center; height: 48px; font: 850 44px/1 var(--font-display); color: var(--danger-text); font-variant-numeric: tabular-nums; }
.lg-v2 .lg-lv-miclabel { font-weight: 700; }
.lg-v2 .lg-mic:disabled { background: var(--surface-sunken); color: var(--text-muted); box-shadow: none; cursor: not-allowed; }
.lg-v2 .lg-mic:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.lg-v2 .lg-lv-result { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-5); }
.lg-v2 .lg-lv-resulttx { display: grid; gap: var(--space-2); }
.lg-v2 .lg-lv-resulttx > b { font: 750 20px/1.2 var(--font-display); }
.lg-v2 .lg-lv-end { justify-content: flex-end; }
.lg-v2 .lg-lv-pron .lg-rule__memo { text-align: start; font-weight: 500; }

/* ---------- Grammatik ---------- */
.lg-v2 .lg-lv-grgrid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.lg-v2 .lg-lv-grtile.is-done { border-color: var(--success); }
.lg-v2 .lg-lv-grtile .lg-tile__meta { display: inline-flex; gap: 4px; align-items: center; }
.lg-v2 .lg-lv-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; }
.lg-v2 .lg-lv-grbody { display: grid; gap: var(--space-4); }
.lg-v2 .lg-lv-grbody h2 { margin: 0; font: 750 22px/1.2 var(--font-display); }
.lg-v2 .lg-lv-grbody h3 { margin: var(--space-2) 0 0; font: 700 17px/1.3 var(--font-display); }
.lg-v2 .lg-lv-grbody p { margin: 0; }
.lg-v2 .lg-lv-rule { font-size: 18px; line-height: 1.55; }
.lg-v2 .lg-lv-exlist { display: grid; gap: var(--space-2); }
.lg-v2 .lg-lv-ex { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lg-v2 .lg-lv-ex .gr-ex-t { font: 600 18px/1.4 var(--font-display); }
.lg-v2 .lg-lv-ex mark { background: var(--highlight); color: var(--on-highlight); border-radius: 3px; padding: 0 2px; }
.lg-v2 .lg-lv-ex .gr-ex-tr { font-size: 15px; margin-top: 2px; }
.lg-v2 .lg-lv-ex .ml-audio.is-na, .lg-v2 .lg-lv-ex .ml-audio.na { opacity: .45; }
.lg-v2 .lg-lv-mist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lg-v2 .lg-lv-mist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.lg-v2 .lg-lv-mist .lg-icon { color: var(--warning-text); margin-top: 3px; }
.lg-v2 .lg-lv-terms { display: grid; gap: var(--space-2); margin: 0; }
.lg-v2 .lg-lv-terms div { padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--accent); background: var(--surface); }
.lg-v2 .lg-lv-terms dt { font-weight: 700; } .lg-v2 .lg-lv-terms dd { margin: 0; color: var(--text-muted); font-size: 15px; }
.lg-v2 .lg-lv-th { font-weight: 700; }
.lg-v2 .lg-lv-quizlist { display: grid; gap: var(--space-4); }
.lg-v2 .lg-lv-free { display: flex; gap: var(--space-2); }
.lg-v2 .lg-lv-fbq { margin: 0; }
.lg-v2 .lg-lv-fbq p { margin: 0; }
.lg-v2 .lg-opt:disabled { cursor: default; }

/* ---------- Einstellungen ---------- */
.lg-v2 .lg-lv-set .lg-langpill small { display: block; font-size: 11px; }
.lg-v2 .lg-lv-set .lg-langpill > span:last-child { display: grid; line-height: 1.15; }
.lg-v2 .lg-lv-set .lg-badge--premium { text-decoration: none; }

/* ---------- Zertifikate ---------- */
.lg-v2 .lg-lv-certgrid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.lg-v2 .lg-lv-cert.is-locked { opacity: .88; }
.lg-v2 .lg-lv-cert > .lg-link { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 4px; align-items: center; font-size: 15px; }
.lg-v2 .lg-lv-cert .lg-progress { align-self: stretch; }
.lg-v2 .lg-lv-certpage { justify-items: center; }
.lg-v2 .lg-lv-certbar { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; width: 100%; max-width: 210mm; }
.lg-v2 .lg-lv-certnote { width: 100%; max-width: 210mm; box-sizing: border-box; align-items: center; }
.lg-v2 .lg-lv-certnote p { margin: 0; }
.lg-v2 .lg-lv-certnote .lg-btn { margin-inline-start: auto; flex: none; }
.lg-v2 .lg-lv-certscroll { width: 100%; display: grid; justify-items: center; }
.lg-v2 .lg-cert { box-shadow: var(--shadow-2); color-scheme: light; }
.lg-v2 .lg-cert__seal { color: var(--gray-950); }
.lg-v2 .lg-cert__name--empty { font-style: normal; }
.lg-v2 .lg-cert--preview .lg-cert__qr:empty { min-width: 26mm; }
/* Gast-Hinweis in der Spaltenbreite der App-Leiste statt über die volle Fensterbreite */
.lg-appbar .lg-guestbar { border-radius: var(--radius-md); margin: var(--space-2) 0; }
/* Zertifikat teilen: aus dem Designsystem (bundle.css, CertShareBar/CertCongrats) übernommen */
/* ========== Zertifikat teilen (CertShareBar, CertCongrats, CertShareImage) – Web lg-, App ap- ==========
   Teilbilder werden per Canvas gezeichnet (LangulaCert.draw, Komponente CertShareImage). Keine Marken-Logos: eigene Symbole + Textlabel. */
.lg-cshare { container: cshare / inline-size; display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.lg-cshare__title { margin: 0; font: 800 24px/1.2 var(--font-display); letter-spacing: -.02em; }
.lg-cshare__native { width: 100%; }
.lg-cshare:not([data-native]) .lg-cshare__native { display: none; }
.lg-cshare__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.lg-cshare__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font: 600 16px/1.2 var(--font-text); text-decoration: none !important; cursor: pointer; text-align: center; }
.lg-cshare__btn:hover { background: var(--surface-hover); border-color: var(--text); }
.lg-cshare__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lg-cshare__btn--wide { grid-column: span 2; border-color: var(--text); }
.lg-cshare__btn.is-done { border-color: var(--success); background: var(--success-soft); color: var(--success-text); }
.lg-cshare__dl { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; color: var(--text-muted); }
.lg-cshare__dl a { font-weight: 600; }
.lg-cshare__dl > span:first-child { color: var(--text); display: inline-flex; }
.lg-cshare__tip { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--highlight-soft); color: var(--text); font-size: 15px; line-height: 1.45; }
@container cshare (max-width: 599px) {
  .lg-cshare__grid { grid-template-columns: 1fr 1fr; }
  .lg-cshare__btn--wide { grid-column: span 2; justify-content: flex-start; }
  .lg-cshare__btn { font-size: 15px; }
}
.lg-certedge { position: relative; height: 70px; background: var(--gray-0); border-radius: 0 0 4px 4px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.lg-certedge::before { content: ""; position: absolute; inset: -40px 14px 14px; border: 1px solid var(--gray-950); }
.lg-certedge::after { content: ""; position: absolute; inset-inline: 22px; bottom: 26px; height: 6px; background: repeating-linear-gradient(90deg, var(--level-a2) 0 10px, transparent 10px 20px); }

/* Glückwunsch-Dialog (Desktop zentriert, Handy als Sheet von unten) */
.lg-congrats { position: relative; width: min(440px, 100%); box-sizing: border-box; display: grid; justify-items: center; gap: var(--space-3); padding: 28px 28px 24px; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3); text-align: center; }
.lg-congrats--sheet { width: 100%; border-radius: 16px 16px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); }
.lg-congrats__grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); margin-bottom: 6px; }
.lg-congrats__x { position: absolute; top: 10px; inset-inline-end: 10px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
.lg-congrats__stage { position: relative; width: 200px; height: 250px; margin: 8px 0 6px; }
.lg-congrats__img { width: 200px; height: 250px; display: block; border-radius: 6px; box-shadow: 0 18px 36px -14px rgba(11,26,28,.45); transform: rotate(-3deg); animation: lg-cpop .62s cubic-bezier(.3,1.4,.4,1) both; }
.lg-congrats h2 { margin: 0; font: 850 32px/1.1 var(--font-display); letter-spacing: -.025em; }
.lg-congrats p { margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.45; color: var(--text-muted); }
.lg-congrats__act { width: 100%; display: grid; gap: var(--space-2); margin-top: 6px; }
.lg-congrats__burst { position: absolute; inset: 0; pointer-events: none; }
.lg-congrats__burst i { position: absolute; left: 50%; top: 45%; width: 8px; height: 14px; border-radius: 2px; background: var(--_c); opacity: 0; animation: lg-cburst .9s cubic-bezier(.2,.8,.2,1) .18s both; }
.lg-congrats__burst i:nth-child(3n) { width: 9px; height: 9px; border-radius: 99px; }
@keyframes lg-cpop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.06) rotate(-2deg); opacity: 1; } 100% { transform: scale(1) rotate(-3deg); } }
@keyframes lg-cburst { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--_x)), calc(-50% + var(--_y))) rotate(var(--_r)); } }
@media (prefers-reduced-motion: reduce) { .lg-congrats__img { animation: lg-cfade .3s ease both; } .lg-congrats__burst { display: none; } }
@keyframes lg-cfade { from { opacity: 0; } to { opacity: 1; } }

.lg-v2 #certShare { width: 100%; max-width: 210mm; }
.lg-cshare.is-hl { box-shadow: 0 0 0 3px var(--highlight); transition: box-shadow .3s; }
.lg-cshare__status { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--success-soft); color: var(--success-text); font-size: 15px; }
.lg-cshare__logo { flex: none; }
.lg-v2 .lg-lv-certpage > #certShare { margin-top: var(--space-4); }
.lg-cshare__btn > span { display: contents; }
/* Dialog-Element statt Div mit Scrim: zentriert, Handy als Sheet unten */
dialog.lg-congrats--dlg { margin: auto; border: 0; max-height: calc(100dvh - 32px); overflow: auto; }
dialog.lg-congrats--dlg::backdrop { background: rgba(5, 12, 13, .55); }
dialog.lg-congrats--sheet { margin: auto 0 0; max-width: 100%; }
@media print {
  body.lg-v2.lg-learnpage .lg-header, body.lg-v2.lg-learnpage .lg-footer, body.lg-v2 .lg-appbar, body.lg-v2 .lg-lv-certbar, body.lg-v2 .lg-lv-certnote, body.lg-v2 #certShare, body.lg-v2 .lg-congrats,
  body.lg-v2 .lg-ad, body.lg-v2 .notice-stack, body.lg-v2 .lg-lv-modal, body.lg-v2 .gp-ov { display: none !important; }
  body.lg-v2 .lg-lv-certpage { padding: 0; margin: 0; max-width: none; display: block; }
  body.lg-v2 .lg-lv-certscroll { display: block; }
  body.lg-v2 .lg-cert { zoom: 1 !important; box-shadow: none; margin: 0; }
  body.lg-v2 { background: #fff; }
}

/* ---------- Einstufungstest ---------- */
.lg-v2 .lg-lv-pt { padding-block: var(--space-5) var(--space-12); }
.lg-v2 .lg-lv-pt .lg-learnad { padding-inline: 0; }
.lg-v2 .lg-lv-pt .lg-learnad .lg-ad { margin-block: var(--space-2) var(--space-4); }
.lg-v2 .lg-lv-ptstage { display: grid; gap: var(--space-5); }
.lg-v2 .lg-lv-ptterm { font-size: clamp(32px, 6cqi, 48px); }
.lg-v2 .lg-lv-scale { max-width: 420px; }
.lg-v2 .lg-lv-yl { font: 700 14px/1 var(--font-text); color: var(--text-muted); }
.lg-v2 .lg-quiz .lg-word__term { margin: 0; }

/* ---------- Schlafmodus (immer dunkel) ---------- */
.lg-v2 .lg-lv-sleep { max-width: none; background: var(--gray-1000); color: var(--gray-50); padding: var(--space-8) var(--space-4) var(--space-12); }
.lg-v2 .lg-lv-sleep h1 { color: var(--gray-50); margin: 0; }
.lg-v2 .lg-lv-sleepin { width: 100%; max-width: 640px; margin-inline: auto; display: grid; gap: var(--space-5); }
.lg-v2 .lg-lv-sleepin .lg-eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.lg-v2 .lg-lv-sleep .lg-lv-lead { color: var(--gray-300); }
.lg-v2 .lg-lv-sleep .lg-segmented { flex-wrap: wrap; }
.lg-v2 .lg-lv-sleepnote { color: var(--gray-400); }
.lg-v2 .lg-lv-sleep .lg-quiz { width: 100%; max-width: 640px; margin-inline: auto; }
.lg-v2 .lg-lv-sleep .lg-tile__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--gray-800); color: var(--gray-50); }
.lg-v2 .lg-lv-sleepplayer { min-height: 70vh; }
.lg-v2 .lg-lv-sleepplayer .lg-btn--ghost { color: var(--gray-300); border-color: var(--gray-700); }
.lg-v2 .lg-lv-sleepplayer .lg-lv-loading { color: var(--gray-400); }
.lg-v2 .lg-lv-sleephint { font-size: 13px; color: var(--gray-400); max-width: 44ch; }
body.lg-v2.sleep-on .lg-lv-sleepplayer { position: fixed; inset: 0; z-index: var(--z-overlay); min-height: 100dvh; overflow: auto; }
body.lg-v2.sleep-on { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .lg-v2 .lg-lv-sleepplayer .lg-sleep__wave span { animation: lg-lv-breathe 3.2s ease-in-out infinite alternate; } .lg-v2 .lg-lv-sleepplayer .lg-sleep__wave span:nth-child(odd) { animation-delay: -1.6s; } }
@keyframes lg-lv-breathe { from { transform: scaleY(.6); } to { transform: scaleY(1); } }

/* ---------- Dialoge, Hinweise, Gast-Fenster (keine Werbung) ---------- */
.lg-v2 .lg-lv-modal { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: flex-end; justify-content: center; }
.lg-v2 .lg-lv-modal > .lg-scrim { position: absolute; inset: 0; background: rgba(11, 13, 17, .5); }
.lg-v2 .lg-lv-modal > .lg-dialog { position: relative; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-sizing: border-box; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: lg-up var(--dur-base) var(--ease-out); }
@media (min-width: 960px) { .lg-v2 .lg-lv-modal { align-items: center; padding: var(--space-6); } .lg-v2 .lg-lv-modal > .lg-dialog { border-radius: var(--radius-md); } .lg-v2 .lg-lv-modal > .lg-sheet::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .lg-v2 .lg-lv-modal > .lg-dialog { animation: none; } }
.lg-v2 .lg-lv-modal p { margin: 0; }
.lg-v2 .lg-lv-steps { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); font-size: 15px; }
.lg-v2 .lg-lv-repterm { font: 700 20px/1.3 var(--font-display); }
.lg-v2 .lg-lv-repopts { display: grid; gap: var(--space-2); }
.lg-v2 .lg-lv-bdglist { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lg-v2 .lg-lv-bdglist li.is-sel { border-color: var(--text); }
.lg-v2 .lg-lv-bdglist li span { display: inline-flex; gap: 4px; align-items: center; }

.lg-v2 .notice-stack { position: fixed; inset-inline: var(--space-4); bottom: var(--space-4); z-index: var(--z-overlay); display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; }
.lg-v2 .notice-stack .lg-notice { pointer-events: auto; width: min(560px, 100%); box-sizing: border-box; box-shadow: var(--shadow-3); }
.lg-v2 .notice-stack .lg-notice > div { flex: 1; display: grid; gap: var(--space-2); justify-items: start; }
.lg-v2 .notice-stack .lg-notice p { margin: 0; }
.lg-v2 .notice-stack .notice-x { flex: none; }
.lg-v2 .lg-lv-toast { position: fixed; inset-inline-start: 50%; bottom: var(--space-6); translate: -50% 0; z-index: var(--z-overlay); transition: opacity var(--dur-base); max-width: calc(100vw - 32px); }
[dir="rtl"] .lg-v2 .lg-lv-toast, .lg-v2[dir="rtl"] .lg-lv-toast { translate: 50% 0; }
.lg-v2 .lg-lv-toast.out { opacity: 0; }

/* Registrierungs-Hinweis für Gäste nach Lektion 1 und 5 (Markup aus guest_prompt_data(), Vorlage AppGuestSheet). */
.lg-v2 .gp-ov.lg-lv-gp { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: flex-end; justify-content: center; background: rgba(11, 13, 17, .5); }
.lg-v2 .lg-lv-gp .gp-box { position: relative; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-sizing: border-box; display: grid; gap: var(--space-4); padding: var(--space-6); padding-top: var(--space-8);
  border: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-3); animation: lg-up var(--dur-base) var(--ease-out); }
@media (min-width: 960px) { .lg-v2 .gp-ov.lg-lv-gp { padding-bottom: var(--space-8); } .lg-v2 .lg-lv-gp .gp-box { border-radius: var(--radius-md); } }
.lg-v2 .lg-lv-gp .gp-box > strong { font: 750 24px/1.18 var(--font-display); padding-inline-end: 40px; }
.lg-v2 .lg-lv-gp .gp-box p { margin: 0; color: var(--text-muted); }
.lg-v2 .lg-lv-gp .gp-x { position: absolute; top: var(--space-4); inset-inline-end: var(--space-4); width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; font-size: 14px; }
.lg-v2 .lg-lv-gp .gp-btns { display: grid; gap: var(--space-2); }
.lg-v2 .lg-lv-gp .auth-oauth { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-m); padding: 0 var(--space-5); border: 2px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); font: 650 16px/1.15 var(--font-text); text-decoration: none; }
.lg-v2 .lg-lv-gp .auth-oauth:last-child { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.lg-v2 .lg-lv-gp .auth-oauth svg { width: 20px; height: 20px; flex: none; }
.lg-v2 .lg-lv-gp .gp-login a { color: var(--accent-text); font-weight: 650; }
.lg-v2 .lg-lv-gp .gp-later { justify-self: center; border: 0; background: none; color: var(--accent-text); font: 650 16px/1.2 var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: var(--space-2); }
.lg-v2 .lg-lv-gp .gp-x:focus-visible, .lg-v2 .lg-lv-gp .gp-later:focus-visible, .lg-v2 .lg-lv-gp .auth-oauth:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Werbeflächen in der Lern-App: Fläche zentriert, im Dashboard/Abschluss 300×250. */
.lg-v2 #app .lg-adzone-app .lg-ad { margin-block: 0; }
.lg-v2 #app .lg-ad--learn { margin-block: var(--space-2) var(--space-4); }
/* Eigenwerbung im leer gebliebenen Platz: Googles leerer 728-px-Container darf sie nicht verschieben. */
.lg-v2 #app .lg-ad .ad-slot.is-house > div[id^="google_ads"] { display: none; }
.lg-v2 #app .lg-ad .lg-slim { box-sizing: border-box; min-width: 0; }
.lg-v2 #app .lg-ad .lg-slim__h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lg-v2 #app .lg-ad .lg-slim__cta { flex: none; }
.lg-v2 .lg-lv > .lg-lv-h1 + p.lg-muted { margin-top: calc(-1 * var(--space-3)); }
.lg-v2 .lg-field > .lg-segmented { justify-self: start; max-width: 100%; }
/* Schmal: Sprach-Pill nur mit Badge (Name bleibt für Screenreader lesbar). */
@container lg (max-width: 459px) {
  .lg-v2 .lg-lv-pair { padding-inline-end: 6px; gap: 4px; }
  .lg-v2 .lg-lv-pair > span:not(.lg-langbadge):not(.lg-special__icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.lg-v2 .lg-karaoke:lang(ja) .kw, .lg-v2 .lg-karaoke:lang(zh) .kw { padding: 0; border-radius: 2px; }

body.lg-v2.lg-focusmode > .lg-page > .lg-header { height: 52px; }
body.lg-v2.lg-focusmode > .lg-page > .lg-header .lg-header__logo { font-size: 19px; }
body.lg-v2.lg-focusmode > .lg-page > .lg-header .lg-header__logo img { width: 26px; height: 26px; }
/* Karteikarte: verdeckte Rückseite als Hinweis statt leerer Fläche; Karte nur so hoch wie nötig. */
.lg-v2 .lg-lv-fc { min-height: 0; }
.lg-v2 .lg-lv-fccue { width: 100%; justify-content: center; text-align: center; pointer-events: none; }

/* Lighthouse 26.10.: Die Lern-App ersetzt den Website-Header durch ihre eigene Leiste. Damit der Inhalt beim
   Start nicht um 64 px nach oben springt, ist der Header schon vor dem ersten Rendern weg — außer auf den
   Fokus-Screens (Lektion …), die den kompakten Header behalten (lg-focus0 setzt der Kopf anhand der Adresse). */
html.js:not(.lg-focus0) body.lg-v2.lg-learnpage:has(#app .lg-lv-ssr) > .lg-page > .lg-header { display: none; }

/* Vokabeltest nach der Lektion (#/vtest/<i>) und „Mehr Sprachspiele“ unter dem Abschluss */
.lg-v2 .lg-lv-vt { justify-self: center; }
.lg-v2 .lg-lv-play { display: grid; justify-items: center; gap: var(--space-2); }
.lg-v2 .lg-lv-play > div { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.lg-v2 .lg-lv-play .lg-chip { display: inline-flex; align-items: center; gap: 6px; }
.lg-v2 .lg-lv-vtest { padding-block: var(--space-8) var(--space-12); }
.lg-v2 .lg-lv-vtest .lg-focus__center { display: grid; gap: var(--space-4); justify-items: stretch; text-align: start; }
.lg-v2 .lg-lv-vtq { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.lg-v2 .lg-lv-vtq p { margin: 0; }
.lg-v2 .lg-lv-vtterm { font: 750 28px/1.2 var(--font-display); overflow-wrap: anywhere; }
.lg-v2 .lg-lv-vtnext { display: grid; }
.lg-v2 .lg-lv-vtmissed { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: 6px; text-align: start; }
.lg-v2 .lg-lv-vtmissed li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.lg-v2 .lg-lv-vtest .lg-adzone-app { display: grid; justify-items: center; margin-top: var(--space-12); }