/* Lernpfad-App (lernen/lernpfad.html und Verwaltung „Ansicht wie bei …“): an TentaTipp angelehnt, aber in der Farbe des Lernpfads bzw. Programms (--lpa-f, gesetzt von
   js/lernen-lernpfad-app.js aus programme.php). Alles unter .lpa – eigene Variablen mit Ersatzwerten, damit es auch in der Verwaltung ohne css/lernen.css trägt.
   Handy ab 375 px ohne waagrechtes Scrollen, Fokus sichtbar, Animationen nur ohne „Bewegung reduzieren“. */
.lpa{--lpa-f:#00797b;--lpa-fd:#0b4f50;--lpa-fh:#e0f1f1;--lpa-fhh:#f0f8f8;--lpa-ink:#101820;--lpa-muted:#536373;--lpa-line:#dbe3e9;--lpa-flaeche:#fff;--lpa-gold:#d4a017;--lpa-ok:#176440;--lpa-warn:#b33737;
  --lpa-schatten:0 14px 34px rgba(7,35,52,.07);--lpa-radius:20px;color:var(--lpa-ink);font-family:var(--font,'Inter',system-ui,sans-serif)}
.lpa *,.lpa *:before,.lpa *:after{box-sizing:border-box}
.lpa a:focus-visible,.lpa button:focus-visible,.lpa summary:focus-visible,.lpa [tabindex]:focus-visible{outline:3px solid var(--lpa-gold);outline-offset:3px}
.lpa .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.lpa-nurlesen{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:#fff8e6;border-left:4px solid var(--lpa-gold);font-size:14px}
.lpa-nurlesen b{margin-right:4px}

/* Hero */
.lpa-hero{position:relative;overflow:hidden;border-radius:26px;color:#fff;background:radial-gradient(900px 260px at 85% 0,color-mix(in srgb,var(--lpa-f) 80%,#fff) 0,transparent 60%),linear-gradient(135deg,var(--lpa-fd),var(--lpa-f));box-shadow:var(--lpa-schatten)}
.lpa-hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:24px;align-items:center;padding:clamp(18px,3.4vw,34px)}
.lpa-hero-eyebrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#fff}
.lpa-hero-eyebrow>span:first-child{opacity:.85;margin-right:4px}
.lpa-titel{font:700 clamp(32px,5vw,56px)/1.02 var(--headline,'Barlow Condensed',Impact,sans-serif);letter-spacing:-.02em;margin:.2em 0 .25em;color:#fff}
.lpa-titel:focus{outline:none}
.lpa-hero-text{margin:0 0 16px;max-width:62ch;color:rgba(255,255,255,.9);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lpa-hero-bild{position:relative;min-width:0}
.lpa-hero-bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;border:3px solid rgba(255,255,255,.65);box-shadow:0 14px 30px rgba(0,0,0,.28);background:rgba(255,255,255,.15)}
.lpa-ring{position:absolute;right:-6px;bottom:-14px;width:112px;height:112px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.lpa-ring-grund{fill:#fff;stroke:var(--lpa-fh);stroke-width:12}
.lpa-ring-wert{fill:none;stroke:var(--lpa-f);stroke-width:12;stroke-linecap:round}
.lpa-ring-zahl{font:800 26px var(--headline,'Barlow Condensed',sans-serif);fill:var(--lpa-ink)}.lpa-ring-text{font:700 11px var(--font,sans-serif);fill:var(--lpa-muted);letter-spacing:.06em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){.lpa-ring-wert{transition:stroke-dasharray .8s ease}}
.lpa-weiter-box{margin-top:6px}
.lpa-weiter{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:100%;min-height:48px;padding:12px 20px;border-radius:16px;background:#fff;color:var(--lpa-ink);border:0;text-decoration:none;font:inherit;text-align:left;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.lpa-weiter-k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lpa-fd)}
.lpa-weiter-t{font:700 clamp(18px,2.4vw,22px)/1.25 var(--font,sans-serif);overflow-wrap:anywhere}
.lpa-weiter small{font-size:13px;color:var(--lpa-muted)}
a.lpa-weiter:hover,button.lpa-weiter:hover{background:var(--lpa-fhh)}
.lpa-weiter.aus{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;border:1px dashed rgba(255,255,255,.6);cursor:default}
.lpa-weiter.aus .lpa-weiter-k,.lpa-weiter.aus small{color:rgba(255,255,255,.88)}
@media (prefers-reduced-motion:no-preference){a.lpa-weiter{transition:transform .15s}a.lpa-weiter:hover{transform:translateY(-2px)}}
.lpa-chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--lpa-fh);color:var(--lpa-fd);font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.5}
.lpa-chip-prog{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.45)}

/* Reiter */
.lpa-reiter{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 6px}
.lpa-reiter-k{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--lpa-flaeche);border:1px solid var(--lpa-line);color:var(--lpa-ink);font:700 14px var(--font,sans-serif);cursor:pointer}
.lpa-reiter-k:hover{border-color:var(--lpa-f)}
.lpa-reiter-k.an{background:var(--lpa-fd);border-color:var(--lpa-fd);color:#fff}
.lpa-reiter-zahl{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:99px;background:var(--lpa-fh);color:var(--lpa-fd);font-size:12px}
.lpa-reiter-k.an .lpa-reiter-zahl{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:640px){.lpa-reiter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}.lpa-reiter-k{white-space:nowrap;padding:8px 12px}}
.lpa-panel{padding-top:6px}.lpa-panel:focus{outline:none}.lpa-panel:focus-visible{outline:3px solid var(--lpa-gold);outline-offset:4px;border-radius:12px}
.lpa-h2{font:700 clamp(26px,3.4vw,34px)/1.1 var(--headline,'Barlow Condensed',sans-serif);letter-spacing:-.02em;margin:18px 0 12px}
.lpa-lead{color:var(--lpa-muted);margin:-4px 0 14px}
.lpa-leer{color:var(--lpa-muted);font-size:14px;margin:6px 0}

/* Statistikkarten */
.lpa-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.lpa-stat{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px 18px;border-radius:18px;background:var(--lpa-flaeche);border:1px solid var(--lpa-line);box-shadow:var(--lpa-schatten);border-top:4px solid var(--lpa-f)}
.lpa-stat.gross{background:linear-gradient(160deg,var(--lpa-fhh),#fff)}
@media (min-width:761px){.lpa-stat.gross{grid-column:span 2}}
.lpa-stat.warn{border-top-color:var(--lpa-warn)}
.lpa-stat-t{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lpa-muted)}
.lpa-stat-w{font:700 clamp(30px,4vw,40px)/1 var(--headline,'Barlow Condensed',sans-serif);color:var(--lpa-ink)}
.lpa-stat-u{font-size:13px;color:var(--lpa-muted);line-height:1.4}
.lpa-balken{display:block;height:8px;border-radius:99px;background:var(--lpa-fh);overflow:hidden;margin:4px 0 2px}
.lpa-balken i{display:block;height:100%;border-radius:99px;background:var(--lpa-f)}

/* Zeitplan */
.lpa-plan-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lpa-plan-spalte{padding:14px 16px;border-radius:18px;background:var(--lpa-flaeche);border:1px solid var(--lpa-line);min-width:0}
.lpa-plan-spalte h3{margin:0 0 8px;font-size:16px}
.lpa-plan-spalte.amp-ueberfaellig{border-left:5px solid var(--lpa-warn)}.lpa-plan-spalte.amp-heute{border-left:5px solid var(--lpa-gold)}.lpa-plan-spalte.amp-woche{border-left:5px solid var(--lpa-f)}
.lpa-plan-spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lpa-plan-spalte li{display:flex;flex-direction:column;gap:1px}
.lpa-plan-spalte small{color:var(--lpa-muted);font-size:12px}
.lpa-plan-link{font:700 15px/1.35 var(--font,sans-serif);color:var(--lpa-fd);text-align:left;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

/* Aufgaben & Module */
.lpa-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.lpa-filter-k{min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--lpa-line);background:#fff;color:var(--lpa-ink);font:700 13px var(--font,sans-serif);cursor:pointer}
.lpa-filter-k[aria-pressed=true]{background:var(--lpa-fh);border-color:var(--lpa-f);color:var(--lpa-fd)}
.lpa-schritte{display:grid;gap:12px}
.lpa-schritt{--lpa-p:var(--lpa-f);position:relative;padding:16px 18px 16px 22px;border-radius:18px;background:var(--lpa-flaeche);border:1px solid var(--lpa-line);box-shadow:var(--lpa-schatten);overflow:hidden;min-width:0}
.lpa-schritt:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--lpa-p)}
.lpa-schritt.st-geschafft{background:linear-gradient(90deg,#f3faf6,#fff 40%)}
.lpa-schritt.markiert{box-shadow:0 0 0 3px var(--lpa-gold),var(--lpa-schatten)}
.lpa-schritt:focus{outline:none}
.lpa-schritt-kopf{display:flex;gap:14px;align-items:flex-start}
.lpa-logo{--lpa-p:var(--lpa-f);position:relative;flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--lpa-p);color:#fff;font:800 16px var(--font,sans-serif)}
.lpa-logo.mit-bild{background:#fff;border:1px solid var(--lpa-line)}
.lpa-logo.verlauf{background:var(--lpa-pv);text-shadow:0 1px 1px rgba(0,0,0,.35)}.lpa-schritt.pv:before{background:var(--lpa-pv)}   /* Programm mit Farbverlauf (VERLAEUFE in js/lernen-lernpfad-app.js) */
.lpa-logo img{width:36px;height:36px;object-fit:contain}
.lpa-schritt-nr{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:99px;background:var(--lpa-ink);color:#fff;font:800 12px var(--font,sans-serif);border:2px solid #fff}
.lpa-schritt-tx{min-width:0;flex:1}
.lpa-schritt h3{margin:4px 0 0;font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.lpa-chips{display:flex;flex-wrap:wrap;gap:5px}
.lpa-chip.st-geschafft{background:#e3f3ea;color:var(--lpa-ok)}.lpa-chip.st-in_arbeit{background:#fff3d6;color:#7a5600}.lpa-chip.st-bald,.lpa-chip.leise{background:#eef2f5;color:var(--lpa-muted)}
.lpa-chip.prog{background:#fff;border:1px solid var(--lpa-line);color:var(--lpa-ink)}
.lpa-werte{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 14px;margin:14px 0 4px}
.lpa-werte div{min-width:0}
.lpa-werte dt{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lpa-muted)}
.lpa-werte dd{margin:0;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.lpa-sterne{color:var(--lpa-gold);letter-spacing:1px;white-space:nowrap}
.lpa-herkunft{margin:6px 0 0;font-size:13px;color:var(--lpa-muted)}
.lpa-schritt-fuss{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;margin-top:10px;padding-top:8px;border-top:1px solid var(--lpa-line)}
.lpa-schritt-fuss .lpa-detail{flex:1 1 260px;min-width:0}
.lpa-schritt-fuss .lpa-detail[open]{flex-basis:100%}
.lpa-schritt-akt{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.lpa-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;border-radius:12px;border:1px solid var(--lpa-line);background:#fff;color:var(--lpa-ink);font:800 14px var(--font,sans-serif);text-decoration:none;cursor:pointer}
.lpa-knopf.primaer{background:var(--lpa-fd);border-color:var(--lpa-fd);color:#fff}.lpa-knopf.primaer:hover{background:var(--lpa-f);border-color:var(--lpa-f)}
.lpa-detail{margin:0}
.lpa-detail summary{min-height:40px;display:flex;align-items:center;font-weight:800;color:var(--lpa-fd);cursor:pointer}
.lpa-box h4{margin:10px 0 4px;font-size:14px}
.lpa-box ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.lpa-box li{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--lpa-muted)}
.lpa-box li.ok{color:var(--lpa-ink)}

/* Leistungen */
.lpa-leistungen{display:grid;gap:14px}
.lpa-leistungen>.lpa-h2{margin-bottom:0}
.lpa-diagramm{margin:0;padding:16px 18px;border-radius:18px;background:var(--lpa-flaeche);border:1px solid var(--lpa-line);box-shadow:var(--lpa-schatten);min-width:0}
.lpa-diagramm figcaption{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.lpa-diagramm figcaption strong{font-size:17px}.lpa-diagramm figcaption span{font-size:13px;color:var(--lpa-muted)}
.lpa-diagramm h3{margin:0 0 10px;font-size:17px}
.lpa-svg{display:block;width:100%;height:auto;max-width:100%}
.lpa-gitter{stroke:#e6ecf0;stroke-width:1}
.lpa-achse{font:600 11px var(--font,sans-serif);fill:var(--lpa-muted)}
.lpa-wert{font:700 12px var(--font,sans-serif);fill:var(--lpa-ink)}
.lpa-flaeche{fill:var(--lpa-f);opacity:.14}
.lpa-linie{fill:none;stroke:var(--lpa-f);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.lpa-punkt{fill:var(--lpa-f);stroke:#fff;stroke-width:2}
.lpa-bar{fill:var(--lpa-f)}.lpa-bar.voll{fill:var(--lpa-fd)}
.lpa-heat-box{overflow-x:auto}
.lpa-svg.lpa-heat{width:auto;max-width:100%}
.lpa-zelle.z0{fill:#edf1f4}.lpa-zelle.z1{fill:color-mix(in srgb,var(--lpa-f) 28%,#fff)}.lpa-zelle.z2{fill:color-mix(in srgb,var(--lpa-f) 52%,#fff)}.lpa-zelle.z3{fill:color-mix(in srgb,var(--lpa-f) 78%,#fff)}.lpa-zelle.z4{fill:var(--lpa-fd)}
.lpa-legende{display:flex;align-items:center;gap:4px;margin:8px 0 0;font-size:12px;color:var(--lpa-muted)}
.lpa-legende i{width:13px;height:13px;border-radius:3px;display:inline-block}
.lpa-legende i.z0{background:#edf1f4}.lpa-legende i.z1{background:color-mix(in srgb,var(--lpa-f) 28%,#fff)}.lpa-legende i.z2{background:color-mix(in srgb,var(--lpa-f) 52%,#fff)}.lpa-legende i.z3{background:color-mix(in srgb,var(--lpa-f) 78%,#fff)}.lpa-legende i.z4{background:var(--lpa-fd)}
.lpa-tabelle{margin-top:10px}.lpa-tabelle summary{font-size:13px;font-weight:700;color:var(--lpa-fd);min-height:32px;display:flex;align-items:center}
.lpa table{width:100%;border-collapse:collapse;font-size:14px}
.lpa th,.lpa td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--lpa-line);vertical-align:top}
.lpa th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lpa-muted)}
.lpa-summen{overflow-x:auto}

/* Abzeichen */
.lpa-abz-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.lpa-abz{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 14px;border-radius:18px;background:var(--lpa-flaeche);border:1px solid var(--lpa-line);box-shadow:var(--lpa-schatten)}
.lpa-abz strong{font-size:16px}.lpa-abz-text{font-size:13px;color:var(--lpa-muted);line-height:1.4}.lpa-abz-stand{font-size:12px;font-weight:800;color:var(--lpa-muted)}
.lpa-abz .lpa-balken{width:80%}
.lpa-abz-grund{fill:#eef2f5;stroke:#cfd8df;stroke-width:2}
.lpa-abz-icon{fill:none;stroke:#9aa7b2;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.lpa-abz-icon.voll{fill:#cfd8df}
.lpa-abz.erreicht{border-color:var(--lpa-gold);background:linear-gradient(180deg,#fffaf0,#fff)}
.lpa-abz.erreicht .lpa-abz-grund{fill:var(--lpa-fd);stroke:var(--lpa-gold);stroke-width:3}
.lpa-abz.erreicht .lpa-abz-icon{stroke:#fff}.lpa-abz.erreicht .lpa-abz-icon.voll{fill:var(--lpa-gold);stroke:#fff}
.lpa-abz.erreicht .lpa-abz-stand{color:var(--lpa-ok)}
.lpa-abz.ohne{opacity:.6}
@media (prefers-reduced-motion:no-preference){.lpa-abz.erreicht .lpa-abz-bild{animation:lpa-glanz 3.5s ease-in-out infinite}}
@keyframes lpa-glanz{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg) scale(1.04)}}

/* Reise: der Weg aus css/lernen-pfad.css ohne doppelten Rahmen */
.lpa-reise{margin-top:12px}

/* Handy */
@media (max-width:760px){
  .lpa-hero{border-radius:20px}
  .lpa-hero-in{grid-template-columns:1fr;gap:18px}
  .lpa-hero-bild{order:-1}
  .lpa-ring{width:92px;height:92px;right:8px;bottom:-12px}
  .lpa-weiter{width:100%}
  .lpa-plan-raster{grid-template-columns:1fr}
  .lpa-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lpa-stat{padding:12px 14px}
  .lpa-stat.gross{grid-column:1/-1}
  .lpa-werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lpa-schritt{padding:14px 14px 14px 18px}
  .lpa-abz-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Seite lernen/lernpfad.html */
.lpa-seite main.shell{padding-top:20px}
.lpa-topnav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.lpa-topnav a{color:#e2e9ed;font-size:13px;font-weight:700;text-decoration:none}.lpa-topnav a:hover,.lpa-topnav a:focus-visible{color:#fff;text-decoration:underline}
.lpa-wer{font-size:13px;color:var(--gold,#d0bd8c);font-weight:700}
.lpa-laedt{color:var(--muted,#536373)}
.lpa-auswahl ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.lpa-auswahl a{font-weight:800;font-size:18px}
@media (max-width:420px){.lpa-topnav a.lpa-nav-ub{display:none}}

/* Verwaltung: Dialog „Ansicht wie bei …“ */
.lm-lpa-dialog{max-width:1180px!important}
.lm-lpa-dialog .lpa{padding:2px}
/* Theorie-Training (lernmodul-api/training.php) in der Übersicht, Arbeitsauftrag-Hinweis (auftrag.php) in der Schrittkarte */
.lpa-training{margin:18px 0;padding:16px 18px;border-radius:var(--lpa-radius);background:#f0f9ff;border:1px solid #bae6fd}
.lpa-training .lpa-h2{margin-top:0}
.lpa-training-text{margin:0 0 10px;max-width:80ch;line-height:1.5;color:var(--lpa-ink)}
.lpa-training-stand{margin:10px 0 6px;font-weight:700}
.lpa-training-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lpa-training-liste li{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,180px) auto;gap:10px;align-items:center;font-size:14px}
.lpa-training-liste li>span:first-child{overflow-wrap:anywhere}
.lpa-training-liste b{font-variant-numeric:tabular-nums;white-space:nowrap}
.lpa-original{background:#fff7e6;border-left:4px solid #f2c14e;padding:6px 10px;border-radius:0 10px 10px 0}
@media (max-width:520px){.lpa-training-liste li{grid-template-columns:minmax(0,1fr) auto}.lpa-training-liste li>:nth-child(2){grid-column:1 / -1;order:3}}