/* Lernen im neuen Look (App 2. Version, Paket P11). Nur Tokens aus app.css, damit der Dunkelmodus
   ohne eigene Regeln lesbar bleibt. Kursbild nach dem Thumbnail-Baukasten: Motiv ohne Text, Verlauf und
   Symbol als Glaskachel oben links liegen als HTML darueber. */

/* ---- Suche und Kacheln ---- */
.ln-suchfeld { position:relative; margin:4px 0 10px; }
.ln-suchfeld > .hji { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); pointer-events:none; }
.ln-suchfeld input { width:100%; height:48px; padding:0 14px 0 44px; border-radius:16px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font:inherit; font-size:16px; }
.ln-suchfeld input:focus { outline:2px solid var(--teal); outline-offset:1px; }
.ln-vorschlag { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; font-size:13px; font-weight:700; color:var(--muted); }
.ln-vorschlag[hidden], .ln-kacheln[hidden], .ln-treffer[hidden] { display:none !important; }
.ln-vorschlag button, .ln-filter button { border:1px solid var(--line); background:var(--card); color:var(--navy); border-radius:15px;
  min-height:32px; padding:0 12px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.ln-filter { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; }
.ln-filter--scroll { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.ln-filter--scroll::-webkit-scrollbar { display:none; }
.ln-filter--scroll button { flex:none; }
.ln-filter button.an { background:var(--prim); border-color:var(--prim); color:var(--prim-ink); }
.ln-filter small { margin-left:6px; font-size:11.5px; font-weight:800; opacity:.75; }
.ln-gruppe { margin-top:16px; }
.ln-gruppe h4 { margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--navy); }
.ln-liste { padding-top:4px; padding-bottom:4px; }
.ln-liste .li { width:100%; background:none; border-left:0; border-right:0; border-top:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.ln-liste .li:last-child { border-bottom:0; }
.ln-tr mark { background:rgba(21,119,155,.18); color:inherit; border-radius:4px; padding:0 1px; }
.ln-alle { border:0; background:none; font:inherit; font-size:13.5px; font-weight:800; color:var(--teal); padding:10px 0 4px; cursor:pointer; }
.ln-leer { margin-top:16px; padding:22px 18px; border-radius:22px; background:var(--card); border:var(--card-border);
  text-align:center; color:var(--muted); font-size:14px; font-weight:600; line-height:1.45; }
.ln-leer b { display:block; color:var(--navy); font-size:15px; margin-bottom:4px; }

/* Videokurse und Reiseführer mit Kursmotiv (Fabio 09.11.2026, 02_Lernen.md, Prototyp Lernen_Kacheln_Motiv.html, Entwurf A).
   Motiv randlos, Ausschnitt mittig; Videokurse drei feste Streifen (genetik, blutanalyse, darm von links), Reiseführer
   einfuehrungskurs. Bilder unter /assets/kacheln/ (aus den Thumbnails auf 800 x 450 verkleinert, WebP; die Kachel ist
   klein, die vollen 1280 x 720 bleiben für Kursliste und Kursseite). Darüber der Schleier von oben rechts (fast
   durchsichtig) nach unten links (fast deckend) in der Kachelfarbe, Werte aus dem Prototyp. Solange das Bild lädt,
   bleibt der bisherige Kachelverlauf (.tile.nav / .tile.teal) darunter sichtbar. Symbol als Glaskachel oben links. */
.tile.ln-motiv { min-height:150px; padding:14px; justify-content:flex-end; gap:0; isolation:isolate; color:#fff; }
.ln-motiv__bild { position:absolute; inset:0; z-index:-2; display:flex; }
.ln-motiv__bild i { flex:1; background-size:cover; background-position:center; }
.ln-motiv__bild i + i { border-left:1.5px solid rgba(255,255,255,.35); }
.ln-motiv--vk .ln-motiv__bild i:nth-child(1) { background-image:url('/assets/kacheln/genetik.webp'); }
.ln-motiv--vk .ln-motiv__bild i:nth-child(2) { background-image:url('/assets/kacheln/blutanalyse.webp'); }
.ln-motiv--vk .ln-motiv__bild i:nth-child(3) { background-image:url('/assets/kacheln/darm.webp'); }
.ln-motiv--rf .ln-motiv__bild i { background-image:url('/assets/kacheln/einfuehrungskurs.webp'); }
.ln-motiv__schleier { position:absolute; inset:0; z-index:-1; }
.ln-motiv--vk .ln-motiv__schleier { background:linear-gradient(200deg,rgba(16,21,95,.05) 15%,rgba(16,21,95,.6) 50%,rgba(16,21,95,.96) 88%); }
.ln-motiv--rf .ln-motiv__schleier { background:linear-gradient(200deg,rgba(15,90,119,0) 15%,rgba(15,90,119,.55) 50%,rgba(13,72,96,.96) 88%); }
.ln-motiv > .ic { position:absolute; top:12px; left:12px; width:38px; height:38px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tile.ln-motiv > .ic .hji { width:21px; height:21px; color:#fff; --ic-acc:#fff; }
.tile.ln-motiv .t { font-size:18px; font-weight:800; letter-spacing:-.2px; line-height:1.15; color:#fff; }
.tile.ln-motiv .s { font-size:12.5px; font-weight:700; line-height:1.35; margin-top:2px; color:#fff; opacity:.85; }
/* Schild „x von 5“ nur beim Reiseführer (Fabio 10.11., Prototyp Lernen_Kacheln_Motiv.html .chip); lernen.js setzt es. */
.ln-motiv__zahl { position:absolute; top:14px; right:12px; font-size:11px; font-weight:900; padding:4px 9px; border-radius:10px;
  background:rgba(255,255,255,.92); color:#10155F; font-variant-numeric:tabular-nums; }
.ln-motiv__zahl[hidden] { display:none; }

/* ---- Kursbild ---- */
.ln-th { --ta:#0E4F6B; --tb:#2B9FBF; position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg,var(--ta),var(--tb)); color:#fff; isolation:isolate; }
.ln-th--43 { aspect-ratio:4/3; border-radius:14px; }
.ln-th--gruen { --ta:#17657E; --tb:#5DBB72; }
.ln-th--nacht { --ta:#171A5E; --tb:#4A4C9E; }
.ln-th--rose { --ta:#7A1F4A; --tb:#D2668A; }
.ln-th--violett { --ta:#261A68; --tb:#7454C9; }
.ln-th--rot { --ta:#5E1233; --tb:#C2394E; }
.ln-th--blau { --ta:#10155F; --tb:#2E7299; }
.ln-th--teal { --ta:#0F5A77; --tb:#15779B; }
.ln-th__foto { position:absolute; inset:0; background-size:cover; background-position:center; z-index:-1; }
.ln-th__schleier { position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,14,38,.05) 30%,rgba(11,14,38,.6)); }
.ln-th__kachel { position:absolute; left:10px; top:10px; width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.ln-th__kachel .hji { width:20px; height:20px; --ic-acc:currentColor; color:#fff; }
.ln-th--43 .ln-th__kachel { left:7px; top:7px; width:26px; height:26px; border-radius:9px; }
.ln-th--43 .ln-th__kachel .hji { width:15px; height:15px; }

/* ---- Videokurse ---- */
.ln-sub { margin:0 0 10px; font-size:14px; font-weight:700; color:var(--muted); }
.ln-kursliste { display:flex; flex-direction:column; gap:10px; }
/* „Für dich empfohlen" ueber der Kursliste (Kursvorschlag aus der Anamnese) */
.ln-empf { margin-bottom:6px; }
.ln-empf__t { margin:4px 2px 10px; font-size:15px; font-weight:800; color:var(--navy); }
.ln-empf .ln-kursliste + .ln-empf__t { margin-top:18px; }
.ln-kurs { display:flex; align-items:center; gap:14px; width:100%; padding:10px 14px 10px 10px; border-radius:22px; border:var(--card-border);
  background:var(--card); box-shadow:var(--shadow-card); font:inherit; text-align:left; color:inherit; cursor:pointer; }
.ln-kurs__bild { width:96px; flex:none; }
.ln-kurs__tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ln-kurs__tx b { font-size:16px; font-weight:800; color:var(--navy); overflow-wrap:anywhere; hyphens:auto; }
.ln-kurs__tx small { font-size:13px; font-weight:700; color:var(--muted); }
.ln-kurs .chev, .ln-lek__z .chev { font-size:22px; color:var(--muted-2); }

/* ---- Kursseite: Poster vor dem Player ---- */
.ln-player { margin-top:6px; }
.ln-player .vwrap { border-radius:18px; overflow:hidden; }
.ln-poster { position:relative; }
.ln-poster--leer { aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--card2); }
.ln-poster__tx { position:absolute; left:16px; right:16px; bottom:14px; color:#fff; pointer-events:none; }
.ln-poster__tx small { display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.ln-poster__tx b { display:block; margin-top:3px; font-size:19px; font-weight:900; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.25); }
.ln-poster__tx span { display:block; margin-top:3px; font-size:13px; font-weight:700; color:rgba(255,255,255,.88); }
.ln-poster__play { position:absolute; inset:0; display:grid; place-items:center; border:0; background:none; cursor:pointer; padding:0 0 30px; }
.ln-poster__play span { width:64px; height:64px; border-radius:32px; display:grid; place-items:center; background:rgba(255,255,255,.92); color:#10155F;
  box-shadow:0 10px 30px rgba(11,14,38,.35); }
.ln-poster__play svg { width:26px; height:26px; margin-left:3px; }
.ln-poster__play:focus-visible span { outline:3px solid #fff; outline-offset:3px; }
.ln-poster__hinweis { position:absolute; right:14px; top:14px; padding:4px 10px; border-radius:999px; background:rgba(11,14,38,.55); color:#fff; font-size:12px; font-weight:800; }
.ln-lek { display:flex; flex-direction:column; background:var(--card); border:var(--card-border); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-card); }
.ln-lek__z { display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px; border:0; border-top:1px solid var(--line-2); background:none;
  font:inherit; text-align:left; color:inherit; cursor:pointer; }
.ln-lek__z:first-child { border-top:0; }
.ln-lek__z.an { background:var(--card2); }
.ln-lek__bild { position:relative; width:76px; flex:none; }
.ln-lek__bild .nr { position:absolute; right:-6px; bottom:-6px; width:24px; height:24px; border-radius:12px; display:grid; place-items:center;
  font-size:12px; font-weight:900; background:var(--card); color:var(--navy); box-shadow:0 0 0 2px var(--card); }
.ln-lek__z.an .nr { background:var(--navy); color:var(--card); box-shadow:0 0 0 2px var(--card2); }
/* Gesehene Lektion (Fabio 10.11.): Haken statt Nummer, wie im Prototyp (kurse.py, .fertig). */
.ln-lek__z.fertig .nr { background:var(--teal); color:var(--on-teal); }
.ln-lek__z.fertig .nr .hji { width:14px; height:14px; color:var(--on-teal); --ic-acc:var(--on-teal); }
.ln-lek__tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ln-lek__tx b { font-size:15px; font-weight:800; color:var(--navy); }
.ln-lek__tx small { font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---- Guides: Kopf, Reiter, Karten ---- */
.ln-kopf { padding-bottom:22px; }
.ln-kick { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.88); flex:1; min-width:0; }
.ln-kopf__bm .bm { color:#fff; }
.ln-kopf .ln-mark { position:absolute; right:-18px; bottom:-26px; width:150px; height:150px; opacity:.13; z-index:0; }
.ln-reiter { display:flex; gap:6px; margin-top:16px; padding:4px; border-radius:16px; background:rgba(255,255,255,.16); }
.ln-reiter[hidden] { display:none; }
.ln-reiter button { flex:1; height:38px; border:0; border-radius:12px; background:none; color:#fff; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.ln-reiter button.an { background:#fff; color:#10155F; }
.ln-karte { margin-top:12px; }
.ln-kick-k, .ln-karte .ln-kick { display:block; color:var(--teal); font-size:11.5px; margin:0 0 4px; }
.ln-h { margin:0 0 8px; font-size:17px; font-weight:800; color:var(--navy); line-height:1.25; }
.ln-ein, .ln-t { margin:0 0 8px; font-size:14.5px; line-height:1.55; color:var(--ink); }
.ln-t:last-child { margin-bottom:0; }
.ln-tipp, .ln-klein { margin:4px 0 8px; font-size:12.5px; font-weight:700; color:var(--muted); }
.ln-weiter { border:0; background:none; padding:0 10px; margin:0 -10px; min-height:44px; display:inline-flex; align-items:center;
  font:inherit; font-weight:800; color:var(--teal); cursor:pointer; }
.ln-mehr[hidden] { display:none; }
.ln-z { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line-2); }
.ln-h + .ln-z, .ln-ein + .ln-z { border-top:0; padding-top:4px; }
.ln-z b { display:block; font-size:15px; font-weight:800; color:var(--navy); }
.ln-z p { margin:2px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink); }
.ln-z__punkt { width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none; margin-top:8px; }
.ln-z__ic { width:30px; height:30px; border-radius:10px; flex:none; display:grid; place-items:center; background:rgba(21,119,155,.12); color:var(--teal); }
.ln-z__ic .hji { width:18px; height:18px; }
.ln-nr { width:28px; height:28px; border-radius:14px; flex:none; display:grid; place-items:center; font-size:13px; font-weight:900; background:var(--card2); color:var(--navy); }
.ln-auf { border-top:1px solid var(--line-2); }
.ln-auf summary { display:flex; align-items:center; gap:10px; padding:12px 0; cursor:pointer; list-style:none; }
.ln-auf summary::-webkit-details-marker { display:none; }
.ln-auf summary b { flex:1; font-size:15px; font-weight:800; color:var(--navy); }
.ln-auf__pfeil { display:inline-flex; }
.ln-auf__pfeil .hji { width:16px; height:16px; color:var(--muted-2); transition:transform .15s; }
.ln-auf[open] .ln-auf__pfeil .hji { transform:rotate(90deg); }
.ln-auf p { margin:0 0 12px; font-size:14.5px; line-height:1.5; color:var(--ink); }
.ln-menge { flex:none; padding:4px 10px; border-radius:999px; background:rgba(21,119,155,.12); color:var(--teal); font-size:12.5px; font-weight:800; white-space:nowrap; }
.ln-menge--vorsicht { background:var(--amber-100); color:var(--amber-t); }
.ln-hint { margin-top:12px; cursor:default; }
.ln-verweis { display:flex; align-items:center; gap:14px; width:100%; margin-top:12px; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.ln-verweis b { display:block; font-size:15.5px; font-weight:800; color:var(--navy); }
.ln-verweis small { display:block; margin-top:2px; font-size:13px; font-weight:700; color:var(--muted); }
.ln-verweis > span:nth-child(2) { flex:1; }
.ln-verweis__ic { width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#5E1233,#C2394E); }
.ln-verweis__ic .hji { --ic-acc:currentColor; }
.ln-seg { display:flex; gap:6px; padding:4px; border-radius:14px; background:var(--card2); margin:4px 0 10px; }
.ln-seg button { flex:1; height:34px; border:0; border-radius:10px; background:none; font:inherit; font-size:13.5px; font-weight:800; color:var(--navy); cursor:pointer; }
.ln-seg button.an { background:var(--card); box-shadow:var(--shadow-sm); }
.ln-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.ln-plus[hidden] { display:none; }
.ln-aus { background:var(--card2); color:var(--muted); }
.ln-pill-knopf { border:0; cursor:pointer; font:inherit; font-size:12px; font-weight:800; }
.ln-pill-knopf .hji { width:14px; height:14px; }
.ln-stufe { padding:10px 0; border-top:1px solid var(--line-2); }
.ln-stufe .pill { margin-bottom:8px; }
.ln-lm { padding:4px 10px; border-radius:999px; background:var(--card2); font-size:12.5px; font-weight:700; color:var(--ink); }

/* ---- Optimalwerte ---- */
.ln-ow-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.ln-ow-kopf .ln-h { margin:0; }
.ln-legende { display:flex; gap:12px; font-size:12px; font-weight:700; color:var(--muted); margin-top:6px; }
.ln-legende i, .ln-balken i { display:inline-block; }
.ln-legende i { width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.ln-legende .ref, .ln-balken .ref { background:rgba(21,119,155,.24); }
.ln-legende .opt, .ln-balken .opt { background:linear-gradient(90deg,var(--green),var(--green-d)); }
.ln-ow { padding:12px 0; border-top:1px solid var(--line-2); }
.ln-ow__kopf { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ln-ow__kopf b { font-size:15px; font-weight:800; color:var(--navy); }
.ln-ow__kopf b mark { background:rgba(21,119,155,.18); color:inherit; border-radius:4px; }
.ln-ow__kopf small { font-size:12px; font-weight:700; color:var(--muted); }
.ln-ow__label { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:999px; background:var(--card2); font-size:11.5px; font-weight:800; color:var(--muted); }
.ln-balken { position:relative; height:8px; border-radius:4px; background:var(--card2); margin:8px 0 6px; overflow:hidden; }
.ln-balken i { position:absolute; top:0; bottom:0; border-radius:4px; }
.ln-balken .opt { top:1px; bottom:1px; }
.ln-balken--bild { height:12px; margin-top:12px; }
.ln-ow__werte { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; font-weight:700; color:var(--ink); }
.ln-ow__werte em { font-style:normal; color:var(--muted); margin-right:6px; }
.ln-fuss { margin:12px 4px 0; font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }

/* Paket 7: Kursseite mit Motiv aus dem Thumbnail-Paket. Titel, „Lektion 1 von n" und Dauer liegen im
   Baustein, der Abspielknopf mittig darueber. */
.ln-poster--th .ln-poster__play { padding:0; }
.ln-kurs__bild .th, .ln-lek__bild .th { display:block; }

/* Sollte 45 (Fabio 24.10.): „Merken" in Kursliste und Kursseite war 20 x 20. Jetzt 44 x 44 Tippflaeche,
   das Symbol bleibt so gross; der negative Rand haelt die Zeilenhoehe. */
.ln-kurs .bm, .ln-lek__z .bm { display:inline-grid; place-items:center; flex:none; width:44px; height:44px; margin:-10px -6px;
  border-radius:22px; cursor:pointer; color:var(--muted-2); }
.ln-kurs .bm .hji, .ln-lek__z .bm .hji { width:20px; height:20px; }
.ln-kurs .bm.on, .ln-lek__z .bm.on { color:var(--amber); }