:root {
    --ink: #f7fbff;
    --muted: rgba(226, 239, 250, .72);
    --line: rgba(222, 241, 255, .15);
    --bg: #08162b;
    --panel: rgba(255, 255, 255, .10);
    --primary: #006d8f;
    --primary-dark: #06495f;
    --accent: #13a86b;
    --warn: #f2b84b;
    --nav-bg: rgba(8, 22, 43, .82);
    --nav-bg-end: rgba(7, 53, 76, .76);
    --nav-ink: #ffffff;
    --nav-soft: rgba(255, 255, 255, .14);
    --shadow: rgba(0, 0, 0, .26);
    --soft-panel: rgba(255, 255, 255, .075);
    --strong-panel: rgba(255, 255, 255, .16);
    --control-bg: rgba(255, 255, 255, .12);
    --control-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 34px rgba(0, 0, 0, .12);
    --dropdown-bg: rgba(255, 255, 255, .96);
    --dropdown-ink: #102033;
    --dropdown-muted: #526478;
    --dropdown-hover-bg: color-mix(in srgb, var(--primary), transparent 88%);
    --dropdown-hover-ink: #071429;
    --mobile-navigation-surface: #0b1626;
    --mobile-navigation-control: #263647;
    --mobile-navigation-popover: #f8fafc;
    --app-hero-start: color-mix(in srgb, var(--primary-dark), #06152b 76%);
    --app-hero-end: color-mix(in srgb, var(--primary), #071a35 62%);
    --app-glow: color-mix(in srgb, var(--accent), transparent 68%);
    --button-ink: #071429;
}

:root[data-theme="dark"] {
    --ink: #edf4f8;
    --muted: #9aa8b5;
    --line: rgba(216, 231, 242, .13);
    --bg: #0d1117;
    --panel: rgba(22, 28, 36, .82);
    --primary: #37b4dc;
    --primary-dark: #0b5f7a;
    --accent: #4ed493;
    --warn: #f0c15c;
    --nav-bg: rgba(12, 24, 31, .86);
    --nav-bg-end: rgba(18, 42, 54, .82);
    --nav-ink: #eef7fb;
    --nav-soft: rgba(255, 255, 255, .13);
    --shadow: rgba(0, 0, 0, .28);
    --soft-panel: rgba(29, 42, 52, .64);
    --control-bg: rgba(16, 27, 34, .78);
    --control-shadow: 0 1px 1px rgba(0, 0, 0, .18), 0 14px 32px rgba(0, 0, 0, .22);
    --dropdown-bg: rgba(18, 31, 42, .96);
    --dropdown-ink: #edf4f8;
    --dropdown-muted: #9aa8b5;
    --dropdown-hover-bg: color-mix(in srgb, var(--primary), transparent 76%);
    --dropdown-hover-ink: #ffffff;
    --mobile-navigation-surface: #111d2c;
    --mobile-navigation-control: #263746;
    --mobile-navigation-popover: #152333;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent), transparent 72%) 0, transparent 30vw),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--primary), transparent 66%) 0, transparent 34vw),
        linear-gradient(135deg, var(--app-hero-start) 0%, var(--app-hero-end) 46%, #071225 100%),
        var(--bg);
    background-attachment: fixed;
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Arbeitszeit, Personalplanung und Abwesenheiten teilen sich eine kompakte Subnavigation. */
.workforce-nav {
    display: flex;
    gap: .4rem;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: .35rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bluca-surface-navigation, color-mix(in srgb, var(--soft-panel), transparent 4%));
    scrollbar-width: thin;
}

.workforce-nav-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .55rem .85rem;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.workforce-nav-link:hover,
.workforce-nav-link:focus-visible {
    background: color-mix(in srgb, var(--primary), transparent 88%);
    color: var(--ink);
}

.workforce-nav-link.active {
    background: var(--primary);
    color: var(--primary-contrast, #fff);
}

.staff-planning-groups,
.workforce-absence-list,
.workforce-absence-section {
    display: grid;
    gap: .8rem;
}

.staff-planning-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--soft-panel), transparent 5%);
}

.staff-planning-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 58px;
    padding: .75rem 1rem;
    cursor: pointer;
    list-style: none;
}

.staff-planning-group > summary::-webkit-details-marker { display: none; }
.staff-planning-group > summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: 850;
}
.staff-planning-group[open] > summary::after { content: "−"; }
.staff-planning-group.has-conflict > summary { background: rgba(220, 53, 69, .08); }

.staff-planning-group-title,
.staff-planning-group-title > strong,
.staff-planning-group-title > small {
    display: block;
}

.staff-planning-group-title > small { color: var(--muted); }
.staff-planning-group-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; margin-left: auto; }
.staff-planning-badge {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary), transparent 88%);
    font-size: .75rem;
    font-weight: 800;
}
.staff-planning-badge.is-warning,
.staff-planning-warning { color: #9a6700; }
.staff-planning-badge.is-warning { background: rgba(255, 193, 7, .18); }
.staff-planning-badge.is-conflict { background: rgba(220, 53, 69, .15); color: #b02a37; }
.staff-planning-group-content { padding: .75rem; border-top: 1px solid var(--line); }
.staff-planning-group-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .65rem; }
.staff-planning-warning { display: block; font-weight: 700; }

.workforce-absence-create,
.workforce-absence-section { margin-bottom: 1rem; }
.workforce-absence-create > summary { cursor: pointer; font-weight: 850; }
.workforce-absence-create[open] > summary { margin-bottom: 1rem; }
.workforce-absence-form {
    display: grid;
    grid-template-columns: minmax(170px, .8fr) repeat(2, minmax(150px, .7fr));
    gap: .75rem;
    align-items: end;
}
.workforce-absence-form > label { display: grid; gap: .25rem; margin: 0; }
.workforce-absence-reason { grid-column: 1 / -1; }
.workforce-absence-form > .btn { justify-self: start; }
.workforce-absence-card {
    display: grid;
    gap: .65rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--soft-panel), transparent 4%);
}
.workforce-absence-card.is-pending { border-color: rgba(255, 193, 7, .55); }
.workforce-absence-card > p { margin: 0; }
.workforce-absence-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.workforce-absence-card-head > div,
.workforce-absence-card-head strong,
.workforce-absence-card-head span { display: block; }
.workforce-absence-card-head > div > span { color: var(--muted); }
.workforce-absence-decision { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: .5rem; }
.absence-status-beantragt { background: rgba(255, 193, 7, .18); }
.absence-status-genehmigt { background: rgba(25, 135, 84, .18); }
.absence-status-abgelehnt { background: rgba(220, 53, 69, .16); }
.absence-status-zurueckgezogen { background: color-mix(in srgb, var(--muted), transparent 82%); }

@media (max-width: 767.98px) {
    .workforce-nav { margin-bottom: .7rem; padding: .25rem; scroll-snap-type: x proximity; }
    .workforce-nav-link { min-height: 44px; padding: .48rem .7rem; scroll-snap-align: start; font-size: .78rem; }
    .staff-planning-list,
    .staff-planning-assignment,
    .staff-planning-tools { padding: 11px; }
    .staff-planning-group > summary { align-items: flex-start; flex-wrap: wrap; min-height: 52px; padding: .65rem .7rem; }
    .staff-planning-group-title { flex: 1 1 170px; min-width: 0; overflow-wrap: anywhere; }
    .staff-planning-group-badges { flex: 1 1 100%; justify-content: flex-start; gap: .25rem; margin-left: 0; }
    .staff-planning-badge { padding: .2rem .42rem; font-size: .66rem; }
    .staff-planning-group-content { padding: .55rem; }
    .staff-planning-group-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-planning-group-actions .btn { min-width: 0; min-height: 42px; padding-inline: .4rem; }
    .staff-planning-group .staff-planning-table-wrap { overflow: visible; }
    .staff-planning-group .staff-planning-table { width: 100%; min-width: 0; }
    .staff-planning-group .staff-planning-table thead { display: none; }
    .staff-planning-group .staff-planning-table tbody { display: grid; gap: .55rem; }
    .staff-planning-group .staff-planning-table tr {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: .4rem .6rem;
        padding: .7rem;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: color-mix(in srgb, var(--soft-panel), transparent 2%);
    }
    .staff-planning-group .staff-planning-table td {
        display: block;
        grid-column: 2;
        min-width: 0;
        padding: 0;
        border: 0;
        overflow-wrap: anywhere;
    }
    .staff-planning-group .staff-planning-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .12rem;
        color: var(--muted);
        font-size: .65rem;
        font-weight: 800;
        text-transform: uppercase;
    }
    .staff-planning-group .staff-planning-table .staff-plan-select { grid-column: 1; grid-row: 1 / span 5; }
    .staff-planning-group .staff-planning-table .staff-plan-select::before { display: none; }
    .staff-planning-group .staff-planning-table .staff-plan-date { grid-row: 1; }
    .staff-planning-group .staff-planning-table .staff-plan-area { display: none; }
    .staff-planning-group .staff-planning-table .staff-plan-check { margin-top: .15rem; }
    .workforce-absence-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workforce-absence-form > label:first-child,
    .workforce-absence-reason,
    .workforce-absence-form > .btn { grid-column: 1 / -1; }
    .workforce-absence-form > .btn { width: 100%; min-height: 46px; }
    .workforce-absence-card { padding: .75rem; }
    .workforce-absence-card-head { align-items: flex-start; }
    .workforce-absence-decision { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workforce-absence-decision .form-control { grid-column: 1 / -1; }
    .workforce-absence-decision .btn { min-width: 0; min-height: 44px; }
}

/* Chat directory and protected media attachments */
.chat-sidebar-head .btn{flex:0 0 auto;white-space:nowrap}.chat-thread-empty{display:grid;gap:5px;padding:28px 18px;text-align:center;color:var(--muted)}.chat-thread-empty strong{color:var(--ink)}
.chat-attachment-link{display:block;margin-bottom:7px}.chat-attachment-image,.chat-attachment-video{display:block;width:min(100%,520px);max-height:440px;border-radius:10px;background:#07111f;object-fit:contain}.chat-attachment-name{display:block;max-width:520px;margin:4px 0 6px;overflow:hidden;color:var(--muted);font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}
.chat-compose-bar{grid-template-columns:auto minmax(0,1fr) auto}.chat-compose-main{min-width:0}.chat-attachment-button{display:grid;place-items:center;min-width:46px!important;height:46px;padding:0;font-size:1.1rem}.chat-attachment-button input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chat-attachment-preview{display:block;margin:5px 12px 0;overflow:hidden;color:var(--muted);font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}.chat-attachment-preview[data-state="error"]{color:var(--danger)}
.chat-directory-dialog{width:min(720px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 28px));padding:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 28px 80px rgba(0,0,0,.34)}.chat-directory-dialog::backdrop{background:rgba(4,12,18,.58);backdrop-filter:blur(4px)}.chat-directory-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.chat-directory-head h2,.chat-directory-head p{margin:0}.chat-directory-head h2{font-size:1.35rem}.chat-directory-search{padding:14px 20px;border-bottom:1px solid var(--line)}.chat-directory-content{max-height:min(560px,calc(100dvh - 210px));padding:16px 20px 22px;overflow:auto}.chat-directory-content section+section{margin-top:20px}.chat-directory-content h3{display:flex;justify-content:space-between;margin:0 0 8px;color:var(--muted);font-size:.84rem;letter-spacing:.04em;text-transform:uppercase}.chat-directory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chat-directory-item{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-height:62px;padding:9px 11px;border:1px solid var(--line);border-radius:13px;background:var(--soft-panel);color:var(--ink);text-decoration:none}.chat-directory-item:hover,.chat-directory-item:focus{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--panel));color:var(--ink)}.chat-directory-item strong,.chat-directory-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-directory-item small{color:var(--muted)}.chat-directory-no-results{padding:20px;text-align:center;color:var(--muted)}
@media(max-width:767.98px){.chat-sidebar-head{align-items:flex-start}.chat-sidebar-head .btn{min-height:42px}.chat-directory-list{grid-template-columns:1fr}.chat-directory-head{align-items:flex-start}.chat-directory-head h2{font-size:1.12rem}.chat-compose-bar{grid-template-columns:auto minmax(0,1fr) auto}.chat-compose-bar>.btn-primary{min-width:68px;padding-inline:12px}.chat-bubble{max-width:94%}.chat-attachment-image,.chat-attachment-video{max-height:48dvh}}
@media(max-width:430px){.chat-sidebar-head{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:12px}.chat-sidebar-head .btn{padding-inline:10px}.chat-compose-bar{gap:6px;padding:8px}.chat-attachment-button{min-width:42px!important;width:42px}.chat-compose-bar>.btn-primary{min-width:58px;padding-inline:9px}.chat-directory-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:16px}.chat-directory-head,.chat-directory-search,.chat-directory-content{padding-inline:14px}}

.parent-action-confirmation {
    display: grid;
    gap: 2px;
    margin-bottom: 16px;
    border-left-width: 5px;
}

.parent-action-confirmation > strong,
.parent-action-confirmation > span {
    display: block;
}

.session-staff-helper-list {
    max-height: 15rem;
    overflow-y: auto;
    padding-inline-end: .5rem;
}

/* Sponsorenmodul */
.sponsor-page-head > div:first-child,
.sponsor-showcase-head > div:first-child {
    max-width: 780px;
}

.sponsor-page-head > div:first-child > p:last-child,
.sponsor-showcase-head > div:first-child > p:last-child,
.sponsor-section-head p:last-child {
    margin: 8px 0 0;
    color: var(--muted);
}

.sponsor-head-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.sponsor-club-switcher {
    display: grid;
    gap: 5px;
    min-width: min(310px, 100%);
}

.sponsor-club-switcher label {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sponsor-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

.sponsor-metrics article {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--primary) 6%), var(--panel));
    box-shadow: var(--shadow-soft);
}

.sponsor-metric-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-size: 1.05rem;
}

.sponsor-metrics article div {
    display: grid;
    min-width: 0;
}

.sponsor-metrics strong {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.1;
}

.sponsor-metrics small {
    overflow: hidden;
    color: var(--muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sponsor-module-section {
    margin: 0 0 38px;
}

.sponsor-section-head {
    align-items: end;
    margin-bottom: 14px;
}

.sponsor-section-head h2,
.sponsor-section-head .eyebrow {
    margin: 0;
}

.sponsor-admin-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.sponsor-list-panel,
.sponsor-editor {
    padding: 18px;
    border-radius: 22px;
}

.sponsor-list-panel {
    max-height: 720px;
    overflow: auto;
}

.sponsor-record-list {
    display: grid;
    gap: 9px;
}

.sponsor-record,
.sponsor-campaign-record {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: color-mix(in srgb, var(--panel) 94%, var(--primary) 6%);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sponsor-record {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 11px;
    color: inherit;
    text-decoration: none;
}

.sponsor-record:hover,
.sponsor-campaign-record:hover,
.sponsor-record.selected,
.sponsor-campaign-record.selected {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
    box-shadow: 0 12px 25px rgba(4, 25, 48, .1);
    transform: translateY(-1px);
}

.sponsor-logo-mini,
.sponsor-showcase-logo,
.dashboard-sponsor-logo,
.sponsor-feature-logo {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #fff;
    color: var(--primary);
}

.sponsor-logo-mini {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.sponsor-logo-mini img,
.sponsor-showcase-logo img,
.dashboard-sponsor-logo img,
.sponsor-feature-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sponsor-record > span:last-child,
.sponsor-campaign-record a > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.sponsor-record strong,
.sponsor-campaign-record strong {
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sponsor-record small,
.sponsor-campaign-record small {
    overflow: hidden;
    color: var(--muted);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sponsor-campaign-record {
    padding: 11px;
}

.sponsor-campaign-record > a {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 9px;
    color: inherit;
    text-decoration: none;
}

.sponsor-status-dot {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: #9aa7b5;
}

.sponsor-status-dot.status-active { background: #26b36a; box-shadow: 0 0 0 4px rgba(38,179,106,.12); }
.sponsor-status-dot.status-scheduled { background: #2d8cff; }
.sponsor-status-dot.status-ended { background: #e0902f; }

.sponsor-record-stats {
    display: flex;
    gap: 12px;
    margin: 9px 0 0 19px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .7rem;
}

.sponsor-empty,
.sponsor-showcase-empty {
    display: grid;
    place-items: center;
    padding: 38px 18px;
    color: var(--muted);
    text-align: center;
}

.sponsor-empty i,
.sponsor-showcase-empty i {
    margin-bottom: 9px;
    color: var(--primary);
    font-size: 2rem;
}

.sponsor-empty h3,
.sponsor-empty p,
.sponsor-showcase-empty h2,
.sponsor-showcase-empty p {
    margin: 4px 0;
}

.sponsor-editor {
    display: grid;
    gap: 20px;
}

.sponsor-editor-title,
.sponsor-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sponsor-editor-title h2,
.sponsor-editor-title p {
    margin: 0;
}

.sponsor-step {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 58%, #35c3fa));
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

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

.sponsor-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.sponsor-field > span {
    color: var(--ink);
    font-size: .78rem;
    font-weight: 800;
}

.sponsor-field small {
    color: var(--muted);
    font-size: .68rem;
}

.sponsor-field.field-wide,
.sponsor-switch.field-wide {
    grid-column: 1 / -1;
}

.sponsor-field .form-control,
.sponsor-field .form-select,
.sponsor-club-switcher .form-select {
    min-height: 46px;
    border-color: var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 96%, var(--primary) 4%);
}

.sponsor-field textarea.form-control {
    min-height: 104px;
    resize: vertical;
}

.sponsor-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 94%, var(--primary) 6%);
}

.sponsor-switch input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--primary);
}

.sponsor-switch span {
    display: grid;
    gap: 2px;
}

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

.sponsor-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.sponsor-feature-banner {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
    border-radius: 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 90%, #06101f), color-mix(in srgb, var(--primary) 68%, #101d35));
    color: #fff;
    box-shadow: 0 24px 54px rgba(4, 25, 48, .24);
}

.sponsor-feature-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .28;
}

.sponsor-feature-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 92px minmax(0, 760px);
    align-items: center;
    gap: 24px;
    min-height: 320px;
    padding: clamp(28px, 5vw, 64px);
    background: linear-gradient(90deg, rgba(3,14,31,.9), rgba(3,14,31,.28));
}

.sponsor-feature-logo {
    width: 92px;
    height: 92px;
    border-radius: 22px;
    font-size: 1.8rem;
}

.sponsor-feature-content h2 {
    margin: 6px 0 10px;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
}

.sponsor-feature-content p:not(.eyebrow) {
    max-width: 680px;
    color: rgba(255,255,255,.78);
}

.sponsor-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sponsor-showcase-card {
    overflow: hidden;
    padding: 0;
    border-radius: 22px;
}

.sponsor-showcase-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.sponsor-showcase-card-body {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 20px;
}

.sponsor-showcase-logo,
.dashboard-sponsor-logo {
    width: 54px;
    height: 54px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.sponsor-showcase-card-body h2,
.sponsor-showcase-card-body p {
    margin: 0;
}

.sponsor-showcase-card-body > p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.55;
}

.dashboard-sponsors {
    display: grid;
    gap: 12px;
    margin: 16px 0;
}

.dashboard-sponsor-banner {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
}

.dashboard-sponsor-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .22;
}

.dashboard-sponsor-banner > div {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 128px;
    padding: 22px;
    background: linear-gradient(90deg, rgba(2,15,32,.76), rgba(2,15,32,.2));
}

.dashboard-sponsor-banner h2,
.dashboard-sponsor-banner p,
.dashboard-sponsor-banner span {
    margin: 0;
}

.dashboard-sponsor-banner p,
.dashboard-sponsor-banner span {
    color: rgba(255,255,255,.76);
    font-size: .78rem;
}

.dashboard-sponsor-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-sponsor-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.dashboard-sponsor-card h3,
.dashboard-sponsor-card p {
    margin: 0;
}

.dashboard-sponsor-card p {
    color: var(--muted);
    font-size: .7rem;
}

@media (max-width: 1100px) {
    .sponsor-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sponsor-showcase-grid,
    .dashboard-sponsor-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sponsor-admin-layout { grid-template-columns: minmax(0, 1fr); }
    .sponsor-list-panel { max-height: 430px; }
    .sponsor-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-sponsor-banner > div,
    .dashboard-sponsor-card { grid-template-columns: 54px minmax(0, 1fr); }
    .dashboard-sponsor-banner .btn,
    .dashboard-sponsor-card .btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 600px) {
    .sponsor-head-actions,
    .sponsor-club-switcher { width: 100%; }
    .sponsor-head-actions .btn { width: 100%; }
    .sponsor-metrics,
    .sponsor-form-grid,
    .sponsor-showcase-grid,
    .dashboard-sponsor-cards { grid-template-columns: minmax(0, 1fr); }
    .sponsor-field.field-wide,
    .sponsor-switch.field-wide { grid-column: auto; }
    .sponsor-form-actions { align-items: stretch; flex-direction: column-reverse; }
    .sponsor-form-actions .btn { width: 100%; }
    .sponsor-feature-content { grid-template-columns: minmax(0, 1fr); align-content: center; }
    .sponsor-feature-logo { width: 72px; height: 72px; }
}

.profile-image-settings{align-items:start}.profile-image-card{text-align:center}.profile-image-large{display:block;width:min(260px,100%);aspect-ratio:1;object-fit:cover;border-radius:28px;margin:0 auto 1rem;border:1px solid color-mix(in srgb,var(--primary) 32%,transparent);box-shadow:0 18px 48px rgba(13,45,88,.18)}.profile-image-initials{display:grid;place-items:center;background:linear-gradient(145deg,var(--primary),var(--accent));color:#fff;font-size:4rem;font-weight:900}.profile-crop-preview{width:min(320px,100%);aspect-ratio:1;overflow:hidden;border-radius:26px;border:1px solid rgba(30,91,160,.22);margin:1.25rem 0;background:#07182b}.profile-crop-preview img{width:100%;height:100%;object-fit:cover;display:block}
.member-card-switcher{display:flex;gap:.65rem;overflow-x:auto;margin:0 0 1rem;padding:.2rem}.digital-member-card{width:min(100%,540px);margin:0 auto 2rem;border-radius:34px;overflow:hidden;color:#fff;background:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--card-accent) 48%,transparent),transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--card-primary) 85%,#041123),#06152a 72%);box-shadow:0 30px 80px rgba(5,28,62,.35);border:1px solid rgba(255,255,255,.2)}.digital-member-card>header,.digital-member-card>footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.35rem;background:rgba(0,0,0,.13)}.digital-member-card>header>div{display:flex;align-items:center;gap:.75rem}.digital-member-card>header img{width:46px;height:46px;object-fit:contain;border-radius:12px;background:#fff;padding:.25rem}.digital-member-card>header strong,.digital-member-card>header small{display:block}.member-card-status{font-size:.75rem;font-weight:900;padding:.5rem .7rem;border-radius:999px;background:rgba(255,255,255,.14)}.status-active{color:#baff6b}.status-revoked,.status-inactive,.status-expired{color:#ffb9b9}.status-suspended{color:#ffe28a}.member-card-person{display:grid;grid-template-columns:130px 1fr;gap:1.2rem;padding:1.5rem}.member-card-photo{width:130px;height:130px;object-fit:cover;border-radius:26px;border:2px solid rgba(255,255,255,.35)}.member-card-initials{display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:2.4rem;font-weight:900}.member-card-person h2{font-size:clamp(1.5rem,6vw,2.2rem);margin:.25rem 0 1rem}.member-card-person p{margin:.3rem 0;color:rgba(255,255,255,.72);font-size:.9rem}.member-card-person p strong{display:block;color:#fff}.member-card-qr-panel{text-align:center;padding:0 1.5rem 1.5rem}.member-card-qr{display:grid;place-items:center;width:min(280px,80vw);aspect-ratio:1;margin:0 auto 1rem;padding:15px;border-radius:24px;background:#fff;color:#10213c}.member-card-qr svg{width:100%;height:100%;display:block}.member-card-qr.is-offline{opacity:.35}.member-card-qr-panel strong,.member-card-qr-panel small{display:block}.member-card-qr-panel small{color:rgba(255,255,255,.66);margin-top:.2rem}.member-card-verification{width:min(680px,calc(100% - 2rem));margin:4rem auto;padding:clamp(1.5rem,5vw,3rem);text-align:center;border-radius:32px;background:#fff;box-shadow:0 22px 70px rgba(16,53,95,.14)}.verification-symbol{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 1rem;border-radius:50%;font-size:3.5rem;font-weight:900;color:#fff;background:#d33}.member-card-verification.is-valid .verification-symbol{background:#238b57}.member-card-verification dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.member-card-verification dl div,.authorized-card-details{padding:1rem;border-radius:18px;background:#f2f7fc}.member-card-verification dt{font-size:.78rem;color:#567}.member-card-verification dd{font-weight:900;margin:0}.authorized-card-details{margin-top:1.5rem;text-align:left}.authorized-card-details img{width:120px;height:120px;object-fit:cover;border-radius:18px}.verification-note{margin-top:1.5rem;color:#68798d;font-size:.85rem}@media(max-width:560px){.member-card-person{grid-template-columns:1fr;text-align:center}.member-card-photo{margin:auto}.digital-member-card>header{align-items:flex-start;flex-direction:column}.member-card-verification dl{grid-template-columns:1fr}}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

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

.submission-confirmation {
    position: fixed;
    top: 84px;
    right: 18px;
    z-index: 1200;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(440px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, #15945f 66%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, #ecfdf5 96%, var(--panel));
    color: #123d2c;
    box-shadow: 0 18px 50px rgba(5, 46, 32, .24);
    animation: submission-confirmation-in .22s ease-out both;
}

.submission-confirmation-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #15945f;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
}

.submission-confirmation-copy { display: grid; gap: 2px; }
.submission-confirmation-copy strong { font-size: .95rem; }
.submission-confirmation-copy span { font-size: .86rem; line-height: 1.35; }
.submission-confirmation-close { border: 0; background: transparent; color: inherit; font-size: 1.45rem; line-height: 1; cursor: pointer; }

@keyframes submission-confirmation-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .submission-confirmation {
        top: 70px;
        right: 12px;
        width: calc(100vw - 24px);
    }
}

.app-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--nav-bg), #061225 20%), var(--nav-bg-end));
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .20);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.mobile-tabbar {
    display: none;
}

.app-nav-inner {
    max-width: 1480px;
    min-height: 64px;
    margin-inline: auto;
    padding-inline: clamp(12px, 2vw, 22px);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 850;
    letter-spacing: 0;
    min-width: 0;
    color: var(--nav-ink) !important;
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--primary), #ffffff 18%));
    color: var(--button-ink);
    font-weight: 900;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent), transparent 74%);
}

.brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: contain;
    background: #ffffff;
    padding: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.brand-logo-preview {
    width: 82px;
    height: 82px;
    border-radius: 14px;
    object-fit: contain;
    background: #ffffff;
    padding: 8px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.brand-logo-preview.compact {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    padding: 4px;
}

.app-brand-text {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-preview {
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: var(--soft-panel);
}

.brand-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 12px;
    background: linear-gradient(90deg, var(--preview-dark), var(--preview-primary));
    color: #fff;
}

.brand-preview-header span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    color: var(--preview-dark);
    font-weight: 900;
}

.trainer-note-box {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: var(--soft-panel);
}

.trainer-note-box strong {
    display: block;
    margin-bottom: 6px;
}

.trainer-note-box p {
    margin: 0;
    white-space: pre-wrap;
}

.dashboard-category {
    margin: 22px 0 10px;
    font-size: .92rem;
    color: var(--muted);
    font-weight: 760;
    text-transform: uppercase;
}

.dashboard-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dashboard-tile-sortable {
    position: relative;
}

.dashboard-tile-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    margin-bottom: .75rem;
}

.dashboard-tile-toolbar small { color: var(--muted); }
.dashboard-tile-toolbar [aria-pressed="true"] { color: #fff !important; background: var(--primary) !important; }

@media (hover: hover) and (pointer: fine) {
    .dashboard-tile-sortable .dashboard-tile {
        cursor: grab;
    }
}

.dashboard-tile {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 152px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent), transparent 82%) 0, transparent 34%),
        linear-gradient(180deg, var(--strong-panel), var(--soft-panel));
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 20px 44px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .10);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.dashboard-tile-sortable.is-sorting .dashboard-tile {
    cursor: grab;
    touch-action: none;
    outline: 2px dashed color-mix(in srgb, var(--primary), transparent 28%);
    outline-offset: -7px;
}

.dashboard-tile-sortable.is-sorting .dashboard-tile::after {
    content: "Ziehen";
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary), transparent 30%);
    background: color-mix(in srgb, var(--panel), transparent 4%);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.dashboard-tile-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: none;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--danger), transparent 18%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger), #000000 6%);
    color: #fff;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--danger), transparent 72%);
}

.dashboard-tile-sortable.is-sorting .dashboard-tile-remove {
    display: inline-flex;
}

.dashboard-tile-sortable.is-sorting .dashboard-tile:has(.dashboard-tile-remove)::after {
    right: 52px;
}

.dashboard-tile-sortable .dashboard-tile.is-dragging {
    cursor: grabbing;
    opacity: .64;
    transform: scale(.98);
}

.staff-chip-absent {
    border-color: color-mix(in srgb, var(--danger), transparent 35%);
    background: color-mix(in srgb, var(--danger), transparent 86%);
    color: var(--danger);
    text-decoration: line-through;
}

.staff-chip-substitute {
    border-color: color-mix(in srgb, var(--warning), transparent 35%);
    background: color-mix(in srgb, var(--warning), transparent 86%);
}

.dashboard-tile-wide {
    grid-column: 1 / -1;
}

.dashboard-tile-panel {
    min-height: 0;
}

.dashboard-tile-panel .section-head {
    margin-bottom: .75rem;
}

.dashboard-tile-panel .event-card,
.dashboard-tile-panel .dashboard-news-card {
    background: color-mix(in srgb, var(--panel), transparent 10%);
}

.dashboard-tile:hover,
.dashboard-tile:focus {
    border-color: var(--primary);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--primary), transparent 86%);
    outline: none;
}

.dashboard-tile-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .44), transparent 34%),
        linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--primary), #ffffff 16%));
    color: var(--button-ink);
    font-weight: 900;
    box-shadow: 0 16px 30px color-mix(in srgb, var(--accent), transparent 72%), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.dashboard-tile-icon .bi {
    font-size: 1.45rem;
    line-height: 1;
}

.dashboard-tile strong {
    font-size: 1.05rem;
}

.dashboard-tile small {
    color: var(--muted);
    line-height: 1.35;
}

.dashboard-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary), transparent 82%), transparent 58%),
        var(--panel);
    box-shadow: 0 18px 42px var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dashboard-hero h1 {
    margin: 0;
}

.dashboard-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.dashboard-hero-meta span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    background: var(--soft-panel);
    color: var(--muted);
    font-weight: 700;
}

.dashboard-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.dashboard-news-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 18px;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent), transparent 84%) 0, transparent 32%),
        var(--soft-panel);
}

.dashboard-news-empty h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.dashboard-news-empty p {
    margin: 0 0 12px;
    color: var(--muted);
}

.dashboard-news-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    min-height: 132px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--news-color, var(--primary)), transparent 78%) 0, transparent 34%),
        linear-gradient(180deg, var(--strong-panel), var(--soft-panel));
    box-shadow: 0 18px 44px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .10);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.dashboard-news-card.news-info {
    --news-color: var(--primary);
}

.dashboard-news-card.news-important {
    --news-color: var(--accent);
}

.dashboard-news-card.news-warning {
    --news-color: #f59e0b;
}

.dashboard-news-card.news-competition {
    --news-color: #38bdf8;
}

.dashboard-news-card.news-course {
    --news-color: #a78bfa;
}

.dashboard-news-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--news-color), rgba(255, 255, 255, .35) 54%);
    border-radius: 14px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .38), transparent 34%),
        color-mix(in srgb, var(--news-color), transparent 22%);
    color: var(--button-ink);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--news-color), transparent 76%);
}

.dashboard-news-icon .bi {
    font-size: 1.22rem;
}

.dashboard-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.dashboard-news-meta span {
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--news-color, var(--primary)), rgba(255, 255, 255, .22) 58%);
    border-radius: 999px;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--news-color, var(--primary)), transparent 84%);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 720;
}

.dashboard-news-card h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.dashboard-news-card p {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.45;
    white-space: pre-wrap;
}

.dashboard-feedback-form {
    display: grid;
    grid-template-columns: minmax(150px, .55fr) minmax(220px, 1fr);
    gap: 12px;
}

.dashboard-feedback-message,
.dashboard-feedback-actions {
    grid-column: 1 / -1;
}

.dashboard-feedback textarea {
    resize: vertical;
}

.dashboard-feedback-actions {
    display: flex;
    justify-content: flex-end;
}

.feedback-list {
    display: grid;
    gap: 10px;
}

.feedback-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: var(--soft-panel);
}

.feedback-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.feedback-item-head strong,
.feedback-item-head span {
    display: block;
}

.feedback-item-head span {
    color: var(--muted);
    font-size: .88rem;
}

.feedback-item p {
    margin: 0;
    color: var(--ink);
    white-space: pre-wrap;
}

.navbar-nav {
    gap: 4px;
}

.app-nav-menu {
    flex: 1 1 auto;
    min-width: 0;
}

.app-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border-radius: 999px;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
    color: rgba(255, 255, 255, .78) !important;
    font-weight: 720;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.app-nav-link:hover,
.app-nav-link:focus {
    background: var(--nav-soft);
    color: var(--nav-ink) !important;
}

.app-nav-link .bi {
    font-size: 1rem;
    line-height: 1;
    color: color-mix(in srgb, var(--accent), #ffffff 26%);
}

.mobile-tabbar-icon,
.app-nav-icon-badge-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-unread-badge {
    position: absolute;
    top: -9px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid color-mix(in srgb, var(--nav-bg), #ffffff 10%);
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    box-shadow: 0 8px 18px rgba(229, 57, 53, .38);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.nav-unread-badge.mobile {
    top: -8px;
    right: -11px;
}

.app-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    padding: 7px 11px;
    background: rgba(255, 255, 255, .10);
    color: var(--nav-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.app-menu-button:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .18);
}

.app-menu-button .navbar-toggler-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.app-menu-label {
    font-size: .9rem;
    font-weight: 760;
}

.app-dropdown {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    background: var(--dropdown-bg);
    color: var(--dropdown-ink);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-dropdown .dropdown-item {
    border-radius: 6px;
    color: var(--dropdown-ink);
    padding: 8px 10px;
}

.app-dropdown .dropdown-item:hover,
.app-dropdown .dropdown-item:focus {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-ink);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    margin-left: auto;
    flex: 0 0 auto;
}

.header-user {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, .82) !important;
}

.header-settings-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.header-settings-icon {
    font-size: 1rem;
    line-height: 1;
}

.header-logout {
    border-radius: 999px;
}

.app-shell {
    max-width: 1480px;
    min-width: 0;
    padding: clamp(14px, 2vw, 26px);
}

.app-back-row {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: 10px;
}

.app-back-navigation {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-dark) 10%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.app-back-navigation:hover,
.app-back-navigation:focus-visible {
    border-color: var(--accent);
    color: var(--primary);
    transform: translateY(-1px);
}

.department-switcher {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 180px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.department-switcher .form-select {
    min-width: 145px;
    border: 0;
    padding-top: .28rem;
    padding-bottom: .28rem;
    color: #fff;
    background-color: transparent;
    box-shadow: none;
}

.header-context-label {
    color: rgba(255, 255, 255, .72);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.department-switcher .form-select option {
    color: var(--ink);
    background: var(--surface);
}

.hero {
    min-height: 54vh;
    display: flex;
    align-items: end;
    background:
        linear-gradient(90deg, rgba(244,247,249,.96), rgba(244,247,249,.70)),
        url("https://images.unsplash.com/photo-1530549387789-4c1017266635?auto=format&fit=crop&w=1600&q=80") center/cover;
    border-bottom: 1px solid var(--line);
    padding: clamp(24px, 5vw, 72px);
}

.hero-copy {
    max-width: 760px;
}

h1 {
    font-size: clamp(2rem, 4vw, 4.4rem);
    font-weight: 850;
    letter-spacing: 0;
    line-height: .98;
}

h2 {
    font-size: 1.1rem;
    font-weight: 760;
}

.eyebrow {
    color: var(--primary);
    font-weight: 760;
    text-transform: uppercase;
    font-size: .78rem;
    margin-bottom: .35rem;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: clamp(16px, 2.4vw, 26px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent), transparent 72%) 0, transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--primary), transparent 66%), transparent 62%),
        var(--panel);
    box-shadow: 0 24px 58px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.page-head > *,
.section-head > *,
.surface,
.card,
.item-card,
.event-card,
.metric,
.modal-content,
.app-modal {
    min-width: 0;
}

.page-head .d-flex,
.section-head .d-flex {
    min-width: 0;
}

.surface,
.auth-panel,
.item-card,
.event-card,
.metric,
.card,
.modal-content,
.app-modal,
.calendar-day,
.calendar-event,
.recurrence-box,
.profile-settings,
.registration-child,
.theme-settings,
.parent-link,
.child-login-form,
.detail-grid div,
.exam-card,
.chat-message,
.chat-summary-item,
.chat-dashboard-link {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 22px 50px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .10);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.card {
    --bs-card-bg: transparent;
    --bs-card-border-color: var(--line);
    --bs-card-color: var(--ink);
    color: var(--ink);
}

.card-header,
.card-footer {
    border-color: var(--line);
    background: color-mix(in srgb, var(--strong-panel), transparent 10%);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--ink);
    --bs-list-group-border-color: var(--line);
}

.list-group-item {
    background: color-mix(in srgb, var(--panel), transparent 8%);
    color: var(--ink);
    border-color: var(--line);
}

.surface,
.item-card,
.event-card,
.metric {
    padding: clamp(16px, 1.8vw, 24px);
}

.auth-panel {
    max-width: 520px;
    margin: 7vh auto;
    padding: 24px;
}

.auth-panel-wide.public-interest-page {
    width: min(720px, calc(100% - 24px));
    max-width: 720px;
    overflow: hidden;
}

.public-interest-page h1 {
    max-width: 100%;
    margin-bottom: .8rem;
    font-size: clamp(2.15rem, 5vw, 3.65rem);
    overflow-wrap: anywhere;
    word-break: normal;
}

.public-interest-page form,
.public-interest-page form > *,
.public-interest-page .form-control {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .auth-panel-wide.public-interest-page {
        width: calc(100% - 20px);
        margin-block: 20px;
    }

    .public-interest-page h1 {
        font-size: clamp(2rem, 12vw, 2.75rem);
    }
}

.metric span,
.event-card span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
}

.metric strong {
    display: block;
    margin-top: 5px;
    font-size: clamp(1.15rem, 2vw, 1.8rem);
}

.section-head {
    align-items: center;
    gap: 12px;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 14px;
}

.event-filter-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.event-filter-compact .form-select,
.event-filter-compact .btn {
    min-height: 44px;
    border-radius: 14px;
}

.event-toolbar-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.event-toolbar-compact .btn {
    border-radius: 999px;
}

.event-timeline-shell {
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: clamp(14px, 2vw, 22px);
    background:
        radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--accent), transparent 76%), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel), transparent 4%), color-mix(in srgb, var(--strong-panel), transparent 8%));
    box-shadow: 0 22px 50px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.event-timeline-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.event-timeline-head h2 {
    margin: 0;
    font-size: clamp(1.18rem, 2vw, 1.65rem);
}

.event-count-pill,
.event-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent), transparent 48%);
    border-radius: 999px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--accent), transparent 82%);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.event-timeline {
    display: grid;
    gap: 16px;
}

.event-day-group {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.event-day-label {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--line), transparent 16%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--strong-panel), transparent 8%);
    text-align: center;
}

.event-day-label strong {
    font-size: 1.05rem;
}

.event-day-label span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.event-day-list {
    display: grid;
    gap: 10px;
}

.event-slim-card {
    position: relative;
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--line), transparent 10%);
    border-radius: 20px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--panel), #ffffff 5%), color-mix(in srgb, var(--strong-panel), transparent 8%));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--shadow), transparent 16%), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.event-slim-card.webclub {
    border-color: color-mix(in srgb, #ffd166, transparent 45%);
}

.event-slim-card.cancelled {
    opacity: .72;
}

.event-slim-check {
    position: absolute;
    top: 12px;
    right: 12px;
}

.event-timeline-summary,
.event-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.event-bulk-actions {
    position: sticky;
    top: 76px;
    z-index: 20;
    justify-content: flex-start;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--club-primary) 28%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1);
    backdrop-filter: blur(12px);
}

.bulk-event-editor {
    display: grid;
    gap: 16px;
}

.bulk-event-row {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
}

.bulk-event-row legend {
    display: flex;
    align-items: baseline;
    gap: 10px;
    float: none;
    width: auto;
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 800;
}

.bulk-event-row legend small {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
}

.event-time-stack {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 2px;
    min-height: 62px;
    padding: 10px 6px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent), transparent 82%);
    color: var(--ink);
}

.event-time-stack strong {
    font-size: 1.05rem;
    line-height: 1;
}

.event-time-stack span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
}

.event-slim-main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.event-slim-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.event-slim-title-row h3 {
    margin: 0 0 5px;
    font-size: 1rem;
    font-weight: 900;
}

.event-slim-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 760;
}

.event-slim-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.event-slim-description,
.event-description {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    white-space: pre-line;
}

.event-slim-description {
    font-size: .9rem;
}

.event-slim-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.event-response-stack {
    display: grid;
    gap: 7px;
}

.event-slim-response {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
    border-radius: 15px;
    background: color-mix(in srgb, var(--strong-panel), transparent 20%);
}

.event-response-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 850;
}

.event-response-buttons {
    display: inline-flex;
    gap: 5px;
}

.event-response-btn {
    border: 1px solid currentColor;
    border-radius: 999px;
    min-width: 38px;
    min-height: 30px;
    padding: 0 9px;
    background: transparent;
    font-weight: 900;
    font-size: .78rem;
}

.event-response-btn.yes {
    color: #23a55a;
}

.event-response-btn.no {
    color: #ff4d5e;
}

.event-response-btn.clear {
    color: var(--muted);
}

.event-response-btn.maybe {
    color: #ffcc00;
}

.event-response-btn.yes.active {
    background: #23a55a;
    color: #fff;
    box-shadow: 0 10px 22px rgba(35, 165, 90, .26);
}

.event-response-btn.no.active {
    background: #ff4d5e;
    color: #fff;
    box-shadow: 0 10px 22px rgba(255, 77, 94, .24);
}

.event-response-btn.clear.active {
    background: color-mix(in srgb, var(--muted), transparent 78%);
    color: var(--ink);
}

.event-response-btn.maybe.active {
    background: #ffcc00;
    color: #10202a;
    box-shadow: 0 10px 22px rgba(255, 204, 0, .22);
}

.event-slim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.event-slim-actions .btn {
    border-radius: 999px;
}

.event-empty-state {
    display: grid;
    gap: 4px;
    padding: 24px;
    border: 1px dashed color-mix(in srgb, var(--line), transparent 12%);
    border-radius: 18px;
    text-align: center;
    color: var(--muted);
}

.event-empty-state strong {
    color: var(--ink);
}

.competition-org-panel {
    border-radius: 22px;
}

.competition-org-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.competition-org-column {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.competition-org-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.competition-org-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
}

.competition-org-title span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

.competition-org-form {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--strong-panel), transparent 18%);
}

.competition-org-form .btn,
.competition-org-form .form-control,
.competition-org-form .form-select {
    border-radius: 12px;
}

.competition-org-list {
    display: grid;
    gap: 8px;
}

.competition-org-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--line), transparent 16%);
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--panel), #ffffff 4%), color-mix(in srgb, var(--strong-panel), transparent 10%));
}

.competition-org-card strong,
.competition-org-card span,
.competition-org-card small {
    display: block;
}

.competition-org-card strong {
    font-weight: 900;
}

.competition-org-card span,
.competition-org-card small {
    color: var(--muted);
}

.competition-org-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.competition-org-actions form {
    margin: 0;
}

.competition-org-actions .btn {
    border-radius: 999px;
}

.recurrence-box {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--strong-panel), color-mix(in srgb, var(--panel), transparent 12%));
    padding: 14px;
}

.calendar-board {
    display: grid;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.calendar-month {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
}

.calendar-day {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 12px;
    background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--soft-panel), transparent 8%));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}

.calendar-month .calendar-day {
    grid-template-columns: 1fr;
    min-height: 150px;
    align-content: start;
    min-width: 0;
    overflow: hidden;
    scroll-snap-align: start;
}

.calendar-day.is-empty {
    background: color-mix(in srgb, var(--soft-panel), transparent 16%);
}

.calendar-date span,
.calendar-event span {
    display: block;
    color: var(--muted);
}

.calendar-events {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.calendar-event {
    display: block;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--line);
    border-left: 5px solid var(--primary);
    border-radius: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 12%));
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.calendar-date,
.calendar-event strong,
.calendar-event span {
    min-width: 0;
}

.calendar-event strong,
.calendar-event span:not(.status-pill) {
    display: -webkit-box;
    line-height: 1.25;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.calendar-event strong {
    -webkit-line-clamp: 2;
}

.calendar-event span:not(.status-pill) {
    -webkit-line-clamp: 2;
}

.calendar-event .calendar-event-description {
    margin-top: 5px;
    color: var(--muted);
}

.calendar-event .status-pill {
    display: inline-flex;
    max-width: 100%;
    white-space: normal;
}

.event-row-webclub {
    --bs-table-bg: color-mix(in srgb, #f2b84b 7%, transparent);
    --bs-table-hover-bg: color-mix(in srgb, #f2b84b 12%, transparent);
    box-shadow: inset 4px 0 0 rgba(242, 184, 75, .7);
}

.calendar-event-webclub {
    border-left-color: #f2b84b;
    background:
        linear-gradient(135deg, rgba(242, 184, 75, .13), transparent 58%),
        linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 10%));
}

.calendar-event-webclub strong::before {
    content: "WK ";
    color: #d89212;
    font-weight: 900;
}

.attendance-check {
    width: 1.35rem;
    height: 1.35rem;
}

.event-select-col {
    width: 48px;
    text-align: center;
}

.event-select-check {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.event-mobile-title {
    display: none;
}

.event-card {
    display: grid;
    gap: 14px;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.quick-actions span {
    grid-column: 1 / -1;
}

.quick-actions.has-response .btn:not(.active),
.event-slim-response.has-response .event-response-btn:not(.active) {
    opacity: .42;
    filter: grayscale(.85);
    background: color-mix(in srgb, var(--panel), #8a94a6 12%) !important;
    border-color: color-mix(in srgb, var(--line), #8a94a6 38%) !important;
    color: color-mix(in srgb, var(--muted), #6b7280 28%) !important;
    box-shadow: none !important;
}

.quick-actions.has-response .btn:not(.active):hover,
.quick-actions.has-response .btn:not(.active):focus,
.event-slim-response.has-response .event-response-btn:not(.active):hover,
.event-slim-response.has-response .event-response-btn:not(.active):focus {
    opacity: .72;
    filter: grayscale(.45);
}

.quick-actions.has-response .btn.active,
.event-slim-response.has-response .event-response-btn.active {
    opacity: 1;
    filter: none;
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap: 10px;
    margin-bottom: 12px;
}

.calendar-filter {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, auto) minmax(130px, auto) auto;
}

.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--muted);
    font-weight: 700;
}

.user-role-form {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}

.multi-role-form {
    grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr) auto auto;
    align-items: end;
}

.settings-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.yolawo-offer-filter {
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, .8fr) minmax(180px, auto) auto;
    align-items: end;
}

@media (max-width: 760px) {
    .yolawo-offer-filter {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.people-directory-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.people-filter-label,
.people-directory-toolbar label > span:first-child {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.people-directory {
    display: grid;
    gap: 16px;
}

.people-directory-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) minmax(180px, .8fr) minmax(190px, .8fr) auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--soft-panel) 86%, transparent);
}

.people-directory-toolbar label {
    min-width: 0;
}

.people-control-with-icon {
    position: relative;
    display: block;
}

.people-control-with-icon i {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.people-control-with-icon .form-control {
    padding-left: 38px;
}

.people-reset-filter {
    min-height: 42px;
    white-space: nowrap;
}

.people-directory-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
}

.people-directory-meta strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.role-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px 10px;
}

.role-check-grid .form-check {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px 8px 34px;
    background: var(--soft-panel);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.people-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}

.person-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 180px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 8%));
    color: var(--ink);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.person-card:hover,
.person-card:focus {
    border-color: var(--primary);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--primary), transparent 86%);
    transform: translateY(-2px);
    outline: none;
}

.person-card-heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: var(--ink) !important;
}

.person-card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--primary) 15%, var(--soft-panel));
    color: var(--primary) !important;
    font-size: .82rem;
    font-weight: 900;
}

.person-card-identity {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: var(--ink) !important;
}

.person-card-name {
    font-size: 1.05rem;
    line-height: 1.25;
}

.person-card-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-card small,
.person-card span:not(.person-card-status):not(.status-pill) {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.person-card-status {
    align-self: start;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: .72rem;
    font-weight: 700;
}

.person-card-status.active {
    background: rgba(47, 158, 106, .16);
    color: color-mix(in srgb, #ffffff, #2fdf8f 36%);
}

.person-card-status.inactive {
    background: rgba(148, 163, 184, .22);
    color: var(--muted);
}

.app-modal {
    background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--soft-panel), transparent 8%));
    color: var(--ink);
    border: 1px solid var(--line);
}

.app-modal .modal-header,
.app-modal .modal-footer {
    border-color: var(--line);
}

.app-modal .multi-role-form {
    display: block;
}

.app-modal .role-check-grid {
    margin-top: 8px;
}

.person-role-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.person-role-tag {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--ink) !important;
    font-size: .75rem;
    font-weight: 750;
}

.person-card-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--muted) !important;
}

.person-card-detail i {
    flex: 0 0 auto;
    color: var(--primary);
}

.mobile-collapsible-list { display:none; }

.training-group-accordion { display:grid; gap:10px; }
.training-group-item { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--brand-surface,var(--panel)); box-shadow:var(--shadow-soft); }
.training-group-item>summary { display:grid; grid-template-columns:150px minmax(0,1fr) auto 24px; gap:14px; align-items:center; min-height:76px; padding:14px 18px; color:var(--ink); cursor:pointer; list-style:none; }
.training-group-item>summary::-webkit-details-marker { display:none; }
.training-group-item>summary::after { content:"›"; color:var(--primary); font-size:1.6rem; font-weight:900; transition:transform .16s ease; }
.training-group-item[open]>summary::after { transform:rotate(90deg); }
.training-group-time,.training-group-name { display:grid; gap:2px; min-width:0; }
.training-group-time small,.training-group-name small { color:var(--muted); overflow-wrap:anywhere; }
.training-group-content { padding:16px 18px 18px; border-top:1px solid var(--line); }
.training-group-content dl { display:grid; grid-template-columns:120px 1fr; gap:5px 12px; margin:1rem 0; }
.training-group-content dt { color:var(--muted); }.training-group-content dd { margin:0; }
.training-group-schedule { display:flex; flex-wrap:wrap; gap:7px; }
.training-group-schedule span { padding:6px 10px; border-radius:999px; background:color-mix(in srgb,var(--primary) 9%,transparent); }
.training-group-actions { display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width:700px) {
    .training-group-item>summary { grid-template-columns:92px minmax(0,1fr) 20px; min-height:64px; padding:10px 12px; gap:9px; }
    .training-group-item>summary>.badge { display:none; }
    .training-group-content { padding:12px; }
    .training-group-content dl { grid-template-columns:90px 1fr; }
    .training-group-actions .btn { flex:1 1 120px; }
}

.people-empty-state {
    justify-items: center;
    gap: 8px;
    padding: 38px 20px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    color: var(--muted);
    text-align: center;
}

.people-empty-state:not([hidden]) {
    display: grid;
}

.people-empty-state i {
    color: var(--primary);
    font-size: 2rem;
}

.people-empty-state strong {
    color: var(--ink);
    font-size: 1.05rem;
}

@media (max-width: 1050px) {
    .people-directory-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .people-reset-filter {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .people-directory-nav,
    .people-directory-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .people-directory-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .people-card-grid { grid-template-columns:1fr; gap:8px; }
    .person-card { min-height:0; padding:12px 14px; }
    .person-card .person-card-identity small,
    .person-card > .person-card-detail,
    .person-card > .person-role-tags,
    .person-card > .status-pill { display:none; }
    .person-card-heading { grid-template-columns:38px minmax(0,1fr) auto; }
    .person-card-avatar { width:38px; height:38px; }
    .person-card-status { font-size:0; width:10px; height:10px; padding:0; align-self:center; }

    .mobile-collapsible-source { display:none; }
    .mobile-collapsible-list { display:grid; gap:8px; }
    .mobile-collapsible-item { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--soft-panel); }
    .mobile-collapsible-item summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:58px; padding:10px 13px; color:var(--ink); cursor:pointer; list-style:none; }
    .mobile-collapsible-item summary::-webkit-details-marker { display:none; }
    .mobile-collapsible-item summary::after { content:"›"; color:var(--primary); font-size:1.45rem; font-weight:900; transition:transform .16s ease; }
    .mobile-collapsible-item[open] summary::after { transform:rotate(90deg); }
    .mobile-collapsible-content { display:grid; gap:0; padding:0 13px 13px; border-top:1px solid var(--line); }
    .mobile-collapsible-content > div:not(.mobile-collapsible-actions) { display:grid; gap:2px; padding:9px 0; border-bottom:1px solid var(--line); }
    .mobile-collapsible-content span,
    .mobile-collapsible-content small { color:var(--muted); }
    .mobile-collapsible-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; }
    .mobile-collapsible-actions .btn { flex:1 1 130px; }
}

/* Trainingsplanung & Trainingssteuerung */
.training-control-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #008b98) 14%, var(--card-bg, #fff)), var(--card-bg, #fff)); }
.training-control-filter { display: grid; grid-template-columns: minmax(150px, 260px); gap: .35rem; margin-bottom: 1rem; }
.training-control-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.training-control-kpis article { padding: 1rem; border-radius: 1rem; background: var(--card-bg, #fff); border: 1px solid var(--border-color, rgba(15,43,69,.15)); box-shadow: var(--shadow-soft, 0 10px 24px rgba(15,43,69,.08)); display: grid; gap: .3rem; }
.training-control-kpis span { color: var(--text-muted, #64748b); font-size: .85rem; }
.training-control-kpis strong { font-size: 1.45rem; }
.training-control-event-grid, .training-control-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
.training-control-event-card { border: 1px solid var(--border-color, rgba(15,43,69,.15)); border-radius: 1rem; padding: 1rem; display: grid; align-content: space-between; gap: 1rem; background: var(--surface-soft, rgba(255,255,255,.55)); }
.training-control-event-card h3 { margin: .65rem 0 .25rem; }
.training-control-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
.training-control-row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border-color, rgba(15,43,69,.15)); }
.training-control-row span { color: var(--text-muted, #64748b); text-align: right; }
.training-source-list { display: grid; gap: .75rem; margin: 0; padding-left: 1.25rem; }
.training-source-list li { padding: .75rem; border: 1px solid var(--border-color, rgba(15,43,69,.15)); border-radius: .8rem; }
.training-source-list li strong,.training-source-list li span,.training-source-list li a { display: block; }
.training-source-list li span { margin-top: .2rem; color: var(--text-muted, #64748b); font-size: .85rem; }
.training-source-list li a { margin-top: .4rem; font-weight: 800; }
.training-knowledge-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,1fr); gap: 1rem; align-items: start; }
.training-knowledge-grid > div,.training-knowledge-grid > form { min-width: 0; padding: 1rem; border: 1px solid var(--border-color, rgba(15,43,69,.15)); border-radius: 1rem; }
.training-knowledge-grid h3 { margin-top: 0; }
.training-performance-list { display: grid; gap: .65rem; }
.training-performance-athlete { overflow: hidden; border: 1px solid var(--border-color, rgba(15,43,69,.15)); border-radius: .9rem; }
.training-performance-athlete > summary { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.training-performance-athlete > summary::-webkit-details-marker { display: none; }
.training-performance-athlete > summary::after { content: "›"; color: var(--primary-color, #008b98); font-size: 1.4rem; font-weight: 900; }
.training-performance-athlete[open] > summary::after { transform: rotate(90deg); }
.training-performance-athlete > summary span { margin-left: auto; color: var(--text-muted, #64748b); }
.training-performance-athlete .table-responsive { border-top: 1px solid var(--border-color, rgba(15,43,69,.15)); }
.training-performance-athlete .table { margin: 0; color: inherit; }
.training-control-block { border: 1px solid var(--border-color, rgba(15,43,69,.15)); border-radius: 1rem; padding: 1rem; margin-top: .8rem; }
.training-control-block > header { display: flex; justify-content: space-between; gap: 1rem; }
.training-control-exercise { display: grid; gap: .2rem; padding: .7rem; margin-top: .55rem; border-radius: .75rem; background: var(--surface-soft, rgba(255,255,255,.55)); }
.training-control-exercise span, .training-control-exercise small { color: var(--text-muted, #64748b); }
.training-control-choice-icon { font-size: 2rem; color: var(--primary-color, #008b98); }
.training-control-editor-block { min-width: 0; padding: 1.15rem; margin: 0; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel) 95%, var(--primary) 5%); }
.training-control-editor-block legend { float: none; width: auto; margin: 0 0 .8rem; padding: 0 .45rem; color: var(--ink); font-size: 1rem; font-weight: 900; }

/* Gemeinsamer BLUCA-Formularstandard. Neue Editoren sollen diese Klassen
   verwenden, damit keine ungestalteten Browserfelder mehr entstehen. */
.bluca-form {
    display: grid;
    min-width: 0;
    gap: 1rem;
    margin-top: 1rem;
}

.bluca-form-grid {
    display: grid;
    min-width: 0;
    gap: .85rem;
}

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

.bluca-field {
    display: grid;
    min-width: 0;
    gap: .4rem;
    margin: 0;
}

.bluca-form label:not(.form-check):not(.btn) {
    display: grid;
    min-width: 0;
    gap: .4rem;
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 850;
    line-height: 1.35;
}

.bluca-field > span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 850;
    line-height: 1.35;
}

.bluca-field > .form-control,
.bluca-field > .form-select,
.bluca-form :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: var(--control-bg, var(--panel));
    font: inherit;
    font-size: .92rem;
}

.bluca-field > textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.bluca-form textarea {
    min-height: 96px;
    resize: vertical;
}

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

.training-plan-edit-section {
    overflow: hidden;
}

.training-plan-editor-form {
    gap: 1.2rem;
}

.training-editor-block-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) minmax(130px, .45fr);
    gap: .85rem;
}

.training-editor-exercises {
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.training-editor-exercises h3 {
    margin: 0;
    color: var(--ink);
    font-size: .94rem;
}

.training-editor-exercise {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.training-editor-exercise-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    font-size: .8rem;
}

.training-editor-exercise-grid {
    display: grid;
    grid-template-columns: minmax(150px, .85fr) minmax(240px, 1.5fr) minmax(120px, .65fr) minmax(120px, .65fr);
    gap: .75rem;
}

.training-editor-learning-note {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 9%, var(--panel));
}

.training-editor-learning-note .form-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
}

@media (max-width: 1050px) {
    .training-editor-block-grid,
    .training-editor-exercise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .bluca-form-grid-two,
    .bluca-form-grid-three,
    .training-editor-block-grid,
    .training-editor-exercise-grid {
        grid-template-columns: 1fr;
    }

    .training-control-editor-block {
        padding: .85rem;
    }

    .training-editor-exercise {
        grid-template-columns: 1fr;
        padding: .75rem;
    }

    .bluca-form-actions .btn {
        flex: 1 1 145px;
        min-height: 46px;
    }
}
.training-control-athlete-list { display: grid; gap: 1rem; }
.training-season-card { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border-color, rgba(15,43,69,.15)); border-radius: 1rem; }
.training-season-card > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.training-season-card > header div { display: grid; gap: .2rem; }
.training-season-card > header span { color: var(--text-muted, #64748b); }
.training-season-phases, .training-week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .65rem; margin: 1rem 0; }
.training-season-phases > div, .training-week-grid > div { display: grid; gap: .2rem; padding: .75rem; border-radius: .75rem; background: var(--surface-soft, rgba(255,255,255,.55)); }
.training-season-phases span, .training-season-phases small, .training-week-grid span, .training-week-grid small { color: var(--text-muted, #64748b); }
@media (max-width: 850px) {
    .training-control-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .training-control-columns { grid-template-columns: 1fr; }
    .training-knowledge-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .training-control-kpis { grid-template-columns: 1fr; }
    .training-control-row { display: grid; }
    .training-control-row span { text-align: left; }
    .training-performance-athlete > summary { display: grid; gap: .2rem; }
    .training-performance-athlete > summary span { margin-left: 0; }
}

.person-editor-dialog {
    max-width: min(1180px, calc(100vw - 48px));
}

.person-editor-modal {
    overflow: hidden;
}

.person-editor-header {
    align-items: flex-start;
    padding: 22px 26px 18px;
}

.person-editor-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.person-editor-title-row .modal-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.person-editor-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.person-editor-status.active {
    color: #8ef0ba;
    background: rgba(47, 158, 106, .18);
    border: 1px solid rgba(47, 223, 143, .3);
}

.person-editor-status.inactive {
    color: var(--muted);
    background: rgba(148, 163, 184, .12);
    border: 1px solid var(--line);
}

.person-editor-body {
    display: grid;
    gap: 18px;
    padding: 22px 26px 26px;
}

.person-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr) minmax(0, 1.2fr);
    gap: 12px;
}

.person-summary-item {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft-panel), transparent 12%);
}

.person-summary-item span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.person-summary-item strong {
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#personAccessForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    width: 100%;
}

.access-editor-section {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--soft-panel), transparent 4%), color-mix(in srgb, var(--panel), transparent 8%));
}

.access-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 17px;
}

.access-section-heading h3 {
    margin: 0;
    font-size: 1.15rem;
}

.access-section-heading > p {
    max-width: 470px;
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.5;
}

.access-role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.access-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--panel), transparent 5%);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.access-option:hover {
    border-color: color-mix(in srgb, var(--primary), transparent 42%);
}

.access-option:has(.form-check-input:checked) {
    border-color: color-mix(in srgb, var(--primary), transparent 16%);
    background: color-mix(in srgb, var(--primary), transparent 88%);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary), transparent 90%);
}

.access-option .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 2px 0 0;
}

.access-option .form-check-label {
    display: grid;
    gap: 3px;
    min-width: 0;
    width: 100%;
    cursor: pointer;
}

.access-option .form-check-label strong {
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
}

.access-option .form-check-label small {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: normal;
}

.permission-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

.permission-group {
    min-width: 0;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel), transparent 10%);
}

.permission-group legend {
    float: none;
    width: auto;
    margin: 0 0 11px;
    padding: 0;
    color: var(--accent);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.permission-option-list {
    display: grid;
    gap: 8px;
}

.permission-option {
    padding: 11px 12px;
    background: color-mix(in srgb, var(--soft-panel), transparent 20%);
}

.account-status-section {
    padding-block: 18px;
}

.account-status-section .access-section-heading {
    margin-bottom: 12px;
}

.access-status-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 0;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--panel), transparent 4%);
}

.access-status-switch .form-check-input {
    width: 2.4rem;
    height: 1.3rem;
    margin: 2px 0 0;
}

.access-status-switch .form-check-label {
    display: grid;
    gap: 3px;
    cursor: pointer;
}

.access-status-switch .form-check-label strong {
    color: var(--ink);
    font-size: .92rem;
}

.access-status-switch .form-check-label small {
    color: var(--muted);
    line-height: 1.4;
}

.person-save-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--primary), transparent 64%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary), transparent 92%);
}

.person-save-bar p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
}

.person-save-bar .btn {
    flex: 0 0 auto;
    min-width: 190px;
}

.person-editor-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    padding: 16px 26px 20px;
}

.person-status-actions,
.person-danger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.person-danger-actions {
    justify-content: flex-end;
}

.person-deleted-at {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .78rem;
}

@media (max-width: 1060px) {
    .access-role-grid,
    .person-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .person-summary-roles {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .person-editor-dialog {
        max-width: calc(100vw - 24px);
    }

    .person-editor-header,
    .person-editor-body,
    .person-editor-footer {
        padding-inline: 16px;
    }

    .person-editor-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .person-summary-grid,
    .access-role-grid,
    .permission-group-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .person-summary-roles {
        grid-column: auto;
    }

    .access-editor-section {
        padding: 16px;
    }

    .access-section-heading,
    .person-save-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .person-save-bar .btn {
        width: 100%;
        min-width: 0;
    }

    .person-editor-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .person-status-actions,
    .person-danger-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .person-status-actions .btn,
    .person-danger-actions .btn {
        width: 100%;
    }
}

.new-user-row {
    background: rgba(242, 184, 75, .12);
}

.parent-link-list {
    display: grid;
    gap: 10px;
}

.parent-link {
    display: grid;
    gap: 2px;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 12%));
}

.relation-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.relation-row a {
    color: var(--ink);
    text-decoration: none;
}

.relation-row form {
    margin: 0;
}

.parent-link span {
    color: var(--muted);
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--panel);
    box-shadow: 0 0 0 1px var(--line);
    vertical-align: middle;
}

.avatar-fallback {
    background: var(--soft-panel);
    color: var(--primary-dark);
    font-weight: 800;
    font-size: .82rem;
}

.person-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.registration-child {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 12%));
}

.registration-child h3 {
    font-size: 1rem;
    margin-bottom: 12px;
}

.parent-tabs {
    margin-bottom: 4px;
}

.parent-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

.parent-children-settings {
    min-width: 0;
}

.parent-add-child-section {
    display: grid;
    gap: 12px;
}

.parent-add-child-toggle {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 220px);
}

.parent-add-child-panel {
    margin-top: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 12%));
}

.parent-add-child-panel h2 {
    margin-bottom: 14px;
}

.settings-page {
    display: grid;
    gap: 16px;
    max-width: 980px;
}

.account-note {
    display: grid;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.account-note span {
    color: var(--muted);
}

.profile-settings {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 12%));
}

.child-login-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    margin: -6px 0 12px;
    background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--soft-panel), transparent 10%));
}

.child-login-form > .field-full {
    grid-column: 1 / -1;
}

.theme-settings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 12%));
}

.theme-switch {
    position: relative;
    width: 58px;
    height: 32px;
    flex: 0 0 auto;
}

.theme-switch input {
    position: absolute;
    opacity: 0;
}

.theme-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
    transition: background .2s ease;
}

.theme-switch span::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: transform .2s ease;
}

.theme-switch input:checked + span {
    background: var(--primary);
}

.theme-switch input:checked + span::after {
    transform: translateX(26px);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    color: var(--ink);
    background-color: var(--control-bg);
    border-color: var(--line);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    color: var(--ink);
    background-color: var(--control-bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(55, 180, 220, .18);
}

:root[data-theme="dark"] .table {
    --bs-table-color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line);
}

:root[data-theme="dark"] .text-muted {
    color: var(--muted) !important;
}

.competition-card-link,
.competition-card-link:hover,
.competition-card-link:focus {
    color: var(--ink);
}

.competition-live-console {
    min-height: 520px;
}

.competition-live-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.competition-heat-button { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.competition-heat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.competition-open-timer { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.competition-heat-athletes { margin-left: auto; font-size: .92rem; }
.competition-live-focus-alert { position: sticky; top: .5rem; z-index: 20; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.competition-live-focused { border: 4px solid var(--success, #198754) !important; box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--success, #198754) 22%, transparent), 0 18px 45px rgba(0,0,0,.18) !important; }
.competition-inline-timers { display: grid; gap: 1rem; padding: .75rem 0 1.25rem; }
.competition-inline-timers:empty { display: none; }

.competition-live-controls {
    display: grid;
    grid-template-columns: minmax(240px, 28%) minmax(320px, 1fr) minmax(240px, 28%);
    grid-template-areas:
        "frequency information timing"
        "secondary secondary secondary";
    gap: 1.25rem;
    padding: 1.25rem;
}

.competition-live-left { grid-area: frequency; display: grid; gap: .75rem; align-content: center; }
.competition-live-center { grid-area: information; padding: .5rem 1rem; }
.competition-live-right { grid-area: timing; display: grid; grid-template-rows: 1fr 1fr; gap: .75rem; }
.competition-live-secondary { grid-area: secondary; border-top: 1px solid var(--line); padding-top: 1rem; }
.competition-rate-save { display: grid; grid-template-columns: minmax(160px, 240px) auto 1fr; gap: .75rem; align-items: center; }
.competition-live-clock { font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; margin-top: 1rem; white-space: nowrap; }
.competition-live-splits { max-height: 145px; overflow-y: auto; }
.live-touch-button { min-height: 132px; border-radius: 1rem; font-size: clamp(1.35rem, 2.4vw, 2.2rem); font-weight: 900; touch-action: manipulation; }
.live-touch-button small { display: block; margin-top: .35rem; font-size: .75rem; font-weight: 600; }
.live-frequency-button { min-height: 132px; }
.live-stop-button { min-height: 390px; width: 100%; font-size: clamp(2rem, 4vw, 3.5rem); border-width: 3px; }

@media (max-width: 767.98px) {
    .competition-heat-form { grid-template-columns: 1fr; }
    .competition-heat-athletes { width: 100%; margin-left: 2rem; }
    .competition-live-controls {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "information information" "frequency timing" "secondary secondary";
        padding: .75rem;
    }
    .competition-live-left { align-content: stretch; }
    .competition-live-center { padding: 0; }
    .competition-live-clock { font-size: clamp(3rem, 15vw, 5rem); }
    .live-touch-button { min-height: 105px; font-size: 1.2rem; }
    .live-frequency-button { min-height: 150px; }
    .live-stop-button { min-height: 300px; font-size: 2rem; }
    .competition-rate-save { grid-template-columns: 1fr; }
}

.info-list {
    display: grid;
    gap: 12px;
}

.info-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 15px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 10%));
    box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.info-item div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.info-item span {
    color: var(--muted);
    font-size: .9rem;
}

.info-item p {
    margin: 10px 0 0;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.message-compose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.chat-list,
.chat-summary-list {
    display: grid;
    gap: 10px;
}

.chat-message,
.chat-summary-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: var(--soft-panel);
}

.chat-summary-item {
    color: var(--ink);
    text-decoration: none;
}

.chat-dashboard-card.has-chat-signal {
    border-color: color-mix(in srgb, var(--accent), var(--line) 45%);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent), transparent 82%);
}

.chat-signal-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 4px 11px;
    background: var(--accent);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
}

.chat-dashboard-link {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: var(--soft-panel);
    color: var(--ink);
    text-decoration: none;
}

.chat-dashboard-link:hover,
.chat-dashboard-link:focus {
    border-color: var(--primary);
    color: var(--ink);
}

.chat-dashboard-link span {
    color: var(--muted);
}

.chat-message-head,
.chat-summary-item span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
}

.chat-message-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.chat-message p,
.chat-summary-item p {
    margin: 8px 0 0;
}

.chat-page-head {
    margin-bottom: 12px;
}

.chat-app-window {
    min-height: calc(100vh - 170px);
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px var(--shadow);
}

.chat-sidebar {
    min-width: 0;
    border-right: 1px solid var(--line);
    background: var(--soft-panel);
}

.chat-room-placeholder {
    min-width: 0;
    display: grid;
    place-items: center;
    background: var(--panel);
}

.chat-sidebar-head,
.chat-room-head {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.chat-status-form {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.chat-status-form .form-label {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 760;
}

.chat-sidebar-head span,
.chat-room-title span {
    display: block;
    color: var(--muted);
    font-size: .86rem;
}

.chat-thread-list {
    height: calc(100vh - 238px);
    overflow: auto;
}

.chat-thread {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.chat-thread:hover,
.chat-thread:focus,
.chat-thread.active {
    background: rgba(19, 168, 107, .12);
}

.chat-thread-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-thread-main,
.chat-thread-top {
    min-width: 0;
}

.chat-thread-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chat-thread-top strong,
.chat-thread-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-thread-top strong {
    display: block;
    font-size: .96rem;
}

.chat-thread-signal {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 6px;
    border-radius: 999px;
    padding: 2px 7px;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 850;
}

.chat-thread-top time,
.chat-bubble time {
    color: var(--muted);
    font-size: .76rem;
}

.chat-thread-sub,
.chat-thread-preview {
    display: block;
    color: var(--muted);
    font-size: .84rem;
}

.chat-room,
.chat-floating-window {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary), transparent 95%), transparent 70%),
        var(--bg);
}

:root[data-theme="dark"] .chat-room,
:root[data-theme="dark"] .chat-floating-window {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary), transparent 94%), transparent 72%),
        var(--bg);
}

.chat-window-layer {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: grid;
    place-items: center;
    padding: 24px;
}

.chat-window-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 12, 18, .52);
    backdrop-filter: blur(3px);
}

.chat-floating-window {
    position: relative;
    z-index: 1;
    width: min(920px, 96vw);
    height: min(760px, 88vh);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

.chat-room-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-room-title strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-bubble-list {
    min-height: 0;
    overflow: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-bubble-row {
    display: flex;
}

.chat-bubble-row.own {
    justify-content: flex-end;
}

.chat-bubble-row.other {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: min(76%, 680px);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px 6px;
    background: var(--panel);
    box-shadow: 0 8px 18px var(--shadow);
}

.chat-bubble-row.own .chat-bubble {
    border-color: rgba(19, 168, 107, .32);
    background: #d8f6df;
    color: #12351f;
}

:root[data-theme="dark"] .chat-bubble-row.own .chat-bubble {
    background: #174d33;
    color: #e8fff1;
}

.chat-bubble strong {
    display: block;
    margin-bottom: 3px;
    color: var(--primary);
    font-size: .82rem;
}

.chat-bubble p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-height: 18px;
    margin-top: 4px;
}

.chat-message-meta time {
    display: inline;
    margin: 0;
    text-align: right;
}

.chat-delivery-status {
    display: inline-flex;
    align-items: center;
    min-width: 21px;
    padding-right: 5px;
    color: rgba(18, 53, 31, .58);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -5px;
}

.chat-delivery-status.is-read { color: #087dc1; }
:root[data-theme="dark"] .chat-delivery-status { color: rgba(232, 255, 241, .64); }
:root[data-theme="dark"] .chat-delivery-status.is-read { color: #56c8ff; }
.chat-bubble-row.is-pending .chat-bubble { opacity: .82; }
.chat-bubble-row.is-pending .chat-delivery-status {
    min-width: 12px;
    padding-right: 0;
    letter-spacing: 0;
}

.chat-ai-reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.chat-ai-reply-actions .btn {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .76rem;
}

.chat-ai-reply-status {
    display: block;
    min-height: 1.1rem;
    margin: 5px 12px 0;
    color: var(--muted);
    font-size: .76rem;
}

.chat-email-draft-link {
    width: fit-content;
    margin: 6px 12px 0;
}

.chat-compose-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--panel);
}

.chat-compose-bar textarea {
    resize: none;
    min-height: 44px;
    max-height: 120px;
    border-radius: 999px;
    padding: 10px 16px;
}

.chat-compose-bar .btn {
    border-radius: 999px;
    min-width: 92px;
}

.chat-empty {
    align-self: center;
    justify-self: center;
    max-width: 360px;
    padding: 22px;
    text-align: center;
    color: var(--muted);
}

.chat-empty.compact {
    align-self: auto;
    justify-self: center;
    margin-top: auto;
    margin-bottom: auto;
}

.school-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.school-link {
    color: var(--ink);
    text-decoration: none;
}

.today-course-panel {
    border-left: 0;
}

.today-course-list {
    display: grid;
    gap: 12px;
}

.today-course-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 10%));
    box-shadow: 0 10px 24px rgba(16, 24, 40, .05);
}

.today-course-card span {
    display: block;
    color: var(--primary);
    font-weight: 800;
}

.today-course-card h2 {
    margin: 2px 0;
    font-size: 1.25rem;
}

.today-course-card p {
    margin: 0;
    color: var(--muted);
}

.training-plan-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 14px;
    padding: 12px;
    background: #F8FAFC;
    color: #07111F;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92rem;
    line-height: 1.55;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.training-plan-preview {
    width: 100%;
    margin: .75rem 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
}

.training-plan-preview summary {
    cursor: pointer;
    padding: .85rem 1rem;
    font-weight: 800;
    color: var(--ink);
}

.training-plan-preview .training-plan-text {
    max-height: 260px;
    overflow: auto;
    margin: 0 1rem 1rem;
}

.dashboard-tile-settings-list {
    display: grid;
    gap: .75rem;
}

.dashboard-tile-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
}

.dashboard-tile-settings-row strong,
.dashboard-tile-settings-row span {
    display: block;
}

.dashboard-tile-settings-row span {
    color: var(--muted);
    font-size: .95rem;
}

.dashboard-tile-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .dashboard-tile-settings-row {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-tile-settings-actions,
    .dashboard-tile-settings-row form {
        width: 100%;
    }

    .dashboard-tile-settings-actions .btn,
    .dashboard-tile-settings-row > form .btn {
        width: 100%;
    }
}

/* Superadmin: irreversible tenant deletion */
.superadmin-club-delete {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #e5394f 35%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, #e5394f 4%, var(--panel));
}

.superadmin-club-delete summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    cursor: pointer;
    color: #d72f45;
    font-size: .74rem;
    font-weight: 850;
    list-style: none;
}

.superadmin-club-delete summary::-webkit-details-marker { display: none; }
.superadmin-club-delete summary::after { content: "+"; margin-left: auto; font-size: 1rem; }
.superadmin-club-delete[open] summary::after { content: "−"; }

.superadmin-club-delete-panel {
    display: grid;
    gap: 12px;
    padding: 0 13px 13px;
    border-top: 1px solid color-mix(in srgb, #e5394f 22%, var(--line));
}

.superadmin-club-delete-panel > div { padding-top: 12px; }
.superadmin-club-delete-panel strong { font-size: .78rem; }
.superadmin-club-delete-panel p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.45;
}

.superadmin-club-delete-panel form { display: grid; gap: 7px; }
.superadmin-club-delete-panel label { color: var(--muted); font-size: .7rem; }
.superadmin-club-delete-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.superadmin-club-delete-controls input {
    min-width: 0;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, #e5394f 32%, var(--line));
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
}

.superadmin-club-delete-controls input:focus {
    outline: 0;
    border-color: #e5394f;
    box-shadow: 0 0 0 3px color-mix(in srgb, #e5394f 13%, transparent);
}

.superadmin-club-delete-controls .btn { white-space: nowrap; }

@media (max-width: 620px) {
    .superadmin-club-delete-controls { grid-template-columns: 1fr; }
    .superadmin-club-delete-controls .btn { width: 100%; }
}

.monospace-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.detail-grid div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: var(--soft-panel);
}

.detail-grid span {
    display: block;
    color: var(--muted);
    font-size: .86rem;
}

.detail-grid strong {
    display: block;
    margin-top: 3px;
}

.attendance-table,
.progress-list {
    display: grid;
    gap: 10px;
}

.attendance-row,
.progress-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.2fr) minmax(180px, .8fr) minmax(220px, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: linear-gradient(180deg, var(--soft-panel), color-mix(in srgb, var(--panel), transparent 10%));
    box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.attendance-row strong,
.progress-row strong {
    display: block;
}

.attendance-row span,
.progress-row span {
    display: block;
    color: var(--muted);
    font-size: .86rem;
}

.attendance-toggle {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--control-bg);
    color: var(--ink);
    font-weight: 760;
    cursor: pointer;
    user-select: none;
}

.attendance-toggle input {
    width: 22px;
    height: 22px;
    accent-color: var(--accent);
}

.attendance-toggle span {
    color: inherit;
    font-size: .95rem;
}

.attendance-toggle:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent), var(--line) 35%);
    background: color-mix(in srgb, var(--accent), var(--panel) 86%);
}

.participant-progress-summary {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .88rem;
}

.course-participant-list {
    display: grid;
    gap: 14px;
}

.course-participant-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary), transparent 92%), transparent 62%),
        color-mix(in srgb, var(--panel), transparent 4%);
}

.course-participant-card.course-participant-passed {
    border-color: color-mix(in srgb, var(--success), var(--line) 30%);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--success), transparent 84%), transparent 70%),
        color-mix(in srgb, var(--panel), var(--success) 7%);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--success), transparent 86%);
}

.course-participant-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.course-participant-passed-label {
    display: inline-flex;
    min-height: 28px;
    padding: 5px 10px;
    align-items: center;
    gap: 5px;
    border: 1px solid color-mix(in srgb, var(--success), #14532d 24%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--success), #0f5132 18%);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.course-participant-summary {
    display: none;
    list-style: none;
}

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

.course-participant-details {
    display: contents;
}

.course-participant-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.course-participant-name {
    color: var(--ink);
    font-size: clamp(1.08rem, 2.2vw, 1.32rem);
    font-weight: 900;
    letter-spacing: -.02em;
    text-decoration: none;
}

.course-participant-name:hover,
.course-participant-name:focus {
    color: var(--primary);
    text-decoration: underline;
}

.course-participant-meta,
.course-participant-parent {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    color: var(--muted);
    font-size: .88rem;
}

.course-participant-meta span,
.course-participant-parent span,
.course-participant-parent strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--soft-panel), transparent 10%);
}

.course-participant-parent {
    align-items: center;
}

.course-participant-parent span {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: 850;
}

.course-participant-parent strong {
    color: var(--ink);
    font-weight: 800;
}

.course-participant-signals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.course-signal-card {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 86px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--soft-panel), transparent 8%);
}

.course-signal-card span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.course-signal-card strong {
    color: var(--ink);
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.25;
}

.course-progress-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line), transparent 25%);
}

.course-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.course-quick-progress {
    display: grid;
    gap: 10px;
}

.course-quick-progress details {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--soft-panel), transparent 10%);
    overflow: hidden;
}

.course-quick-progress summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    font-weight: 900;
}

.course-quick-progress summary::-webkit-details-marker {
    display: none;
}

.course-quick-progress summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary), transparent 84%);
    color: var(--primary);
    font-size: 1.1rem;
    line-height: 1;
}

.course-quick-progress details[open] summary::after {
    content: "-";
}

.course-quick-progress summary small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.course-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0 14px 14px;
}

.course-skill-quick-list {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.course-skill-quick-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(250px, 1.4fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel), transparent 12%);
}

.course-skill-quick-row strong {
    color: var(--ink);
    font-weight: 850;
    line-height: 1.25;
}

.course-quick-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 14px 14px;
}

/* Kinderschwimmen: schneller Kursleiter-Arbeitsbereich */
.course-mobile-actions {
    display: none;
}

.course-overview-details > summary {
    display: none;
}

.course-overview-details > .course-overview-content {
    display: block;
}

.course-sessions-panel,
.course-participants-panel {
    scroll-margin-top: 110px;
}

.next-course-session {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--primary), transparent 55%);
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary), transparent 86%), color-mix(in srgb, var(--accent), transparent 92%));
}

.next-course-session div,
.next-course-session strong,
.next-course-session small {
    display: block;
}

.next-course-session div > span {
    color: var(--primary);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.next-course-session strong {
    margin-top: 3px;
    font-size: 1.05rem;
}

.next-course-session small {
    margin-top: 4px;
    color: var(--muted);
}

.course-session-item.is-next {
    display: none;
}

.past-course-sessions {
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.past-course-sessions > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: var(--ink);
    font-weight: 850;
}

.past-course-sessions > summary span {
    min-width: 28px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--soft-panel);
    text-align: center;
}

.past-course-sessions[open] > .info-list {
    margin-top: 12px;
}

.attendance-session-meta {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 750;
}

.attendance-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.attendance-counter {
    color: var(--muted);
    white-space: nowrap;
}

.attendance-counter strong {
    color: var(--ink);
}

.attendance-note > summary {
    cursor: pointer;
    color: var(--primary);
    font-size: .84rem;
    font-weight: 800;
}

.attendance-note[open] > .form-control {
    margin-top: 7px;
}

.attendance-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.attendance-save-bar > span {
    color: var(--muted);
    font-size: .88rem;
}

.progress-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.choice-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

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

.choice-buttons label {
    margin: 0;
}

.choice-buttons input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-buttons span {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--panel);
    color: var(--ink);
    font-weight: 760;
    cursor: pointer;
}

.choice-buttons input:checked + span {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary), var(--panel) 86%);
    color: var(--primary);
}

.swim-aid-control {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}

.swim-aid-control input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
}

.swim-aid-control strong {
    min-width: 92px;
    text-align: right;
    font-size: 1.8rem;
}

.seepferdchen-progress-row {
    grid-template-columns: minmax(210px, 1fr) minmax(320px, 1.25fr) minmax(180px, .8fr);
}

.exam-report-list {
    display: grid;
    gap: 12px;
}

.exam-card {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: var(--soft-panel);
}

.exam-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.exam-main h2 {
    margin: 0;
}

.exam-main p,
.exam-main span,
.exam-status span {
    display: block;
    margin: 2px 0 0;
    color: var(--muted);
}

.exam-light {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, .84);
    box-shadow: 0 0 0 1px var(--line), 0 6px 12px var(--shadow);
    vertical-align: middle;
}

.exam-light.green {
    background: #19a55b;
}

.exam-light.yellow {
    background: #f3c642;
}

.exam-light.red {
    background: #d64545;
}

.exam-status {
    min-width: 150px;
}

.exam-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(4, auto);
    gap: 8px;
}

.exam-actions .btn {
    min-height: 42px;
}

.status-pill {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    background: var(--soft-panel);
}

.status-pill.cancelled {
    border-color: rgba(248, 113, 113, .55);
    background: rgba(248, 113, 113, .16);
    color: color-mix(in srgb, #ffffff, #ff7b7b 36%);
    margin-left: 8px;
}

.status-pill.pending {
    border-color: rgba(242, 184, 75, .65);
    background: rgba(242, 184, 75, .18);
    color: color-mix(in srgb, #ffffff, #f3c642 36%);
    margin-left: 6px;
}

.status-pill.webclub-competition {
    border-color: rgba(242, 184, 75, .62);
    background: rgba(242, 184, 75, .16);
    color: color-mix(in srgb, var(--ink), #d89212 46%);
    margin-left: 8px;
    font-size: .78rem;
    vertical-align: middle;
}

.status-pill.active,
.status-pill.success {
    border-color: rgba(34, 197, 94, .55);
    background: rgba(34, 197, 94, .16);
    color: color-mix(in srgb, #ffffff, #35e68a 36%);
}

.status-pill.danger {
    border-color: rgba(220, 38, 38, .55);
    background: rgba(220, 38, 38, .14);
    color: color-mix(in srgb, #ffffff, #ff6b6b 34%);
}

.wellbeing-friend {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 8%, var(--panel) 92%);
}

.wellbeing-friend-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

.wellbeing-friend h2 {
    font-size: 1.25rem;
    margin: 0 0 4px;
}

.swimzy-chat-window {
    max-width: 760px;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
    margin-bottom: 24px;
}

.swimzy-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--primary) 12%, var(--panel) 88%);
}

.swimzy-chat-header small {
    display: block;
    color: var(--muted);
}

.swimzy-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
}

.swimzy-face {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 35% 38%, #6ee7ff 0 7%, transparent 8%),
        radial-gradient(circle at 65% 38%, #6ee7ff 0 7%, transparent 8%),
        linear-gradient(160deg, #f9fbff 0 47%, #d7e7ff 48% 100%);
    border: 2px solid color-mix(in srgb, var(--primary), #6ee7ff 35%);
    color: #fff;
}

.swimzy-face::before {
    content: "";
    position: absolute;
    inset: 26% 18% 24%;
    border-radius: 999px;
    background: #061b3d;
    z-index: -1;
    box-shadow: inset 0 0 14px rgba(110, 231, 255, .28);
}

.swimzy-face::after {
    content: "";
    position: absolute;
    left: 39%;
    right: 39%;
    bottom: 27%;
    height: 3px;
    border-radius: 999px;
    background: #6ee7ff;
}

.swimzy-face span {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    border: 2px solid var(--panel);
}

.swimzy-chat-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    max-height: 360px;
    overflow-y: auto;
    padding: 14px;
}

.swimzy-bubble {
    width: fit-content;
    max-width: min(88%, 420px);
    padding: 10px 12px;
    border-radius: 16px 16px 16px 4px;
    background: var(--soft-panel);
    border: 1px solid var(--line);
}

.swimzy-bubble.own {
    align-self: flex-end;
    border-radius: 16px 16px 4px 16px;
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.swimzy-chat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
}

.swimzy-scale-hint {
    flex-basis: 100%;
    color: var(--muted);
    font-size: .9rem;
}

.wellbeing-rating-options {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wellbeing-rating-button {
    --rating-color: #f4c430;
    --rating-dark: #312b1d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 5px;
    border: 2px solid color-mix(in srgb, var(--rating-color), #172033 24%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--rating-color) 15%, var(--panel));
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.wellbeing-rating-button:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--rating-color) 24%, var(--panel));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--rating-color) 25%, transparent);
}

.wellbeing-rating-button:focus-visible,
.btn-check:focus-visible + .wellbeing-rating-label {
    outline: 3px solid color-mix(in srgb, var(--rating-color), #ffffff 24%);
    outline-offset: 3px;
}

.btn-check:checked + .wellbeing-rating-label {
    background: color-mix(in srgb, var(--rating-color) 30%, var(--panel));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rating-color) 48%, transparent);
    transform: translateY(-2px) scale(1.04);
}

.wellbeing-rating-face {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rating-color);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), 0 3px 8px rgba(0, 0, 0, .14);
}

.wellbeing-rating-face::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 9px;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    background: var(--rating-dark);
    box-shadow: 14px 0 0 var(--rating-dark);
}

.wellbeing-rating-face::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 16px;
    transform: translateX(-50%);
    border-color: var(--rating-dark);
}

.wellbeing-rating-1 { --rating-color: #dc3545; }
.wellbeing-rating-2 { --rating-color: #f28c28; }
.wellbeing-rating-3 { --rating-color: #f4c430; }
.wellbeing-rating-4 { --rating-color: #8bd66b; }
.wellbeing-rating-5 { --rating-color: #25a55f; }

.wellbeing-rating-1 .wellbeing-rating-face::after {
    height: 7px;
    border-top: 3px solid var(--rating-dark);
    border-radius: 50% 50% 0 0;
}

.wellbeing-rating-2 .wellbeing-rating-face::after {
    width: 14px;
    height: 5px;
    border-top: 3px solid var(--rating-dark);
    border-radius: 50% 50% 0 0;
}

.wellbeing-rating-3 .wellbeing-rating-face::after {
    height: 3px;
    border-radius: 999px;
    background: var(--rating-dark);
}

.wellbeing-rating-4 .wellbeing-rating-face::after {
    width: 14px;
    height: 6px;
    border-bottom: 3px solid var(--rating-dark);
    border-radius: 0 0 50% 50%;
}

.wellbeing-rating-5 .wellbeing-rating-face::after {
    height: 9px;
    border-radius: 2px 2px 12px 12px;
    background: var(--rating-dark);
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .75);
}

@media (max-width: 575.98px) {
    .swimzy-chat-actions .wellbeing-rating-button {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        padding: 4px;
        border-radius: 14px;
    }

    .swimzy-chat-actions .wellbeing-rating-face {
        width: 34px;
        height: 34px;
    }
}

.swimzy-hidden-fields {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.swimzy-floating-assistant {
    position: fixed;
    right: clamp(16px, 2.4vw, 28px);
    bottom: clamp(16px, 2.4vw, 28px);
    z-index: 1055;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    max-width: min(290px, calc(100vw - 32px));
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #ffffff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary-dark), transparent 6%), color-mix(in srgb, var(--primary), transparent 8%)),
        rgba(8, 22, 43, .82);
    box-shadow:
        0 22px 58px rgba(0, 0, 0, .28),
        0 0 0 1px color-mix(in srgb, var(--accent), transparent 80%),
        0 0 32px color-mix(in srgb, var(--primary), transparent 68%);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.swimzy-floating-assistant:hover,
.swimzy-floating-assistant:focus {
    color: #ffffff;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent), #ffffff 20%);
    box-shadow:
        0 26px 70px rgba(0, 0, 0, .34),
        0 0 0 1px color-mix(in srgb, var(--accent), transparent 58%),
        0 0 38px color-mix(in srgb, var(--accent), transparent 62%);
}

.swimzy-floating-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    box-shadow: inset 0 0 18px rgba(110, 231, 255, .18), 0 10px 24px rgba(0, 0, 0, .2);
}

.swimzy-floating-text {
    display: grid;
    line-height: 1.05;
    min-width: 0;
}

.swimzy-floating-text strong {
    font-size: .98rem;
    font-weight: 900;
}

.swimzy-floating-text small {
    color: rgba(235, 249, 255, .76);
    font-weight: 750;
}

.swimzy-widget-panel {
    position: fixed;
    right: clamp(16px, 2.4vw, 28px);
    bottom: 94px;
    z-index: 1056;
    width: min(460px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 124px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 28px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary-dark), transparent 8%), color-mix(in srgb, var(--primary), transparent 18%)),
        rgba(8, 22, 43, .86);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, .36),
        0 0 0 1px color-mix(in srgb, var(--accent), transparent 78%),
        0 0 44px color-mix(in srgb, var(--primary), transparent 70%);
    backdrop-filter: blur(26px) saturate(175%);
    -webkit-backdrop-filter: blur(26px) saturate(175%);
}

.swimzy-widget-panel[hidden] {
    display: none;
}

.swimzy-widget-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px 10px 18px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.swimzy-widget-head > div:first-child {
    display: grid;
    line-height: 1.12;
}

.swimzy-widget-head strong {
    font-weight: 900;
}

.swimzy-widget-head span {
    color: rgba(235, 249, 255, .76);
    font-size: .82rem;
    font-weight: 750;
}

.swimzy-widget-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.swimzy-widget-actions a,
.swimzy-widget-actions button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    text-decoration: none;
    font: inherit;
    font-weight: 900;
    line-height: 1;
}

.swimzy-widget-panel iframe {
    width: 100%;
    height: calc(100% - 58px);
    display: block;
    border: 0;
    background: transparent;
}

.btn-primary {
    --bs-btn-color: var(--button-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--button-ink);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--button-ink);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--primary), #ffffff 12%));
}

.btn-outline-primary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary), transparent 76%);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--primary), transparent 66%);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-color: var(--muted);
    --bs-btn-disabled-border-color: var(--primary);
    background: rgba(255, 255, 255, .04);
}

.btn {
    border-radius: 999px;
    font-weight: 700;
    min-height: 38px;
    padding-inline: 16px;
}

.btn-sm {
    min-height: 32px;
    padding-inline: 12px;
}

.btn-primary {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--accent), transparent 72%);
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--accent), transparent 66%);
}

.form-control,
.form-select {
    border-radius: 8px;
    border-color: var(--line);
    background-color: var(--control-bg);
    color: var(--ink);
    box-shadow: var(--control-shadow);
}

.form-select option,
.form-select optgroup {
    background-color: #ffffff;
    color: #102033;
}

:root[data-theme="dark"] .form-select option,
:root[data-theme="dark"] .form-select optgroup {
    background-color: #12202b;
    color: #edf4f8;
}

.form-control::placeholder {
    color: color-mix(in srgb, var(--muted), transparent 12%);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--control-bg), #ffffff 5%);
    color: var(--ink);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary), transparent 82%);
}

.form-label,
.col-form-label,
label {
    color: var(--ink);
}

.form-text,
.text-muted,
.small.text-muted {
    color: var(--muted) !important;
}

.table {
    --bs-table-color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line);
}

.table-responsive,
.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 22px 50px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .09);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.table > :not(caption) > * > * {
    padding: .9rem .75rem;
    background-color: transparent;
    color: var(--ink);
    vertical-align: middle;
}

.swimzy-chat-actions.is-composer {
    align-items: stretch;
    flex-direction: column;
}

.swimzy-chat-input {
    min-height: 92px;
    resize: vertical;
}

.swimzy-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft-panel);
    line-height: 1.45;
}

.swimzy-consent.is-required {
    border-color: var(--danger, #dc3545);
}

.swimzy-thinking {
    color: var(--muted);
    font-size: .95rem;
}

@media (max-width: 575.98px) {
    .swimzy-chat-header {
        align-items: flex-start;
    }

    .swimzy-chat-actions .btn {
        min-height: 44px;
    }
}

.staff-planning-tools,
.staff-planning-assignment,
.staff-planning-list {
    display: grid;
    gap: 1rem;
}

.staff-planning-range,
.staff-planning-excel,
.staff-planning-excel form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: .75rem;
}

.staff-planning-range > div {
    min-width: 170px;
}

.staff-planning-excel .form-control {
    max-width: 360px;
}

.staff-planning-assignment-head,
.staff-planning-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

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

.staff-planning-role-grid details {
    border: 1px solid var(--line);
    border-radius: .8rem;
    padding: .72rem .85rem;
}

.staff-planning-role-grid summary {
    cursor: pointer;
    font-weight: 700;
}

.staff-planning-person-list {
    display: grid;
    gap: .5rem;
    max-height: 14rem;
    overflow-y: auto;
    margin-top: .7rem;
}

.staff-planning-table-wrap {
    overflow-x: auto;
}

.staff-planning-table {
    min-width: 1040px;
    margin-bottom: 0;
}

.staff-planning-table td {
    vertical-align: top;
}

.staff-planning-table td > strong,
.staff-planning-table td > span,
.staff-planning-table td > small {
    display: block;
}

.staff-planning-table td > small {
    color: var(--muted);
}

.staff-planning-conflict {
    background: rgba(220, 53, 69, .08);
}

.staff-planning-group-row td {
    background: color-mix(in srgb, var(--primary), transparent 90%);
}

.staff-planning-group-row td,
.staff-planning-group-row td > div {
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.staff-planning-group-row td > div,
.staff-planning-group-row td {
    display: flex;
}

.staff-planning-group-row small {
    color: var(--muted);
}

.staff-chip {
    width: fit-content;
    margin-bottom: .25rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, .12);
    font-size: .82rem;
}

.staff-chip-lead { background: rgba(25, 135, 84, .15); }
.staff-chip-helper { background: rgba(111, 66, 193, .15); }

@media (max-width: 767.98px) {
    .staff-planning-role-grid { grid-template-columns: 1fr; }
    .staff-planning-range,
    .staff-planning-excel,
    .staff-planning-excel form { align-items: stretch; flex-direction: column; }
    .staff-planning-range > div,
    .staff-planning-excel .form-control,
    .staff-planning-range .btn,
    .staff-planning-excel .btn { width: 100%; max-width: none; }
    .staff-planning-assignment-head,
    .staff-planning-list-head { align-items: flex-start; flex-direction: column; }
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: color-mix(in srgb, var(--primary), transparent 84%);
}

.alert {
    border-radius: 8px;
    border-color: var(--line);
    box-shadow: 0 12px 30px var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--dropdown-bg);
    --bs-dropdown-color: var(--dropdown-ink);
    --bs-dropdown-link-color: var(--dropdown-ink);
    --bs-dropdown-link-hover-color: var(--dropdown-hover-ink);
    --bs-dropdown-link-hover-bg: var(--dropdown-hover-bg);
    --bs-dropdown-border-color: var(--line);
    color: var(--dropdown-ink);
    box-shadow: 0 24px 54px var(--shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.dropdown-menu .dropdown-item {
    color: var(--dropdown-ink);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-ink);
}

dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 4px 12px;
}

dt {
    color: var(--muted);
}

dd {
    margin-bottom: 0;
}

@media (max-width: 1180px) {
    .calendar-month {
        grid-template-columns: repeat(7, minmax(170px, 170px));
    }

    .calendar-month .calendar-event {
        padding: 9px 10px;
        font-size: .92rem;
    }

    .calendar-month .calendar-event strong {
        font-size: .92rem;
    }

    .calendar-month .calendar-event .status-pill {
        padding: 3px 8px;
        font-size: .78rem;
    }
}

@media (max-width: 760px) {
    .app-shell {
        padding: 12px;
    }

    h1 {
        font-size: clamp(1.75rem, 9vw, 2.65rem);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    h2 {
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .surface,
    .auth-panel,
    .item-card,
    .event-card,
    .metric,
    .card,
    .modal-content,
    .app-modal {
        max-width: 100%;
    }

    .modal-dialog {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        margin: 12px auto;
    }

    .modal-content {
        max-height: calc(100dvh - 24px);
        overflow: auto;
    }

    .app-nav-inner {
        min-height: 58px;
        padding-inline: 10px;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
    }

    .app-brand {
        gap: 8px;
    }

    .app-brand-text {
        max-width: 52vw;
        font-size: 1rem;
    }

    .app-menu-label {
        display: none;
    }

    .page-head,
    .filter-bar {
        grid-template-columns: 1fr;
        display: grid;
        align-items: stretch;
    }

    .page-head {
        gap: 12px;
    }

    .page-head .d-flex,
    .section-head,
    .section-head .d-flex,
    .surface > .d-flex,
    .card-body > .d-flex {
        align-items: stretch !important;
    }

    .page-head .btn,
    .section-head .btn,
    .surface > .d-flex .btn,
    .card-body > .d-flex .btn {
        white-space: normal;
    }

    .table-responsive > .table:not(.mobile-table),
    .table-wrap > .table:not(.mobile-table) {
        min-width: 640px;
    }

    .mobile-table thead {
        display: none;
    }

    .mobile-table tr {
        display: block;
        border: 1px solid var(--line);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 10px;
    }

    .mobile-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        padding: 7px 0;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .mobile-table td::before {
        flex: 0 0 42%;
        content: attr(data-label);
        color: var(--muted);
        font-weight: 700;
        text-align: left;
    }

    .event-list-table {
        margin-bottom: 0;
    }

    .event-list-table tbody {
        display: grid;
        gap: 10px;
    }

    .event-list-table tr.event-list-row {
        display: grid;
        gap: 8px;
        border-radius: 12px;
        margin-bottom: 0;
        padding: 14px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 58%),
            var(--soft-panel);
        box-shadow: 0 14px 32px color-mix(in srgb, var(--shadow), transparent 35%);
    }

    .event-list-table .event-date-cell {
        display: none;
    }

    .event-list-table .event-title-cell {
        display: grid;
        gap: 8px;
        padding: 0 0 8px;
        border-bottom: 1px solid var(--line);
    }

    .event-list-table .event-title-cell::before {
        display: none;
    }

    .event-list-table .event-desktop-title {
        display: none;
    }

    .event-list-table .event-mobile-title {
        display: grid;
        gap: 3px;
    }

    .event-list-table .event-mobile-title span {
        color: var(--muted);
        font-size: .82rem;
        font-weight: 800;
    }

    .event-list-table .event-mobile-title strong {
        color: var(--ink);
        font-size: 1rem;
        line-height: 1.25;
    }

    .event-list-table td {
        align-items: center;
        min-width: 0;
        padding: 0;
    }

    .event-list-table td::before {
        flex: 0 0 76px;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .event-list-table .event-group-cell,
    .event-list-table .event-location-cell,
    .event-list-table .event-focus-cell {
        color: var(--ink);
        font-weight: 700;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .event-list-table .event-location-cell:empty {
        display: none;
    }

    .event-list-table .event-actions-cell {
        justify-content: flex-end;
        padding-top: 6px;
    }

    .event-list-table .event-actions-cell::before {
        display: none;
    }

    .event-list-table .event-actions {
        justify-content: flex-end;
        width: 100%;
    }

    .event-list-table .event-actions .btn {
        min-width: 96px;
    }

    .event-list-table .event-response-cell {
        display: grid;
        gap: 8px;
    }

    .event-list-table .event-response-cell::before {
        display: none;
    }

    .event-inline-response {
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, .08);
    }

    .event-inline-response span {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        color: var(--ink);
        font-weight: 800;
    }

    .event-inline-response div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .event-inline-response .btn {
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
    }

    .event-list-table .event-select-col {
        justify-content: flex-start;
        margin-bottom: 2px;
    }

    .event-list-table .event-select-col::before {
        flex: 0 0 auto;
    }

    .event-list-table .status-pill {
        width: fit-content;
    }

    .event-filter-compact {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .event-toolbar-compact {
        display: grid;
        grid-template-columns: 1fr;
    }

    .event-timeline-shell {
        padding: 12px;
        border-radius: 18px;
    }

    .event-timeline-head {
        align-items: center;
    }

    .event-count-pill {
        padding: 4px 8px;
        font-size: .72rem;
    }

    .event-day-group {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .event-day-label {
        position: static;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        text-align: left;
        padding: 8px 10px;
    }

    .event-slim-card {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
        border-radius: 17px;
    }

    .event-time-stack {
        min-height: 54px;
        padding: 8px 5px;
        border-radius: 14px;
    }

    .event-time-stack strong {
        font-size: .92rem;
    }

    .event-slim-title-row {
        display: grid;
        gap: 8px;
    }

    .event-slim-badges {
        justify-content: flex-start;
    }

    .event-slim-response {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .event-response-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .event-response-btn {
        width: 100%;
    }

    .course-participant-main {
        display: grid;
    }

    .course-participant-main .btn {
        width: 100%;
    }

    .course-participant-signals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-quick-grid,
    .course-skill-quick-row {
        grid-template-columns: 1fr;
    }

    .course-quick-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .competition-org-grid {
        grid-template-columns: 1fr;
    }

    .competition-org-card {
        grid-template-columns: 1fr;
    }

    .competition-org-actions {
        justify-content: stretch;
    }

    .competition-org-actions form,
    .competition-org-actions .btn {
        width: 100%;
    }

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

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

    .dashboard-feedback-actions {
        justify-content: stretch;
    }

    .dashboard-feedback-actions .btn {
        width: 100%;
    }

    .calendar-toolbar {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .calendar-month {
        grid-template-columns: 1fr;
    }

    .calendar-day {
        grid-template-columns: 1fr;
    }

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

    .multi-role-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .parent-settings-grid {
        grid-template-columns: 1fr;
    }

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

    .message-compose-grid {
        grid-template-columns: 1fr;
    }

    .chat-app-window {
        min-height: min(680px, calc(100dvh - 142px));
        grid-template-columns: 1fr;
    }

    .chat-room-placeholder {
        display: none;
    }

    .chat-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .chat-thread-list {
        height: auto;
        max-height: 260px;
    }

    .chat-room {
        min-height: min(520px, calc(100dvh - 220px));
    }

    .chat-window-layer {
        padding: 8px;
        align-items: stretch;
    }

    .chat-floating-window {
        width: 100%;
        height: calc(100dvh - 16px);
    }

    .chat-bubble {
        max-width: 88%;
    }

    .chat-compose-bar {
        grid-template-columns: 1fr;
    }

    .school-grid,
    .attendance-row,
    .progress-row,
    .exam-card,
    .exam-actions {
        grid-template-columns: 1fr;
    }

    .today-course-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 1199.98px) {
    .app-nav {
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--nav-bg), #000 7%), var(--nav-bg-end));
    }

    .app-nav-menu {
        width: 100%;
        margin-top: 10px;
        padding: 12px;
        max-height: calc(100dvh - 82px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 8px;
        background: var(--mobile-navigation-surface);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 42px rgba(0, 0, 0, .16);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        isolation: isolate;
    }

    .mobile-nav-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        color: #fff;
    }

    .mobile-nav-heading-copy {
        display: grid;
        gap: 2px;
    }

    .mobile-nav-heading-copy > span {
        color: rgba(255, 255, 255, .7);
        font-size: .8rem;
    }

    .mobile-navigation-settings-button {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 38px;
    }

    .app-nav-menu .navbar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-bottom: 12px !important;
    }

    .app-nav-link {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 8px;
        padding: 11px 12px !important;
        background: rgba(255, 255, 255, .08);
    }

    .app-dropdown {
        position: static !important;
        inset: auto !important;
        width: 100%;
        max-height: none;
        overflow: visible;
        transform: none !important;
        margin-top: 6px !important;
        border-color: rgba(255, 255, 255, .14);
        background: var(--mobile-navigation-popover);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .header-user {
        max-width: 44vw;
    }

    .department-switcher {
        flex: 1 1 260px;
        min-width: 0;
        max-width: 100%;
        background: var(--mobile-navigation-control);
    }

    .department-switcher .form-select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
        background-color: var(--mobile-navigation-control);
    }

    .app-nav-menu .department-switcher .form-select option {
        color: var(--dropdown-ink);
        background: var(--mobile-navigation-popover);
    }

    .department-switcher > i,
    .department-switcher > .header-context-label {
        flex: 0 0 auto;
    }

    body.has-mobile-tabbar {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .app-nav-compact-mobile .app-nav-inner {
        min-height: 58px;
    }

    .app-nav-compact-mobile .app-menu-button {
        display: inline-flex !important;
    }

    .app-nav-compact-mobile .app-nav-menu:not(.show) {
        display: none;
    }

    .app-nav-compact-mobile .app-brand-text {
        max-width: min(58vw, 280px);
    }

    .mobile-tabbar {
        position: fixed;
        z-index: 1040;
        right: max(10px, env(safe-area-inset-right, 0px));
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        left: max(10px, env(safe-area-inset-left, 0px));
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 4px;
        min-height: 66px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, .20);
        border-radius: 26px;
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--nav-bg), #061225 18%), color-mix(in srgb, var(--nav-bg-end), #061225 10%));
        box-shadow: 0 18px 48px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
    }

    .mobile-tabbar-item {
        border: 0;
        appearance: none;
        background: transparent;
        min-width: 0;
        min-height: 50px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border-radius: 18px;
        color: rgba(255, 255, 255, .76);
        text-decoration: none;
        font-size: .71rem;
        font-weight: 800;
        line-height: 1.05;
        transition: transform .18s ease, background .18s ease, color .18s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-tabbar-item i {
        font-size: 1.22rem;
        line-height: 1;
    }

    .mobile-tabbar-item.active,
    .mobile-tabbar-item:focus-visible,
    .mobile-tabbar-item:hover {
        color: var(--button-ink);
        background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--primary), #ffffff 24%));
        box-shadow: 0 10px 22px color-mix(in srgb, var(--accent), transparent 72%);
    }

    .mobile-tabbar-item:active {
        transform: translateY(1px) scale(.98);
    }
}

/* QR-Code für mehrfach nutzbare Einladungslinks. */
.invitation-created-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

.invitation-qr-card,
.invitation-qr-details-content {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.invitation-qr-card {
    margin: 0;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
    border-radius: 16px;
    background: #fff;
    color: #172033;
}

.invitation-qr-card img,
.invitation-qr-details-content img {
    display: block;
    max-width: 100%;
    height: auto;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
}

.invitation-qr-card figcaption {
    font-size: .76rem;
    font-weight: 750;
    text-align: center;
}

.invitation-qr-details {
    margin-top: 8px;
}

.invitation-qr-details summary {
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.invitation-qr-details-content {
    width: 184px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

@media (max-width: 760px) {
    .invitation-created-content {
        grid-template-columns: 1fr;
    }

    .invitation-qr-card {
        width: 100%;
    }
}

.mobile-navigation-dialog {
    max-width: 520px;
}

.mobile-navigation-settings-list {
    display: grid;
    gap: 8px;
}

.mobile-navigation-settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft, var(--panel));
}

.mobile-navigation-settings-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
    font-weight: 700;
}

.mobile-navigation-settings-row label i {
    color: var(--primary);
    font-size: 1.15rem;
}

.mobile-navigation-order-buttons {
    display: flex;
    gap: 5px;
}

@media (max-width: 420px) {
    .mobile-nav-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .mobile-navigation-settings-button {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .app-shell {
        padding: 10px;
    }

    .app-back-row {
        position: static;
        min-height: 40px;
        margin-bottom: 8px;
    }

    .app-back-navigation {
        min-height: 38px;
        padding: 7px 13px;
    }

    .page-head,
    .surface,
    .auth-panel,
    .item-card,
    .event-card,
    .metric,
    .card-body {
        padding: 14px;
    }

    .dashboard-tile-grid,
    .dashboard-news-grid,
    .event-grid,
    .people-card-grid,
    .progress-controls-grid {
        grid-template-columns: 1fr;
    }

    .course-participant-card {
        padding: 13px;
        border-radius: 18px;
    }

    .course-participant-signals {
        gap: 8px;
    }

    .course-signal-card {
        min-height: 78px;
        padding: 10px;
    }

    .course-signal-card strong {
        font-size: .92rem;
    }

    .filter-bar,
    .calendar-filter {
        gap: 8px;
    }

    .choice-buttons,
    .choice-buttons.compact,
    .event-inline-response div {
        grid-template-columns: 1fr;
    }

    .swim-aid-control {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .swim-aid-control strong {
        min-width: 0;
        text-align: left;
        font-size: 1.45rem;
    }

    .mobile-table td {
        display: grid;
        grid-template-columns: 1fr;
        text-align: left;
    }

    .mobile-table td::before {
        flex-basis: auto;
    }

    .mobile-table .btn,
    .event-actions .btn,
    .exam-actions .btn {
        width: 100%;
    }

    .app-nav-menu {
        padding: 10px;
    }

    .app-nav-menu .navbar-nav {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .app-nav-link {
        min-height: 48px;
        font-size: .98rem;
    }

    .header-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
    }

    .header-user {
        max-width: none;
        justify-self: start;
    }

    .header-actions .btn,
    .header-actions form,
    .header-actions form .btn {
        width: 100%;
    }

    .department-switcher {
        display: flex;
        width: 100%;
        border-radius: 12px;
    }

    .header-settings-link,
    .header-logout {
        justify-content: center;
    }

    .swimzy-floating-assistant {
        right: 14px;
        bottom: 14px;
        min-height: 58px;
        width: 58px;
        padding: 8px;
        justify-content: center;
    }

    .swimzy-floating-text {
        display: none;
    }

    .swimzy-widget-panel {
        right: 10px;
        bottom: 84px;
        width: calc(100vw - 20px);
        height: calc(100dvh - 104px);
        border-radius: 22px;
    }

    .mobile-tabbar {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        min-height: 64px;
        padding: 7px;
        border-radius: 22px;
    }

    .mobile-tabbar-item {
        min-height: 50px;
        border-radius: 16px;
        font-size: .66rem;
    }

    .mobile-tabbar-item i {
        font-size: 1.12rem;
    }
}

@media (min-width: 1200px) {
    .app-nav {
        min-height: 70px;
    }

    .app-nav-menu .navbar-nav {
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
    }

    .app-nav-link {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
    }

    .header-actions {
        flex: 0 0 auto;
        max-width: 440px;
        flex-wrap: nowrap;
    }

    .header-actions .department-switcher {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 165px;
    }

    .header-actions .department-switcher .form-select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: 125px;
        text-overflow: ellipsis;
    }

    .header-actions .header-context-switcher .form-select {
        max-width: 105px;
    }

    .header-actions .header-context-label {
        display: none;
    }
}

@media (min-width: 1200px) and (max-width: 1650px) {
    .app-brand-text {
        max-width: 210px;
    }

    .app-nav-link {
        gap: 5px;
        padding-left: .62rem !important;
        padding-right: .62rem !important;
        font-size: .94rem;
    }

    .header-user {
        display: none;
    }

    .header-settings-link {
        width: 38px;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .header-settings-link span:not(.header-settings-icon) {
        display: none;
    }
}

.settings-stack {
    display: grid;
    gap: 14px;
}

.setting-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.setting-toggle span {
    display: grid;
    gap: 4px;
}

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

.setting-toggle input[type="checkbox"] {
    flex: 0 0 auto;
    width: 52px;
    height: 30px;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(15, 23, 42, .45);
    position: relative;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.setting-toggle input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 14px rgba(2, 6, 23, .28);
    transition: transform .18s ease;
}

.setting-toggle input[type="checkbox"]:checked {
    border-color: color-mix(in srgb, var(--accent) 80%, white);
    background: linear-gradient(135deg, var(--accent), var(--primary));
}

.setting-toggle input[type="checkbox"]:checked::after {
    transform: translateX(22px);
}

body.theme-light .setting-toggle {
    border-color: rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .72);
}

body.theme-light .setting-toggle input[type="checkbox"] {
    border-color: rgba(15, 23, 42, .22);
    background: rgba(15, 23, 42, .14);
}

@media (max-width: 575.98px) {
    .setting-toggle {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* BLuCa visual redesign layer: centralized tokens and component polish only. */
:root {
    --bluca-bg: #07111F;
    --bluca-bg-elevated: #0B1626;
    --bluca-surface: #111D2C;
    --bluca-surface-hover: #162337;
    --bluca-border: rgba(255, 255, 255, .08);
    --bluca-border-strong: rgba(255, 255, 255, .14);
    --bluca-primary: #3B82F6;
    --bluca-primary-light: #38BDF8;
    --bluca-primary-hover: #60A5FA;
    --bluca-text: #F8FAFC;
    --bluca-text-secondary: #A8B5C7;
    --bluca-text-muted: #748296;
    --bluca-success: #34D399;
    --bluca-warning: #FBBF24;
    --bluca-danger: #F87171;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow-soft: 0 14px 34px rgba(0, 0, 0, .18);
    --shadow-elevated: 0 22px 58px rgba(0, 0, 0, .24);

    --bg: var(--bluca-bg);
    --ink: var(--bluca-text);
    --muted: var(--bluca-text-secondary);
    --line: var(--bluca-border);
    --panel: color-mix(in srgb, var(--bluca-surface), transparent 10%);
    --soft-panel: rgba(255, 255, 255, .045);
    --strong-panel: rgba(255, 255, 255, .075);
    --control-bg: rgba(248, 250, 252, .94);
    --control-shadow: none;
    --button-ink: #F8FAFC;
    --app-hero-start: #07111F;
    --app-hero-end: #0B1626;
    --nav-bg: rgba(7, 17, 31, .9);
    --nav-bg-end: rgba(11, 22, 38, .86);
    --nav-soft: rgba(255, 255, 255, .08);
}

/* Viele freigeschaltete Module benötigen auf Desktop mehr Platz als die
   ursprüngliche 1480-px-Navigation. Benutzername und Buttontexte werden bei
   Platzmangel reduziert, bevor sich Bedienelemente überlagern. */
@media (min-width: 1200px) {
    .app-nav-inner {
        max-width: 1760px;
    }

    .header-actions {
        flex-wrap: nowrap;
        max-width: 330px;
    }

    .header-user {
        display: none;
    }

    .header-settings-link {
        width: 40px;
        justify-content: center;
        padding-inline: 0;
    }

    .header-settings-link span:not(.header-settings-icon) {
        display: none;
    }
}

@media (min-width: 1200px) and (max-width: 1750px) {
    .app-brand-text {
        max-width: 190px;
    }

    .app-nav-link {
        gap: 4px;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        font-size: .9rem;
    }

    .header-user {
        display: none;
    }

    .header-settings-link {
        width: 40px;
        justify-content: center;
        padding-inline: 0;
    }

    .header-settings-link span:not(.header-settings-icon) {
        display: none;
    }
}

/* Kompakte Desktopansicht: Bei vielen freigeschalteten Modulen reicht die
   sichtbare Breite nicht für Navigation, Rollen- und Spartenauswahl. Sie gilt
   ohne obere Breitenbegrenzung, damit Browser-Zoom und sehr breite Anzeigen
   die vollständige Navigation nicht wieder in eine zu enge Zeile zwingen. */
@media (min-width: 1200px) {
    .app-nav-inner {
        position: relative;
        flex-wrap: nowrap;
    }

    .navbar-expand-xl .navbar-toggler {
        display: inline-flex;
        order: 2;
        margin-left: auto;
    }

    .navbar-expand-xl .navbar-collapse {
        display: none !important;
        position: absolute;
        z-index: 1080;
        top: calc(100% + 8px);
        right: 0;
        width: min(980px, calc(100vw - 32px));
        max-height: calc(100dvh - 92px);
        flex-basis: auto;
        padding: 14px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 18px;
        background: linear-gradient(135deg, color-mix(in srgb, var(--nav-bg) 96%, #07111f), color-mix(in srgb, var(--nav-bg-end) 96%, #07111f));
        box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    .navbar-expand-xl .navbar-collapse.show,
    .navbar-expand-xl .navbar-collapse.collapsing {
        display: block !important;
    }

    .navbar-expand-xl .navbar-collapse.collapsing {
        height: auto !important;
        transition: opacity .16s ease, transform .16s ease;
    }

    .mobile-nav-heading.d-xl-none {
        display: flex !important;
    }

    .app-nav-menu .navbar-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin-bottom: 10px !important;
    }

    .app-nav-link {
        width: 100%;
        min-height: 44px;
        padding-inline: .75rem !important;
    }

    .header-actions {
        display: flex;
        width: 100%;
        max-width: none;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .header-actions .department-switcher {
        min-width: 190px;
        max-width: 260px;
    }

    .header-actions .department-switcher .form-select,
    .header-actions .header-context-switcher .form-select {
        max-width: 180px;
    }

    .header-actions .header-context-label {
        display: inline;
    }

    .app-dropdown {
        max-height: min(68vh, 620px);
        overflow-y: auto;
    }
}

.package-module-picker { margin:1rem 0; padding:1rem; border:1px solid var(--line); border-radius:14px; }
.package-module-picker legend { float:none; width:auto; margin:0; padding:0 .35rem; font-size:1rem; font-weight:800; }
.package-module-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.55rem; }
.package-module-grid label { display:flex; align-items:flex-start; gap:.65rem; padding:.75rem; border:1px solid var(--line); border-radius:12px; background:var(--soft-panel); cursor:pointer; }
.package-module-grid label span { display:grid; gap:.2rem; }
.package-module-grid label small { color:var(--muted); font-size:.75rem; }
.package-included-modules { margin:1rem 0; padding:1rem; border-radius:14px; background:color-mix(in srgb,var(--primary) 7%,transparent); }
.package-included-modules ul { display:grid; gap:.45rem; margin:.7rem 0 0; padding:0; list-style:none; }
.package-included-modules li { display:flex; gap:.55rem; align-items:center; }
.package-included-modules i { color:#169b62; }
.package-cost-overview { display:grid; gap:.65rem; min-width:min(390px,100%); padding:1rem; border:1px solid color-mix(in srgb,var(--primary) 36%,var(--line)); border-radius:18px; background:color-mix(in srgb,var(--panel) 82%,transparent); }
.package-cost-total { display:grid; grid-template-columns:1fr auto; gap:.15rem 1rem; align-items:end; }
.package-cost-total>span,.package-cost-total>small { color:var(--muted); font-size:.76rem; }
.package-cost-total>small { grid-column:1/-1; }
.package-cost-total>strong { color:var(--ink); font-size:1.45rem; white-space:nowrap; }
.package-cost-total>strong small { color:var(--muted); font-size:.72rem; }
.package-cost-overview details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.package-cost-overview summary { padding:.55rem 0; color:var(--ink); font-weight:800; cursor:pointer; }
.package-cost-lines { display:grid; gap:.4rem; padding:0 0 .65rem; }
.package-cost-lines div { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.76rem; }
.package-cost-lines strong { color:var(--ink); text-align:right; }
.package-cost-overview .trial-promise { width:100%; margin:0; }

@media (max-width: 900px) {
    .package-cost-overview { width:100%; min-width:0; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .app-nav-menu .navbar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .dashboard-tile-toolbar { align-items: stretch; flex-direction: column; }
    .dashboard-tile-toolbar .btn { width: 100%; }
}

:root[data-theme="dark"] {
    --bg: #07111F;
    --ink: #F8FAFC;
    --muted: #A8B5C7;
    --line: rgba(255, 255, 255, .08);
    --panel: rgba(17, 29, 44, .88);
    --soft-panel: rgba(255, 255, 255, .045);
    --strong-panel: rgba(255, 255, 255, .075);
    --control-bg: rgba(248, 250, 252, .94);
    --control-shadow: none;
    --nav-bg: rgba(7, 17, 31, .92);
    --nav-bg-end: rgba(11, 22, 38, .88);
}

body {
    background:
        radial-gradient(circle at 18% -8%, rgba(59, 130, 246, .20), transparent 32vw),
        radial-gradient(circle at 92% 10%, rgba(56, 189, 248, .10), transparent 34vw),
        linear-gradient(135deg, var(--bluca-bg) 0%, var(--bluca-bg-elevated) 52%, #06101F 100%);
    color: var(--bluca-text);
    font-family: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-nav {
    background: linear-gradient(90deg, rgba(7, 17, 31, .94), rgba(11, 22, 38, .9));
    border-bottom: 1px solid var(--bluca-border);
    box-shadow: none;
}

.app-nav-inner {
    min-height: 68px;
}

.app-brand {
    gap: 12px;
    font-weight: 760;
    letter-spacing: -.025em;
}

.brand-mark {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
    overflow: hidden;
}

.brand-mark::before,
.brand-mark::after {
    content: "";
    position: absolute;
    left: 5px;
    width: 28px;
    background: linear-gradient(135deg, #2563EB 0%, #38BDF8 100%);
    box-shadow: 0 12px 28px rgba(37, 99, 235, .28);
}

.brand-mark::before {
    top: 6px;
    height: 13px;
    border-radius: 0 13px 13px 0;
}

.brand-mark::after {
    bottom: 6px;
    height: 18px;
    border-radius: 0 15px 15px 0;
    transform: skewY(-8deg);
    transform-origin: left center;
}

.brand-logo {
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,.12);
}

.app-brand-text {
    font-weight: 780;
}

.app-nav-link {
    border-radius: 14px;
    color: color-mix(in srgb, var(--bluca-text-secondary), #ffffff 8%) !important;
    font-weight: 680;
}

.app-nav-link:hover,
.app-nav-link:focus,
.navbar-nav .nav-link.show {
    background: rgba(255, 255, 255, .055);
    color: var(--bluca-text) !important;
}

.app-dropdown {
    border: 1px solid var(--bluca-border-strong);
    border-radius: 18px;
    background: rgba(11, 22, 38, .96);
    box-shadow: var(--shadow-elevated);
    backdrop-filter: blur(20px);
}

.app-dropdown .dropdown-item {
    color: var(--bluca-text-secondary);
    border-radius: 12px;
}

.app-dropdown .dropdown-item:hover,
.app-dropdown .dropdown-item:focus {
    color: var(--bluca-text);
    background: rgba(59, 130, 246, .14);
}

.header-actions .btn,
.header-actions form .btn,
.btn {
    min-height: 42px;
    border-radius: 14px;
    font-weight: 700;
}

.btn-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: linear-gradient(135deg, #2563EB, #38BDF8) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(37, 99, 235, .20);
}

.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 18px 38px rgba(37, 99, 235, .26);
}

.btn-outline-primary {
    border-color: rgba(56, 189, 248, .42) !important;
    color: var(--bluca-primary-light) !important;
    background: rgba(56, 189, 248, .06) !important;
}

.btn-light,
.btn-outline-light,
.btn-secondary {
    border-color: var(--bluca-border-strong) !important;
    background: rgba(255, 255, 255, .055) !important;
    color: var(--bluca-text) !important;
}

.app-shell {
    max-width: 1480px;
    padding-top: clamp(16px, 2.5vw, 28px);
}

.page-head,
.dashboard-hero,
.event-card,
.surface,
.card,
.dashboard-news-card,
.dashboard-news-empty,
.table-responsive,
.table-wrap,
.chat-thread,
.chat-compose-bar,
.trainer-note-box,
.brand-preview,
.dashboard-tile-settings-row {
    border-color: var(--bluca-border);
    border-radius: var(--radius-lg);
    background: var(--bluca-surface-card, rgba(17, 29, 44, .95));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.card-header,
.card-footer {
    border-color: var(--bluca-border);
    background: rgba(255, 255, 255, .025);
}

.page-head,
.dashboard-hero {
    background:
        linear-gradient(135deg, rgba(59, 130, 246, .10), transparent 54%),
        var(--bluca-surface-header, rgba(17, 29, 44, .95));
}

.page-head h1,
.dashboard-hero h1,
.section-head h1,
.section-head h2 {
    letter-spacing: -.045em;
    font-weight: 780;
}

.dashboard-tile {
    min-height: 150px;
    border-color: var(--bluca-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(59, 130, 246, .10), transparent 55%),
        rgba(17, 29, 44, .82);
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
}

.dashboard-tile:hover,
.dashboard-tile:focus {
    border-color: rgba(56, 189, 248, .42);
    box-shadow: 0 18px 38px rgba(37, 99, 235, .14);
}

.dashboard-tile-icon,
.dashboard-news-icon {
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: 16px;
    background: rgba(56, 189, 248, .12);
    color: var(--bluca-primary-light);
    box-shadow: none;
}

.dashboard-tile small,
.dashboard-news-card p,
.event-card span,
.text-muted,
small,
.form-text {
    color: var(--bluca-text-secondary) !important;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
    min-height: 44px;
    border-color: var(--bluca-border-strong) !important;
    border-radius: 14px;
    background: rgba(248, 250, 252, .96) !important;
    color: #07111F !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #07111F;
    caret-color: #07111F;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
    border-color: var(--bluca-primary-light) !important;
    background: #FFFFFF !important;
    color: #07111F !important;
    box-shadow: 0 0 0 .22rem rgba(56, 189, 248, .18) !important;
    -webkit-text-fill-color: #07111F;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: #64748B !important;
    opacity: 1;
    -webkit-text-fill-color: #64748B;
}

.form-select option,
.form-select optgroup {
    background-color: #FFFFFF !important;
    color: #07111F !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #07111F !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    caret-color: #07111F;
}

.table {
    color: var(--bluca-text);
    border-color: var(--bluca-border);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--bluca-border);
    background: transparent;
}

.table-hover > tbody > tr:hover > * {
    background: rgba(56, 189, 248, .07);
    color: var(--bluca-text);
}

.badge,
.dashboard-hero-meta span,
.dashboard-news-meta span,
.status-pill {
    border-radius: 999px;
    font-weight: 720;
}

.mobile-tabbar {
    border: 1px solid var(--bluca-border-strong);
    background: rgba(7, 17, 31, .94);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
    backdrop-filter: blur(22px);
}

.mobile-tabbar-item {
    color: var(--bluca-text-secondary);
    border-radius: 16px;
}

.mobile-tabbar-item.active,
.mobile-tabbar-item:focus-visible,
.mobile-tabbar-item:hover {
    background: rgba(56, 189, 248, .14);
    color: var(--bluca-text);
    box-shadow: none;
}

.nav-unread-badge {
    background: #EF4444;
    color: #fff;
    box-shadow: none;
}

.swimzy-floating-assistant,
.swimzy-widget-panel {
    border-color: var(--bluca-border-strong);
    background: rgba(11, 22, 38, .94);
    box-shadow: var(--shadow-elevated);
}

:focus-visible {
    outline: 3px solid rgba(56, 189, 248, .55);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .app-shell {
        padding-inline: 14px;
    }

    .page-head,
    .dashboard-hero,
    .event-card,
    .card,
    .surface {
        border-radius: 18px;
        box-shadow: none;
    }

    .dashboard-tile-grid {
        gap: 12px;
    }
}

.app-brand-copy {
    display: grid;
    min-width: 0;
    line-height: 1.05;
}

.app-brand-powered {
    margin-top: 3px;
    color: var(--bluca-text-muted);
    font-size: .68rem;
    font-weight: 680;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 520px) {
    .app-brand-powered {
        display: none;
    }
}

/* Restore real light/dark separation for the BLuCa app theme. */
:root:not([data-theme="dark"]) {
    --bluca-bg: #F4F7FB;
    --bluca-bg-elevated: #FFFFFF;
    --bluca-surface: #FFFFFF;
    --bluca-surface-hover: #EEF5FF;
    --bluca-border: rgba(15, 23, 42, .10);
    --bluca-border-strong: rgba(15, 23, 42, .16);
    --bluca-text: #07111F;
    --bluca-text-secondary: #475569;
    --bluca-text-muted: #64748B;
    --shadow-soft: 0 12px 30px rgba(15, 23, 42, .08);
    --shadow-elevated: 0 22px 58px rgba(15, 23, 42, .12);

    --bg: #F4F7FB;
    --ink: #07111F;
    --muted: #475569;
    --line: rgba(15, 23, 42, .10);
    --panel: rgba(255, 255, 255, .92);
    --soft-panel: rgba(255, 255, 255, .78);
    --strong-panel: rgba(255, 255, 255, .94);
    --control-bg: #FFFFFF;
    --nav-bg: rgba(255, 255, 255, .92);
    --nav-bg-end: rgba(239, 246, 255, .9);
    --nav-ink: #07111F;
    --nav-soft: rgba(15, 23, 42, .06);
    --app-hero-start: #F8FAFC;
    --app-hero-end: #EAF3FF;
}

:root:not([data-theme="dark"]) body {
    background:
        radial-gradient(circle at 18% -8%, rgba(59, 130, 246, .18), transparent 32vw),
        radial-gradient(circle at 92% 10%, rgba(56, 189, 248, .12), transparent 34vw),
        linear-gradient(135deg, #F8FAFC 0%, #EEF6FF 52%, #F4F7FB 100%);
    color: var(--bluca-text);
}

:root:not([data-theme="dark"]) .app-nav {
    background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(239, 246, 255, .9));
    border-bottom-color: rgba(15, 23, 42, .10);
}

:root:not([data-theme="dark"]) .app-brand,
:root:not([data-theme="dark"]) .app-brand-text,
:root:not([data-theme="dark"]) .app-nav-link,
:root:not([data-theme="dark"]) .header-user {
    color: #07111F !important;
}

:root:not([data-theme="dark"]) .app-nav-link:hover,
:root:not([data-theme="dark"]) .app-nav-link:focus,
:root:not([data-theme="dark"]) .navbar-nav .nav-link.show {
    background: rgba(59, 130, 246, .09);
    color: #07111F !important;
}

:root:not([data-theme="dark"]) .app-dropdown {
    background: rgba(255, 255, 255, .98);
    border-color: rgba(15, 23, 42, .12);
    box-shadow: var(--shadow-elevated);
}

:root:not([data-theme="dark"]) .app-dropdown .dropdown-item {
    color: #334155;
}

:root:not([data-theme="dark"]) .app-dropdown .dropdown-item:hover,
:root:not([data-theme="dark"]) .app-dropdown .dropdown-item:focus {
    color: #07111F;
    background: rgba(59, 130, 246, .10);
}

:root:not([data-theme="dark"]) .page-head,
:root:not([data-theme="dark"]) .dashboard-hero,
:root:not([data-theme="dark"]) .event-card,
:root:not([data-theme="dark"]) .surface,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .dashboard-news-card,
:root:not([data-theme="dark"]) .dashboard-news-empty,
:root:not([data-theme="dark"]) .table-responsive,
:root:not([data-theme="dark"]) .table-wrap,
:root:not([data-theme="dark"]) .chat-thread,
:root:not([data-theme="dark"]) .chat-compose-bar,
:root:not([data-theme="dark"]) .trainer-note-box,
:root:not([data-theme="dark"]) .brand-preview,
:root:not([data-theme="dark"]) .dashboard-tile-settings-row {
    border-color: rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .92);
    color: #07111F;
}

:root:not([data-theme="dark"]) .page-head,
:root:not([data-theme="dark"]) .dashboard-hero,
:root:not([data-theme="dark"]) .dashboard-tile {
    background:
        linear-gradient(135deg, rgba(59, 130, 246, .10), transparent 58%),
        rgba(255, 255, 255, .94);
}

:root:not([data-theme="dark"]) .dashboard-tile {
    border-color: rgba(15, 23, 42, .10);
    color: #07111F;
}

:root:not([data-theme="dark"]) .dashboard-tile:hover,
:root:not([data-theme="dark"]) .dashboard-tile:focus {
    color: #07111F;
}

:root:not([data-theme="dark"]) .card-header,
:root:not([data-theme="dark"]) .card-footer {
    background: rgba(248, 250, 252, .78);
    border-color: rgba(15, 23, 42, .10);
}

:root:not([data-theme="dark"]) .table {
    color: #07111F;
}

:root:not([data-theme="dark"]) .table > :not(caption) > * > * {
    border-bottom-color: rgba(15, 23, 42, .10);
}

:root:not([data-theme="dark"]) .table-hover > tbody > tr:hover > * {
    color: #07111F;
    background: rgba(59, 130, 246, .07);
}

:root:not([data-theme="dark"]) .btn-light,
:root:not([data-theme="dark"]) .btn-outline-light,
:root:not([data-theme="dark"]) .btn-secondary {
    border-color: rgba(15, 23, 42, .14) !important;
    background: rgba(255, 255, 255, .78) !important;
    color: #07111F !important;
}

:root:not([data-theme="dark"]) .mobile-tabbar {
    border-color: rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .14);
}

:root:not([data-theme="dark"]) .mobile-tabbar-item {
    color: #475569;
}

:root:not([data-theme="dark"]) .mobile-tabbar-item.active,
:root:not([data-theme="dark"]) .mobile-tabbar-item:focus-visible,
:root:not([data-theme="dark"]) .mobile-tabbar-item:hover {
    background: rgba(59, 130, 246, .12);
    color: #07111F;
}

:root[data-theme="dark"] body {
    background:
        radial-gradient(circle at 18% -8%, rgba(59, 130, 246, .20), transparent 32vw),
        radial-gradient(circle at 92% 10%, rgba(56, 189, 248, .10), transparent 34vw),
        linear-gradient(135deg, #07111F 0%, #0B1626 52%, #06101F 100%);
    color: var(--bluca-text);
}

.trainer-event-actions {
    scroll-margin-top: 92px;
}

.trainer-event-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.trainer-event-action {
    display: grid;
    gap: 6px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel), transparent 12%);
    color: var(--ink);
    text-decoration: none;
}

.trainer-event-action:hover,
.trainer-event-action:focus {
    border-color: var(--primary);
    color: var(--ink);
    transform: translateY(-1px);
}

.trainer-event-action span,
.athlete-link {
    color: var(--muted);
}

.athlete-link {
    font-weight: 800;
    text-decoration: none;
}

.athlete-link:hover,
.athlete-link:focus {
    color: var(--primary);
    text-decoration: underline;
}

.training-plan-editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    line-height: 1.55;
    resize: vertical;
}

@media (max-width: 760px) {
    .trainer-event-actions > .section-head,
    .training-plan-section > .section-head {
        flex-direction: column;
        align-items: stretch !important;
    }

    .trainer-event-actions > .section-head > .btn,
    .training-plan-section > .section-head > .btn {
        display: inline-flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Digitaler Schwimmpass */
.swim-pass-page-head {
    align-items: flex-end;
}

.swim-pass-person-switch {
    min-width: min(100%, 320px);
}

.swim-pass-head-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.swim-pass-head-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.swim-pass-app-grid {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) repeat(2, minmax(280px, 1fr));
    gap: 16px;
}

.swim-pass-profile-card,
.swim-pass-section-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary), transparent 92%), transparent 58%),
        color-mix(in srgb, var(--panel), transparent 4%);
    box-shadow: var(--shadow-soft);
}

.swim-pass-profile-card {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    min-height: 260px;
    padding: 24px;
    text-align: center;
}

.swim-pass-profile-card h2 {
    margin: 12px 0 4px;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.swim-pass-profile-card p {
    margin: 0;
    color: var(--muted);
}

.swim-pass-profile-avatar {
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary), transparent 60%);
    border-radius: 28px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary), transparent 88%);
    font-size: 4rem;
}

.swim-pass-section-card {
    padding: 18px;
}

.swim-pass-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.swim-pass-data-grid div,
.swim-pass-current-badge,
.swim-pass-verification-box {
    display: grid;
    gap: 5px;
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--soft-panel), transparent 6%);
}

.swim-pass-data-grid span,
.swim-pass-current-badge span,
.swim-pass-verification-box span,
.swim-pass-badge-details span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.swim-pass-data-grid strong,
.swim-pass-current-badge strong,
.swim-pass-verification-box strong {
    color: var(--ink);
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.22;
}

.swim-pass-main-card {
    grid-column: span 3;
}

.swim-pass-status-grid {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: stretch;
}

.swim-pass-current-badge i {
    color: var(--primary);
    font-size: 2rem;
}

.swim-pass-verification-box strong {
    color: #19a15f;
}

.swim-pass-verification-box small {
    color: var(--muted);
    font-weight: 800;
}

.bluca-assistant-avatar {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--primary) 58%, #fff 42%);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--primary), var(--accent));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 28%, transparent);
}

.bluca-assistant-avatar::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.52), transparent 38%), var(--primary-dark);
}

.bluca-assistant-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}

.swim-pass-qr-modern {
    display: grid;
    grid-template-columns: repeat(7, 10px);
    align-content: center;
    gap: 3px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.12);
}

.swim-pass-qr-modern span {
    width: 10px;
    height: 10px;
    background: #fff;
}

.swim-pass-qr-modern span.dark {
    background: #07111F;
}

.swim-pass-badge-table {
    display: grid;
    gap: 12px;
}

.swim-pass-badge-row {
    display: grid;
    grid-template-columns: 58px minmax(160px, .5fr) minmax(0, 1.5fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--soft-panel), transparent 8%);
}

.swim-pass-badge-row.is-achieved {
    border-color: color-mix(in srgb, #19a15f, var(--line) 45%);
}

.swim-pass-badge-row.is-pending {
    border-color: color-mix(in srgb, var(--primary), var(--line) 48%);
}

.swim-pass-badge-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary), transparent 86%);
    font-size: 1.6rem;
    overflow: hidden;
}

.swim-pass-badge-icon img {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(2, 8, 23, .2);
}

.swim-pass-badge-core h3 {
    margin: 0 0 5px;
    font-size: 1.2rem;
    font-weight: 900;
}

.swim-pass-badge-core span {
    color: var(--muted);
    font-weight: 800;
}

.swim-pass-badge-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.swim-pass-badge-details div {
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel), transparent 12%);
}

.swim-pass-badge-details strong {
    color: var(--ink);
    font-size: .88rem;
    line-height: 1.22;
}

.swim-pass-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.swim-pass-history-list,
.swim-pass-check-list {
    display: grid;
    gap: 10px;
}

.swim-pass-history-list div,
.swim-pass-check-list div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--soft-panel), transparent 8%);
}

.swim-pass-history-list time {
    color: var(--muted);
    font-weight: 850;
}

.swim-pass-history-list strong,
.swim-pass-check-list span {
    color: var(--ink);
    font-weight: 850;
}

.swim-pass-history-list span {
    color: var(--muted);
    font-weight: 800;
}

.swim-pass-check-list div {
    grid-template-columns: 28px minmax(0, 1fr);
}

.swim-pass-check-list i {
    color: #19a15f;
    font-size: 1.2rem;
}

.swim-pass-check-list .bi-circle {
    color: var(--muted);
}

.swim-pass-verification-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.swim-pass-verification-form button {
    min-height: 46px;
}

.swim-pass-verification-list {
    display: grid;
    gap: 12px;
}

.swim-pass-verification-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel), transparent 2%);
}

.swim-pass-verification-item > div {
    display: grid;
    gap: 5px;
}

.swim-pass-verification-item strong {
    color: var(--ink);
    font-size: 1.1rem;
}

.swim-pass-verification-item span,
.swim-pass-verification-item small {
    color: var(--muted);
    font-weight: 750;
}

.swim-pass-verification-item.status-abgelehnt {
    border-color: color-mix(in srgb, #ef4444, var(--line) 38%);
    background: linear-gradient(135deg, color-mix(in srgb, #ef4444, transparent 90%), color-mix(in srgb, var(--panel), transparent 2%));
}

.swim-pass-rejected-note {
    color: #ef4444 !important;
}

.swim-pass-review-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
}

@media (max-width: 1100px) {
    .swim-pass-app-grid,
    .swim-pass-bottom-grid {
        grid-template-columns: 1fr;
    }

    .swim-pass-main-card {
        grid-column: auto;
    }

    .swim-pass-status-grid,
    .swim-pass-badge-row {
        grid-template-columns: 1fr;
    }

    .swim-pass-qr-modern {
        width: max-content;
    }
}

@media (max-width: 720px) {
    .swim-pass-page-head {
        align-items: stretch;
    }

    .swim-pass-head-actions {
        align-items: stretch;
        justify-content: stretch;
    }

    .swim-pass-head-actions .btn,
    .swim-pass-head-actions .swim-pass-person-switch {
        width: 100%;
    }

    .swim-pass-data-grid,
    .swim-pass-badge-details,
    .swim-pass-verification-form,
    .swim-pass-verification-item,
    .swim-pass-review-form {
        grid-template-columns: 1fr;
    }

    .swim-pass-history-list div {
        grid-template-columns: 1fr;
    }
}

/* Eltern-/Athleten-Vorzeigeansicht fuer den digitalen Schwimmpass */
.pass-present-shell {
    display: grid;
    place-items: start center;
    min-height: calc(100vh - 110px);
    padding: clamp(10px, 3vw, 26px) 0 34px;
}

.pass-present-card {
    width: min(100%, 620px);
    display: grid;
    gap: 22px;
    padding: clamp(18px, 4vw, 32px);
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 32px;
    color: #f8fbff;
    background:
        radial-gradient(circle at 14% 8%, rgba(59, 130, 246, .26), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(56, 189, 248, .14), transparent 28%),
        linear-gradient(145deg, #06101f 0%, #091a35 48%, #041025 100%);
    box-shadow: 0 28px 80px rgba(0, 18, 50, .34);
}

.pass-present-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pass-present-brand strong {
    font-size: 2rem;
    letter-spacing: -.04em;
}

.pass-present-mark {
    position: relative;
    width: 54px;
    height: 54px;
}

.pass-present-mark::before,
.pass-present-mark::after {
    content: "";
    position: absolute;
    left: 0;
    width: 42px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.pass-present-mark::before {
    top: 7px;
    height: 18px;
    border-radius: 0 18px 18px 0;
}

.pass-present-mark::after {
    bottom: 7px;
    height: 23px;
    border-radius: 0 20px 20px 0;
    transform: skewY(-8deg);
}

.pass-present-menu {
    margin-left: auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(255,255,255,.05);
    font-size: 1.5rem;
}

.pass-present-title h1 {
    margin: 0;
    font-size: clamp(2.2rem, 8vw, 3.6rem);
    font-weight: 900;
    letter-spacing: -.055em;
}

.pass-present-title .eyebrow {
    color: #7dd3fc;
}

.pass-present-actions {
    display: flex;
    justify-content: flex-end;
}

.pass-present-actions .btn {
    border-radius: 999px;
    font-weight: 850;
}

.pass-present-switch .form-select {
    background: rgba(255,255,255,.96) !important;
}

.pass-present-id {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 150px;
    gap: 20px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(96, 165, 250, .24);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(30, 64, 175, .26), rgba(15, 23, 42, .58));
}

.pass-present-avatar {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 165, 250, .44);
    border-radius: 50%;
    color: #bfdbfe;
    background: radial-gradient(circle at 45% 28%, #38bdf8, #1d4ed8 72%);
    font-size: 3.4rem;
}

.pass-present-person h2 {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 900;
    letter-spacing: -.035em;
}

.pass-present-person div {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    color: #dbeafe;
}

.pass-present-person span,
.pass-present-verify span,
.pass-present-badge-meta span {
    color: #60a5fa;
    font-size: .82rem;
    font-weight: 800;
}

.pass-present-person strong.valid {
    color: #a3e635;
}

.pass-present-verify {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding-left: 18px;
    border-left: 1px solid rgba(255,255,255,.12);
    text-align: center;
}

.pass-present-qr {
    display: grid;
    grid-template-columns: repeat(7, 11px);
    gap: 3px;
    padding: 9px;
    border-radius: 10px;
    background: #fff;
}

.pass-present-qr b {
    width: 11px;
    height: 11px;
    background: #fff;
}

.pass-present-qr b.dark {
    background: #07111f;
}

.pass-present-section-title {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -.025em;
}

.pass-present-badges {
    display: grid;
    gap: 12px;
}

.pass-present-badge {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 42px;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(30, 64, 175, .18), rgba(15, 23, 42, .46));
}

.pass-present-medal {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 4px solid rgba(255,255,255,.72);
    border-radius: 50%;
    color: #fff;
    font-size: 1.8rem;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(0,0,0,.28);
}

.pass-present-medal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
}

.pass-present-badge-main h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 900;
}

.pass-present-badge-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.pass-present-badge-meta div {
    display: grid;
    gap: 3px;
}

.pass-present-badge-meta strong {
    font-size: .92rem;
    font-weight: 750;
}

.pass-present-proof-link {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid rgba(125,211,252,.45);
    border-radius: 999px;
    background: rgba(14,165,233,.14);
    color: #e0f2fe;
    font-weight: 850;
    text-decoration: none;
}

.pass-present-proof-link:hover {
    color: #ffffff;
    background: rgba(14,165,233,.24);
}

.pass-present-check {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #fff;
    font-size: 1.35rem;
}

.pass-present-validity {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
    box-shadow: 0 18px 42px rgba(14, 165, 233, .18);
}

.pass-present-validity > span {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    font-size: 2rem;
}

.pass-present-validity strong {
    display: block;
    font-size: 1.45rem;
}

.pass-present-validity small {
    color: rgba(255,255,255,.82);
}

@media (max-width: 680px) {
    .pass-present-card {
        width: calc(100vw - 18px);
        border-radius: 26px;
    }

    .pass-present-id,
    .pass-present-badge,
    .pass-present-validity {
        grid-template-columns: 1fr;
    }

    .pass-present-verify {
        padding-left: 0;
        padding-top: 14px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .pass-present-badge-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;align-items:end}.settings-grid label:not(.form-check){display:grid;gap:.45rem;font-weight:700}.settings-grid .form-check{align-self:center}.member-card-search{max-width:34rem}.validity-form{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(8rem,1fr) auto;gap:.4rem;min-width:25rem}.member-card-verification.is-pending .verification-symbol{background:#e9f3ff;color:#1268d6}@media(max-width:700px){.validity-form{grid-template-columns:1fr;min-width:11rem}}

/* Vereinsdesign Premium */
.premium-design-page-head > div:first-child {
    max-width: 760px;
}

.premium-design-page-head > div:first-child > p:last-child {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.premium-head-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.premium-club-switcher {
    display: grid;
    gap: 5px;
    min-width: min(310px, 100%);
}

.premium-club-switcher label {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.premium-design-workspace {
    display: grid;
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.premium-version-panel {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 16px;
    max-height: calc(100dvh - 112px);
    overflow: auto;
}

.premium-editor-column {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.premium-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.premium-panel-heading h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

.premium-count,
.premium-id-badge,
.premium-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft-panel);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}

.premium-live-badge {
    color: #75e4a7;
}

.premium-live-badge i {
    font-size: .48rem;
}

.premium-empty-state {
    padding: 28px 18px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    text-align: center;
}

.premium-empty-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 13px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--primary), transparent 84%);
    color: var(--accent);
    font-size: 1.35rem;
}

.premium-empty-state h3 {
    margin: 0 0 5px;
    font-size: 1rem;
}

.premium-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
}

.premium-version-list {
    display: grid;
    gap: 10px;
}

.premium-version-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--panel), transparent 4%);
    transition: border-color .16s ease, transform .16s ease;
}

.premium-version-card.selected {
    border-color: color-mix(in srgb, var(--primary), transparent 20%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--primary), transparent 90%);
}

.premium-version-main {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
    color: var(--ink);
    text-decoration: none;
}

.premium-version-main > span:nth-child(2) {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.premium-version-main strong,
.premium-version-main small {
    overflow-wrap: anywhere;
}

.premium-version-main small {
    color: var(--muted);
    font-size: .73rem;
}

.premium-version-swatch {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255,255,255,.24);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--version-primary), var(--version-accent));
}

.premium-effective-badge {
    grid-column: 2;
    justify-self: start;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(47, 158, 106, .16);
    color: #75e4a7;
    font-size: .66rem;
}

.premium-version-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 13px 13px 59px;
}

.premium-version-actions .btn {
    padding: 5px 9px;
    font-size: .7rem;
}

.premium-basis-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary), transparent 92%);
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}

.premium-design-editor {
    display: grid;
    gap: 17px;
}

.premium-form-section {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--soft-panel), transparent 14%);
}

.premium-section-title {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 17px;
}

.premium-section-title > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: .75rem;
    font-weight: 900;
}

.premium-section-title h3 {
    margin: 0 0 3px;
    font-size: 1rem;
}

.premium-section-title p {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
}

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

.premium-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.premium-field > span:first-child {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.premium-field small {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.4;
}

.premium-field.field-wide {
    grid-column: 1 / -1;
}

.premium-field .form-control,
.premium-field .form-select {
    min-height: 48px;
    border-radius: 10px;
}

.premium-field textarea.form-control {
    min-height: 84px;
    resize: vertical;
}

.premium-color-input {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
}

.premium-color-input input {
    width: 44px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.premium-color-input b {
    color: var(--ink);
    font-size: .82rem;
    text-transform: uppercase;
}

.premium-schedule-hint {
    display: flex;
    gap: 8px;
    margin: 13px 0 0;
    color: var(--muted);
    font-size: .76rem;
}

.premium-save-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--primary), transparent 58%);
    border-radius: 13px;
    background: color-mix(in srgb, var(--primary), transparent 91%);
}

.premium-save-bar > div {
    display: grid;
    gap: 3px;
}

.premium-save-bar span {
    color: var(--muted);
    font-size: .76rem;
}

.premium-preview-panel {
    display: grid;
    gap: 18px;
}

.premium-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.premium-preview-grid > div {
    min-width: 0;
}

.premium-preview-grid > div > h3 {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.premium-card-preview {
    position: relative;
    display: grid;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 24px;
    background: radial-gradient(circle at 88% 12%, var(--premium-accent), transparent 34%), linear-gradient(145deg, var(--premium-primary), #06152a 76%);
    color: #fff;
    box-shadow: 0 22px 46px rgba(4, 19, 40, .28);
}

.premium-card-preview.premium-wave::before,
.digital-member-card.premium-wave::before {
    content: "";
    position: absolute;
    inset: 42% -18% -50%;
    border: 2px solid rgba(255,255,255,.18);
    border-radius: 50% 50% 0 0;
    transform: rotate(-8deg);
}

.premium-card-preview.premium-minimal,
.digital-member-card.premium-minimal {
    background: linear-gradient(160deg, color-mix(in srgb, var(--premium-primary, var(--card-primary)) 18%, #fff), #fff 68%);
    color: #10213c;
    border-color: color-mix(in srgb, var(--premium-primary, var(--card-primary)) 28%, transparent);
}

.premium-card-preview.premium-dark,
.digital-member-card.premium-dark {
    background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--premium-accent, var(--card-accent)) 38%, transparent), transparent 32%), linear-gradient(145deg, #111827, #030712 78%);
}

.premium-card-preview header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px;
    background: rgba(0,0,0,.12);
}

.premium-card-preview header img,
.premium-preview-logo {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,.95);
    color: var(--premium-primary);
    font-weight: 900;
}

.premium-card-preview header div {
    display: grid;
}

.premium-card-preview header small {
    color: rgba(255,255,255,.68);
}

.premium-minimal header small,
.premium-minimal .premium-preview-person small,
.premium-minimal .premium-preview-person p {
    color: #5d6d82;
}

.premium-preview-person {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 18px;
}

.premium-preview-person > span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 50%;
    background: rgba(255,255,255,.13);
    font-size: 1.15rem;
    font-weight: 900;
}

.premium-preview-person div {
    display: grid;
    gap: 2px;
}

.premium-preview-person small,
.premium-preview-person p {
    margin: 0;
    color: rgba(255,255,255,.7);
    font-size: .72rem;
}

.premium-preview-person strong {
    font-size: 1.25rem;
}

.premium-preview-code {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 18px);
    grid-template-rows: repeat(2, 18px);
    place-content: center;
    width: 96px;
    height: 96px;
    gap: 5px;
    margin: 0 18px 18px auto;
    border-radius: 15px;
    background: #fff;
}

.premium-preview-code span {
    border: 4px solid #101827;
}

.premium-preview-code b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #101827;
    font-size: .65rem;
}

.premium-card-preview footer {
    position: relative;
    z-index: 1;
    align-self: end;
    padding: 13px 17px;
    border-top: 1px solid rgba(255,255,255,.14);
    color: inherit;
    font-size: .72rem;
    font-weight: 700;
}

.premium-email-preview {
    overflow: hidden;
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #f7fbff;
    color: #10213c;
    box-shadow: 0 20px 42px rgba(4, 19, 40, .16);
}

.premium-email-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px 20px;
    background: linear-gradient(135deg, var(--premium-primary), color-mix(in srgb, var(--premium-primary) 62%, #06152a));
    color: #fff;
}

.premium-email-brand span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    color: var(--premium-primary);
    font-weight: 900;
}

.premium-email-body {
    display: grid;
    gap: 13px;
    padding: 24px 22px;
}

.premium-email-body h4,
.premium-email-body p {
    margin: 0;
}

.premium-email-body p {
    color: #5f7188;
    font-size: .82rem;
    line-height: 1.55;
}

.premium-email-button {
    justify-self: start;
    padding: 10px 14px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--premium-primary), var(--premium-accent));
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

.premium-email-body small {
    padding-top: 12px;
    border-top: 1px solid #dce7f1;
    color: #77879a;
    font-size: .68rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .premium-design-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .premium-version-panel {
        position: static;
        max-height: none;
    }

    .premium-version-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .premium-head-actions,
    .premium-club-switcher {
        width: 100%;
    }

    .premium-design-page-head .btn,
    .premium-save-bar .btn {
        width: 100%;
    }

    .premium-version-list,
    .premium-form-grid,
    .premium-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .premium-field.field-wide {
        grid-column: auto;
    }

    .premium-form-section {
        padding: 16px;
    }

    .premium-save-bar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Vorteilsprogramm */
.benefit-page-head,.benefit-catalog-head{align-items:flex-end}.benefit-head-actions{display:flex;align-items:flex-end;gap:10px}.benefit-club-switcher{display:grid;gap:4px;min-width:230px}.benefit-club-switcher label,.benefit-field>span,.benefit-redeem-form label>span{color:var(--muted);font-size:.76rem;font-weight:800}.benefit-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.benefit-metrics>div{display:grid;gap:5px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 94%,var(--primary) 6%),var(--panel));box-shadow:0 10px 30px rgba(9,39,75,.06)}.benefit-metrics span{color:var(--muted);font-size:.78rem}.benefit-metrics strong{font-size:1.85rem}.benefit-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.benefit-editor{padding:22px}.benefit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.benefit-field{display:grid;align-content:start;gap:6px}.benefit-field-wide{grid-column:1/-1}.benefit-field .form-control,.benefit-field .form-select,.benefit-redeem-form .form-control{min-height:46px;border-color:color-mix(in srgb,var(--line) 80%,var(--primary) 20%);border-radius:13px;background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%)}.benefit-field textarea.form-control{min-height:94px}.benefit-field small{color:var(--muted)}.benefit-check{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%);font-weight:750}.benefit-check input{width:20px;height:20px;accent-color:var(--primary)}.benefit-form-actions,.benefit-card-actions{display:flex;gap:9px;align-items:center}.benefit-form-actions{justify-content:flex-end;padding-top:12px;border-top:1px solid var(--line)}.benefit-list-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.benefit-admin-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%)}.benefit-admin-card h3{margin:6px 0;font-size:1.05rem}.benefit-admin-card p{min-height:2.6em;margin:0 0 10px;color:var(--muted);font-size:.82rem}.benefit-partner-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:color-mix(in srgb,var(--primary) 12%,var(--panel));color:var(--primary);font-size:1.5rem}.benefit-partner-mark img{width:100%;height:100%;padding:7px;object-fit:contain}.benefit-label{display:grid;place-items:center;min-height:64px;padding:8px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:.86rem;font-weight:900;text-align:center}.benefit-kicker{color:var(--primary);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.benefit-card-actions form{margin:0}.status-pill.issued{color:#1266a8;background:#dff2ff}.status-pill.redeemed{color:#14673d;background:#ddf8e9}.status-pill.expired,.status-pill.cancelled{color:#7a4c17;background:#fff0d6}.benefit-catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.benefit-empty{grid-column:1/-1}.benefit-offer-card{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:0 18px 42px rgba(7,38,73,.09)}.benefit-offer-visual{position:relative;display:grid;place-items:center;height:190px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,var(--panel)),color-mix(in srgb,var(--accent) 16%,var(--panel)));font-size:3rem;color:var(--primary)}.benefit-offer-visual img{width:100%;height:100%;object-fit:cover}.benefit-offer-visual img.logo{width:45%;height:45%;object-fit:contain}.benefit-offer-visual strong{position:absolute;right:14px;bottom:14px;max-width:75%;padding:9px 13px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:.88rem;box-shadow:0 8px 24px rgba(0,0,0,.2)}.benefit-offer-body{display:grid;gap:11px;padding:20px}.benefit-offer-body h2,.benefit-offer-body p{margin:0}.benefit-offer-body h2{font-size:1.25rem}.benefit-offer-body>p{min-height:3em;color:var(--muted)}.benefit-offer-meta{display:flex;flex-wrap:wrap;gap:9px;color:var(--muted);font-size:.76rem}.benefit-offer-meta span{display:flex;gap:5px;align-items:center}.benefit-offer-body details,.benefit-voucher-card details{padding-top:7px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}.benefit-offer-body summary,.benefit-voucher-card summary{cursor:pointer;font-weight:800}.benefit-voucher-shell,.benefit-verify-shell{width:min(100%,680px);margin:24px auto 64px}.benefit-back{display:inline-flex;gap:7px;margin-bottom:12px;text-decoration:none;font-weight:800}.benefit-voucher-card{display:grid;gap:18px;padding:clamp(20px,5vw,34px);border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line));border-radius:30px;background:radial-gradient(circle at 90% 5%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 35%),var(--panel);box-shadow:0 24px 70px rgba(5,35,70,.16)}.benefit-voucher-top{display:flex;justify-content:space-between;gap:16px;align-items:start}.benefit-voucher-top h1{margin:5px 0;font-size:clamp(1.5rem,5vw,2.35rem)}.benefit-voucher-value{color:var(--primary);font-size:1.15rem}.benefit-qr{display:grid;place-items:center;width:min(310px,80vw);aspect-ratio:1;margin:auto;padding:16px;border-radius:24px;background:#fff;color:#10213c;box-shadow:0 12px 32px rgba(5,35,70,.12)}.benefit-qr svg{width:100%;height:100%}.benefit-scan-hint{text-align:center;color:var(--muted)}.benefit-code,.benefit-external-code{display:grid;justify-items:center;gap:4px;padding:15px;border:1px dashed color-mix(in srgb,var(--primary) 48%,var(--line));border-radius:16px}.benefit-code span,.benefit-external-code span{color:var(--muted);font-size:.75rem}.benefit-code strong{font-size:1.7rem;letter-spacing:.18em}.benefit-external-code code{font-size:1.15rem}.benefit-expiry{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-weight:750}.benefit-result-icon{display:grid;place-items:center;width:90px;height:90px;margin:20px auto;border-radius:50%;background:#ffe5e5;color:#b82c2c;font-size:2.5rem}.benefit-result-icon.success{background:#dcf8e8;color:#187a49}.benefit-verify-card{padding:clamp(20px,5vw,34px)}.benefit-verify-status{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding:18px;border-radius:20px;background:#fff0d6;color:#7a4c17}.benefit-verify-status.issued{background:#e2f4ff;color:#1266a8}.benefit-verify-status.redeemed{background:#ddf8e9;color:#14673d}.benefit-verify-status i{font-size:2.4rem}.benefit-verify-status span{font-size:.72rem;font-weight:900;text-transform:uppercase}.benefit-verify-status h1{margin:0;font-size:1.55rem}.benefit-verify-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}.benefit-verify-details>div{display:grid;gap:4px;padding:13px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%)}.benefit-verify-details span{color:var(--muted);font-size:.72rem}.benefit-redeem-form{display:grid;gap:14px;padding-top:18px;border-top:1px solid var(--line)}.benefit-redeem-form label{display:grid;gap:6px}.benefit-redeemed-note{padding:15px;border-radius:14px;background:#ddf8e9;color:#14673d;font-weight:750}
@media(max-width:1100px){.benefit-admin-grid{grid-template-columns:1fr}.benefit-list-grid,.benefit-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.benefit-head-actions,.benefit-club-switcher{width:100%}.benefit-head-actions{align-items:stretch;flex-direction:column}.benefit-metrics,.benefit-form,.benefit-list-grid,.benefit-catalog-grid,.benefit-verify-details{grid-template-columns:1fr}.benefit-field-wide{grid-column:auto}.benefit-form-actions{align-items:stretch;flex-direction:column-reverse}.benefit-form-actions .btn{width:100%}.benefit-voucher-top{flex-direction:column}.benefit-admin-card{grid-template-columns:54px minmax(0,1fr)}.benefit-partner-mark{width:54px;height:54px}.benefit-catalog-head .btn{width:100%}}

/* Sponsor-Portal */
.portal-page-head{align-items:flex-end}.portal-welcome{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:20px}.portal-welcome>div{display:flex;align-items:center;gap:16px}.portal-welcome h2,.portal-welcome p{margin:0}.portal-welcome p:not(.eyebrow){color:var(--muted)}.portal-lock{display:grid;place-items:center;width:58px;height:58px;flex:0 0 auto;border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--panel)),color-mix(in srgb,var(--accent) 18%,var(--panel)));color:var(--primary);font-size:1.55rem}.portal-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.portal-metrics>div{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center;padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(7,39,75,.06)}.portal-metrics i{grid-row:1/3;color:var(--primary);font-size:1.35rem}.portal-metrics span{color:var(--muted);font-size:.72rem}.portal-metrics strong{font-size:1.55rem}.portal-chart-card{margin-bottom:16px}.portal-legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.75rem}.portal-legend span{display:flex;align-items:center;gap:5px}.portal-legend span:before{content:"";width:9px;height:9px;border-radius:3px;background:var(--primary)}.portal-legend .clicks:before{background:var(--accent)}.portal-legend .redeems:before{background:#7c5ce7}.portal-chart{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:12px;height:230px;padding-top:18px;border-top:1px solid var(--line)}.portal-chart-group{display:grid;grid-template-rows:1fr auto;gap:8px;height:100%;text-align:center;color:var(--muted);font-size:.7rem}.portal-bars{display:flex;align-items:end;justify-content:center;gap:4px;height:100%}.portal-bars span{width:min(18px,26%);min-height:5px;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--primary),color-mix(in srgb,var(--primary) 72%,#fff))}.portal-bars .clicks{background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 70%,#fff))}.portal-bars .redeems{background:linear-gradient(#7c5ce7,#a895ef)}.portal-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.portal-item-list{display:grid;gap:10px}.portal-item-list article{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%)}.portal-item-logo,.portal-benefit-badge{display:grid;place-items:center;width:54px;height:54px;overflow:hidden;border-radius:14px;background:color-mix(in srgb,var(--primary) 13%,var(--panel));color:var(--primary)}.portal-item-logo img{width:100%;height:100%;padding:5px;object-fit:contain}.portal-benefit-badge{padding:5px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:.64rem;font-weight:900;text-align:center}.portal-item-list h3,.portal-item-list p{margin:0}.portal-item-list h3{font-size:.96rem}.portal-item-list p{color:var(--muted);font-size:.74rem}.portal-item-kicker{color:var(--primary);font-size:.62rem;font-weight:900;text-transform:uppercase}.portal-item-stats{display:grid;justify-items:end;gap:4px;color:var(--muted);font-size:.66rem}.portal-item-stats span:not(.status-pill){display:flex;gap:4px}.portal-club-switcher{display:grid;gap:4px;min-width:240px}.portal-club-switcher label,.portal-field>span,.portal-code-card label>span{color:var(--muted);font-size:.74rem;font-weight:850}.portal-invite-result{display:grid;grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr);align-items:center;gap:22px;margin-bottom:16px;border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}.portal-invite-result h2,.portal-invite-result p{margin:0}.portal-manage-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}.portal-access-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.portal-field{display:grid;align-content:start;gap:6px}.portal-field-wide{grid-column:1/-1}.portal-field .form-control,.portal-field .form-select,.portal-code-card .form-control{min-height:46px;border-radius:13px;border-color:color-mix(in srgb,var(--line) 82%,var(--primary) 18%);background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%)}.portal-field small{color:var(--muted)}.portal-check{display:flex;align-items:center;gap:8px;padding:9px 0;font-weight:750}.portal-check input{width:19px;height:19px;accent-color:var(--primary)}.portal-security-panel{align-self:start}.portal-security-panel h2{margin:12px 0}.portal-security-panel ul{display:grid;gap:10px;margin:0;padding-left:20px;color:var(--muted)}.portal-access-list{display:grid;gap:10px}.portal-access-list article{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:13px;padding:13px;border:1px solid var(--line);border-radius:16px}.portal-access-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:900}.portal-access-list h3,.portal-access-list p{margin:0}.portal-access-list p{color:var(--muted);font-size:.75rem}.portal-access-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}.portal-access-tags span{padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--primary) 9%,var(--panel));color:var(--muted);font-size:.65rem}.portal-access-state{display:grid;justify-items:end;gap:4px}.portal-access-state small{color:var(--muted);font-size:.64rem}.portal-scan-shell{width:min(100%,1100px);margin:auto}.portal-scan-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:16px}.portal-camera-card,.portal-code-card{padding:20px}.portal-camera{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:4/3;border-radius:22px;background:#061323;color:#fff}.portal-camera video{display:none;width:100%;height:100%;object-fit:cover}.portal-camera.active video{display:block}.portal-camera-placeholder{display:grid;justify-items:center;gap:7px;text-align:center;color:rgba(255,255,255,.72)}.portal-camera-placeholder i{font-size:2.5rem;color:var(--accent)}.portal-camera-placeholder small{color:rgba(255,255,255,.5)}.portal-camera.active .portal-camera-placeholder{display:none}.portal-scan-frame{position:absolute;inset:15%;display:none;border:2px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 0 0 999px rgba(0,0,0,.2)}.portal-camera.active .portal-scan-frame{display:block}.portal-camera-actions{display:flex;gap:9px;margin-top:12px}.portal-browser-note{margin:10px 0 0;color:var(--muted);font-size:.78rem}.portal-code-card{display:grid;align-content:center;gap:12px}.portal-code-card h2,.portal-code-card p{margin:0}.portal-code-card>p{color:var(--muted)}.portal-code-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:color-mix(in srgb,var(--primary) 13%,var(--panel));color:var(--primary);font-size:1.65rem}.portal-code-card form{display:grid;gap:12px;margin-top:8px}.portal-code-card label{display:grid;gap:6px}.portal-code-input{text-align:center;font-size:1.4rem!important;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:1100px){.portal-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.portal-manage-grid{grid-template-columns:1fr}.portal-security-panel{display:grid;grid-template-columns:auto 1fr;gap:0 14px}.portal-security-panel .portal-lock{grid-row:1/4}.portal-content-grid{grid-template-columns:1fr}}
@media(max-width:760px){.portal-page-head,.portal-page-head .btn,.portal-club-switcher{width:100%}.portal-welcome,.portal-welcome>div{align-items:flex-start}.portal-welcome{flex-direction:column}.portal-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-chart{overflow-x:auto;grid-template-columns:repeat(6,minmax(72px,1fr))}.portal-scan-grid,.portal-invite-result,.portal-access-form{grid-template-columns:1fr}.portal-field-wide{grid-column:auto}.portal-item-list article{grid-template-columns:48px minmax(0,1fr)}.portal-item-stats{grid-column:1/-1;grid-template-columns:repeat(3,auto);justify-content:start;justify-items:start}.portal-access-list article{grid-template-columns:44px minmax(0,1fr)}.portal-access-state,.portal-access-list article>form{grid-column:2;justify-items:start}.portal-camera-actions{flex-direction:column}.portal-camera-actions .btn{width:100%}}

.portal-access-form-actions,
.portal-access-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.portal-access-actions {
    justify-content: flex-end;
}

.portal-access-actions form {
    margin: 0;
}

@media (max-width: 760px) {
    .portal-access-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}
@media(max-width:480px){.portal-metrics{grid-template-columns:1fr}.portal-legend{width:100%}.portal-verify-details{grid-template-columns:1fr}}

/* Superadmin-Zentrale: strikt vereinsuebergreifend und visuell vom Vereinsbereich getrennt */
.superadmin-shell{display:grid;gap:18px;padding-bottom:54px}.superadmin-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px;overflow:hidden;padding:clamp(24px,4vw,48px);border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line));border-radius:30px;background:radial-gradient(circle at 92% 5%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 38%),linear-gradient(135deg,color-mix(in srgb,var(--panel) 96%,var(--primary) 4%),var(--panel));box-shadow:0 24px 70px rgba(4,35,72,.12)}.superadmin-hero:after{content:"";position:absolute;right:-95px;top:-150px;width:320px;height:320px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:50%;pointer-events:none}.superadmin-hero-copy{position:relative;z-index:1;max-width:850px}.superadmin-security-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:8px 12px;border:1px solid color-mix(in srgb,#6a50d8 36%,var(--line));border-radius:999px;background:color-mix(in srgb,#6a50d8 10%,var(--panel));color:color-mix(in srgb,#6a50d8 76%,var(--text));font-size:.75rem;font-weight:900;letter-spacing:.02em}.superadmin-hero h1{max-width:760px;margin:4px 0 12px;font-size:clamp(2rem,4vw,4.25rem);line-height:.98;letter-spacing:-.055em}.superadmin-hero-copy>p:last-child{max-width:780px;margin:0;color:var(--muted);font-size:clamp(.95rem,1.4vw,1.12rem)}.superadmin-hero-actions{position:relative;z-index:1;display:grid;gap:9px;min-width:210px}.superadmin-hero-actions .btn{display:flex;justify-content:center;align-items:center;gap:8px;min-height:48px}.superadmin-alert{display:flex;align-items:center;gap:9px;margin:0}.superadmin-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.superadmin-metrics article{display:flex;align-items:center;gap:13px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:19px;background:var(--panel);box-shadow:0 10px 30px rgba(7,39,75,.06)}.superadmin-metrics article>div{display:grid;min-width:0}.superadmin-metrics strong{font-size:clamp(1.45rem,2.3vw,2rem);line-height:1}.superadmin-metrics article>div span{overflow:hidden;color:var(--muted);font-size:.73rem;text-overflow:ellipsis;white-space:nowrap}.superadmin-metric-icon{display:grid;place-items:center;width:45px;height:45px;flex:0 0 auto;border-radius:14px;background:color-mix(in srgb,var(--primary) 12%,var(--panel));color:var(--primary);font-size:1.2rem}.superadmin-metric-icon.success{background:#dff7ea;color:#177848}.superadmin-metric-icon.warning{background:#fff0d3;color:#9a5c0a}.superadmin-directory{padding:clamp(18px,3vw,30px)}.superadmin-directory-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.superadmin-directory-head h2,.superadmin-directory-head p{margin:0}.superadmin-directory-head h2{font-size:clamp(1.5rem,3vw,2.25rem)}.superadmin-directory-head>div>p:last-child{color:var(--muted)}.superadmin-result-count{display:grid;min-width:90px;padding:11px 15px;border:1px solid var(--line);border-radius:15px;text-align:center}.superadmin-result-count strong{font-size:1.35rem}.superadmin-result-count span{color:var(--muted);font-size:.66rem}.superadmin-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:12px;margin-bottom:18px;padding:12px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--panel) 95%,var(--primary) 5%)}.superadmin-search{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--muted)}.superadmin-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}.superadmin-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}.superadmin-search input::placeholder{color:var(--muted)}.superadmin-filters{display:flex;align-items:center;gap:6px;overflow-x:auto}.superadmin-filters button{min-height:40px;padding:8px 12px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--muted);font-size:.76rem;font-weight:800;white-space:nowrap}.superadmin-filters button:hover,.superadmin-filters button.active{border-color:color-mix(in srgb,var(--primary) 25%,var(--line));background:color-mix(in srgb,var(--primary) 11%,var(--panel));color:var(--primary)}.superadmin-club-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.superadmin-club-card{display:grid;align-content:start;gap:15px;padding:20px;border:1px solid var(--line);border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 98%,var(--primary) 2%),var(--panel));box-shadow:0 12px 34px rgba(7,39,75,.055)}.superadmin-club-card[hidden]{display:none}.superadmin-club-card-top{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px}.superadmin-club-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:1.15rem;font-weight:950}.superadmin-club-card h3{margin:0;font-size:1.05rem}.superadmin-club-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;color:var(--muted);font-size:.66rem}.superadmin-club-meta span{padding:3px 6px;border-radius:6px;background:color-mix(in srgb,var(--primary) 6%,var(--panel))}.superadmin-club-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.superadmin-club-stats>div{display:grid;gap:2px;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--panel) 94%,var(--primary) 6%)}.superadmin-club-stats dt{color:var(--muted);font-size:.65rem;font-weight:700}.superadmin-club-stats dd{margin:0;font-size:1.15rem;font-weight:900}.superadmin-club-contact{display:grid;gap:7px;color:var(--muted);font-size:.75rem}.superadmin-club-contact span{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.superadmin-club-contact i{color:var(--primary)}.superadmin-admins{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%)}.superadmin-admins-label{display:flex;gap:6px;color:var(--muted);font-size:.65rem}.superadmin-admins strong{font-size:.78rem}.superadmin-admins.missing{border-color:#edc078;background:#fff7e9;color:#82500b}.superadmin-club-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:auto}.superadmin-club-actions form{display:contents}.superadmin-club-actions .btn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:42px;padding:8px;font-size:.71rem}.superadmin-empty,.superadmin-no-results{display:grid;justify-items:center;gap:7px;padding:48px 20px;text-align:center;color:var(--muted)}.superadmin-empty i,.superadmin-no-results i{font-size:2rem;color:var(--primary)}.superadmin-empty h3,.superadmin-empty p,.superadmin-no-results h3,.superadmin-no-results p{margin:0}.superadmin-empty .btn{margin-top:8px}
@media(max-width:1180px){.superadmin-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.superadmin-club-grid{grid-template-columns:1fr}}
@media(max-width:840px){.superadmin-hero{grid-template-columns:1fr;align-items:start}.superadmin-hero-actions{grid-template-columns:repeat(3,1fr);min-width:0}.superadmin-toolbar{grid-template-columns:1fr}.superadmin-filters{padding-bottom:2px}}
@media(max-width:620px){.superadmin-hero{padding:22px;border-radius:22px}.superadmin-hero-actions{grid-template-columns:1fr}.superadmin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.superadmin-directory-head{align-items:start;flex-direction:column}.superadmin-result-count{grid-template-columns:auto auto;align-items:center;gap:6px}.superadmin-club-card{padding:16px}.superadmin-club-card-top{grid-template-columns:44px minmax(0,1fr)}.superadmin-club-card-top>.status-pill{grid-column:2;justify-self:start}.superadmin-club-mark{width:44px;height:44px}.superadmin-club-actions{grid-template-columns:1fr}.superadmin-club-actions form{display:block}.superadmin-club-actions .btn{width:100%}}
@media(max-width:420px){.superadmin-metrics{grid-template-columns:1fr}.superadmin-security-badge{align-items:flex-start;border-radius:13px}.superadmin-club-stats{grid-template-columns:1fr}.superadmin-club-stats>div{grid-template-columns:1fr auto;align-items:center}}

/* Mandantenfaehiges Vereinsdesign: verbindet die gespeicherte Palette mit der gesamten App. */
body{background:radial-gradient(circle at 18% -8%,color-mix(in srgb,var(--primary) 24%,transparent),transparent 32vw),radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 34vw),linear-gradient(135deg,var(--app-hero-start) 0%,var(--app-hero-end) 54%,color-mix(in srgb,var(--primary-dark) 28%,#07111f) 100%);background-attachment:fixed}.app-nav{background:linear-gradient(100deg,var(--nav-bg),var(--nav-bg-end));border-bottom-color:color-mix(in srgb,var(--accent) 24%,transparent)}.brand-mark::before,.brand-mark::after{background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 30%,transparent)}.app-nav-link:hover,.app-nav-link:focus,.navbar-nav .nav-link.show{background:color-mix(in srgb,var(--accent) 14%,transparent)}.app-dropdown .dropdown-item:hover,.app-dropdown .dropdown-item:focus{background:color-mix(in srgb,var(--primary) 15%,transparent)}.btn-primary,.btn-outline-primary:hover,.btn-outline-primary:focus{background:linear-gradient(135deg,var(--primary),var(--accent))!important;box-shadow:0 14px 32px color-mix(in srgb,var(--primary) 24%,transparent)}.btn-primary:hover,.btn-primary:focus{box-shadow:0 18px 38px color-mix(in srgb,var(--primary) 30%,transparent)}.btn-outline-primary{border-color:color-mix(in srgb,var(--primary) 58%,transparent)!important;color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 7%,transparent)!important}.page-head,.dashboard-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,transparent),transparent 58%),var(--brand-surface,var(--panel))}.surface,.card,.event-card,.dashboard-news-card,.dashboard-news-empty,.table-responsive,.table-wrap,.chat-thread,.chat-compose-bar,.trainer-note-box,.dashboard-tile-settings-row{background:var(--brand-surface,var(--panel))}.dashboard-tile{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 15%,transparent),transparent 58%),var(--brand-surface,var(--panel))}.dashboard-tile:hover,.dashboard-tile:focus{border-color:color-mix(in srgb,var(--accent) 52%,var(--line));box-shadow:0 18px 38px color-mix(in srgb,var(--primary) 17%,transparent)}.dashboard-tile-icon,.dashboard-news-icon{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.form-control:focus,.form-select:focus,textarea:focus,input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 .22rem color-mix(in srgb,var(--accent) 22%,transparent)!important}.table-hover>tbody>tr:hover>*{background:color-mix(in srgb,var(--primary) 8%,transparent)}.mobile-tabbar-item.active,.mobile-tabbar-item:focus-visible,.mobile-tabbar-item:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}.eyebrow{color:var(--accent)}:focus-visible{outline-color:color-mix(in srgb,var(--accent) 62%,transparent)}
:root:not([data-theme="dark"]) body{background:radial-gradient(circle at 18% -8%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 32vw),radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 34vw),linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,#fff) 0%,color-mix(in srgb,var(--accent) 5%,#fff) 52%,#f4f7fb 100%)}:root:not([data-theme="dark"]) .app-nav{background:linear-gradient(100deg,color-mix(in srgb,var(--primary-dark) 94%,#07111f),color-mix(in srgb,var(--primary) 78%,var(--primary-dark)));border-bottom-color:color-mix(in srgb,var(--accent) 36%,transparent)}:root:not([data-theme="dark"]) .app-brand,:root:not([data-theme="dark"]) .app-brand-text,:root:not([data-theme="dark"]) .app-nav-link,:root:not([data-theme="dark"]) .header-user{color:#fff!important}:root:not([data-theme="dark"]) .app-nav-link:hover,:root:not([data-theme="dark"]) .app-nav-link:focus,:root:not([data-theme="dark"]) .navbar-nav .nav-link.show{background:color-mix(in srgb,var(--accent) 18%,transparent);color:#fff!important}:root:not([data-theme="dark"]) .page-head,:root:not([data-theme="dark"]) .dashboard-hero,:root:not([data-theme="dark"]) .dashboard-tile{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 13%,transparent),transparent 58%),color-mix(in srgb,var(--primary) 3%,#fff)}:root:not([data-theme="dark"]) .surface,:root:not([data-theme="dark"]) .card,:root:not([data-theme="dark"]) .event-card,:root:not([data-theme="dark"]) .dashboard-news-card,:root:not([data-theme="dark"]) .dashboard-news-empty,:root:not([data-theme="dark"]) .table-responsive,:root:not([data-theme="dark"]) .table-wrap,:root:not([data-theme="dark"]) .chat-thread,:root:not([data-theme="dark"]) .chat-compose-bar,:root:not([data-theme="dark"]) .trainer-note-box,:root:not([data-theme="dark"]) .dashboard-tile-settings-row{background:color-mix(in srgb,var(--primary) 2.5%,#fff)}

/* App-Design Editor */
.design-override-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px}.design-override-note>i{font-size:1.4rem}.design-override-note>div{display:grid;gap:2px}.design-override-note span{font-size:.78rem}.design-palette-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:8px}.design-palette-heading h3,.design-palette-heading p{margin:0}.design-palette-heading h3{font-size:1.15rem}.design-palette-heading p{color:var(--muted);font-size:.78rem}.design-palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.design-color-field{display:grid;align-content:start;gap:5px;padding:14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 94%,var(--primary) 6%)}.design-color-field>span:first-child{font-weight:850}.design-color-field>small{min-height:2.4em;color:var(--muted);font-size:.68rem}.design-color-control{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:10px;margin-top:5px}.design-color-control input[type="color"]{width:52px;height:44px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}.design-color-control output{display:flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--control-bg);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.78rem}.design-dark-palette{border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%)}.design-dark-palette summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer}.design-dark-palette summary span{display:flex;align-items:center;gap:8px;font-weight:850}.design-dark-palette summary small{color:var(--muted)}.design-dark-palette[open] summary{border-bottom:1px solid var(--line)}.design-dark-palette .design-palette-grid{padding:14px}.design-app-preview{overflow:hidden;padding:0;border-radius:22px}.design-app-preview>p{padding:0 18px 18px;color:var(--muted);font-size:.76rem}.design-app-preview .brand-preview-header{border-radius:0;padding:16px;background:linear-gradient(100deg,var(--preview-dark),color-mix(in srgb,var(--preview-primary) 72%,var(--preview-dark)))}.design-preview-content{display:grid;gap:16px;padding:20px;background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--preview-accent) 20%,transparent),transparent 38%),linear-gradient(145deg,color-mix(in srgb,var(--preview-primary) 9%,var(--panel)),var(--panel))}.design-preview-heading{display:flex;align-items:center;gap:12px}.design-preview-heading>div{display:grid}.design-preview-heading small{color:var(--muted);font-size:.65rem}.design-preview-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--preview-accent) 18%,transparent);color:var(--preview-accent);font-size:1.15rem}.design-preview-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.design-preview-tiles span{height:64px;border:1px solid color-mix(in srgb,var(--preview-primary) 22%,var(--line));border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--preview-primary) 15%,transparent),var(--soft-panel))}.design-preview-actions{display:flex;flex-wrap:wrap;gap:8px}.design-preview-button{padding:9px 13px;border-radius:11px;font-size:.72rem;font-weight:850}.design-preview-button.primary{background:linear-gradient(135deg,var(--preview-primary),var(--preview-accent));color:#fff}.design-preview-button.secondary{border:1px solid var(--preview-primary);background:color-mix(in srgb,var(--preview-primary) 8%,transparent);color:var(--ink)}
@media(max-width:900px){.design-palette-grid{grid-template-columns:1fr}.design-color-field>small{min-height:0}.design-override-note{grid-template-columns:auto 1fr}.design-override-note .btn{grid-column:1/-1;width:100%}}
@media(max-width:560px){.design-palette-heading{align-items:stretch;flex-direction:column}.design-palette-heading .btn{width:100%}.design-dark-palette summary{align-items:flex-start;flex-direction:column}.design-preview-tiles{grid-template-columns:1fr}.design-preview-tiles span{height:48px}}

/* Saisonale Premium-Hintergründe: immer proportional auf die aktuelle Viewport-Größe skalieren. */
body.has-seasonal-background{position:relative;isolation:isolate;background:var(--app-hero-start)}
body.has-seasonal-background::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--app-hero-start);background-image:linear-gradient(rgba(3,12,28,var(--seasonal-background-overlay)),rgba(3,12,28,var(--seasonal-background-overlay))),var(--seasonal-background-image);background-position:center,var(--seasonal-background-position);background-size:100% 100%,cover;background-repeat:no-repeat,no-repeat}
body.has-seasonal-background .page-head,body.has-seasonal-background .dashboard-hero,body.has-seasonal-background .surface,body.has-seasonal-background .dashboard-tile,body.has-seasonal-background .event-card,body.has-seasonal-background .card{background-color:var(--bluca-surface-card,var(--brand-surface,var(--panel)));backdrop-filter:var(--bluca-surface-blur,blur(14px) saturate(1.12));-webkit-backdrop-filter:var(--bluca-surface-blur,blur(14px) saturate(1.12))}

/* Newsletter administration */
.newsletter-page-head{align-items:center}.newsletter-scope-note,.newsletter-locked-scope{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--primary) 8%,var(--panel));color:var(--muted);font-size:.78rem}.newsletter-scope-note i,.newsletter-locked-scope i{color:var(--primary);font-size:1.05rem}.newsletter-layout{display:grid;grid-template-columns:minmax(420px,.85fr) minmax(0,1.15fr);align-items:start;gap:16px}.newsletter-editor,.newsletter-archive{padding:clamp(18px,2.6vw,28px)}.newsletter-body{min-height:260px;line-height:1.55;resize:vertical}.newsletter-recipient-preview{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));color:var(--muted)}.newsletter-recipient-preview>i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--accent) 15%,var(--panel));color:var(--accent);font-size:1.15rem}.newsletter-recipient-preview strong{color:var(--text);font-size:1.3rem}.newsletter-news-toggle{border:1px solid var(--line);border-radius:15px;padding:14px}.newsletter-send-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin-top:22px;padding:18px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--primary) 6%,var(--panel))}.newsletter-send-panel h3,.newsletter-send-panel p{margin:0}.newsletter-send-panel h3{font-size:1rem}.newsletter-send-panel p{margin-top:4px;color:var(--muted);font-size:.75rem}.newsletter-schedule-form{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:end;gap:10px}.newsletter-schedule-form label{display:grid;gap:5px;color:var(--muted);font-size:.72rem;font-weight:800}.newsletter-list{display:grid;gap:10px}.newsletter-list-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--panel) 97%,var(--primary) 3%)}.newsletter-list-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--primary) 12%,var(--panel));color:var(--primary);font-size:1.15rem}.newsletter-list-content{min-width:0}.newsletter-list-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.newsletter-list-title h3{margin:1px 0 0;font-size:.96rem}.newsletter-list-content>p{display:-webkit-box;overflow:hidden;margin:7px 0;color:var(--muted);font-size:.76rem;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.newsletter-meta{display:flex;flex-wrap:wrap;gap:5px 10px;color:var(--muted);font-size:.65rem}.newsletter-meta span{display:flex;align-items:center;gap:4px}.newsletter-list-actions{display:grid;gap:6px}.newsletter-list-actions form,.newsletter-list-actions .btn{width:100%}.newsletter-empty{display:grid;justify-items:center;gap:5px;padding:52px 18px;text-align:center;color:var(--muted)}.newsletter-empty i{font-size:2rem;color:var(--primary)}.newsletter-empty h3,.newsletter-empty p{margin:0}.newsletter-detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:16px}.newsletter-preview-mail{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.newsletter-preview-head{padding:22px 25px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}.newsletter-preview-head small{opacity:.82}.newsletter-preview-head h2{margin:5px 0 0}.newsletter-preview-body{padding:26px;line-height:1.65}.newsletter-preview-body>strong{display:block;margin-bottom:16px}.newsletter-preview-body p{white-space:pre-wrap}.newsletter-delivery-summary dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.newsletter-delivery-summary dl div{padding:11px;border-radius:12px;background:color-mix(in srgb,var(--primary) 7%,var(--panel))}.newsletter-delivery-summary dt{color:var(--muted);font-size:.68rem}.newsletter-delivery-summary dd{margin:2px 0 0;font-size:1.05rem;font-weight:900}.newsletter-delivery-summary>p{color:var(--muted);font-size:.76rem}
@media(max-width:1050px){.newsletter-layout{grid-template-columns:1fr}.newsletter-detail-grid{grid-template-columns:1fr}}
@media(max-width:650px){.newsletter-page-head{align-items:flex-start}.newsletter-scope-note{width:100%}.newsletter-send-panel,.newsletter-schedule-form{grid-template-columns:1fr}.newsletter-send-panel form,.newsletter-send-panel .btn{width:100%}.newsletter-list-item{grid-template-columns:42px minmax(0,1fr)}.newsletter-list-icon{width:42px;height:42px}.newsletter-list-actions{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.newsletter-list-actions form{display:block}.newsletter-list-title{align-items:flex-start;flex-direction:column}.newsletter-delivery-summary dl{grid-template-columns:1fr 1fr}}
:root:not([data-theme="dark"]) body.has-seasonal-background::before{background-image:linear-gradient(rgba(244,249,255,var(--seasonal-background-overlay)),rgba(244,249,255,var(--seasonal-background-overlay))),var(--seasonal-background-image)}
@media(max-width:760px){body.has-seasonal-background::before{background-position:center,var(--seasonal-background-position)}}

/* Gemeinsame Karten der KI- und Autopilot-Bereiche muessen auch vor einem
   Vereinsbild eine vollstaendig deckende, kontrastreiche Leseflaeche bilden. */
.app-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 22px);
    background: color-mix(in srgb, var(--primary) 4%, #111d2c);
    color: var(--ink);
    box-shadow: var(--shadow-soft, 0 14px 34px rgba(0, 0, 0, .18));
}

:root:not([data-theme="dark"]) .app-card {
    background: color-mix(in srgb, var(--primary) 2.5%, #ffffff);
}

body.has-seasonal-background .app-card {
    background-color: color-mix(in srgb, var(--primary) 4%, #111d2c);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root:not([data-theme="dark"]) body.has-seasonal-background .app-card {
    background-color: color-mix(in srgb, var(--primary) 2.5%, #ffffff);
}

/* Einheitliche, blickdichte Reiternavigation fuer alle KI- und Autopilot-Seiten. */
.app-section-nav {
    padding: .75rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 22px);
    background: color-mix(in srgb, var(--primary) 4%, #111d2c);
    color: var(--ink);
    box-shadow: var(--shadow-soft, 0 14px 34px rgba(0, 0, 0, .18));
}

:root:not([data-theme="dark"]) .app-section-nav {
    background: color-mix(in srgb, var(--primary) 2.5%, #ffffff);
}

body.has-seasonal-background .app-section-nav {
    background-color: color-mix(in srgb, var(--primary) 4%, #111d2c);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root:not([data-theme="dark"]) body.has-seasonal-background .app-section-nav {
    background-color: color-mix(in srgb, var(--primary) 2.5%, #ffffff);
}

.app-section-nav .btn {
    flex: 0 0 auto;
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .app-section-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: thin;
    }

    .app-section-nav .btn {
        scroll-snap-align: start;
    }
}

/* Premium-Design: Saisonvorlagen und App-Hintergrund */
.premium-season-presets{padding:14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 94%,var(--primary) 6%)}.premium-season-presets>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.premium-season-presets button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font-weight:800}.premium-season-presets button:hover,.premium-season-presets button:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));transform:translateY(-1px)}.premium-season-presets button:nth-child(1) i{color:#f2b705}.premium-season-presets button:nth-child(2) i{color:#e84d9b}.premium-season-presets button:nth-child(3) i{color:#d97706}.premium-season-presets button:nth-child(4) i{color:#2b9b65}.premium-range-field input[type="range"]{width:100%;accent-color:var(--primary)}.premium-range-field output{justify-self:start;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,var(--panel));color:var(--primary);font-size:.75rem;font-weight:800}.premium-remove-background{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid color-mix(in srgb,#ef4444 28%,var(--line));border-radius:15px;background:color-mix(in srgb,#ef4444 5%,var(--panel));cursor:pointer}.premium-remove-background input{width:20px;height:20px}.premium-remove-background>span{display:grid;gap:2px}.premium-remove-background small{color:var(--muted)}.premium-app-preview-wrap{grid-column:1/-1}.premium-app-background-preview{position:relative;isolation:isolate;overflow:hidden;min-height:360px;border:1px solid color-mix(in srgb,var(--premium-primary) 35%,var(--line));border-radius:24px;background-color:#071525;background-image:linear-gradient(rgba(3,12,28,var(--preview-background-overlay,.46)),rgba(3,12,28,var(--preview-background-overlay,.46))),var(--preview-background-image),radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--premium-accent) 26%,transparent),transparent 38%),linear-gradient(135deg,color-mix(in srgb,var(--premium-primary) 45%,#07111f),#07111f);background-position:center,var(--preview-background-position,center center),center,center;background-size:cover,cover,cover,cover;background-repeat:no-repeat;color:#fff;box-shadow:0 20px 55px color-mix(in srgb,var(--premium-primary) 18%,transparent)}.premium-app-preview-nav{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.15);background:rgba(2,10,24,.66);backdrop-filter:blur(14px)}.premium-app-preview-nav>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--premium-primary),var(--premium-accent));font-weight:900}.premium-app-preview-nav i{margin-left:auto;font-size:1.3rem}.premium-app-preview-content{display:grid;align-content:center;gap:10px;width:min(92%,520px);min-height:294px;padding:34px}.premium-app-preview-content>small{color:var(--premium-accent);font-weight:900;letter-spacing:.12em;text-transform:uppercase}.premium-app-preview-content h4{margin:0;font-size:clamp(1.55rem,3vw,2.6rem)}.premium-app-preview-content>div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.premium-app-preview-content>div span{height:68px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(4,17,38,.58);backdrop-filter:blur(10px)}.premium-app-preview-content button{justify-self:start;padding:10px 15px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--premium-primary),var(--premium-accent));color:#fff;font-weight:850}
@media(max-width:760px){.premium-season-presets>div{grid-template-columns:repeat(2,minmax(0,1fr))}.premium-app-background-preview{min-height:320px}.premium-app-preview-content{min-height:254px;padding:24px}.premium-app-preview-content>div{grid-template-columns:1fr}.premium-app-preview-content>div span{height:42px}}
@media(max-width:420px){.premium-season-presets>div{grid-template-columns:1fr}}

/* Einheitliche Datenschutz- und Cookie-Einstellungen */
.privacy-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(1320px, calc(100% - 32px));
    margin: clamp(2rem, 5vw, 4rem) auto 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .76rem;
}
.privacy-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem; }
.privacy-footer a,
.privacy-footer button { border: 0; background: none; color: inherit; font: inherit; text-decoration: none; }
.privacy-footer a:hover,
.privacy-footer button:hover { color: var(--accent); text-decoration: underline; }
.privacy-footer button { padding: 0; cursor: pointer; }
.has-mobile-tabbar .privacy-footer { margin-bottom: 88px; }

.cookie-consent[hidden] { display: none; }
.cookie-consent {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: end center;
    padding: clamp(.75rem, 3vw, 2rem);
}
.cookie-consent-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 8, 20, .68);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.cookie-consent-card {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100dvh - 1.5rem);
    overflow: auto;
    padding: clamp(1.15rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 26px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary-dark) 88%, #102a48), color-mix(in srgb, var(--primary-dark) 92%, #06172b) 72%);
    box-shadow: 0 30px 100px rgba(0, 0, 0, .55);
    color: #f5f9ff;
    outline: none;
}
.cookie-consent-head { display: flex; align-items: center; gap: 1rem; }
.cookie-consent-shield {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 30%, transparent);
    font-size: 1.3rem;
}
.cookie-consent-eyebrow { color: color-mix(in srgb, var(--accent) 78%, white); font-size: .7rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.cookie-consent-card h2 { margin: .2rem 0 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2.15rem); letter-spacing: -.035em; }
.cookie-consent-card > p { margin: 1rem 0; color: #bad0e7; line-height: 1.55; }
.cookie-consent-categories { display: grid; gap: .7rem; margin: 1.1rem 0; }
.cookie-consent-categories article,
.cookie-consent-categories label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    min-height: 72px;
    margin: 0;
    padding: .9rem 1rem;
    border: 1px solid rgba(125, 174, 220, .3);
    border-radius: 17px;
    background: rgba(255, 255, 255, .04);
}
.cookie-consent-categories strong,
.cookie-consent-categories small { display: block; }
.cookie-consent-categories small { margin-top: .2rem; color: #91abc5; font-size: .74rem; line-height: 1.4; }
.cookie-category-state { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; }
.cookie-category-state.required { background: rgba(95, 224, 153, .14); color: #72e2a3; }
.cookie-category-label { color: #72e2a3; font-size: .7rem; font-weight: 850; white-space: nowrap; }
.cookie-consent-categories label { cursor: pointer; }
.cookie-consent-categories input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cookie-toggle { position: relative; width: 44px; height: 25px; border-radius: 999px; background: #38506a; transition: .2s; }
.cookie-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, .35); transition: .2s; }
.cookie-consent-categories input:checked + .cookie-toggle { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.cookie-consent-categories input:checked + .cookie-toggle::after { transform: translateX(19px); }
.cookie-consent-categories input:focus-visible + .cookie-toggle { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 3px; }
.cookie-consent-note { margin: .8rem 0; font-size: .76rem; }
.cookie-consent-note a { color: color-mix(in srgb, var(--accent) 78%, white); }
.cookie-consent-error { padding: .7rem .9rem; border-radius: 12px; background: rgba(232, 73, 88, .14); color: #ffb4bc !important; }
.cookie-consent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; margin-top: 1.1rem; }
.cookie-button { min-height: 46px; padding: .7rem 1rem; border: 1px solid rgba(125, 174, 220, .4); border-radius: 13px; font: 800 .86rem/1 inherit; cursor: pointer; }
.cookie-button:disabled { cursor: wait; opacity: .55; }
.cookie-button.primary { border-color: transparent; background: linear-gradient(120deg, var(--primary), var(--accent)); color: #fff; }
.cookie-button.secondary { background: #0a2038; color: #e8f4ff; }
.cookie-button.ghost { background: transparent; color: #bcd0e5; }
.cookie-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
body.cookie-consent-open { overflow: hidden; }
@media (max-width: 640px) {
    .privacy-footer { align-items: flex-start; flex-direction: column; }
    .privacy-footer nav { justify-content: flex-start; }
    .cookie-consent { align-items: end; padding: .5rem; }
    .cookie-consent-card { border-radius: 22px; padding: 1rem; }
    .cookie-consent-head { align-items: flex-start; }
    .cookie-consent-categories article,
    .cookie-consent-categories label { grid-template-columns: auto minmax(0, 1fr); }
    .cookie-category-label { grid-column: 2; }
    .cookie-consent-actions { display: grid; grid-template-columns: 1fr; }
    .cookie-button { width: 100%; }
}

/* Paket-Test und PayPal-Halbjahresabos */
.package-catalog-head { align-items: center; }
.package-catalog-head > div:first-child { max-width: 850px; }
.trial-promise { display: flex; align-items: center; gap: .85rem; min-width: 250px; padding: 1rem 1.15rem; border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--primary) 8%, var(--panel)); }
.trial-promise i { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); font-size: 1.35rem; }
.trial-promise span,
.trial-promise strong,
.trial-promise small { display: block; }
.trial-promise small { margin-top: .1rem; color: var(--muted); }
.package-catalog-grid,
.package-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.package-product-card,
.package-admin-card { min-width: 0; padding: 1.35rem; }
.package-product-card { display: flex; flex-direction: column; min-height: 430px; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.package-product-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); box-shadow: 0 18px 45px rgba(4, 22, 39, .12); }
.package-product-card.is-trial { border-color: color-mix(in srgb, #f6a723 58%, var(--line)); }
.package-product-card.is-subscribed { border-color: color-mix(in srgb, #23b678 54%, var(--line)); }
.package-product-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .85rem; }
.package-product-card h2,
.package-admin-card h2 { margin: 0; font-size: clamp(1.18rem, 2vw, 1.5rem); overflow-wrap: anywhere; }
.package-product-card .eyebrow,
.package-admin-card .eyebrow { margin-bottom: .25rem; }
.package-product-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 20%, var(--panel)), color-mix(in srgb, var(--accent) 12%, var(--panel))); color: var(--primary); font-size: 1.25rem; }
.package-product-description { min-height: 3.2rem; margin: 1.15rem 0; color: var(--muted); line-height: 1.6; }
.package-price-row { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: 1rem 0; border-block: 1px solid var(--line); }
.package-price-row > div { min-width: 0; }
.package-price-row strong { font-size: 1.55rem; }
.package-price-row span { color: var(--muted); font-size: .83rem; }
.package-usage-panel { display: grid; gap: .75rem; margin-top: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--brand-surface) 88%, transparent); }
.package-usage-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.package-usage-summary > div { display: grid; gap: .2rem; min-width: 0; }
.package-usage-summary span { color: var(--muted); font-size: .75rem; }
.package-usage-summary strong { overflow-wrap: anywhere; font-size: .92rem; }
.package-tier-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--line); }
.package-tier-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.package-next-tier { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.package-next-tier strong { color: var(--text); }
.package-tier-disclosure { border-top: 1px solid var(--line); padding-top: .65rem; }
.package-tier-disclosure summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--primary); font-weight: 800; }
.package-public-tier-list { display: grid; gap: .4rem; padding-top: .35rem; }
.package-public-tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; align-items: center; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: 12px; }
.package-public-tier.is-current { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.package-public-tier strong { font-size: .84rem; text-align: right; }
.package-public-tier small { grid-column: 1 / -1; color: var(--primary); font-weight: 750; }
.package-price-protection { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .7rem; border-radius: 12px; background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--muted); font-size: .78rem; line-height: 1.45; }
.package-price-protection i { color: var(--success); font-size: 1rem; }
.package-tier-change-notice { display: grid; gap: .25rem; padding: .75rem; border: 1px solid color-mix(in srgb, #f6a723 58%, var(--line)); border-radius: 12px; background: color-mix(in srgb, #f6a723 10%, transparent); }
.package-tier-change-notice strong { font-size: .84rem; }
.package-tier-change-notice span { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.package-status-panel { display: flex; gap: .75rem; margin-top: 1rem; padding: .85rem; border-radius: 14px; background: color-mix(in srgb, #f6a723 12%, var(--panel)); color: color-mix(in srgb, #bd6e00 80%, var(--text)); }
.package-status-panel.muted { background: var(--brand-surface); color: var(--muted); }
.package-status-panel i { margin-top: .08rem; font-size: 1.1rem; }
.package-status-panel strong,
.package-status-panel span { display: block; }
.package-status-panel span { margin-top: .15rem; font-size: .79rem; line-height: 1.4; }
.package-subscription-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; margin-top: 1rem; padding: .85rem; border-radius: 14px; background: var(--brand-surface); }
.package-subscription-meta span { color: var(--muted); font-size: .78rem; }
.package-subscription-meta strong { text-align: right; font-size: .84rem; }
.package-product-card > footer { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: auto; padding-top: 1.1rem; }
.package-product-card > footer form { margin: 0; }
.package-note { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .82rem; font-weight: 750; }
.package-admin-intro { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1.1rem; }
.package-admin-intro h2 { margin: .35rem 0; }
.package-admin-intro p { max-width: 780px; margin: 0; color: var(--muted); }
.package-kicker { color: var(--primary); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.package-admin-card > header { display: flex; justify-content: space-between; gap: 1rem; }
.context-help-trigger {
    position: fixed;
    right: 18px;
    bottom: 92px;
    z-index: 1045;
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    border-radius: 50%;
    background: var(--bluca-surface-elevated, var(--panel));
    color: var(--accent);
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

.context-help-panel {
    position: fixed;
    right: 18px;
    bottom: 150px;
    z-index: 1060;
    width: min(390px, calc(100vw - 28px));
    max-height: min(70vh, 620px);
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--bluca-surface-border, var(--line));
    border-radius: 20px;
    background: var(--bluca-surface-elevated, var(--panel));
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
    white-space: normal;
}

.context-help-panel.is-install-guide {
    width: min(1040px, calc(100vw - 36px));
    max-height: min(84vh, 880px);
}

.context-help-panel [hidden] { display: none !important; }
.context-help-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.context-help-head strong { font-size: 1.08rem; }
.context-help-head button { border: 0; background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1; }
.context-help-content { margin-bottom: 14px; color: var(--muted); white-space: pre-wrap; }
.context-help-panel code { display: block; overflow-wrap: anywhere; margin-bottom: 12px; color: var(--muted); font-size: .68rem; }

.pwa-install-help { color: var(--ink); }
.pwa-install-back { margin-bottom: .85rem; }
.pwa-install-intro { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.pwa-install-intro-icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 14%, var(--bluca-surface-subtle, var(--panel)));
    font-size: 1.65rem;
}
.pwa-install-intro h2 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.pwa-install-intro p { margin: .2rem 0 0; color: var(--muted); }
.pwa-install-status {
    margin-bottom: .9rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, #15945b 52%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, #15945b 13%, var(--bluca-surface-elevated, var(--panel)));
    color: var(--ink);
}
.pwa-install-status i { margin-right: .35rem; color: #15945b; }
.pwa-install-native { width: 100%; min-height: 48px; margin-bottom: .9rem; font-weight: 850; }
.pwa-install-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-bottom: 1rem;
    padding: .3rem;
    border: 1px solid var(--bluca-surface-border, var(--line));
    border-radius: 14px;
    background: var(--bluca-surface-subtle, var(--soft));
}
.pwa-install-switch button {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-weight: 850;
}
.pwa-install-switch button[aria-selected="true"] {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 28%, transparent);
}
.pwa-install-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.pwa-install-platform {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--bluca-surface-border, var(--line));
    border-radius: 18px;
    background: var(--bluca-surface-card, var(--panel));
}
.pwa-install-platform > header { display: flex; align-items: start; gap: .7rem; margin-bottom: .85rem; }
.pwa-install-platform-icon { font-size: 1.45rem; line-height: 1; }
.pwa-install-platform h3 { margin: 0; font-size: 1.2rem; }
.pwa-install-platform > header p { margin: .25rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.pwa-install-steps { display: grid; gap: .75rem; }
.pwa-install-step {
    overflow: hidden;
    border: 1px solid var(--bluca-surface-border, var(--line));
    border-radius: 15px;
    background: var(--bluca-surface-subtle, var(--soft));
}
.pwa-install-step-copy { display: flex; align-items: center; gap: .65rem; padding: .75rem; }
.pwa-install-step-number {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 950;
}
.pwa-install-step h4 { margin: 0; color: var(--ink); font-size: .95rem; }
.pwa-install-step p { margin: .15rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.pwa-install-image-button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-top: 1px solid var(--bluca-surface-border, var(--line)); background: #f6f7fa; }
.pwa-install-image-button img { display: block; width: 100%; height: auto; }
.pwa-install-image-button > span {
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    padding: .32rem .55rem;
    border-radius: 999px;
    background: rgba(7, 17, 31, .88);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
}
.pwa-install-image-button:hover img { filter: brightness(.96); }
.pwa-install-finish { margin: .85rem 0 0; padding: .8rem; border-radius: 12px; background: color-mix(in srgb, #15945b 12%, var(--bluca-surface-subtle, var(--soft))); color: var(--ink); font-size: .86rem; font-weight: 750; }
.pwa-install-finish i { margin-right: .35rem; color: #15945b; }
.context-help-panel:not([data-install-device="desktop"])[data-install-platform="ios"] .pwa-install-platform-android,
.context-help-panel:not([data-install-device="desktop"])[data-install-platform="android"] .pwa-install-platform-ios { display: none; }

.pwa-install-lightbox {
    width: min(920px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100dvh - 24px);
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 20px;
    background: #07111f;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .55);
}
.pwa-install-lightbox::backdrop { background: rgba(2, 8, 18, .78); backdrop-filter: blur(6px); }
.pwa-install-lightbox img { display: block; width: 100%; height: auto; }
.pwa-install-lightbox > button {
    position: sticky;
    z-index: 2;
    top: .7rem;
    float: right;
    width: 42px;
    height: 42px;
    margin: .7rem .7rem -3.3rem 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(7, 17, 31, .9);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .context-help-trigger { right: 12px; bottom: 84px; }
    .context-help-panel { right: 10px; bottom: 142px; }
    .context-help-panel.is-install-guide {
        top: 10px;
        right: 8px;
        bottom: 82px;
        left: 8px;
        width: auto;
        max-height: none;
        padding: 14px;
        border-radius: 18px;
    }
    .pwa-install-platforms { grid-template-columns: minmax(0, 1fr); }
    .pwa-install-platform { padding: .75rem; }
    .pwa-install-intro { align-items: start; }
    .pwa-install-image-button > span { font-size: .68rem; }
}
.package-admin-card > header p:last-child { max-width: 640px; margin: .45rem 0 0; color: var(--muted); }
.package-settings-form { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.package-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.package-field-grid .form-label > span:first-child { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.package-tier-table { display: grid; gap: .45rem; margin: .85rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 16px; background: var(--brand-surface); }
.package-tier-head,
.package-tier-row { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(70px, .55fr) minmax(70px, .55fr) minmax(150px, 1fr) 48px; gap: .5rem; align-items: center; }
.package-tier-head { padding: 0 .2rem; color: var(--muted); font-size: .7rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.package-tier-row .form-control { min-width: 0; }
.package-tier-active { display: grid; place-items: center; min-height: 42px; }
.package-switches { display: flex; flex-wrap: wrap; gap: 1rem; margin: .45rem 0 1rem; }
.package-switches label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 760; }
.package-plan-status { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.package-plan-status span,
.package-plan-status strong,
.package-plan-status small { display: block; }
.package-plan-status span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.package-plan-status strong { max-width: 390px; margin-top: .2rem; overflow-wrap: anywhere; }
.package-plan-status small { margin-top: .25rem; }

@media (max-width: 980px) {
    .package-catalog-grid,
    .package-admin-grid { grid-template-columns: 1fr; }
    .package-product-card { min-height: 0; }
}

@media (max-width: 640px) {
    .package-catalog-head { align-items: stretch; }
    .trial-promise { min-width: 0; width: 100%; }
    .package-product-card,
    .package-admin-card { padding: 1rem; }
    .package-product-card > header { grid-template-columns: auto minmax(0, 1fr); }
    .package-product-card > header .status-pill { grid-column: 1 / -1; justify-self: start; }
    .package-usage-summary { grid-template-columns: 1fr; }
    .package-price-row,
    .package-admin-intro,
    .package-admin-card > header,
    .package-plan-status { align-items: stretch; flex-direction: column; }
    .package-field-grid { grid-template-columns: 1fr; }
    .package-tier-head { display: none; }
    .package-tier-row { grid-template-columns: 1fr 1fr; padding: .65rem; border: 1px solid var(--line); border-radius: 12px; }
    .package-tier-row > :first-of-type { grid-column: 1 / -1; }
    .package-tier-row .input-group { grid-column: 1 / -1; }
    .package-tier-active { grid-column: 1 / -1; justify-content: start; }
    .package-product-card > footer,
    .package-product-card > footer form,
    .package-product-card > footer .btn,
    .package-plan-status form,
    .package-plan-status .btn { width: 100%; }
}

/* Trainer-Arbeitsbereich: Gruppen, Termine und schnelle Anwesenheit */
.trainer-mobile-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 0 0 1rem; }
.trainer-mobile-nav a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .65rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); font-weight: 800; text-decoration: none; }
.trainer-mobile-nav a:hover { border-color: var(--primary); color: var(--primary); }
.trainer-now-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: .8rem; }
.trainer-now-card { position: relative; display: grid; align-content: start; gap: .3rem; min-height: 118px; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.trainer-now-card.primary { background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 18%, var(--panel)), var(--panel)); }
.trainer-now-card > span { color: var(--muted); font-size: .74rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.trainer-now-card > strong { font-size: 1.3rem; }
.trainer-now-card > small { color: var(--muted); }
.trainer-now-card .stretched-work-link { margin-top: auto; color: var(--primary); font-size: .82rem; font-weight: 850; }
.trainer-groups-section { margin-top: 1.25rem; scroll-margin-top: 88px; }
.trainer-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.trainer-group-card { display: grid; gap: .8rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 14px 32px color-mix(in srgb, var(--shadow), transparent 22%); }
.trainer-group-card-head { display: flex; align-items: start; justify-content: space-between; gap: .65rem; }
.trainer-group-card h3 { margin: 0; font-size: 1.05rem; }
.trainer-group-card-head > div > span { display: block; margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.trainer-group-facts { display: flex; gap: .6rem; }
.trainer-group-facts span { flex: 1; padding: .55rem; border-radius: 12px; background: var(--brand-surface); color: var(--muted); font-size: .74rem; }
.trainer-group-facts strong { color: var(--text); font-size: .95rem; }
.trainer-next-session { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .45rem; padding: .7rem; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); border-radius: 13px; color: var(--text); text-decoration: none; }
.trainer-next-session span { color: var(--muted); font-size: .72rem; }
.trainer-next-session strong { font-size: .78rem; }
.trainer-more-panel { padding: 0; overflow: hidden; }
.trainer-more-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; }
.trainer-more-panel > summary::-webkit-details-marker { display: none; }
.trainer-more-panel > summary span, .trainer-more-panel > summary strong, .trainer-more-panel > summary small { display: block; }
.trainer-more-panel > summary small { margin-top: .15rem; color: var(--muted); }
.trainer-more-panel[open] > summary i { transform: rotate(180deg); }
.trainer-more-content { display: grid; gap: 1rem; padding: 0 1.2rem 1.2rem; }
.trainer-profile-compact { display: flex; align-items: center; gap: .75rem; padding: .8rem; border-radius: 14px; background: var(--brand-surface); }
.trainer-profile-compact > div { min-width: 0; flex: 1; }
.trainer-profile-compact strong, .trainer-profile-compact span { display: block; }
.trainer-profile-compact span { color: var(--muted); font-size: .78rem; }

.training-attendance-panel { scroll-margin-top: 80px; }
.attendance-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.attendance-panel-head h2 { margin: 0; }
.attendance-panel-head > div > span { color: var(--muted); font-size: .82rem; }
.attendance-event-actions { border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
.attendance-event-actions > summary { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); cursor: pointer; font-size: .78rem; font-weight: 800; list-style: none; }
.attendance-event-actions > summary::-webkit-details-marker { display: none; }
.attendance-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.attendance-search { display: flex; align-items: center; gap: .55rem; min-width: min(320px, 100%); padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 13px; background: var(--brand-surface); }
.attendance-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.attendance-bulk-buttons { display: flex; gap: .5rem; }
.attendance-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.attendance-roster-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; min-height: 62px; padding: .55rem 2.4rem .55rem .6rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.attendance-roster-row.is-present,.attendance-roster-row.is-positive { border-color:color-mix(in srgb,#23b678 58%,var(--line)); background:color-mix(in srgb,#23b678 13%,var(--panel)); }
.attendance-roster-row.is-negative { border-color:color-mix(in srgb,#dc3545 58%,var(--line)); background:color-mix(in srgb,#dc3545 12%,var(--panel)); }
.attendance-roster-row.is-neutral { border-color:var(--line); background:var(--panel); }
.attendance-roster-row.is-positive [data-attendance-state] { color:#1b9a66; font-weight:800; }
.attendance-roster-row.is-negative [data-attendance-state] { color:#d94a58; font-weight:800; }
.attendance-presence-toggle { display: flex; align-items: center; gap: .65rem; min-width: 0; cursor: pointer; }
.attendance-presence-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.attendance-checkmark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 2px solid var(--line); border-radius: 11px; color: transparent; }
.attendance-roster-row.is-present .attendance-checkmark { border-color: #23b678; background: #23b678; color: #fff; }
.attendance-presence-toggle .person-cell { min-width: 0; }
.attendance-presence-toggle .person-cell > span { min-width: 0; }
.attendance-presence-toggle strong, .attendance-presence-toggle small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-presence-toggle small { color: var(--muted); font-size: .73rem; }
.attendance-note { grid-column: 1 / -1; margin: .25rem 0 0 2.7rem; color: var(--muted); font-size: .75rem; }
.attendance-note p { margin: .25rem 0 0; }
.attendance-profile-link { position: absolute; right: .7rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 36px; color: var(--muted); }
.attendance-save-bar { position: sticky; bottom: .7rem; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding: .7rem; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 14px 34px var(--shadow); backdrop-filter: blur(14px); }
.attendance-save-bar span { font-size: .82rem; }

@media (max-width: 900px) {
    .trainer-now-grid { grid-template-columns: 1fr 1fr; }
    .trainer-now-card.primary { grid-column: 1 / -1; }
    .trainer-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-roster { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .trainer-workspace-head { gap: .75rem; }
    .trainer-workspace-head .btn { width: 100%; }
    .trainer-mobile-nav { position: sticky; top: 62px; z-index: 18; padding: .35rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(14px); }
    .trainer-mobile-nav a { display: grid; justify-items: center; gap: .15rem; min-height: 52px; padding: .35rem; font-size: .72rem; }
    .trainer-now-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .trainer-now-card { min-height: 100px; padding: .8rem; }
    .trainer-now-card > strong { font-size: 1.08rem; }
    .trainer-group-grid { grid-template-columns: 1fr; }
    .trainer-group-card { padding: .85rem; }
    .attendance-panel-head { align-items: flex-start; }
    .attendance-toolbar { align-items: stretch; flex-direction: column; }
    .attendance-bulk-buttons { display: grid; grid-template-columns: 1fr 1fr; }
    .attendance-bulk-buttons [data-attendance-reported] { grid-column: 1 / -1; }
    .attendance-bulk-buttons .btn { min-width: 0; white-space: normal; }
    .attendance-roster { gap: .4rem; }
    .attendance-roster-row { min-height: 56px; padding-block: .42rem; }
    .attendance-save-bar { bottom: 74px; }
    .attendance-save-bar .btn { flex: 0 0 auto; }
}

/* Superadmin: nachträgliche, eindeutige Vereinszuordnung */
.owner-people-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 980px;
}

/* Lizenzverwaltung: Zusatzmodule bekommen dieselbe ruhige, gut lesbare
   Kartenstruktur wie die übrigen BLUCA-Verwaltungsbereiche. */
.owner-license-module {
    display: grid;
    gap: 1.25rem;
}

.owner-license-module-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.owner-license-module-head > div:first-child {
    min-width: 0;
    max-width: 820px;
}

.owner-license-module-head h2 {
    margin: .15rem 0 .45rem;
    font-size: clamp(1.3rem, 2vw, 1.65rem);
}

.owner-license-module-head p:last-child {
    line-height: 1.55;
}

.owner-license-module-status {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.owner-license-module-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.owner-license-module-metrics .info-card {
    display: grid;
    min-width: 0;
    min-height: 88px;
    align-content: center;
    gap: .3rem;
    padding: 1rem;
}

.owner-license-module-metrics small {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 750;
}

.owner-license-module-metrics strong {
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1;
}

.owner-license-module-actions {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(270px, .8fr);
    gap: 1rem;
    align-items: stretch;
}

.owner-license-access-form,
.owner-license-disable-form {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--brand-surface, var(--panel)) 94%, var(--primary) 6%);
}

.owner-license-access-form h3,
.owner-license-disable-form h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
}

.owner-license-disable-form p {
    margin: 0;
    line-height: 1.5;
}

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

.owner-license-field-grid .form-label {
    display: grid;
    min-width: 0;
    gap: .4rem;
    margin: 0;
}

.owner-license-field-grid .form-label > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.owner-license-field-grid .form-control,
.owner-license-field-grid .form-select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.owner-license-access-form > .btn,
.owner-license-disable-form > .btn {
    justify-self: start;
    min-height: 42px;
}

@media (max-width: 1100px) {
    .owner-license-module-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .owner-license-module-head {
        flex-direction: column;
    }

    .owner-license-module-status {
        justify-content: flex-start;
    }

    .owner-license-module-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .owner-license-field-grid {
        grid-template-columns: 1fr;
    }

    .owner-license-access-form > .btn,
    .owner-license-disable-form > .btn {
        width: 100%;
    }
}

.owner-people-search {
    width: min(620px, 100%);
    margin: 0 0 1rem;
}

.owner-people-list {
    display: grid;
    gap: .8rem;
}

.owner-person-row {
    display: grid;
    grid-template-columns: auto minmax(190px, 1.2fr) minmax(190px, .85fr) minmax(300px, 1.15fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 96%, var(--primary) 4%);
}

.owner-person-row.unassigned {
    border-color: color-mix(in srgb, #f0ad31 42%, var(--line));
}

.owner-person-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 900;
    letter-spacing: .02em;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}

.owner-person-identity,
.owner-person-current-club {
    min-width: 0;
}

.owner-person-identity strong,
.owner-person-identity span,
.owner-person-identity small,
.owner-person-current-club span,
.owner-person-current-club strong {
    display: block;
}

.owner-person-identity strong,
.owner-person-current-club strong {
    overflow-wrap: anywhere;
}

.owner-person-identity span,
.owner-person-identity small,
.owner-person-current-club > span {
    margin-top: .2rem;
    color: var(--muted);
    font-size: .78rem;
}

.owner-person-current-club > span {
    margin: 0 0 .35rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.owner-person-assignment {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: end;
    gap: .6rem;
    margin: 0;
}

.owner-person-assignment label {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}

.owner-person-assignment .form-select,
.owner-person-assignment .btn {
    min-height: 44px;
}

.owner-person-locked {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: .45rem;
    padding: .65rem .85rem;
    border: 1px solid color-mix(in srgb, #2fbf77 42%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, #2fbf77 10%, transparent);
    color: color-mix(in srgb, #2fbf77 82%, var(--text));
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .owner-person-row {
        grid-template-columns: auto minmax(0, 1fr) minmax(240px, 1fr);
    }

    .owner-person-current-club {
        grid-column: 2;
    }

    .owner-person-assignment,
    .owner-person-locked {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 760px) {
    .owner-people-metrics,
    .owner-person-row {
        grid-template-columns: 1fr;
    }

    .owner-person-avatar {
        width: 42px;
        height: 42px;
    }

    .owner-person-current-club,
    .owner-person-assignment,
    .owner-person-locked {
        grid-column: 1;
        grid-row: auto;
    }

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

    .owner-person-locked {
        justify-self: start;
    }
}
/* Mehrtägige Kursplanung */
.course-schedule-editor { border: 1px solid var(--line, rgba(140, 170, 205, .24)); border-radius: 18px; padding: 1rem; background: color-mix(in srgb, var(--surface, #10243a) 88%, transparent); }
.course-schedule-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.course-schedule-head strong, .course-schedule-head span { display: block; }
.course-schedule-head span { color: var(--muted, #9fb0c5); font-size: .9rem; margin-top: .2rem; }
.course-schedule-grid { display: grid; gap: .65rem; }
.course-schedule-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, .7fr) minmax(120px, .7fr); gap: .75rem; align-items: end; padding: .75rem; border: 1px solid var(--line, rgba(140, 170, 205, .2)); border-radius: 14px; }
.course-schedule-row label { display: block; font-size: .78rem; color: var(--muted, #9fb0c5); margin-bottom: .3rem; }
.course-schedule-day { display: flex !important; align-items: center; gap: .65rem; min-height: 42px; margin: 0 !important; font-size: 1rem !important; color: var(--text, #f6f8fb) !important; font-weight: 700; }
.course-schedule-day input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary, #258cff); }
.yolawo-weekday-editor .course-schedule-day > span { display: grid; gap: .12rem; }
.yolawo-weekday-editor .course-schedule-day small { color: var(--muted, #9fb0c5); font-size: .75rem; font-weight: 650; }
.yolawo-weekday-feedback { min-height: 1em; color: var(--success, #2fc58d) !important; }
.course-schedule-summary { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.course-schedule-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .35rem .65rem; border: 1px solid var(--line, rgba(140, 170, 205, .24)); border-radius: 999px; background: color-mix(in srgb, var(--primary, #258cff) 10%, var(--surface, #10243a)); color: var(--text, #f6f8fb); font-size: .82rem; line-height: 1.2; white-space: nowrap; }
.course-schedule-chip strong { color: var(--primary, #258cff); font-size: inherit; }
.course-schedule-chip span { color: inherit; }
.course-schedule-empty { color: var(--muted, #9fb0c5); font-size: .88rem; }
.course-schedule-detail { min-width: min(100%, 320px); }
.course-schedule-detail > .course-schedule-summary { margin-top: .45rem; }
.course-calendar-options { display: grid; gap: .7rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line, rgba(140, 170, 205, .22)); }
.course-calendar-options > strong { font-size: 1rem; }
.course-calendar-options > p { margin: -.35rem 0 0; color: var(--muted, #9fb0c5); font-size: .88rem; }
.course-calendar-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.course-calendar-option { display: flex; align-items: flex-start; gap: .7rem; min-height: 70px; margin: 0; padding: .8rem; border: 1px solid var(--line, rgba(140, 170, 205, .24)); border-radius: 14px; background: var(--soft-panel, rgba(255, 255, 255, .05)); color: var(--ink, #f6f8fb); cursor: pointer; }
.course-calendar-option:has(input:checked) { border-color: color-mix(in srgb, var(--primary, #258cff) 58%, var(--line)); background: color-mix(in srgb, var(--primary, #258cff) 12%, var(--panel)); }
.course-calendar-option input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; margin-top: .15rem; accent-color: var(--primary, #258cff); cursor: pointer; }
.course-calendar-option span { display: grid; gap: .2rem; min-width: 0; }
.course-calendar-option b { color: inherit; font-size: .92rem; }
.course-calendar-option small { color: var(--muted, #9fb0c5); font-size: .78rem; line-height: 1.35; }
@media (max-width: 720px) { .course-schedule-row { grid-template-columns: 1fr 1fr; } .course-schedule-day { grid-column: 1 / -1; } .course-calendar-option-grid { grid-template-columns: 1fr; } }

/* Persönlicher Kalender */
.personal-calendar-head > div:first-child > p:last-child { margin: .35rem 0 0; color: var(--muted); }
.personal-calendar-shell { display: grid; gap: 1rem; }
.personal-calendar-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.personal-calendar-toolbar > div { display: grid; justify-items: center; text-align: center; }
.personal-calendar-toolbar strong { color: var(--ink); font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
.personal-calendar-toolbar span { color: var(--muted); font-size: .8rem; }
.personal-calendar-actions { display: flex; justify-content: flex-end; }
.personal-calendar-weekdays, .personal-calendar-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .55rem; }
.personal-calendar-weekdays span { padding: .3rem; color: var(--muted); font-size: .75rem; font-weight: 850; text-align: center; text-transform: uppercase; }
.personal-calendar-blank { min-height: 1px; }
.personal-calendar-day { position: relative; display: grid; align-content: start; gap: .55rem; min-height: 142px; padding: .7rem; border: 1px solid var(--line); border-radius: 15px; background: var(--strong-panel); color: var(--ink); }
.personal-calendar-day > header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.personal-calendar-day > header strong { font-size: 1.05rem; }
.personal-calendar-day > header span { overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.personal-calendar-day.is-empty { background: color-mix(in srgb, var(--strong-panel) 82%, transparent); }
.personal-calendar-entries { display: grid; gap: .4rem; }
.personal-calendar-entry { display: grid; min-width: 0; padding: .5rem; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, var(--panel)); color: var(--ink); text-decoration: none; }
.personal-calendar-entry:hover { border-color: var(--primary); color: var(--ink); transform: translateY(-1px); }
.personal-calendar-entry time { color: var(--primary); font-size: .72rem; font-weight: 900; }
.personal-calendar-entry strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.personal-calendar-entry span { color: var(--muted); font-size: .65rem; }
.personal-calendar-day-add { display: grid; place-items: center; width: 28px; height: 28px; margin-top: auto; border: 1px solid var(--line); border-radius: 50%; color: var(--primary); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.personal-calendar-day-add:hover { border-color: var(--primary); background: var(--primary); color: #fff; }
.personal-calendar-edit { max-width: 1050px; }
.personal-calendar-private-note { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--success) 38%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--success) 10%, var(--panel)); color: var(--ink); }
.personal-calendar-private-note > i { color: var(--success); font-size: 1.25rem; }
.personal-calendar-private-note > div { display: grid; }
.personal-calendar-private-note span { color: var(--muted); font-size: .82rem; }
@media (max-width: 900px) { .personal-calendar-month { grid-template-columns: repeat(4, minmax(0, 1fr)); } .personal-calendar-weekdays, .personal-calendar-blank { display: none; } }
@media (max-width: 620px) { .personal-calendar-toolbar { grid-template-columns: 1fr 1fr; } .personal-calendar-toolbar > div { grid-column: 1 / -1; grid-row: 1; } .personal-calendar-month { grid-template-columns: 1fr; } .personal-calendar-day { min-height: auto; } .personal-calendar-day.is-empty { display: none; } .personal-calendar-day-add { position: absolute; top: .55rem; right: .55rem; } }

/* DigiPass-Einladungen im Kinderschwimmen */
.optional-linking-panel { padding: .85rem 1rem; border: 1px solid var(--line, rgba(140, 170, 205, .24)); border-radius: 14px; background: color-mix(in srgb, var(--surface, #10243a) 92%, transparent); }
.optional-linking-panel summary { cursor: pointer; color: var(--muted, #9fb0c5); font-size: .88rem; font-weight: 800; }
.optional-linking-panel[open] summary { margin-bottom: .8rem; color: var(--text, #f6f8fb); }
.digipass-invite-list { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line, rgba(140, 170, 205, .22)); }
.digipass-invite-list h3 { margin: 0; font-size: 1rem; }
.digipass-invite-row { margin-top: .6rem; border: 1px solid var(--line, rgba(140, 170, 205, .24)); border-radius: 14px; background: color-mix(in srgb, var(--surface, #10243a) 90%, transparent); overflow: hidden; }
.digipass-invite-row > summary { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .8rem .9rem; cursor: pointer; list-style: none; }
.digipass-invite-row > summary::-webkit-details-marker { display: none; }
.digipass-invite-row > summary span:first-child { display: grid; gap: .15rem; min-width: 0; }
.digipass-invite-row > summary small { color: var(--muted, #9fb0c5); overflow-wrap: anywhere; }
.digipass-invite-confirm { padding: 1rem; border-top: 1px solid var(--line, rgba(140, 170, 205, .22)); }
.digipass-invite-confirm h4 { margin: 0 0 .8rem; }
.detail-grid.compact { margin-bottom: .8rem; }
@media (max-width: 720px) { .digipass-invite-row > summary { align-items: flex-start; flex-direction: column; } }
/* Web Push device registration */
.push-device-panel{display:grid;gap:.85rem;margin-top:1.35rem;padding:1.1rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--panel) 90%,var(--primary) 10%)}
.push-device-panel h3,.push-device-panel p{margin:0}.push-device-panel>div:first-child{display:grid;gap:.35rem}.push-device-status{padding:.8rem .9rem;border:1px solid var(--line);border-radius:12px;font-weight:750}.push-device-status[data-state="success"]{border-color:#34d399;background:rgba(16,185,129,.12)}.push-device-status[data-state="warning"]{border-color:#fbbf24;background:rgba(245,158,11,.12)}.push-device-status[data-state="error"]{border-color:#fb7185;background:rgba(225,29,72,.12)}.push-device-actions{display:flex;flex-wrap:wrap;gap:.65rem}.push-device-panel details{padding-top:.25rem}.push-device-panel summary{cursor:pointer;font-weight:800}.push-device-panel details p{margin-top:.65rem;color:var(--muted)}
@media(max-width:640px){.push-device-actions{display:grid}.push-device-actions .btn{width:100%;min-height:48px}}

@media (max-width: 760px) {
    .course-mobile-actions {
        position: sticky;
        z-index: 20;
        top: 8px;
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .8fr));
        gap: 6px;
        margin: 0 0 12px;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: color-mix(in srgb, var(--panel) 92%, transparent);
        box-shadow: 0 14px 30px rgba(5, 15, 30, .18);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .course-mobile-actions .btn {
        display: grid;
        place-content: center;
        min-width: 0;
        min-height: 48px;
        padding: 7px 8px;
        font-size: .79rem;
        line-height: 1.1;
        white-space: normal;
    }

    .course-mobile-actions .btn small {
        display: block;
        margin-top: 3px;
        font-size: .68rem;
        opacity: .85;
    }

    .course-overview-details {
        padding: 0;
        overflow: hidden;
    }

    .course-overview-details > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 58px;
        padding: 12px 14px;
        cursor: pointer;
        list-style: none;
    }

    .course-overview-details > summary::-webkit-details-marker {
        display: none;
    }

    .course-overview-details > summary span:first-child,
    .course-overview-details > summary strong,
    .course-overview-details > summary small {
        display: block;
    }

    .course-overview-details > summary small {
        margin-top: 2px;
        color: var(--muted);
        font-size: .76rem;
    }

    .course-overview-chevron {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--soft-panel);
        font-size: 1.1rem;
        font-weight: 900;
    }

    .course-overview-details[open] .course-overview-chevron {
        transform: rotate(45deg);
    }

    .course-overview-details:not([open]) > .course-overview-content {
        display: none;
    }

    .course-overview-content {
        padding: 0 12px 12px;
        border-top: 1px solid var(--line);
    }

    .course-overview-content .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding-top: 10px;
    }

    .course-overview-content .detail-grid > div {
        padding: 9px;
    }

    .course-overview-content .detail-grid > .course-schedule-detail {
        grid-column: 1 / -1;
    }

    .course-workspace > .course-sessions-panel {
        order: 1;
    }

    .course-workspace > .course-participants-panel {
        order: 2;
    }

    .next-course-session {
        grid-template-columns: 1fr;
        padding: 13px;
    }

    .next-course-session .btn {
        width: 100%;
        min-height: 48px;
    }

    .course-session-item .d-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .course-session-item .d-flex .btn:first-child {
        grid-column: 1 / -1;
        min-height: 44px;
    }

    .course-participant-card {
        gap: 9px;
        padding: 12px;
    }

    .course-participant-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 32px;
        align-items: center;
        gap: 9px;
        cursor: pointer;
    }

    .course-participant-summary > strong {
        min-width: 0;
        overflow: hidden;
        color: var(--ink);
        font-size: 1rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .course-participant-summary > .course-participant-summary-name {
        display: flex;
        align-items: center;
        gap: 7px;
        overflow: visible;
        white-space: normal;
    }

    .course-participant-summary-name > span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .course-participant-passed .course-participant-summary {
        margin: -5px;
        padding: 8px;
        border: 1px solid color-mix(in srgb, var(--success), transparent 35%);
        border-radius: 14px;
        background: color-mix(in srgb, var(--success), var(--panel) 77%);
    }

    .course-participant-summary-chevron {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--soft-panel);
        color: var(--primary);
        font-size: 1.15rem;
        font-weight: 900;
        transition: transform .15s ease;
    }

    .course-participant-card[open] .course-participant-summary-chevron {
        transform: rotate(45deg);
    }

    .course-participant-summary-signals {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(100px, .72fr);
        gap: 7px;
    }

    .course-participant-summary-signals > span {
        display: grid;
        gap: 2px;
        min-width: 0;
        padding: 8px 9px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: color-mix(in srgb, var(--soft-panel), transparent 8%);
    }

    .course-participant-summary-signals > .course-participant-achievements {
        grid-column: 1 / -1;
        border-color: color-mix(in srgb, var(--success), transparent 62%);
        background: color-mix(in srgb, var(--success), transparent 90%);
    }

    .course-participant-summary-signals small {
        color: var(--muted);
        font-size: .66rem;
        font-weight: 850;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .course-participant-summary-signals strong {
        min-width: 0;
        overflow: hidden;
        color: var(--ink);
        font-size: .88rem;
        font-weight: 900;
        line-height: 1.2;
        text-overflow: ellipsis;
    }

    .course-participant-card:not([open]) > .course-participant-details {
        display: none !important;
    }

    .course-participant-card[open] > .course-participant-details {
        display: grid;
        gap: 9px;
        padding-top: 3px;
        border-top: 1px solid var(--line);
    }

    .course-participant-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .course-participant-main .btn {
        width: auto;
    }

    .course-participant-signals {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 3px;
    }

    .course-signal-card {
        min-width: 128px;
        min-height: 72px;
        padding: 9px;
        scroll-snap-align: start;
    }

    .attendance-form {
        padding: 10px;
    }

    .attendance-toolbar {
        position: sticky;
        z-index: 12;
        top: 8px;
        grid-template-columns: 1fr auto;
        margin: -2px -2px 10px;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: color-mix(in srgb, var(--panel) 94%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .attendance-search {
        min-width: 0;
    }

    .attendance-toolbar .form-control,
    .attendance-toolbar .btn {
        min-height: 44px;
    }

    .attendance-toolbar .btn {
        padding-inline: 10px;
        font-size: .76rem;
    }

    .attendance-counter {
        grid-column: 1 / -1;
        padding: 0 5px 2px;
        font-size: .78rem;
    }

    .attendance-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px;
    }

    .attendance-row > div:first-of-type {
        align-self: center;
    }

    .attendance-toggle {
        min-height: 44px;
        padding: 8px 10px;
    }

    .attendance-note {
        grid-column: 1 / -1;
    }

    .attendance-save-bar {
        position: sticky;
        z-index: 15;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        margin: 12px -2px -2px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: color-mix(in srgb, var(--panel) 95%, transparent);
        box-shadow: 0 -10px 30px rgba(5, 15, 30, .15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .attendance-save-bar > span {
        display: none;
    }

    .attendance-save-bar .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* Keep the compact attachment composer after the legacy responsive chat rules. */
.chat-compose-bar{grid-template-columns:auto minmax(0,1fr) auto}.chat-compose-main{min-width:0}
@media(max-width:767.98px){.chat-compose-bar{grid-template-columns:auto minmax(0,1fr) auto}.chat-compose-bar>.btn-primary{min-width:68px;padding-inline:12px}.chat-directory-list{grid-template-columns:1fr}.chat-bubble{max-width:94%}}
@media(max-width:430px){.chat-compose-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:6px;padding:8px}.chat-compose-bar>.btn-primary{min-width:58px;padding-inline:9px}}
.course-helper-bulk-editor > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.course-helper-bulk-editor > summary::-webkit-details-marker { display: none; }

.course-helper-bulk-editor > summary span:first-child {
    display: grid;
    gap: .2rem;
}

.course-helper-bulk-editor > summary small {
    color: var(--muted);
    font-weight: 500;
}

.course-helper-session-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.course-helper-session-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .6rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: .15rem;
}

.course-helper-session-option {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .035);
}

.course-helper-session-option .form-check-input {
    flex: 0 0 auto;
    margin: .2rem 0 0;
}

.course-helper-session-option .form-check-label {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.course-helper-session-option small {
    color: var(--muted);
}

@media (max-width: 575.98px) {
    .course-helper-session-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-helper-session-list {
        grid-template-columns: 1fr;
        max-height: 18rem;
    }
}

.birthday-confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    pointer-events: none;
}

.birthday-confetti-piece {
    position: absolute;
    top: -2rem;
    width: .65rem;
    height: 1.1rem;
    border-radius: .15rem;
    background: var(--confetti-color);
    animation: birthday-confetti-fall var(--confetti-duration) ease-in var(--confetti-delay) forwards;
    transform: translate3d(0, -3rem, 0) rotate(0deg);
}

.event-card[id^="dashboard-event-"] {
    scroll-margin-top: 7rem;
}

.dashboard-event-link {
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dashboard-event-link:hover,
.dashboard-event-link:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 14%, transparent);
    outline: none;
}

@keyframes birthday-confetti-fall {
    to {
        transform: translate3d(var(--confetti-drift), calc(100vh + 4rem), 0) rotate(var(--confetti-rotation));
        opacity: .9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .birthday-confetti-layer { display: none; }
}

/* Wettkampf: kompakte, gut lesbare Mehrfachzuordnung der Trainer. */
:root:not([data-theme="dark"]) {
    --competition-trainer-card-bg: #ffffff;
    --competition-trainer-card-selected-bg: #e9fbf3;
    --competition-trainer-card-border: #b8c5d3;
    --competition-trainer-name: #0f172a;
    --competition-trainer-email: #405269;
}

:root[data-theme="dark"] {
    --competition-trainer-card-bg: #182638;
    --competition-trainer-card-selected-bg: #123a31;
    --competition-trainer-card-border: #52657a;
    --competition-trainer-name: #f8fafc;
    --competition-trainer-email: #cbd5e1;
}

.competition-trainer-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .65rem;
}

.competition-trainer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 800;
}

.competition-trainer-toggle .bi-chevron-down {
    transition: transform .2s ease;
}

.competition-trainer-toggle-close,
.competition-trainer-toggle[aria-expanded="true"] .competition-trainer-toggle-open {
    display: none;
}

.competition-trainer-toggle[aria-expanded="true"] .competition-trainer-toggle-close {
    display: inline;
}

.competition-trainer-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.competition-trainer-form {
    margin-top: 1rem;
    padding-top: .15rem;
    border-top: 1px solid var(--bluca-surface-border);
}

.competition-trainer-option {
    min-height: 82px;
    border: 1px solid var(--competition-trainer-card-border) !important;
    background: var(--competition-trainer-card-bg) !important;
    color: var(--competition-trainer-name) !important;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.competition-trainer-option:hover {
    border-color: var(--primary-color, #078da1) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}

.competition-trainer-option:has(input:checked) {
    border-color: #159a72 !important;
    background: var(--competition-trainer-card-selected-bg) !important;
    box-shadow: inset 4px 0 0 #159a72;
}

.competition-trainer-person {
    min-width: 0;
    overflow-wrap: anywhere;
}

.competition-trainer-name,
.competition-trainer-option strong {
    color: var(--competition-trainer-name) !important;
    font-size: 1rem;
    line-height: 1.3;
}

.competition-trainer-email,
.competition-trainer-option .small {
    color: var(--competition-trainer-email) !important;
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    .competition-trainer-toolbar,
    .competition-trainer-toggle {
        width: 100%;
    }

    .competition-trainer-toolbar {
        justify-content: flex-start;
    }
}

/* Arbeitszeiterfassung: kompakt auf Mobilgeräten, unverändert tabellarisch auf Desktop. */
.time-tracking-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.time-tracking-filter {
    grid-template-columns: minmax(110px, .55fr) minmax(120px, .65fr) auto;
    align-items: end;
}

.time-tracking-filter.has-person-filter {
    grid-template-columns: minmax(100px, .45fr) minmax(110px, .55fr) minmax(210px, 1.4fr) auto;
}

.time-tracking-filter > label {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.time-tracking-filter-label {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
}

.time-tracking-activity-list .info-item > div {
    align-items: center;
}

.time-tracking-auto-note-mobile {
    display: none;
}

.time-entry-table .time-entry-activity,
.time-entry-table .time-entry-hours {
    font-weight: 800;
}

.time-approval-card {
    display: grid;
    gap: 8px;
}

.time-approval-card > p {
    margin: 0;
}

@media (max-width: 760px) {
    .time-tracking-page .time-tracking-page-head {
        gap: 9px;
        margin-bottom: 10px;
        padding: 12px;
    }

    .time-tracking-page-head h1 {
        font-size: clamp(1.65rem, 8vw, 2.2rem);
    }

    .time-tracking-page-head .eyebrow {
        margin-bottom: 2px;
        font-size: .68rem;
    }

    .time-tracking-page .time-tracking-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
    }

    .time-tracking-actions .btn {
        display: grid;
        place-items: center;
        min-width: 0;
        min-height: 42px;
        padding: 7px 9px;
        font-size: .76rem;
        line-height: 1.15;
    }

    .time-tracking-actions .time-tracking-primary-action {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 46px;
        font-size: .86rem;
    }

    .time-tracking-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .time-tracking-metrics .metric {
        min-height: 70px;
        padding: 10px 12px;
    }

    .time-tracking-metrics .metric span {
        font-size: .72rem;
    }

    .time-tracking-metrics .metric strong {
        margin-top: 1px;
        font-size: 1.25rem;
    }

    .time-tracking-page .time-tracking-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 9px !important;
        margin-bottom: 9px;
    }

    .time-tracking-filter.has-person-filter .time-tracking-person-filter,
    .time-tracking-filter .time-tracking-filter-submit {
        grid-column: 1 / -1;
    }

    .time-tracking-filter .form-control,
    .time-tracking-filter .form-select,
    .time-tracking-filter .btn {
        min-height: 42px;
    }

    .time-tracking-summary-grid {
        gap: 8px;
        margin-top: 0 !important;
    }

    .time-tracking-activity-summary,
    .time-tracking-auto-note {
        padding: 11px;
    }

    .time-tracking-auto-note-desktop {
        display: none;
    }

    .time-tracking-auto-note-mobile {
        display: block;
    }

    .time-tracking-auto-note-mobile > summary {
        cursor: pointer;
        font-size: .82rem;
        font-weight: 850;
    }

    .time-tracking-auto-note-mobile[open] > summary {
        margin-bottom: 7px;
    }

    .time-tracking-activity-summary h2,
    .time-tracking-auto-note h2 {
        margin-bottom: 7px;
        font-size: .96rem;
    }

    .time-tracking-activity-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .time-tracking-activity-list .info-item {
        padding: 8px 9px;
    }

    .time-tracking-activity-list .info-item > div {
        display: grid;
        gap: 1px;
    }

    .time-tracking-activity-list .info-item strong,
    .time-tracking-activity-list .info-item span {
        font-size: .74rem;
    }

    .time-tracking-auto-note p {
        font-size: .76rem;
        line-height: 1.4;
    }

    .time-tracking-entries {
        margin-top: 8px !important;
        padding: 11px;
    }

    .time-tracking-entries .section-head {
        margin-bottom: 8px;
    }

    .time-tracking-entries .section-head h2 {
        margin: 0;
        font-size: 1rem;
    }

    .time-tracking-entries .table-responsive {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .time-tracking-page .time-entry-table {
        margin: 0;
    }

    .time-tracking-page .time-entry-table tbody {
        display: grid;
        gap: 7px;
    }

    .time-tracking-page .time-entry-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 10px;
        margin: 0;
        padding: 10px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--soft-panel), transparent 6%);
    }

    .time-tracking-page .time-entry-table td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .time-tracking-page .time-entry-table td::before {
        display: none;
    }

    .time-entry-date {
        grid-column: 1;
        grid-row: 1;
        font-size: .76rem;
        font-weight: 850;
    }

    .time-entry-status {
        grid-column: 2;
        grid-row: 1;
    }

    .time-entry-status .status-pill {
        padding: 3px 7px;
        font-size: .63rem;
    }

    .time-entry-activity {
        grid-column: 1 / -1;
        grid-row: 2;
        overflow: hidden;
        font-size: .98rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .time-entry-assignment {
        grid-column: 1;
        grid-row: 3;
        overflow: hidden;
        color: var(--muted);
        font-size: .72rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .time-entry-person {
        grid-column: 2;
        grid-row: 3;
        max-width: 42vw;
        overflow: hidden;
        color: var(--muted);
        font-size: .7rem;
        text-align: right !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .time-entry-assignment::before,
    .time-entry-person::before {
        display: inline;
        color: var(--muted);
        font-size: .62rem;
        font-weight: 750;
    }

    .time-entry-assignment::before {
        content: "Zuordnung: ";
    }

    .time-entry-person::before {
        content: "Person: ";
    }

    .time-entry-time {
        grid-column: 1;
        grid-row: 4;
        font-size: .8rem;
    }

    .time-entry-hours {
        grid-column: 2;
        grid-row: 4;
        font-size: .82rem;
        text-align: right !important;
    }

    .time-entry-actions {
        grid-column: 1 / -1;
        grid-row: 5;
        padding-top: 5px !important;
    }

    .time-entry-actions > .d-flex {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
    }

    .time-entry-actions form,
    .time-entry-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .time-entry-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
    }

    .time-entry-form > [class*="col-"] {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .time-entry-form > .col-12,
    .time-entry-form > .validation-summary-errors {
        grid-column: 1 / -1;
    }

    .time-entry-form > .validation-summary-valid {
        display: none;
    }

    .time-entry-form .form-label {
        min-height: 1.8em;
        margin-bottom: 3px;
        font-size: .7rem;
        line-height: 1.15;
    }

    .time-entry-form .form-control,
    .time-entry-form .form-select {
        min-width: 0;
        min-height: 43px;
        padding: 7px 8px;
        font-size: .83rem;
    }

    .time-entry-form .time-entry-notes textarea {
        min-height: 70px;
    }

    .time-entry-savebar {
        position: sticky;
        z-index: 16;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
        margin-top: 2px !important;
        padding: 7px !important;
        border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
        border-radius: 14px;
        background: color-mix(in srgb, var(--panel) 95%, transparent);
        box-shadow: 0 -10px 28px rgba(5, 15, 30, .15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .time-entry-savebar .btn {
        width: 100%;
        min-height: 44px;
    }

    .time-entry-savebar .btn:only-child {
        grid-column: 1 / -1;
    }

    .time-approval-card {
        gap: 5px;
        padding: 10px;
    }

    .time-approval-card > div {
        display: grid;
        gap: 2px;
    }

    .time-approval-card > p {
        font-size: .74rem;
    }

    .time-approval-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
        margin-top: 3px;
    }

    .time-approval-actions .form-control {
        grid-column: 1 / -1;
        min-height: 42px;
    }

    .time-approval-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding-inline: 8px;
    }

    .time-tracking-settings-page form.row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
    }

    .time-tracking-settings-page form.row > [class*="col-"] {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .time-tracking-settings-page form.row > .col-12,
    .time-tracking-settings-page form.row > .d-flex {
        grid-column: 1 / -1;
    }
}
.athlete-time-chart { position:relative; width:100%; max-width:100%; overflow:hidden; aspect-ratio:16/9; color:var(--primary); background:color-mix(in srgb,var(--primary) 5%,var(--brand-surface,var(--panel))); border-radius:1rem; padding:.5rem; }
.athlete-time-chart svg { display:block; width:100%; max-width:100%; height:100%; overflow:hidden; }
.athlete-chart-grid line { stroke:color-mix(in srgb,var(--muted) 28%,transparent); stroke-width:2; vector-effect:non-scaling-stroke; }
.athlete-chart-line { fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.athlete-chart-line.course-25,.athlete-chart-point.course-25 { stroke:var(--primary); }
.athlete-chart-line.course-50,.athlete-chart-point.course-50 { stroke:var(--accent); }
.athlete-chart-line.course-unknown,.athlete-chart-point.course-unknown { stroke:#8b6fd6; }
.athlete-chart-point { fill:var(--brand-surface,var(--panel)); stroke-width:5; vector-effect:non-scaling-stroke; }
.athlete-time-chart text { fill:var(--muted); font-size:28px; font-weight:700; }
.athlete-chart-legend { display:flex; flex-wrap:wrap; gap:.8rem; margin:.65rem 0 .2rem; color:var(--muted); font-size:.78rem; font-weight:800; }
.athlete-chart-legend span::before { content:""; display:inline-block; width:.75rem; height:.75rem; margin-right:.35rem; border-radius:999px; vertical-align:-.05rem; background:var(--primary); }
.athlete-chart-legend .course-50::before { background:var(--accent); }
.athlete-chart-legend .course-unknown::before { background:#8b6fd6; }
.athlete-chart-note { margin:.55rem 0 0; color:var(--muted); font-size:.75rem; }

/* Athlete competition profile */
.athlete-profile-shell { width: min(1440px, calc(100% - 28px)); margin: 0 auto; padding: 1.2rem 0 3rem; color: var(--text); }
.athlete-profile-back { display: inline-flex; margin-bottom: .8rem; font-weight: 750; }
.athlete-profile-hero { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; padding: 2rem; overflow: hidden; border-radius: 28px 28px 0 0; color: #fff; background: radial-gradient(circle at 78% 42%, rgba(42,143,224,.42), transparent 24%), linear-gradient(115deg,#061b3d 0%,#073167 62%,#075282 100%); box-shadow: 0 22px 60px rgba(0,20,55,.22); }
.athlete-profile-hero::after { content:""; position:absolute; inset:0 0 0 56%; opacity:.23; background: repeating-radial-gradient(ellipse at 60% 55%,transparent 0 19px,rgba(255,255,255,.2) 20px 21px); pointer-events:none; }
.athlete-profile-identity,.athlete-profile-hero-actions,.athlete-profile-facts { position:relative; z-index:1; }
.athlete-profile-identity { display:flex; align-items:center; gap:1.5rem; }
.athlete-profile-photo { width:170px; height:170px; flex:0 0 170px; border:4px solid rgba(255,255,255,.82); border-radius:50%; object-fit:cover; box-shadow:0 14px 35px rgba(0,0,0,.28); }
.athlete-profile-photo-fallback { display:grid; place-items:center; background:linear-gradient(135deg,#26b8df,#1f6ed1); font-size:4rem; font-weight:850; }
.athlete-profile-kicker { margin:0 0 .2rem; color:#78d7ff; font-size:.78rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.athlete-profile-identity h1 { margin:0; color:#fff; font-size:clamp(2rem,4vw,3.8rem); line-height:1; }
.athlete-profile-year,.athlete-profile-club { margin:.65rem 0 0; font-size:1.05rem; }
.athlete-profile-hero-actions { display:flex; align-items:flex-start; gap:.5rem; }
.athlete-profile-hero-actions .form-select,.athlete-share-button { min-height:48px; border:1px solid rgba(255,255,255,.22); border-radius:14px; color:#fff; background:rgba(5,28,63,.7); }
.athlete-profile-hero-actions .form-select { padding-inline:1rem 2.5rem; }
.athlete-profile-hero-actions option { color:#081b35; background:#fff; }
.athlete-share-button { width:48px; font-size:1.4rem; }
.athlete-profile-facts { grid-column:1/-1; display:flex; gap:clamp(1.3rem,4vw,4rem); padding-left:194px; }
.athlete-profile-facts div { display:grid; grid-template-columns:auto auto; align-items:center; gap:.1rem .65rem; }
.athlete-profile-facts span { grid-row:1/3; color:#63cfff; font-weight:900; }
.athlete-profile-facts strong { color:#fff; font-size:1.45rem; line-height:1; }
.athlete-profile-facts small { color:rgba(255,255,255,.8); }
.athlete-profile-dashboard { display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:1rem; padding:1.25rem; border-radius:0 0 28px 28px; background:color-mix(in srgb,var(--brand-surface,var(--panel)) 94%,#fff); }
.athlete-profile-card { min-width:0; padding:1.15rem; border:1px solid var(--line); border-radius:18px; background:var(--brand-surface,var(--panel)); box-shadow:0 8px 28px rgba(9,34,70,.06); }
.athlete-profile-card h2 { margin:0 0 1rem; color:var(--text); font-size:1rem; font-weight:900; letter-spacing:.035em; text-transform:uppercase; }
.athlete-best-list h2 { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.athlete-best-list h2 span { display:inline-grid; place-items:center; min-width:2rem; min-height:2rem; padding:.2rem .55rem; border-radius:999px; color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent); font-size:.78rem; }
.athlete-best-scroll { max-height:430px; padding-right:.35rem; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.athlete-best-scroll:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent); outline-offset:4px; border-radius:10px; }
.athlete-empty { margin:0; padding:1.2rem; border-radius:13px; color:var(--muted); background:color-mix(in srgb,var(--primary) 5%,transparent); }
.athlete-medal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; text-align:center; }
.athlete-medal-grid div { display:grid; gap:.15rem; }
.athlete-medal { font-size:3.2rem; filter:drop-shadow(0 8px 8px rgba(0,0,0,.16)); }
.athlete-medal-grid strong { font-size:1.4rem; }.athlete-medal-grid small { color:var(--muted); }
.athlete-podium-summary { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:.25rem .5rem; align-items:center; margin-top:1rem; padding:.8rem; border-radius:13px; background:color-mix(in srgb,var(--primary) 7%,transparent); }
.athlete-podium-summary strong { color:var(--primary); font-size:1.25rem; }.athlete-podium-summary span { color:var(--muted); font-size:.78rem; }
.athlete-season-row,.athlete-best-row { display:grid; align-items:center; gap:.7rem; margin-top:.55rem; padding:.75rem; border:1px solid var(--line); border-radius:13px; color:var(--text); text-decoration:none; }
.athlete-season-row { grid-template-columns:1fr repeat(3,auto) auto; }.athlete-season-row:hover,.athlete-best-row:hover { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 6%,transparent); }
.athlete-best-row { grid-template-columns:38px minmax(0,1fr) auto auto; column-gap:.7rem; }.athlete-best-row small { display:block; color:var(--muted); font-size:.7rem; }.athlete-best-row b,.athlete-result-list em { padding:.2rem .4rem; border-radius:7px; color:#075ab8; background:#e4f1ff; font-size:.68rem; font-style:normal; }
.athlete-best-icon { display:grid; place-items:center; align-self:start; width:34px; height:34px; border-radius:10px; color:#0878db; background:color-mix(in srgb,#0878db 12%,transparent); font-size:1.05rem; line-height:1; }
.athlete-best-discipline,.athlete-best-value { display:grid; gap:.12rem; min-width:0; }
.athlete-best-discipline>strong { line-height:1.25; overflow-wrap:anywhere; }
.athlete-best-source { margin-top:.2rem; overflow-wrap:anywhere; }
.athlete-best-value { min-width:6.5rem; justify-items:end; text-align:right; white-space:nowrap; }
.athlete-best-value>strong { color:var(--text); font-size:1.05rem; }
.athlete-stroke-icon { color:#0878db; font-size:1.45rem; font-weight:900; }
.athlete-recent-competitions { grid-column:1/2; }.athlete-season-highlights { grid-column:2/4; }
.athlete-competition-row { display:grid; grid-template-columns:56px 1fr; gap:.8rem; padding:.7rem 0; border-top:1px solid var(--line); }.athlete-competition-row:first-of-type{border-top:0}.athlete-competition-mark{display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(145deg,#33b7e4,#0563cf);font-size:1.5rem}.athlete-competition-row strong,.athlete-competition-row small{display:block}.athlete-competition-row small{margin-top:.2rem;color:var(--muted)}.athlete-competition-row p{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0}.athlete-competition-row p span{padding:.2rem .45rem;border-radius:999px;background:color-mix(in srgb,var(--primary) 7%,transparent);font-size:.7rem}
.athlete-highlight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }.athlete-highlight-grid article{display:grid;gap:.4rem;padding:1rem;border:1px solid var(--line);border-radius:14px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 6%,transparent),transparent)}.athlete-highlight-grid article.place-1{border-color:#e0ad37;background:#fff9e9}.athlete-highlight-grid article.place-2{border-color:#b9c8dc;background:#f5f8fc}.athlete-highlight-grid article.place-3{border-color:#d49a77;background:#fff5ef}.athlete-highlight-grid b{font-size:1.25rem}.athlete-highlight-grid small{color:var(--muted)}
.athlete-development { grid-column:2/4; }.athlete-development-head{display:flex;justify-content:space-between;gap:1rem}.athlete-development-head>span{display:grid;padding:.55rem .8rem;border-radius:12px;color:var(--muted);background:color-mix(in srgb,var(--primary) 7%,transparent)}.athlete-development-head>span.is-positive{color:#087b43;background:#e8f8ef}.athlete-development-head b{font-size:1.3rem}.athlete-development-head small{font-weight:800}
.athlete-training-attendance{grid-column:1/2}.athlete-attendance-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:1rem}.athlete-attendance-summary div{display:grid;gap:.15rem;padding:.8rem;border-radius:13px;text-align:center;background:color-mix(in srgb,var(--primary) 7%,transparent)}.athlete-attendance-summary strong{color:var(--primary);font-size:1.35rem}.athlete-attendance-summary span{color:var(--muted);font-size:.72rem}.athlete-attendance-history{display:grid}.athlete-attendance-history article{display:grid;grid-template-columns:90px 1fr auto;gap:.7rem;align-items:center;padding:.65rem 0;border-top:1px solid var(--line)}.athlete-attendance-history article:first-child{border-top:0}.athlete-attendance-history small{display:block;color:var(--muted)}.athlete-attendance-history b{padding:.3rem .55rem;border-radius:999px;font-size:.72rem}.athlete-attendance-history .is-present{color:#087b43;background:#e8f8ef}.athlete-attendance-history .is-absent{color:#a52b32;background:#fdebec}:root[data-theme="dark"] .athlete-attendance-history .is-present{color:#8ce2b3;background:#123b2a}:root[data-theme="dark"] .athlete-attendance-history .is-absent{color:#ffb0b5;background:#4a1f25}
.athlete-chart-filters{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr)) auto;gap:.6rem;align-items:end;margin-bottom:1rem;padding:.8rem;border-radius:14px;background:color-mix(in srgb,var(--primary) 6%,transparent)}.athlete-chart-filters label{display:grid;gap:.3rem;color:var(--muted);font-size:.75rem;font-weight:800}.athlete-chart-filters .btn{min-height:44px}
.athlete-results-history { grid-column:1/-1; }.athlete-result-filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1rem}.athlete-result-filters .form-select{width:auto;min-width:145px}.athlete-result-filters label{display:flex;align-items:center;gap:.35rem;padding:.55rem .75rem;border:1px solid var(--line);border-radius:12px}.athlete-result-list{display:grid}.athlete-result-list article{display:grid;grid-template-columns:95px 32px minmax(130px,.8fr) 100px 70px 80px minmax(220px,1.3fr) 80px;gap:.65rem;align-items:center;padding:.72rem;border-top:1px solid var(--line)}.athlete-result-list article:nth-child(odd){background:color-mix(in srgb,var(--primary) 3%,transparent)}.athlete-result-list article>strong small,.athlete-result-meet small{display:block;color:var(--muted);font-size:.72rem;font-weight:650}.athlete-points{text-align:right;color:var(--muted)}
:root[data-theme="dark"] .athlete-highlight-grid article.place-1,:root[data-theme="dark"] .athlete-highlight-grid article.place-2,:root[data-theme="dark"] .athlete-highlight-grid article.place-3 { color:var(--text); background:color-mix(in srgb,var(--panel) 90%,var(--primary)); }
@media (max-width: 1050px){.athlete-profile-dashboard{grid-template-columns:1fr 1fr}.athlete-best-list,.athlete-season-highlights,.athlete-training-attendance,.athlete-development,.athlete-results-history{grid-column:auto}.athlete-results-history{grid-column:1/-1}.athlete-result-list article{grid-template-columns:80px 28px 1fr 90px 60px}.athlete-result-meet{grid-column:3/6}.athlete-points{display:none}}
@media (max-width: 720px){.athlete-best-scroll{max-height:360px}}
@media (max-width: 720px){.athlete-profile-shell{width:min(100% - 12px,1440px);padding-top:.5rem}.athlete-profile-hero{grid-template-columns:1fr;padding:1.15rem;border-radius:20px 20px 0 0}.athlete-profile-identity{align-items:flex-start;gap:.85rem}.athlete-profile-photo{width:90px;height:90px;flex-basis:90px}.athlete-profile-identity h1{font-size:1.75rem}.athlete-profile-year,.athlete-profile-club{margin-top:.35rem;font-size:.85rem}.athlete-profile-hero-actions{grid-row:1;justify-content:flex-end}.athlete-profile-hero-actions .form-select{min-height:42px}.athlete-share-button{width:42px;min-height:42px}.athlete-profile-facts{padding-left:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.athlete-profile-dashboard{grid-template-columns:1fr;padding:.65rem;border-radius:0 0 20px 20px}.athlete-recent-competitions,.athlete-season-highlights,.athlete-training-attendance,.athlete-development,.athlete-results-history{grid-column:1}.athlete-highlight-grid{grid-template-columns:1fr}.athlete-podium-summary{grid-template-columns:auto 1fr}.athlete-attendance-summary{grid-template-columns:1fr}.athlete-attendance-history article{grid-template-columns:75px 1fr}.athlete-attendance-history b{grid-column:2}.athlete-chart-filters{grid-template-columns:1fr}.athlete-result-filters .form-select,.athlete-result-filters .btn{width:100%}.athlete-result-list article{grid-template-columns:72px 28px 1fr auto;gap:.4rem}.athlete-result-list article>span:nth-of-type(2),.athlete-place{display:none}.athlete-result-meet{grid-column:3/5}.athlete-development-head{display:grid}.athlete-best-row{grid-template-columns:34px minmax(0,1fr) auto;align-items:start}.athlete-best-row>b{display:none}.athlete-best-value{min-width:6rem}.athlete-best-value>strong{font-size:.95rem}.athlete-time-chart{width:100%;max-width:100%;min-height:0;height:auto;aspect-ratio:16/9}.athlete-time-chart svg{width:100%;max-width:100%;height:100%}}

@media (max-width: 390px) {
    .athlete-best-row { grid-template-columns:34px minmax(0,1fr); }
    .athlete-best-value { grid-column:2; min-width:0; justify-items:start; text-align:left; }
}

/* Handys im Querformat sind breiter als klassische Mobile-Breakpoints, haben
   aber nur wenig Höhe. Sie behalten deshalb die kompakte Bedienung. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
    body { font-size:.92rem; }
    h1,.page-head h1 { font-size:clamp(1.45rem,4.5vw,2rem); overflow-wrap:anywhere; }
    h2,.section-head h2 { font-size:clamp(1.05rem,3vw,1.35rem); overflow-wrap:anywhere; }
    .page-head,.surface,.card-body { padding:12px; }
    .page-head { align-items:flex-start; gap:10px; }
    .page-head .btn { width:auto; max-width:100%; }

    .app-nav-menu.show,.app-nav-menu.collapsing { max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior:contain; }
    .app-nav-menu .navbar-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .app-nav-link { min-height:40px; white-space:normal; }
    .header-actions { align-items:stretch; }
    .header-actions .department-switcher,.header-actions .header-context-switcher { min-width:0; max-width:none; flex:1 1 210px; }
    .app-dropdown { max-height:calc(100dvh - 82px); overflow-y:auto; }

    .people-card-grid { grid-template-columns:1fr; gap:8px; }
    .person-card { min-height:0; padding:10px 13px; }
    .person-card .person-card-identity small,.person-card>.person-card-detail,.person-card>.person-role-tags,.person-card>.status-pill { display:none; }
    .person-card-heading { grid-template-columns:36px minmax(0,1fr) auto; }
    .person-card-avatar { width:36px; height:36px; }
    .person-card-status { width:10px; height:10px; padding:0; font-size:0; align-self:center; }
    .person-editor-dialog { width:calc(100vw - 12px); max-width:none; height:calc(100dvh - 12px); margin:6px; }
    .person-editor-modal { max-height:calc(100dvh - 12px); }
    .person-editor-header,.person-editor-body,.person-editor-footer { padding:10px 14px; }
    .person-editor-body { overflow-y:auto; }
    .person-summary-grid,.access-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

    .mobile-collapsible-source { display:none; }
    .mobile-collapsible-list { display:grid; gap:7px; }
    .mobile-collapsible-item { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--soft-panel); }
    .mobile-collapsible-item summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:50px; padding:8px 12px; color:var(--ink); cursor:pointer; list-style:none; }
    .mobile-collapsible-item summary::-webkit-details-marker { display:none; }
    .mobile-collapsible-item summary::after { content:"›"; color:var(--primary); font-size:1.35rem; font-weight:900; transition:transform .16s ease; }
    .mobile-collapsible-item[open] summary::after { transform:rotate(90deg); }
    .mobile-collapsible-content { display:grid; gap:0; padding:0 12px 11px; border-top:1px solid var(--line); }
    .mobile-collapsible-content>div:not(.mobile-collapsible-actions) { display:grid; gap:2px; padding:7px 0; border-bottom:1px solid var(--line); }
    .mobile-collapsible-content span,.mobile-collapsible-content small { color:var(--muted); overflow-wrap:anywhere; }
    .mobile-collapsible-actions { display:flex; flex-wrap:wrap; gap:7px; padding-top:10px; }

    .athlete-profile-shell { width:min(100% - 12px,1440px); padding-top:.4rem; }
    .athlete-profile-hero { grid-template-columns:1fr auto; gap:.7rem; padding:1rem; border-radius:18px 18px 0 0; }
    .athlete-profile-photo { width:72px; height:72px; flex-basis:72px; }
    .athlete-profile-identity { gap:.7rem; }
    .athlete-profile-identity h1 { font-size:1.5rem; overflow-wrap:anywhere; }
    .athlete-profile-facts { padding-left:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
    .athlete-profile-facts div { min-width:0; }
    .athlete-profile-facts strong { font-size:1.1rem; }
    .athlete-profile-facts small { overflow-wrap:anywhere; }
    .athlete-profile-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); padding:.7rem; }
    .athlete-results-history { grid-column:1/-1; }
    .athlete-chart-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .athlete-chart-filters .btn { width:100%; }
    .athlete-result-list article { grid-template-columns:75px 26px minmax(120px,1fr) 85px; }
    .athlete-result-list article>span:nth-of-type(2),.athlete-place,.athlete-points { display:none; }
    .athlete-result-meet { grid-column:3/5; overflow-wrap:anywhere; }

    .form-control,.form-select,.btn { max-width:100%; }
    td,th,label,small,strong,p,span { overflow-wrap:anywhere; }
}

/* Kontextauswahl im Kopfbereich: Formular-Styles aus den Inhaltsseiten duerfen
   die kompakten Rollen- und Spartenwahlschalter nicht als weisse Eingabefelder
   darstellen. */
@media (min-width: 1200px) {
    .header-actions {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 7px;
    }

    .header-actions .department-switcher {
        flex: 0 0 154px;
        width: 154px;
        max-width: 154px;
        min-height: 42px;
        padding: 3px 6px 3px 10px;
        gap: 6px;
        border-color: rgba(255,255,255,.24);
        border-radius: 13px;
        background: rgba(7,17,31,.22);
        box-shadow: none;
    }

    .header-actions .department-switcher > i {
        flex: 0 0 auto;
        color: rgba(255,255,255,.86);
        font-size: .95rem;
    }

    .header-actions .department-switcher .form-select,
    .header-actions .header-context-switcher .form-select {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 34px;
        padding: .32rem 1.8rem .32rem .55rem;
        border: 0 !important;
        border-radius: 9px !important;
        color: #fff !important;
        background-color: rgba(255,255,255,.12) !important;
        box-shadow: none !important;
        font-size: .84rem;
        font-weight: 700;
        text-overflow: ellipsis;
    }

    .header-actions .header-context-switcher .form-select {
        min-width: 0;
    }

    .header-actions .header-context-switcher {
        flex-basis: 132px;
        width: 132px;
        max-width: 132px;
    }

    .header-actions .department-switcher .form-select option {
        color: #111827;
        background: #fff;
    }

    .header-actions .header-settings-link,
    .header-actions .header-logout {
        flex: 0 0 auto;
        min-height: 42px;
        border-radius: 13px;
    }

    .header-actions .header-logout {
        border: 1px solid rgba(255,255,255,.24);
        color: #fff;
        background: rgba(7,17,31,.22);
    }
}

@media (min-width: 1200px) {
    .app-nav-menu.show .header-actions,
    .app-nav-menu.collapsing .header-actions {
        width: 100%;
        max-width: none;
    }

    .app-nav-menu.show .header-actions .department-switcher,
    .app-nav-menu.collapsing .header-actions .department-switcher {
        flex: 1 1 220px;
        width: auto;
        max-width: 280px;
    }

    .app-nav-menu.show .header-actions .header-context-switcher,
    .app-nav-menu.collapsing .header-actions .header-context-switcher {
        flex-basis: 240px;
        width: auto;
        max-width: 300px;
    }
}

/* Deckendes Desktop-Kompaktmenü: Die Seite darf im hellen Design nicht durch
   die Navigation hindurchscheinen. */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-collapse.app-nav-menu {
        right: 8px;
        color: #fff;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--primary-dark) 90%, #07111f),
            color-mix(in srgb, var(--primary) 68%, #07111f)) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .app-nav-menu .mobile-nav-heading {
        align-items: center;
        color: #fff;
    }

    .app-nav-menu .mobile-nav-heading-copy {
        display: grid !important;
        gap: 2px;
    }

    .app-nav-menu .mobile-nav-heading-copy > span {
        color: rgba(255, 255, 255, .72);
    }

    .app-nav-menu .app-nav-link {
        color: #fff !important;
        background: rgba(255, 255, 255, .07);
    }

    .app-nav-menu .app-nav-link:hover,
    .app-nav-menu .app-nav-link:focus,
    .app-nav-menu .navbar-nav .nav-link.show {
        color: #fff !important;
        background: rgba(255, 255, 255, .15);
    }
}

@media (max-width: 720px) {
    .athlete-profile-hero { gap:1rem; }
    .athlete-profile-facts { gap:.55rem; }
    .athlete-profile-facts div {
        display:grid;
        grid-template-columns:30px minmax(0,1fr);
        grid-template-rows:auto auto;
        gap:1px 8px;
        min-width:0;
        padding:.62rem .7rem;
        border:1px solid rgba(255,255,255,.1);
        border-radius:12px;
        background:rgba(3,25,59,.28);
    }
    .athlete-profile-facts div:last-child { grid-column:1/-1; }
    .athlete-profile-facts span {
        grid-column:1;
        grid-row:1/3;
        align-self:center;
        justify-self:center;
        font-size:.82rem;
    }
    .athlete-profile-facts strong {
        grid-column:2;
        grid-row:1;
        min-width:0;
        font-size:1.2rem;
        line-height:1.1;
    }
    .athlete-profile-facts small {
        grid-column:2;
        grid-row:2;
        min-width:0;
        color:rgba(255,255,255,.76) !important;
        font-size:.7rem;
        line-height:1.2;
        overflow-wrap:anywhere;
    }
}

@media (max-width: 390px) {
    .athlete-profile-hero { padding:.9rem; }
    .athlete-profile-photo { width:76px; height:76px; flex-basis:76px; }
    .athlete-profile-identity h1 { font-size:1.45rem; }
    .athlete-profile-facts { grid-template-columns:1fr; }
    .athlete-profile-facts div:last-child { grid-column:1; }
}
.personnel-department-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
}

.personnel-department-selector small {
    display: block;
    color: var(--muted-color, #667085);
    margin-top: .25rem;
}

.personnel-department-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.personnel-department-tabs form { margin: 0; }

@media (max-width: 720px) {
    .personnel-department-selector { align-items: stretch; flex-direction: column; }
    .personnel-department-tabs { display: grid; grid-template-columns: 1fr; }
    .personnel-department-tabs .btn { width: 100%; }
}
/* Statistik & Analytics */
.analytics-page{display:grid;gap:1rem;max-width:1500px;margin:0 auto}.analytics-page .app-card{background:var(--card-bg,#fff);border:1px solid var(--border-color,rgba(30,50,80,.12));border-radius:22px;box-shadow:0 14px 34px rgba(15,35,60,.08)}.analytics-hero{padding:1.6rem 1.8rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:linear-gradient(125deg,var(--card-bg,#fff),color-mix(in srgb,var(--primary-color,#8b159c) 9%,var(--card-bg,#fff)))}.analytics-hero h1{margin:.25rem 0;font-size:clamp(2rem,5vw,4.2rem);line-height:1}.analytics-hero p{margin:0;max-width:780px;color:var(--text-muted,#64748b)}.analytics-eyebrow{font-size:.74rem;font-weight:900;letter-spacing:.09em;color:var(--primary-color,#8b159c)}.analytics-hero-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.analytics-hero-actions>span{padding:.65rem .9rem;border-radius:999px;background:rgba(22,163,74,.12);color:#15803d;font-weight:800;white-space:nowrap}.analytics-filter{padding:1rem;display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:.75rem;align-items:end}.analytics-filter label,.analytics-links label{display:grid;gap:.35rem;font-weight:750;font-size:.82rem}.analytics-filter select,.analytics-filter input,.analytics-links input{width:100%;min-height:44px;border:1px solid var(--border-color,#d6dce5);border-radius:12px;padding:.6rem .75rem;background:var(--input-bg,#f8fafc);color:var(--text-color,#111827)}.analytics-check{display:flex!important;align-items:center;flex-direction:row;min-height:44px}.analytics-check input{width:auto;min-height:auto}.analytics-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}.analytics-kpis article{padding:1rem 1.1rem;display:grid;gap:.25rem;min-width:0}.analytics-kpis small{color:var(--text-muted,#64748b);font-weight:800}.analytics-kpis strong{font-size:clamp(1.45rem,3vw,2.25rem);line-height:1}.analytics-kpis span{font-size:.74rem;color:var(--text-muted,#64748b)}.analytics-main-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:1rem}.analytics-chart-card,.analytics-live,.analytics-funnel,.analytics-table-card,.analytics-audience-grid>.app-card,.analytics-links{padding:1.25rem}.analytics-chart-card header,.analytics-links header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.analytics-page h2{font-size:1.1rem;margin:.2rem 0 .8rem}.analytics-legend{display:flex;gap:1rem;font-size:.8rem}.analytics-legend span:before{content:"";display:inline-block;width:.65rem;height:.65rem;border-radius:50%;margin-right:.35rem}.analytics-legend .visitors:before{background:#16a3cf}.analytics-legend .views:before{background:var(--primary-color,#8b159c)}.analytics-bars{height:270px;display:flex;gap:.4rem;align-items:stretch;padding:1rem 0 0;overflow-x:auto;border-bottom:1px solid var(--border-color,#ddd)}.analytics-bar-group{flex:1;min-width:34px;display:grid;grid-template-rows:1fr auto;gap:.4rem;text-align:center}.analytics-bar-pair{height:100%;display:flex;align-items:end;justify-content:center;gap:3px}.analytics-bar-pair i{display:block;width:min(14px,42%);min-height:4px;border-radius:6px 6px 2px 2px}.analytics-bar-pair .visitor{background:#16a3cf}.analytics-bar-pair .view{background:var(--primary-color,#8b159c)}.analytics-bar-group small{font-size:.66rem;white-space:nowrap}.analytics-live>strong{display:block;font-size:4rem;line-height:1;margin-top:.5rem;color:var(--primary-color,#8b159c)}.analytics-live div,.analytics-audience-grid article>div,.analytics-compact-breakdown>div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-top:1px solid var(--border-color,rgba(0,0,0,.1))}.analytics-live p,.analytics-links header p{color:var(--text-muted,#64748b)}.analytics-funnel-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.analytics-funnel-steps article{position:relative;padding:1rem;border-radius:16px;background:color-mix(in srgb,var(--primary-color,#8b159c) 9%,transparent);display:grid}.analytics-funnel-steps article:not(:last-child):after{content:"→";position:absolute;right:-.75rem;top:35%;font-weight:900}.analytics-funnel-steps strong{font-size:1.65rem}.analytics-funnel-steps span{color:var(--primary-color,#8b159c);font-weight:800}.analytics-table-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.analytics-table-card table{width:100%;border-collapse:collapse}.analytics-table-card th,.analytics-table-card td{padding:.65rem .5rem;border-bottom:1px solid var(--border-color,rgba(0,0,0,.1));text-align:right;font-size:.82rem}.analytics-table-card th:first-child,.analytics-table-card td:first-child{text-align:left;max-width:210px;overflow-wrap:anywhere}.analytics-audience-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}.analytics-compact-breakdown i{display:block;grid-column:1/-1;height:5px;border-radius:5px;background:rgba(148,163,184,.2)}.analytics-compact-breakdown em{display:block;height:100%;background:var(--primary-color,#8b159c);border-radius:5px}.analytics-links form{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:.75rem;align-items:end}.analytics-link-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1rem}.analytics-link-list article{display:flex;gap:.75rem;padding:.75rem;border:1px solid var(--border-color,#ddd);border-radius:16px;min-width:0}.analytics-link-list img{width:72px;height:72px;border-radius:8px}.analytics-link-list div{display:grid;min-width:0}.analytics-link-list code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-empty{min-height:220px;display:grid;place-content:center;text-align:center;gap:.4rem;color:var(--text-muted,#64748b)}.analytics-empty i{font-size:2rem}.analytics-empty.compact{min-height:100px}
@media(max-width:1100px){.analytics-filter{grid-template-columns:repeat(3,1fr)}.analytics-kpis{grid-template-columns:repeat(3,1fr)}.analytics-table-grid{grid-template-columns:1fr 1fr}.analytics-audience-grid{grid-template-columns:repeat(3,1fr)}.analytics-links form{grid-template-columns:repeat(3,1fr)}.analytics-link-list{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.analytics-page{gap:.75rem}.analytics-hero{align-items:flex-start;flex-direction:column;padding:1.15rem}.analytics-filter{grid-template-columns:1fr 1fr}.analytics-kpis{grid-template-columns:1fr 1fr}.analytics-main-grid,.analytics-table-grid,.analytics-audience-grid{grid-template-columns:1fr}.analytics-funnel-steps{grid-template-columns:1fr 1fr}.analytics-funnel-steps article:after{display:none}.analytics-links form,.analytics-link-list{grid-template-columns:1fr}.analytics-chart-card header,.analytics-links header{display:block}.analytics-bars{height:220px}.analytics-filter .btn{width:100%}}
.guided-trial-selection{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);align-items:center;gap:1rem;margin:1rem 0;padding:1.25rem}.guided-trial-selection h2{margin:.15rem 0 .4rem}.guided-trial-selection p{margin-bottom:0}.guided-trial-selection label{display:grid;gap:.4rem;font-weight:800}.guided-trial-hint{grid-column:1/-1;padding:.75rem 1rem;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--muted)}.guided-package-catalog .package-product-card[hidden]{display:none!important}@media(max-width:720px){.guided-trial-selection{grid-template-columns:1fr}.guided-trial-hint{grid-column:1}}
.form-check-input[type="checkbox"] {
    cursor: pointer;
    transition: none;
}

.form-check-input[type="checkbox"]:checked {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m3.5 8.5 3 3 6-7'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* Die mobile Schnellleiste bleibt unabhängig vom Seiten-Scrollen am Viewport. */
@media (max-width: 1199.98px) {
    html {
        overflow-x: hidden;
    }

    body.has-mobile-tabbar {
        overflow-x: hidden;
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    html.mobile-navigation-open,
    body.mobile-navigation-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.mobile-navigation-open {
        position: fixed;
        top: var(--mobile-navigation-scroll-offset, 0);
        right: 0;
        left: 0;
        width: 100%;
        touch-action: none;
    }

    body.mobile-navigation-open .app-nav {
        z-index: 1045;
    }

    .mobile-navigation-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(2, 8, 16, .66);
    }

    .mobile-navigation-backdrop[hidden] {
        display: none;
    }

body.has-mobile-tabbar > .mobile-tabbar {
        position: fixed !important;
        top: auto !important;
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
        left: max(8px, env(safe-area-inset-left, 0px));
        width: auto;
        margin: 0;
        z-index: 1055;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        will-change: transform;
        isolation: isolate;
    }

    /* Das vollständige Menü liegt über der Seite. Dadurch verschiebt ein Tipp
       auf „Mehr“ weder den Inhalt noch die untere Schnellleiste. */
    .app-nav-compact-mobile .app-nav-menu {
        position: fixed;
        z-index: 1045;
        top: calc(66px + env(safe-area-inset-top, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
        width: auto;
        max-height: calc(100dvh - 154px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        margin: 0;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .app-nav-compact-mobile .app-nav-menu.collapsing {
        height: auto !important;
        transition: none !important;
    }

    .mobile-tabbar-item[data-mobile-more-toggle].mobile-more-open {
        color: var(--button-ink);
        background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--primary), #ffffff 24%));
        box-shadow: 0 10px 22px color-mix(in srgb, var(--accent), transparent 72%);
    }
}

@media (max-width: 1199.98px) and (hover: none) and (pointer: coarse) {
    .mobile-tabbar-item:not(.active):not(.mobile-more-open):hover {
        color: rgba(255, 255, 255, .76);
        background: transparent;
        box-shadow: none;
    }
}

/* Mobile UX: rollenbezogene Heute-Ansichten und einheitliche Touch-Ziele. */
.mobile-today-section,
.family-today {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
}

.section-head.compact {
    margin-bottom: .75rem;
}

.section-head.compact h2 {
    margin-bottom: 0;
}

.mobile-today-list {
    display: grid;
    gap: .65rem;
}

.mobile-today-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    min-height: 64px;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 7%, var(--panel));
    color: var(--text);
    text-decoration: none;
}

.mobile-today-card:hover,
.mobile-today-card:focus-visible {
    border-color: var(--primary);
    color: var(--text);
}

.mobile-today-time {
    min-width: 54px;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 900;
}

.mobile-today-content {
    display: grid;
    min-width: 0;
}

.mobile-today-content strong,
.mobile-today-content small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-today-content small {
    color: var(--muted);
}

.mobile-today-action {
    color: var(--primary);
    font-size: .82rem;
    font-weight: 850;
    white-space: nowrap;
}

.family-event-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}

.family-event-card .mobile-today-card {
    border: 0;
    border-radius: 0;
}

.family-event-card.is-cancelled {
    border-color: color-mix(in srgb, #d83d4f 65%, var(--line));
}

.family-event-card.is-cancelled .mobile-today-card {
    background: color-mix(in srgb, #d83d4f 10%, var(--panel));
}

.family-event-cancelled-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem;
    border-top: 1px solid color-mix(in srgb, #d83d4f 55%, var(--line));
    background: color-mix(in srgb, #d83d4f 12%, var(--panel));
    color: var(--text);
}

.family-event-cancelled-note > i {
    color: #d83d4f;
    font-size: 1.15rem;
}

.family-event-cancelled-note > span {
    display: grid;
    gap: .15rem;
}

.family-event-cancelled-note small {
    color: var(--muted);
}

.family-quick-response {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(220px, 1.6fr);
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    border-top: 1px solid var(--line);
}

.family-quick-response > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.family-response-button {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    color: var(--text);
    font-weight: 850;
}

.family-response-button.yes.active {
    border-color: #15945f;
    background: #15945f;
    color: #fff;
}

.family-response-button.no.active {
    border-color: #d83d4f;
    background: #d83d4f;
    color: #fff;
}

.mobile-empty-state {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 76px;
    padding: .85rem;
    border: 1px dashed var(--line);
    border-radius: 16px;
}

.mobile-empty-state i {
    color: var(--primary);
    font-size: 1.5rem;
}

.mobile-empty-state span {
    display: grid;
}

.mobile-empty-state small {
    color: var(--muted);
}

.attendance-connectivity {
    margin-bottom: .65rem;
    padding: .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 10%, var(--panel));
    font-weight: 750;
}

.attendance-connectivity[data-tone="pending"] {
    border-color: #d59b19;
    background: color-mix(in srgb, #f4b62d 14%, var(--panel));
}

.attendance-connectivity[data-tone="success"] {
    border-color: #15945f;
    background: color-mix(in srgb, #15945f 12%, var(--panel));
}

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

    .page-head h1 {
        font-size: clamp(1.8rem, 10vw, 2.65rem);
        line-height: 1.02;
    }

    .mobile-today-section,
    .family-today {
        margin-inline: -.25rem;
        padding: .75rem;
        border-radius: 18px;
    }

    .mobile-today-action {
        width: 24px;
        overflow: hidden;
    }

    .family-quick-response {
        grid-template-columns: 1fr;
    }

    .family-response-button,
    .attendance-bulk-buttons .btn,
    .attendance-save-bar .btn,
    .trainer-mobile-nav a,
    .mobile-tabbar-item {
        min-height: 48px;
    }

    .attendance-save-bar {
        position: sticky;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        z-index: 12;
        padding: .65rem;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: color-mix(in srgb, var(--panel) 94%, transparent);
        backdrop-filter: blur(14px);
    }

    .row > [class*="col-"] > .form-control,
    .row > [class*="col-"] > .form-select,
    .surface .form-control,
    .surface .form-select {
        min-height: 46px;
    }
}

@media (max-width: 760px) and (orientation: landscape) {
    .app-nav {
        min-height: 54px;
    }

    .app-nav .container-fluid {
        padding-block: .25rem;
    }

    .brand-subtitle {
        display: none;
    }

    .page-head {
        min-height: 0;
    }

    .page-head h1 {
        font-size: clamp(1.6rem, 6vw, 2.25rem);
    }
}
.presence-entry-grid {
    display: grid;
    gap: .75rem;
}

.presence-entry-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color, rgba(15, 43, 69, .15));
    border-radius: 1rem;
    background: var(--surface-soft, rgba(255, 255, 255, .55));
}

.presence-entry-card > div { display: grid; gap: .15rem; }
.presence-entry-card small, .presence-entry-card span { color: var(--text-muted, #5c6d7e); }
.evidence-pill { display: inline-flex; align-items: center; width: max-content; padding: .3rem .65rem; border-radius: 999px; font-weight: 750; background: #edf1f4; color: #526170; }
.evidence-verified, .evidence-plausible { background: #d9f7e9; color: #087546; }
.evidence-warning { background: #fff0bf; color: #855d00; }
.evidence-conflict { background: #ffe0e2; color: #a01d2a; }
.qr-result img { width: min(260px, 100%); aspect-ratio: 1; object-fit: contain; background: #fff; padding: .5rem; border-radius: 1rem; }

@media (max-width: 700px) {
    .presence-entry-card { grid-template-columns: 1fr; align-items: start; }
    .presence-entry-card .btn { width: 100%; }
}

/* KI-Wissensbasis der bestehenden Trainingssteuerung */
.training-control-choice-grid > .surface { min-width:0; padding:1.25rem; }
.training-control-choice-grid > .surface > form,
.training-knowledge-grid > form { display:grid; gap:.85rem; }
.training-control-choice-grid > .surface > form > label,
.training-control-choice-grid .form-grid > label,
.training-knowledge-grid > form > label,
.training-knowledge-grid > form .form-grid > label,
.training-knowledge-section > form > label,
.training-knowledge-section > form .form-grid > label {
    display:grid;
    min-width:0;
    gap:.38rem;
    color:var(--muted);
    font-size:.78rem;
    font-weight:800;
    line-height:1.3;
}
.training-control-choice-grid .form-grid,
.training-knowledge-grid > form .form-grid,
.training-knowledge-section > form .form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
}
.training-control-choice-grid .form-grid > label:last-child:nth-child(odd) { grid-column:1/-1; }
.training-control-choice-grid input:not([type="hidden"]):not([type="checkbox"]),
.training-control-choice-grid select,
.training-control-choice-grid textarea,
.training-knowledge-grid > form input:not([type="hidden"]):not([type="checkbox"]),
.training-knowledge-grid > form select,
.training-knowledge-grid > form textarea,
.training-knowledge-section > form input:not([type="hidden"]):not([type="checkbox"]),
.training-knowledge-section > form select,
.training-knowledge-section > form textarea {
    display:block;
    width:100%;
    min-width:0;
    min-height:44px;
    padding:.65rem .75rem;
    border:1px solid var(--line);
    border-radius:12px;
    outline:0;
    color:var(--ink);
    background:var(--control-bg,var(--panel));
    font:inherit;
    font-size:.9rem;
    font-weight:600;
}
.training-control-choice-grid textarea,
.training-knowledge-grid > form textarea,
.training-knowledge-section > form textarea { min-height:96px; resize:vertical; }
.training-control-choice-grid input:focus,
.training-control-choice-grid select:focus,
.training-control-choice-grid textarea:focus,
.training-knowledge-grid > form input:focus,
.training-knowledge-grid > form select:focus,
.training-knowledge-grid > form textarea:focus,
.training-knowledge-section > form input:focus,
.training-knowledge-section > form select:focus,
.training-knowledge-section > form textarea:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 .2rem color-mix(in srgb,var(--accent) 18%,transparent);
}
.training-control-choice-grid > .surface > form > .btn,
.training-knowledge-grid > form > .btn,
.training-knowledge-section > form > .btn { justify-self:start; min-height:42px; }
.training-knowledge-grid > div,
.training-knowledge-grid > form { background:color-mix(in srgb,var(--panel) 94%,var(--primary) 6%); }
.training-knowledge-tabs{position:sticky;top:72px;z-index:8;display:flex;gap:.5rem;overflow-x:auto;margin:1rem 0;padding:.55rem;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.training-knowledge-tabs a{min-height:42px;display:inline-flex;align-items:center;padding:.55rem .9rem;border-radius:11px;color:var(--text);font-weight:800;text-decoration:none;white-space:nowrap}
.training-knowledge-tabs a:hover,.training-knowledge-tabs a:focus-visible{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.training-knowledge-section{margin-top:1rem;scroll-margin-top:150px}
.training-knowledge-section>form{display:grid;gap:.8rem;margin-bottom:1rem;padding:1rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--primary) 4%,var(--panel))}
.training-knowledge-list,.training-document-grid{display:grid;gap:.7rem}
.training-knowledge-list article,.training-document-grid article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:start;padding:1rem;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
.training-knowledge-list article>div:first-child,.training-document-grid article>div:first-child{display:grid;gap:.25rem;min-width:0}
.training-knowledge-list p{margin:.35rem 0 0;white-space:pre-wrap}
.training-abbreviation-form{grid-template-columns:minmax(180px,1fr) minmax(100px,.5fr) auto;align-items:end}
.training-knowledge-switches{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.training-knowledge-switches label{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:.65rem;border:1px solid var(--line);border-radius:12px}
@media(max-width:720px){.training-control-event-grid,.training-control-choice-grid{grid-template-columns:1fr}.training-control-choice-grid .form-grid,.training-knowledge-grid > form .form-grid,.training-knowledge-section > form .form-grid{grid-template-columns:1fr}.training-control-choice-grid .form-grid > label:last-child:nth-child(odd){grid-column:auto}.training-control-choice-grid > .surface > form > .btn,.training-knowledge-grid > form > .btn,.training-knowledge-section > form > .btn{width:100%}.training-knowledge-tabs{top:58px}.training-knowledge-list article,.training-document-grid article,.training-abbreviation-form{grid-template-columns:1fr}.training-knowledge-switches{grid-template-columns:1fr}.training-document-grid .btn,.training-knowledge-list .btn{min-height:44px}.training-knowledge-section{padding:.85rem}}

/* Ruhige BLUCA-Kopfzeile: wenige Hauptbereiche, kompakte Kontextwahl und ein
   gemeinsames Kontomenü. Diese Regeln ersetzen die frühere Desktop-Lösung,
   bei der die vollständige Navigation auch auf großen Bildschirmen in einem
   zusätzlichen Klappfenster lag. */
.header-chat-link,
.header-profile-button {
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    border:1px solid rgba(255,255,255,.2);
    border-radius:13px;
    color:#fff;
    background:rgba(7,17,31,.22);
    font-size:.86rem;
    font-weight:800;
    line-height:1;
    text-decoration:none;
}
.header-chat-link {
    min-width:42px;
    padding:.55rem .7rem;
}
.header-chat-link:hover,
.header-chat-link:focus-visible,
.header-chat-link.active,
.header-profile-button:hover,
.header-profile-button:focus-visible,
.header-profile-button[aria-expanded="true"] {
    color:#fff;
    border-color:rgba(255,255,255,.34);
    background:rgba(255,255,255,.14);
}
.header-chat-link .bi { font-size:1.05rem; }
.header-profile-button { padding:3px 8px 3px 3px; }
.header-profile-avatar {
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    border-radius:10px;
    color:#07111f;
    background:#fff;
    font-weight:900;
}
.header-profile-name {
    display:none;
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.header-profile-dropdown { min-width:270px; }
.header-profile-summary {
    display:grid;
    gap:2px;
    padding:.55rem .7rem;
    color:var(--dropdown-ink);
}
.header-profile-summary small { font-size:.72rem; }
.header-profile-summary strong {
    overflow-wrap:anywhere;
    font-size:.9rem;
}
.header-profile-logout { color:#fca5a5 !important; }
.app-dropdown-mega {
    width:min(760px,calc(100vw - 32px));
    max-height:calc(100dvh - 92px);
    column-count:2;
    column-gap:12px;
    overflow-y:auto;
    padding:12px;
}
.app-dropdown-mega > li { break-inside:avoid; }
.app-dropdown-mega .dropdown-header {
    padding-top:.65rem;
    color:color-mix(in srgb,var(--accent),#fff 22%);
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.app-dropdown-mega .dropdown-divider { border-color:rgba(255,255,255,.12); }

@media (min-width:1200px) {
    .app-nav-inner {
        max-width:1920px;
        min-height:72px;
        display:flex;
        flex-wrap:nowrap;
        gap:clamp(.55rem,1vw,1rem);
    }
    .app-brand {
        flex:0 1 220px;
        max-width:220px;
        margin-right:0;
    }
    .app-brand-text { max-width:170px; }
    .navbar-expand-xl .navbar-toggler { display:none !important; }
    .navbar-expand-xl .navbar-collapse.app-nav-menu {
        position:static;
        display:flex !important;
        flex:1 1 auto;
        align-items:center;
        width:auto;
        max-height:none;
        min-width:0;
        padding:0;
        overflow:visible;
        border:0;
        border-radius:0;
        color:inherit;
        background:transparent !important;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }
    .app-nav-menu .mobile-nav-heading { display:none !important; }
    .app-nav-menu .navbar-nav {
        display:flex;
        flex:0 1 auto;
        flex-direction:row;
        align-items:center;
        gap:2px;
        width:auto;
        min-width:0;
        margin:0 !important;
    }
    .app-nav-menu .nav-item { flex:0 0 auto; }
    .app-nav-menu .app-nav-link {
        width:auto;
        min-height:42px;
        padding:.55rem .68rem !important;
        border:1px solid transparent;
        border-radius:12px;
        color:rgba(255,255,255,.82) !important;
        background:transparent;
        font-size:.86rem;
    }
    .app-nav-menu .app-nav-link:hover,
    .app-nav-menu .app-nav-link:focus,
    .app-nav-menu .navbar-nav .nav-link.show {
        color:#fff !important;
        background:rgba(255,255,255,.1);
    }
    .app-nav-menu .app-nav-link.active {
        color:#fff !important;
        border-color:rgba(255,255,255,.15);
        background:rgba(255,255,255,.14);
        box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent),#fff 15%);
    }
    .header-actions,
    .app-nav-menu.show .header-actions,
    .app-nav-menu.collapsing .header-actions {
        display:flex;
        flex:0 0 auto;
        align-items:center;
        justify-content:flex-end;
        gap:6px;
        width:auto;
        max-width:none;
        margin-left:auto;
        padding:0;
        border-top:0;
    }
    .header-actions .department-switcher,
    .app-nav-menu.show .header-actions .department-switcher,
    .app-nav-menu.collapsing .header-actions .department-switcher {
        flex:0 0 146px;
        width:146px;
        max-width:146px;
        min-width:0;
        min-height:42px;
        padding:3px 5px 3px 8px;
    }
    .header-actions .header-context-switcher,
    .app-nav-menu.show .header-actions .header-context-switcher,
    .app-nav-menu.collapsing .header-actions .header-context-switcher {
        flex-basis:132px;
        width:132px;
        max-width:132px;
    }
    .header-actions .department-switcher .form-select,
    .header-actions .header-context-switcher .form-select {
        max-width:none;
        padding-left:.35rem;
        font-size:.78rem;
    }
    .header-actions .header-context-label { display:none; }
    .header-chat-label { display:none; }
    .app-nav-club-menu .app-dropdown-mega {
        right:0;
        left:auto;
    }
}

@media (min-width:1200px) and (max-width:1439.98px) {
    .app-nav-inner { gap:.35rem; padding-inline:10px; }
    .app-brand { flex-basis:150px; max-width:150px; }
    .app-brand-text { max-width:105px; }
    .app-brand-powered { display:none; }
    .app-nav-menu .app-nav-link { padding-inline:.55rem !important; }
    .app-nav-menu .app-nav-link > .bi { display:none; }
    .header-actions .department-switcher,
    .app-nav-menu.show .header-actions .department-switcher,
    .app-nav-menu.collapsing .header-actions .department-switcher {
        flex-basis:132px;
        width:132px;
        max-width:132px;
    }
    .header-actions .header-context-switcher,
    .app-nav-menu.show .header-actions .header-context-switcher,
    .app-nav-menu.collapsing .header-actions .header-context-switcher {
        flex-basis:116px;
        width:116px;
        max-width:116px;
    }
}

@media (min-width:1800px) {
    .header-profile-name { display:inline-block; }
    .header-chat-link { padding-inline:.8rem; }
    .header-chat-label { display:inline; }
}

@media (max-width:1199.98px) {
    .app-dropdown-mega {
        width:100%;
        min-width:0;
        max-height:none;
        column-count:1;
        overflow:visible;
    }
    .header-chat-link,
    .header-profile-button {
        width:100%;
        justify-content:flex-start;
        padding:.55rem .7rem;
    }
    .header-chat-label,
    .header-profile-name { display:inline-block; }
    .header-profile-menu { width:100%; }
    .header-profile-dropdown {
        position:static !important;
        width:100%;
        margin-top:6px !important;
        transform:none !important;
    }
}

.trial-conversion-banner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.25rem;
    margin-bottom:1rem;
    padding:1.15rem 1.25rem;
    border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));
}
.trial-conversion-banner.is-expired {
    border-color:color-mix(in srgb,#f59e0b 60%,var(--line));
    background:linear-gradient(135deg,color-mix(in srgb,#f59e0b 13%,var(--panel)),var(--panel));
}
.trial-conversion-banner h2 { margin:.1rem 0 .3rem; }
.trial-conversion-banner p { margin:0; }
.package-discount-panel {
    display:grid;
    grid-template-columns:minmax(150px,.7fr) minmax(180px,1.3fr);
    gap:.35rem 1rem;
    margin-top:1rem;
    padding:1rem;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
    background:color-mix(in srgb,var(--accent) 9%,var(--panel));
}
.package-discount-panel > small { grid-column:1/-1; color:var(--muted); }
@media (max-width:720px) {
    .trial-conversion-banner { align-items:stretch; flex-direction:column; }
    .trial-conversion-banner .btn { width:100%; }
    .package-discount-panel { grid-template-columns:1fr; }
    .package-discount-panel > small { grid-column:1; }
}

/* Kinderschwimmen: robuste Traineransicht am Beckenrand */
.trainer-participant-tools {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin:0 0 14px;
}
.trainer-participant-selects {
    display:grid;
    grid-template-columns:repeat(2,minmax(180px,1fr));
    width:100%;
    gap:10px;
}
.trainer-participant-sort select {
    min-height:44px;
    border:1px solid color-mix(in srgb,var(--primary) 48%,var(--line));
    border-radius:999px;
    background:var(--control-bg);
    color:var(--ink);
    font:inherit;
    font-weight:750;
}
.trainer-participant-sort {
    display:grid;
    gap:4px;
    color:var(--muted);
    font-size:.82rem;
    font-weight:750;
}
.trainer-participant-sort select {
    width:100%;
    padding:8px 38px 8px 14px;
}
.trainer-participant-empty {
    margin:12px 0 0;
    padding:14px;
    border:1px dashed var(--line);
    border-radius:14px;
    background:var(--soft-panel);
    color:var(--muted);
    text-align:center;
}
.trainer-photo-setting {
    margin:0 0 14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--soft-panel);
}
.trainer-photo-setting > summary {
    min-height:44px;
    padding:11px 14px;
    cursor:pointer;
    font-weight:800;
}
.trainer-photo-setting > form { padding:0 14px 14px; }
.trainer-photo-setting label { display:flex; align-items:center; gap:10px; font-weight:750; }
.trainer-photo-setting input[type="checkbox"] { width:22px; height:22px; accent-color:var(--accent); }
.trainer-photo-setting p { margin:8px 0 12px; color:var(--muted); font-size:.86rem; }

.trainer-participant-card {
    --trainer-open:#ff4e64;
    --trainer-working:#ffc847;
    --trainer-done:#43e98a;
    display:grid;
    gap:14px;
    padding:16px;
    border:1px solid #2f5676;
    border-radius:20px;
    background:#0d243b;
    color:#f7fbff;
    box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.trainer-participant-card[hidden] { display:none !important; }
.trainer-participant-card--passed {
    border-color:#35d985;
    box-shadow:0 0 0 1px rgba(53,217,133,.2),0 12px 30px rgba(0,0,0,.2);
}
.trainer-participant-card--passed .trainer-participant-card__identity > a { color:#66f1a4; }
.trainer-participant-card[data-saving="true"] { cursor:progress; }
.trainer-participant-card[data-saving="true"]::after {
    content:"Wird gespeichert …";
    justify-self:end;
    color:#b9ccdc;
    font-size:.78rem;
}
.trainer-participant-card__head {
    display:grid;
    grid-template-columns:68px minmax(120px,1fr) auto;
    align-items:center;
    gap:12px;
}
.trainer-participant-avatar {
    display:grid;
    place-items:center;
    width:68px;
    height:68px;
    overflow:hidden;
    border:2px solid #65caf0;
    border-radius:50%;
    background:#143653;
    color:#fff;
    text-decoration:none;
    box-shadow:0 0 0 3px rgba(101,202,240,.12);
}
.trainer-participant-avatar img { width:100%; height:100%; object-fit:cover; }
.trainer-participant-avatar__symbol { font-size:2.15rem; line-height:1; }
.trainer-participant-avatar__initials { font-size:1.25rem; font-weight:900; letter-spacing:.04em; }
.trainer-participant-card__identity { display:grid; min-width:0; gap:2px; }
.trainer-participant-card__identity > a {
    overflow:hidden;
    color:#fff;
    font-size:1.15rem;
    font-weight:900;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.trainer-participant-card__identity > span { color:#b9ccdc; font-size:.9rem; }
.trainer-participant-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:8px 13px;
    border-radius:999px;
    color:#071829;
    font-size:.84rem;
    font-weight:900;
    white-space:nowrap;
}
.trainer-participant-status--open { background:var(--trainer-open); }
.trainer-participant-status--almost { background:var(--trainer-working); }
.trainer-participant-status--passed { background:var(--trainer-done); }

.trainer-participant-row {
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    align-items:start;
    gap:10px;
}
.trainer-participant-row__label {
    padding-top:11px;
    color:#f7fbff;
    font-size:.86rem;
}
.trainer-skill-chips { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.trainer-skill-chip {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:44px;
    padding:8px 13px;
    border:1px solid currentColor;
    border-radius:999px;
    background:#122e48;
    color:#dce9f3;
    font:inherit;
    font-size:.85rem;
    font-weight:750;
    line-height:1.15;
    text-align:left;
}
button.trainer-skill-chip:not(:disabled) { cursor:pointer; }
button.trainer-skill-chip:not(:disabled):active { transform:scale(.97); }
.trainer-skill-chip small { opacity:.78; font-size:.72rem; }
.trainer-skill-chip--open { color:#ff7788; }
.trainer-skill-chip--working { color:#ffd66d; }
.trainer-skill-chip--done { color:#5ff0a0; }
.trainer-skill-chip--more { color:#a9c7dc; border-style:dashed; }
.trainer-skill-chip:disabled { opacity:.82; }
.trainer-empty-value { align-self:center; padding:11px 0; color:#9eb4c7; font-size:.85rem; }

.trainer-participant-metric { display:grid; gap:7px; }
.trainer-participant-metric__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#dce9f3;
    font-size:.87rem;
}
.trainer-participant-metric__head span { color:#fff; white-space:nowrap; }
.trainer-participant-metric__control {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    align-items:center;
    gap:9px;
}
.trainer-step-button {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #4d7899;
    border-radius:12px;
    background:#143653;
    color:#fff;
    font-size:1.4rem;
    font-weight:850;
}
.trainer-step-button:not(:disabled) { cursor:pointer; }
.trainer-step-button:disabled { opacity:.34; }
.trainer-meter {
    height:13px;
    overflow:hidden;
    border-radius:999px;
    background:#1b3c59;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.trainer-meter > span { display:block; height:100%; border-radius:inherit; transition:width .18s ease; }
.trainer-meter--aid > span { background:linear-gradient(90deg,#62dff0,#55e28e); }
.trainer-meter--progress > span { background:linear-gradient(90deg,#ff3f5d,#ff6b7c); }
.trainer-participant-card--passed .trainer-meter--progress > span { background:linear-gradient(90deg,#28d779,#66f1a4); }

.trainer-participant-card__actions {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}
.trainer-participant-card__actions .btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:48px;
    padding:9px 10px;
    font-size:.82rem;
}
.trainer-participant-card__actions .btn:disabled { opacity:.45; }
.trainer-participant-card__error {
    padding:10px 12px;
    border:1px solid #ff7788;
    border-radius:12px;
    background:#4d1722;
    color:#fff;
    font-weight:750;
}
.trainer-participant-card__details {
    border-top:1px solid #2f5676;
    padding-top:4px;
}
.trainer-participant-card__details > summary {
    min-height:44px;
    padding:10px 0;
    cursor:pointer;
    color:#c7d9e7;
    font-weight:800;
}
.trainer-all-skills { display:grid; gap:8px; margin:4px 0 14px; }
.trainer-all-skills .trainer-skill-chip { justify-content:flex-start; width:100%; border-radius:12px; }
.trainer-all-skills .trainer-skill-chip small { margin-left:auto; }
.trainer-participant-contact {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:0 0 12px;
}
.trainer-participant-contact div { padding:10px; border-radius:12px; background:#132f49; }
.trainer-participant-contact dt { color:#9eb4c7; font-size:.73rem; }
.trainer-participant-contact dd { margin:2px 0 0; overflow-wrap:anywhere; font-weight:750; }
.trainer-participant-detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.trainer-participant-detail-actions .btn { min-height:44px; }
.trainer-digipass-actions { display:grid; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid #2f5676; }
.trainer-digipass-actions > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.trainer-digipass-actions form { margin:0; }

.child-avatar-options,
.child-avatar-option-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
    gap:10px;
}
.child-avatar-options > label,
.child-avatar-option {
    display:grid;
    place-items:center;
    min-height:96px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--soft-panel);
    cursor:pointer;
    text-align:center;
}
.child-avatar-options > label input,
.child-avatar-option input { position:absolute; opacity:0; pointer-events:none; }
.child-avatar-options > label:has(input:checked),
.child-avatar-option:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.child-avatar-option-symbol { font-size:2rem; }

@media (max-width:760px) {
    .course-workspace > .course-participants-panel { order:1; }
    .course-workspace > .course-sessions-panel { order:2; }
    .trainer-participant-tools { display:grid; align-items:stretch; }
    .trainer-participant-selects { grid-template-columns:1fr; }
    .trainer-participant-sort { display:flex; align-items:center; justify-content:space-between; width:100%; }
    .trainer-participant-sort select { width:min(64%,240px); }
    .trainer-participant-card { gap:13px; padding:14px; border-radius:17px; }
    .trainer-participant-card__head { grid-template-columns:60px minmax(90px,1fr) auto; gap:9px; }
    .trainer-participant-avatar { width:60px; height:60px; }
    .trainer-participant-card__identity > a { font-size:1.02rem; }
    .trainer-participant-card__identity > span { font-size:.79rem; }
    .trainer-participant-status { min-height:38px; padding:7px 9px; font-size:.72rem; }
    .trainer-participant-row { grid-template-columns:86px minmax(0,1fr); gap:7px; }
    .trainer-participant-row__label { font-size:.79rem; }
    .trainer-skill-chips { gap:6px; }
    .trainer-skill-chip { min-height:44px; padding:8px 10px; font-size:.78rem; }
    .trainer-participant-card__actions { gap:6px; }
    .trainer-participant-card__actions .btn { padding-inline:6px; font-size:.72rem; }
    .trainer-participant-contact { grid-template-columns:1fr; }
    .trainer-digipass-actions > div { align-items:stretch; flex-direction:column; }
}

@media (max-width:390px) {
    .trainer-participant-card__head { grid-template-columns:58px minmax(0,1fr); }
    .trainer-participant-status { grid-column:2; justify-self:start; }
    .trainer-participant-row { grid-template-columns:1fr; }
    .trainer-participant-row__label { padding-top:0; }
    .trainer-participant-card__actions { grid-template-columns:1fr 1fr; }
    .trainer-participant-card__actions [data-confirm-passed] { grid-column:1/-1; }
}

/* Arbeitszeitkonten: Kennzahlen und Vertragswerte bleiben eindeutig bei einer Person. */
.workforce-person-list {
    display:grid;
    gap:18px;
    margin-top:18px;
}
.workforce-person-card {
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:18px;
    background:color-mix(in srgb, var(--bg) 88%, var(--primary) 12%);
    box-shadow:0 12px 30px rgba(3, 12, 24, .14);
}
.workforce-person-card__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 20px;
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 82%, var(--accent) 18%);
}
.workforce-person-card__head h3 { margin:2px 0 0; font-size:1.25rem; }
.workforce-person-card__eyebrow {
    color:var(--accent);
    font-size:.72rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.workforce-person-metrics {
    display:grid;
    grid-template-columns:repeat(6, minmax(105px, 1fr));
    gap:1px;
    background:var(--line);
}
.workforce-person-metrics > div {
    display:grid;
    align-content:start;
    gap:3px;
    min-height:88px;
    padding:15px 16px;
    background:color-mix(in srgb, var(--bg) 88%, var(--primary) 12%);
}
.workforce-person-metrics > div:nth-last-child(-n+3) { grid-column:span 2; }
.workforce-person-metrics span,
.workforce-person-metrics small { color:var(--muted); }
.workforce-person-metrics span { font-size:.78rem; font-weight:750; }
.workforce-person-metrics strong { font-size:1.05rem; }
.workforce-person-metrics small { font-size:.76rem; }
.workforce-person-metrics__balance strong { color:var(--accent); }
.workforce-contract-form {
    display:grid;
    grid-template-columns:minmax(220px,1.2fr) repeat(3,minmax(150px,1fr)) auto;
    align-items:end;
    gap:14px;
    padding:18px 20px 20px;
    border-top:1px solid var(--line);
    background:var(--soft-panel);
}
.workforce-contract-form__title { display:grid; gap:3px; align-self:center; }
.workforce-contract-form__title strong { font-size:.95rem; }
.workforce-contract-form__title span { color:var(--muted); font-size:.78rem; }
.workforce-contract-form label { display:grid; gap:6px; margin:0; }
.workforce-contract-form label > span { font-size:.78rem; font-weight:750; }
.workforce-contract-form .btn { min-height:46px; white-space:nowrap; }

@media (max-width:1180px) {
    .workforce-person-metrics { grid-template-columns:repeat(3,minmax(120px,1fr)); }
    .workforce-person-metrics > div:nth-last-child(-n+3) { grid-column:auto; }
    .workforce-contract-form { grid-template-columns:repeat(3,minmax(160px,1fr)); }
    .workforce-contract-form__title { grid-column:1/-1; }
    .workforce-contract-form .btn { grid-column:1/-1; }
}
@media (max-width:680px) {
    .workforce-person-list { gap:14px; }
    .workforce-person-card { border-radius:15px; }
    .workforce-person-card__head { padding:15px; }
    .workforce-person-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .workforce-person-metrics > div { min-height:78px; padding:13px; }
    .workforce-contract-form { grid-template-columns:1fr; padding:16px; }
    .workforce-contract-form__title,
    .workforce-contract-form .btn { grid-column:auto; }
}

.workforce-rule-assignment,
.workforce-activity-link-card {
    display:grid;
    gap:14px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--soft-panel);
}
.workforce-rule-assignment > div:first-child,
.workforce-activity-link-card > div { display:grid; gap:3px; }
.workforce-rule-assignment > div:first-child span,
.workforce-activity-link-card p { color:var(--muted); font-size:.86rem; }
.workforce-activity-form {
    display:grid;
    grid-template-columns:repeat(4,minmax(150px,1fr));
    gap:14px;
}
.workforce-activity-form > label { display:grid; align-content:start; gap:6px; margin:0; }
.workforce-activity-form > label > span { font-size:.8rem; font-weight:800; }
.workforce-activity-description { grid-column:span 2; }
.workforce-activity-check {
    display:flex !important;
    align-items:center;
    min-height:46px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:color-mix(in srgb, var(--bg) 88%, var(--primary) 12%);
}
.workforce-activity-check input { width:18px; height:18px; }
.workforce-activity-save { display:flex; align-items:end; }
.workforce-activity-save .btn { width:100%; min-height:46px; }
.workforce-activity-filter { margin:14px 0 18px; }
.workforce-activity-list { display:grid; gap:14px; }
.workforce-activity-card {
    display:grid;
    gap:14px;
    padding:17px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--soft-panel);
}
.workforce-activity-card.is-inactive { opacity:.68; }
.workforce-activity-card__main {
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:16px;
}
.workforce-activity-card__main h3 { margin:7px 0 3px; font-size:1.12rem; }
.workforce-activity-card__main p { margin:0; color:var(--muted); }
.workforce-activity-values {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:0;
}
.workforce-activity-values > div { padding:12px; border-radius:12px; background:color-mix(in srgb, var(--bg) 88%, var(--primary) 12%); }
.workforce-activity-values dt { color:var(--muted); font-size:.74rem; }
.workforce-activity-values dd { margin:3px 0 0; font-weight:750; }
.workforce-activity-card__actions { display:flex; flex-wrap:wrap; gap:8px; }
.workforce-activity-card__actions form { margin:0; }

@media (max-width:980px) {
    .workforce-activity-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .workforce-activity-form,
    .workforce-activity-values { grid-template-columns:1fr; }
    .workforce-activity-description { grid-column:auto; }
    .workforce-activity-card__main { align-items:stretch; flex-direction:column; }
    .workforce-activity-card__actions { display:grid; grid-template-columns:1fr; }
    .workforce-activity-card__actions .btn { width:100%; min-height:44px; }
}

/* BLUCA Surface-System
   Eine gemeinsame, ausreichend deckende Oberflächenhierarchie für Header,
   Navigationen, Werkzeugleisten, Inhalte und schwebende Ebenen. Die Farben
   bleiben themenfähig; der Blur ist nur eine Verfeinerung, nie Voraussetzung
   für die Lesbarkeit. */
:root {
    --bluca-surface-header: rgba(19, 31, 47, .94);
    --bluca-surface-navigation: rgba(13, 25, 40, .96);
    --bluca-surface-toolbar: rgba(18, 31, 48, .95);
    --bluca-surface-card: rgba(17, 29, 44, .95);
    --bluca-surface-elevated: rgba(22, 36, 54, .98);
    --bluca-surface-subtle: rgba(24, 39, 57, .92);
    --bluca-surface-border: rgba(226, 239, 250, .16);
    --bluca-surface-border-strong: rgba(226, 239, 250, .24);
    --bluca-surface-shadow: 0 18px 46px rgba(2, 8, 18, .24);
    --bluca-surface-shadow-elevated: 0 26px 70px rgba(2, 8, 18, .34);
    --bluca-surface-radius: 20px;
    --bluca-surface-radius-small: 14px;
    --bluca-surface-blur: blur(16px) saturate(1.08);
    --card-bg: var(--bluca-surface-card);
    --surface-soft: var(--bluca-surface-subtle);
    --panel-soft: var(--bluca-surface-subtle);
    --border-color: var(--bluca-surface-border);
    --input-bg: rgba(248, 250, 252, .98);
    --text-color: #07111f;
    --text-muted: var(--muted);
}

:root:not([data-theme="dark"]) {
    --bluca-surface-header: rgba(248, 251, 255, .96);
    --bluca-surface-navigation: rgba(247, 250, 254, .98);
    --bluca-surface-toolbar: rgba(248, 250, 253, .97);
    --bluca-surface-card: rgba(255, 255, 255, .97);
    --bluca-surface-elevated: rgba(255, 255, 255, .99);
    --bluca-surface-subtle: rgba(244, 248, 253, .95);
    --bluca-surface-border: rgba(15, 23, 42, .13);
    --bluca-surface-border-strong: rgba(15, 23, 42, .20);
    --bluca-surface-shadow: 0 16px 38px rgba(15, 23, 42, .10);
    --bluca-surface-shadow-elevated: 0 24px 60px rgba(15, 23, 42, .16);
    --input-bg: #ffffff;
}

.bluca-surface,
.bluca-surface-card,
.surface,
.auth-panel,
.card,
.app-card,
.item-card,
.event-card,
.metric,
.calendar-day,
.calendar-event,
.recurrence-box,
.profile-settings,
.registration-child,
.theme-settings,
.parent-link,
.child-login-form,
.exam-card,
.chat-message,
.chat-summary-item,
.chat-dashboard-link,
.mobile-today-section,
.family-today,
.dashboard-news-card,
.dashboard-news-empty,
.table-responsive,
.table-wrap,
.chat-thread,
.trainer-note-box,
.brand-preview,
.dashboard-tile-settings-row,
.workforce-person-card,
.workforce-activity-card {
    border-color: var(--bluca-surface-border);
    border-radius: var(--bluca-surface-radius);
    background: var(--bluca-surface-card);
    color: var(--ink);
    box-shadow: var(--bluca-surface-shadow);
    -webkit-backdrop-filter: var(--bluca-surface-blur);
    backdrop-filter: var(--bluca-surface-blur);
}

.bluca-surface-header,
.page-head,
.dashboard-hero,
.analytics-hero {
    border-color: var(--bluca-surface-border);
    border-radius: var(--bluca-surface-radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 58%),
        var(--bluca-surface-header);
    color: var(--ink);
    box-shadow: var(--bluca-surface-shadow);
    -webkit-backdrop-filter: var(--bluca-surface-blur);
    backdrop-filter: var(--bluca-surface-blur);
}

.bluca-surface-nav,
.workforce-nav,
.app-section-nav,
.settings-tabs,
.training-knowledge-tabs,
.trainer-mobile-nav,
.nav-tabs {
    max-width: 100%;
    padding: .65rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--bluca-surface-border);
    border-radius: var(--bluca-surface-radius-small);
    background: var(--bluca-surface-navigation);
    color: var(--ink);
    box-shadow: var(--bluca-surface-shadow);
    -webkit-backdrop-filter: var(--bluca-surface-blur);
    backdrop-filter: var(--bluca-surface-blur);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 52%, transparent) transparent;
}

.workforce-nav-link,
.training-knowledge-tabs a,
.nav-tabs .nav-link {
    color: var(--ink);
}

.workforce-nav-link:hover,
.workforce-nav-link:focus-visible,
.training-knowledge-tabs a:hover,
.training-knowledge-tabs a:focus-visible,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus-visible {
    border-color: var(--bluca-surface-border-strong);
    background: color-mix(in srgb, var(--primary) 15%, var(--bluca-surface-elevated));
    color: var(--ink);
}

.workforce-nav-link.active,
.training-knowledge-tabs a[aria-current="page"],
.nav-tabs .nav-link.active {
    border-color: color-mix(in srgb, var(--primary) 68%, var(--bluca-surface-border));
    background: color-mix(in srgb, var(--primary) 22%, var(--bluca-surface-elevated));
    color: var(--ink);
    box-shadow:
        inset 0 -3px 0 var(--primary),
        0 10px 24px color-mix(in srgb, var(--primary) 20%, transparent);
}

.bluca-surface-toolbar,
.bluca-toolbar,
.filter-bar,
.people-directory-toolbar,
.superadmin-toolbar,
.analytics-filter,
.attendance-toolbar,
.event-toolbar-compact,
.calendar-toolbar,
.dashboard-tile-toolbar,
.newsletter-send-panel,
.attendance-save-bar,
.chat-compose-bar {
    border: 1px solid var(--bluca-surface-border);
    border-radius: var(--bluca-surface-radius-small);
    background: var(--bluca-surface-toolbar);
    color: var(--ink);
    box-shadow: var(--bluca-surface-shadow);
    -webkit-backdrop-filter: var(--bluca-surface-blur);
    backdrop-filter: var(--bluca-surface-blur);
}

.filter-bar,
.people-directory-toolbar,
.superadmin-toolbar,
.analytics-filter,
.attendance-toolbar,
.event-toolbar-compact,
.calendar-toolbar,
.dashboard-tile-toolbar {
    padding: clamp(.75rem, 1.4vw, 1rem);
}

.bluca-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(260px, 1fr);
    align-items: end;
    gap: 1rem;
    padding: clamp(.9rem, 1.8vw, 1.25rem);
}

.bluca-toolbar__heading,
.bluca-toolbar__fields label {
    display: grid;
    gap: .3rem;
}

.bluca-toolbar__heading > span,
.bluca-toolbar__fields label > span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
}

.bluca-toolbar__presets,
.bluca-toolbar__fields,
.bluca-toolbar__actions {
    display: flex;
    align-items: end;
    gap: .65rem;
    min-width: 0;
}

.bluca-toolbar__presets {
    justify-content: flex-end;
}

.bluca-toolbar__presets .btn {
    flex: 1 1 0;
}

.bluca-toolbar__fields,
.bluca-toolbar__actions {
    grid-column: 1 / -1;
}

.bluca-toolbar__fields label {
    flex: 1 1 220px;
    margin: 0;
}

.bluca-toolbar__fields .btn,
.bluca-toolbar__actions .btn {
    min-height: 44px;
}

.bluca-toolbar__actions {
    justify-content: flex-end;
    padding-top: .85rem;
    border-top: 1px solid var(--bluca-surface-border);
}

.table-responsive,
.table-wrap {
    overflow-x: auto;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--bluca-surface-border);
    color: var(--ink);
}

.table > thead > tr > * {
    background: var(--bluca-surface-elevated);
    color: var(--ink);
    font-weight: 800;
}

.table > tbody > tr > * {
    background: transparent;
    color: var(--ink);
}

.table-hover > tbody > tr:hover > * {
    background: color-mix(in srgb, var(--primary) 10%, var(--bluca-surface-card));
    color: var(--ink);
}

.modal-content,
.bluca-surface-modal,
.app-modal,
dialog,
.offcanvas,
.popover,
.dropdown-menu,
.app-dropdown,
.chat-floating-window {
    border-color: var(--bluca-surface-border-strong);
    border-radius: var(--bluca-surface-radius);
    background: var(--bluca-surface-elevated);
    color: var(--ink);
    box-shadow: var(--bluca-surface-shadow-elevated);
    -webkit-backdrop-filter: var(--bluca-surface-blur);
    backdrop-filter: var(--bluca-surface-blur);
}

.dropdown-menu,
.app-dropdown {
    --bs-dropdown-bg: var(--bluca-surface-elevated);
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-color: var(--ink);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--primary) 13%, var(--bluca-surface-elevated));
}

.dropdown-menu .dropdown-item,
.app-dropdown .dropdown-item,
.popover-body,
.popover-header {
    color: var(--ink);
}

.popover-header,
.modal-header,
.modal-footer,
.offcanvas-header {
    border-color: var(--bluca-surface-border);
    background: var(--bluca-surface-subtle);
}

.tooltip-inner {
    border: 1px solid var(--bluca-surface-border-strong);
    background: var(--bluca-surface-elevated);
    color: var(--ink);
    box-shadow: var(--bluca-surface-shadow);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.app-dropdown .dropdown-item:hover,
.app-dropdown .dropdown-item:focus {
    background: color-mix(in srgb, var(--primary) 13%, var(--bluca-surface-elevated));
    color: var(--ink);
}

.workforce-person-card__head,
.workforce-person-metrics > div,
.workforce-contract-form,
.workforce-activity-values > div,
.workforce-rule-assignment,
.workforce-activity-link-card,
.mobile-navigation-settings-row {
    background: var(--bluca-surface-subtle);
}

.form-control:disabled,
.form-select:disabled,
.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    opacity: .66;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 72%, #07111f);
    outline-offset: 3px;
}

:root[data-theme="dark"] :focus-visible {
    outline-color: color-mix(in srgb, var(--accent) 72%, #ffffff);
}

body.has-seasonal-background .page-head,
body.has-seasonal-background .dashboard-hero,
body.has-seasonal-background .surface,
body.has-seasonal-background .auth-panel,
body.has-seasonal-background .card,
body.has-seasonal-background .app-card,
body.has-seasonal-background .item-card,
body.has-seasonal-background .event-card,
body.has-seasonal-background .metric,
body.has-seasonal-background .table-responsive,
body.has-seasonal-background .table-wrap {
    background-color: var(--bluca-surface-card);
    -webkit-backdrop-filter: var(--bluca-surface-blur);
    backdrop-filter: var(--bluca-surface-blur);
}

body.has-seasonal-background .page-head,
body.has-seasonal-background .dashboard-hero {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 58%),
        var(--bluca-surface-header);
}

body.has-seasonal-background .workforce-nav,
body.has-seasonal-background .app-section-nav,
body.has-seasonal-background .settings-tabs,
body.has-seasonal-background .training-knowledge-tabs,
body.has-seasonal-background .nav-tabs {
    background: var(--bluca-surface-navigation);
}

body.has-seasonal-background .bluca-toolbar,
body.has-seasonal-background .filter-bar,
body.has-seasonal-background .people-directory-toolbar,
body.has-seasonal-background .superadmin-toolbar,
body.has-seasonal-background .analytics-filter,
body.has-seasonal-background .attendance-toolbar,
body.has-seasonal-background .event-toolbar-compact,
body.has-seasonal-background .calendar-toolbar,
body.has-seasonal-background .dashboard-tile-toolbar {
    background: var(--bluca-surface-toolbar);
}

.analytics-page .app-card {
    border-color: var(--bluca-surface-border);
    background: var(--bluca-surface-card);
    color: var(--ink);
    box-shadow: var(--bluca-surface-shadow);
}

@media (min-width: 1200px) {
    .workforce-nav,
    .app-section-nav,
    .settings-tabs,
    .training-knowledge-tabs,
    .nav-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

@media (max-width: 760px) {
    .workforce-nav,
    .app-section-nav,
    .settings-tabs,
    .training-knowledge-tabs,
    .nav-tabs {
        flex-wrap: nowrap !important;
        scroll-snap-type: inline proximity;
    }

    .workforce-nav > *,
    .app-section-nav > *,
    .settings-tabs > *,
    .training-knowledge-tabs > *,
    .nav-tabs > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .filter-bar,
    .filter-bar.time-tracking-filter,
    .filter-bar.time-tracking-filter.has-person-filter,
    .filter-bar.calendar-filter,
    .filter-bar.event-filter-compact,
    .filter-bar.yolawo-offer-filter,
    .people-directory-toolbar,
    .analytics-filter {
        grid-template-columns: minmax(0, 1fr);
    }

    .bluca-toolbar {
        grid-template-columns: minmax(0, 1fr);
        gap: .8rem;
        padding: .85rem;
    }

    .bluca-toolbar__presets,
    .bluca-toolbar__fields,
    .bluca-toolbar__actions {
        grid-column: 1;
        width: 100%;
    }

    .bluca-toolbar__fields {
        align-items: stretch;
        flex-direction: column;
    }

    .bluca-toolbar__fields label {
        flex-basis: auto;
        width: 100%;
    }

    .bluca-toolbar__fields .btn,
    .bluca-toolbar__actions .btn {
        width: 100%;
    }

    .event-toolbar-compact,
    .dashboard-tile-toolbar,
    .attendance-toolbar,
    .calendar-toolbar {
        align-items: stretch;
    }
}

@media (max-width: 1199.98px) {
    .mobile-tabbar {
        border-color: var(--bluca-surface-border);
        background: var(--bluca-surface-navigation);
        box-shadow: var(--bluca-surface-shadow-elevated);
    }

    /* Die vollständige Navigation bleibt auch im Hellmodus eine deckende,
       dunkle Kopfzeilenfläche. So funktionieren die bewusst weißen
       Navigationsbeschriftungen mit jeder frei gewählten Vereinsfarbe. */
    .app-nav-menu {
        border-color: rgba(255, 255, 255, .18);
        background: var(--mobile-navigation-surface) !important;
        color: #ffffff;
        box-shadow: 0 24px 60px rgba(2, 8, 18, .32);
    }

    .app-nav-menu .mobile-nav-heading,
    .app-nav-menu .mobile-nav-heading strong,
    .app-nav-menu .app-nav-link,
    .app-nav-menu .app-nav-link:hover,
    .app-nav-menu .app-nav-link:focus,
    .app-nav-menu .navbar-nav .nav-link.show,
    .app-nav-menu .header-context-label,
    .app-nav-menu .department-switcher > i,
    .app-nav-menu .header-profile-button,
    .app-nav-menu .header-profile-name {
        color: #ffffff !important;
    }

    .app-nav-menu .mobile-nav-heading-copy > span {
        color: rgba(255, 255, 255, .78) !important;
    }

    .app-nav-menu .app-nav-link {
        border-color: rgba(255, 255, 255, .16);
        background: rgba(255, 255, 255, .09);
    }

    .app-nav-menu .app-nav-link:hover,
    .app-nav-menu .app-nav-link:focus,
    .app-nav-menu .navbar-nav .nav-link.show,
    .app-nav-menu .app-nav-link.active {
        border-color: rgba(255, 255, 255, .3);
        background: rgba(255, 255, 255, .17);
    }

    .app-nav-menu .mobile-navigation-settings-button {
        border-color: rgba(255, 255, 255, .42) !important;
        background: rgba(255, 255, 255, .1) !important;
        color: #ffffff !important;
    }

    .app-nav-menu .department-switcher,
    .app-nav-menu .header-profile-button {
        border-color: rgba(255, 255, 255, .2);
        background: var(--mobile-navigation-control) !important;
    }

    .app-nav-menu .department-switcher .form-select {
        border-color: rgba(255, 255, 255, .22) !important;
        background-color: #ffffff !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a;
    }
}

@media (prefers-reduced-motion: reduce) {
    .surface,
    .card,
    .app-card,
    .workforce-nav,
    .app-section-nav,
    .filter-bar,
    .bluca-toolbar {
        scroll-behavior: auto;
        transition: none;
    }
}