/*
 * Ergebnisdarstellung einer Trainingseinheit (templates/landing/_demo_training_result.html).
 *
 * Genutzt von der #system-Demo auf der Landingpage UND von den Kampagnenseiten
 * unter /start/. Deshalb steht jede Regel unter zwei Selektoren: .ttd-scope fuer
 * die Kampagnenseiten, #system fuer die Landingpage, die den Block frueher
 * inline im <style> hatte. Eine Quelle, kein Doppelpflegen.
 */
/* Ergebnis: training_detail-Look */
.ttd-scope .ttd-tr-stats, #system .ttd-tr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem}
.ttd-scope .ttd-tr-stat, #system .ttd-tr-stat{background:#f8fafc;border:1px solid #eef2f7;border-radius:.8rem;padding:.8rem;text-align:center}
.ttd-scope .ttd-tr-stat-num, #system .ttd-tr-stat-num{font-size:1.6rem;font-weight:800;color:#0f172a;line-height:1}
.ttd-scope .ttd-tr-stat-lbl, #system .ttd-tr-stat-lbl{font-size:.72rem;color:#94a3b8;font-weight:600;margin-top:.25rem}
.ttd-scope .ttd-tr-summary, #system .ttd-tr-summary{font-size:.85rem;font-weight:700;color:#10b981;margin:0 0 .8rem}
.ttd-scope .ttd-tr-list, #system .ttd-tr-list{display:flex;flex-direction:column}
/* Bild-Anordnung wie trainings/training_detail.html: Bild links (lg:2/5), Inhalt rechts, object-contain */
.ttd-scope .ttd-tr-ex, #system .ttd-tr-ex{display:flex;flex-direction:column;gap:1rem;padding:1.2rem 0;border-bottom:1px solid #eef2f7}
.ttd-scope .ttd-tr-ex:first-child, #system .ttd-tr-ex:first-child{padding-top:.2rem}
.ttd-scope .ttd-tr-ex:last-child, #system .ttd-tr-ex:last-child{border-bottom:none;padding-bottom:.2rem}
@media(min-width:1024px){ .ttd-scope .ttd-tr-ex, #system .ttd-tr-ex{flex-direction:row;gap:1.2rem}
}
.ttd-scope .ttd-tr-ex-img, #system .ttd-tr-ex-img{flex:none;width:100%}
@media(min-width:1024px){ .ttd-scope .ttd-tr-ex-img, #system .ttd-tr-ex-img{width:40%;max-width:20rem}
}
.ttd-scope .ttd-tr-ex-imgwrap, #system .ttd-tr-ex-imgwrap{border-radius:.75rem;overflow:hidden;box-shadow:0 4px 14px -6px rgba(15,23,42,.3)}
.ttd-scope .ttd-tr-ex-img img, #system .ttd-tr-ex-img img{width:100%;max-height:300px;object-fit:contain;background:#f8fafc;display:block}
.ttd-scope .ttd-tr-ex-ph, #system .ttd-tr-ex-ph{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e2e8f0,#f8fafc)}
.ttd-scope .ttd-tr-ex-ph svg, #system .ttd-tr-ex-ph svg{width:2.4rem;height:2.4rem;fill:none;stroke:#94a3b8;stroke-width:1.4}
.ttd-scope .ttd-tr-ex-body, #system .ttd-tr-ex-body{flex:1;min-width:0}
.ttd-scope .ttd-tr-ex-head, #system .ttd-tr-ex-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.ttd-scope .ttd-tr-ex-num, #system .ttd-tr-ex-num{flex:none;width:1.8rem;height:1.8rem;display:flex;align-items:center;justify-content:center;background:#0f172a;color:#fff;font-size:.85rem;font-weight:800;border-radius:.45rem}
.ttd-scope .ttd-tr-ex-title, #system .ttd-tr-ex-title{font-size:1.08rem;font-weight:700;color:#0f172a;margin:0;line-height:1.25}
.ttd-scope .ttd-tr-tags, #system .ttd-tr-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}
.ttd-scope .ttd-tr-tag, #system .ttd-tr-tag{font-size:.72rem;font-weight:600;color:#475569;background:#f1f5f9;padding:.2rem .5rem;border-radius:.35rem}
.ttd-scope .ttd-tr-tag--focus, #system .ttd-tr-tag--focus{background:#d1fae5;color:#047857}
/* Posten: dieselbe Aussage wie die Pille in trainings/training_detail.html */
.ttd-scope .ttd-tr-tag--stations, #system .ttd-tr-tag--stations{background:#0f172a;color:#fff}
.ttd-scope .ttd-tr-desc, #system .ttd-tr-desc{font-size:.9rem;color:#334155;line-height:1.55;white-space:pre-line}
.ttd-scope .ttd-tr-details, #system .ttd-tr-details{margin-top:.7rem}
.ttd-scope .ttd-tr-details summary, #system .ttd-tr-details summary{cursor:pointer;font-size:.82rem;font-weight:700;color:#10b981;list-style:none}
.ttd-scope .ttd-tr-details summary::-webkit-details-marker, #system .ttd-tr-details summary::-webkit-details-marker{display:none}
.ttd-scope .ttd-tr-details summary::before, #system .ttd-tr-details summary::before{content:'+ ';font-weight:800}
.ttd-scope .ttd-tr-details[open] summary::before, #system .ttd-tr-details[open] summary::before{content:'\2212 '}
.ttd-scope .ttd-tr-details-body, #system .ttd-tr-details-body{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
.ttd-scope .ttd-tr-detail-box, #system .ttd-tr-detail-box{border-radius:.55rem;padding:.6rem .7rem}
.ttd-scope .ttd-tr-detail-box h5, #system .ttd-tr-detail-box h5{font-size:.75rem;font-weight:800;margin:0 0 .25rem}
.ttd-scope .ttd-tr-detail-box div, #system .ttd-tr-detail-box div{font-size:.85rem;color:#334155;line-height:1.5;white-space:pre-line}
.ttd-scope .ttd-tr-detail-box--mat, #system .ttd-tr-detail-box--mat{background:#eff6ff}
.ttd-scope .ttd-tr-detail-box--mat h5, #system .ttd-tr-detail-box--mat h5{color:#1d4ed8}
.ttd-scope .ttd-tr-detail-box--coach, #system .ttd-tr-detail-box--coach{background:#ecfdf5}
.ttd-scope .ttd-tr-detail-box--coach h5, #system .ttd-tr-detail-box--coach h5{color:#047857}
.ttd-scope .ttd-tr-detail-box--setup, #system .ttd-tr-detail-box--setup{background:#f5f3ff}
.ttd-scope .ttd-tr-detail-box--setup h5, #system .ttd-tr-detail-box--setup h5{color:#6d28d9}