/* 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; }

/* ---- 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; }
.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); }
.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); }
.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; 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; }