:root {
    /* Zyklus 28: color-scheme wird jetzt aktiv anhand des Theme-Zustands gesetzt (siehe
       [data-theme] weiter unten und das Toggle-Script in nav.php) -- ohne diese Angabe hat
       iOS Safari (u.a.) bei System-Dark-Mode früher eigenmächtig Farben "automatisch"
       angepasst und dabei den Kontrast der Karten/Buttons verschlechtert. */
    color-scheme: light;
    --color-primary: #2c7be5;
    --color-primary-dark: #1a68d1;
    --color-danger: #e74c3c;
    --color-danger-dark: #c0392b;
    --color-success: #1f9d55;
    --color-success-bg: #e6f7ec;
    --color-danger-bg: #fdecea;
    --color-text: #333a45;
    --color-text-muted: #6b7280;
    --color-heading: #4a536e;
    --color-border: #e0e0e3;
    --color-nav-bg: #2f3947;
    --color-nav-bg-hover: #3b4656;
    --color-nav-text: #c1c4c8;
    --color-nav-text-hover: #eaebed;
    --color-page-bg: #f3f4f7;
    --color-card-bg: #ffffff;
    --color-surface-muted: #eef0f3;
    --color-table-row-hover: #f8f9fb;
    --color-input-bg: #ffffff;
    --color-modal-header-bg: #f3f3f3;
    --color-modal-header-border: #dddddd;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.25);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --nav-height: 64px;
}

/* Dark Mode (Zyklus 28): folgt der System-Einstellung, außer der Nutzer hat über den
   Umschalter in nav.php explizit hell/dunkel gewählt ([data-theme] auf <html>, per
   localStorage gemerkt -- siehe Inline-Script in nav.php). Beide Blöcke sind bewusst
   dieselben Werte, einmal an die Media Query gebunden (System-Default), einmal ans Attribut
   (expliziter Toggle) -- eine Kombination aus beidem geht in reinem CSS nicht ohne Duplikat. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-primary: #5b9bff;
        --color-primary-dark: #7fb0ff;
        --color-danger: #ff6b5b;
        --color-danger-dark: #ff8a7c;
        --color-success: #3ecf7e;
        --color-success-bg: #163524;
        --color-danger-bg: #3a1c1a;
        --color-text: #d7dbe2;
        --color-text-muted: #9aa2b1;
        --color-heading: #e4e7ee;
        --color-border: #3a4150;
        --color-nav-bg: #1b212c;
        --color-nav-bg-hover: #262e3b;
        --color-nav-text: #b7bcc6;
        --color-nav-text-hover: #f0f1f4;
        --color-page-bg: #161b22;
        --color-card-bg: #232a35;
        --color-surface-muted: #2b3341;
        --color-table-row-hover: #262e3a;
        --color-input-bg: #1d232d;
        --color-modal-header-bg: #232a35;
        --color-modal-header-border: #3a4150;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #5b9bff;
    --color-primary-dark: #7fb0ff;
    --color-danger: #ff6b5b;
    --color-danger-dark: #ff8a7c;
    --color-success: #3ecf7e;
    --color-success-bg: #163524;
    --color-danger-bg: #3a1c1a;
    --color-text: #d7dbe2;
    --color-text-muted: #9aa2b1;
    --color-heading: #e4e7ee;
    --color-border: #3a4150;
    --color-nav-bg: #1b212c;
    --color-nav-bg-hover: #262e3b;
    --color-nav-text: #b7bcc6;
    --color-nav-text-hover: #f0f1f4;
    --color-page-bg: #161b22;
    --color-card-bg: #232a35;
    --color-surface-muted: #2b3341;
    --color-table-row-hover: #262e3a;
    --color-input-bg: #1d232d;
    --color-modal-header-bg: #232a35;
    --color-modal-header-border: #3a4150;
}

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    background-color: #435165;
    color: var(--color-text);
    line-height: 1.5;
}

a {
    color: var(--color-primary);
}

/* Lange, ungetrennte Strings (z. B. der Einladungslink als Fallback in invite_create.php)
   würden ihre Karte sonst auf schmalen Bildschirmen sprengen. */
code {
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Login / Registrierung */
.login,
.register {
    width: 400px;
    max-width: 92vw;
    background-color: var(--color-card-bg);
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    margin: 60px auto;
    overflow: hidden;
}

.login h1,
.register h1 {
    text-align: center;
    color: var(--color-heading);
    font-size: 24px;
    padding: 20px 0;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}

.login form,
.register form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.login form label,
.register form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: #ffffff;
    flex-shrink: 0;
}

.login form input[type="text"],
.login form input[type="password"],
.register form input[type="text"],
.register form input[type="password"],
.register form input[type="email"] {
    width: 310px;
    max-width: calc(100% - 90px);
    height: 50px;
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
    padding: 0 15px;
    font-size: 1rem;
}

.login form input[type="submit"],
.register form input[type="submit"] {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: var(--color-primary);
    border: 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    color: #ffffff;
    transition: background-color 0.2s;
}

.login form input[type="submit"]:hover,
.register form input[type="submit"]:hover {
    background-color: var(--color-primary-dark);
}

/* "Angemeldet bleiben" (Zyklus 48): normale Checkbox-Zeile statt Icon-Kasten wie die übrigen Labels. */
.login form label.remember-me {
    width: 360px;
    max-width: calc(100% - 40px);
    height: auto;
    justify-content: flex-start;
    gap: var(--space-2);
    background-color: transparent;
    color: var(--color-text);
    font-size: 0.95rem;
    cursor: pointer;
}

.login form label.remember-me input {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Meldungen oben in den Formular-Karten (Zyklus 51, form_message.php). */
.form-message {
    margin: 20px 20px 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    line-height: 1.4;
}

.form-message-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.form-message-error {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

.login .form-error {
    margin: 0 20px;
    color: var(--color-danger);
    text-align: center;
}

.login .login-intro {
    margin: 20px 20px 0;
    text-align: center;
}

/* Eingeloggter Bereich */
body.loggedin {
    background-color: var(--color-page-bg);
}

/* Top Navigation */
.navtop {
    background-color: var(--color-nav-bg);
    width: 100%;
    border: 0;
}

.nav-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 1200px;
    max-width: 100%;
    min-height: var(--nav-height);
    margin: 0 auto;
    padding: 0 var(--space-5);
    gap: var(--space-4);
}

.nav-container h1 {
    flex: 0 0 auto;
    font-size: 24px;
    margin: 0;
    color: var(--color-nav-text-hover);
    font-weight: normal;
    white-space: nowrap;
}

/* Hauptmenü */
.menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    flex: 1;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    display: flex;
    align-items: center;
    height: var(--nav-height);
    padding: 0 var(--space-4);
    text-decoration: none;
    color: var(--color-nav-text);
    font-weight: bold;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: 0.15s ease;
}

.menu > li > a:hover,
.menu > li > a:focus,
.menu > li > a.active {
    color: var(--color-nav-text-hover);
    background-color: var(--color-nav-bg-hover);
}

.menu > li > a i {
    margin-left: 8px;
    font-size: 12px;
}

/* Konto-Menü rechts (Zyklus 49): ein Button "Name ▾" statt drei gleichrangiger Elemente. */
.account-menu {
    position: relative;
    margin-left: auto;
}

.account-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--nav-height);
    padding: 0 var(--space-4);
    background: none;
    border: 0;
    font-family: inherit;
    color: var(--color-nav-text);
    font-weight: bold;
    font-size: 0.95rem;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.15s ease;
}

.account-menu-toggle:hover,
.account-menu-toggle:focus-visible,
.account-menu-toggle.active,
.account-menu.open .account-menu-toggle {
    color: var(--color-nav-text-hover);
    background-color: var(--color-nav-bg-hover);
}

.account-menu-name {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-menu-caret {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.account-menu.open .account-menu-caret {
    transform: rotate(180deg);
}

.account-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 300;
    min-width: 210px;
    padding: var(--space-2) 0;
    background-color: var(--color-nav-bg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-modal);
}

.account-menu.open .account-menu-panel {
    display: block;
}

.account-menu-panel a,
.account-menu-panel button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: 0;
    font-family: inherit;
    color: var(--color-nav-text);
    font-weight: bold;
    font-size: 0.95rem;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.15s ease;
}

.account-menu-panel a i,
.account-menu-panel button i {
    width: 1.1em;
    text-align: center;
}

.account-menu-panel a:hover,
.account-menu-panel a:focus-visible,
.account-menu-panel a.active,
.account-menu-panel button:hover,
.account-menu-panel button:focus-visible {
    color: var(--color-nav-text-hover);
    background-color: var(--color-nav-bg-hover);
}

.logo {
    flex: 0 0 auto;
    font-size: 22px;
    margin: 0;
    color: var(--color-nav-text-hover);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    height: var(--nav-height);
}

.logo:hover,
.logo:focus {
    color: #ffffff;
}

/* Burgermenü (Mobile) -- auf Desktop unsichtbar, .nav-drawer verhält sich dort wie
   der frühere direkte .menu/.account-menu-Inhalt von .nav-container. */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-nav-text);
    font-size: 22px;
    cursor: pointer;
    padding: var(--space-2);
    flex: 0 0 auto;
}

.nav-toggle:hover,
.nav-toggle:focus {
    color: var(--color-nav-text-hover);
}

.nav-drawer {
    display: flex;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.nav-overlay {
    display: none;
}

/* Inhalt */
.content {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-6);
}

.content h2 {
    margin: 0;
    padding: var(--space-2) 0 var(--space-5);
    font-size: 1.5rem;
    color: var(--color-heading);
}

.content h3 {
    margin: 0 0 var(--space-3);
    font-size: 1.15rem;
    color: var(--color-heading);
}

.content > p,
.content > div {
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    margin: var(--space-5) 0;
    padding: var(--space-5);
    background-color: var(--color-card-bg);
}

.content > div p {
    padding: 5px;
    margin: 0 0 10px 0;
}

/* Admin-Unternavigation (Konten/Einladungen/Standard-Übungen/Muskelgruppen) */
.admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 1000px;
    max-width: 100%;
    margin: var(--space-4) auto 0;
    padding: 0 var(--space-5);
}

.admin-subnav a {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--color-heading);
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
}

.admin-subnav a:hover,
.admin-subnav a:focus {
    color: var(--color-primary);
}

.admin-subnav a.active {
    background-color: var(--color-primary);
    color: #fff;
}

/* Aktionsleiste (Buttons oberhalb von Listen) */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

/* Zeitleisten-Ansicht (workout_timeline.php, Zyklus 31) */
.timeline-month-heading {
    margin-top: var(--space-5);
}

/* Direktkind von .content -- ohne diesen Reset bekäme die ganze Monatsgruppe zusätzlich
   die generische .content > div-Kartenoptik (Schatten, Padding) obendrauf, obwohl jeder
   einzelne .timeline-entry schon seine eigene, schlankere Optik (linker Rahmen) trägt. */
.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: none;
    background: none;
    padding: 0;
    margin: 0;
}

.timeline-entry {
    border-left: 3px solid var(--color-border);
    padding-left: var(--space-4);
}

/* Datum, Titel und Status je in eigener Zeile (Zyklus 46) -- vorher brach das Badge je nach
   Titellänge mal neben, mal unter den Titel. */
.timeline-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    cursor: pointer;
    list-style: none;
}

.timeline-summary::-webkit-details-marker {
    display: none;
}

.timeline-date {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.timeline-title {
    font-weight: 600;
}

.timeline-body {
    margin: var(--space-3) 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Cardio-/Kurs-Badge im aufgeklappten Eintrag ebenfalls unter dem Namen statt daneben. */
.timeline-body .exercise-card h3 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.timeline-actions {
    margin: 0;
}

.timeline-actions .open-btn {
    gap: var(--space-2);
}

/* Zurück-Button oben auf Detailseiten (Zyklus 46, ersetzt die "← Zurück"-Links). */
.back-bar {
    margin: 0 0 var(--space-4);
}

.back-btn {
    gap: var(--space-2);
}

/* Kompaktes Aktionsmenü (z.B. Workout bearbeiten/als Vorlage speichern/löschen) --
   ein <details>-Toggle statt mehrerer gleichrangiger Buttons, damit sekundäre Aktionen
   auf schmalen Bildschirmen nicht als drei volle Zeilen den Platz unter dem Titel fressen. */
.action-menu {
    position: relative;
    display: inline-block;
    margin: var(--space-2) 0 var(--space-4);
}

.action-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: var(--color-page-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

.action-menu-toggle::-webkit-details-marker {
    display: none;
}

.action-menu-panel {
    position: absolute;
    left: 0;
    top: calc(100% + var(--space-2));
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
    min-width: 220px;
}

.action-menu-panel .open-btn,
.action-menu-panel .close-btn {
    width: 100%;
    justify-content: center;
}

/* Tabellen */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.workouts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.workouts-table th,
.workouts-table td {
    padding: var(--space-3) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* Reine Daten-/Sets-Tabellen (Erledigt/Wiederholungen/Gewicht/Aktionen, kein Namens-/
   Titel-Textfeld dabei) -- linksbündig wirkte hier unausgeglichen, weil rechts von Checkbox/
   Zahl/Buttons viel Leerraum in der Spalte blieb. Andere .workouts-table-Nutzungen (z. B.
   Konten, Katalog-Namen) behalten bewusst text-align: left für Namen/Titel-Spalten. */
.sets-table th,
.sets-table td {
    text-align: center;
}

/* Einzelne Spalte ohne Namens-/Textinhalt zentrieren (z. B. eine reine Status-/Badge-Spalte),
   ohne gleich die ganze Tabelle wie .sets-table umzustellen -- für Tabellen, die sonst
   Namens-/Titel-Spalten haben, die bewusst linksbündig bleiben sollen. Spezifität bewusst
   .workouts-table th/td (Klasse+Element) angeglichen, sonst gewinnt trotz .text-center weiterhin
   die linksbündige Grundregel. */
.workouts-table th.text-center,
.workouts-table td.text-center {
    text-align: center;
}

.workouts-table th {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.workouts-table tbody tr:hover {
    background-color: var(--color-table-row-hover);
}

.workouts-table a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.workouts-table a:hover {
    text-decoration: underline;
}

/* .open-btn/.close-btn als <a> in einer Tabellenzeile (z. B. "Übungen verwalten") --
   .workouts-table a ist spezifischer als .open-btn und würde sonst dessen weiße
   Schrift durch die Primärfarbe ersetzen, was auf dem gleichfarbigen Button-Hintergrund
   unlesbar wird. */
.workouts-table .open-btn,
.workouts-table .close-btn {
    color: #fff;
}

.workouts-table .open-btn:hover,
.workouts-table .close-btn:hover {
    text-decoration: none;
}

/* Status-Badges (Geplant / Absolviert / Erledigt) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.badge-done {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

/* Eigenschaft einer Übung ("je Seite", Zyklus 50) -- umrandet statt gefüllt, damit sie sich vom
   Status-Badge "Geplant" daneben unterscheidet. */
.badge-hint {
    background-color: transparent;
    border: 1px solid var(--color-border);
    font-weight: 500;
}

/* Übungsbeschreibung (korrekte Ausführung, Dehnübungen) */
.exercise-description {
    display: block;
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--color-text-muted);
    white-space: normal;
}

.exercise-description-details {
    margin: var(--space-2) 0 var(--space-3);
}

/* Statistik pro Katalog-Übung (catalog_exercise_detail.php) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0 var(--space-4);
}

/* Startseite (Zyklus 50): genau 8 Kacheln -- festes Raster 4 × 2 statt auto-fill (ergab 5 + 3),
   auf schmalen Bildschirmen 2 Spalten. */
.stats-grid.home-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px) {
    .stats-grid.home-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-muted);
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.stat-value {
    font-size: 1.15rem;
    font-weight: 600;
}

.stat-secondary {
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--color-text-muted);
}

.stat-link {
    font-size: 0.85rem;
    color: var(--color-primary);
    text-decoration: underline;
}

.exercise-description-details summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-primary);
}

/* Übungs-Karten (Wrapper statt Direktkind von .content, wegen Drag & Drop, Zyklus 16) --
   #exercisesList selbst bleibt unsichtbar, jede .exercise-card trägt die frühere
   .content > div-Kartenoptik einzeln. Gleiches Problem bei #cardioList/#courseList
   (Zyklus 27/30): ohne diesen Reset zeigten sie als direkte .content-Kinder eine leere
   Karten-Box (Schatten + Padding), sobald keine Cardio-/Kurs-Einträge vorhanden waren. */
#exercisesList,
#cardioList,
#courseList {
    box-shadow: none;
    background: none;
    padding: 0;
    margin: 0;
}

.exercise-card {
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    margin: var(--space-5) 0;
    padding: var(--space-5);
    background-color: var(--color-card-bg);
}

/* Icon/Name/Badge/Buttons lagen bisher als reiner Inline-Textfluss in der Überschrift --
   auf schmalen Bildschirmen konnte das dazu führen, dass z.B. "Bearbeiten" als Ganzes in
   eine neue Zeile rutschte, während "Löschen" noch in der vorherigen Platz fand, was wie
   unterschiedlich große Buttons aussah. Als echte Flex-Gruppe umbricht jetzt immer ein
   ganzes Element auf einmal, nie mitten im Button-Text. */
.exercise-card h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Kopfzeile von Übung/Cardio/Kurs (Zyklus 46): Name links, Icon-Buttons rechts als
   gemeinsamer Block -- vorher standen die Buttons in der <h3> und brachen einzeln um. */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.card-header h3 {
    margin: 0;
    min-width: 0;
}

.card-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-2);
}

/* Bearbeiten/Löschen in Set-Zeilen bleiben nebeneinander. */
.row-actions {
    white-space: nowrap;
}

/* Fußzeile mit Version (Zyklus 47) */
.site-footer {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-5) var(--space-6);
    text-align: center;
    font-size: 0.85rem;
}

.site-footer a {
    color: var(--color-text-muted);
}

/* "Was gibt es Neues" (whats_new.php, Zyklus 47) */
.release {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow-card);
}

.release h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.release-date {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.release ul {
    margin: 0;
    padding-left: var(--space-5);
}

.release li + li {
    margin-top: var(--space-2);
}

/* Abgekürzte Spaltenköpfe ("Wdh.") ohne gepunktete abbr-Unterstreichung. */
th abbr[title] {
    text-decoration: none;
}

.exercise-drag-handle {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    touch-action: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1) 0 calc(var(--space-2) * -1) calc(var(--space-2) * -1);
}

.exercise-card.dragging {
    opacity: 0.6;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Live-Workout-Tracking (workout_session.php, Zyklus 16) */
.session-date {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Live-Session mit allen Übungen auf einer Seite (Zyklus 35) -- jede Übung ist ein
   <details>, erledigte Übungen sind eingeklappt. Satz-Zeilen als Grid statt Tabelle, damit
   fünf Spalten inkl. großem Fertig-Button auch auf 360 px breiten Handys passen. */
.session-exercise-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-heading);
    min-height: 44px;
}

.session-exercise-summary::-webkit-details-marker {
    display: none;
}

.session-exercise-name {
    flex: 1 1 auto;
    min-width: 0;
}

.session-exercise-badge {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.session-exercise-chevron {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.session-exercise[open] .session-exercise-chevron {
    transform: rotate(180deg);
}

/* "Letztes Mal" (Zyklus 36): ein Satz pro Zeile, darunter der Bestwert. */
.session-history {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--space-2) 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.session-history strong {
    color: var(--color-text);
}

.session-history-set {
    padding-left: var(--space-3);
}

.session-history-best {
    margin-top: var(--space-1);
}

.set-rows {
    margin-top: var(--space-3);
}

.set-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 52px 40px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}

.set-row-head {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}

.set-number {
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 600;
}

.set-value,
.set-value-input {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.set-value {
    border: 1px solid transparent;
    background: var(--color-surface-muted);
    color: var(--color-text);
    cursor: pointer;
    padding: 0 var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.set-value-input {
    border: 2px solid var(--color-primary);
    background: var(--color-card-bg);
    color: var(--color-text);
    padding: 0 var(--space-1);
}

.set-unit {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.set-done-btn {
    width: 52px;
    height: 48px;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

.set-done-btn[aria-pressed="true"] {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--color-card-bg);
}

.set-done-btn:disabled {
    opacity: 0.7;
}

.set-row.is-done .set-value {
    background: var(--color-success-bg);
}

.set-row-menu {
    margin: 0;
}

.set-row-menu .action-menu-panel {
    left: auto;
    right: 0;
    min-width: 160px;
}

.set-rows-empty {
    color: var(--color-text-muted);
    margin: var(--space-3) 0;
}

/* Cardio- und Kurs-Karten in der Session (Zyklus 37): Werte als antippbare Kacheln, darunter
   ein breiter Fertig-Button. */
.session-exercise-name .fas {
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

.entry-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.entry-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.entry-field-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}

.entry-done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-4);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.entry-done-btn[aria-pressed="true"] {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--color-card-bg);
}

.entry-done-btn:disabled {
    opacity: 0.7;
}

.session-entry[data-done="1"] .entry-field .set-value {
    background: var(--color-success-bg);
}

/* "Training abschließen" (Zyklus 38) ganz unten in der Session. */
.session-finish-btn {
    width: 100%;
    min-height: 48px;
    gap: var(--space-2);
    font-size: 1rem;
}

/* Startbutton auf der Startseite (Zyklus 39): "Weitermachen" bzw. "Wiederholen". */
.home-start-btn {
    width: 100%;
    min-height: 52px;
    gap: var(--space-2);
    font-size: 1.05rem;
}

.home-start-hint {
    margin: var(--space-2) 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Startseite ohne offenes Workout von heute (Zyklus 44): Wiederholen, Planen und Erstellen
   untereinander, mit etwas Abstand zwischen den Blöcken. */
.home-start {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.home-start .home-start-hint,
.home-start .form-feedback {
    margin: 0;
}

.home-start .form-feedback:empty {
    display: none;
}

.home-plan {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.home-plan .form-group:last-of-type {
    margin-bottom: var(--space-3);
}

/* Icon-Buttons (Zyklus 44): Stift, Mülltonne, Plus usw. statt Text -- schmaler als die
   110 px Mindestbreite der Text-Buttons, Tippfläche bleibt mindestens 44 px. */
.save-btn.icon-btn,
.open-btn.icon-btn,
.close-btn.icon-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
}

.session-exercise-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.session-exercise-actions .open-btn {
    gap: var(--space-2);
}

/* Formulare */
.form-group {
    margin-bottom: var(--space-4);
    width: 100%;
}

/* Zusammengehöriges Wertepaar (z. B. Gewicht + Einheit, Zyklus 32) nebeneinander statt
   gestapelt -- rein optisch, jedes Feld bleibt ein eigenständiges .form-group. */
.form-row {
    display: flex;
    gap: var(--space-3);
}

.form-row .form-group {
    flex: 1;
    min-width: 0;
}

.form-group label {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-heading);
}

.form-hint {
    margin: var(--space-1) 0 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background-color: var(--color-input-bg);
}

.form-group textarea {
    min-height: 6em;
    resize: vertical;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Eigenes Vorschlags-Dropdown (Zyklus 43, autocomplete.js) statt <datalist>. Im normalen
   Seitenfluss direkt unter dem Feld -- im <dialog> würde eine schwebende Liste abgeschnitten
   oder auf dem Handy von der Tastatur verdeckt. */
.ac-list {
    list-style: none;
    margin: var(--space-1) 0 0;
    padding: var(--space-1) 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-input-bg);
    box-shadow: var(--shadow-card);
}

.ac-option {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 var(--space-3);
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--color-text);
}

.ac-option:hover,
.ac-option[aria-selected="true"] {
    background-color: var(--color-surface-muted);
}

.ac-option mark {
    background: none;
    color: inherit;
    font-weight: 700;
}

.ac-option-hint {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.checkbox-group-heading {
    flex-basis: 100%;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.checkbox-group-heading:first-child {
    margin-top: 0;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: normal;
    font-size: 0.9rem;
    color: inherit;
    margin-bottom: 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
}

/* Größere Tap-Targets für Checkboxen auf Touchscreens -- ein natives Checkbox-Icon ist mit
   ca. 13-16px auf dem Handy schwer zuverlässig zu treffen, besonders das "Erledigt"-Set-Häkchen
   beim Tracken im Fitnessstudio (häufigste Interaktion dort). */
.set-done-checkbox,
.checkbox-group input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.form-actions {
    margin-top: var(--space-4);
}

/* .save-btn/.open-btn/.close-btn liegen ständig direkt nebeneinander (Tabellenzeilen
   "Bearbeiten"/"Löschen", Aktionsleisten "... hinzufügen"/"Workout beginnen") -- gemeinsame
   Basis für Größe/Form, nur die Hintergrundfarbe unterscheidet die drei. */
.save-btn,
.open-btn,
.close-btn {
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 18px;
    min-width: 110px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.2;
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}

.save-btn,
.open-btn {
    background: var(--color-primary);
}

.save-btn:hover,
.open-btn:hover {
    background: var(--color-primary-dark);
}

.form-feedback {
    min-height: 1.2em;
    margin-top: var(--space-3);
    font-size: 0.9rem;
}

.form-feedback.success {
    color: var(--color-success);
}

.form-feedback.error {
    color: var(--color-danger);
}

/* Buttons / Modals */
dialog.modal-window {
    width: min(600px, 92vw);
    max-height: 90vh;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-modal);
}

dialog.modal-window::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-modal-header-bg);
    border-bottom: 1px solid var(--color-modal-header-border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-heading);
}

.close-btn {
    background: var(--color-danger);
}

.close-btn:hover {
    background: var(--color-danger-dark);
}

.modal-body {
    padding: var(--space-5);
    line-height: 1.6;
    overflow-y: auto;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
    :root {
        --nav-height: 56px;
    }

    .content {
        padding: var(--space-4) var(--space-4) var(--space-5);
    }

    .content > p,
    .content > div,
    .exercise-card {
        padding: var(--space-4);
        margin: var(--space-4) 0;
    }

    .admin-subnav {
        padding: 0 var(--space-4);
    }

    .content h2 {
        font-size: 1.3rem;
    }

    .nav-container {
        padding: 0 var(--space-3);
        gap: var(--space-2);
    }

    .menu > li > a,
    .account-menu-toggle {
        padding: 0 var(--space-3);
        font-size: 0.88rem;
    }

    /* z-index deutlich über .nav-overlay (150): .navtop bekommt hier durch
       position:sticky einen eigenen Stacking-Context -- .nav-drawer (z-index 200) ist ein
       Nachfahre und daher darin gefangen, nach außen zählt nur noch .navtops eigener
       z-index. War der niedriger als .nav-overlay, landete das Overlay trotz declared
       z-index:200 am Menü sichtbar darüber und schluckte Taps auf die Links (schloss nur
       das Menü, ohne zu navigieren). */
    .navtop {
        position: sticky;
        top: 0;
        z-index: 250;
    }

    .nav-container {
        justify-content: space-between;
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-drawer {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(280px, 80vw);
        background-color: var(--color-nav-bg);
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        padding: var(--space-6) 0 var(--space-4);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 200;
        overflow-y: auto;
    }

    .nav-drawer.open {
        transform: translateX(0);
    }

    .nav-drawer .menu {
        flex-direction: column;
        width: 100%;
    }

    .nav-drawer .menu > li {
        width: 100%;
    }

    .nav-drawer .menu > li > a {
        height: auto;
        padding: var(--space-3) var(--space-5);
        justify-content: flex-start;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Konto-Menü im Burgermenü: unter einer Trennlinie, Einträge direkt sichtbar (kein
       zweites Aufklappen). Der Name steht als Überschrift, nicht als Button. */
    .nav-drawer .account-menu {
        width: 100%;
        margin: var(--space-3) 0 0;
        padding-top: var(--space-3);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .nav-drawer .account-menu-toggle {
        height: auto;
        width: 100%;
        padding: var(--space-2) var(--space-5);
        background: none;
        color: var(--color-nav-text-hover);
        cursor: default;
        pointer-events: none;
    }

    .nav-drawer .account-menu-caret {
        display: none;
    }

    .nav-drawer .account-menu-name {
        max-width: none;
    }

    .nav-drawer .account-menu-panel {
        display: block;
        position: static;
        min-width: 0;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        background: none;
    }

    .nav-drawer .account-menu-panel a,
    .nav-drawer .account-menu-panel button {
        padding: var(--space-3) var(--space-5);
        font-size: 0.88rem;
    }

    .nav-overlay.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 150;
    }
}

/* Responsive: Mobile */
@media (max-width: 520px) {
    .login,
    .register {
        margin: 24px auto;
    }

    .nav-container {
        padding: var(--space-2) var(--space-3);
        min-height: 48px;
    }

    .logo {
        height: 44px;
    }

    .action-bar {
        flex-direction: column;
    }

    .action-bar .open-btn,
    .action-bar .close-btn,
    .action-bar .save-btn {
        width: 100%;
        justify-content: center;
    }

    .workouts-table {
        font-size: 0.88rem;
    }

    dialog.modal-window {
        width: 100vw;
        max-width: 100vw;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
}