:root {
    --color-primary: #2557a7;
    --color-primary-dark: #173a73;
    --color-accent: #efb443;
    --color-bg: #f4f7fb;
    --color-surface: #ffffff;
    --color-surface-soft: #eef3fb;
    --color-text: #182033;
    --color-muted: #637083;
    --color-border: #d8e0ec;
    --shadow-card: 0 18px 45px rgba(20, 37, 63, 0.12);
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: var(--font-main);
    color: var(--color-text);
    background:
        radial-gradient(circle at top left, rgba(37, 87, 167, 0.16), transparent 34rem),
        linear-gradient(135deg, #f7faff 0%, var(--color-bg) 60%, #edf3fb 100%);
}

a {
    color: inherit;
}

code {
    padding: 0.1rem 0.35rem;
    border-radius: 0.4rem;
    background: rgba(37, 87, 167, 0.08);
    color: var(--color-primary-dark);
    font-size: 0.9em;
}

.app-shell {
    width: min(1120px, calc(100% - 2rem));
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.app-header,
.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.brand-mark {
    width: 3rem;
    height: 3rem;
    display: inline-grid;
    place-items: center;
    border-radius: 1rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    font-weight: 800;
    letter-spacing: 0.03em;
    box-shadow: 0 12px 30px rgba(37, 87, 167, 0.25);
}

.brand-text {
    display: grid;
    gap: 0.1rem;
}

.brand-text small,
.app-footer {
    color: var(--color-muted);
}

.app-main {
    flex: 1;
    display: grid;
    align-items: center;
    padding: 2rem 0 3rem;
}

.hero-card {
    width: 100%;
    padding: clamp(1.35rem, 4vw, 3rem);
    border: 1px solid rgba(216, 224, 236, 0.85);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(14px);
}

.hero-card--error {
    max-width: 720px;
    margin: 0 auto;
}

.eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 1rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: rgba(239, 180, 67, 0.22);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    max-width: 760px;
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 7vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

h2 {
    margin-bottom: 0.45rem;
    font-size: 1.3rem;
}

p {
    max-width: 760px;
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.status-card,
.next-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.status-card {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
}

.status-card strong {
    color: var(--color-primary-dark);
}

.status-card span {
    color: var(--color-muted);
    font-size: 0.92rem;
}

.next-box {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--color-surface-soft);
}

.next-box p {
    margin-bottom: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    color: #ffffff;
    background: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

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

@media (max-width: 560px) {
    .app-shell {
        width: min(100% - 1rem, 1120px);
    }

    .app-header,
    .app-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-grid {
        grid-template-columns: 1fr;
    }
}

.app-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

.app-nav a {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.app-nav a:hover,
.app-nav a:focus-visible {
    color: var(--color-primary-dark);
    background: rgba(37, 87, 167, 0.08);
    outline: none;
}

.info-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 2rem;
}

.info-list > div {
    display: grid;
    grid-template-columns: minmax(12rem, 0.45fr) 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.info-list span {
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.info-list strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-primary-dark);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

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

@media (max-width: 560px) {
    .app-nav {
        width: 100%;
        justify-content: space-between;
    }

    .app-nav a {
        flex: 1;
        text-align: center;
    }

    .info-list > div,
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

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

.migration-box {
    margin-top: 1.5rem;
}

.migration-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.migration-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.badge--ok {
    color: #166534;
    background: #dcfce7;
}

.badge--warning {
    color: #92400e;
    background: #fef3c7;
}

@media (max-width: 560px) {
    .status-grid--compact {
        grid-template-columns: 1fr;
    }

    .migration-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

.flash-stack {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.flash {
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-weight: 700;
}

.flash--success {
    color: #166534;
    border-color: #bbf7d0;
    background: #dcfce7;
}

.flash--error {
    color: #991b1b;
    border-color: #fecaca;
    background: #fee2e2;
}

.flash--warning {
    color: #92400e;
    border-color: #fde68a;
    background: #fef3c7;
}

.setup-card {
    align-self: flex-start;
}

.setup-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0;
    margin: 2rem 0;
    list-style: none;
}

.setup-steps a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-muted);
    font-weight: 800;
    text-decoration: none;
}

.setup-steps span {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-surface-soft);
}

.setup-steps .is-current a {
    color: var(--color-primary-dark);
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
    box-shadow: 0 10px 26px rgba(37, 87, 167, 0.1);
}

.setup-steps .is-done a {
    color: #166534;
    background: #f0fdf4;
}

.setup-panel {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.75);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.field {
    display: grid;
    gap: 0.45rem;
}

.field--full {
    grid-column: 1 / -1;
}

.field span {
    color: var(--color-text);
    font-weight: 800;
}

.field small {
    color: var(--color-muted);
}

.field input,
.field select {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.field input:focus,
.field select:focus {
    border-color: var(--color-primary);
    outline: 3px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.color-field {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.color-field span {
    grid-column: 1 / -1;
    text-transform: capitalize;
}

.color-field input[type="color"] {
    width: 4.5rem;
    padding: 0.2rem;
}

.color-field code {
    min-width: 6.8rem;
    text-align: center;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.button,
.preview-card button {
    border: 0;
    cursor: pointer;
    color: var(--color-on-primary, #ffffff);
    background: var(--color-primary);
    font: inherit;
}

.button--muted {
    color: var(--color-primary-dark);
    background: var(--color-surface-soft);
}

.theme-preview {
    padding: 1rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.preview-card {
    display: grid;
    gap: 0.75rem;
    max-width: 24rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
}

.preview-card span {
    color: var(--color-muted);
}

.preview-card button {
    width: fit-content;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 800;
}

@media (max-width: 920px) {
    .setup-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .setup-steps,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions .button {
        width: 100%;
    }
}

.auth-card,
.dashboard-card,
.profile-card {
    align-self: flex-start;
}

.auth-form {
    max-width: 36rem;
}

.form-hint {
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.nav-form {
    display: inline-flex;
    margin: 0;
}

.nav-form button {
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: 999px;
    color: var(--color-muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
}

.nav-form button:hover,
.nav-form button:focus-visible {
    color: var(--color-primary-dark);
    background: rgba(37, 87, 167, 0.08);
    outline: none;
}

.dashboard-stats {
    margin-top: 1rem;
}

.area-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.area-card {
    display: grid;
    gap: 0.7rem;
    min-height: 13rem;
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(20, 37, 63, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.area-card:hover,
.area-card:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: 0 18px 38px rgba(20, 37, 63, 0.12);
    transform: translateY(-2px);
    outline: none;
}

.area-card strong {
    color: var(--color-primary-dark);
    font-size: 1.1rem;
}

.area-card small {
    color: var(--color-muted);
    line-height: 1.5;
}

.check-list {
    display: grid;
    gap: 0.55rem;
    padding-left: 1.2rem;
    margin: 1rem 0 0;
    color: var(--color-muted);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (max-width: 940px) {
    .area-grid,
    .profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .area-grid,
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .area-card {
        min-height: auto;
    }

    .app-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        border-radius: var(--radius-md);
    }

    .app-nav a,
    .nav-form button {
        flex: unset;
        text-align: center;
    }
}

/* Sprint 6: Admin-Benutzerverwaltung */
.app-main {
    align-items: flex-start;
}

.page-hero,
.card,
.info-grid {
    width: 100%;
}

.page-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(216, 224, 236, 0.85);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 35px rgba(20, 37, 63, 0.08);
}

.page-hero h1 {
    font-size: clamp(2rem, 5vw, 3.7rem);
}

.page-hero p {
    margin-bottom: 0;
}

.hero-actions,
.form-actions,
.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.card {
    margin-top: 1rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 35px rgba(20, 37, 63, 0.06);
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-header p,
.muted {
    margin-bottom: 0;
    color: var(--color-muted);
}

.button-primary {
    color: var(--color-on-primary, #ffffff);
    background: var(--color-primary);
}

.button-secondary,
.button-ghost {
    color: var(--color-primary-dark);
    background: var(--color-surface-soft);
}

.button-danger {
    color: #991b1b;
    background: #fee2e2;
}

.button-small {
    min-height: 2.2rem;
    margin-top: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 0.7rem;
    font-size: 0.84rem;
}

.filter-bar {
    display: grid;
    grid-template-columns: 1.4fr minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) auto;
    gap: 1rem;
    align-items: end;
}

.admin-form label,
.filter-bar label {
    display: grid;
    gap: 0.45rem;
    color: var(--color-text);
    font-weight: 800;
}

.admin-form label small,
.filter-bar label small,
.check-card small {
    color: var(--color-muted);
    font-weight: 600;
}

.admin-form input,
.admin-form select,
.filter-bar input,
.filter-bar select {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.admin-form input:focus,
.admin-form select:focus,
.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--color-primary);
    outline: 3px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.form-section {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.check-card,
.check-line {
    display: flex !important;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.check-card input,
.check-line input {
    width: auto;
    min-height: auto;
    margin-top: 0.25rem;
}

.check-card span {
    display: grid;
    gap: 0.15rem;
}

.compact-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
}

.data-table th,
.data-table td {
    padding: 0.9rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: var(--color-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.data-table td small,
.data-table td a:not(.button) {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-muted);
}

.data-table td a.button {
    color: var(--color-on-primary, #ffffff);
}

.data-table td a.button-secondary,
.data-table td a.button-ghost {
    color: var(--color-primary-dark);
}

.table-actions {
    width: 14rem;
    white-space: nowrap;
}

.table-actions form {
    display: inline-flex;
    margin: 0.35rem 0 0 0;
}

.action-note {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    color: var(--color-muted);
    background: var(--color-surface-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.badge {
    color: var(--color-primary-dark);
    background: var(--color-surface-soft);
}

.badge-success {
    color: #166534;
    background: #dcfce7;
}

.badge-warning {
    color: #92400e;
    background: #fef3c7;
}

.badge-info {
    color: #1d4ed8;
    background: #dbeafe;
}

.badge-muted {
    color: #475569;
    background: #e2e8f0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.stat-card {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.stat-card strong {
    color: var(--color-primary-dark);
    overflow-wrap: anywhere;
}

.stat-card span {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 800;
}

.notice {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.notice-warning {
    color: #92400e;
    border-color: #fde68a;
    background: #fef3c7;
}

@media (max-width: 980px) {
    .page-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .filter-bar,
    .checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .filter-bar,
    .checkbox-grid,
    .compact-checks,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .hero-actions,
    .form-actions,
    .filter-actions,
    .hero-actions .button,
    .form-actions .button,
    .filter-actions .button {
        width: 100%;
    }
}

/* Sprint 7: Turnerinnenverwaltung */
.admin-form textarea,
.filter-bar textarea {
    width: 100%;
    min-height: 8rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    resize: vertical;
}

.admin-form textarea:focus,
.filter-bar textarea:focus {
    border-color: var(--color-primary);
    outline: 3px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.filter-bar--athletes {
    grid-template-columns: 1.4fr minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) auto;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.detail-grid > div,
.link-panel {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.detail-grid span {
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 800;
}

.detail-grid strong {
    overflow-wrap: anywhere;
    color: var(--color-primary-dark);
    line-height: 1.5;
}

.detail-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-full {
    grid-column: 1 / -1;
}

.link-panels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.link-panel h3 {
    margin: 0;
    color: var(--color-primary-dark);
}

.link-panel p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

.compact-list {
    display: grid;
    gap: 0.65rem;
    padding: 0;
    margin: 0.5rem 0 0;
    list-style: none;
}

.compact-list li {
    display: grid;
    gap: 0.15rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border);
}

.compact-list li:first-child {
    padding-top: 0;
    border-top: 0;
}

.compact-list small {
    color: var(--color-muted);
}

.danger-zone {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.danger-zone form {
    margin: 0;
}

@media (max-width: 980px) {
    .filter-bar--athletes,
    .detail-grid,
    .detail-grid--wide,
    .link-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .danger-zone {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .filter-bar--athletes,
    .detail-grid,
    .detail-grid--wide,
    .link-panels {
        grid-template-columns: 1fr;
    }
}

/* Sprint 7.2: Clean-Minimal App-Navigation für Tablet und Handy */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mobile-tabbar {
    display: none;
}

@media (max-width: 1024px) {
    html {
        min-height: 100%;
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: 100%;
        background:
            radial-gradient(circle at top left, rgba(37, 87, 167, 0.13), transparent 26rem),
            linear-gradient(145deg, #f9fbff 0%, var(--color-bg) 68%, #edf3fb 100%);
    }

    .app-shell {
        width: 100%;
        min-height: 100svh;
        padding: 0 clamp(0.7rem, 2.4vw, 1.25rem);
    }

    .app-header {
        position: sticky;
        top: 0;
        z-index: 50;
        margin: 0 calc(clamp(0.7rem, 2.4vw, 1.25rem) * -1);
        padding: 0.75rem clamp(0.7rem, 2.4vw, 1.25rem);
        border-bottom: 1px solid rgba(216, 224, 236, 0.72);
        background: rgba(247, 250, 255, 0.86);
        backdrop-filter: blur(18px);
    }

    .brand-mark {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 0.9rem;
    }

    .brand-text strong {
        font-size: 0.98rem;
    }

    .brand-text small {
        max-width: 58vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.78rem;
    }

    .app-nav--desktop {
        display: none;
    }

    .app-main {
        padding-top: 1rem;
        padding-bottom: calc(5.8rem + env(safe-area-inset-bottom));
    }

    .app-footer {
        padding-bottom: calc(5.9rem + env(safe-area-inset-bottom));
        font-size: 0.82rem;
    }

    .page-hero,
    .card,
    .hero-card,
    .setup-panel {
        border-radius: 1.35rem;
        box-shadow: 0 10px 28px rgba(20, 37, 63, 0.08);
    }

    .page-hero {
        gap: 1.2rem;
        margin-bottom: 0.8rem;
        padding: 1rem;
    }

    .page-hero h1,
    .hero-card h1 {
        font-size: clamp(2rem, 7.5vw, 3.25rem);
        line-height: 0.98;
    }

    .page-hero p,
    .hero-card p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .hero-actions,
    .form-actions,
    .filter-actions {
        width: 100%;
    }

    .hero-actions .button,
    .form-actions .button,
    .filter-actions .button {
        min-height: 2.9rem;
    }

    .mobile-tabbar {
        position: fixed;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        border: 1px solid rgba(216, 224, 236, 0.78);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 -8px 30px rgba(20, 37, 63, 0.08);
        backdrop-filter: blur(22px);
    }

    .mobile-tabbar__item {
        width: 3rem;
        height: 3rem;
        display: inline-grid;
        place-items: center;
        border: 0;
        border-radius: 1rem;
        color: #8c98a8;
        background: transparent;
        cursor: pointer;
        text-decoration: none;
        transition: color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-tabbar__item:hover,
    .mobile-tabbar__item:focus-visible {
        color: var(--color-primary-dark);
        background: rgba(37, 87, 167, 0.08);
        outline: none;
        transform: translateY(-1px);
    }

    .mobile-tabbar__item.is-active {
        color: var(--color-primary);
        background: rgba(37, 87, 167, 0.11);
        box-shadow: 0 8px 18px rgba(37, 87, 167, 0.08);
    }

    .mobile-tabbar__icon {
        display: inline-grid;
        place-items: center;
        width: 1.65rem;
        height: 1.65rem;
        line-height: 1;
    }

    .mobile-tabbar__icon svg {
        width: 1.55rem;
        height: 1.55rem;
        display: block;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    .mobile-tabbar {
        left: 0;
        right: 0;
        bottom: 0;
        min-height: calc(4.6rem + env(safe-area-inset-bottom));
        padding: 0.55rem max(0.8rem, env(safe-area-inset-left)) calc(0.55rem + env(safe-area-inset-bottom)) max(0.8rem, env(safe-area-inset-right));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 1.45rem 1.45rem 0 0;
    }

    .mobile-tabbar__item {
        flex: 1 1 0;
        max-width: 4.1rem;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .app-main {
        padding-bottom: calc(4.9rem + env(safe-area-inset-bottom));
    }

    .app-footer {
        padding-bottom: calc(4.9rem + env(safe-area-inset-bottom));
    }

    .mobile-tabbar {
        left: 50%;
        bottom: calc(0.55rem + env(safe-area-inset-bottom));
        width: auto;
        max-width: calc(100vw - 2rem);
        padding: 0.45rem;
        border-radius: 999px;
        transform: translateX(-50%);
    }

    .mobile-tabbar__item {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 999px;
    }

    .page-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .page-hero h1 {
        font-size: clamp(1.8rem, 4.2vw, 2.7rem);
    }

    .hero-actions {
        width: auto;
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .card {
        padding: 1rem;
    }

    .section-header {
        flex-direction: column;
    }

    .filter-bar,
    .filter-bar--athletes {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-actions .button {
        width: 100%;
        margin-top: 0;
    }

    .admin-form input,
    .admin-form select,
    .admin-form textarea,
    .filter-bar input,
    .filter-bar select {
        font-size: 1rem;
    }
}

@media (max-width: 760px) {
    .table-wrap {
        overflow: visible;
    }

    .data-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 0.85rem;
    }

    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        padding: 0.9rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        box-shadow: 0 8px 20px rgba(20, 37, 63, 0.06);
    }

    .data-table td {
        display: grid;
        grid-template-columns: minmax(7.2rem, 0.38fr) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
        padding: 0.65rem 0;
        border-bottom: 1px solid rgba(216, 224, 236, 0.72);
    }

    .data-table td:last-child {
        border-bottom: 0;
    }

    .data-table td::before {
        content: attr(data-label);
        color: var(--color-muted);
        font-size: 0.76rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .data-table td[data-label="Name"] {
        grid-template-columns: 1fr;
        padding-top: 0;
    }

    .data-table td[data-label="Name"]::before {
        display: none;
    }

    .table-actions {
        width: 100%;
        white-space: normal;
    }

    .table-actions .button,
    .table-actions form,
    .table-actions button {
        width: 100%;
    }

    .table-actions form {
        display: flex;
    }

    .action-note {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .app-shell {
        padding-right: 0.55rem;
        padding-left: 0.55rem;
    }

    .brand-text small {
        max-width: 50vw;
    }

    .page-hero,
    .card,
    .hero-card {
        border-radius: 1.1rem;
    }

    .filter-actions {
        grid-template-columns: 1fr;
    }

    .data-table td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .mobile-tabbar__item {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* Sprint 8: Gruppenverwaltung und historisierte Mitgliedschaften */
.filter-bar--groups {
    grid-template-columns: 1.4fr minmax(10rem, 0.7fr) minmax(14rem, 0.9fr) auto;
}

.group-membership-form {
    display: grid;
    grid-template-columns: minmax(14rem, 1.2fr) minmax(10rem, 0.7fr) auto;
    gap: 1rem;
    align-items: end;
}

.group-membership-form .button {
    margin-top: 0;
    min-height: 2.9rem;
}

.data-table--compact {
    min-width: 620px;
}

@media (max-width: 980px) {
    .filter-bar--groups,
    .group-membership-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .group-membership-form .button {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .filter-bar--groups,
    .group-membership-form {
        grid-template-columns: 1fr;
    }

    .group-membership-form .button {
        width: 100%;
    }
}


/* Sprint 8.2: Überarbeitetes Benutzer-Dashboard */
.user-dashboard {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.dashboard-hero-v2,
.dashboard-panel-v2 {
    border: 1px solid rgba(216, 224, 236, 0.85);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 35px rgba(20, 37, 63, 0.07);
    backdrop-filter: blur(14px);
}

.dashboard-hero-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.38fr);
    gap: 1.25rem;
    align-items: stretch;
    padding: clamp(1.25rem, 3.6vw, 2.35rem);
}

.dashboard-hero-v2 h1 {
    max-width: none;
    margin-bottom: 0.8rem;
    font-size: clamp(2.3rem, 5.5vw, 4.6rem);
}

.dashboard-hero-v2 p {
    max-width: 64rem;
    margin-bottom: 0;
}

.dashboard-hero-v2 p strong {
    color: var(--color-primary-dark);
}

.role-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: rgba(37, 87, 167, 0.1);
    font-size: 0.82rem;
    font-weight: 900;
}

.role-chip--admin {
    color: #1d4ed8;
    background: #dbeafe;
}

.role-chip--trainer {
    color: #166534;
    background: #dcfce7;
}

.role-chip--parent {
    color: #92400e;
    background: #fef3c7;
}

.role-chip--athlete {
    color: #7c3aed;
    background: #ede9fe;
}

.role-chip--muted {
    color: #475569;
    background: #e2e8f0;
}

.dashboard-user-card {
    display: grid;
    gap: 0.85rem;
    align-content: center;
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at top right, rgba(37, 87, 167, 0.12), transparent 12rem),
        var(--color-surface);
}

.dashboard-user-card__avatar {
    width: 3.6rem;
    height: 3.6rem;
    display: inline-grid;
    place-items: center;
    border-radius: 1.25rem;
    color: var(--color-primary-dark);
    background: var(--color-surface-soft);
    font-size: 1.15rem;
    font-weight: 950;
}

.dashboard-user-card strong,
.dashboard-user-card span {
    display: block;
    overflow-wrap: anywhere;
}

.dashboard-user-card > div > span {
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.dashboard-layout-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
    gap: 1rem;
    align-items: start;
}

.dashboard-main-v2,
.dashboard-side-v2 {
    display: grid;
    gap: 1rem;
}

.dashboard-panel-v2 {
    padding: clamp(1rem, 3vw, 1.45rem);
}

.dashboard-panel-v2 h2,
.dashboard-stat-group h3 {
    margin-top: 0;
    margin-bottom: 0.35rem;
    color: var(--color-primary-dark);
}

.dashboard-panel-v2 p {
    margin-bottom: 0;
    font-size: 0.98rem;
}

.role-area-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.role-area-card,
.quick-action-card {
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.role-area-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
}

.role-area-card:hover,
.role-area-card:focus-visible,
.quick-action-card:hover,
.quick-action-card:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: 0 14px 30px rgba(20, 37, 63, 0.1);
    transform: translateY(-2px);
    outline: none;
}

.role-area-card__icon {
    width: 3rem;
    height: 3rem;
    display: inline-grid;
    place-items: center;
    border-radius: 1.1rem;
    color: #ffffff;
    background: var(--color-primary);
    font-weight: 950;
}

.role-area-card--trainer .role-area-card__icon {
    background: #15803d;
}

.role-area-card--parent .role-area-card__icon {
    background: #d97706;
}

.role-area-card--athlete .role-area-card__icon {
    background: #7c3aed;
}

.role-area-card__body {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.role-area-card strong,
.quick-action-card strong {
    color: var(--color-primary-dark);
    font-size: 1.05rem;
}

.role-area-card small,
.quick-action-card small {
    color: var(--color-muted);
    line-height: 1.45;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.quick-action-card {
    min-height: 7.5rem;
    padding: 1rem;
}

.quick-action-card--primary {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background:
        radial-gradient(circle at top right, rgba(37, 87, 167, 0.1), transparent 10rem),
        var(--color-surface);
}

.dashboard-status-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.dashboard-status-list > div {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.dashboard-status-list span {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dashboard-status-list strong {
    overflow-wrap: anywhere;
    color: var(--color-primary-dark);
}

.dashboard-stats-panel {
    margin-top: 0;
}

.dashboard-stat-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-stat-group {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.dashboard-mini-stats {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.dashboard-mini-stats > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(216, 224, 236, 0.78);
}

.dashboard-mini-stats > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.dashboard-mini-stats strong {
    color: var(--color-primary-dark);
    font-size: 1.35rem;
}

.dashboard-mini-stats span {
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 800;
    text-align: right;
}

@media (max-width: 1024px) {
    .dashboard-hero-v2,
    .dashboard-layout-v2 {
        grid-template-columns: 1fr;
    }

    .dashboard-user-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .dashboard-stat-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-hero-v2,
    .dashboard-panel-v2 {
        border-radius: 1.2rem;
    }

    .dashboard-user-card,
    .role-area-grid,
    .quick-action-grid,
    .dashboard-stat-groups {
        grid-template-columns: 1fr;
    }

    .dashboard-user-card {
        align-items: start;
    }

    .role-area-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .quick-action-card {
        min-height: auto;
    }
}

@media (max-width: 420px) {
    .role-area-card {
        grid-template-columns: 1fr;
    }

    .dashboard-user-card__avatar,
    .role-area-card__icon {
        width: 3.1rem;
        height: 3.1rem;
    }
}

/* Sprint 8.3: Admin-Dashboard Basis und Owner-Systembereich */
.admin-dashboard {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.admin-dashboard-hero,
.admin-dashboard-section {
    border: 1px solid rgba(216, 224, 236, 0.85);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 35px rgba(20, 37, 63, 0.07);
    backdrop-filter: blur(14px);
}

.admin-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.35fr);
    gap: 1.25rem;
    align-items: stretch;
    padding: clamp(1.25rem, 3.6vw, 2.35rem);
}

.admin-dashboard-hero h1 {
    max-width: none;
    margin-bottom: 0.8rem;
    font-size: clamp(2.3rem, 5.5vw, 4.6rem);
}

.admin-dashboard-hero p {
    max-width: 66rem;
    margin-bottom: 0;
}

.admin-dashboard-hero p strong {
    color: var(--color-primary-dark);
}

.admin-dashboard-status {
    display: grid;
    gap: 0.65rem;
    align-content: center;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at top right, rgba(37, 87, 167, 0.1), transparent 12rem),
        var(--color-surface);
}

.admin-dashboard-status > div {
    display: grid;
    gap: 0.2rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(216, 224, 236, 0.8);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.72);
}

.admin-dashboard-status span {
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-dashboard-status strong {
    overflow-wrap: anywhere;
    color: var(--color-primary-dark);
}

.admin-dashboard-section {
    padding: clamp(1rem, 3vw, 1.45rem);
}

.admin-dashboard-section h2 {
    margin-top: 0;
    color: var(--color-primary-dark);
}

.admin-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
    gap: 1rem;
    align-items: start;
}

.admin-dashboard-main,
.admin-dashboard-side {
    display: grid;
    gap: 1rem;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
}

.admin-stat-card {
    display: grid;
    gap: 0.25rem;
    min-height: 8rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at top right, rgba(37, 87, 167, 0.08), transparent 8rem),
        var(--color-surface);
}

.admin-stat-card strong {
    color: var(--color-primary-dark);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.admin-stat-card span {
    color: var(--color-primary-dark);
    font-weight: 900;
}

.admin-stat-card small {
    color: var(--color-muted);
    line-height: 1.35;
}

.admin-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.admin-module-card,
.admin-owner-tools a,
.admin-hint {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.admin-module-card:hover,
.admin-module-card:focus-visible,
.admin-owner-tools a:hover,
.admin-owner-tools a:focus-visible,
.admin-hint:hover,
.admin-hint:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: 0 14px 30px rgba(20, 37, 63, 0.1);
    transform: translateY(-2px);
    outline: none;
}

.admin-module-card strong,
.admin-owner-tools strong,
.admin-hint strong {
    color: var(--color-primary-dark);
}

.admin-module-card small,
.admin-owner-tools small,
.admin-hint small {
    color: var(--color-muted);
    line-height: 1.45;
}

.admin-hint-list,
.admin-owner-tools {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.admin-hint--warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.admin-hint--info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.admin-hint--success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.admin-owner-section {
    border-color: rgba(251, 191, 36, 0.5);
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 12rem),
        rgba(255, 255, 255, 0.92);
}

.admin-owner-section p {
    font-size: 0.95rem;
}

@media (max-width: 1180px) {
    .admin-stat-grid,
    .admin-module-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .admin-dashboard-hero,
    .admin-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .admin-stat-grid,
    .admin-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-dashboard-hero,
    .admin-dashboard-section {
        border-radius: 1.2rem;
    }

    .admin-stat-grid,
    .admin-module-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat-card {
        min-height: auto;
    }
}

.admin-migration-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}

.settings-code {
    max-width: 100%;
    margin: 0;
    padding: 0.7rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.settings-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Sprint 8.4: Owner-Tenant-Verwaltung */
.admin-table-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(216, 224, 236, 0.85);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 35px rgba(20, 37, 63, 0.06);
}

.form-actions--wrap {
    flex-wrap: wrap;
    align-items: center;
}

.form-actions--wrap form {
    display: inline-flex;
    margin: 0;
}

.button:disabled,
button.button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
}

.badge-soft {
    color: var(--color-primary-dark);
    background: var(--color-surface-soft);
}

@media (max-width: 700px) {
    .admin-table-card {
        border-radius: 1.2rem;
    }
}

/* Sprint 9: Eltern-Kind-Zuordnung und Turnerinnen-Logins */
.relation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

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

.checkbox-stack {
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding-top: 1.7rem;
}

.checkbox-line--compact {
    padding: 0.45rem 0.55rem;
    border-radius: 0.75rem;
}

.inline-edit-form {
    display: grid;
    gap: 0.55rem;
    min-width: 13rem;
}

.inline-edit-form select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    color: var(--color-text);
    background: var(--color-surface);
    font: inherit;
}

.data-table--relations {
    min-width: 760px;
}

.link-panel .button-small {
    margin-bottom: 0.65rem;
}

@media (max-width: 980px) {
    .relation-grid {
        grid-template-columns: 1fr;
    }

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

    .checkbox-stack {
        padding-top: 0;
    }
}

@media (max-width: 760px) {
    .inline-edit-form {
        min-width: 0;
    }

    .data-table--relations {
        min-width: 0;
    }
}

.checkbox-line {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-surface-soft);
    font-weight: 800;
}

.checkbox-line input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    accent-color: var(--color-primary);
}

.checkbox-line.checkbox-line--compact {
    padding: 0.45rem 0.55rem;
    border-radius: 0.75rem;
}

/* Sprint 10: Trainer-Zuordnung */
.checkbox-card {
    display: flex !important;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.checkbox-card input {
    width: auto;
    min-height: auto;
    margin-top: 0.25rem;
}

.checkbox-card span {
    display: grid;
    gap: 0.15rem;
}

.checkbox-card small {
    color: var(--color-muted);
    font-weight: 600;
}

.badge-primary {
    color: var(--color-on-primary, #ffffff);
    background: var(--color-primary);
}

.trainer-action-stack {
    display: grid;
    gap: 0.45rem;
    justify-items: start;
}

.trainer-action-stack form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.inline-check {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-weight: 800;
}

.inline-check input {
    width: auto;
    min-height: auto;
}

.muted-card {
    background: var(--color-surface-soft);
}

.trainer-group-grid .admin-module-card {
    min-height: 9rem;
}

@media (max-width: 760px) {
    .trainer-action-stack form {
        width: 100%;
    }

    .trainer-action-stack .button {
        flex: 1 1 auto;
    }
}

/* Sprint 11 · Trainingseinheiten */
.filter-bar--training {
    grid-template-columns: minmax(220px, 1.5fr) minmax(180px, 1fr) minmax(160px, 1fr) minmax(130px, .8fr) minmax(140px, .8fr) minmax(140px, .8fr) auto;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .filter-bar--training {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .filter-bar--training,
    .button-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .button-row .button {
        width: 100%;
    }
}

/* Sprint 12: Admin-Anwesenheit */
.field textarea,
.attendance-notes-field textarea {
    width: 100%;
    min-height: 4.8rem;
    resize: vertical;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.field textarea:focus,
.attendance-notes-field textarea:focus {
    border-color: var(--color-primary);
    outline: 3px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.attendance-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.attendance-list {
    display: grid;
    gap: 1rem;
}

.attendance-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(216, 224, 236, 0.9);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.82));
    box-shadow: 0 14px 34px rgba(20, 37, 63, 0.06);
}

.attendance-person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.attendance-person h3 {
    margin: 0;
    color: var(--color-text);
}

.attendance-person p {
    margin: 0.25rem 0 0.45rem;
    color: var(--color-muted);
    font-weight: 700;
}

.avatar-badge {
    width: 3rem;
    height: 3rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 13%, white);
    font-weight: 900;
}

.attendance-status-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.attendance-status-option {
    position: relative;
    min-height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-weight: 900;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.attendance-status-option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
}

.attendance-status-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.attendance-status-option span {
    pointer-events: none;
}

.attendance-status-option:has(input:checked) {
    color: #ffffff;
    border-color: transparent;
    background: var(--color-primary);
    box-shadow: 0 10px 24px rgba(37, 87, 167, 0.18);
}

.attendance-status-option--present:has(input:checked) {
    background: #16a34a;
}

.attendance-status-option--absent:has(input:checked) {
    background: #dc2626;
}

.attendance-status-option--excused:has(input:checked) {
    background: #d97706;
}

.attendance-status-option--open:has(input:checked) {
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 12%, white);
    border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
    box-shadow: none;
}

.attendance-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.attendance-meta-grid > div {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.72);
}

.attendance-meta-grid span {
    color: var(--color-muted);
    font-size: 0.84rem;
    font-weight: 900;
}

.attendance-meta-grid strong {
    color: var(--color-text);
}

.attendance-meta-grid small,
.attendance-note-preview {
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.attendance-note-preview {
    display: block;
    padding-top: 0.2rem;
}

.attendance-notes-field {
    margin: 0;
}

.sticky-form-actions {
    position: sticky;
    bottom: 1rem;
    z-index: 25;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-top: 1.25rem;
    padding: 0.85rem;
    border: 1px solid rgba(216, 224, 236, 0.9);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(20, 37, 63, 0.13);
    backdrop-filter: blur(14px);
}

.sticky-form-actions div {
    display: grid;
    gap: 0.15rem;
}

.sticky-form-actions strong {
    color: var(--color-text);
}

.sticky-form-actions span {
    color: var(--color-muted);
    font-weight: 800;
}

@media (max-width: 1100px) {
    .attendance-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .attendance-summary-grid,
    .attendance-status-options,
    .attendance-meta-grid {
        grid-template-columns: 1fr;
    }

    .attendance-person {
        grid-template-columns: 1fr;
    }

    .sticky-form-actions {
        bottom: 5.5rem;
        align-items: stretch;
        flex-direction: column;
    }

    .sticky-form-actions .button {
        width: 100%;
    }
}

/* Sprint 13: Elternbereich */
.dashboard-hero-v2--parent {
    border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
    background:
        radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), color-mix(in srgb, var(--color-primary) 4%, white));
}

.dashboard-user-card--parent {
    align-content: center;
}

.parent-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.parent-stat-card {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-soft);
}

.parent-stat-card strong {
    color: var(--color-primary-dark);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1;
}

.parent-stat-card span {
    color: var(--color-muted);
    font-weight: 850;
}

.parent-stat-card--highlight {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 8%, white);
}

.parent-child-grid,
.parent-training-list,
.parent-response-list {
    display: grid;
    gap: 0.9rem;
}

.parent-child-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parent-child-card,
.parent-training-card,
.parent-response-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(20, 37, 63, 0.06);
}

.parent-child-card,
.parent-training-card {
    display: grid;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.parent-child-card:hover,
.parent-training-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    box-shadow: 0 16px 36px rgba(20, 37, 63, 0.1);
}

.parent-child-card {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
}

.parent-child-card--large {
    min-height: 7rem;
}

.parent-child-card strong,
.parent-training-card strong,
.parent-response-card h3 {
    color: var(--color-text);
}

.parent-child-card small,
.parent-training-card small,
.muted-small {
    display: block;
    margin-top: 0.18rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.parent-training-card {
    grid-template-columns: 9rem 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.parent-training-date {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 8%, white);
    text-align: center;
}

.parent-training-date strong {
    font-size: 0.98rem;
}

.parent-training-body {
    display: grid;
    gap: 0.28rem;
}

.parent-training-children {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.parent-training-children span {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: var(--color-soft);
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.parent-training-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.parent-response-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.parent-response-options .attendance-status-option--coming:has(input:checked) {
    color: #ffffff;
    background: #16a34a;
    border-color: #16a34a;
}

.parent-response-options .attendance-status-option--excused:has(input:checked) {
    color: #ffffff;
    background: #d97706;
    border-color: #d97706;
}

.form-grid--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.inline-form-row,
.parent-clear-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.parent-clear-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.role-chip--success {
    color: #047857;
    background: #dcfce7;
}

.role-chip--warning {
    color: #a16207;
    background: #fef3c7;
}

.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.simple-list {
    display: grid;
    gap: 0.7rem;
}

.simple-list-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.74);
}

.simple-list-item span {
    color: var(--color-muted);
    font-size: 0.9rem;
}

@media (max-width: 980px) {
    .parent-overview-grid,
    .parent-child-grid,
    .two-column-grid {
        grid-template-columns: 1fr 1fr;
    }

    .parent-training-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .parent-training-statuses {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .parent-overview-grid,
    .parent-child-grid,
    .two-column-grid,
    .form-grid--two {
        grid-template-columns: 1fr;
    }

    .parent-training-date {
        text-align: left;
    }

    .dashboard-side-v2--parent {
        order: -1;
    }
}

/* Sprint 13.1: Eltern-Heimwegstatus */
.parent-home-permission-card {
    border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}

.parent-home-permission-form {
    display: grid;
    gap: 1rem;
}

.parent-home-permission-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
    .parent-home-permission-options {
        grid-template-columns: 1fr;
    }
}

/* Sprint 13.2: Turnerinnenbereich */
.badge-danger {
    color: #991b1b;
    background: #fee2e2;
}

.dashboard-hero-v2--athlete {
    border-color: color-mix(in srgb, #7c3aed 18%, var(--color-border));
    background:
        radial-gradient(circle at 86% 16%, color-mix(in srgb, #7c3aed 10%, transparent), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), color-mix(in srgb, #7c3aed 4%, white));
}

.dashboard-user-card--athlete .dashboard-user-card__avatar,
.athlete-group-card .avatar-badge {
    color: #5b21b6;
    background: #ede9fe;
}

.athlete-overview-grid .parent-stat-card--highlight {
    border-color: color-mix(in srgb, #7c3aed 28%, var(--color-border));
    background: color-mix(in srgb, #7c3aed 8%, white);
}

.athlete-training-list .parent-training-date {
    background: color-mix(in srgb, #7c3aed 8%, white);
}

.athlete-group-card {
    cursor: default;
}

.dashboard-layout-v2--athlete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
    gap: 1rem;
}

@media (max-width: 980px) {
    .dashboard-layout-v2--athlete {
        grid-template-columns: 1fr;
    }
}

/* Sprint 13.3: Training-Zeitlogik und Einzeltermin-Wiederholung */
.notice-info {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 8%, #ffffff);
}

.training-recurrence-preview {
    margin-top: 1rem;
}

.admin-form [hidden] {
    display: none !important;
}

/* Sprint 14: Trainingsbereich & Schnellmeldung */
.dashboard-hero-v2--trainer {
    border-color: color-mix(in srgb, #0f766e 18%, var(--color-border));
    background:
        radial-gradient(circle at 88% 14%, color-mix(in srgb, #0f766e 10%, transparent), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), color-mix(in srgb, #0f766e 4%, white));
}

.dashboard-user-card--trainer .dashboard-user-card__avatar,
.trainer-dashboard .avatar-badge {
    color: #115e59;
    background: #ccfbf1;
}

.trainer-overview-grid .parent-stat-card--highlight {
    border-color: color-mix(in srgb, #0f766e 28%, var(--color-border));
    background: color-mix(in srgb, #0f766e 8%, white);
}

.dashboard-layout-v2--trainer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
    gap: 1rem;
}

.dashboard-side-v2--trainer {
    align-self: start;
}

.quick-training-mini {
    display: grid;
    gap: 0.4rem;
    padding: 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(20, 37, 63, 0.06);
}

.quick-training-mini strong {
    color: var(--color-text);
}

.quick-training-mini small {
    color: var(--color-muted);
    font-weight: 750;
}

.filter-bar--trainer-training {
    grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) minmax(170px, 1fr) auto;
}

.trainer-training-list {
    display: grid;
    gap: 0.9rem;
}

.trainer-training-card .parent-training-date {
    background: color-mix(in srgb, #0f766e 8%, white);
}

.trainer-attendance-hero .eyebrow {
    color: #0f766e;
}

.trainer-status-options .attendance-status-option {
    min-height: 3.35rem;
}

.attendance-status-option.is-disabled {
    cursor: default;
    opacity: 0.78;
}

.attendance-status-option.is-disabled input {
    cursor: default;
}

.trainer-attendance-person-card {
    border-color: color-mix(in srgb, #0f766e 12%, var(--color-border));
}

.trainer-sticky-actions {
    bottom: 1rem;
}

.trainer-participant-card .notice {
    margin: 0;
}

@media (max-width: 980px) {
    .dashboard-layout-v2--trainer {
        grid-template-columns: 1fr;
    }

    .filter-bar--trainer-training {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .filter-bar--trainer-training {
        grid-template-columns: 1fr;
    }

    .trainer-sticky-actions {
        bottom: 5.5rem;
    }
}

/* Sprint 14.1: Desktop-Navigation, Schnellzugriff und neutrale Begriffe */
.quick-action-grid--side {
    grid-template-columns: 1fr;
}

.dashboard-panel-v2--side .quick-action-card {
    min-height: auto;
    padding: 0.85rem;
    gap: 0.35rem;
    overflow: hidden;
}

.dashboard-panel-v2--side .quick-action-card strong,
.dashboard-panel-v2--side .quick-action-card small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-panel-v2--side .quick-action-card strong {
    font-size: 0.98rem;
}

.dashboard-panel-v2--side .quick-action-card small {
    font-size: 0.78rem;
    line-height: 1.35;
}

@media (min-width: 981px) {
    .dashboard-side-v2--trainer .dashboard-panel-v2--side {
        padding: 1rem;
    }
}

/* Sprint 14.2: kompakte mobile Schnellmeldung */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.trainer-attendance-hero--quick {
    padding: 1.45rem;
}

.trainer-attendance-hero--quick h1 {
    margin-bottom: 0.35rem;
}

.trainer-attendance-card--quick {
    padding: 1rem;
}

.trainer-attendance-section-header--quick {
    margin-bottom: 0.75rem;
}

.quick-attendance-list {
    display: grid;
    gap: 0.55rem;
}

.quick-attendance-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, #0f766e 13%, var(--color-border));
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86));
    box-shadow: 0 8px 20px rgba(20, 37, 63, 0.045);
}

.quick-attendance-child {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.quick-attendance-child strong {
    min-width: 8.5rem;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.quick-attendance-actions {
    display: inline-grid;
    grid-template-columns: repeat(2, 3.15rem);
    gap: 0.4rem;
    align-items: center;
}

.quick-attendance-button {
    position: relative;
    width: 3.15rem;
    height: 3.15rem;
    display: inline-grid;
    place-items: center;
    border: 2px solid var(--color-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-muted);
    font-size: 1.65rem;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.quick-attendance-button:hover {
    transform: translateY(-1px);
}

.quick-attendance-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.quick-attendance-button span[aria-hidden="true"] {
    pointer-events: none;
    transform: translateY(-1px);
}

.quick-attendance-button--present {
    border-color: color-mix(in srgb, #16a34a 36%, var(--color-border));
    color: #15803d;
    background: color-mix(in srgb, #16a34a 7%, white);
}

.quick-attendance-button--absent {
    border-color: color-mix(in srgb, #dc2626 34%, var(--color-border));
    color: #dc2626;
    background: color-mix(in srgb, #dc2626 6%, white);
}

.quick-attendance-button--present:has(input:checked) {
    border-color: transparent;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.22);
}

.quick-attendance-button--absent:has(input:checked) {
    border-color: transparent;
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.2);
}

.quick-attendance-button.is-disabled {
    cursor: default;
    opacity: 0.64;
}

.quick-attendance-button.is-disabled input {
    cursor: default;
}

.quick-sticky-actions {
    margin-top: 0.8rem;
}

@media (max-width: 760px) {
    .trainer-attendance-hero--quick {
        padding: 1rem;
    }

    .trainer-attendance-hero--quick .hero-actions {
        display: none;
    }

    .trainer-attendance-card--quick {
        padding: 0.75rem;
    }

    .trainer-attendance-section-header--quick {
        display: none;
    }

    .quick-attendance-list {
        gap: 0.45rem;
    }

    .quick-attendance-row {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0.5rem 0.55rem;
        border-radius: 1rem;
    }

    .quick-attendance-child {
        display: grid;
        gap: 0.25rem;
    }

    .quick-attendance-child strong {
        min-width: 0;
        font-size: 0.98rem;
    }

    .quick-attendance-child .badge {
        width: fit-content;
        font-size: 0.74rem;
        padding: 0.22rem 0.5rem;
    }

    .quick-attendance-actions {
        grid-template-columns: repeat(2, 2.85rem);
        gap: 0.32rem;
    }

    .quick-attendance-button {
        width: 2.85rem;
        height: 2.85rem;
        font-size: 1.5rem;
    }

    .quick-sticky-actions {
        bottom: 5.5rem;
    }
}

/* Sprint 14.3 – Trainingsfreigabe, Avatare und Vereinsschlüssel */
.trainer-avatar-stack {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    vertical-align: middle;
}

.trainer-avatar {
    --trainer-avatar-color: var(--color-primary);
    display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--trainer-avatar-color) 16%, white);
    border: 1px solid color-mix(in srgb, var(--trainer-avatar-color) 35%, white);
    color: var(--trainer-avatar-color);
    font-weight: 900;
    font-size: .8rem;
    letter-spacing: .04em;
    flex: 0 0 auto;
}

.trainer-avatar--small {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .68rem;
}

.trainer-avatar-panel {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.trainer-commitment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1rem 0;
}

.parent-training-card.training-pending,
.parent-training-card.training-cancelled {
    opacity: .72;
    filter: grayscale(.12);
}

.parent-training-card.training-cancelled {
    border-color: color-mix(in srgb, #b91c1c 28%, var(--border-color));
}

.parent-training-card.training-pending {
    border-color: color-mix(in srgb, #64748b 24%, var(--border-color));
}

.dashboard-user-card__avatar[style*="--trainer-avatar-color"] {
    background: color-mix(in srgb, var(--trainer-avatar-color) 18%, white);
    color: var(--trainer-avatar-color);
}

/* Sprint 14.4 – Selbstständige Rückmeldung für Turnende */
.section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-title-row h2 {
    margin: 0;
}

.stacked-form {
    display: grid;
    gap: 1rem;
}

@media (max-width: 640px) {
    .section-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Sprint 14.5 – Schnellmeldebuttons in Eltern- und Turnenden-Übersichten */
.quick-response-training-card {
    display: grid;
    gap: 0.85rem;
}

.parent-training-card__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.quick-response-list {
    display: grid;
    gap: 0.55rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
}

.quick-response-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.6rem;
    align-items: center;
}

.quick-response-name {
    font-weight: 750;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-response-current {
    color: var(--color-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.quick-response-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.quick-response-buttons--single {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
}

.quick-response-button {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.quick-response-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.quick-response-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.quick-response-button--open.is-active {
    background: color-mix(in srgb, var(--color-muted) 12%, transparent);
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-muted) 35%, transparent);
}

.quick-response-button--coming {
    color: #166534;
    border-color: color-mix(in srgb, #166534 35%, transparent);
}

.quick-response-button--coming.is-active {
    background: #166534;
    border-color: #166534;
    color: #fff;
}

.quick-response-button--excused {
    color: #991b1b;
    border-color: color-mix(in srgb, #991b1b 35%, transparent);
}

.quick-response-button--excused.is-active {
    background: #991b1b;
    border-color: #991b1b;
    color: #fff;
}

@media (max-width: 760px) {
    .parent-training-card__link {
        grid-template-columns: 1fr;
    }

    .quick-response-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .quick-response-current {
        display: none;
    }

    .quick-response-buttons {
        justify-content: flex-start;
    }
}

/* Sprint 14.5 Fix – Trainingskarten nach Schnellmeldebuttons wieder sauber einspaltig */
.parent-training-card.quick-response-training-card {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.quick-response-training-card .parent-training-card__link {
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
}

.quick-response-training-card .parent-training-body,
.quick-response-training-card .parent-training-statuses {
    min-width: 0;
}

.quick-response-training-card .parent-training-statuses {
    align-content: center;
}

@media (max-width: 980px) {
    .quick-response-training-card .parent-training-card__link {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .quick-response-training-card .parent-training-statuses {
        justify-content: flex-start;
    }
}

/* Sprint 14.6 – Vereinsbranding und Admin-Cockpit */
.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    background: #ffffff;
    padding: 0.18rem;
}

.admin-branding-panel {
    margin-bottom: 1.2rem;
}

.admin-branding-overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.admin-branding-logo,
.branding-preview-logo {
    width: 6rem;
    height: 6rem;
    display: inline-grid;
    place-items: center;
    border-radius: 1.5rem;
    border: 1px solid var(--color-border);
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(20, 37, 63, 0.08);
    color: var(--color-primary);
    font-weight: 900;
}

.admin-branding-logo img,
.branding-preview-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.45rem;
}

.admin-branding-colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.admin-branding-colors span {
    position: relative;
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem 0.8rem 0.8rem 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.admin-branding-colors span::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--swatch-color);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.admin-branding-colors small,
.branding-preview-card small {
    color: var(--color-muted);
}

.branding-preview-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.branding-preview-card code {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    word-break: break-all;
}

.branding-color-grid {
    align-items: end;
}

.color-field input[type="color"] {
    width: 100%;
    min-height: 3rem;
    padding: 0.25rem;
}

.checkbox-line {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--color-muted);
    font-weight: 700;
}

@media (max-width: 760px) {
    .admin-branding-overview,
    .branding-preview-card {
        grid-template-columns: 1fr;
    }

    .admin-branding-colors {
        grid-template-columns: 1fr;
    }
}

/* Sprint 14.8 – Light-/Darkmode-Schalter */
.theme-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.theme-choice-button {
    display: grid;
    gap: 0.25rem;
    justify-items: start;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.theme-choice-button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.theme-choice-button.is-active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.theme-choice-icon {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-surface-soft);
    color: var(--color-primary);
    font-size: 1.2rem;
}

.theme-preference-status {
    margin-top: 0.85rem;
}

[data-theme="dark"] body {
    background: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] .app-nav,
[data-theme="dark"] .mobile-tabbar,
[data-theme="dark"] .card,
[data-theme="dark"] .setup-panel,
[data-theme="dark"] .dashboard-panel-v2,
[data-theme="dark"] .admin-dashboard-section,
[data-theme="dark"] .parent-training-card,
[data-theme="dark"] .parent-child-card,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .hero-card,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .dashboard-hero-v2,
[data-theme="dark"] .admin-dashboard-hero {
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: color-mix(in srgb, var(--color-surface) 82%, #000000);
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

@media (max-width: 640px) {
    .theme-choice-grid {
        grid-template-columns: 1fr;
    }
}

/* Sprint 14.9 – kompakte Rollen-Navigation mit geplanten Modulen */
.app-nav--grouped {
    gap: 0.25rem;
    overflow: visible;
}

.nav-main-link,
.nav-group__trigger,
.nav-group__item--inline,
.app-nav--grouped > a,
.app-nav--grouped .nav-form button {
    white-space: nowrap;
}

.nav-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-group__trigger {
    border: 0;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: default;
}

.nav-group__trigger::after {
    content: "⌄";
    margin-left: 0.35rem;
    font-size: 0.75em;
}

.nav-group:hover .nav-group__trigger,
.nav-group:focus-within .nav-group__trigger,
.nav-group__trigger:focus-visible {
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    outline: none;
}

.nav-group__menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 40;
    display: grid;
    min-width: 15rem;
    gap: 0.25rem;
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.25rem);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-group__menu--right {
    left: auto;
    right: 0;
}

.nav-group:hover .nav-group__menu,
.nav-group:focus-within .nav-group__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.app-nav .nav-group__menu a,
.nav-group__item {
    display: grid;
    gap: 0.1rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: 0.9rem;
    font-weight: 800;
}

.app-nav .nav-group__menu a:hover,
.app-nav .nav-group__menu a:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.nav-group__item small {
    display: block;
    color: var(--color-muted);
    font-size: 0.73rem;
    font-weight: 800;
}

.nav-group__item.is-disabled {
    color: color-mix(in srgb, var(--color-muted) 75%, transparent);
    background: color-mix(in srgb, var(--color-muted) 6%, transparent);
    cursor: not-allowed;
}

.nav-group__item--inline {
    align-self: center;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    font-size: 0.92rem;
}

.mobile-tabbar__item.is-disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

@media (max-width: 1120px) {
    .app-nav--desktop {
        display: none;
    }
}

/* Sprint 15.2 – Gruppeneinladungen für Veranstaltungen */
.event-groups-form {
    display: grid;
    gap: 1rem;
}

.event-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.event-group-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.event-group-card.is-selected {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    box-shadow: 0 14px 32px rgba(20, 37, 63, 0.09);
}

.event-group-card.is-muted {
    opacity: 0.72;
}

.event-group-card__head {
    display: flex !important;
    align-items: flex-start;
    gap: 0.75rem;
}

.event-group-card__head input {
    width: auto;
    min-height: auto;
    margin-top: 0.28rem;
}

.event-group-card__head span {
    display: grid;
    gap: 0.15rem;
}

.event-group-card__text {
    margin: 0;
}

@media (max-width: 820px) {
    .event-group-grid {
        grid-template-columns: 1fr;
    }
}

/* Sprint 19 – professionelle Tenant-Startseite */
.tenant-home { display: grid; gap: 1.5rem; }
.tenant-home__hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .7fr); gap: 1.5rem; align-items: stretch; }
.tenant-home__copy, .tenant-home__access { border: 1px solid var(--color-border); border-radius: calc(var(--radius-lg) + .25rem); background: var(--color-surface); box-shadow: var(--shadow-card); }
.tenant-home__copy { padding: clamp(1.5rem, 4vw, 3.5rem); background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface) 58%); }
.tenant-home__copy h1 { max-width: 13ch; margin: .35rem 0 1rem; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: .98; letter-spacing: -.055em; }
.tenant-home__lead { max-width: 62ch; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.65; color: var(--color-muted); }
.tenant-home__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 2rem; }
.tenant-home__features article { display: grid; gap: .35rem; padding: 1rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 86%, var(--color-primary)); border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border)); }
.tenant-home__features span, .tenant-home__roles p { color: var(--color-muted); line-height: 1.5; }
.tenant-home__access { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.35rem, 3vw, 2.2rem); }
.tenant-home__access h2 { margin: .25rem 0 .45rem; font-size: 1.65rem; }
.tenant-home__login { margin-top: 1rem; }
.tenant-home__remember { margin: .1rem 0 .15rem; }
.tenant-home__remember span { display: grid; gap: .12rem; }
.tenant-home__remember small { color: var(--color-muted); font-weight: 400; line-height: 1.35; }
.button-block { width: 100%; justify-content: center; }
.tenant-home__register { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: .92rem; }
.tenant-home__roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tenant-home__roles article { position: relative; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.tenant-home__roles article > span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-weight: 800; font-size: .8rem; }
.tenant-home__roles h3 { margin: .8rem 0 .35rem; }

/* Sprint 19 – kompakter Fortschrittsbereich */
.progress-admin-page { font-size: .88rem; }
.progress-admin-page .page-hero h1 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
.progress-admin-page h2 { font-size: 1.15rem; }
.progress-admin-page h3 { font-size: 1rem; }
.progress-admin-page .card { padding: .9rem; }
.progress-admin-page .field span, .progress-admin-page input, .progress-admin-page select, .progress-admin-page textarea, .progress-admin-page .button { font-size: .86rem; }
.progress-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.progress-stat-grid .stat-card { padding: .75rem .9rem; }
.progress-stat-grid .stat-card strong { font-size: 1.55rem; }
.progress-toolbar-card { margin-bottom: .8rem; }
.progress-filter-bar { grid-template-columns: 1.35fr repeat(4, minmax(7.5rem, .75fr)) auto; gap: .55rem; }
.progress-accordion-stack, .skill-category-accordions { display: grid; gap: .7rem; }
.compact-accordion { padding: 0 !important; overflow: hidden; }
.compact-accordion > summary, .skill-category-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: .85rem 1rem; }
.compact-accordion > summary::-webkit-details-marker, .skill-category-accordion > summary::-webkit-details-marker { display: none; }
.compact-accordion > summary span:first-child, .skill-category-accordion > summary span:first-child { display: grid; gap: .15rem; }
.compact-accordion > summary small, .skill-category-accordion > summary small { color: var(--color-muted); font-weight: 400; }
.compact-accordion[open] > summary, .skill-category-accordion[open] > summary { border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.compact-accordion__content { padding: .9rem; }
.form-stack--compact { gap: .65rem; }
.category-compact-list { display: grid; gap: .45rem; }
.category-compact-row { display: flex; justify-content: space-between; gap: .8rem; align-items: center; padding: .65rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.category-compact-row > div:first-child { min-width: 0; }
.category-compact-row small { display: block; margin-top: .2rem; color: var(--color-muted); }
.progress-catalog-card { padding: .9rem !important; }
.skill-category-accordion { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.skill-category-accordion > summary > span:last-child { color: var(--color-primary); font-size: .78rem; font-weight: 700; }
.data-table--compact th, .data-table--compact td { padding: .52rem .58rem; font-size: .82rem; }
.data-table--compact small { font-size: .74rem; line-height: 1.35; }

/* Sprint 19 – Registrierung und Turnendenimport */
.public-auth-shell { display: grid; grid-template-columns: minmax(0, .8fr) minmax(22rem, 1fr); gap: 1.25rem; align-items: start; }
.public-auth-intro { padding: clamp(1.25rem, 3vw, 2.5rem); }
.public-steps { display: grid; gap: .75rem; padding: 0; margin: 1.5rem 0 0; list-style: none; counter-reset: step; }
.public-steps li { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: start; }
.public-steps li::before { counter-increment: step; content: counter(step); grid-row: 1 / 3; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--color-primary); color: white; font-weight: 800; }
.public-steps span { color: var(--color-muted); }
.honeypot-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.registration-request-list { display: grid; gap: .75rem; }
.registration-request-card { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.registration-request-card__main small { display: block; color: var(--color-muted); }
.registration-request-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.registration-approval-form { display: grid; gap: .55rem; min-width: min(32rem, 100%); }
.registration-link-intro { display: grid; gap: .1rem; text-align: left; }
.registration-link-intro small { color: var(--color-muted); }
.registration-child-links { display: grid; gap: .55rem; }
.registration-child-link-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .5rem; align-items: end; }
.registration-link-field { margin: 0; }
.registration-link-field select { width: 100%; }
.registration-link-summary { display: grid; gap: .15rem; padding: .65rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-soft); text-align: left; }
.registration-link-summary span { font-weight: 700; }
.registration-link-summary small { color: var(--color-muted); }
.registration-reject-form { display: flex; gap: .35rem; }
.registration-reject-form input { min-width: 15rem; }
.athlete-import-layout { margin-bottom: 1rem; }
.import-column-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.import-column-list code { padding: .35rem .55rem; border-radius: .45rem; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.import-stat-grid { margin: 1rem 0; }

@media (max-width: 980px) {
    .tenant-home__hero, .public-auth-shell { grid-template-columns: 1fr; }
    .tenant-home__access { order: -1; }
    .tenant-home__copy { padding: 1.25rem; }
    .tenant-home__features { margin-top: 1.25rem; }
    .tenant-home__features, .tenant-home__roles { grid-template-columns: 1fr; }
    .progress-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .progress-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .progress-filter-bar { grid-template-columns: 1fr; }
    .category-compact-row, .registration-request-card { align-items: stretch; flex-direction: column; }
    .registration-child-link-row { grid-template-columns: 1fr; }
    .tenant-home__copy h1 { font-size: 2.35rem; }
}

/* Sprachwahl */
.tenant-home__language {
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
    margin-bottom: .75rem;
}

.language-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    min-height: 2.15rem;
    padding: .35rem .65rem;
    border: 1px solid var(--color-border, rgba(100, 116, 139, .3));
    border-radius: 999px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #172033);
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
}

.language-choice:hover,
.language-choice:focus-visible,
.language-choice.is-active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    color: var(--color-primary);
}

/* Group-specific progress scope and athlete progress summary */
.group-progress-summary,
.group-progress-toolbar {
    margin-bottom: .85rem;
}

.group-progress-categories {
    display: grid;
    gap: .75rem;
    margin-bottom: 5rem;
}

.progress-category-picker {
    padding: 0 !important;
    overflow: hidden;
}

.progress-category-picker > summary,
.progress-assessment-category > summary,
.progress-history-category > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    cursor: pointer;
    list-style: none;
}

.progress-category-picker > summary::-webkit-details-marker,
.progress-assessment-category > summary::-webkit-details-marker,
.progress-history-category > summary::-webkit-details-marker {
    display: none;
}

.progress-category-picker > summary span:first-child,
.progress-assessment-category > summary span:first-child {
    display: grid;
    gap: .15rem;
}

.progress-category-picker__content,
.progress-assessment-category__content {
    border-top: 1px solid var(--color-border);
    padding: .9rem 1rem 1rem;
}

.skill-selection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .75rem;
}

.skill-selection-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-width: 0;
    padding: .7rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface-soft, var(--color-surface));
    cursor: pointer;
}

.skill-selection-item:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.skill-selection-item input {
    margin-top: .2rem;
    flex: 0 0 auto;
}

.skill-selection-item__body {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.skill-selection-item__body small {
    color: var(--color-text-muted);
    line-height: 1.35;
}

.sticky-save-bar {
    position: sticky;
    bottom: .75rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 52rem;
    margin: 0 auto;
    padding: .75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .14);
    backdrop-filter: blur(12px);
}

.athlete-progress-cell {
    min-width: 13rem;
}

.athlete-progress {
    display: grid;
    gap: .3rem;
    min-width: 11rem;
}

.athlete-progress__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .65rem;
}

.athlete-progress__meta strong {
    font-size: 1rem;
}

.athlete-progress__meta span,
.athlete-progress small {
    color: var(--color-text-muted);
    font-size: .76rem;
}

.athlete-progress__track {
    height: .68rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.athlete-progress__track > span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: hsl(var(--progress-hue, 0) 72% 44%);
    transition: width .2s ease;
}

.athlete-progress--hero {
    max-width: 30rem;
    margin-top: .65rem;
}

.athlete-progress--hero .athlete-progress__track {
    height: .9rem;
}

.progress-assessment-list {
    display: grid;
    gap: .75rem;
}

.progress-assessment-category {
    padding: 0 !important;
    overflow: hidden;
}

.progress-skill-card {
    padding: .85rem !important;
}

.historical-progress-section {
    margin-top: 1rem;
}

.progress-history-list {
    display: grid;
    gap: .55rem;
}

.progress-history-category {
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    overflow: hidden;
}

.progress-history-category__content {
    display: grid;
    gap: .45rem;
    padding: .65rem .8rem .8rem;
    border-top: 1px solid var(--color-border);
}

.progress-history-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .65rem;
    border-radius: .6rem;
    background: var(--color-surface-soft, var(--color-surface));
}

.progress-history-item > div:first-child {
    display: grid;
    gap: .15rem;
}

@media (max-width: 800px) {
    .skill-selection-grid {
        grid-template-columns: 1fr;
    }

    .sticky-save-bar,
    .progress-history-item {
        align-items: stretch;
        flex-direction: column;
    }

    .athlete-progress-cell {
        min-width: 0;
    }
}

/* Fortschrittsübersicht auf der Detailseite einer turnenden Person */
.athlete-detail-progress-card {
    display: grid;
    gap: 1rem;
}

.athlete-detail-progress-overall {
    display: grid;
    grid-template-columns: minmax(10rem, .42fr) minmax(16rem, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.athlete-detail-progress-overall > div:first-child {
    display: grid;
    gap: .2rem;
}

.athlete-detail-progress-overall > div:first-child > strong {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1;
}

.athlete-detail-progress-overall > div:first-child > small {
    color: var(--color-text-muted);
}

.athlete-progress--detail-overall .athlete-progress__track {
    height: 1rem;
}

.athlete-progress-basis-note {
    display: grid;
    gap: .45rem;
    padding: .85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: .85rem;
    background: var(--color-surface-soft, var(--color-surface));
}

.athlete-progress-basis-note p {
    margin: 0;
    color: var(--color-text-muted);
}

.athlete-category-progress-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.athlete-category-progress {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: .9rem;
    background: var(--color-surface);
}

.athlete-category-progress > summary {
    display: grid;
    grid-template-columns: minmax(8rem, .7fr) minmax(12rem, 1.3fr);
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    cursor: pointer;
    list-style: none;
}

.athlete-category-progress > summary::-webkit-details-marker {
    display: none;
}

.athlete-category-progress[open] > summary {
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.athlete-category-progress__heading {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.athlete-category-progress__heading strong {
    font-size: .98rem;
}

.athlete-category-progress__heading small,
.athlete-level-progress-item small {
    color: var(--color-text-muted);
}

.athlete-progress--category,
.athlete-progress--level {
    min-width: 0;
}

.athlete-progress--category .athlete-progress__track,
.athlete-progress--level .athlete-progress__track {
    height: .55rem;
}

.athlete-level-progress-list {
    display: grid;
    gap: .5rem;
    padding: .75rem;
}

.athlete-level-progress-item {
    display: grid;
    grid-template-columns: minmax(9rem, .75fr) minmax(12rem, 1.25fr);
    align-items: center;
    gap: .8rem;
    padding: .7rem;
    border: 1px solid var(--color-border);
    border-radius: .7rem;
    background: var(--color-surface-soft, var(--color-surface));
}

.athlete-level-progress-item > div:first-child {
    display: grid;
    gap: .15rem;
}

.athlete-detail-progress-actions {
    justify-content: flex-end;
}

.empty-state--compact {
    min-height: 0;
    padding: 1rem;
}

@media (max-width: 900px) {
    .athlete-category-progress-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .athlete-detail-progress-overall,
    .athlete-category-progress > summary,
    .athlete-level-progress-item {
        grid-template-columns: 1fr;
    }

    .athlete-category-progress > summary {
        gap: .65rem;
    }
}

/* Hotfix 19.3.4 – Navigation links auf Desktop/Tablet quer; mobil und Tablet hochkant unten */
.app-header-logout {
    display: none;
    margin: 0 0 0 auto;
}

.app-header-logout__button {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: 0 8px 22px rgba(20, 37, 63, 0.09);
    cursor: pointer;
}

.app-header-logout__button:hover,
.app-header-logout__button:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    outline: none;
}

.app-header-logout__button svg {
    width: 1.35rem;
    height: 1.35rem;
}

@media (min-width: 1025px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
    body {
        padding-right: 0;
        padding-left: clamp(8.3rem, 12vw, 12.75rem);
    }

    .app-nav--desktop.app-nav--grouped {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        z-index: 120;
        display: flex !important;
        width: clamp(7.6rem, 10.5vw, 10.9rem);
        max-height: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.28rem;
        overflow-x: visible;
        overflow-y: auto;
        padding: 1rem 0.55rem;
        border-width: 0 1px 0 0;
        border-radius: 0 1.35rem 1.35rem 0;
        background: color-mix(in srgb, var(--color-surface) 95%, transparent);
        box-shadow: 14px 0 40px rgba(20, 37, 63, 0.13);
        backdrop-filter: blur(22px);
        transform: none;
        scrollbar-width: thin;
    }

    .app-nav--grouped > a,
    .app-nav--grouped .nav-group,
    .app-nav--grouped .nav-form,
    .app-nav--grouped .nav-form button {
        width: 100%;
    }

    .app-nav--grouped > a,
    .app-nav--grouped .nav-group__trigger,
    .app-nav--grouped .nav-form button {
        min-height: 2.55rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0.58rem 0.68rem;
        border-radius: 0.9rem;
        text-align: left;
        white-space: normal;
        font-size: clamp(0.76rem, 1vw, 0.9rem);
        line-height: 1.15;
    }

    .app-nav--grouped .nav-form {
        margin: 0;
    }

    .app-nav--grouped .nav-form button {
        border: 0;
        color: var(--color-muted);
        background: transparent;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }

    .app-nav--grouped .nav-form button:hover,
    .app-nav--grouped .nav-form button:focus-visible {
        color: var(--color-primary-dark);
        background: color-mix(in srgb, var(--color-primary) 10%, transparent);
        outline: none;
    }

    .app-nav--grouped .nav-group {
        display: flex;
    }

    .app-nav--grouped .nav-group__trigger {
        width: 100%;
        justify-content: space-between;
        cursor: pointer;
    }

    .app-nav--grouped .nav-group__trigger::after {
        content: "›";
        margin-left: 0.45rem;
        font-size: 1rem;
    }

    .app-nav--grouped .nav-group__menu,
    .app-nav--grouped .nav-group__menu--right {
        top: 0;
        right: auto;
        left: calc(100% + 0.6rem);
        max-height: min(70dvh, 36rem);
        overflow-y: auto;
        transform: translateX(-0.3rem);
    }

    .app-nav--grouped .nav-group:hover .nav-group__menu,
    .app-nav--grouped .nav-group:focus-within .nav-group__menu,
    .app-nav--grouped .nav-group.is-open .nav-group__menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .app-nav--grouped .nav-group.is-open .nav-group__trigger {
        color: var(--color-primary-dark);
        background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    }

    .mobile-tabbar,
    .app-header-logout {
        display: none !important;
    }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
    body {
        padding-left: 7.9rem;
    }

    .app-nav--desktop.app-nav--grouped {
        width: 7.35rem;
        padding: 0.75rem 0.42rem;
    }

    .app-nav--grouped > a,
    .app-nav--grouped .nav-group__trigger,
    .app-nav--grouped .nav-form button {
        min-height: 2.45rem;
        padding: 0.5rem 0.55rem;
        font-size: 0.76rem;
    }
}

@media (max-width: 760px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
    body {
        padding-right: 0;
        padding-left: 0;
    }

    .app-nav--desktop {
        display: none !important;
    }

    .app-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .app-header-logout {
        display: block;
        margin-left: auto;
    }

    .mobile-tabbar {
        position: fixed;
        right: auto !important;
        bottom: calc(0.62rem + env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        z-index: 120;
        display: flex !important;
        width: max-content !important;
        max-width: calc(100vw - 1rem);
        min-height: 0 !important;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.22rem;
        overflow-x: auto;
        padding: 0.42rem !important;
        border: 1px solid rgba(216, 224, 236, 0.82) !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--color-surface) 94%, transparent);
        box-shadow: 0 14px 40px rgba(20, 37, 63, 0.18);
        backdrop-filter: blur(22px);
        transform: translateX(-50%) !important;
        scrollbar-width: none;
    }

    .mobile-tabbar::-webkit-scrollbar {
        display: none;
    }

    .mobile-tabbar__item {
        flex: 0 0 auto !important;
        width: 2.75rem !important;
        max-width: none !important;
        height: 2.75rem !important;
        border-radius: 999px !important;
    }

    .app-main {
        padding-bottom: calc(5.2rem + env(safe-area-inset-bottom));
    }

    .app-footer {
        padding-bottom: calc(5.3rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 380px) {
    .mobile-tabbar {
        gap: 0.12rem;
        padding: 0.34rem !important;
    }

    .mobile-tabbar__item {
        width: 2.45rem !important;
        height: 2.45rem !important;
    }

    .mobile-tabbar__icon svg {
        width: 1.35rem;
        height: 1.35rem;
    }
}

@media (min-width: 1025px) and (hover: none) and (pointer: coarse),
       (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .app-nav--grouped .nav-group:hover .nav-group__menu,
    .app-nav--grouped .nav-group:focus-within .nav-group__menu {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-0.3rem);
    }

    .app-nav--grouped .nav-group.is-open .nav-group__menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
}

/* Hotfix 19.3.4 – direkte Trainer-Zu-/Absage in der Trainingsliste */
.trainer-training-card--quick-commitment {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.trainer-training-card__link {
    min-width: 0;
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
}

.trainer-training-card__commitment {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.9rem;
    border-left: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-soft) 72%, transparent);
}

.trainer-training-card__commitment form {
    margin: 0;
}

.trainer-commitment-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    cursor: pointer;
    transition: transform 150ms ease, color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.trainer-commitment-icon:hover,
.trainer-commitment-icon:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.trainer-commitment-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.trainer-commitment-icon--confirm {
    color: #166534;
    border-color: color-mix(in srgb, #166534 38%, var(--color-border));
}

.trainer-commitment-icon--confirm:hover,
.trainer-commitment-icon--confirm:focus-visible,
.trainer-commitment-icon--confirm.is-active {
    color: #ffffff;
    border-color: #166534;
    background: #166534;
}

.trainer-commitment-icon--decline {
    color: #991b1b;
    border-color: color-mix(in srgb, #991b1b 38%, var(--color-border));
}

.trainer-commitment-icon--decline:hover,
.trainer-commitment-icon--decline:focus-visible,
.trainer-commitment-icon--decline.is-active {
    color: #ffffff;
    border-color: #991b1b;
    background: #991b1b;
}

@media (max-width: 980px) {
    .trainer-training-card--quick-commitment {
        grid-template-columns: 1fr;
    }

    .trainer-training-card__link {
        grid-template-columns: 1fr;
    }

    .trainer-training-card__commitment {
        height: auto;
        justify-content: flex-end;
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }
}



/* Hotfix 19.3.5 – dauerhaft sichtbare Navigation auf PC und Tablet quer */
@media (min-width: 1025px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
    body {
        padding-left: clamp(15.4rem, 19vw, 18.4rem);
    }

    .app-nav--desktop.app-nav--grouped {
        width: clamp(14.7rem, 18vw, 17.7rem);
        gap: 0.18rem;
        padding: 0.9rem 0.65rem 1.25rem;
    }

    .app-nav--grouped .nav-group {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.05rem;
        margin-top: 0.22rem;
    }

    .app-nav--grouped .nav-group__trigger {
        min-height: auto;
        padding: 0.62rem 0.72rem 0.36rem;
        color: var(--color-muted);
        background: transparent;
        cursor: default;
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .app-nav--grouped .nav-group__trigger:hover,
    .app-nav--grouped .nav-group__trigger:focus,
    .app-nav--grouped .nav-group__trigger:focus-visible,
    .app-nav--grouped .nav-group.is-open .nav-group__trigger {
        color: var(--color-muted);
        background: transparent;
        outline: none;
    }

    .app-nav--grouped .nav-group__trigger::after {
        display: none;
        content: none;
    }

    .app-nav--grouped .nav-group__menu,
    .app-nav--grouped .nav-group__menu--right,
    .app-nav--grouped .nav-group:hover .nav-group__menu,
    .app-nav--grouped .nav-group:focus-within .nav-group__menu,
    .app-nav--grouped .nav-group.is-open .nav-group__menu {
        position: static;
        inset: auto;
        z-index: auto;
        display: grid;
        width: 100%;
        min-width: 0;
        max-height: none;
        gap: 0.08rem;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .app-nav .nav-group__menu a,
    .nav-group__item {
        min-height: 2.18rem;
        display: flex;
        align-items: center;
        padding: 0.47rem 0.72rem 0.47rem 1rem;
        border-radius: 0.76rem;
        font-size: clamp(0.76rem, 0.86vw, 0.86rem);
        font-weight: 750;
        line-height: 1.2;
        white-space: normal;
    }

    .app-nav--grouped > a,
    .app-nav--grouped .nav-form button {
        min-height: 2.35rem;
        padding: 0.52rem 0.72rem;
        font-size: clamp(0.78rem, 0.9vw, 0.9rem);
    }

    .mobile-tabbar,
    .app-header-logout {
        display: none !important;
    }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
    body {
        padding-left: 13.65rem;
    }

    .app-nav--desktop.app-nav--grouped {
        width: 13rem;
        padding: 0.7rem 0.5rem 1rem;
    }

    .app-nav .nav-group__menu a,
    .nav-group__item {
        min-height: 2rem;
        padding: 0.4rem 0.58rem 0.4rem 0.84rem;
        font-size: 0.73rem;
    }

    .app-nav--grouped > a,
    .app-nav--grouped .nav-form button {
        min-height: 2.15rem;
        padding: 0.45rem 0.58rem;
        font-size: 0.75rem;
    }

    .app-nav--grouped .nav-group__trigger {
        padding: 0.52rem 0.58rem 0.28rem;
        font-size: 0.66rem;
    }
}


/* Hotfix 19.3.6 – sichere Inhaltsbreite, klare Navigationstypografie */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.app-shell {
    width: 95%;
    max-width: 95%;
    min-width: 0;
    margin-right: auto;
    margin-left: auto;
}

.app-main,
.app-main > *,
.page-hero,
.card,
.hero-card,
.info-grid,
.user-dashboard,
.dashboard-grid-v2,
.two-column-grid,
.detail-grid,
.form-grid,
.filter-bar,
.filter-form,
.table-wrap,
.admin-table-card {
    min-width: 0;
    max-width: 100%;
}

.app-main {
    width: 100%;
    overflow-x: clip;
}

.app-main > * {
    width: 100%;
}

.table-wrap,
.admin-table-card {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

img,
video,
canvas,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

pre,
code,
.breakable,
.muted,
.notice,
.card,
.page-hero {
    overflow-wrap: anywhere;
}

@media (min-width: 1025px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
    .app-nav--grouped > a,
    .app-nav--grouped .nav-group__trigger,
    .app-nav--grouped .nav-form button {
        font-weight: 800;
    }

    .app-nav--grouped .nav-group__menu a,
    .app-nav--grouped .nav-group__item {
        font-weight: 400 !important;
    }
}

/* Hotfix 19.3.7 – appweite Toast-Meldungen ohne Sprung zum Seitenanfang. */
.toast-region {
    position: fixed;
    top: clamp(4.75rem, 7vh, 6.5rem);
    right: max(1rem, 2.5vw);
    z-index: 3000;
    display: grid;
    gap: 0.65rem;
    width: min(27rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    background: var(--color-surface);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.2);
    color: var(--color-text);
    pointer-events: auto;
    animation: toast-enter 180ms ease-out both;
}

.toast.is-leaving {
    animation: toast-leave 180ms ease-in both;
}

.toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.toast__message {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.toast__close {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    border: 0;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.72);
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
}

.toast__close:hover,
.toast__close:focus-visible {
    background: rgba(255, 255, 255, 0.95);
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.toast--success {
    border-color: #86efac;
    background: #dcfce7;
    color: #14532d;
}

.toast--success .toast__icon {
    background: #16a34a;
    color: #fff;
}

.toast--success .toast__icon::before {
    content: "✓";
}

.toast--info {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1e3a8a;
}

.toast--info .toast__icon {
    background: #2563eb;
    color: #fff;
}

.toast--info .toast__icon::before {
    content: "i";
}

.toast--warning {
    border-color: #fcd34d;
    background: #fef3c7;
    color: #78350f;
}

.toast--warning .toast__icon {
    background: #d97706;
    color: #fff;
}

.toast--warning .toast__icon::before {
    content: "!";
}

.toast--error {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #7f1d1d;
}

.toast--error .toast__icon {
    background: #dc2626;
    color: #fff;
}

.toast--error .toast__icon::before {
    content: "×";
}

[data-async-toast].is-submitting button[type="submit"] {
    opacity: 0.65;
    cursor: progress;
}

[data-commitment-group] [aria-pressed="true"] {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

[data-commitment-value="declined"] [aria-pressed="true"] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translate3d(0, -0.6rem, 0) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes toast-leave {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -0.45rem, 0) scale(0.98);
    }
}

@media (max-width: 1024px) {
    .toast-region {
        top: 5rem;
        right: 50%;
        transform: translateX(50%);
        width: min(28rem, calc(100vw - 1.25rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast.is-leaving {
        animation: none;
    }
}

/* Hotfix 19.3.8 – rollenabhängige Navigation und kompakte App-Typografie. */
.role-area-card.is-current-role {
    border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Inhalte auf allen Geräten kompakter und übersichtlicher darstellen. */
.app-main {
    font-size: 0.875rem;
    line-height: 1.45;
}

.app-main h1 {
    max-width: none;
    margin-bottom: 0.7rem;
    font-size: clamp(1.5rem, 2.3vw, 2.05rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
}

.app-main h2 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.08rem, 1.45vw, 1.28rem) !important;
    line-height: 1.22;
}

.app-main h3 {
    font-size: clamp(0.94rem, 1.15vw, 1.08rem) !important;
    line-height: 1.25;
}

.app-main h4,
.app-main h5,
.app-main h6 {
    font-size: 0.9rem !important;
    line-height: 1.3;
}

.app-main p,
.app-main li,
.app-main dd,
.app-main dt,
.app-main label,
.app-main small,
.app-main .muted,
.app-main .help-text,
.app-main .form-help,
.app-main .empty-state,
.app-main .notice {
    font-size: 0.84rem !important;
    line-height: 1.45;
}

.app-main table,
.app-main th,
.app-main td {
    font-size: 0.79rem !important;
    line-height: 1.35;
}

.app-main input,
.app-main select,
.app-main textarea,
.app-main button,
.app-main .button {
    font-size: 0.82rem !important;
}

.app-main .badge,
.app-main .eyebrow,
.app-main .chip,
.app-main .status-pill {
    font-size: 0.7rem !important;
}

.app-main .dashboard-stat-card strong,
.app-main .dashboard-mini-stats strong,
.app-main .admin-dashboard-status strong,
.app-main .stat-card strong {
    font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
}

@media (max-width: 760px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
    .app-main {
        font-size: 0.84rem;
    }

    .app-main h1 {
        font-size: clamp(1.28rem, 6vw, 1.62rem) !important;
    }

    .app-main h2 {
        font-size: 1.04rem !important;
    }

    .app-main h3 {
        font-size: 0.92rem !important;
    }

    .app-main p,
    .app-main li,
    .app-main dd,
    .app-main dt,
    .app-main label,
    .app-main small,
    .app-main .muted,
    .app-main .help-text,
    .app-main .form-help,
    .app-main .empty-state,
    .app-main .notice {
        font-size: 0.8rem !important;
    }

    .app-main table,
    .app-main th,
    .app-main td,
    .app-main input,
    .app-main select,
    .app-main textarea,
    .app-main button,
    .app-main .button {
        font-size: 0.77rem !important;
    }
}

/* Hotfix 19.3.9 – kompakter Verwaltungsbereich und installierbare Turnen-App. */
.role-area-card--admin {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.7rem;
}

.role-area-card--admin .role-area-card__icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.72rem;
    font-size: 0.68rem;
}

.app-main .role-area-card--admin .badge {
    padding: 0.15rem 0.38rem;
    font-size: 0.56rem !important;
    line-height: 1.15;
}

.app-main .role-area-card--admin strong {
    font-size: 0.76rem !important;
    line-height: 1.2;
}

.app-main .role-area-card--admin small {
    font-size: 0.66rem !important;
    line-height: 1.3;
}

.pwa-install-card,
.pwa-profile-card {
    display: none;
}

.pwa-install-card.is-available {
    grid-template-columns: 2.65rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.pwa-profile-card.is-available {
    display: grid;
    gap: 0.8rem;
}

.pwa-install-card__icon,
.pwa-profile-card__icon {
    display: block;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
}

.pwa-install-card__icon {
    width: 2.65rem;
    height: 2.65rem;
}

.pwa-profile-card__icon {
    width: 3.15rem;
    height: 3.15rem;
}

.pwa-install-card__content {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.pwa-install-card__content strong {
    font-size: 0.78rem;
}

.pwa-install-card__content small {
    color: var(--color-muted);
    font-size: 0.69rem !important;
    line-height: 1.3;
}

.pwa-install-button {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
}

.pwa-install-button[hidden] {
    display: none !important;
}

.pwa-install-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pwa-profile-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pwa-profile-card__header h2 {
    margin: 0.1rem 0 0;
}

.pwa-install-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(4px);
}

.pwa-install-dialog {
    width: min(25rem, 100%);
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.34);
}

.pwa-install-dialog__header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.pwa-install-dialog__header img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    border-radius: 0.75rem;
    background: #fff;
}

.pwa-install-dialog h2 {
    margin: 0;
    font-size: 1rem !important;
}

.pwa-install-dialog p {
    margin: 0.85rem 0;
    font-size: 0.82rem !important;
    line-height: 1.5;
}

.pwa-install-dialog__steps {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    font-weight: 700;
}

.pwa-install-dialog__actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1100px), (pointer: coarse) {
    .pwa-install-card.is-available {
        display: grid;
    }
}

@media (display-mode: standalone) {
    .pwa-install-card,
    .pwa-profile-card {
        display: none !important;
    }
}

/* Hotfix 19.3.10 – Admin-Dashboard deutlich kompakter. */
.admin-dashboard {
    gap: 0.6rem;
}

.admin-dashboard-hero {
    grid-template-columns: minmax(18rem, 0.72fr) minmax(32rem, 1.28fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.72rem 0.9rem;
    border-radius: 1rem;
}

.admin-dashboard-hero > div:first-child {
    align-self: center;
    min-width: 0;
}

.app-main .admin-dashboard-hero .eyebrow {
    display: inline-flex;
    margin-bottom: 0.24rem;
    padding: 0.14rem 0.38rem;
    font-size: 0.54rem !important;
    line-height: 1.15;
}

.app-main .admin-dashboard-hero h1 {
    margin: 0 0 0.16rem;
    font-size: 1.2rem !important;
    line-height: 1.12;
}

.app-main .admin-dashboard-hero p {
    margin: 0;
    font-size: 0.67rem !important;
    line-height: 1.3;
}

.admin-dashboard-status {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    align-content: stretch;
    padding: 0.38rem;
    border-radius: 0.8rem;
}

.admin-dashboard-status > div {
    align-content: center;
    min-width: 0;
    min-height: 3.25rem;
    gap: 0.08rem;
    padding: 0.38rem 0.46rem;
    border-radius: 0.65rem;
}

.app-main .admin-dashboard-status span {
    font-size: 0.52rem !important;
    line-height: 1.1;
    letter-spacing: 0.045em;
}

.app-main .admin-dashboard .admin-dashboard-status strong {
    font-size: 0.78rem !important;
    line-height: 1.12;
}

.admin-dashboard-section {
    padding: 0.72rem 0.9rem;
    border-radius: 1rem;
}

.admin-branding-panel {
    display: grid;
    grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0;
}

.admin-branding-panel .section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    margin: 0;
}

.app-main .admin-branding-panel h2 {
    margin: 0 0 0.08rem;
    font-size: 0.9rem !important;
    line-height: 1.15;
}

.app-main .admin-branding-panel .section-header p {
    font-size: 0.64rem !important;
    line-height: 1.25;
}

.app-main .admin-branding-panel .button {
    min-height: auto;
    padding: 0.38rem 0.58rem;
    font-size: 0.64rem !important;
    white-space: nowrap;
}

.admin-branding-overview {
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: 0.55rem;
}

.admin-branding-logo {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.8rem;
    box-shadow: 0 5px 14px rgba(20, 37, 63, 0.07);
}

.admin-branding-logo img {
    padding: 0.22rem;
}

.admin-branding-colors {
    gap: 0.38rem;
}

.admin-branding-colors span {
    min-width: 0;
    gap: 0.02rem;
    padding: 0.38rem 0.42rem 0.38rem 1.55rem;
    border-radius: 0.65rem;
}

.admin-branding-colors span::before {
    left: 0.48rem;
    width: 0.72rem;
    height: 0.72rem;
}

.app-main .admin-branding-colors strong {
    font-size: 0.64rem !important;
    line-height: 1.15;
}

.app-main .admin-branding-colors small {
    font-size: 0.54rem !important;
    line-height: 1.15;
}

@media (min-width: 1025px) and (max-width: 1319px) {
    .admin-dashboard-hero {
        grid-template-columns: minmax(15rem, 0.8fr) minmax(22rem, 1.2fr);
    }

    .admin-dashboard-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-status > div {
        min-height: 2.75rem;
    }

    .admin-branding-panel {
        grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr);
    }
}

@media (max-width: 1024px) {
    .admin-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-status > div {
        min-height: 2.7rem;
    }

    .admin-branding-panel {
        grid-template-columns: 1fr;
    }

    .admin-branding-panel .section-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 560px) {
    .admin-dashboard-hero,
    .admin-dashboard-section {
        padding: 0.62rem 0.68rem;
        border-radius: 0.85rem;
    }

    .admin-dashboard-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-branding-panel .section-header {
        grid-template-columns: 1fr;
    }

    .admin-branding-panel .button {
        width: 100%;
    }

    .admin-branding-overview {
        grid-template-columns: 2.55rem minmax(0, 1fr);
    }

    .admin-branding-logo {
        width: 2.55rem;
        height: 2.55rem;
    }

    .admin-branding-colors {
        grid-template-columns: 1fr;
    }
}

/* Sprint 19.3.11: compact progress assessment and trainer-parent conflict read-only mode */
.progress-readonly-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .75rem;
    padding: .75rem .9rem;
    border-color: color-mix(in srgb, var(--color-warning, #d99b24) 48%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning, #d99b24) 9%, var(--color-surface));
}

.progress-readonly-notice__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-warning, #d99b24) 18%, transparent);
    font-size: .95rem;
}

.progress-readonly-notice h2 {
    margin: 0 0 .2rem;
    font-size: .9rem;
}

.progress-readonly-notice p {
    margin: 0;
    font-size: .76rem;
    line-height: 1.45;
}

.progress-assessment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
    padding: .55rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface);
}

.progress-assessment-toolbar > div:first-child {
    display: grid;
    gap: .05rem;
}

.progress-assessment-toolbar strong {
    font-size: .78rem;
}

.progress-assessment-toolbar span {
    color: var(--color-text-muted);
    font-size: .68rem;
}

.progress-assessment-category > summary {
    min-height: 4.2rem;
    padding: .65rem .8rem;
}

.progress-category-summary__title {
    display: grid;
    gap: .15rem;
    min-width: 10rem;
}

.progress-category-summary__title strong {
    font-size: .88rem;
}

.progress-category-summary__title small {
    color: var(--color-text-muted);
    font-size: .68rem;
}

.progress-category-summary__progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: min(24rem, 48%);
}

.athlete-progress--category-summary {
    flex: 1 1 auto;
    min-width: 8rem;
}

.athlete-progress--category-summary .athlete-progress__meta strong,
.athlete-progress--level-summary .athlete-progress__meta strong {
    font-size: .76rem;
}

.athlete-progress--category-summary .athlete-progress__track,
.athlete-progress--level-summary .athlete-progress__track {
    height: .5rem;
}

.progress-category-summary__chevron,
.progress-skill-editor__chevron {
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
    opacity: .65;
}

.progress-assessment-category[open] .progress-category-summary__chevron,
.progress-skill-editor[open] .progress-skill-editor__chevron {
    transform: rotate(225deg);
}

.progress-category-description {
    margin: 0 0 .65rem;
    font-size: .72rem;
}

.progress-level-stack {
    display: grid;
    gap: .75rem;
}

.progress-level-section {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface-soft, var(--color-surface));
}

.progress-level-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 84%, var(--color-primary) 4%);
}

.progress-level-header h3 {
    margin: 0;
    font-size: .78rem;
}

.progress-level-header small {
    display: block;
    margin-top: .08rem;
    color: var(--color-text-muted);
    font-size: .64rem;
}

.athlete-progress--level-summary {
    width: min(15rem, 42%);
    min-width: 7rem;
}

.progress-skill-grid {
    display: grid;
    gap: 1px;
    background: var(--color-border);
}

.progress-skill-editor {
    min-width: 0;
    background: var(--color-surface);
}

.progress-skill-editor > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 3.15rem;
    padding: .52rem .68rem;
    cursor: pointer;
    list-style: none;
}

.progress-skill-editor > summary::-webkit-details-marker {
    display: none;
}

.progress-skill-editor[open] > summary {
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.progress-skill-editor__heading {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.progress-skill-editor__heading strong {
    font-size: .76rem;
}

.progress-skill-editor__heading small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: .64rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.progress-skill-editor__status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    flex: 0 0 auto;
}

.progress-skill-editor__content {
    padding: .62rem .68rem .72rem;
    border-top: 1px solid var(--color-border);
}

.progress-skill-form__fields {
    display: grid;
    grid-template-columns: minmax(9rem, .8fr) minmax(7rem, .55fr) minmax(14rem, 1.65fr) auto;
    align-items: end;
    gap: .55rem;
}

.progress-skill-form .field {
    gap: .18rem;
}

.progress-skill-form .field > span {
    font-size: .64rem;
}

.progress-skill-form select,
.progress-skill-form input,
.progress-skill-form textarea {
    min-height: 2.15rem;
    padding: .4rem .5rem;
    font-size: .72rem;
}

.progress-skill-form textarea {
    min-height: 2.15rem;
    max-height: 5rem;
    resize: vertical;
}

.progress-skill-save {
    min-height: 2.15rem;
    white-space: nowrap;
}

.progress-skill-readonly {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    font-size: .72rem;
}

.progress-skill-readonly p,
.progress-skill-readonly small {
    margin: 0;
}

@media (max-width: 980px) {
    .progress-category-summary__progress {
        width: min(18rem, 50%);
    }

    .progress-skill-form__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .progress-skill-note-field {
        grid-column: 1 / -1;
    }

    .progress-skill-save {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .progress-assessment-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .progress-assessment-category > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .progress-category-summary__progress {
        width: 100%;
    }

    .progress-level-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .athlete-progress--level-summary {
        width: 100%;
    }

    .progress-skill-editor > summary {
        align-items: flex-start;
    }

    .progress-skill-editor__heading small {
        -webkit-line-clamp: 2;
    }

    .progress-skill-editor__status {
        flex-wrap: wrap;
    }

    .progress-skill-form__fields {
        grid-template-columns: 1fr;
    }

    .progress-skill-note-field {
        grid-column: auto;
    }
}

/* Sprint 19.3.12: kompakte Fortschrittsbewertung, Stufen-Akkordeons und Mehrfachbearbeitung */
.progress-level-section {
    padding: 0;
    overflow: hidden;
}

.progress-level-section > summary.progress-level-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
    gap: .85rem;
    align-items: center;
    padding: .72rem .85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.progress-level-section > summary::-webkit-details-marker {
    display: none;
}

.progress-level-section[open] > summary.progress-level-header {
    border-bottom: 1px solid var(--border-color, #dbe3ee);
    background: color-mix(in srgb, var(--surface-muted, #f4f7fb) 65%, transparent);
}

.progress-level-summary-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1rem;
    gap: .55rem;
    align-items: center;
}

.progress-level-summary__chevron {
    width: .65rem;
    height: .65rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .16s ease;
    opacity: .58;
}

.progress-level-section[open] .progress-level-summary__chevron {
    transform: rotate(225deg);
}

.progress-level-section__content {
    padding: .7rem;
}

.progress-selection-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 .55rem;
}

.progress-bulk-editor[hidden] {
    display: none !important;
}

.progress-bulk-editor {
    position: sticky;
    top: .55rem;
    z-index: 18;
    margin-bottom: .8rem;
    padding: .8rem;
    border: 2px solid color-mix(in srgb, var(--primary-color, #4a0a40) 60%, #ffffff);
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .16);
}

.progress-bulk-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.progress-bulk-editor__header p,
.progress-bulk-editor__header strong {
    margin: 0;
}

.progress-bulk-editor__grid {
    display: grid;
    grid-template-columns: minmax(18rem, 1.2fr) minmax(15rem, 1fr) minmax(17rem, 1.2fr) auto;
    gap: .7rem;
    align-items: end;
}

.progress-status-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.progress-status-fieldset legend {
    margin-bottom: .35rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.progress-status-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
}

.progress-status-option {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .12rem;
    min-width: 0;
    padding: .4rem .28rem;
    border: 1px solid var(--border-color, #dbe3ee);
    border-radius: .65rem;
    background: var(--surface-color, #ffffff);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}

.progress-status-option:hover {
    transform: translateY(-1px);
}

.progress-status-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.progress-status-option > span {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    background: #eef2f7;
    color: #64748b;
}

.progress-status-option small {
    max-width: 100%;
    overflow: hidden;
    font-size: .63rem;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-status-option--learning > span {
    background: #dbeafe;
    color: #2563eb;
}

.progress-status-option--almost > span {
    background: #fef3c7;
    color: #d97706;
}

.progress-status-option--achieved > span {
    background: #dcfce7;
    color: #15803d;
}

.progress-status-option:has(input:checked) {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 8%, var(--surface-color, #ffffff));
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent);
}

.progress-status-option--not_started:has(input:checked) { color: #64748b; }
.progress-status-option--learning:has(input:checked) { color: #2563eb; }
.progress-status-option--almost:has(input:checked) { color: #d97706; }
.progress-status-option--achieved:has(input:checked) { color: #15803d; }

.progress-range-field {
    min-width: 0;
}

.progress-range-field > span {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-weight: 700;
}

.progress-range-field input[type="range"] {
    width: 100%;
    height: 1.15rem;
    margin: .25rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: hsl(var(--score-hue, 0) 72% 42%);
    cursor: pointer;
}

.progress-range-field input[type="range"]::-webkit-slider-runnable-track {
    height: .48rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #16a34a 100%);
}

.progress-range-field input[type="range"]::-webkit-slider-thumb {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: -.34rem;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: hsl(var(--score-hue, 0) 72% 42%);
    box-shadow: 0 1px 5px rgba(15, 23, 42, .3);
    -webkit-appearance: none;
}

.progress-range-field input[type="range"]::-moz-range-track {
    height: .48rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #16a34a 100%);
}

.progress-range-field input[type="range"]::-moz-range-thumb {
    width: 1.15rem;
    height: 1.15rem;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: hsl(var(--score-hue, 0) 72% 42%);
    box-shadow: 0 1px 5px rgba(15, 23, 42, .3);
}

.progress-bulk-note textarea {
    width: 100%;
    min-height: 3rem;
    margin-top: .3rem;
}

.progress-bulk-note textarea:disabled {
    opacity: .5;
}

.progress-bulk-save {
    white-space: nowrap;
}

.progress-skill-editor > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
    width: 100%;
}

.progress-skill-editor__heading {
    justify-self: stretch;
    text-align: left;
}

.progress-skill-select {
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    margin-right: .15rem;
    cursor: pointer;
}

.progress-skill-select input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.progress-skill-select span {
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid #94a3b8;
    border-radius: .3rem;
    background: #ffffff;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.progress-skill-select input:checked + span {
    border-color: var(--primary-color, #4a0a40);
    background: var(--primary-color, #4a0a40);
    box-shadow: inset 0 0 0 3px #ffffff;
}

.progress-skill-form__fields {
    grid-template-columns: minmax(18rem, 1.15fr) minmax(14rem, 1fr) minmax(16rem, 1.25fr) auto;
    align-items: end;
}

@media (max-width: 1180px) {
    .progress-bulk-editor__grid,
    .progress-skill-form__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .progress-bulk-save,
    .progress-skill-save {
        justify-self: end;
    }
}

@media (max-width: 760px) {
    .progress-level-section > summary.progress-level-header {
        grid-template-columns: minmax(0, 1fr);
        gap: .45rem;
    }

    .progress-level-summary-side {
        grid-template-columns: minmax(0, 1fr) 1rem;
    }

    .progress-bulk-editor {
        position: relative;
        top: auto;
    }

    .progress-bulk-editor__grid,
    .progress-skill-form__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .progress-status-option small {
        font-size: .58rem;
    }

    .progress-bulk-save,
    .progress-skill-save {
        width: 100%;
        justify-self: stretch;
    }

    .progress-skill-editor > summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .progress-skill-editor__status {
        grid-column: 2;
    }
}

/* Sprint 19.4 – rollenabhängige Aufgaben- und Navigationszähler */
.nav-task-badge {
    display: inline-flex;
    min-width: 1.3rem;
    height: 1.3rem;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 0.34rem;
    border: 2px solid color-mix(in srgb, var(--color-surface) 88%, transparent);
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 2px 6px rgba(90, 20, 16, 0.25);
    flex: 0 0 auto;
}

.nav-task-badge.is-empty {
    display: none !important;
}

.app-nav a,
.app-nav .nav-group__trigger {
    gap: 0.45rem;
}

.nav-main-link--tasks {
    border: 1px solid transparent;
    background: transparent;
}

.nav-main-link--tasks.is-active,
.nav-main-link--tasks[aria-current="page"] {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
}

.mobile-tabbar__item {
    position: relative;
}

.mobile-tabbar__item .nav-task-badge {
    position: absolute;
    top: 0.08rem;
    right: 0.08rem;
    min-width: 1.12rem;
    height: 1.12rem;
    margin: 0;
    padding: 0 0.25rem;
    border-width: 2px;
    font-size: 0.58rem;
    pointer-events: none;
}

.task-page {
    display: grid;
    gap: 0.8rem;
}

.task-page__header {
    align-items: flex-start;
}

.task-page__header h1 {
    margin-bottom: 0.2rem;
}

.task-page__header p {
    max-width: 58rem;
    margin: 0;
}

.task-summary {
    display: inline-flex;
    width: fit-content;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.72rem 0.9rem;
}

.task-summary strong {
    color: var(--color-primary);
    font-size: 1.45rem;
    line-height: 1;
}

.task-summary span {
    color: var(--color-muted);
    font-weight: 700;
}

.task-groups {
    display: grid;
    gap: 0.75rem;
}

.task-group {
    padding: 0;
    overflow: hidden;
}

.task-group__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.task-group__header h2 {
    margin: 0 0 0.12rem;
    font-size: 1rem;
}

.task-group__header p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.task-group__count {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 900;
}

.task-list {
    display: grid;
}

.task-item {
    display: grid;
    grid-template-columns: 0.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
}

.task-item:last-child {
    border-bottom: 0;
}

.task-item__marker {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--color-primary);
}

.task-item--important .task-item__marker {
    background: #d97706;
}

.task-item--urgent .task-item__marker {
    background: #d92d20;
    box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.12);
}

.task-item__content {
    min-width: 0;
}

.task-item__content h3 {
    margin: 0 0 0.1rem;
    font-size: 0.88rem;
}

.task-item__content p {
    margin: 0;
    font-size: 0.78rem;
}

.task-item__content small {
    display: block;
    margin-top: 0.18rem;
    color: var(--color-muted);
    font-size: 0.7rem;
}

.task-empty {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
}

.task-empty__icon {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, #198754 12%, var(--color-surface));
    color: #198754;
    font-size: 1.35rem;
    font-weight: 900;
}

.task-empty h2,
.task-empty p {
    margin: 0;
}

.task-empty h2 {
    font-size: 1rem;
}

.task-empty p {
    color: var(--color-muted);
    font-size: 0.8rem;
}

@media (max-width: 760px) {
    .task-page__header {
        grid-template-columns: 1fr;
    }

    .task-item {
        grid-template-columns: 0.55rem minmax(0, 1fr);
        gap: 0.58rem;
        padding: 0.68rem 0.72rem;
    }

    .task-item .button {
        grid-column: 2;
        width: fit-content;
    }

    .task-group__header {
        padding: 0.68rem 0.72rem;
    }
}

/* Hotfix 19.4.2 – mobile Dashboard-Schnellzugriff und zweistufige Icon-Navigation. */
.app-header-actions,
.mobile-subnav {
    display: none;
}

.app-header-dashboard {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: 0 8px 22px rgba(20, 37, 63, 0.09);
    text-decoration: none;
}

.app-header-dashboard:hover,
.app-header-dashboard:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    outline: none;
}

.app-header-dashboard svg {
    width: 1.35rem;
    height: 1.35rem;
}

@media (max-width: 760px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
    .app-header-actions {
        display: flex;
        align-items: center;
        gap: 0.42rem;
        margin-left: auto;
    }

    .app-header-actions .app-header-logout {
        display: block;
        margin: 0;
    }

    .brand-text small {
        max-width: min(42vw, 15rem);
    }

    .mobile-tabbar__group-trigger {
        position: relative;
        margin: 0;
        padding: 0;
        font: inherit;
    }

    .mobile-tabbar__group-trigger.is-open {
        color: var(--color-primary);
        background: color-mix(in srgb, var(--color-primary) 14%, transparent);
        box-shadow: 0 8px 18px rgba(37, 87, 167, 0.12);
    }

    .mobile-tabbar__more {
        position: absolute;
        right: 0.23rem;
        bottom: 0.16rem;
        display: block;
        color: currentColor;
        font-size: 0.56rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.08em;
        opacity: 0.85;
        pointer-events: none;
    }

    .mobile-subnav {
        position: fixed;
        right: auto;
        bottom: calc(4.45rem + env(safe-area-inset-bottom));
        left: 50%;
        z-index: 119;
        width: max-content;
        max-width: calc(100vw - 1rem);
        min-height: 4.15rem;
        align-items: stretch;
        justify-content: center;
        gap: 0.25rem;
        overflow-x: auto;
        padding: 0.42rem;
        border: 1px solid rgba(216, 224, 236, 0.86);
        border-radius: 1.15rem;
        background: color-mix(in srgb, var(--color-surface) 96%, transparent);
        box-shadow: 0 14px 40px rgba(20, 37, 63, 0.2);
        backdrop-filter: blur(22px);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 0.6rem) scale(0.97);
        transform-origin: bottom center;
        transition: opacity 150ms ease, transform 150ms ease;
        scrollbar-width: none;
    }

    .mobile-subnav::-webkit-scrollbar {
        display: none;
    }

    .mobile-subnav.is-open {
        display: flex;
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0) scale(1);
    }

    .mobile-subnav__item {
        position: relative;
        flex: 0 0 4rem;
        min-width: 4rem;
        min-height: 3.45rem;
        display: grid;
        grid-template-rows: 1.55rem auto;
        place-items: center;
        align-content: center;
        gap: 0.18rem;
        padding: 0.32rem 0.25rem;
        border-radius: 0.82rem;
        color: var(--color-muted);
        background: transparent;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-subnav__item:hover,
    .mobile-subnav__item:focus-visible,
    .mobile-subnav__item.is-active {
        color: var(--color-primary-dark);
        background: color-mix(in srgb, var(--color-primary) 11%, transparent);
        outline: none;
    }

    .mobile-subnav__icon {
        display: inline-grid;
        place-items: center;
        width: 1.5rem;
        height: 1.5rem;
    }

    .mobile-subnav__icon svg {
        width: 1.42rem;
        height: 1.42rem;
    }

    .mobile-subnav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1.05;
    }

    .mobile-subnav__item .nav-task-badge {
        position: absolute;
        top: 0.12rem;
        right: 0.2rem;
        min-width: 1.05rem;
        height: 1.05rem;
        margin: 0;
        padding: 0 0.22rem;
        border-width: 2px;
        font-size: 0.54rem;
        pointer-events: none;
    }

    body.mobile-subnav-open .app-main {
        padding-bottom: calc(9.4rem + env(safe-area-inset-bottom));
    }

    body.mobile-subnav-open .app-footer {
        padding-bottom: calc(9.5rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 420px) {
    .app-header-dashboard,
    .app-header-logout__button {
        width: 2.55rem;
        height: 2.55rem;
        border-radius: 0.78rem;
    }

    .brand-text small {
        max-width: 34vw;
    }

    .mobile-subnav__item {
        flex-basis: 3.65rem;
        min-width: 3.65rem;
    }

    .mobile-subnav__label {
        font-size: 0.58rem;
    }
}

[data-theme="dark"] .app-header-dashboard,
[data-theme="dark"] .mobile-subnav {
    border-color: color-mix(in srgb, var(--color-text) 16%, transparent);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

@media (min-width: 1025px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
    .app-header-actions,
    .mobile-subnav {
        display: none !important;
    }
}

/* Sprint 19.5 – rollenbezogene, kompakte Dashboard-Neuordnung. */
.dash-v4 {
    display: grid;
    gap: 0.72rem;
    width: 100%;
    min-width: 0;
}

.dash-v4-header,
.dash-v4-section,
.dash-v4-stat-grid > article,
.dash-v4-stat-grid > .dash-v4-stat-card {
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.055);
}

.dash-v4-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.78rem 0.9rem;
    background:
        radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 17rem),
        color-mix(in srgb, var(--color-surface) 96%, transparent);
}

.dash-v4-header--trainer {
    border-color: color-mix(in srgb, #0f766e 22%, var(--color-border));
}

.dash-v4-header--parent {
    border-color: color-mix(in srgb, #d97706 22%, var(--color-border));
}

.dash-v4-header__main {
    min-width: 0;
}

.app-main .dash-v4-kicker {
    display: block;
    margin: 0 0 0.18rem;
    color: var(--color-muted);
    font-size: 0.59rem !important;
    font-weight: 900;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-main .dash-v4 h1 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: clamp(1.08rem, 1.8vw, 1.38rem) !important;
    line-height: 1.15;
}

.app-main .dash-v4-header p {
    max-width: 64rem;
    margin: 0.24rem 0 0;
    color: var(--color-muted);
    font-size: 0.72rem !important;
    line-height: 1.35;
}

.dash-v4-user {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    min-width: min(18rem, 34vw);
    max-width: 22rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
    border-radius: 0.78rem;
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}

.dash-v4-user > span:last-child {
    min-width: 0;
}

.dash-v4-user strong,
.dash-v4-user small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-main .dash-v4-user strong {
    font-size: 0.72rem;
    line-height: 1.2;
}

.app-main .dash-v4-user small {
    margin-top: 0.08rem;
    color: var(--color-muted);
    font-size: 0.62rem !important;
}

.dash-v4-avatar {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    border-radius: 0.72rem;
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
}

.dash-v4-avatar--trainer {
    color: #115e59;
    background: color-mix(in srgb, var(--trainer-avatar-color, #0f766e) 16%, var(--color-surface));
}

.dash-v4-avatar--parent,
.dash-v4-avatar--child {
    color: #92400e;
    background: #fef3c7;
}

.dash-v4-section {
    min-width: 0;
    padding: 0.78rem 0.86rem;
}

.dash-v4-section-head {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.62rem;
}

.dash-v4-section-head > div {
    min-width: 0;
}

.app-main .dash-v4 h2 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 0.88rem !important;
    line-height: 1.18;
}

.app-main .dash-v4 h3 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 0.78rem !important;
    line-height: 1.2;
}

.app-main .dash-v4-section-head p,
.app-main .dash-v4-section > p {
    margin: 0.18rem 0 0;
    font-size: 0.68rem !important;
    line-height: 1.35;
}

.dash-v4-role-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.62rem;
}

.dash-v4-role-card {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.58rem;
    min-width: 0;
    padding: 0.66rem;
    border: 1px solid var(--color-border);
    border-radius: 0.82rem;
    color: inherit;
    background: var(--color-surface);
    text-decoration: none;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.dash-v4-role-card:hover,
.dash-v4-role-card:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.dash-v4-role-card.is-active {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.dash-v4-role-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.68rem;
    color: #fff;
    background: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 950;
}

.dash-v4-role-card--trainer .dash-v4-role-icon { background: #0f766e; }
.dash-v4-role-card--parent .dash-v4-role-icon { background: #d97706; }
.dash-v4-role-card--athlete .dash-v4-role-icon { background: #7c3aed; }

.dash-v4-role-content {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.dash-v4-role-topline {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
}

.app-main .dash-v4-role-card strong {
    font-size: 0.73rem;
    line-height: 1.2;
}

.app-main .dash-v4-role-card small {
    color: var(--color-muted);
    font-size: 0.62rem !important;
    line-height: 1.32;
}

.dash-v4-role-action {
    margin-top: 0.1rem;
    color: var(--color-primary-dark);
    font-size: 0.62rem;
    font-weight: 850;
}

.dash-v4-count,
.dash-v4-total {
    display: inline-grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    color: #fff;
    background: #dc2626;
    font-size: 0.66rem;
    font-weight: 950;
}

.dash-v4-total {
    min-width: 1.8rem;
    height: 1.8rem;
    font-size: 0.76rem;
}

.dash-v4-total.is-zero,
.dash-v4-active-label {
    color: #166534;
    background: #dcfce7;
}

.dash-v4-active-label {
    display: inline-flex;
    padding: 0.16rem 0.36rem;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 900;
}

.dash-v4-priority-grid,
.dash-v4-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    align-items: start;
}

.dash-v4-two-column--admin {
    grid-template-columns: minmax(0, 1.48fr) minmax(16rem, 0.62fr);
}

.dash-v4-stack {
    display: grid;
    gap: 0.72rem;
}

.dash-v4-task-card {
    border-color: color-mix(in srgb, var(--color-primary) 23%, var(--color-border));
}

.dash-v4-task-groups {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 0.58rem;
}

.dash-v4-task-groups a {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.46rem 0.56rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    color: inherit;
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
    text-decoration: none;
}

.app-main .dash-v4-task-groups span {
    font-size: 0.67rem;
    font-weight: 800;
}

.dash-v4-task-groups strong {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    color: #fff;
    background: #dc2626;
    font-size: 0.64rem;
}

.app-main .dash-v4-empty {
    margin: 0 0 0.58rem;
    padding: 0.58rem 0.62rem;
    border-radius: 0.65rem;
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    font-size: 0.68rem !important;
}

.dash-v4-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.dash-v4-create-grid a {
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr);
    gap: 0.06rem 0.42rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.68rem;
    color: inherit;
    background: var(--color-surface);
    text-decoration: none;
}

.dash-v4-create-grid a > span {
    grid-row: 1 / 3;
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.45rem;
    color: #fff;
    background: var(--color-primary);
    font-weight: 950;
}

.app-main .dash-v4-create-grid strong { font-size: 0.67rem; }
.app-main .dash-v4-create-grid small { color: var(--color-muted); font-size: 0.58rem !important; line-height: 1.25; }

.dash-v4-stat-grid {
    display: grid;
    gap: 0.5rem;
}

.dash-v4-stat-grid--admin {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dash-v4-stat-grid--role {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dash-v4-stat-grid > article,
.dash-v4-stat-grid > .dash-v4-stat-card {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    padding: 0.58rem 0.64rem;
}

.dash-v4-stat-grid > .dash-v4-stat-card,
.dashboard-stat-link {
    position: relative;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease;
}

.dash-v4-stat-grid > .dash-v4-stat-card::after,
.dashboard-stat-link::after {
    content: '→';
    position: absolute;
    top: 0.48rem;
    right: 0.58rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 900;
    opacity: 0.58;
}

.dash-v4-stat-grid > .dash-v4-stat-card:hover,
.dash-v4-stat-grid > .dash-v4-stat-card:focus-visible,
.dashboard-stat-link:hover,
.dashboard-stat-link:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
    box-shadow: 0 9px 22px rgba(15, 23, 42, 0.085);
    transform: translateY(-1px);
    outline: none;
}

.dash-v4-stat-grid > .dash-v4-stat-card:hover::after,
.dash-v4-stat-grid > .dash-v4-stat-card:focus-visible::after,
.dashboard-stat-link:hover::after,
.dashboard-stat-link:focus-visible::after {
    color: var(--color-primary-dark);
    opacity: 1;
}

.app-main .dash-v4-stat-grid > article > strong,
.app-main .dash-v4-stat-grid > .dash-v4-stat-card > strong {
    color: var(--color-primary-dark);
    font-size: 1.15rem !important;
    line-height: 1;
}

.app-main .dash-v4-stat-grid > article > span,
.app-main .dash-v4-stat-grid > .dash-v4-stat-card > span {
    color: var(--color-text);
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.2;
}

.app-main .dash-v4-stat-grid > article > small,
.app-main .dash-v4-stat-grid > .dash-v4-stat-card > small {
    color: var(--color-muted);
    font-size: 0.56rem !important;
    line-height: 1.2;
}

.dash-v4-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.dash-v4-module-group {
    display: grid;
    gap: 0.52rem;
    min-width: 0;
    padding: 0.62rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
}

.app-main .dash-v4-module-group p {
    margin: 0.12rem 0 0;
    color: var(--color-muted);
    font-size: 0.59rem !important;
    line-height: 1.3;
}

.dash-v4-module-group nav {
    display: grid;
    gap: 0.24rem;
}

.dash-v4-module-group nav a {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.36rem 0.42rem;
    border-radius: 0.48rem;
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    font-size: 0.63rem;
    font-weight: 800;
    text-decoration: none;
}

.dash-v4-hint-list {
    display: grid;
    gap: 0.4rem;
}

.dash-v4-hint {
    display: grid;
    gap: 0.14rem;
    padding: 0.48rem 0.54rem;
    border: 1px solid var(--color-border);
    border-radius: 0.62rem;
    color: inherit;
    background: var(--color-surface);
    text-decoration: none;
}

.dash-v4-hint--warning { border-color: #fbbf24; background: #fffbeb; }
.dash-v4-hint--info { border-color: #93c5fd; background: #eff6ff; }
.dash-v4-hint--success { border-color: #86efac; background: #f0fdf4; }

.app-main .dash-v4-hint strong { font-size: 0.64rem; }
.app-main .dash-v4-hint small { color: var(--color-muted); font-size: 0.57rem !important; line-height: 1.3; }

.dash-v4-brand-row {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.dash-v4-brand-logo {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.72rem;
    color: var(--color-primary-dark);
    background: #fff;
    font-size: 0.68rem;
    font-weight: 950;
}

.dash-v4-brand-logo img {
    width: 100%;
    height: 100%;
    padding: 0.2rem;
    object-fit: contain;
}

.dash-v4-color-row {
    display: flex;
    gap: 0.35rem;
    margin: 0.58rem 0;
}

.dash-v4-color-row span {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-surface);
    border-radius: 999px;
    background: var(--dash-color);
    box-shadow: 0 0 0 1px var(--color-border);
}

.dash-v4-system-links,
.dash-v4-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
}

.dash-v4-system-links a,
.dash-v4-inline-links a {
    padding: 0.3rem 0.46rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: var(--color-surface);
    font-size: 0.6rem;
    font-weight: 800;
    text-decoration: none;
}

.dash-v4-focus-training {
    display: grid;
    gap: 0.22rem;
    margin-bottom: 0.55rem;
    padding: 0.58rem;
    border: 1px solid color-mix(in srgb, #0f766e 25%, var(--color-border));
    border-radius: 0.68rem;
    color: inherit;
    background: color-mix(in srgb, #0f766e 5%, var(--color-surface));
    text-decoration: none;
}

.app-main .dash-v4-focus-training strong { font-size: 0.72rem; }
.app-main .dash-v4-focus-training small { color: var(--color-muted); font-size: 0.59rem !important; }

.dash-v4-training-list,
.dash-v4-parent-training-list,
.dash-v4-group-list,
.dash-v4-link-tiles,
.dash-v4-child-grid {
    display: grid;
    gap: 0.45rem;
}

.dash-v4-training-list > a,
.dash-v4-parent-training__head {
    display: grid;
    grid-template-columns: 6.2rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    color: inherit;
    background: var(--color-surface);
    text-decoration: none;
}

.dash-v4-training-date,
.dash-v4-training-main,
.dash-v4-training-meta {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.dash-v4-training-date {
    padding: 0.35rem 0.4rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    text-align: center;
}

.app-main .dash-v4-training-date strong,
.app-main .dash-v4-training-main strong { font-size: 0.68rem; }
.app-main .dash-v4-training-date small,
.app-main .dash-v4-training-main small,
.app-main .dash-v4-training-meta small { color: var(--color-muted); font-size: 0.57rem !important; line-height: 1.25; }
.dash-v4-training-meta { justify-items: end; text-align: right; }

.dash-v4-group-list > a {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.48rem 0.54rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    color: inherit;
    background: var(--color-surface);
    text-decoration: none;
}

.dash-v4-group-list > a > span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.dash-v4-group-list > a > span:last-child { text-align: right; }
.app-main .dash-v4-group-list strong { font-size: 0.65rem; }
.app-main .dash-v4-group-list small { color: var(--color-muted); font-size: 0.56rem !important; }

.dash-v4-link-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-v4-link-tiles a {
    display: grid;
    gap: 0.14rem;
    padding: 0.58rem;
    border: 1px solid var(--color-border);
    border-radius: 0.68rem;
    color: inherit;
    background: var(--color-surface);
    text-decoration: none;
}

.app-main .dash-v4-link-tiles strong { font-size: 0.68rem; }
.app-main .dash-v4-link-tiles small { color: var(--color-muted); font-size: 0.57rem !important; line-height: 1.3; }

.dash-v4-parent-training {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.76rem;
    background: var(--color-surface);
}

.dash-v4-parent-training__head {
    border: 0;
    border-radius: 0;
}

.dash-v4-response-list {
    display: grid;
    gap: 0.3rem;
    padding: 0.45rem 0.5rem;
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 2.5%, var(--color-surface));
}

.dash-v4-response-row {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
}

.dash-v4-response-row > span {
    display: grid;
    gap: 0.04rem;
}

.app-main .dash-v4-response-row strong { font-size: 0.64rem; }
.app-main .dash-v4-response-row small { color: var(--color-muted); font-size: 0.55rem !important; }

.dash-v4-child-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-v4-child-grid > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.52rem;
    align-items: center;
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    color: inherit;
    background: var(--color-surface);
    text-decoration: none;
}

.app-main .dash-v4-child-grid strong { font-size: 0.68rem; }
.app-main .dash-v4-child-grid small { color: var(--color-muted); font-size: 0.57rem !important; line-height: 1.3; }

.dash-v4-mini-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.dash-v4-mini-badges em {
    padding: 0.12rem 0.28rem;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 800;
}

@media (max-width: 1320px) {
    .dash-v4-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-v4-two-column--admin { grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr); }
    .dash-v4-child-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .dash-v4-header { grid-template-columns: 1fr; }
    .dash-v4-user { min-width: 0; max-width: none; }
    .dash-v4-priority-grid,
    .dash-v4-two-column,
    .dash-v4-two-column--admin { grid-template-columns: 1fr; }
    .dash-v4-stat-grid--admin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dash-v4-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
    .dash-v4 { gap: 0.55rem; }
    .dash-v4-header,
    .dash-v4-section { padding: 0.62rem 0.66rem; border-radius: 0.8rem; }
    .dash-v4-header { gap: 0.5rem; }
    .app-main .dash-v4 h1 { font-size: 1.04rem !important; }
    .app-main .dash-v4 h2 { font-size: 0.82rem !important; }
    .dash-v4-user { padding: 0.4rem 0.46rem; }
    .dash-v4-avatar { width: 2.05rem; height: 2.05rem; }
    .dash-v4-role-grid,
    .dash-v4-module-grid { grid-template-columns: 1fr; }
    .dash-v4-stat-grid--admin,
    .dash-v4-stat-grid--role { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-v4-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-v4-link-tiles { grid-template-columns: 1fr; }
    .dash-v4-child-grid { grid-template-columns: 1fr; }
    .dash-v4-training-list > a,
    .dash-v4-parent-training__head {
        grid-template-columns: 4.7rem minmax(0, 1fr);
        gap: 0.45rem;
    }
    .dash-v4-training-meta {
        grid-column: 1 / -1;
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-items: start;
        text-align: left;
    }
    .dash-v4-training-date { text-align: left; }
    .dash-v4-response-row { align-items: center; }
}

@media (max-width: 430px) {
    .dash-v4-create-grid { grid-template-columns: 1fr; }
    .dash-v4-section-head { align-items: center; }
    .dash-v4-section-head .button { padding-inline: 0.5rem; }
    .dash-v4-response-row { align-items: flex-start; flex-direction: column; }
    .dash-v4-response-row .quick-response-buttons { width: 100%; justify-content: flex-start; }
}

[data-theme="dark"] .dash-v4-header,
[data-theme="dark"] .dash-v4-section,
[data-theme="dark"] .dash-v4-stat-grid > article,
[data-theme="dark"] .dash-v4-stat-grid > .dash-v4-stat-card,
[data-theme="dark"] .dash-v4-role-card,
[data-theme="dark"] .dash-v4-create-grid a,
[data-theme="dark"] .dash-v4-module-group,
[data-theme="dark"] .dash-v4-training-list > a,
[data-theme="dark"] .dash-v4-parent-training,
[data-theme="dark"] .dash-v4-group-list > a,
[data-theme="dark"] .dash-v4-link-tiles a,
[data-theme="dark"] .dash-v4-child-grid > a,
[data-theme="dark"] .dash-v4-system-links a,
[data-theme="dark"] .dash-v4-inline-links a {
    background: color-mix(in srgb, var(--color-surface) 96%, #000);
}

[data-theme="dark"] .dash-v4-hint--warning,
[data-theme="dark"] .dash-v4-hint--info,
[data-theme="dark"] .dash-v4-hint--success {
    background: color-mix(in srgb, var(--color-surface) 92%, #000);
}

/* Sprint 19.5 – kompakte Statuszeile im Admin-Kopfbereich. */
.dash-v4-status-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.34rem;
    min-width: min(36rem, 52vw);
}

.dash-v4-status-row > span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.4rem 0.46rem;
    border: 1px solid var(--color-border);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}

.app-main .dash-v4-status-row small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 0.5rem !important;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-main .dash-v4-status-row strong {
    overflow: hidden;
    color: var(--color-primary-dark);
    font-size: 0.66rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .dash-v4-status-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }
}

/* Hotfix 19.5.2 – aktive Navigation folgt immer der aktuell geöffneten Route. */
@media (min-width: 1025px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
    .app-nav--grouped > a.is-active,
    .app-nav--grouped > a[aria-current="page"],
    .app-nav--grouped .nav-group__menu a.is-active,
    .app-nav--grouped .nav-group__menu a[aria-current="page"] {
        border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
        background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
        color: var(--color-primary-dark);
        box-shadow: inset 3px 0 0 var(--color-primary);
    }

    .app-nav--grouped .nav-group__menu a.is-active,
    .app-nav--grouped .nav-group__menu a[aria-current="page"] {
        font-weight: 500 !important;
    }

    .app-nav--grouped .nav-group.is-active > .nav-group__trigger,
    .app-nav--grouped .nav-group__trigger.is-active {
        color: var(--color-primary-dark);
        background: color-mix(in srgb, var(--color-primary) 7%, transparent);
    }

    .app-nav--grouped .nav-main-link--tasks:not(.is-active):not([aria-current="page"]) {
        border-color: transparent;
        background: transparent;
        color: var(--color-muted);
        box-shadow: none;
    }
}

/* 19.8.1.6 – Personennamen an kompakten Trainer-Avataren */
.person-tooltip-trigger,
.detail-tooltip-trigger {
    appearance: none;
    font: inherit;
    cursor: pointer;
}

.person-tooltip-trigger {
    padding: 0;
}

.detail-tooltip-trigger {
    user-select: none;
}

.person-tooltip-trigger:focus-visible,
.detail-tooltip-trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.person-tooltip-popover {
    position: fixed;
    z-index: 9999;
    max-width: min(420px, calc(100vw - 16px));
    max-height: min(60vh, 520px);
    overflow-y: auto;
    padding: 0.55rem 0.72rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    pointer-events: auto;
    white-space: normal;
    overflow-wrap: anywhere;
}

.person-tooltip-popover[hidden] {
    display: none;
}

/* 19.8.1.6 – Minderjährigen-/Kontohinweise */
.minor-account-global-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-warning) 38%, var(--color-border));
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface));
}

.minor-account-global-banner--pending {
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

.minor-account-global-banner > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.minor-account-global-banner strong {
    font-weight: 800;
}

.minor-account-global-banner span {
    color: var(--color-text-muted);
}

.minor-account-guidance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dash-v4-mini-badges em.is-warning {
    background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
    color: var(--color-text);
}

@media (max-width: 760px) {
    .minor-account-global-banner,
    .minor-account-guidance {
        align-items: stretch;
        flex-direction: column;
    }

    .minor-account-global-banner .button,
    .minor-account-guidance .button {
        width: 100%;
        justify-content: center;
    }
}


/* Sprint 19.8.1.10 – zentrale Eltern–Turnenden-Zuordnung */
.parent-assignment-list {
    display: grid;
    gap: .75rem;
}

.parent-assignment-row {
    display: grid;
    grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.8fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    scroll-margin-top: 1rem;
}

.parent-assignment-row:target {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.parent-assignment-row__person {
    display: grid;
    gap: .25rem;
    align-content: start;
    min-width: 0;
}

.parent-assignment-row__person h3,
.parent-assignment-row__person p {
    margin: 0;
}

.parent-assignment-row__person small {
    color: var(--color-muted);
}

.parent-assignment-current {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .35rem;
}

.parent-assignment-current span {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: var(--color-surface-soft);
    color: var(--color-text);
    font-size: .78rem;
    font-weight: 700;
}

.parent-assignment-form {
    display: grid;
    gap: .7rem;
}

@media (max-width: 900px) {
    .parent-assignment-row {
        grid-template-columns: 1fr;
    }
}

/* Praxisfix 19.8.1.13 – Browserhinweise bei PWA-Installation */
.pwa-browser-hint {
    display: block;
    grid-column: 1 / -1;
    margin: .2rem 0 0;
    padding: .55rem .65rem;
    border: 1px solid var(--color-border);
    border-radius: .7rem;
    background: var(--color-surface-soft);
    color: var(--color-muted);
    font-size: .72rem !important;
    line-height: 1.4;
}

.pwa-browser-hint.is-samsung {
    border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 38%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, var(--color-surface));
    color: var(--color-text);
}

.pwa-install-dialog__actions {
    gap: .5rem;
    flex-wrap: wrap;
}

/* Praxisfix 19.8.1.13 – Eltern melden fehlende Kind-Verknüpfung */
.parent-link-request-card {
    scroll-margin-top: 1rem;
}

.parent-link-request-pending {
    display: grid;
    gap: .45rem;
    margin-bottom: .85rem;
}

.parent-link-request-pending__item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .65rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.parent-link-request-pending__item small {
    color: var(--color-muted);
}

.parent-link-request-form {
    margin-top: .35rem;
}

.parent-link-request-admin-list {
    display: grid;
    gap: .6rem;
}

.parent-link-request-admin-item {
    display: grid;
    grid-template-columns: minmax(12rem, .8fr) minmax(15rem, 1.1fr) auto;
    gap: .85rem;
    align-items: center;
    padding: .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.parent-link-request-admin-item__parent,
.parent-link-request-admin-item__child {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.parent-link-request-admin-item__parent small,
.parent-link-request-admin-item__child small {
    color: var(--color-muted);
}

.parent-link-request-admin-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}

.parent-link-request-admin-item__actions form {
    margin: 0;
}

.parent-link-request-history {
    margin-top: .8rem;
    border-top: 1px solid var(--color-border);
    padding-top: .7rem;
}

.parent-link-request-history summary {
    cursor: pointer;
    font-weight: 700;
}

.parent-link-request-history__list {
    display: grid;
    gap: .35rem;
    margin-top: .6rem;
}

.parent-link-request-history__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .45rem .55rem;
    border-radius: .55rem;
    background: var(--color-surface-soft);
}

.parent-link-request-history__item small {
    color: var(--color-muted);
}

@media (max-width: 900px) {
    .parent-link-request-admin-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .parent-link-request-admin-item__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .parent-link-request-admin-item__actions,
    .parent-link-request-admin-item__actions .button,
    .parent-link-request-admin-item__actions form {
        width: 100%;
    }

    .parent-link-request-admin-item__actions .button {
        justify-content: center;
    }
}


/* Praxisfix 19.8.1.14 – kompakte Eltern-Zuordnung und erweiterte Listenfilter */
.filter-bar--users,
.filter-bar--athletes {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.filter-bar--users .filter-field--wide,
.filter-bar--athletes .filter-field--wide {
    grid-column: span 2;
}

.filter-bar--users .filter-actions,
.filter-bar--athletes .filter-actions {
    align-self: end;
}

.parent-assignment-editor {
    min-width: 0;
}

.parent-assignment-editor__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.9rem;
    padding: .7rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    color: var(--color-primary-dark);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.parent-assignment-editor__summary::-webkit-details-marker {
    display: none;
}

.parent-assignment-editor__summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--color-muted);
    transition: transform .18s ease;
}

.parent-assignment-editor[open] .parent-assignment-editor__summary::after {
    transform: rotate(180deg);
}

.parent-assignment-editor__summary:hover,
.parent-assignment-editor__summary:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.parent-assignment-editor__content {
    padding-top: .85rem;
}

@media (max-width: 760px) {
    .filter-bar--users .filter-field--wide,
    .filter-bar--athletes .filter-field--wide {
        grid-column: auto;
    }
}

/* Hotfix 19.8.1.22 – Smartphone-Querformat nutzt die kompakte Bottom-Navigation.
   Die bisherige reine Breitenlogik behandelte breite Smartphone-Viewports im
   Querformat wie ein Tablet und blendete die dauerhaft linke Navigation ein.
   Bei geringer Viewport-Höhe und Touch-Eingabe ist die Bottom-Navigation die
   robustere Variante – unabhängig von der gemeldeten CSS-Breite. */
@media (orientation: landscape) and (max-height: 600px) and (hover: none) and (pointer: coarse) {
    body {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .app-shell {
        width: 100%;
        min-height: 100svh;
        padding-right: max(0.7rem, env(safe-area-inset-right));
        padding-left: max(0.7rem, env(safe-area-inset-left));
    }

    .app-nav--desktop,
    .app-nav--desktop.app-nav--grouped {
        display: none !important;
    }

    .app-header {
        position: sticky;
        top: 0;
        z-index: 50;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .app-header-actions {
        display: flex !important;
        align-items: center;
        gap: 0.42rem;
        margin-left: auto;
    }

    .app-header-actions .app-header-logout,
    .app-header-logout {
        display: block !important;
        margin: 0;
    }

    .mobile-tabbar {
        position: fixed;
        right: auto !important;
        bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        z-index: 120;
        display: flex !important;
        width: max-content !important;
        max-width: calc(100vw - max(1rem, env(safe-area-inset-left) + env(safe-area-inset-right))) !important;
        min-height: 0 !important;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.22rem;
        overflow-x: auto;
        padding: 0.38rem !important;
        border: 1px solid rgba(216, 224, 236, 0.82) !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--color-surface) 94%, transparent);
        box-shadow: 0 14px 40px rgba(20, 37, 63, 0.18);
        backdrop-filter: blur(22px);
        transform: translateX(-50%) !important;
        scrollbar-width: none;
    }

    .mobile-tabbar::-webkit-scrollbar,
    .mobile-subnav::-webkit-scrollbar {
        display: none;
    }

    .mobile-tabbar__item {
        position: relative;
        flex: 0 0 auto !important;
        width: 2.65rem !important;
        max-width: none !important;
        height: 2.65rem !important;
        display: inline-grid;
        place-items: center;
        padding: 0;
        border-radius: 999px !important;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-tabbar__group-trigger {
        margin: 0;
        font: inherit;
    }

    .mobile-tabbar__group-trigger.is-open {
        color: var(--color-primary);
        background: color-mix(in srgb, var(--color-primary) 14%, transparent);
        box-shadow: 0 8px 18px rgba(37, 87, 167, 0.12);
    }

    .mobile-tabbar__more {
        position: absolute;
        right: 0.2rem;
        bottom: 0.12rem;
        display: block;
        color: currentColor;
        font-size: 0.54rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.08em;
        opacity: 0.85;
        pointer-events: none;
    }

    .mobile-subnav {
        position: fixed;
        right: auto;
        bottom: calc(4rem + env(safe-area-inset-bottom));
        left: 50%;
        z-index: 119;
        display: none;
        width: max-content;
        max-width: calc(100vw - 1rem);
        min-height: 3.8rem;
        align-items: stretch;
        justify-content: center;
        gap: 0.22rem;
        overflow-x: auto;
        padding: 0.36rem;
        border: 1px solid rgba(216, 224, 236, 0.86);
        border-radius: 1.05rem;
        background: color-mix(in srgb, var(--color-surface) 96%, transparent);
        box-shadow: 0 14px 40px rgba(20, 37, 63, 0.2);
        backdrop-filter: blur(22px);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 0.5rem) scale(0.97);
        transform-origin: bottom center;
        transition: opacity 150ms ease, transform 150ms ease;
        scrollbar-width: none;
    }

    .mobile-subnav.is-open {
        display: flex !important;
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0) scale(1);
    }

    .mobile-subnav__item {
        position: relative;
        flex: 0 0 3.8rem;
        min-width: 3.8rem;
        min-height: 3.2rem;
        display: grid;
        grid-template-rows: 1.45rem auto;
        place-items: center;
        align-content: center;
        gap: 0.14rem;
        padding: 0.26rem 0.22rem;
        border-radius: 0.78rem;
        color: var(--color-muted);
        background: transparent;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-subnav__item:hover,
    .mobile-subnav__item:focus-visible,
    .mobile-subnav__item.is-active {
        color: var(--color-primary-dark);
        background: color-mix(in srgb, var(--color-primary) 11%, transparent);
        outline: none;
    }

    .mobile-subnav__icon {
        display: inline-grid;
        place-items: center;
        width: 1.45rem;
        height: 1.45rem;
    }

    .mobile-subnav__icon svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    .mobile-subnav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.58rem;
        font-weight: 700;
        line-height: 1.05;
    }

    .mobile-subnav__item .nav-task-badge {
        position: absolute;
        top: 0.08rem;
        right: 0.14rem;
        min-width: 1.02rem;
        height: 1.02rem;
        margin: 0;
        padding: 0 0.2rem;
        border-width: 2px;
        font-size: 0.52rem;
        pointer-events: none;
    }

    .app-main {
        padding-bottom: calc(4.9rem + env(safe-area-inset-bottom));
    }

    .app-footer {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }

    body.mobile-subnav-open .app-main {
        padding-bottom: calc(8.6rem + env(safe-area-inset-bottom));
    }

    body.mobile-subnav-open .app-footer {
        padding-bottom: calc(8.7rem + env(safe-area-inset-bottom));
    }
}

/* Sprint 19.8.4.1 – Turnenden-Dashboard: Termine, Aufgaben und Fortschritt im Fokus. */
.dash-v4-header--athlete {
    border-color: color-mix(in srgb, #7c3aed 24%, var(--color-border));
    background:
        radial-gradient(circle at 94% 10%, color-mix(in srgb, #7c3aed 10%, transparent), transparent 17rem),
        color-mix(in srgb, var(--color-surface) 96%, transparent);
}

.dash-v4-avatar--athlete {
    color: #6d28d9;
    background: color-mix(in srgb, #7c3aed 14%, var(--color-surface));
}

.dash-v4-priority-grid--athlete,
.dash-v4-two-column--athlete {
    align-items: stretch;
}

.dash-v4-athlete-next {
    border-color: color-mix(in srgb, #7c3aed 24%, var(--color-border));
}

.dash-v4-athlete-next-card {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
    margin-bottom: 0.55rem;
    padding: 0.62rem;
    border: 1px solid color-mix(in srgb, #7c3aed 22%, var(--color-border));
    border-radius: 0.78rem;
    color: inherit;
    background: color-mix(in srgb, #7c3aed 5%, var(--color-surface));
    text-decoration: none;
}

.dash-v4-athlete-next-date,
.dash-v4-athlete-next-main {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.dash-v4-athlete-next-date {
    padding: 0.42rem 0.48rem;
    border-radius: 0.56rem;
    background: color-mix(in srgb, #7c3aed 9%, var(--color-surface));
    text-align: center;
}

.app-main .dash-v4-athlete-next-date strong,
.app-main .dash-v4-athlete-next-main strong {
    font-size: 0.7rem;
}

.app-main .dash-v4-athlete-next-date small,
.app-main .dash-v4-athlete-next-main small {
    color: var(--color-muted);
    font-size: 0.58rem !important;
    line-height: 1.3;
}

.dash-v4-athlete-next-main .badge {
    justify-self: start;
    margin-bottom: 0.08rem;
}

.dash-v4-athlete-training-list,
.dash-v4-athlete-event-list {
    display: grid;
    gap: 0.45rem;
}

.dash-v4-athlete-training {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.52rem;
    align-items: center;
    min-width: 0;
    padding: 0.48rem;
    border: 1px solid var(--color-border);
    border-radius: 0.74rem;
    background: var(--color-surface);
}

.dash-v4-athlete-training__link,
.dash-v4-athlete-event-list > a {
    display: grid;
    grid-template-columns: 6.2rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.dash-v4-athlete-training .quick-response-buttons {
    flex-wrap: nowrap;
}

.dash-v4-athlete-progress-summary {
    display: flex;
    gap: 0.72rem;
    align-items: center;
    margin-bottom: 0.58rem;
    padding: 0.56rem;
    border: 1px solid color-mix(in srgb, #7c3aed 18%, var(--color-border));
    border-radius: 0.72rem;
    background: color-mix(in srgb, #7c3aed 4%, var(--color-surface));
}

.dash-v4-athlete-progress-summary > div:last-child {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.app-main .dash-v4-athlete-progress-summary > div:last-child strong {
    font-size: 0.68rem;
}

.app-main .dash-v4-athlete-progress-summary > div:last-child small {
    color: var(--color-muted);
    font-size: 0.57rem !important;
}

.dash-v4-athlete-progress-ring {
    --progress: 0%;
    display: grid;
    place-content: center;
    width: 4.1rem;
    height: 4.1rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background:
        radial-gradient(circle, var(--color-surface) 57%, transparent 59%),
        conic-gradient(#7c3aed var(--progress), color-mix(in srgb, #7c3aed 12%, var(--color-border)) 0);
    text-align: center;
}

.app-main .dash-v4-athlete-progress-ring strong {
    color: var(--color-primary-dark);
    font-size: 0.82rem;
    line-height: 1;
}

.app-main .dash-v4-athlete-progress-ring small {
    margin-top: 0.1rem;
    color: var(--color-muted);
    font-size: 0.5rem !important;
}

.dash-v4-athlete-progress-categories {
    display: grid;
    gap: 0.32rem;
}

.dash-v4-athlete-progress-categories > div {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.34rem 0.44rem;
    border-radius: 0.56rem;
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}

.app-main .dash-v4-athlete-progress-categories span,
.app-main .dash-v4-athlete-progress-categories strong {
    font-size: 0.61rem;
}

.dash-v4-athlete-event-list > a {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-surface);
}

.dash-v4-athlete-event-list .dash-v4-training-main .badge {
    justify-self: start;
    margin-bottom: 0.06rem;
}

@media (max-width: 760px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
    .dash-v4-athlete-next-card {
        grid-template-columns: 4.9rem minmax(0, 1fr);
        gap: 0.48rem;
    }

    .dash-v4-athlete-next-card > .badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .dash-v4-athlete-next-date {
        text-align: left;
    }

    .dash-v4-athlete-training {
        grid-template-columns: 1fr;
    }

    .dash-v4-athlete-training__link,
    .dash-v4-athlete-event-list > a {
        grid-template-columns: 4.7rem minmax(0, 1fr);
        gap: 0.45rem;
    }

    .dash-v4-athlete-training__link .dash-v4-training-meta,
    .dash-v4-athlete-event-list > a > .badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .dash-v4-athlete-training .quick-response-buttons {
        justify-content: flex-start;
    }
}

@media (max-width: 430px) {
    .dash-v4-athlete-progress-summary {
        align-items: flex-start;
    }

    .dash-v4-athlete-progress-ring {
        width: 3.55rem;
        height: 3.55rem;
    }
}

[data-theme="dark"] .dash-v4-athlete-training,
[data-theme="dark"] .dash-v4-athlete-event-list > a,
[data-theme="dark"] .dash-v4-athlete-next-card {
    background: color-mix(in srgb, var(--color-surface) 96%, #000);
}

/* Sprint 19.8.4.2 – Turnende: Meine Gruppen + Gruppendetail */
.athlete-group-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.athlete-group-overview-card {
    min-width: 0;
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 96%, #7c3aed 4%);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(20, 37, 63, 0.06);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.athlete-group-overview-card:hover,
.athlete-group-overview-card:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #7c3aed 34%, var(--color-border));
    box-shadow: 0 16px 36px rgba(20, 37, 63, 0.1);
}

.athlete-group-overview-card__head {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.athlete-group-overview-card__title,
.athlete-group-overview-card__meta > span,
.athlete-group-overview-card__next {
    min-width: 0;
}

.athlete-group-overview-card__title strong,
.athlete-group-overview-card__meta strong,
.athlete-group-overview-card__next strong {
    display: block;
}

.athlete-group-overview-card__title small,
.athlete-group-overview-card__meta small,
.athlete-group-overview-card__next small,
.athlete-group-overview-card__next span {
    display: block;
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.athlete-group-overview-card__arrow {
    color: var(--color-muted);
    font-size: 1.8rem;
    line-height: 1;
}

.athlete-group-overview-card__description {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.athlete-group-overview-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.athlete-group-overview-card__meta > span,
.athlete-group-overview-card__next {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface) 90%, #7c3aed 10%);
}

.athlete-group-overview-card__next span {
    margin-top: 0.18rem;
}

.athlete-group-detail-stats {
    margin-bottom: 1rem;
}

.athlete-group-description p {
    margin-bottom: 0;
}

.athlete-group-staff-list {
    display: grid;
    gap: 0.65rem;
}

.athlete-group-staff-person {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface) 94%, #7c3aed 6%);
}

.athlete-group-staff-person strong,
.athlete-group-staff-person small {
    display: block;
}

.athlete-group-staff-person small {
    margin-top: 0.12rem;
    color: var(--color-muted);
}

.athlete-group-quick-actions {
    margin-top: 1rem;
}

@media (max-width: 860px) {
    .athlete-group-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .athlete-group-overview-card__meta {
        grid-template-columns: 1fr;
    }

    .athlete-group-staff-person {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .athlete-group-staff-person .badge {
        grid-column: 2;
        justify-self: start;
    }
}

[data-theme="dark"] .athlete-group-overview-card,
[data-theme="dark"] .athlete-group-overview-card__meta > span,
[data-theme="dark"] .athlete-group-overview-card__next,
[data-theme="dark"] .athlete-group-staff-person {
    background: color-mix(in srgb, var(--color-surface) 92%, #7c3aed 8%);
}

/* Sprint 19.8.4.15 – gemeinsame mobile Navigation.
   Der visuelle 5-Punkte-Standard gilt rollenübergreifend für
   Admin/Superadmin, Trainer/in, Übungshelfer/in, Eltern und Turnende.
   Fachliche Unterschiede werden ausschließlich über die Menüstruktur
   und die automatisch gewählte Untermenü-Spaltenzahl abgebildet. */
.mobile-tabbar__label {
    display: none;
}

@media (max-width: 760px),
       (min-width: 761px) and (max-width: 1024px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 600px) and (hover: none) and (pointer: coarse) {
    .mobile-nav-standard .mobile-tabbar {
        width: min(23rem, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem) !important;
        justify-content: space-between !important;
        gap: .08rem !important;
        padding: .34rem .38rem !important;
        border-radius: 1.25rem !important;
        overflow: visible;
    }

    .mobile-nav-standard .mobile-tabbar__item {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 3.35rem !important;
        display: grid;
        grid-template-rows: 1.65rem auto;
        place-items: center;
        align-content: center;
        gap: .12rem;
        padding: .22rem .08rem !important;
        border-radius: .9rem !important;
        color: var(--color-muted);
        background: transparent;
    }

    .mobile-nav-standard .mobile-tabbar__item:hover,
    .mobile-nav-standard .mobile-tabbar__item:focus-visible,
    .mobile-nav-standard .mobile-tabbar__item.is-active,
    .mobile-nav-standard .mobile-tabbar__group-trigger.is-open {
        color: var(--color-primary-dark);
        background: color-mix(in srgb, var(--color-primary) 10%, transparent);
        outline: none;
        box-shadow: none;
    }

    .mobile-nav-standard .mobile-tabbar__icon {
        display: inline-grid;
        place-items: center;
        width: 1.7rem;
        height: 1.7rem;
        border-radius: 999px;
        transition: background .15s ease, color .15s ease, transform .15s ease;
    }

    .mobile-nav-standard .mobile-tabbar__item.is-active .mobile-tabbar__icon,
    .mobile-nav-standard .mobile-tabbar__group-trigger.is-open .mobile-tabbar__icon {
        color: var(--color-primary-dark);
        background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
        transform: translateY(-1px);
    }

    .mobile-nav-standard .mobile-tabbar__icon svg {
        width: 1.45rem;
        height: 1.45rem;
        stroke-width: 2;
    }

    .mobile-nav-standard .mobile-tabbar__label {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: .53rem;
        font-weight: 760;
        line-height: 1;
        letter-spacing: -.012em;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-standard .mobile-tabbar__item .nav-task-badge {
        top: .04rem;
        right: .14rem;
    }

    .mobile-nav-standard .mobile-subnav {
        max-width: calc(100vw - 1rem);
        min-height: 4.15rem;
        gap: .28rem;
        padding: .4rem;
        border-radius: 1.05rem;
        overflow: visible;
    }

    .mobile-nav-standard .mobile-subnav.is-open {
        display: grid !important;
    }

    .mobile-nav-standard .mobile-subnav--cols-1 {
        width: min(10rem, calc(100vw - 1rem));
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-nav-standard .mobile-subnav--cols-2 {
        width: min(18rem, calc(100vw - 1rem));
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-nav-standard .mobile-subnav--cols-3 {
        width: min(22rem, calc(100vw - 1rem));
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-nav-standard .mobile-subnav__item {
        width: auto;
        min-width: 0;
        min-height: 3.45rem;
        display: grid;
        grid-template-rows: 1.65rem auto;
        place-items: center;
        align-content: center;
        gap: .16rem;
        padding: .3rem .22rem;
        border-radius: .78rem;
    }

    .mobile-nav-standard .mobile-subnav__icon {
        width: 1.65rem;
        height: 1.65rem;
    }

    .mobile-nav-standard .mobile-subnav__icon svg {
        width: 1.45rem;
        height: 1.45rem;
        stroke-width: 2;
    }

    .mobile-nav-standard .mobile-subnav__label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: .58rem;
        font-weight: 760;
        line-height: 1.08;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-standard .mobile-subnav__item.is-active .mobile-subnav__icon {
        color: var(--color-primary-dark);
    }
}

@media (max-width: 360px) {
    .mobile-nav-standard .mobile-tabbar {
        width: calc(100vw - .7rem) !important;
        max-width: calc(100vw - .7rem) !important;
        padding-right: .26rem !important;
        padding-left: .26rem !important;
    }

    .mobile-nav-standard .mobile-tabbar__label {
        font-size: .49rem;
    }

    .mobile-nav-standard .mobile-tabbar__icon svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    .mobile-nav-standard .mobile-subnav {
        max-width: calc(100vw - .7rem);
        gap: .2rem;
        padding: .34rem;
    }

    .mobile-nav-standard .mobile-subnav--cols-2,
    .mobile-nav-standard .mobile-subnav--cols-3 {
        width: calc(100vw - .7rem);
    }

    .mobile-nav-standard .mobile-subnav__label {
        font-size: .52rem;
    }
}

/* Sprint 19.8.5.0 – sichtbare DEV-/DEMO-Kennzeichnung und Release-Umgebung. */
.environment-banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    margin-top: 0.55rem;
    padding: 0.42rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 7px 18px rgba(20, 37, 63, 0.07);
}

.environment-banner strong {
    font-size: 0.74rem;
    letter-spacing: 0.09em;
}

.environment-banner span {
    font-weight: 700;
}

.environment-banner small {
    opacity: 0.82;
    font-size: 0.72rem;
}

.environment-banner--dev {
    color: #7a271a;
    border-color: rgba(180, 83, 9, 0.28);
    background: rgba(255, 237, 213, 0.92);
}

.environment-banner--demo {
    color: #164e63;
    border-color: rgba(8, 145, 178, 0.26);
    background: rgba(207, 250, 254, 0.92);
}

.environment-banner--local {
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-surface-soft) 92%, transparent);
}

[data-theme="dark"] .environment-banner--dev {
    color: #fed7aa;
    border-color: rgba(251, 146, 60, 0.34);
    background: rgba(124, 45, 18, 0.72);
}

[data-theme="dark"] .environment-banner--demo {
    color: #cffafe;
    border-color: rgba(34, 211, 238, 0.3);
    background: rgba(21, 94, 117, 0.72);
}

@media (max-width: 560px) {
    .environment-banner {
        margin-top: 0.4rem;
        padding: 0.36rem 0.6rem;
        gap: 0.25rem 0.55rem;
        border-radius: 0.8rem;
    }

    .environment-banner small {
        width: 100%;
    }
}

/* 19.8.5.4.1 – öffentliche DEMO-Testzugänge */
.demo-access-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), var(--color-surface));
    box-shadow: var(--shadow-card);
}
.demo-access-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}
.demo-access-panel__head h2 { margin: .25rem 0 .45rem; }
.demo-access-panel__head p { margin: 0; color: var(--color-muted); line-height: 1.5; }
.demo-access-password {
    flex: 0 0 auto;
    display: grid;
    gap: .25rem;
    min-width: 12rem;
    padding: .8rem 1rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-align: center;
}
.demo-access-password span { color: var(--color-muted); font-size: .82rem; }
.demo-access-password strong { font-size: 1.15rem; letter-spacing: .04em; }
.demo-access-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}
.demo-access-card {
    display: grid;
    gap: .45rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.demo-access-card__role {
    width: fit-content;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 800;
}
.demo-access-card small { min-height: 2.7em; color: var(--color-muted); line-height: 1.35; }
.demo-access-card code {
    overflow-wrap: anywhere;
    padding: .45rem .55rem;
    border-radius: .55rem;
    background: color-mix(in srgb, var(--color-bg) 72%, var(--color-surface));
    color: var(--color-text);
    font-size: .78rem;
}
.demo-access-card .button { margin-top: auto; }
.demo-access-panel__owner-note { margin: 0; color: var(--color-muted); font-size: .84rem; }

@media (max-width: 1100px) {
    .demo-access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .demo-access-panel__head { display: grid; }
    .demo-access-password { width: 100%; min-width: 0; text-align: left; }
    .demo-access-grid { grid-template-columns: 1fr; }
    .demo-access-card small { min-height: 0; }
}