/* ============================================================
   Trainingsplan - Read-only-Ansicht (plan_viewer.html)
   ============================================================
   Ergaenzt training_plan_planner.css (Kopfkarte, Wochenraster, Kacheln,
   Detailzeilen, Zonenfarben) um das, was nur die Ansicht hat: ruhiger Kopf mit
   Ankerzahlen, Einstieg ("So nutzt du deinen Plan") samt Startdatum,
   Wochenuebersicht, klickbare Kacheln, Detaildialog, Handy-Agenda und Druck.
   Alles unter .tp-viewer bzw. .tpv-* - der Planer bleibt unberuehrt.
   ============================================================ */

.tp-viewer {
    --tpv-radius: 14px;
    --tpv-ring: 0 0 0 3px rgba(40, 81, 128, 0.35);
    --tpv-text-2: #4b5563;              /* Sekundaertext, >= 7:1 auf Weiss */
    --tpv-light: #3f8f6b;               /* Entlastung / Taper */
    --tpv-race: #d08a1c;                /* Wettkampf */
    color: var(--ds-text);
    max-width: 1680px;
    margin: 0 auto;
}

/* Silbentrennung statt Buchstabensalat ("Verletzungspräventi-on"): lang="de" steht
   am Container, gebrochen wird nur an Silbengrenzen. */
.tp-viewer .tp-item-title,
.tp-viewer .tp-note-title,
.tp-viewer .tp-hero-title,
.tpv-dialog-title {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: break-word;
    word-break: normal;
}

/* ---------- Kopf ---------- */

.tpv-hero .tp-hero-top { align-items: flex-end; padding-bottom: 1.2rem; }
.tpv-hero-text { min-width: 0; flex: 1 1 460px; }

.tpv-eyebrow {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.tpv-hero .tp-hero-title {
    display: block;
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
    line-height: 1.15;
    max-width: 30ch;
    text-wrap: balance;
}

.tpv-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
    margin-top: 0.8rem;
}

.tpv-goal { color: rgba(255, 255, 255, 0.88); font-size: 0.98rem; margin-right: 0.35rem; }

.tpv-tag {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.tpv-hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tpv-btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
}

.tpv-btn-ghost:hover,
.tpv-btn-ghost:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
}

.tpv-btn-ghost:focus-visible,
.tpv-today-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }

/* "Heute: Woche 3 · Mittwoch" - erscheint mit gesetztem Start ueber dem Titel. */
.tpv-today-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 0;
    background: #f3c262;
    color: #3d2a00;
    font-size: 0.82rem;
    font-weight: 700;
}

.tpv-today-chip:hover { background: #f6cf7f; }
.tpv-today-chip[hidden] { display: none; }

.tpv-hero-totals { padding-top: 1.1rem; }

.tpv-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    max-width: 900px;
}

.tpv-kpis > div {
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tpv-kpis dt {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.3;
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
}

.tpv-kpis dt .fa-star { color: #f3c262; }

.tpv-kpis dd {
    margin: 0.15rem 0 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tpv-kpis dd small { font-size: 0.55em; font-weight: 600; color: rgba(255, 255, 255, 0.7); }

/* Sportverteilung als ein Balken statt Kacheln - ein Blick, eine Aussage. */
.tpv-split {
    display: flex;
    gap: 3px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    max-width: 900px;
}

.tpv-split > span { display: block; min-width: 4px; }
.tpv-split > [data-sport="bike"] { background: #5b8fd0; }
.tpv-split > [data-sport="swim"] { background: #2fb3c2; }
.tpv-split > [data-sport="run"] { background: #a27ae6; }
.tpv-split > [data-sport="strength"] { background: #9aa4b5; }

.tpv-split-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    padding: 0;
    margin: 0.65rem 0 0;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.82);
}

.tpv-split-legend li { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.tpv-split-legend strong { color: #fff; font-variant-numeric: tabular-nums; }
.tpv-split-dist { color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
.tpv-split-legend [data-sport="bike"] .fa-solid { color: #7fa9de; }
.tpv-split-legend [data-sport="swim"] .fa-solid { color: #4cc6d4; }
.tpv-split-legend [data-sport="run"] .fa-solid { color: #b596ec; }
.tpv-split-legend [data-sport="strength"] .fa-solid { color: #b3bbc8; }

/* ---------- Panels ---------- */

.tpv-panel {
    background: var(--ds-surface);
    border-radius: var(--tpv-radius);
    box-shadow: var(--ds-shadow-sm);
    border: 1px solid var(--ds-border-soft);
    margin-bottom: 14px;
}

.tpv-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0.9rem 1.2rem;
}

details.tpv-panel > summary { list-style: none; cursor: pointer; }
details.tpv-panel > summary::-webkit-details-marker { display: none; }
details.tpv-panel > summary:focus-visible { outline: none; box-shadow: var(--tpv-ring); border-radius: var(--tpv-radius); }

.tpv-panel-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--ds-primary);
}

.tpv-panel-title .fa-solid { color: var(--ds-accent); margin-right: 0.4rem; }
.tpv-panel-hint { font-size: 0.78rem; color: var(--tpv-text-2); }

.tpv-toggle-hint { font-weight: 600; color: var(--ds-accent); white-space: nowrap; }
.tpv-toggle-hint .fa-solid { transition: transform 0.15s ease; }
details[open] > summary .tpv-toggle-hint .fa-solid { transform: rotate(180deg); }
details .tpv-when-open,
details[open] .tpv-when-closed { display: none; }
details[open] .tpv-when-open { display: inline; }

/* So nutzt du deinen Plan: oben die drei Schritte, darunter eine Card
   mit allem, was man eintraegt (Start-Montag, eigene Werte) */
.tpv-intro-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 0 1.2rem 1.1rem;
}

.tpv-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.7rem;
}

.tpv-steps li {
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: var(--ds-surface-alt);
    font-size: 0.86rem;
    color: var(--tpv-text-2);
    line-height: 1.45;
}

.tpv-steps strong { display: block; color: var(--ds-text); margin-bottom: 0.15rem; }

.tpv-step-no {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ds-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpv-setup {
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    border: 1px dashed var(--ds-accent);
    background: #f4f8fd;
}

.tpv-setup-title { font-weight: 700; font-size: 0.95rem; color: var(--ds-text); margin-bottom: 0.7rem; }
.tpv-setup-title .fa-solid { color: var(--ds-accent); margin-right: 0.35rem; }

.tpv-setup-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 1.5rem;
}

.tpv-setup-item { min-width: 0; }
.tpv-setup-item + .tpv-setup-item { border-left: 1px solid #d6e2f0; padding-left: 1.5rem; }
.tpv-setup-text { font-size: 0.86rem; color: var(--tpv-text-2); line-height: 1.45; margin-bottom: 0.55rem; }

.tpv-start-label { font-weight: 700; font-size: 0.86rem; color: var(--ds-primary); margin-bottom: 0.45rem; display: block; }
.tpv-start-label .fa-solid { color: var(--ds-accent); margin-right: 0.3rem; }
.tpv-start-row { display: flex; gap: 0.5rem; }
.tpv-start-row input { max-width: 190px; }
.tpv-start-note { font-size: 0.76rem; color: var(--tpv-text-2); margin-top: 0.45rem; }

.tpv-legend {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.5rem;
    font-size: 0.8rem;
    color: var(--tpv-text-2);
    padding-top: 0.25rem;
    border-top: 1px solid var(--ds-border-soft);
    padding-top: 0.8rem;
}

.tpv-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.tpv-legend .tp-key-star { color: var(--tp-key); }
.tpv-legend-zones small { margin-left: 0.2rem; }
.tpv-legend-wide { flex-basis: 100%; }

.tpv-zone-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
/* .tp-zone-* setzen 'fill' (SVG) - fuer die HTML-Kaestchen dieselbe Farbe als Hintergrund. */
.tpv-zone-swatch.tp-zone-1 { background: #64748b; }
.tpv-zone-swatch.tp-zone-2 { background: #2563eb; }
.tpv-zone-swatch.tp-zone-3 { background: #16a34a; }
.tpv-zone-swatch.tp-zone-4 { background: #65a30d; }
.tpv-zone-swatch.tp-zone-5 { background: #f59e0b; }
.tpv-zone-swatch.tp-zone-6 { background: #ea580c; }
.tpv-zone-swatch.tp-zone-7 { background: #dc2626; }

.tpv-threshold-swatch {
    display: inline-block;
    width: 22px;
    border-top: 2px dashed rgba(15, 20, 30, 0.45);
}

/* Wochenuebersicht */
.tpv-bars {
    list-style: none;
    margin: 0;
    padding: 0 1.2rem 0.4rem;
    display: grid;
    grid-template-columns: repeat(var(--tpv-weeks, 8), minmax(28px, 1fr));
    gap: 6px;
    overflow-x: auto;
}

.tpv-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    text-decoration: none;
    color: var(--tpv-text-2);
    border-radius: 8px;
    padding: 3px;
}

.tpv-bar:hover, .tpv-bar:focus-visible { color: var(--ds-primary); background: var(--ds-surface-alt); outline: none; }
.tpv-bar:focus-visible { box-shadow: var(--tpv-ring); }

.tpv-bar-value {
    font-size: 0.68rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    height: 16px;
    line-height: 16px;
}

.tpv-bar-track {
    height: 96px;
    display: flex;
    align-items: flex-end;
    background: var(--ds-surface-alt);
    border-radius: 6px;
    overflow: hidden;
}

.tpv-bar-fill {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, var(--ds-accent) 0%, var(--ds-primary) 100%);
    border-radius: 6px 6px 0 0;
}

.tpv-bar.is-light .tpv-bar-fill { background: linear-gradient(180deg, #6fbf98 0%, var(--tpv-light) 100%); }
.tpv-bar.is-race .tpv-bar-fill { background: linear-gradient(180deg, #f0b04a 0%, var(--tpv-race) 100%); }
.tpv-bar.is-race .tpv-bar-value { color: var(--tpv-race); font-size: 0.8rem; }
.tpv-bar-label { font-size: 0.72rem; font-weight: 700; text-align: center; }
.tpv-bar.is-current { background: #fff7e0; box-shadow: inset 0 0 0 2px #f3c262; color: #6b4a00; }
.tpv-bar.is-current .tpv-bar-label::after { content: " ●"; color: #d99a1c; }

.tpv-bars-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    padding: 0.2rem 1.2rem 0.9rem;
    font-size: 0.74rem;
    color: var(--tpv-text-2);
}

.tpv-bars-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.tpv-bars-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--ds-accent); display: inline-block; }
.tpv-bars-dot.is-light { background: var(--tpv-light); }
.tpv-bars-dot.is-race { background: var(--tpv-race); }

/* ---------- Wochen ---------- */

.tpv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 20px 0.2rem 10px;
}

.tpv-toolbar-title { font-size: 1.15rem; font-weight: 700; color: var(--ds-primary); margin: 0; }
.tpv-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tpv-btn-soft {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    color: var(--ds-primary);
    font-weight: 600;
}

.tpv-btn-soft:hover, .tpv-btn-soft:focus-visible { background: var(--ds-surface-alt); color: var(--ds-primary); border-color: var(--ds-border-strong); }
.tpv-btn-soft:focus-visible { outline: none; box-shadow: var(--tpv-ring); }

.tp-viewer .tp-week-head { gap: 6px 12px; padding: 10px 14px; }
.tp-viewer .tp-week-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: #fff; }
.tpv-week-dates { font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; }
.tpv-week-dates:empty { display: none; }

.tpv-phase {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpv-phase.is-light { background: rgba(111, 191, 152, 0.22); border-color: rgba(111, 191, 152, 0.6); }
.tpv-phase.is-race { background: rgba(240, 176, 74, 0.25); border-color: rgba(240, 176, 74, 0.7); }
.tpv-phase.is-race::before { content: "\f11e"; font-family: "Font Awesome 6 Free", "Font Awesome 7 Free"; font-weight: 900; margin-right: 0.35rem; }
.tpv-phase.is-peak { background: rgba(147, 110, 230, 0.25); border-color: rgba(170, 140, 240, 0.6); }

.tp-viewer .tp-week-stats { margin-left: auto; gap: 6px 14px; font-size: 0.8rem; }
.tp-viewer .tp-week-stats > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-viewer .tp-week-stats .fa-solid { opacity: 0.75; }

.tp-viewer .tp-week.is-current .tp-week-head { box-shadow: inset 4px 0 0 #f3c262; }

.tp-viewer .tp-week-grid { grid-template-columns: repeat(7, minmax(150px, 1fr)); }
.tp-viewer .tp-day { padding: 8px; gap: 6px; background: var(--ds-surface); }
/* Das Wochenende nur im Tageskopf toenen - eine grau hinterlegte Spalte liest sich
   wie "deaktiviert". */
.tp-viewer .tp-day.is-weekend { background: var(--ds-surface); }
.tp-viewer .tp-day.is-weekend .tp-day-head { color: var(--ds-accent); }
.tp-viewer .tp-day-head { margin-bottom: 1px; font-size: 0.74rem; color: var(--tpv-text-2); }
.tp-viewer .tp-day-sum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tpv-day-long { display: none; }
.tpv-day-date { margin-left: 0.35rem; font-weight: 500; color: var(--tpv-text-2); }
.tpv-day-date:empty { display: none; }

.tp-viewer .tp-day.is-today { background: #fffbeb; box-shadow: inset 0 3px 0 #f3c262; }
.tp-viewer .tp-day.is-today .tp-day-name::after {
    content: "Heute";
    margin-left: 0.4rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a5a00;
    background: #fde68a;
    border-radius: 999px;
    padding: 1px 6px;
}
.tp-viewer .tp-day.is-flash { animation: tpv-flash 1.4s ease; }
@keyframes tpv-flash { 0%, 100% { box-shadow: inset 0 3px 0 #f3c262; } 30% { box-shadow: inset 0 0 0 3px #f3c262; } }

.tpv-rest {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 7px 9px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--tpv-text-2);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
}

/* ---------- Kacheln ---------- */

.tp-viewer .tpv-item {
    padding: 8px 9px 9px;
    font-size: 0.8rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tp-viewer .tpv-item .tp-item-head { gap: 6px; }
.tp-viewer .tpv-item .tp-item-title { font-size: 0.86rem; line-height: 1.3; margin-top: 2px; }
.tp-viewer .tpv-item .tp-profile { height: 22px; margin: 7px 0 2px; }
.tp-viewer .tpv-item .tp-item-body { margin-top: 6px; }
.tp-viewer .tpv-item .tp-item-meta { font-size: 0.74rem; color: var(--tpv-text-2); gap: 1px 10px; }

/* Hinweis an der Einheit: im Raster auf drei Zeilen gekuerzt, vollstaendig im Dialog. */
.tp-viewer .tpv-item .tp-item-note {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    color: var(--tpv-text-2);
}

.tpv-key-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fdf1d8;
    color: #8a5a00;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
}

.tpv-key-badge .fa-solid { color: var(--tp-key); }

.tpv-race-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--tpv-race);
    color: #fff;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
}

.tp-viewer .tpv-item.is-race {
    border: 2px solid var(--tpv-race);
    border-left-width: 5px;
    background: linear-gradient(135deg, #fff8e8 0%, #fdecc8 100%);
    box-shadow: 0 4px 14px rgba(208, 138, 28, 0.25);
}

.tpv-item-clip {
    margin-left: auto;
    font-size: 0.66rem;
    color: var(--tpv-text-2);
    display: inline-flex;
    gap: 3px;
    align-items: center;
    font-weight: 600;
    text-transform: none;
}

.tp-viewer [data-tp-detail],
.tp-viewer [data-tp-note] { cursor: pointer; }

.tp-viewer [data-tp-detail]:hover,
.tp-viewer [data-tp-note]:hover {
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-md);
}

.tp-viewer [data-tp-detail]:focus-visible,
.tp-viewer [data-tp-note]:focus-visible {
    outline: none;
    box-shadow: var(--tpv-ring);
}

/* ---------- Notizen ----------
   Drei Arten, drei Gewichte: Ruhetag als ruhige Zeile, Mental Coaching als eigene
   Karte, alles andere als Hinweis. Kein gestrichelter Rand - der wirkt wie ein
   Platzhalter. */
.tp-viewer .tpv-note {
    font-size: 0.78rem;
    border: 1px solid var(--ds-border-soft);
    border-left: 3px solid var(--tp-note);
    background: #fffaf0;
    padding: 7px 9px;
}

.tp-viewer .tpv-note .tp-note-title { font-weight: 700; display: flex; gap: 0.4rem; align-items: baseline; }
.tp-viewer .tpv-note .tp-note-title .fa-solid { color: var(--ds-warning-dark); }

.tp-viewer .tpv-note .tp-note-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    white-space: pre-line;
    color: var(--tpv-text-2);
}

.tpv-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ds-accent);
}

.tp-viewer .tpv-note.is-rest {
    background: var(--ds-surface-alt);
    border: 0;
    border-radius: var(--ds-radius-sm);
    padding: 7px 9px;
}

.tp-viewer .tpv-note.is-rest .tp-note-title { font-weight: 600; color: var(--tpv-text-2); }
.tp-viewer .tpv-note.is-rest .tp-note-title .fa-solid { color: var(--tpv-text-2); }
.tp-viewer .tpv-note.is-rest .tp-note-body { display: none; }
.tpv-rest-more { margin-left: auto; color: var(--tpv-text-2); font-size: 0.8rem; align-self: center; }
.tpv-rest-sub { display: block; font-size: 0.7rem; font-weight: 500; color: var(--tpv-text-2); margin-top: 1px; }

.tp-viewer .tpv-note.is-mental {
    background: #f7f3ff;
    border-color: #e4dafa;
    border-left-color: #7c5cd6;
}

.tpv-note-kicker {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6243c0;
    margin-bottom: 2px;
}

.tp-viewer .tpv-note.is-mental .tp-note-title { color: #2d1f5e; }

/* ---------- Detaildialog ---------- */

.tpv-dialog {
    width: min(780px, calc(100vw - 24px));
    max-height: min(88vh, 980px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(10, 20, 35, 0.35);
    color: var(--ds-text);
    overflow: hidden;
}

.tpv-dialog[open] { display: flex; flex-direction: column; }
.tpv-dialog::backdrop { background: rgba(13, 33, 48, 0.55); backdrop-filter: blur(2px); }

.tpv-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.35rem 1.05rem;
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
    color: #fff;
    border-bottom: 4px solid var(--tpv-dialog-accent, var(--ds-accent));
}

.tpv-dialog[data-sport="bike"] { --tpv-dialog-accent: #5b8fd0; }
.tpv-dialog[data-sport="swim"] { --tpv-dialog-accent: #2fb3c2; }
.tpv-dialog[data-sport="run"] { --tpv-dialog-accent: #a27ae6; }
.tpv-dialog[data-sport="strength"] { --tpv-dialog-accent: #9aa4b5; }
.tpv-dialog[data-sport="note"] { --tpv-dialog-accent: var(--tp-note); }
.tpv-dialog[data-sport="mental"] { --tpv-dialog-accent: #7c5cd6; }

.tpv-dialog-heading { flex: 1; min-width: 0; }

.tpv-dialog-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.75rem;
}

.tpv-dialog-key { color: #f3c262; }

.tpv-dialog-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0.3rem 0 0;
    line-height: 1.25;
}

.tpv-dialog-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1rem;
}

.tpv-dialog-close:hover { background: rgba(255, 255, 255, 0.24); }
.tpv-dialog-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); }

.tpv-dialog-body {
    padding: 1.15rem 1.35rem 1.35rem;
    overflow-y: auto;
    flex: 1 1 auto;
    overscroll-behavior: contain;
}

.tpv-dialog-body .tp-detail-profile { margin: 0.9rem 0; }
.tpv-dialog-body .tp-detail-description { white-space: pre-line; line-height: 1.6; }

.tpv-dialog-callout {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.9rem;
    border-radius: 10px;
    background: var(--tp-note-soft);
    border-left: 4px solid var(--tp-note);
    font-size: 0.9rem;
    white-space: pre-line;
}

.tpv-dialog-callout .fa-solid { color: var(--ds-warning-dark); margin-top: 3px; }

.tpv-dialog-text { white-space: pre-line; line-height: 1.65; font-size: 0.95rem; }
.tpv-dialog-section { margin-top: 1.1rem; }

.tpv-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.35rem;
    border-top: 1px solid var(--ds-border-soft);
    background: var(--ds-surface-alt);
}

.tpv-dialog-foot [hidden] { display: none !important; }

/* ---------- Tablet: Kopf-Zahlen schmaler ---------- */
@media screen and (max-width: 991.98px) {
    .tpv-setup-item + .tpv-setup-item { border-left: 0; padding-left: 0; border-top: 1px solid #d6e2f0; padding-top: 1rem; }
}

/* ---------- Handy: Agenda statt Raster ----------
   Sieben Spalten passen auf kein Handy - statt waagerecht zu scrollen, stehen die
   Tage untereinander. Nur 'screen': ein A4-Ausdruck im Hochformat ist ebenfalls
   schmaler als 768 px und soll das Raster behalten. */
@media screen and (max-width: 767.98px) {
    .tpv-kpis { grid-template-columns: repeat(2, 1fr); }
    .tpv-kpis dd { font-size: 1.35rem; }
    .tpv-hero-actions { width: 100%; }
    .tpv-hero-actions > * { flex: 1 1 auto; }
    /* "Weitere Infos zu diesem Trainingsplan" ist laenger als ein schmales Handy breit:
       umbrechen statt ueber den Kopf hinauszuragen (.tp-hero-actions .btn: nowrap). */
    .tpv-hero-actions .tpv-shop-link { white-space: normal; max-width: 100%; }

    .tpv-steps { grid-template-columns: 1fr; }

    .tp-viewer .tp-week-body { overflow-x: visible; }
    .tp-viewer .tp-week-grid { grid-template-columns: 1fr; }
    .tp-viewer .tp-week-stats { margin-left: 0; flex-basis: 100%; }

    .tp-viewer .tp-day { min-height: 0; padding: 10px 12px; }
    .tp-viewer .tp-day-head { font-size: 0.82rem; }
    .tpv-day-short { display: none; }
    .tpv-day-long { display: inline; }

    /* Ruhetage ohne Notiz: eine Zeile statt eines Kastens. */
    .tp-viewer .tp-day.is-empty { flex-direction: row; align-items: center; padding-top: 8px; padding-bottom: 8px; }
    .tp-viewer .tp-day.is-empty .tp-day-head { flex: 1 1 auto; margin: 0; }
    .tp-viewer .tp-day.is-empty .tpv-rest { flex: 0 0 auto; min-height: 0; padding: 2px 10px; }

    .tp-viewer .tpv-item .tp-profile { height: 28px; }

    /* Alle Wochen passen in die Breite - bei 16 bis 20 Wochen laege die
       Wettkampfwoche sonst unsichtbar im waagerechten Scroll. */
    .tpv-bars { grid-template-columns: repeat(var(--tpv-weeks, 8), minmax(0, 1fr)); gap: 2px; padding-inline: 0.7rem; }
    .tpv-bar { padding: 2px 0; }
    .tpv-bar-track { height: 64px; border-radius: 4px; }
    .tpv-bars .tpv-bar-value { font-size: 0.58rem; }
    .tpv-bars .tpv-bar-label { font-size: 0.6rem; }

    .tpv-dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
}

/* ---------- Druck ---------- */
/* Sieben Spalten brauchen Querformat. */
@page { size: A4 landscape; margin: 10mm; }

@media print {
    .tpv-hero-actions,
    .tpv-toolbar-actions,
    .tpv-today-chip,
    .tpv-dialog,
    .tpv-intro,
    .tpv-more,
    .tpv-rest-more,
    .tpv-print-hide,
    .tp-access-banner-wrap,
    /* App-Rahmen (base.html beider Apps): Sidebar, Titelleiste, Cookie-Hinweis. */
    body:has(.tp-viewer) .sidebar,
    body:has(.tp-viewer) .sidebar-overlay,
    body:has(.tp-viewer) .topbar,
    body:has(.tp-viewer) .aspect-privacy-notice { display: none !important; }

    body.content:has(.tp-viewer),
    body:has(.tp-viewer) main,
    body:has(.tp-viewer) .main-content,
    body:has(.tp-viewer) .content { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }

    .tp-viewer { max-width: none; font-size: 11px; }
    .tpv-eyebrow, .tpv-goal, .tpv-kpis dt, .tpv-kpis dd small, .tpv-split-legend, .tpv-split-dist { color: #475569 !important; }
    .tpv-kpis dd, .tpv-split-legend strong { color: #111 !important; }
    .tpv-kpis > div, .tpv-tag { border-color: #cbd5e1; background: none; color: #111; }
    .tpv-panel { box-shadow: none; break-inside: avoid; }
    .tp-viewer .tp-day.is-today .tp-day-name::after { display: none; }

    /* Gleich breite Spalten, auch wenn eine Zelle ein langes Wort traegt, und keine
       Silbentrennung in kurzen Woertern ("Ru-he-tag"). */
    .tp-viewer .tp-week-body { overflow: visible; }
    .tp-viewer .tp-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .tp-viewer .tp-day { min-height: 0; padding: 5px; }
    .tp-viewer .tp-item-title,
    .tp-viewer .tp-note-title { hyphens: manual; }
    .tp-viewer .tpv-item .tp-item-title { font-size: 0.8rem; }
    .tp-viewer .tpv-item .tp-item-note,
    .tp-viewer .tpv-note .tp-note-body { -webkit-line-clamp: 3; }
    .tp-viewer [data-tp-detail]:hover { transform: none; box-shadow: none; }

    /* Eine Woche darf ueber die Seite laufen (lange Wochen sind hoeher als A4 quer),
       aber ihr Kopf bleibt bei den Tagen und kein Tag wird zerschnitten. */
    .tp-viewer .tp-week { break-inside: auto; }
    .tp-viewer .tp-week-head { break-after: avoid; page-break-after: avoid; }
    .tp-viewer .tp-day { break-inside: avoid; page-break-inside: avoid; }
    .tpv-week-dates { color: rgba(255, 255, 255, 0.85) !important; }
    .tpv-bar-fill, .tp-profile rect, .tpv-zone-swatch, .tpv-split > span, .tp-hero, .tp-week-head, .tpv-phase {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ============================================================
   Meine Trainingsplaene (Athleten-App, plan_access/my_plans.html)
   ============================================================
   Plan-Karten in der Sprache der Planansicht: dunkler Kartenkopf, Kennzahlen,
   Sportverteilung als Balken in den Sportfarben (--tp-* aus .tp-planner) und die
   Wochenlast als Mini-Periodisierung. */

.tpm { max-width: 1280px; margin: 0 auto; }

.tpm-btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
}

.tpm-btn-ghost:hover,
.tpm-btn-ghost:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); }

.tpm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 18px;
}

.tpm-card {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-soft);
    border-radius: 16px;
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tpm-card:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); }

.tpm-card-top {
    padding: 1.15rem 1.3rem 1.1rem;
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
    color: #fff;
}

.tpm-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.35rem;
}

.tpm-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.tpm-title a { color: inherit; text-decoration: none; }
.tpm-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.tpm-goal { margin-top: 0.45rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); }

.tpm-card-body {
    flex: 1 1 auto;
    padding: 1.1rem 1.3rem 0.4rem;
}

.tpm-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.tpm-kpis > div {
    background: var(--ds-surface-alt);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}

.tpm-kpis dt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

.tpm-kpis dd {
    margin: 0.1rem 0 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ds-primary);
    font-variant-numeric: tabular-nums;
}

.tpm-split {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ds-surface-soft);
    gap: 2px;
}

.tpm-split > span { display: block; min-width: 4px; }
.tpm-split > [data-sport="bike"] { background: var(--tp-bike); }
.tpm-split > [data-sport="swim"] { background: var(--tp-swim); }
.tpm-split > [data-sport="run"] { background: var(--tp-run); }
.tpm-split > [data-sport="strength"] { background: var(--tp-strength); }

.tpm-split-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    padding: 0;
    margin: 0.55rem 0 1rem;
    font-size: 0.78rem;
    color: var(--ds-muted);
}

.tpm-split-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.tpm-split-legend strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.tpm-split-legend [data-sport="bike"] .fa-solid { color: var(--tp-bike); }
.tpm-split-legend [data-sport="swim"] .fa-solid { color: var(--tp-swim); }
.tpm-split-legend [data-sport="run"] .fa-solid { color: var(--tp-run); }
.tpm-split-legend [data-sport="strength"] .fa-solid { color: var(--tp-strength); }

.tpm-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 44px;
    padding: 4px;
    border-radius: 8px;
    background: var(--ds-surface-alt);
}

.tpm-spark > span {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, var(--ds-accent) 0%, var(--ds-primary) 100%);
    opacity: 0.85;
}

.tpm-spark > span.is-light { background: linear-gradient(180deg, #6fbf98 0%, #3f8f6b 100%); }
.tpm-spark > span.is-race { background: linear-gradient(180deg, #f0b04a 0%, #d08a1c 100%); opacity: 1; }

.tpm-spark-label { font-size: 0.7rem; color: var(--ds-muted); margin-top: 0.35rem; }

.tpm-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.tpm-tags span {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.tpm-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem 1.3rem 1.1rem;
    margin-top: 0.6rem;
    border-top: 1px solid var(--ds-border-soft);
}

.tpm-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.74rem;
    color: var(--ds-muted);
}

.tpm-open { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; padding-inline: 1.1rem; }
.tpm-open .fa-solid { transition: transform 0.15s ease; }
.tpm-card:hover .tpm-open .fa-solid { transform: translateX(3px); }

.tpm-card.is-unavailable .tpm-card-top { background: linear-gradient(135deg, #5b6573 0%, #3d4550 100%); }

.tpm-unavailable {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: var(--ds-danger-soft);
    color: #8a1f2b;
    font-size: 0.86rem;
    margin-bottom: 0.8rem;
}

.tpm-unavailable .fa-solid { font-size: 1.3rem; margin-top: 2px; }

.tpm-hint { margin: 1.1rem 0.25rem 0; font-size: 0.8rem; color: var(--ds-muted); }
.tpm-hint .fa-solid { color: var(--ds-accent); margin-right: 0.3rem; }

/* Leerzustand */
.tpm-empty {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-soft);
    border-radius: 16px;
    box-shadow: var(--ds-shadow-sm);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.tpm-empty-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--ds-accent);
    background: var(--ds-accent-light);
}

.tpm-empty h2 { font-size: 1.3rem; font-weight: 700; color: var(--ds-primary); margin-bottom: 0.4rem; }
.tpm-empty > p { color: var(--ds-muted); max-width: 520px; margin: 0 auto 1.5rem; }

.tpm-steps {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.6rem;
    max-width: 860px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    text-align: left;
}

.tpm-steps li {
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: var(--ds-surface-alt);
    font-size: 0.84rem;
    color: var(--ds-muted);
}

.tpm-steps li > span {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ds-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpm-steps strong { display: block; color: var(--ds-text); margin-bottom: 0.1rem; }

@media (max-width: 575.98px) {
    .tpm-card-top, .tpm-card-body, .tpm-card-foot { padding-left: 1rem; padding-right: 1rem; }
    .tpm-kpis dd { font-size: 1.05rem; }
    .tpm-open { width: 100%; justify-content: center; }
}

/* ---------- Dialog: Weg zu Swim-Viewer und PDFs ----------
   Beim Schwimmen ganz oben im Dialog (training_plan_viewer.js:showWorkout) - die
   PDFs fuers Bad gibt es nur im Swim-Viewer. */
.tpv-dialog-pdf {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid #9fd8df;
    background: linear-gradient(135deg, #e6f7f9 0%, #d3f0f3 100%);
    color: #0b4f57;
    text-decoration: none;
}

.tpv-dialog-pdf > .fa-file-pdf { font-size: 1.8rem; color: #c4302b; flex: 0 0 auto; }
.tpv-dialog-pdf-text { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 0.84rem; line-height: 1.35; }
.tpv-dialog-pdf-text strong { font-size: 0.95rem; color: #073b41; }

.tpv-dialog-pdf-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: #0f7f8c;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.tpv-dialog-pdf:hover { color: #0b4f57; border-color: #0f7f8c; box-shadow: 0 4px 14px rgba(15, 127, 140, 0.2); }
.tpv-dialog-pdf:hover .tpv-dialog-pdf-cta { background: #0b6570; }
.tpv-dialog-pdf:focus-visible { outline: none; box-shadow: var(--tpv-ring); }
.tpv-dialog-link-main { font-weight: 700; }

@media screen and (max-width: 575.98px) {
    .tpv-dialog-pdf { flex-wrap: wrap; }
    .tpv-dialog-pdf-cta { width: 100%; justify-content: center; }
}

/* ---------- Persoenliche Werte (Kaeuferansicht) ---------- */
.tpv-personal {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.8rem 1.1rem;
    margin-bottom: 14px;
    border-radius: 14px;
    border: 1px dashed var(--ds-accent);
    background: #f4f8fd;
    font-size: 0.9rem;
    color: var(--ds-text);
}

.tpv-personal > .fa-solid { font-size: 1.3rem; color: var(--ds-accent); }
.tpv-personal > div { flex: 1 1 320px; }
.tpv-personal.is-active { border-style: solid; border-color: #9fd3b9; background: #eef8f2; }
.tpv-personal.is-active > .fa-solid { color: #2f7d58; }

@media print { .tpv-personal .btn, .tpv-setup .btn { display: none; } }

/* ---------- Meine Trainingsplaene: Schwellenwerte ---------- */
.tpm-thresholds {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-soft);
    border-radius: 16px;
    box-shadow: var(--ds-shadow-sm);
    padding: 1.2rem 1.3rem 1.3rem;
    margin-bottom: 18px;
    scroll-margin-top: calc(var(--tp-topbar, 54px) + 12px);
}

.tpm-thresholds-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.tpm-thresholds-head h2 { font-size: 1.1rem; font-weight: 700; color: var(--ds-primary); margin: 0 0 0.25rem; }
.tpm-thresholds-head h2 .fa-solid { color: var(--ds-accent); margin-right: 0.35rem; }
.tpm-thresholds-head p { margin: 0; color: var(--ds-muted); font-size: 0.88rem; max-width: 640px; }

.tpm-thresholds-state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; }
.tpm-thresholds-state.is-saved { background: #e3f4ea; color: #1f6b45; }
.tpm-thresholds-state.is-suggested { background: #fdf1d8; color: #7a5200; }

/* Drei feste Spalten: mit auto-fit plus der vollbreiten Aktionszeile (1 / -1)
   entstanden fuenf Spuren, und die drei Karten wurden auf je eine gestaucht. */
.tpm-thresholds-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 991.98px) { .tpm-thresholds-form { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .tpm-thresholds { padding: 1rem; } .tpm-th-field { padding: 1rem; } }

.tpm-th-field {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem 1.2rem 1.15rem;
    border-radius: 14px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-soft);
    border-top: 4px solid var(--tpm-accent, var(--ds-border));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.tpm-th-field[data-sport="bike"] { --tpm-accent: var(--tp-bike); --tpm-soft: var(--tp-bike-soft); }
.tpm-th-field[data-sport="run"] { --tpm-accent: var(--tp-run); --tpm-soft: var(--tp-run-soft); }
.tpm-th-field[data-sport="swim"] { --tpm-accent: var(--tp-swim); --tpm-soft: var(--tp-swim-soft); }

.tpm-th-field label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--ds-primary);
}

.tpm-th-field label .fa-solid {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--tpm-accent);
    background: var(--tpm-soft, var(--ds-surface-alt));
}

/* Eingabe ueber die volle Kartenbreite, Einheit als Suffix im selben Rahmen. */
.tpm-th-input {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tpm-th-input:focus-within { border-color: var(--tpm-accent, var(--ds-accent)); box-shadow: 0 0 0 3px rgba(40, 81, 128, 0.15); }

.tpm-th-input input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    padding: 0.6rem 0.85rem;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ds-primary);
    background: transparent;
}

.tpm-th-input input:focus { outline: none; box-shadow: none; }
.tpm-th-input input::placeholder { color: #b6bcc6; font-weight: 600; }

.tpm-th-input span {
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-muted);
    background: var(--ds-surface-alt);
    border-left: 1px solid var(--ds-border-soft);
    white-space: nowrap;
}

.tpm-th-field small { display: block; margin: 0; color: var(--ds-muted); font-size: 0.8rem; line-height: 1.5; }
.tpm-th-field small em {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #fdf1d8;
    color: #7a5200;
    font-style: normal;
    font-weight: 600;
    font-size: 0.72rem;
}

.tpm-th-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; padding-top: 0.2rem; }
.tpm-th-actions span { font-size: 0.78rem; color: var(--ds-muted); }

/* Schwellenfelder: ungueltige Eingabe (my_plans.html, Eingabemaske). */
.tpm-th-input.is-invalid { border-color: var(--ds-danger, #dc3545); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15); }
.tpm-th-error { font-size: 0.8rem; font-weight: 600; color: #b42332; min-height: 0; }
.tpm-th-error:empty { display: none; }

/* ---------- Dialog: Erklaerung der RPE-Skala ----------
   Unter den Intervallen, nur bei Workouts mit RPE-Angaben (training_plan_viewer.js:
   buildRpeScale). Rad/Lauf: Borg 6-20, Kraft: 1-10. Liste statt Tabelle - die globale
   Tabellenschrift in style.css wird unter 950 px winzig. Die Toene folgen der
   Zonenpalette der Detailzeilen (ruhig -> hart). */
.tpv-rpe-card {
    padding: 0.75rem 0.85rem 0.8rem;
    border: 1px solid var(--ds-border-soft);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
}

.tpv-rpe-intro {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--tpv-text-2, var(--ds-muted));
}

.tpv-rpe-intro .fa-solid { color: var(--ds-accent); }

.tpv-rpe-scale {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Spalten statt Raster: die Skala liest sich von oben nach unten weiter. */
    columns: 2;
    column-gap: 10px;
}

.tpv-rpe-level {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 3px 6px 3px 3px;
    border: 1px solid transparent;
    border-radius: 7px;
    margin-bottom: 4px;
    break-inside: avoid;
    font-size: 0.78rem;
    line-height: 1.3;
}

.tpv-rpe-value {
    flex: 0 0 auto;
    min-width: 30px;
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--tpv-rpe-tone, #64748b);
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tpv-rpe-label { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.tpv-rpe-label.is-between { color: var(--ds-muted); font-style: italic; }

.tpv-rpe-tone-1 { --tpv-rpe-tone: #64748b; }
.tpv-rpe-tone-2 { --tpv-rpe-tone: #2563eb; }
.tpv-rpe-tone-3 { --tpv-rpe-tone: #16a34a; }
.tpv-rpe-tone-4 { --tpv-rpe-tone: #c2410c; }
.tpv-rpe-tone-5 { --tpv-rpe-tone: #dc2626; }

/* Im Workout benutzte Werte: hervorgehoben, der Rest tritt zurueck. */
.tpv-rpe-level.is-used {
    background: var(--ds-surface);
    border-color: var(--tpv-rpe-tone, var(--ds-accent));
    box-shadow: 0 1px 4px rgba(10, 20, 35, 0.08);
    font-weight: 600;
}

.tpv-rpe-scale:has(.is-used) .tpv-rpe-level:not(.is-used) { opacity: 0.72; }

.tpv-rpe-used {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tpv-rpe-tone, var(--ds-accent));
    white-space: nowrap;
}

@media screen and (max-width: 575.98px) {
    .tpv-rpe-scale { columns: 1; }
}