/*
===============================================================================
Transformation Tracker – komplette Oberfläche ohne CSS-Framework
===============================================================================
Die Datei ist nach Bereichen sortiert. Farben und Abstände liegen als Variablen
am Anfang; dadurch kann das gesamte Design später schnell angepasst werden.
*/

:root {
    --bg: #07100f;
    --bg-soft: #0b1515;
    --surface: #111c1d;
    --surface-2: #162324;
    --surface-3: #1b2a2b;
    --line: rgba(255, 255, 255, 0.085);
    --text: #f3f7f6;
    --muted: #8f9e9b;
    --accent: #34dc87;
    --accent-strong: #19bb6a;
    --accent-soft: rgba(52, 220, 135, 0.12);
    --teal: #34cfc1;
    --warm: #ffbf3f;
    --danger: #ff626b;
    --danger-soft: rgba(255, 98, 107, 0.12);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    --radius: 18px;
    --radius-small: 12px;
    --max-width: 1500px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 0%, rgba(33, 148, 103, 0.09), transparent 30rem),
        linear-gradient(180deg, #07100f 0%, #091211 100%);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
}

button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }

/* -------------------------------------------------------------------------- */
/* Kopfzeile und Navigation                                                    */
/* -------------------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 76px;
    padding: 0 max(24px, calc((100vw - var(--max-width)) / 2));
    display: flex;
    align-items: center;
    gap: 42px;
    background: rgba(7, 16, 15, 0.88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 760; white-space: nowrap; }
.brand-mark {
    width: 34px; height: 34px; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--accent), var(--teal));
    color: #052017; border-radius: 11px 11px 11px 3px; font-weight: 900;
    box-shadow: 0 0 22px rgba(52, 220, 135, 0.23);
}
.desktop-nav { display: flex; align-items: stretch; height: 76px; gap: 7px; }
.nav-link {
    position: relative; display: flex; align-items: center; gap: 8px;
    padding: 0 15px; color: var(--muted); font-size: 0.91rem; transition: .2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
    height: 2px; border-radius: 10px; background: var(--accent);
}
.mobile-nav { display: none; }

/* -------------------------------------------------------------------------- */
/* Seitenaufbau, Karten und Überschriften                                      */
/* -------------------------------------------------------------------------- */

.page-shell { width: min(var(--max-width), calc(100% - 48px)); margin: 0 auto; padding: 34px 0 60px; }
.page-heading {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    margin-bottom: 24px;
}
.page-heading h1 { margin: 3px 0 5px; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.06; letter-spacing: -0.035em; }
.page-heading p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--accent) !important; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; }
.date-badge, .date-navigation, .segmented-control {
    display: flex; align-items: center; gap: 8px; padding: 8px;
    border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
}
.date-badge { padding: 11px 15px; color: var(--muted); }
.card {
    background: linear-gradient(145deg, rgba(20, 33, 34, .97), rgba(14, 25, 26, .97));
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card h2 { margin: 0; font-size: 1.05rem; }
.card p { color: var(--muted); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.card-header h2 { margin: 0 0 2px; }
.card-header p { margin: 0; font-size: .84rem; }
.card-header > a { color: var(--accent); font-size: .86rem; }
.card-label { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: .83rem; font-weight: 720; }
.card-label.accent-warm, .section-title.warm .section-icon { color: var(--warm); }
.value-chip, .status-chip, .complete-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
    color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(52,220,135,.22); border-radius: 999px; font-size: .78rem; font-weight: 740;
}
.status-chip span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Rückmeldungen nach dem Speichern. */
.flash-stack { position: fixed; top: 88px; right: 24px; z-index: 100; display: grid; gap: 8px; }
.flash { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-3); box-shadow: var(--shadow); }
.flash.success { border-color: rgba(52,220,135,.35); }
.flash.error { border-color: rgba(255,98,107,.4); }

/* -------------------------------------------------------------------------- */
/* Buttons und Eingaben                                                        */
/* -------------------------------------------------------------------------- */

.button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 10px 16px; border: 1px solid transparent; border-radius: 12px;
    color: var(--text); font-weight: 740; cursor: pointer; transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #062017; }
.button.secondary { background: var(--surface-2); border-color: var(--line); }
.button.outline { background: transparent; border-color: rgba(52,220,135,.38); color: var(--accent); }
.button.danger { background: var(--danger-soft); border-color: rgba(255,98,107,.45); color: #ff8990; }
.icon-button {
    width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line);
    border-radius: 11px; background: var(--surface-2); color: var(--text); cursor: pointer;
}
.text-button { border: 0; background: none; color: var(--muted); padding: 8px; cursor: pointer; }
.danger-text { color: #ff858c !important; }

.field { display: grid; gap: 7px; min-width: 0; }
.field > span, .inline-settings label > span { color: #a8b4b2; font-size: .78rem; font-weight: 650; }
input, textarea, select {
    width: 100%; border: 1px solid var(--line); outline: none; background: #0b1516;
    color: var(--text); border-radius: 11px; padding: 11px 12px; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { border-color: rgba(52,220,135,.65); box-shadow: 0 0 0 3px rgba(52,220,135,.09); }
textarea { resize: vertical; }
.input-with-unit { position: relative; }
.input-with-unit input { padding-right: 58px; }
.input-with-unit em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-style: normal; font-size: .78rem; pointer-events: none; }

/* -------------------------------------------------------------------------- */
/* Dashboard                                                                   */
/* -------------------------------------------------------------------------- */

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.kpi-card { min-height: 150px; padding: 20px; display: flex; flex-direction: column; }
.kpi-card strong { margin-top: 18px; font-size: clamp(1.55rem, 2.4vw, 2.15rem); letter-spacing: -.035em; }
.kpi-card > span:last-child { margin-top: auto; font-size: .82rem; }
.trend { color: var(--muted); }
.trend.positive { color: var(--accent); }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.action-card {
    min-height: 86px; display: flex; align-items: center; gap: 16px; padding: 17px 20px;
    border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.action-card.primary { background: linear-gradient(130deg, rgba(52,220,135,.96), rgba(25,187,106,.88)); color: #062017; }
.action-card.secondary { background: linear-gradient(130deg, rgba(25,100,87,.7), rgba(20,48,47,.95)); }
.action-card strong, .action-card small { display: block; }
.action-card strong { font-size: 1.08rem; }
.action-card small { margin-top: 2px; opacity: .72; }
.action-icon { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,.15); border-radius: 50%; }
.action-card .arrow { margin-left: auto; }
.dashboard-grid, .history-grid { display: grid; grid-template-columns: 1fr 1fr .72fr; gap: 16px; }
.span-2 { grid-column: span 2; }
.chart-card, .recent-card, .week-card, .table-card { padding: 20px; min-height: 260px; }
.chart-wrap { width: 100%; min-height: 210px; overflow: hidden; }
.chart-wrap.compact { min-height: 170px; }
.chart-wrap svg { width: 100%; height: 100%; min-height: inherit; overflow: visible; }
.chart-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; stroke-dasharray: 4 7; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 7px rgba(52,220,135,.22)); }
.chart-line.blue { stroke: #45aeea; }
.chart-line.dashed { stroke-dasharray: 7 8; stroke-width: 2; }
.bar-chart { height: 205px; display: flex; align-items: flex-end; gap: 9px; padding-top: 18px; }
.bar-column { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.bar {
    position: relative;
    width: min(34px, 72%);
    min-height: 5px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}
/*
    Die Schrittzahl steht vertikal direkt auf dem jeweiligen Balken. Durch
    die absolute Position bleibt die Balkenhöhe weiterhin ausschließlich
    vom Messwert abhängig.
*/
.bar-value {
    position: absolute;
    left: 50%;
    bottom: 7px;
    z-index: 1;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    text-shadow: 0 1px 3px rgba(0,0,0,.72);
    pointer-events: none;
    white-space: nowrap;
}
.bar-column > span { color: var(--muted); font-size: .7rem; }
.list-stack { display: grid; gap: 9px; }
.list-row { display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.018); }
.list-icon, .plan-icon, .section-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 12px; }
.list-row strong, .list-row small { display: block; }
.list-row small { color: var(--muted); margin-top: 2px; }
.list-metric { text-align: right; }
.week-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.week-card .card-label { align-self: flex-start; }
.week-card p { margin: 0; font-size: .82rem; }
.ring {
    --value: 60; width: 150px; aspect-ratio: 1; padding: 12px; border-radius: 50%;
    display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--value) * 1%), rgba(255,255,255,.08) 0);
}
.ring::before { content: ""; grid-area: 1/1; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); }
.ring > div { grid-area: 1/1; z-index: 1; text-align: center; }
.ring strong, .ring span { display: block; }
.ring strong { font-size: 1.55rem; }
.ring span { color: var(--muted); font-size: .75rem; }

/* -------------------------------------------------------------------------- */
/* Check-in und allgemeine Formulare                                           */
/* -------------------------------------------------------------------------- */

.date-navigation span { min-width: 230px; text-align: center; font-weight: 650; }
.checkin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.form-column, .sidebar-column { display: grid; gap: 16px; }
.sidebar-column { position: sticky; top: 95px; }
.form-section, .summary-card, .tip-card { padding: 20px; }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-title h2, .section-title p { margin: 0; }
.section-title p { font-size: .8rem; margin-top: 2px; }
.form-grid { display: grid; gap: 14px; align-items: end; }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 12px; }
.summary-stat { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.summary-stat:first-of-type { border-top: 0; }
.summary-stat span { color: var(--muted); font-size: .82rem; }
.summary-stat strong { font-size: 1.25rem; }
.summary-stat small { grid-column: 1 / -1; color: var(--accent); }
.tip-card { border-color: rgba(52,220,135,.18); background: linear-gradient(145deg, rgba(24,76,62,.45), rgba(14,30,29,.96)); }
.tip-card p { margin-bottom: 0; }
.stack-form { display: grid; gap: 14px; }

/* -------------------------------------------------------------------------- */
/* Trainingsauswahl und Pläne                                                  */
/* -------------------------------------------------------------------------- */

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan-grid.compact { grid-template-columns: 1fr; }
.plan-card { display: flex; align-items: center; gap: 16px; padding: 20px; }
.plan-card h2, .plan-card p { margin: 0; }
.plan-card p { margin-top: 5px; font-size: .85rem; }
.plan-card.clickable:hover { border-color: rgba(52,220,135,.32); transform: translateY(-1px); }
.meta-row { display: flex; gap: 15px; margin-top: 12px; color: var(--muted); font-size: .78rem; }
.active-banner { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 18px; border-color: rgba(52,220,135,.3); }
.active-banner h2, .active-banner p { margin: 0; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.settings-layout.wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(310px, .65fr); }
.plan-exercise-row { display: flex; align-items: center; gap: 14px; padding: 15px; }
.plan-exercise-row h2, .plan-exercise-row p { margin: 0; }
.plan-exercise-row p { font-size: .78rem; margin-top: 2px; }
.exercise-number { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); border: 1px solid rgba(52,220,135,.27); color: var(--accent); font-weight: 800; }
.inline-settings { display: grid; grid-template-columns: repeat(4, 86px) 42px; gap: 8px; align-items: end; }
.inline-settings label { display: grid; gap: 5px; }
.inline-settings input { padding: 9px; }

/* -------------------------------------------------------------------------- */
/* Aktives Training                                                            */
/* -------------------------------------------------------------------------- */

.workout-header {
    position: sticky; top: 90px; z-index: 30; display: flex; align-items: center; gap: 25px;
    padding: 15px 18px; margin-bottom: 16px; backdrop-filter: blur(14px);
}
.workout-title { display: flex; align-items: center; gap: 13px; flex: 1; }
.workout-title h1, .workout-title p { margin: 0; }
.workout-title h1 { font-size: 1.35rem; margin-top: 3px; }
.workout-title p { color: var(--muted); font-size: .77rem; }
.session-timer { min-width: 150px; text-align: center; }
.session-timer span, .session-timer strong { display: block; }
.session-timer span { color: var(--muted); font-size: .74rem; }
.session-timer strong { font-size: 1.65rem; letter-spacing: .03em; }
.workout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.exercise-stack { display: grid; gap: 14px; }
.exercise-card { padding: 18px; scroll-margin-top: 175px; }
.exercise-header { display: flex; align-items: center; gap: 13px; }
.exercise-header h2, .exercise-header p { margin: 0; }
.exercise-header p { font-size: .8rem; margin-top: 2px; }
.previous-row { display: flex; justify-content: space-between; gap: 20px; margin: 16px 0 8px; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,.025); color: var(--muted); font-size: .78rem; }
.previous-row strong { color: var(--text); }
.set-table { margin-top: 15px; }
.set-row {
    display: grid; grid-template-columns: 54px minmax(120px, 1.2fr) minmax(80px, .7fr) minmax(70px, .55fr) 48px;
    gap: 9px; align-items: center; min-height: 58px; padding: 7px 0; border-top: 1px solid var(--line);
}
.set-head { min-height: auto; border-top: 0; color: var(--muted); font-size: .72rem; padding-bottom: 8px; }
.set-row label { position: relative; }
.set-row input[type="number"] { padding: 10px; text-align: center; }
.set-row label small { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.set-row label small + * { padding-right: 32px; }
.set-row.done { opacity: .72; }
.check-control { display: grid; place-items: center; }
.check-control input { position: absolute; opacity: 0; pointer-events: none; }
.check-control span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: transparent; cursor: pointer; }
.check-control input:checked + span { color: #062017; background: var(--accent); border-color: var(--accent); }
.exercise-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 12px; }
.save-state { color: var(--muted); font-size: .75rem; }
.save-state.saving { color: var(--warm); }
.save-state.saved { color: var(--accent); }
.save-state.error { color: var(--danger); }
.workout-sidebar { position: sticky; top: 187px; display: grid; gap: 14px; }
.rest-card { padding: 20px; text-align: center; }
.rest-card .card-label { justify-content: center; }
.rest-timer { display: block; margin: 13px 0; color: var(--accent); font-size: 2.2rem; letter-spacing: .04em; }
.mobile-workout-actions { display: none; }

/* -------------------------------------------------------------------------- */
/* Verlauf                                                                     */
/* -------------------------------------------------------------------------- */

.segmented-control a { padding: 8px 12px; color: var(--muted); border-radius: 9px; font-size: .82rem; }
.segmented-control a.active { color: var(--accent); background: var(--accent-soft); }
.legend { display: flex; gap: 15px; color: var(--muted); font-size: .75rem; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 18px; height: 3px; border-radius: 3px; }
.legend .green { background: var(--accent); }
.legend .blue { background: #45aeea; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: .81rem; }
th { color: var(--muted); font-weight: 650; }
tbody tr:hover { background: rgba(52,220,135,.035); }
.filter-form { margin-bottom: 10px; }
.empty-state { min-height: 130px; display: grid; place-items: center; padding: 25px; color: var(--muted); text-align: center; }

/* -------------------------------------------------------------------------- */
/* Tablet                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
    .desktop-nav { margin-left: auto; }
    .nav-link span { display: none; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .history-grid { grid-template-columns: 1fr 1fr; }
    .dashboard-grid .span-2, .history-grid .span-2 { grid-column: span 2; }
    .plan-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid.four { grid-template-columns: repeat(2, 1fr); }
    .inline-settings { grid-template-columns: repeat(2, 90px) 42px; }
}

/* -------------------------------------------------------------------------- */
/* Smartphone                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 760px) {
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .topbar { min-height: 62px; padding: 0 16px; }
    .brand { font-size: .92rem; }
    .brand-mark { width: 30px; height: 30px; }
    .desktop-nav { display: none; }
    .page-shell { width: calc(100% - 24px); padding: 22px 0 35px; }
    .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
    .page-heading h1 { font-size: 1.8rem; }
    .date-badge, .date-navigation, .segmented-control { width: 100%; }
    .date-navigation { justify-content: space-between; }
    .date-navigation span { min-width: 0; font-size: .87rem; }

    .mobile-nav {
        position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
        display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 5px calc(8px + env(safe-area-inset-bottom));
        background: rgba(8,17,16,.96); border-top: 1px solid var(--line); backdrop-filter: blur(18px);
    }
    .mobile-nav a { display: grid; justify-items: center; gap: 3px; color: var(--muted); font-size: .62rem; }
    .mobile-nav a.active { color: var(--accent); }
    .mobile-nav svg { width: 21px; height: 21px; }

    .flash-stack { left: 12px; right: 12px; top: 72px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-card { min-height: 122px; padding: 14px; }
    .kpi-card strong { margin-top: 13px; font-size: 1.35rem; }
    .card-label { font-size: .72rem; }
    .action-grid { grid-template-columns: 1fr; gap: 10px; }
    .action-card { min-height: 74px; padding: 13px 15px; }
    .action-icon { width: 40px; height: 40px; }
    .dashboard-grid, .history-grid { grid-template-columns: 1fr; gap: 11px; }
    .dashboard-grid .span-2, .history-grid .span-2 { grid-column: auto; }
    .chart-card, .recent-card, .week-card, .table-card { padding: 15px; min-height: auto; }
    .chart-wrap { min-height: 180px; }
    .bar-chart { height: 170px; }
    .list-metric { display: none; }
    .ring { width: 125px; }

    .checkin-layout, .settings-layout, .settings-layout.wide-left, .workout-layout { grid-template-columns: 1fr; }
    .sidebar-column, .workout-sidebar { position: static; }
    .form-grid.four, .form-grid.two { grid-template-columns: 1fr 1fr; }
    .form-section, .summary-card, .tip-card { padding: 15px; }
    .form-actions { grid-template-columns: 1fr; }
    .sticky-actions { position: sticky; bottom: 79px; z-index: 25; padding: 10px; margin: 0 -5px; background: rgba(7,16,15,.9); border-radius: 14px; backdrop-filter: blur(10px); }

    .plan-grid { grid-template-columns: 1fr; gap: 11px; }
    .plan-card { padding: 15px; }
    .plan-card .button { min-width: 90px; }
    .active-banner { align-items: flex-start; flex-wrap: wrap; }
    .active-banner .button { width: 100%; }
    .plan-exercise-row { align-items: flex-start; flex-wrap: wrap; }
    .inline-settings { width: 100%; grid-template-columns: repeat(2, 1fr); }
    .inline-settings .icon-button { width: 100%; }

    .workout-header { top: 70px; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 13px; }
    .workout-header > form { display: none; }
    .workout-title .plan-icon { display: none; }
    .workout-title h1 { font-size: 1.15rem; }
    .session-timer { min-width: 105px; }
    .session-timer strong { font-size: 1.15rem; }
    .workout-sidebar { display: none; }
    .exercise-card { padding: 13px; }
    .complete-chip { display: none; }
    .previous-row { display: grid; gap: 2px; }
    .set-row { grid-template-columns: 38px minmax(85px, 1.2fr) minmax(58px, .7fr) minmax(52px, .6fr) 38px; gap: 5px; }
    .set-row input[type="number"] { padding: 9px 4px; }
    .set-row label small { display: none; }
    .exercise-footer { align-items: flex-start; flex-direction: column; }
    .exercise-footer .button { width: 100%; }
    .mobile-workout-actions {
        position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
        background: rgba(8,17,16,.97); border-top: 1px solid var(--line); backdrop-filter: blur(18px);
    }
    .mobile-workout-actions form { margin-left: auto; }
    body:has(.mobile-workout-actions) .mobile-nav { display: none; }
    body:has(.mobile-workout-actions) { padding-bottom: 78px; }

    table { min-width: 690px; }
    .segmented-control { overflow-x: auto; }
}

@media (max-width: 430px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .kpi-card { min-height: 112px; }
    .form-grid.four, .form-grid.two { grid-template-columns: 1fr; }
    .brand span:last-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
}

/* -------------------------------------------------------------------------- */
/* Benutzerumschaltung und Einstellungen                                      */
/* -------------------------------------------------------------------------- */

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}
.user-switcher label { color: var(--muted); font-size: .72rem; }
.user-switcher select {
    width: auto;
    min-width: 105px;
    padding: 7px 30px 7px 9px;
    border: 0;
    background-color: var(--surface-2);
}
.settings-link {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--muted);
    background: var(--surface);
}
.settings-link:hover, .settings-link.active { color: var(--accent); border-color: rgba(52,220,135,.35); }
.settings-page-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 16px; }
.settings-card { padding: 20px; }
.user-list { display: grid; gap: 10px; }
.user-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255,255,255,.02);
}
.user-row strong, .user-row small { display: block; }
.user-row small { margin-top: 3px; }
.user-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 850;
}
.user-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.user-row-actions form { margin: 0; }
.user-row-actions .button { min-height: 38px; padding: 7px 11px; font-size: .78rem; }
.stack-form { display: grid; gap: 14px; }
.database-explanation { margin-top: 16px; padding: 20px; }
.database-explanation h2 { margin: 3px 0 16px; }
.database-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.database-columns > div { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); }
.database-columns p { margin: 6px 0 0; }

@media (max-width: 1120px) {
    .user-switcher label { display: none; }
    .user-switcher select { min-width: 90px; }
}

@media (max-width: 760px) {
    .topbar { gap: 10px; }
    .topbar-actions { gap: 6px; }
    .user-switcher { padding: 4px; }
    .user-switcher select { min-width: 76px; max-width: 105px; padding: 6px 23px 6px 7px; font-size: .78rem; }
    .settings-link { width: 35px; height: 35px; }
    .settings-page-grid, .database-columns { grid-template-columns: 1fr; }
    .settings-card, .database-explanation { padding: 15px; }
    .user-row { align-items: flex-start; flex-wrap: wrap; }
    .user-row-actions { width: 100%; justify-content: flex-start; padding-left: 55px; }
}

@media (max-width: 430px) {
    .brand span:last-child { display: none; }
}

/* -------------------------------------------------------------------------- */
/* Version 0.3: Date-Picker, kompakte Planaktionen und Trainingsbearbeitung    */
/* -------------------------------------------------------------------------- */

/* Der native Date-Picker liegt unsichtbar über der sichtbaren Datumsanzeige. */
.date-picker-control {
    position: relative;
    min-width: 230px;
    min-height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    cursor: pointer;
}
.date-picker-label {
    width: 100%;
    min-width: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 13px;
    color: var(--text);
    font-weight: 650;
    pointer-events: none;
}
.date-picker-control > input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.icon-button.disabled {
    opacity: .28;
    cursor: default;
    pointer-events: none;
}

/* Speichern und Mülleimer bilden nun einen gemeinsamen Bedienblock. */
.inline-settings {
    grid-template-columns: repeat(4, 86px) 42px 42px;
}

/* Klickbare Trainingszeilen erhalten eine dezente Bearbeitungsanzeige. */
.clickable-row { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.clickable-row:hover {
    border-color: rgba(52, 220, 135, .32);
    background: rgba(52, 220, 135, .045);
    transform: translateY(-1px);
}
.row-action-icon { flex: 0 0 auto; color: var(--accent); }

/* Kopfdaten eines gespeicherten Trainings. */
.workout-metadata-card { margin-bottom: 16px; }
.workout-meta-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) 150px 150px;
    gap: 14px;
    align-items: end;
}
.workout-notes-field { grid-column: 1 / -1; }
.workout-edit-actions { grid-column: 1 / -1; }
.workout-edit-stack { max-width: 1100px; }
.editable-set-row {
    grid-template-columns: 54px minmax(120px, 1.2fr) minmax(80px, .7fr) minmax(70px, .55fr) 48px 42px;
}
.empty-inline { padding: 18px 0; color: var(--muted); text-align: center; }
.danger-zone {
    max-width: 1100px;
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

@media (max-width: 1120px) {
    .inline-settings { grid-template-columns: repeat(2, 90px) 42px 42px; }
}

@media (max-width: 760px) {
    .date-picker-control { min-width: 0; flex: 1; }
    .date-picker-label { font-size: .87rem; padding-inline: 5px; }
    .inline-settings { grid-template-columns: repeat(2, 1fr) 42px 42px; }
    .inline-settings .icon-button { width: 42px; }
    .workout-meta-grid { grid-template-columns: 1fr 1fr; }
    .workout-meta-grid .field:first-of-type,
    .workout-notes-field,
    .workout-edit-actions { grid-column: 1 / -1; }
    .editable-set-row {
        grid-template-columns: 36px minmax(72px, 1.2fr) minmax(52px, .7fr) minmax(48px, .6fr) 36px 36px;
        gap: 4px;
    }
    .editable-set-row .icon-button { width: 36px; height: 36px; }
    .danger-zone { justify-content: stretch; }
    .danger-zone form, .danger-zone .button { width: 100%; }
}

@media (max-width: 430px) {
    .date-picker-label svg { display: none; }
    .workout-meta-grid { grid-template-columns: 1fr; }
    .workout-meta-grid .field,
    .workout-notes-field,
    .workout-edit-actions { grid-column: 1; }
}
.date-navigation .icon-button.disabled { min-width: 42px !important; }

/* -------------------------------------------------------------------------- */
/* Version 0.3.3: eindeutige Aktionen, sichtbarer Kalender, Trainingsverlauf   */
/* -------------------------------------------------------------------------- */

/*
   Die vier Zahlenfelder und EIN gemeinsamer Aktionsblock bilden die komplette
   rechte Seite einer Planzeile. Der Aktionsblock besitzt nur einen Außenrahmen;
   die Trennlinie zwischen Diskette und Mülleimer liegt innerhalb dieses Rahmens.
*/
.inline-settings {
    grid-template-columns: repeat(4, 86px) 88px;
}
.inline-action-group {
    width: 88px;
    height: 42px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: end;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
}
.inline-action-group .icon-button {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.inline-action-group .icon-button + .icon-button {
    border-left: 1px solid var(--line);
}
.inline-action-group .icon-button:hover {
    background: rgba(52, 220, 135, .08);
}
.inline-action-group .icon-button.danger-text:hover {
    background: rgba(255, 99, 107, .09);
}

/*
   Der Date-Picker ist nicht länger unsichtbar. Das native Feld bleibt sichtbar,
   zeigt das Kalender-Symbol des Browsers und kann über die gesamte Fläche
   angeklickt werden. Firefox, Chrome, Safari und mobile Browser verwenden dabei
   jeweils ihren systemeigenen Kalenderdialog.
*/
.date-picker-control {
    min-width: 220px;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
}
.date-picker-control > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--accent);
}
.date-picker-control > input[type="date"],
.native-date-input {
    position: static;
    inset: auto;
    width: 100%;
    height: 40px;
    padding: 0;
    opacity: 1;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    color-scheme: dark;
}
.date-picker-control > input[type="date"]:focus {
    outline: none;
}
.date-picker-control:focus-within {
    border-color: rgba(52, 220, 135, .55);
    box-shadow: 0 0 0 3px rgba(52, 220, 135, .10);
}
.date-picker-control > input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .9;
    cursor: pointer;
    filter: invert(78%) sepia(28%) saturate(1000%) hue-rotate(96deg) brightness(95%);
}

/* Kopfzeilen können mehrere klar getrennte Aktionen aufnehmen. */
.page-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.compact-heading {
    margin: 22px 0 12px;
}
.compact-heading h2,
.compact-heading p {
    margin: 0;
}

/* Der Verlauf erhält eine eigene, gut sichtbare Karte. */
.training-history-card {
    margin-top: 22px;
    padding: 20px;
    scroll-margin-top: 100px;
}
.history-training-card {
    margin-bottom: 16px;
}
.training-history-card .card-header {
    gap: 14px;
}
.training-history-card .card-header h2,
.training-history-card .card-header p {
    margin: 0;
}
.training-history-list {
    margin-top: 14px;
}
.training-history-row {
    align-items: center;
}
.compact-button {
    min-height: 38px;
    padding: 8px 12px;
    white-space: nowrap;
}
.edit-workout-button {
    flex: 0 0 auto;
}

@media (max-width: 1120px) {
    .inline-settings {
        grid-template-columns: repeat(2, 90px) 88px;
    }
}

@media (max-width: 760px) {
    .page-heading-actions {
        width: 100%;
        justify-content: stretch;
    }
    .page-heading-actions > .button,
    .page-heading-actions > .segmented-control {
        flex: 1 1 auto;
    }
    .inline-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inline-action-group {
        width: 100%;
        grid-column: 1 / -1;
    }
    .date-picker-control {
        min-width: 0;
        flex: 1;
    }
    .training-history-card {
        padding: 15px;
    }
    .training-history-row {
        flex-wrap: wrap;
    }
    .training-history-row .list-metric {
        margin-left: 54px;
        text-align: left;
    }
    .edit-workout-button {
        width: 100%;
        margin-left: 54px;
        justify-content: center;
    }
}

@media (max-width: 430px) {
    .date-picker-control > svg {
        display: none;
    }
    .training-history-row .list-metric,
    .edit-workout-button {
        margin-left: 0;
    }
}


/* -------------------------------------------------------------------------- */
/* Version 0.3.4: iPhone-Zeitfelder, Kalenderwoche und Trainingswoche          */
/* -------------------------------------------------------------------------- */

/*
   Safari auf iOS gibt nativen time-Feldern teilweise eine feste intrinsische
   Mindestbreite. In einem schmalen Kartenraster ragt das Feld dann über den
   rechten Kartenrand. Die folgenden Regeln erlauben dem Feld, wirklich auf die
   verfügbare Breite zu schrumpfen, ohne die native Zeitauswahl zu verlieren.
*/
.workout-metadata-card,
.workout-meta-grid,
.workout-meta-grid > .field,
.time-field {
    min-width: 0;
    max-width: 100%;
}
.time-input,
.workout-meta-grid input[type="time"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}
.time-input::-webkit-date-and-time-value,
.workout-meta-grid input[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    padding: 0;
    text-align: center;
}

/* Kalenderwoche sieht wie ein Eingabefeld aus, ist aber nur eine Berechnung. */
.readonly-input {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    color: var(--muted);
    font-weight: 700;
}

/* Pro Trainingsplan stehen Trainingswoche und Startknopf kompakt zusammen. */
.plan-start-form {
    flex: 0 0 150px;
    display: grid;
    gap: 8px;
    align-self: stretch;
    align-content: center;
}
.training-week-input {
    display: grid;
    gap: 5px;
}
.training-week-input > span {
    color: #a8b4b2;
    font-size: .72rem;
    font-weight: 650;
}
.training-week-input input {
    min-width: 0;
    padding: 9px 10px;
    text-align: center;
}
.plan-start-form .button {
    width: 100%;
}

/* Die Metadaten dürfen auf großen Bildschirmen kompakt, aber flexibel sein. */
.workout-meta-grid {
    grid-template-columns: minmax(220px, 1.35fr) minmax(135px, .65fr) minmax(135px, .65fr);
}

@media (max-width: 760px) {
    .plan-card {
        flex-wrap: wrap;
    }
    .plan-start-form {
        width: 100%;
        flex: 1 1 100%;
        grid-template-columns: minmax(0, 1fr) minmax(110px, .7fr);
        align-items: end;
    }
    .plan-start-form .button {
        min-height: 47px;
    }
}

@media (max-width: 430px) {
    .workout-metadata-card {
        overflow: hidden;
    }
    .workout-meta-grid input,
    .workout-meta-grid textarea,
    .workout-meta-grid output {
        min-width: 0;
        max-width: 100%;
    }
    .time-input,
    .workout-meta-grid input[type="time"] {
        font-size: 1rem;
    }
}

/* Die allgemeinen 0.3.4-Rasterregeln stehen am Dateiende; deshalb werden die
   mobilen Spaltenzahlen hier noch einmal ausdrücklich festgelegt. */
@media (max-width: 760px) {
    .workout-meta-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 430px) {
    .workout-meta-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.0: Übungsstore, Sortierung und Vollbild-Play-Modus              */
/* -------------------------------------------------------------------------- */

.full-width { width: 100%; }
.date-record-label {
    min-width: 230px;
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    font-weight: 750;
    text-align: center;
}
.entry-date-card .field { max-width: 340px; }
.workout-date-field { min-width: 0; }

/* Zentraler Übungsstore. */
.exercise-store-layout {
    display: grid;
    grid-template-columns: minmax(330px, .72fr) minmax(0, 1.4fr);
    gap: 18px;
    align-items: start;
}
.store-create-card { position: sticky; top: 92px; }
.exercise-store-list { display: grid; gap: 14px; }
.store-exercise-card { position: relative; padding: 16px; }
.store-exercise-form {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
}
.store-media-preview {
    min-height: 190px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #081210;
}
.store-media-preview img,
.store-media-preview video {
    width: 100%;
    height: 100%;
    min-height: 190px;
    max-height: 280px;
    display: block;
    object-fit: contain;
    background: #050b0a;
}
.media-placeholder {
    width: 100%;
    min-height: 190px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--muted);
}
.media-placeholder svg { width: 42px; height: 42px; }
.store-exercise-fields { min-width: 0; display: grid; gap: 12px; }
.store-card-actions { display: flex; justify-content: flex-end; }
.store-delete { position: absolute; top: 12px; right: 12px; z-index: 2; }
.check-line { display: flex; align-items: center; gap: 8px; color: var(--muted); }

/* Sortiergriff: genau drei horizontale Striche. */
.sortable-exercise-list { display: grid; gap: 14px; }
.drag-handle {
    width: 40px;
    height: 46px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: var(--muted);
    cursor: grab;
    touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 20px; height: 20px; }
.plan-exercise-row.is-dragging {
    opacity: .72;
    border-color: var(--accent);
    box-shadow: 0 14px 32px rgba(0,0,0,.35);
    transform: scale(.995);
}
body.is-sorting-plan { user-select: none; }
.plan-exercise-title { min-width: 180px; }
.inline-settings { grid-template-columns: repeat(4, 86px) 86px; }

/* Play-Modus nimmt bewusst den kompletten Viewport ein. */
.play-mode-body {
    min-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -20%, rgba(52,220,135,.13), transparent 45%),
        #06100e;
}
.play-mode-shell {
    width: min(920px, 100%);
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(18px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
}
.play-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.play-brand { display: flex; align-items: center; gap: 12px; }
.play-brand strong,
.play-brand small { display: block; }
.play-brand small { margin-top: 3px; color: var(--muted); }
.play-close {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text);
    background: rgba(255,255,255,.035);
}
.play-close svg { width: 30px; height: 30px; }
.play-progress { margin: 22px 0 14px; }
.play-progress > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .8rem; text-align: right; }
.play-progress > div { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.play-progress i { height: 100%; display: block; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.play-exercise-view { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.play-exercise-copy { text-align: center; }
.play-exercise-copy h1 { margin: 2px 0 4px; font-size: clamp(2rem, 7vw, 4.2rem); }
.play-exercise-copy p { margin: 0; color: var(--muted); }
.play-media {
    width: 100%;
    min-height: min(42vh, 420px);
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #030807;
}
.play-media img,
.play-media video { width: 100%; height: min(42vh, 420px); object-fit: contain; display: block; }
.play-placeholder { min-height: min(42vh, 420px); }
.play-description { max-width: 720px; margin: 0 auto; color: var(--muted); text-align: center; }
.play-set-callout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.play-set-callout > div {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    text-align: center;
}
.play-set-callout span,
.play-set-callout strong { display: block; }
.play-set-callout span { color: var(--muted); font-size: .72rem; }
.play-set-callout strong { margin-top: 5px; font-size: 1.05rem; }
.play-set-form { margin-top: auto; display: grid; gap: 14px; }
.play-input-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.play-input-grid label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.play-input-grid label > div { position: relative; }
.play-input-grid input {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #0b1715;
    color: var(--text);
    font-size: 1.1rem;
    text-align: center;
}
.play-input-grid em { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-style: normal; }
.play-primary-action,
.play-secondary-action {
    width: 100%;
    min-height: 60px;
    display: grid;
    place-items: center;
    padding: 14px 18px;
    border: 0;
    border-radius: 16px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 850;
    cursor: pointer;
}
.play-primary-action { background: linear-gradient(135deg, #3ee39a, #16bd72); color: #042016; }
.play-secondary-action { border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); }
.play-pause-view,
.play-complete-view {
    flex: 1;
    min-height: calc(100dvh - 110px - env(safe-area-inset-top));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}
.play-pause-view h1,
.play-complete-view h1 { margin: 0; font-size: clamp(2.2rem, 9vw, 4.5rem); }
.play-pause-view p,
.play-complete-view p { max-width: 560px; margin: 0; color: var(--muted); }
.play-countdown { color: var(--accent); font-size: clamp(5rem, 22vw, 10rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.play-pause-view .play-secondary-action,
.play-complete-view form { width: min(520px, 100%); margin-top: auto; }
.play-complete-check {
    width: 170px;
    height: 170px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #042016;
    background: var(--accent);
    box-shadow: 0 0 0 18px rgba(52,220,135,.1);
    font-size: 6rem;
    font-weight: 900;
}

@media (max-width: 900px) {
    .exercise-store-layout { grid-template-columns: 1fr; }
    .store-create-card { position: static; }
    .store-exercise-form { grid-template-columns: 170px minmax(0, 1fr); }
    .plan-exercise-row { align-items: flex-start; }
    .inline-settings { width: 100%; grid-template-columns: repeat(4, minmax(72px, 1fr)) 86px; }
}

@media (max-width: 620px) {
    .date-record-label { min-width: 0; flex: 1; font-size: .84rem; }
    .store-exercise-form { grid-template-columns: 1fr; }
    .store-media-preview { min-height: 160px; }
    .store-media-preview img,
    .store-media-preview video { min-height: 160px; max-height: 250px; }
    .drag-handle { order: 0; }
    .plan-exercise-title { min-width: calc(100% - 110px); }
    .inline-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inline-action-group { grid-column: 1 / -1; width: 100%; }
    .inline-action-group .icon-button { width: 50%; }
    .play-mode-shell { padding-inline: 14px; }
    .play-set-callout { grid-template-columns: 1fr 1fr; }
    .play-set-callout > div:last-child { grid-column: 1 / -1; }
    .play-input-grid { grid-template-columns: 1fr 1fr; }
    .play-input-grid label:first-child { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.2: Schrittlabels und horizontaler Sortiergriff              */
/* -------------------------------------------------------------------------- */

/* Speichern und Löschen werden als zusammengehörige Aktionsgruppe gezeigt. */
.grouped-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.plan-master-actions {
    grid-column: 1 / -1;
}
.store-card-actions {
    justify-content: flex-end;
}
.store-delete { position: static; }

/* Checkboxtext bleibt direkt neben dem Kontrollkästchen und in einer Zeile. */
.check-line {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.check-line input { flex: 0 0 auto; margin: 0; }

/* Pause pro Übung in der aktiven Einheit. */
.active-exercise-header { flex-wrap: wrap; }
.active-rest-form {
    display: flex;
    align-items: end;
    gap: 7px;
    margin-left: auto;
}
.active-rest-form label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}
.active-rest-form input {
    width: 118px;
    min-height: 42px;
    padding: 8px 10px;
    text-align: center;
}

/* Aktive und gespeicherte Satzzeilen besitzen zusätzlich eine Löschtaste. */
.active-edit-set-row {
    grid-template-columns: 45px minmax(90px, 1.15fr) minmax(65px, .8fr) minmax(58px, .7fr) 42px 42px;
}

/* Der Abschluss des Play-Modus sitzt wirklich in der Bildschirmmitte. */
.play-complete-view {
    justify-content: center;
    padding-block: clamp(30px, 8vh, 90px);
}
.play-complete-view form {
    margin-top: 26px;
}

/* Datum beim Bearbeiten bleibt als echter, sichtbarer Date-Picker erhalten. */
.workout-date-navigation .date-picker-control {
    flex: 1 1 250px;
}
.workout-date-navigation .native-date-input {
    width: 100%;
    text-align: center;
}

/* Diagramme dürfen auf schmalen iPhones niemals breiter als ihre Karte sein. */
.history-grid,
.history-grid > *,
.chart-card,
.chart-wrap,
.chart-wrap svg {
    min-width: 0;
    max-width: 100%;
}
.chart-card { overflow: hidden; }
.chart-wrap svg {
    display: block;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 760px) {
    .grouped-actions,
    .plan-master-actions,
    .store-card-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .grouped-actions .button { width: 100%; }

    .active-rest-form {
        width: 100%;
        margin-left: 48px;
    }
    .active-rest-form label { flex: 1; }
    .active-rest-form input { width: 100%; }

    .active-edit-set-row {
        grid-template-columns: 34px minmax(70px, 1.15fr) minmax(48px, .75fr) minmax(44px, .65fr) 36px 36px;
        gap: 4px;
    }
    .active-edit-set-row .icon-button { width: 36px; height: 36px; }

    .mobile-workout-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 7px;
    }
    .mobile-workout-actions form { margin: 0; min-width: 0; }
    .mobile-workout-actions .button {
        width: 100%;
        min-width: 0;
        padding: 10px 7px;
        font-size: .76rem;
    }
    .mobile-workout-actions .button svg { width: 17px; height: 17px; }

    .history-grid { width: 100%; overflow: hidden; }
    .chart-wrap { width: 100%; overflow: hidden; }
}

@media (max-width: 430px) {
    .workout-date-navigation { gap: 7px; }
    .workout-date-navigation .date-picker-control { min-width: 0; }
    .workout-date-navigation .native-date-input { font-size: .92rem; }
    .check-line { font-size: .82rem; }
    .play-complete-check { width: 150px; height: 150px; font-size: 5.3rem; }
}


/* -------------------------------------------------------------------------- */
/* Verknüpfungen zu selten benötigten Verwaltungsseiten in den Einstellungen  */
/* -------------------------------------------------------------------------- */
.settings-management {
    padding: 20px;
    margin-bottom: 16px;
}
.settings-management .card-header { margin-bottom: 14px; }
.settings-management-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.settings-management-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.settings-management-link:hover {
    border-color: rgba(52,220,135,.35);
    background: rgba(52,220,135,.055);
    transform: translateY(-1px);
}
.settings-management-link strong,
.settings-management-link small { display: block; }
.settings-management-link small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
}
.settings-management-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--accent);
    background: var(--accent-soft);
}
.settings-management-icon svg { width: 23px; height: 23px; }
.settings-management-link > .arrow {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--muted);
}

@media (max-width: 700px) {
    .settings-management { padding: 15px; }
    .settings-management-grid { grid-template-columns: 1fr; }
    .settings-management-link { padding: 13px; }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.4: Trainingswoche, Zeitraumfilter und konsistente Formularbreite */
/* -------------------------------------------------------------------------- */

.form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Der direkte Dashboard-Start ist ein echtes POST-Formular. */
.dashboard-action-form { margin: 0; min-width: 0; }
.dashboard-action-form .action-card {
    width: 100%;
    min-height: 86px;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.span-all { grid-column: 1 / -1; }
.dashboard-plans-card { padding: 20px; }
.dashboard-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.dashboard-plan-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
}
.dashboard-plan-item.scheduled {
    border-color: rgba(52,220,135,.34);
    background: rgba(52,220,135,.045);
}
.dashboard-plan-item strong,
.dashboard-plan-item small { display: block; }
.dashboard-plan-item small { margin-top: 3px; color: var(--muted); }

/* Die Trainingsaufzeichnung besitzt auf dem Desktop durchgehend dieselbe Breite. */
.workout-metadata-card,
.workout-edit-stack,
.workout-edit-actions {
    width: 100%;
    max-width: 1100px;
}
.workout-edit-actions {
    margin-top: 14px;
}

/* Native Date-Felder werden auf iOS über einen schrumpfbaren Wrapper begrenzt. */
.native-date-field-wrap {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #0b1516;
}
.native-date-field-wrap:focus-within {
    border-color: rgba(52,220,135,.65);
    box-shadow: 0 0 0 3px rgba(52,220,135,.09);
}
.native-date-field-wrap input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.entry-date-field { width: min(340px, 100%); max-width: 100%; }

/* Zeitraumfilter der Auswertungsseite. */
.history-filter {
    display: grid;
    grid-template-columns: minmax(145px, .75fr) minmax(190px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}
.history-filter .button { min-height: 43px; }
.history-start-field { min-width: 0; }

@media (max-width: 1050px) {
    .dashboard-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-master-form .plan-master-actions { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .dashboard-grid .span-all { grid-column: auto; }
    .dashboard-plans-card { padding: 15px; }
    .dashboard-plan-grid { grid-template-columns: 1fr; }
    .dashboard-plan-item .value-chip { display: none; }

    .history-heading { gap: 14px; }
    .history-filter {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }
    .history-filter .button { grid-column: 1 / -1; width: 100%; }

    .form-grid.three { grid-template-columns: 1fr 1fr; }

    /* 57 px entsprechen der tatsächlichen Hot-Bar-Höhe ohne Safe-Area. */
    .sticky-actions {
        bottom: calc(57px + env(safe-area-inset-bottom));
        margin-bottom: 0;
        border-radius: 14px 14px 0 0;
    }
}

@media (max-width: 430px) {
    .history-filter,
    .form-grid.three { grid-template-columns: 1fr; }
    .history-filter .button { grid-column: 1; }
    .entry-date-card .field,
    .entry-date-field { width: 100%; max-width: 100%; }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.5: Übungsziel als Anzahl oder Sekunden                         */
/* -------------------------------------------------------------------------- */

.form-grid.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Fünf Übungswerte plus gemeinsamer Speichern-/Löschen-Block. */
.inline-settings {
    grid-template-columns: repeat(5, 86px) 88px;
}

.inline-settings select {
    min-width: 0;
    padding: 9px 28px 9px 9px;
}

@media (max-width: 1120px) {
    .form-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .inline-settings {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .form-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inline-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inline-action-group { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 430px) {
    .form-grid.five { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------- */
/* Version 0.4.6: kompakter Play-Modus für iPhone                            */
/* -------------------------------------------------------------------------- */

.play-progress {
    margin: 14px 0 8px;
}
.play-progress-meta {
    height: auto;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
}
.play-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.08);
}
.play-progress-track i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--accent);
    transition: width .25s ease;
}
.play-exercise-view {
    gap: 10px;
    min-height: 0;
}
.play-exercise-copy h1 {
    margin: 0;
    font-size: clamp(1.75rem, 6vw, 3.4rem);
    line-height: 1.08;
}
.play-media {
    width: min(760px, 88%);
    min-height: min(31vh, 310px);
    margin-inline: auto;
    border-radius: 17px;
}
.play-media img,
.play-media video {
    height: min(31vh, 310px);
}
.play-placeholder {
    min-height: min(31vh, 310px);
}
.play-set-callout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.play-set-callout > div {
    padding: 8px 10px;
    border-radius: 12px;
}
.play-set-callout span {
    font-size: .66rem;
}
.play-set-callout strong {
    margin-top: 2px;
    font-size: .88rem;
}
.play-input-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.play-set-form {
    gap: 10px;
}
.play-input-grid input {
    min-height: 48px;
    padding: 9px;
    font-size: 1rem;
}
.play-primary-action {
    min-height: 56px;
}

/* Gewünschter Abstand zwischen Abschluss-Haken und Statuszeile. */
.play-complete-check {
    margin-bottom: 42px;
}

@media (max-width: 620px) {
    .play-mode-body {
        height: 100dvh;
        overflow: hidden;
    }
    .play-mode-shell {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding-top: calc(10px + env(safe-area-inset-top));
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .play-mode-header {
        min-height: 42px;
    }
    .play-brand {
        gap: 8px;
    }
    .play-brand .brand-mark {
        width: 34px;
        height: 34px;
        font-size: .9rem;
    }
    .play-brand strong {
        font-size: .92rem;
    }
    .play-brand small {
        margin-top: 1px;
        font-size: .68rem;
    }
    .play-close {
        width: 42px;
        height: 42px;
    }
    .play-close svg {
        width: 26px;
        height: 26px;
    }
    .play-progress {
        margin: 8px 0 5px;
    }
    .play-exercise-view {
        flex: 1;
        gap: 7px;
        overflow: hidden;
    }
    .play-exercise-copy h1 {
        font-size: clamp(1.45rem, 7vw, 2rem);
    }
    .play-media {
        flex: 1 1 auto;
        width: 84%;
        min-height: 105px;
        max-height: 25dvh;
    }
    .play-media img,
    .play-media video,
    .play-placeholder {
        height: 100%;
        min-height: 105px;
        max-height: 25dvh;
    }
    .play-description {
        display: none;
    }
    .play-set-callout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .play-set-callout > div:last-child {
        grid-column: auto;
    }
    .play-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .play-input-grid label:first-child {
        grid-column: auto;
    }
    .play-input-grid label {
        gap: 3px;
        font-size: .7rem;
    }
    .play-input-grid input {
        min-height: 44px;
    }
    .play-primary-action {
        min-height: 52px;
        padding: 10px 14px;
    }
    .play-complete-check {
        margin-bottom: 34px;
    }
}

@media (max-height: 720px) and (max-width: 620px) {
    .play-media {
        max-height: 20dvh;
    }
    .play-media img,
    .play-media video,
    .play-placeholder {
        max-height: 20dvh;
    }
    .play-set-callout > div {
        padding-block: 6px;
    }
    .play-input-grid input {
        min-height: 40px;
    }
    .play-primary-action {
        min-height: 48px;
    }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.7: Play-Fortschritt, ursprüngliche Mediengröße und DB-Datum     */
/* -------------------------------------------------------------------------- */

/*
   Die ältere Regel ".play-progress > div" trifft sowohl die Textzeile als
   auch den Balken. Mit dem direkten Kindselektor ist die Textzeile nun
   eindeutig vom eigentlichen Fortschrittsbalken getrennt.
*/
.play-progress > .play-progress-meta {
    width: 100%;
    height: auto;
    min-height: 32px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    padding: 0 2px;
    border-radius: 0;
    background: transparent;
}
.play-progress-stat {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.2;
    white-space: nowrap;
}
.play-progress-stat strong {
    color: var(--text);
    font-size: 1rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.play-progress-stat-right { justify-content: flex-end; text-align: right; }
.play-progress > .play-progress-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.play-progress > .play-progress-track i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #32da90, #20c97a);
    transition: width .25s ease;
}

/* Die Medienfläche erhält wieder die ursprüngliche volle Breite und Höhe. */
.play-media {
    width: 100%;
    min-height: min(42vh, 420px);
    margin-inline: 0;
    border-radius: 20px;
}
.play-media img,
.play-media video {
    width: 100%;
    height: min(42vh, 420px);
}
.play-placeholder {
    min-height: min(42vh, 420px);
}

/* Das Datum oben dient nur der Orientierung; geändert wird es im Formular. */
.date-picker-control.date-display-only {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 13px;
    color: var(--text);
    cursor: default;
}
.date-picker-control.date-display-only svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}
.workout-entry-date-field { min-width: 0; }
.workout-entry-date-field .native-date-field-wrap { min-height: 47px; }
.workout-entry-date-field input[type="date"] {
    color: var(--text);
    font: inherit;
}

@media (max-width: 620px) {
    .play-progress > .play-progress-meta {
        min-height: 27px;
        margin-bottom: 6px;
        padding-inline: 0;
    }
    .play-progress-stat {
        gap: 4px;
        font-size: .7rem;
    }
    .play-progress-stat strong { font-size: .9rem; }
    .play-progress > .play-progress-track { height: 9px; }

    .play-media {
        flex: 0 0 auto;
        width: 100%;
        height: clamp(250px, 42dvh, 360px);
        min-height: 0;
        max-height: none;
    }
    .play-media img,
    .play-media video,
    .play-placeholder {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
    }
}

@media (max-height: 720px) and (max-width: 620px) {
    .play-media {
        height: clamp(210px, 36dvh, 285px);
        max-height: none;
    }
    .play-media img,
    .play-media video,
    .play-placeholder { max-height: none; }
}

@media (max-width: 430px) {
    .date-picker-control.date-display-only {
        min-width: 0;
        padding-inline: 7px;
        font-size: .84rem;
    }
    .date-picker-control.date-display-only svg { display: none; }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.8: gemeinsames Planspeichern, Benutzerpasswort und Datumshilfen */
/* -------------------------------------------------------------------------- */

.plan-complete-form { min-width: 0; }
.plan-exercise-row { flex-wrap: wrap; }
.plan-inline-settings {
    width: 100%;
    flex: 1 0 100%;
    grid-template-columns: repeat(6, minmax(90px, 1fr));
    padding-left: 54px;
}
.plan-row-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.plan-row-actions .button { min-height: 40px; }
.compact-unit input { padding-right: 34px; }

.user-row-expanded { display: grid; grid-template-columns: auto minmax(150px, 1fr) auto; }
.user-main-info { min-width: 0; }
.user-password-form {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: end;
    gap: 8px;
}
.user-delete-form { grid-column: 2 / 4; justify-self: end; }

.date-quick-button {
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: var(--accent);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
}
.date-quick-button:hover { background: rgba(52,220,135,.08); }
.field-inline-action { margin-top: 7px; align-self: flex-start; }
.history-start-field { min-width: 200px; }

@media (max-width: 1120px) {
    .plan-inline-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .plan-inline-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
    .plan-row-actions { justify-content: stretch; }
    .plan-row-actions .button { flex: 1 1 calc(50% - 4px); }
    .user-row-expanded { grid-template-columns: auto minmax(0, 1fr); }
    .user-row-expanded .user-row-actions,
    .user-password-form,
    .user-delete-form { grid-column: 1 / -1; padding-left: 0; width: 100%; }
    .user-password-form { grid-template-columns: 1fr; }
    .user-delete-form { justify-self: stretch; }
    .user-delete-form .button { width: 100%; }
    .date-navigation { flex-wrap: wrap; }
    .date-navigation .date-quick-button { order: 4; width: 100%; }
}

@media (max-width: 430px) {
    .plan-inline-settings { grid-template-columns: 1fr; }
    .plan-row-actions .button { flex-basis: 100%; }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.9: separate Benutzerverwaltung und Passwort-Bestätigungsfluss  */
/* -------------------------------------------------------------------------- */

.user-settings-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: var(--muted);
}
.user-settings-button:hover {
    color: var(--accent);
    border-color: rgba(52,220,135,.35);
}
.user-settings-heading {
    align-items: center;
}
.user-security-card {
    max-width: 860px;
    margin-inline: auto;
    padding: 22px;
}
.user-security-form {
    display: grid;
    gap: 16px;
}
.user-security-password {
    max-width: 540px;
}
.user-security-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.user-security-actions .user-delete-button {
    margin-left: auto;
}
.user-delete-button:disabled {
    opacity: .35;
    filter: grayscale(.25);
}

@media (max-width: 760px) {
    .user-settings-heading {
        align-items: flex-start;
    }
    .user-security-card {
        padding: 15px;
    }
    .user-security-password {
        max-width: none;
    }
    .user-security-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .user-security-actions .button,
    .user-security-actions .user-delete-button {
        width: 100%;
        margin-left: 0;
    }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.10: einheitliche Datumsnavigation für Training und Auswertung  */
/* -------------------------------------------------------------------------- */

/* Die Trainingsauswahl verwendet denselben vollwertigen Date-Picker wie der Check-in. */
.workout-date-navigation {
    max-width: 100%;
}
.workout-date-navigation .date-picker-control {
    flex: 1 1 250px;
}
.workout-date-navigation .native-date-input {
    width: 100%;
    min-width: 0;
    text-align: center;
}

/* Der Verlaufsfilter erhält eine kompakte Periodenauswahl und eine echte Datumsleiste. */
.history-filter {
    grid-template-columns: minmax(145px, .65fr) minmax(340px, 1.45fr) auto;
}
.history-period-field,
.history-start-field {
    min-width: 0;
}
.history-date-navigation {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
}
.history-date-navigation .date-picker-control {
    min-width: 0;
    flex: 1 1 auto;
}
.history-date-navigation .native-date-input {
    width: 100%;
    min-width: 0;
    text-align: center;
}
.history-date-navigation .icon-button {
    flex: 0 0 42px;
}

@media (max-width: 760px) {
    .history-filter {
        grid-template-columns: 1fr;
    }
    .history-period-field,
    .history-start-field,
    .history-filter .button {
        grid-column: 1;
        width: 100%;
    }
    .history-date-navigation {
        flex-wrap: nowrap;
    }
}

@media (max-width: 430px) {
    .workout-date-navigation,
    .history-date-navigation {
        gap: 7px;
        padding: 7px;
    }
    .workout-date-navigation .date-picker-control,
    .history-date-navigation .date-picker-control {
        min-width: 0;
        padding-inline: 7px;
    }
    .workout-date-navigation .native-date-input,
    .history-date-navigation .native-date-input {
        font-size: .88rem;
    }
}


/* -------------------------------------------------------------------------- */
/* Version 0.4.11: Verlaufsfilter in zwei klar getrennten Zeilen              */
/* -------------------------------------------------------------------------- */

.history-filter {
    width: min(650px, 100%);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}
.history-start-field,
.history-period-field {
    width: 100%;
}
.history-filter-actions {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.history-filter-actions .button {
    min-width: 128px;
}
.history-date-navigation .date-quick-button {
    order: initial;
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 760px) {
    .history-filter {
        width: 100%;
    }
    .history-filter-actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .history-filter-actions .button {
        grid-column: auto;
        width: auto;
    }
}

@media (max-width: 430px) {
    .history-filter-actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .history-filter-actions .button {
        min-width: 112px;
        padding-inline: 12px;
    }
    .history-date-navigation .date-quick-button {
        width: auto;
        padding-inline: 9px;
    }
}


/* -------------------------------------------------------------------------- */
/* Version 0.4.12: Wochen-Kaloriensteuerung und druckbarer Fortschrittsreport */
/* -------------------------------------------------------------------------- */
.calorie-week-card { margin-top: 18px; padding: 20px; }
.calorie-week-header { align-items: flex-start; }
.calorie-target-link { text-decoration: none; white-space: nowrap; }
.calorie-week-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 16px 0; }
.calorie-week-summary > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.calorie-week-summary span,.calorie-week-summary strong { display: block; }
.calorie-week-summary span { color: var(--muted); font-size: .78rem; }
.calorie-week-summary strong { margin-top: 5px; }
.calorie-week-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 9px; }
.calorie-day { min-width: 0; padding: 13px 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.018); }
.calorie-day.entered { border-color: rgba(42,222,157,.38); background: rgba(42,222,157,.055); }
.calorie-day.today { outline: 1px solid var(--accent); outline-offset: 2px; }
.calorie-day-head { display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.calorie-day-head span,.calorie-day small { color:var(--muted); font-size:.73rem; }
.calorie-day-value { display:block; margin:13px 0 4px; font-size:1.05rem; white-space:nowrap; }
.calorie-day.planned .calorie-day-value { color:var(--accent); }
.calorie-week-formula { margin:14px 0 0; font-size:.82rem; }
.user-preference-card { max-width:860px; margin:0 auto 18px; padding:22px; }
.user-calorie-target-form { display:grid; grid-template-columns:minmax(180px,320px) auto; align-items:end; gap:10px; }
.user-calorie-target-form .button { min-height:43px; }
.history-action-buttons { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.history-action-buttons .button { min-height:43px; }
.print-only { display:none; }
@media (max-width:900px) { .calorie-week-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .calorie-week-days { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:760px) {
    .calorie-week-card { padding:15px; }
    .calorie-week-days { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .user-preference-card { padding:15px; }
    .user-calorie-target-form { grid-template-columns:1fr; }
    .user-calorie-target-form .button { width:100%; }
    .history-action-buttons { display:grid; grid-template-columns:1fr 1fr; }
    .history-action-buttons .button { width:100%; }
}
@media (max-width:430px) { .calorie-week-summary,.calorie-week-days { grid-template-columns:1fr 1fr; } .calorie-day-value { font-size:.98rem; } .history-action-buttons { grid-template-columns:1fr; } }
@media print {
    /*
       A4-Report: Die Bildschirmansicht bleibt unverändert. Für den Ausdruck
       werden die Inhalte auf zwei logische Bereiche verteilt: Übersicht und
       Diagramme auf Seite 1, die Wochen-Tabelle ab einer neuen Seite.
    */
    @page { size: A4 portrait; margin: 10mm 11mm 11mm; }

    html,
    body {
        width: 100% !important;
        background: #ffffff !important;
        color: #17201c !important;
        font-size: 9.2pt !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    body { padding: 0 !important; }

    .topbar,
    .mobile-nav,
    .flash-stack,
    .history-heading,
    .history-filter,
    .no-print,
    .filter-form {
        display: none !important;
    }

    .page-shell {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .print-only { display: block !important; }

    .print-report-header {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8mm;
        margin: 0 0 5mm;
        padding: 4.5mm 5mm;
        border: 0 !important;
        border-left: 2.2mm solid #169b68 !important;
        border-radius: 2.5mm;
        background: #edf8f3 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header strong {
        color: #14724f !important;
        font-size: 9pt;
        letter-spacing: .02em;
    }

    .print-report-header h1 {
        margin: 1.8mm 0 1mm;
        color: #12392b !important;
        font-size: 18pt !important;
        line-height: 1.08;
    }

    .print-report-header p,
    .print-report-header small {
        color: #4d6259 !important;
    }

    .print-report-header small {
        white-space: nowrap;
        padding-top: 1mm;
        font-size: 7.8pt;
    }

    .print-report-kpis {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3mm !important;
        margin: 0 0 4mm !important;
    }

    .print-report-kpis .kpi-card {
        min-height: 0 !important;
        padding: 3.2mm 3.5mm !important;
        border: .35mm solid #cfe3d9 !important;
        border-top: 1.1mm solid #169b68 !important;
        border-radius: 2.2mm !important;
        background: #f7fbf9 !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-kpis .kpi-card:nth-child(2) {
        border-top-color: #d88428 !important;
        background: #fff9f1 !important;
    }

    .print-report-kpis .kpi-card:nth-child(3) {
        border-top-color: #2e9b83 !important;
        background: #f2faf8 !important;
    }

    .print-report-kpis .kpi-card:nth-child(4) {
        border-top-color: #3e82c5 !important;
        background: #f2f7fc !important;
    }

    .print-report-kpis .card-label {
        gap: 1.5mm;
        color: #287258 !important;
        font-size: 7.6pt !important;
        line-height: 1.2;
    }

    .print-report-kpis .card-label.accent-warm { color: #a65f18 !important; }

    .print-report-kpis .card-label svg {
        width: 4mm !important;
        height: 4mm !important;
    }

    .print-report-kpis .kpi-card > strong {
        margin-top: 2.4mm !important;
        color: #173d30 !important;
        font-size: 15pt !important;
        line-height: 1;
    }

    .print-report-kpis .kpi-card > span:last-child {
        margin-top: 2mm !important;
        color: #63736c !important;
        font-size: 7.3pt !important;
    }

    .history-grid {
        display: block !important;
        overflow: visible !important;
    }

    /*
       Seite 1 bleibt eine kompakte Übersicht. Die Wochen-Tabelle beginnt
       bewusst auf Seite 2. Beim 7-Tage-Report folgen dort direkt die
       detaillierten Tageswerte. Die Kraftentwicklung bleibt nur am Bildschirm.
    */
    .history-grid > .card { margin-bottom: 4mm !important; }

    .print-week-table {
        break-before: page;
        page-break-before: always;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    .print-strength-chart {
        display: none !important;
    }

    .history-grid .card {
        min-width: 0 !important;
        padding: 4mm !important;
        background: #ffffff !important;
        color: #17201c !important;
        border: .35mm solid #ccd9d3 !important;
        border-radius: 2.4mm !important;
        box-shadow: none !important;
    }

    .print-weight-chart,
    .print-body-chart {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .history-grid .card-header {
        margin-bottom: 2.5mm !important;
        gap: 3mm !important;
    }

    .history-grid .card-header h2 {
        margin: 0 !important;
        color: #153a2d !important;
        font-size: 11.2pt !important;
    }

    .history-grid .card-header p,
    .history-grid .muted,
    .history-grid .card small {
        color: #607168 !important;
    }

    .value-chip {
        color: #0e704b !important;
        background: #e8f6ef !important;
        border-color: #b9ddcc !important;
    }

    .chart-wrap,
    .chart-wrap.compact {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .chart-wrap svg,
    .chart-wrap.compact svg {
        display: block !important;
        width: 100% !important;
        height: 38mm !important;
        max-height: 38mm !important;
        overflow: visible !important;
    }

    .print-weight-chart .chart-wrap svg {
        height: 43mm !important;
        max-height: 43mm !important;
    }

    .chart-grid { stroke: #dce7e2 !important; }

    .chart-line {
        stroke: #139a65 !important;
        stroke-width: 2.2 !important;
        filter: none !important;
    }

    .chart-line.blue { stroke: #367fbd !important; }
    .chart-line.dashed { stroke: #19a77a !important; }

    .legend {
        margin-top: 2mm !important;
        color: #4d6259 !important;
        font-size: 7.5pt !important;
    }

    .legend .green { background: #139a65 !important; }
    .legend .blue { background: #367fbd !important; }

    /* Die Tabelle darf über mehrere A4-Seiten laufen; Zeilen selbst nicht. */
    .print-week-table {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .print-week-table .card-header {
        padding: 0 0 3mm !important;
        border-bottom: .45mm solid #169b68 !important;
        break-after: avoid;
        page-break-after: avoid;
    }

    /*
       Der 7-Tage-Report erhält auf derselben zweiten A4-Seite zwei kompakte
       Detailtabellen. Die Aufteilung verhindert eine unlesbar breite Tabelle.
    */
    .print-daily-details {
        display: block !important;
        margin: 5mm 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        break-before: auto !important;
        page-break-before: auto !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .print-daily-details > .card-header {
        margin: 0 0 3mm !important;
        padding: 0 0 3mm !important;
        border-bottom: .45mm solid #367fbd !important;
    }

    .print-daily-table-section {
        margin: 0 0 4mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .print-daily-table-section:last-child { margin-bottom: 0 !important; }

    .print-daily-table-section h3 {
        margin: 0 0 1.8mm !important;
        color: #174d3a !important;
        font-size: 9pt !important;
    }

    .print-daily-table {
        font-size: 7.1pt !important;
    }

    .print-daily-table th,
    .print-daily-table td {
        padding: 1.45mm 1.15mm !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    .print-daily-table th:first-child,
    .print-daily-table td:first-child {
        color: #155b40 !important;
    }

    .responsive-table {
        width: 100% !important;
        overflow: visible !important;
    }

    table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        font-size: 7.7pt !important;
    }

    thead { display: table-header-group !important; }
    tfoot { display: table-footer-group !important; }

    tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    th,
    td {
        padding: 2.1mm 1.8mm !important;
        color: #25312c !important;
        border-bottom: .25mm solid #d9e3de !important;
        vertical-align: middle !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    th {
        color: #155b40 !important;
        background: #eaf6f0 !important;
        border-top: .35mm solid #bcd9cc !important;
        border-bottom: .45mm solid #9ecbb8 !important;
        font-weight: 750 !important;
    }

    tbody tr:nth-child(even) td { background: #f7faf8 !important; }
    tbody td:first-child strong { color: #14724f !important; }

    .empty-state {
        color: #66766f !important;
        background: #f7faf8 !important;
        border-color: #d8e4de !important;
    }

    a {
        color: #14724f !important;
        text-decoration: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Version 0.4.14 – freie Trainingstage und Übungssuche                       */
/* -------------------------------------------------------------------------- */

/* Bereits von einem anderen Plan belegte Wochentage bleiben sichtbar, sind
   aber bewusst grau und nicht auswählbar. Native Picker respektieren disabled. */
select option:disabled {
    color: #697573;
    background: #111b1c;
}

.store-browser {
    min-width: 0;
    display: grid;
    gap: 14px;
    align-content: start;
}
.store-search-field,
.search-field {
    min-width: 0;
}
.store-search-field input[type="search"],
.search-field input[type="search"] {
    min-width: 0;
}

/* Das hidden-Attribut muss bei Karten Vorrang vor deren display-Regeln haben. */
.store-exercise-card[hidden],
[data-store-no-results][hidden] {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/* 0.4.17 – Schlafzeiten im täglichen Check-in                               */
/* -------------------------------------------------------------------------- */

.field-hint {
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.35;
}

/* Native time-Felder bekommen wie Date-Felder einen eigenen Wrapper. Dadurch
   bleiben sie auf Safari/iOS innerhalb der Kartenbreite. */
.native-time-field-wrap {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #0b1516;
}
.native-time-field-wrap:focus-within {
    border-color: rgba(52,220,135,.65);
    box-shadow: 0 0 0 3px rgba(52,220,135,.09);
}
.native-time-field-wrap input[type="time"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.native-time-field-wrap input[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    padding: 0;
}

.sleep-duration-field input {
    padding-right: 52px;
}
.sleep-calculation-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.sleep-calculation-controls .button {
    min-height: 42px;
}
.sleep-calculation-controls [data-sleep-calculation-status].success {
    color: var(--accent);
}
.sleep-calculation-controls [data-sleep-calculation-status].error {
    color: #ff8990;
}

@media (max-width: 760px) {
    .sleep-calculation-controls {
        align-items: stretch;
    }
    .sleep-calculation-controls .button {
        width: 100%;
    }
}