/* =========================================================
   ACC WINTER CHALLENGE
   ========================================================= */

:root {
    --bg: #f4f1eb;
    --panel: #fffdf9;
    --card: #ebe6dc;

    --text: #17212b;
    --muted: #6f7477;
    --border: #ddd7cc;

    --acc-navy: #17212b;
    --acc-blue: #447d91;

    --acc-pink: #e5007d;
    --acc-pink-light: #f28ab8;

    --accent-soft: #fbe5ef;

    --success-bg: #edf5ed;
    --success-border: #adc8ad;

    --warning-bg: #fff5db;
    --warning-border: #dfc982;

    --error-bg: #f8eaea;
    --error-border: #d6abab;

    --radius: 20px;
	
	--strava-orange: #fc4c02;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--bg);
    color: var(--text);
}

button,
input,
select {
    font: inherit;
}

button {
    color: inherit;
}

img {
    max-width: 100%;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

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

h1 {
    margin-bottom: 18px;

    font-size: clamp(
        42px,
        6vw,
        72px
    );

    line-height: 0.95;

    letter-spacing: -0.055em;
}

h2 {
    margin-bottom: 6px;

    font-size: 26px;
    line-height: 1.05;

    letter-spacing: -0.03em;
}

h3 {
    margin-bottom: 5px;
}

.eyebrow {
    margin-bottom: 8px;

    color: var(--acc-pink);

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}

.secondary,
.challenge-date {
    color: var(--muted);
}

.secondary {
    line-height: 1.5;
}

.challenge-date {
    margin-bottom: 0;

    font-size: 14px;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    width: 100%;
    max-width: 1180px;

    min-height: 84px;

    margin: 0 auto;

    padding:
        16px
        20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
    height: 52px;

    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}

.logo img {
    display: block;

    width: auto;
    height: 52px;

    max-width: 140px;

    object-fit: contain;

    object-position: left center;
}


/* =========================================================
   HEADER USER / NAV
   ========================================================= */

.header-user {
    display: flex;

    align-items: center;

    gap: 16px;

    font-size: 14px;
    font-weight: 650;
}

.nav-link {
    color: var(--muted);

    font-weight: 700;

    text-decoration: none;

    transition:
        color
        150ms
        ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--acc-pink);
}


.profile-link {
    color: var(--text);

    font-weight: 700;

    text-decoration: none;

    transition:
        color
        150ms
        ease;
}

.profile-link:hover {
    color: var(--acc-pink);
}

.logout-link {
    color: var(--muted);

    text-decoration: none;

    transition:
        color
        150ms
        ease;
}

.logout-link:hover {
    color: var(--text);
}


/* =========================================================
   HEADER BUTTONS
   ========================================================= */

.login-link,
.add-activity-link {
    min-height: 40px;

    padding:
        0
        14px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    text-decoration: none;

    font-weight: 750;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.login-link {
    background: transparent;

    border:
        1px
        solid
        var(--border);

    color: var(--text);
}

.login-link:hover {
    background: var(--panel);

    border-color: var(--acc-pink);

    color: var(--acc-pink);
}

.add-activity-link {
    background: var(--acc-pink);

    border:
        1px
        solid
        var(--acc-pink);

    color: #fff;
}

.add-activity-link:hover {
    background: var(--acc-navy);

    border-color: var(--acc-navy);
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.container {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding:
        20px
        20px
        60px;
}


/* =========================================================
   CARDS
   ========================================================= */

.card {
    min-width: 0;

    padding: 24px;

    background: var(--panel);

    border:
        1px
        solid
        var(--border);

    border-radius: var(--radius);
}

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


/* =========================================================
   HERO
   ========================================================= */

.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(280px, 0.75fr);

    gap: 18px;
}

.hero-grid > .card:first-child {
    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #f9eef3 100%
        );
}

.hero-grid > .muted-card {
    background: var(--acc-navy);

    color: #fff;

    border-color: var(--acc-navy);
}

.hero-grid > .muted-card .eyebrow,
.hero-grid > .muted-card .stat-label {
    color:
        rgba(
            255,
            255,
            255,
            0.62
        );
}

.hero-grid > .muted-card .stat-value {
    color: #fff;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress {
    width: 100%;
    height: 9px;

    margin-top: 32px;

    overflow: hidden;

    background: var(--card);

    border-radius: 999px;
}

.progress > div {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--acc-pink),
            var(--acc-pink-light)
        );

    border-radius: inherit;
}

.progress-labels {
    margin-top: 9px;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   COMMUNITY STATS
   ========================================================= */

.stats {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        24px
        18px;
}

.stat-value {
    font-size: clamp(
        26px,
        4vw,
        34px
    );

    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.04em;
}

.stat-label {
    margin-top: 6px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    margin-top: 30px;
}

.section-header {
    margin-bottom: 15px;

    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;
}

.section-header h2,
.section-header h3 {
    margin-bottom: 4px;
}

.section-header p {
    margin-bottom: 0;
}


/* =========================================================
   LEADERBOARD TABS
   ========================================================= */

/* =========================================================
   LEADERBOARD / FILTER TABS
   ========================================================= */

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

.tab,
.tab:link,
.tab:visited {
    min-height: 44px;

    padding:
        0
        16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    cursor: pointer;

    font-size: 14px;
    font-weight: 750;

    text-decoration: none;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.tab:hover {
    background: #eee7dc;

    color: var(--acc-pink);

    border-color:
        rgba(
            229,
            0,
            125,
            0.3
        );

    text-decoration: none;
}

.tab.active,
.tab.active:link,
.tab.active:visited {
    background: var(--acc-navy);

    color: #fff;

    border-color: var(--acc-navy);

    text-decoration: none;
}

.tab.active:hover {
    background: var(--acc-navy);

    color: #fff;

    border-color: var(--acc-navy);
}

.tab:focus-visible {
    outline:
        2px
        solid
        var(--acc-pink);

    outline-offset: 2px;
}

/* =========================================================
   LEADERBOARD
   ========================================================= */

.leaderboard {
    display: grid;

    gap: 6px;
}

.leader-row {
    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 14px;

    padding: 12px;

    border:
        1px
        solid
        transparent;

    border-radius: 13px;
}

.leader-row.current {
    background: var(--accent-soft);

    border-color: var(--acc-pink);
}

.rank {
    text-align: center;

    font-weight: 850;
}

.leader-row.current .rank {
    color: var(--acc-pink);
}

.rider-name {
    overflow: hidden;

    font-weight: 750;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.leader-value {
    font-weight: 750;

    white-space: nowrap;
}

.leader-progress {
    height: 5px;

    margin-top: 7px;

    overflow: hidden;

    background: var(--card);

    border-radius: 999px;
}

.leader-progress div {
    height: 100%;

    background: var(--acc-blue);

    border-radius: inherit;
}

.leader-row.current .leader-progress div {
    background: var(--acc-pink);
}


/* =========================================================
   PERSONAL DASHBOARD
   ========================================================= */

.dashboard-grid {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.25fr);

    gap: 18px;
}

.profile-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.profile-head h2 {
    margin-bottom: 0;
}


/* =========================================================
   AVATAR
   ========================================================= */

.avatar {
    width: 52px;
    height: 52px;

    flex:
        0
        0
        52px;

    display: grid;

    place-items: center;

    overflow: hidden;

    background: var(--card);

    border-radius: 50%;

    object-fit: cover;

    font-weight: 800;
}


/* =========================================================
   PERSONAL STATS
   ========================================================= */

.member-metrics {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.metric {
    min-width: 0;
    min-height: 92px;

    padding: 14px;

    background: transparent;

    border:
        1px
        solid
        var(--border);

    border-radius: 14px;
}

.metric-label {
    display: block;

    color: var(--muted);

    font-size: 12px;
}

.metric-number {
    display: block;

    margin:
        5px
        0;

    font-size: 23px;
    font-weight: 850;

    letter-spacing: -0.03em;
}


/* =========================================================
   PERSONAL BADGES
   ========================================================= */

.personal-badges {
    margin-top: 22px;

    padding-top: 20px;

    border-top:
        1px
        solid
        var(--border);
}

.personal-badges-head {
    margin-bottom: 12px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.personal-badges-count {
    min-width: 28px;
    height: 28px;

    padding:
        0
        8px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: var(--acc-pink);

    color: #fff;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
}

.personal-badges-list {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.personal-badge {
    min-height: 40px;

    padding:
        0
        12px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: var(--accent-soft);

    border:
        1px
        solid
        var(--acc-pink);

    border-radius: 999px;
}

.personal-badge-icon {
    font-size: 17px;

    line-height: 1;
}

.personal-badge-name {
    font-size: 12px;
    font-weight: 750;

    white-space: nowrap;
}

.personal-badges-empty {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   LAST 5 PERSONAL RIDES
   ========================================================= */

.chart-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.activity-bars {
    height: 260px;

    margin-top: 30px;

    display: flex;

    align-items: flex-end;

    gap: 18px;
}

.activity-bar-item {
    min-width: 0;
    height: 100%;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: flex-end;

    text-align: center;
}

.activity-bar-value {
    margin-bottom: 8px;

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
}

.activity-bar-value span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 650;
}

.activity-bar-track {
    width: 100%;
    height: 180px;

    display: flex;

    align-items: flex-end;
    justify-content: center;
}

.activity-bar {
    width:
        min(
            64px,
            70%
        );

    min-height: 8px;

    background:
        linear-gradient(
            180deg,
            var(--acc-pink),
            var(--acc-pink-light)
        );

    border-radius:
        10px
        10px
        3px
        3px;
}

.activity-bar-date {
    margin-top: 8px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 650;
}


/* =========================================================
   COMMUNITY ACTIVITIES
   ========================================================= */

.activity {
    padding:
        14px
        0;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 18px;

    border-bottom:
        1px
        solid
        var(--border);
}

.activity:last-child {
    border-bottom: 0;
}

.activity-title,
.activity-value {
    font-weight: 750;
}

.activity-details {
    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}

.right {
    text-align: right;
}


/* =========================================================
   FLASH MESSAGES
   ========================================================= */

.flash-message {
    margin-bottom: 18px;

    padding:
        14px
        16px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 650;
}

.flash-success {
    background: var(--success-bg);

    border:
        1px
        solid
        var(--success-border);
}

.flash-warning {
    background: var(--warning-bg);

    border:
        1px
        solid
        var(--warning-border);
}

.flash-error {
    background: var(--error-bg);

    border:
        1px
        solid
        var(--error-border);
}


/* =========================================================
   LOGIN / REGISTER
   ========================================================= */

.login-page {
    min-height: 100vh;

    display: grid;

    place-items: center;

    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 430px;

    padding: 36px;

    background: var(--panel);

    border:
        1px
        solid
        var(--border);

    border-radius: 24px;
}

.login-card h1 {
    margin-bottom: 24px;
}

.login-card > .secondary {
    margin-bottom: 28px;
}

.login-form {
    display: grid;

    gap: 20px;
}

.login-form label {
    display: grid;

    gap: 7px;

    font-size: 13px;
    font-weight: 700;
}

.login-form input {
    width: 100%;
    min-height: 50px;

    padding:
        0
        14px;

    background: var(--bg);
    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;
}

.login-form input:focus {
    outline:
        2px
        solid
        var(--acc-pink);

    outline-offset: 2px;

    border-color: var(--acc-pink);
}

.login-button {
    width: 100%;
    min-height: 52px;

    background: var(--acc-pink);

    color: #fff;

    border: 0;

    border-radius: 12px;

    cursor: pointer;

    font-weight: 800;

    transition:
        background
        150ms
        ease;
}

.login-button:hover {
    background: var(--acc-navy);
}

.login-error {
    margin-bottom: 20px;

    padding:
        13px
        15px;

    background: var(--error-bg);

    border:
        1px
        solid
        var(--error-border);

    border-radius: 10px;

    font-size: 14px;
}

.login-register {
    margin-top: 24px;

    padding-top: 20px;

    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    border-top:
        1px
        solid
        var(--border);

    color: var(--muted);

    font-size: 13px;
}

.login-register a {
    color: var(--acc-pink);

    font-weight: 750;

    text-decoration: none;
}

.login-register a:hover {
    text-decoration: underline;
}

.back-link {
    margin-top: 20px;

    display: block;

    color: var(--muted);

    text-align: center;

    font-size: 13px;

    text-decoration: none;
}

.back-link:hover {
    color: var(--text);
}


/* =========================================================
   PASSWORD FIELD
   ========================================================= */

.password-field {
    position: relative;

    width: 100%;
}

.password-field input {
    width: 100%;

    padding-right: 95px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 10px;

    transform:
        translateY(-50%);

    padding:
        6px
        8px;

    background: transparent;

    color: var(--muted);

    border: 0;

    border-radius: 8px;

    cursor: pointer;

    font-size: 12px;
    font-weight: 700;
}

.password-toggle:hover {
    color: var(--acc-pink);
}


/* =========================================================
   SHARED FORMS
   ========================================================= */

.activity-form,
.profile-form,
.password-form {
    display: grid;

    gap: 22px;

    margin-top: 32px;
}

.activity-form label,
.profile-form label,
.password-form label,
.duration-fields label {
    display: grid;

    gap: 8px;

    font-size: 13px;
    font-weight: 700;
}

.activity-form input,
.activity-form select,
.profile-form input,
.password-form input {
    width: 100%;

    min-height: 52px;

    padding:
        0
        14px;

    background: var(--bg);

    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;
}

.activity-form input:focus,
.activity-form select:focus,
.profile-form input:focus,
.password-form input:focus {
    outline:
        2px
        solid
        var(--acc-pink);

    outline-offset: 2px;

    border-color: var(--acc-pink);
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}

/* =========================================================
   ACTIVITY DURATION
   ========================================================= */

.duration-fields {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.input-unit {
    position: relative;
}

.input-unit input {
    padding-right: 55px;
}

.input-unit > span {
    position: absolute;

    right: 14px;
    top: 50%;

    transform:
        translateY(-50%);

    color: var(--muted);

    font-size: 13px;

    pointer-events: none;
}

.checkbox-label {
    display: flex !important;

    flex-direction: row;

    align-items: center;

    gap: 10px !important;

    cursor: pointer;
}

.checkbox-label input {
    width: 20px;
    height: 20px;

    min-height: auto;
}

.form-actions {
    margin-top: 8px;

    display: flex;

    justify-content: flex-end;

    gap: 10px;
}

.button-primary,
.button-secondary {
    min-height: 48px;

    padding:
        0
        18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-weight: 750;

    text-decoration: none;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.button-primary {
    background: var(--acc-pink);

    color: #fff;

    border:
        1px
        solid
        var(--acc-pink);

    cursor: pointer;
}

.button-primary:hover {
    background: var(--acc-navy);

    border-color: var(--acc-navy);
}

.button-secondary {
    background: transparent;

    color: var(--text);

    border:
        1px
        solid
        var(--border);
}

.button-secondary:hover {
    border-color: var(--text);
}

.form-message {
    margin-top: 22px;

    padding:
        14px
        16px;

    border-radius: 12px;

    font-size: 14px;
}

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

    border:
        1px
        solid
        var(--success-border);
}

.form-message.error {
    background: var(--error-bg);

    border:
        1px
        solid
        var(--error-border);
}

.form-hint {
    display: block;

    margin-top: -2px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 500;

    line-height: 1.4;
}


/* =========================================================
   ACTIVITY RULES
   ========================================================= */

.activity-rules {
    padding:
        14px
        16px;

    display: grid;

    gap: 5px;

    background: var(--accent-soft);

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    color: var(--muted);

    font-size: 12px;
}

.activity-rules strong {
    margin-bottom: 2px;

    color: var(--text);

    font-size: 13px;
}


/* =========================================================
   ACTIVITY IMPORT PAGE
   ========================================================= */

.import-layout {
    width: 100%;
    max-width: 720px;

    margin:
        30px
        auto
        0;
}

.import-card {
    padding: 34px;
}

.import-title {
    margin-bottom: 18px;

    font-size: clamp(
        42px,
        7vw,
        64px
    );
}


/* =========================================================
   PROFILE PAGE
   ========================================================= */

.profile-layout {
    width: 100%;
    max-width: 720px;

    margin:
        30px
        auto
        0;
}

.profile-card {
    padding: 34px;
}

.profile-page-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;
}

.profile-title {
    margin-bottom: 18px;

    font-size: clamp(
        42px,
        7vw,
        64px
    );
}

.profile-avatar {
    width: 96px;
    height: 96px;

    flex:
        0
        0
        96px;

    display: block;

    object-fit: cover;

    background: var(--card);

    border:
        1px
        solid
        var(--border);

    border-radius: 50%;
}

.profile-avatar-fallback {
    display: grid;

    place-items: center;

    font-size: 26px;
    font-weight: 850;
}

.profile-readonly-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.profile-readonly-grid > div {
    padding: 14px;

    background: var(--bg);

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;
}

.profile-readonly-grid span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;
}

.profile-readonly-grid strong {
    font-size: 14px;
}


/* =========================================================
   PROFILE PASSWORD
   ========================================================= */

.password-card {
    margin-top: 18px;
}

.password-head h2 {
    margin-bottom: 8px;
}

.password-head .secondary {
    margin-bottom: 0;
}

.password-form {
    margin-top: 26px;
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-hero {
    margin-top: 10px;
}

.about-intro {
    /* max-width: 820px;  */

    background:
        linear-gradient(
            135deg,
            #fffdf9,
            #fbe5ef
        );
}

.about-lead {
    max-width: 650px;

    margin-bottom: 20px;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.6;
}

.about-steps {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}

.about-step-number {
    margin-bottom: 20px;

    color: var(--acc-pink);

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 0.08em;
}

.about-step h3 {
    margin-bottom: 10px;

    font-size: 20px;
}

.about-step p {
    margin-bottom: 0;
}

.badge-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.badge-card {
    display: flex;

    align-items: flex-start;

    gap: 14px;
}

.badge-card-icon {
    width: 48px;
    height: 48px;

    flex:
        0
        0
        48px;

    display: grid;

    place-items: center;

    background: var(--accent-soft);

    border:
        1px
        solid
        var(--acc-pink);

    border-radius: 14px;

    font-size: 22px;
}

.badge-card h3 {
    margin-bottom: 6px;

    font-size: 16px;
}

.badge-card p {
    margin-bottom: 12px;

    font-size: 12px;
}

.badge-requirement {
    min-height: 28px;

    padding:
        0
        9px;

    display: inline-flex;

    align-items: center;

    background: var(--acc-navy);

    color: #fff;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 750;
}

.about-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background:
        linear-gradient(
            135deg,
            #fffdf9,
            #fbe5ef
        );
}

.about-cta .secondary {
    max-width: 600px;

    margin-bottom: 0;
}

.about-cta-actions {
    display: flex;

    flex-shrink: 0;

    gap: 10px;
}





/* =========================================================
   ABOUT – JERSEYS
   ========================================================= */

.about-jersey-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.about-jersey-card {
    min-width: 0;

    display: grid;

    grid-template-columns:
        84px
        minmax(0, 1fr);

    align-items: center;

    gap: 18px;
}

.about-jersey-image {
    width: 84px;
    height: 84px;

    display: grid;

    place-items: center;

    overflow: hidden;

    background: var(--bg);

    border:
        1px
        solid
        var(--border);

    border-radius: 18px;
}

.about-jersey-image img {
    display: block;

    width: 64px;
    height: 64px;

    max-width: 64px;
    max-height: 64px;

    object-fit: contain;
}

.about-jersey-card .eyebrow {
    margin-bottom: 5px;

    font-size: 11px;
}

.about-jersey-card h3 {
    margin-bottom: 8px;

    font-size: 18px;
}

.about-jersey-card .secondary {
    margin-bottom: 0;

    font-size: 13px;
}

.about-jersey-note {
    margin-top: 14px;

    padding:
        16px
        18px;

    background: var(--accent-soft);

    border-color:
        rgba(
            232,
            62,
            140,
            0.18
        );
}

.about-jersey-note .secondary {
    margin-bottom: 0;

    color: var(--text);

    font-size: 13px;
    font-weight: 650;
}


/* =========================================================
   ABOUT – JERSEYS TABLET
   ========================================================= */

@media (max-width: 800px) {

    .about-jersey-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   ABOUT – JERSEYS MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .about-jersey-card {
        grid-template-columns:
            68px
            minmax(0, 1fr);

        gap: 14px;
    }

    .about-jersey-image {
        width: 68px;
        height: 68px;

        border-radius: 15px;
    }

    .about-jersey-image img {
        width: 52px;
        height: 52px;

        max-width: 52px;
        max-height: 52px;
    }

    .about-jersey-card h3 {
        font-size: 17px;
    }

    .about-jersey-card .secondary {
        font-size: 12px;
    }

    .about-jersey-note {
        padding:
            14px
            16px;
    }

}


/* =========================================================
   COMMUNITY PARTICIPANTS LINK
   ========================================================= */

.community-stat-link {
    display: block;

    color: inherit;

    text-decoration: none;
}

.community-stat-link .stat-value,
.community-stat-link .stat-label {
    transition:
        color
        150ms
        ease;
}

.community-stat-link:hover .stat-value {
    color: var(--acc-pink-light);
}

.community-stat-link:hover .stat-label {
    color: #fff;
}


/* =========================================================
   PARTICIPANTS PAGE
   ========================================================= */

.participants-hero {
    margin-top: 10px;
}

.participants-hero > .card {
    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #f9eef3 100%
        );
}

.participants-title {
    margin-bottom: 16px;

    font-size:
        clamp(
            42px,
            7vw,
            64px
        );
}

.participants-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}

/* =========================================================
   PARTICIPANT CARD
   ========================================================= */

.participant-card {
    position: relative;

    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 0;

    overflow: hidden;
}

/* =========================================================
   PARTICIPANT HEAD
   ========================================================= */

.participant-head {
    width: 100%;
    min-width: 0;
    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding-right: 110px;
}

.participant-avatar {
    width: 52px;
    height: 52px;

    min-width: 52px;
    min-height: 52px;

    max-width: 52px;
    max-height: 52px;

    flex: 0 0 52px;

    display: block;

    object-fit: cover;

    background: var(--card);

    border-radius: 50%;
}

.participant-avatar-fallback {
    display: grid;

    place-items: center;

    background: var(--acc-navy);

    color: #fff;

    font-size: 17px;
    font-weight: 850;
}

.participant-name {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
}

.participant-name strong {
    display: block;

    max-width: 100%;

    overflow: hidden;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.participant-name span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
}

/* =========================================================
   PARTICIPANT STATS
   ========================================================= */

.participant-stats {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;
}

.participant-stats > div {
    width: 100%;
    min-width: 0;
    height: 80px;

    padding:
        10px
        8px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: var(--bg);

    border-radius: 10px;

    text-align: center;
}

.participant-stats strong {
    display: block;

    width: 100%;

    overflow: hidden;

    font-size: 16px;
    font-weight: 850;

    line-height: 1.1;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.participant-stats span {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1;
}

/* =========================================================
   PARTICIPANT STAT LINK
   ========================================================= */

.participant-stat-link,
.participant-stat-link:link,
.participant-stat-link:visited {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    color: var(--text);

    text-decoration: none;

    border-radius: 10px;

    cursor: pointer;
}

.participant-stat-link strong,
.participant-stat-link span {
    display: block;

    color: inherit;
    text-decoration: none;
}

.participant-stat-link strong {
    font-size: 16px;
    font-weight: 850;
}

.participant-stat-link span {
    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;
}

.participant-stat-link:hover,
.participant-stat-link:hover strong,
.participant-stat-link:hover span {
    color: var(--acc-pink);
    text-decoration: none;
}

.participant-stat-link:focus-visible {
    outline: 2px solid var(--acc-pink);
    outline-offset: 4px;
}

/* =========================================================
   PARTICIPANT BADGES
   ========================================================= */

.participant-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 32px;
    padding-top: 16px;

    border-top: 1px solid rgba(23, 33, 43, 0.08);
}

.participant-badge {
    max-width: 100%;

    padding: 7px 11px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    background: rgba(232, 62, 140, 0.07);
    color: var(--text);

    border: 1px solid rgba(232, 62, 140, 0.18);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.participant-badge-icon {
    flex: 0 0 auto;

    font-size: 15px;
    line-height: 1;
}

.participant-badge-name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-badges-empty {
    margin-top: 32px;
    padding-top: 16px;

    color: var(--muted);

    border-top: 1px solid rgba(23, 33, 43, 0.08);

    font-size: 12px;
}

/* =========================================================
   PARTICIPANT JERSEYS
   ========================================================= */

.participant-jerseys {
    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;

    width: auto;
    height: 30px;

    margin: 0;
    padding: 0;
}

.participant-jersey {
    width: 30px;
    height: 30px;

    min-width: 30px;
    min-height: 30px;

    max-width: 30px;
    max-height: 30px;

    flex: 0 0 30px;

    display: block;

    margin: 0;
    padding: 0;
}

.participant-jersey img {
    display: block;

    width: 30px !important;
    height: 30px !important;

    min-width: 30px;
    min-height: 30px;

    max-width: 30px;
    max-height: 30px;

    margin: 0;
    padding: 0;

    object-fit: contain;
}

.participant-card-leader .participant-head {
    padding-right: 110px;
}


/* =========================================================
   PARTICIPANTS TABLET
   ========================================================= */

@media (max-width: 800px) {

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

}


/* =========================================================
   PARTICIPANTS MOBILE
   ========================================================= */

@media (max-width: 600px) {

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

    .participant-head,
    .participant-card-leader .participant-head {
        min-height: 76px;

        padding-right: 104px;
    }

    .participant-stats {
        gap: 7px;
    }

    .participant-stats > div {
        height: 76px;

        padding:
            10px
            6px;
    }

    .participant-badges {
        gap: 6px;

        margin-top: 28px;
        padding-top: 14px;
    }

    .participant-badges-empty {
        margin-top: 28px;
        padding-top: 14px;
    }

    .participant-badge {
        padding:
            6px
            9px;

        font-size: 11px;
    }

    .participant-badge-icon {
        font-size: 14px;
    }

    .participant-jerseys {
        top: 18px;
        right: 18px;

        gap: 4px;
    }

}

/* =========================================================
   PARTICIPANT RIDES PAGE
   ========================================================= */

.rides-page-head {
    margin-top: 10px;
}

.rides-page-head > .card {
    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #f9eef3 100%
        );
}

.rides-page-title {
    margin-bottom: 16px;

    font-size:
        clamp(
            42px,
            7vw,
            64px
        );
}

.rides-back-link {
    margin-top: 12px;
}

.participant-rides-list {
    display: grid;
}

.participant-ride-row {
    padding:
        18px
        0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    align-items: center;

    gap: 24px;

    border-bottom:
        1px
        solid
        var(--border);
}

.participant-ride-row:first-child {
    padding-top: 0;
}

.participant-ride-row:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.participant-ride-main {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 14px;
}

.participant-ride-date {
    min-width: 74px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.participant-ride-info {
    min-width: 0;
}

.participant-ride-info strong {
    display: block;

    overflow: hidden;

    font-size: 15px;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.participant-ride-info span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
}

.participant-ride-stats {
    width: 300px;

    flex:
        0
        0
        300px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;
}

.participant-ride-stats > div {
    width: 100%;
    min-width: 0;

    padding:
        9px
        10px;

    background: var(--bg);

    border-radius: 10px;

    text-align: center;
}

.participant-ride-stats strong {
    display: block;

    font-size: 14px;
    font-weight: 850;

    line-height: 1.1;

    white-space: nowrap;
}

.participant-ride-stats span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 9px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

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


    .site-header {
        min-height: 74px;

        padding: 14px;
    }

    .container {
        padding:
            12px
            14px
            45px;
    }

    .hero-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-direction: column;

        align-items: flex-start;
    }

    .tabs {
        width: 100%;
    }

    .tab {
        flex: 1;
    }

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

    .about-cta {
        align-items: flex-start;

        flex-direction: column;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

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


    .card {
        padding: 18px;
    }

    h1 {
        font-size: 46px;
    }


    /* Logo */

    .logo {
        height: 42px;
    }

    .logo img {
        height: 42px;

        max-width: 115px;
    }


    /* Header */

    .header-user {
        gap: 10px;
    }

    .header-user > span {
        display: none;
    }

    .login-link,
    .add-activity-link {
        min-height: 38px;

        padding:
            0
            12px;
    }


    /* Personal Stats */

    .member-metrics {
        grid-template-columns: 1fr;
    }


    /* Badges */

    .personal-badges {
        margin-top: 18px;

        padding-top: 16px;
    }

    .personal-badges-list {
        gap: 6px;
    }

    .personal-badge {
        min-height: 36px;

        padding:
            0
            10px;
    }


    /* Ride Bars */

    .activity-bars {
        height: 220px;

        gap: 8px;
    }

    .activity-bar-track {
        height: 145px;
    }

    .activity-bar {
        width: 70%;
    }

    .activity-bar-value {
        font-size: 13px;
    }

    .activity-bar-value span {
        display: block;
    }

    .activity-bar-date {
        font-size: 10px;
    }


    /* Forms */

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

    .form-actions {
        flex-direction:
            column-reverse;
    }

    .button-primary,
    .button-secondary {
        width: 100%;
    }


    /* Login */

    .login-card {
        padding: 24px;
    }


    /* Profile */

    .profile-card,
    .import-card {
        padding: 20px;
    }

    .profile-page-head {
        gap: 18px;
    }

    .profile-avatar {
        width: 72px;
        height: 72px;

        flex:
            0
            0
            72px;
    }

    .profile-readonly-grid {
        grid-template-columns:
            1fr;
    }

    .about-steps,
    .badge-grid {
        grid-template-columns: 1fr;
    }

    .about-lead {
        font-size: 16px;
    }

    .about-cta-actions {
        width: 100%;

        flex-direction: column;
    }

    .about-cta-actions a {
        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .leader-row {
        grid-template-columns:
            28px
            minmax(0, 1fr);
    }

    .leader-value {
        grid-column: 2;

        justify-self: start;
    }

    .activity {
        align-items: flex-start;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .duration-fields {
        grid-template-columns: 1fr;
    }

    .header-user {
        gap: 7px;
    }

    .nav-link {
        display: none;
    }
}	
	
/* =========================================================
   ADMIN SETTINGS
   ========================================================= */

.admin-settings-link {
    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: transparent;

    color: var(--muted);

    border:
        1px
        solid
        var(--border);

    border-radius: 10px;

    font-size: 21px;
    line-height: 1;

    text-decoration: none;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.admin-settings-link:hover {
    background: var(--accent-soft);

    color: var(--acc-pink);

    border-color: var(--acc-pink);

    transform: rotate(20deg);
}

.admin-settings-link:focus-visible {
    outline:
        2px
        solid
        var(--acc-pink);

    outline-offset: 2px;
}

/* =========================================================
   ANNOUNCEMENT ICONS
   ========================================================= */

.announcement-date-line {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 3px;
}

.announcement-date-line strong {
    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.02em;
}

.announcement-icon {
    width: 20px;
    height: 20px;

    flex:
        0
        0
        20px;

    display: inline-flex;

    color: var(--acc-pink);
}

.announcement-icon svg {
    width: 100%;
    height: 100%;
}


/* Treffpunkt */

.announcement-detail {
    display: flex;

    align-items: center;

    gap: 8px;
}

.announcement-detail-icon {
    width: 20px;
    height: 20px;

    flex:
        0
        0
        20px;

    display: inline-flex;

    color: var(--acc-pink);
}

.announcement-detail-icon svg {
    width: 100%;
    height: 100%;
}

/* =========================================================
   ADMIN ANNOUNCEMENT
   ========================================================= */

.admin-announcement-actions {
    margin-top: 24px;

    padding-top: 20px;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    gap: 10px;

    border-top:
        1px
        solid
        var(--border);
}

.admin-announcement-actions form {
    margin: 0;
}

.admin-action-button {
    min-height: 46px;

    padding:
        0
        16px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    background: transparent;

    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    font: inherit;
    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.admin-action-icon {
    width: 18px;
    height: 18px;

    display: inline-flex;

    flex:
        0
        0
        18px;
}

.admin-action-icon svg {
    width: 100%;
    height: 100%;
}


/* Bearbeiten */

.admin-action-edit .admin-action-icon {
    color: var(--acc-pink);
}

.admin-action-edit:hover {
    background: var(--accent-soft);

    color: var(--acc-pink);

    border-color: var(--acc-pink);
}


/* Aktivieren / Deaktivieren */

.admin-action-toggle .admin-action-icon {
    color: var(--acc-pink);
}

.admin-action-toggle:hover {
    background: var(--acc-navy);

    color: #fff;

    border-color: var(--acc-navy);
}


/* Löschen */

.admin-action-delete {
    color: #a52a2a;

    border-color:
        rgba(
            165,
            42,
            42,
            0.3
        );
}

.admin-action-delete:hover {
    background: #a52a2a;

    color: #fff;

    border-color: #a52a2a;
}


/* Datum */

.admin-announcement-meta {
    margin:
        12px
        0
        8px;

    display: flex;

    align-items: center;

    gap: 8px;
}

.admin-announcement-meta-icon {
    width: 20px;
    height: 20px;

    display: inline-flex;

    flex:
        0
        0
        20px;

    color: var(--acc-pink);
}

.admin-announcement-meta-icon svg {
    width: 100%;
    height: 100%;
}


/* Ort */

.admin-announcement-location {
    margin-top: 16px;

    display: flex;

    align-items: center;

    gap: 8px;
}

.admin-announcement-location-icon {
    width: 21px;
    height: 21px;

    display: inline-flex;

    flex:
        0
        0
        21px;

    color: var(--acc-pink);
}

.admin-announcement-location-icon svg {
    width: 100%;
    height: 100%;
}

.admin-announcement-distance {
    margin-top: 8px;
}

/* =========================================================
   ADMIN ANNOUNCEMENT FORM – POLISH
   ========================================================= */

.admin-announcement-form-card {
    padding: 32px;
}

.admin-announcement-form-card .secondary {
    margin-bottom: 0;
}

.admin-form {
    margin-top: 28px;

    display: grid;

    gap: 18px;
}

.admin-form .form-group {
    margin: 0;
}

.admin-form .form-group label {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.admin-form .form-group input,
.admin-form .form-group select,
.admin-form .form-group textarea {
    width: 100%;

    min-height: 50px;

    padding:
        0
        14px;

    background: var(--bg);

    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    font: inherit;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.admin-form .form-group textarea {
    min-height: 140px;

    padding:
        14px;

    resize: vertical;
}

.admin-form .form-group input:hover,
.admin-form .form-group select:hover,
.admin-form .form-group textarea:hover {
    border-color: rgba(23, 33, 43, 0.28);
}

.admin-form .form-group input:focus,
.admin-form .form-group select:focus,
.admin-form .form-group textarea:focus {
    outline: none;

    border-color: var(--acc-pink);

    box-shadow:
        0 0 0 3px rgba(232, 62, 140, 0.12);

    background: #fff;
}


/* =========================================================
   FORM ROWS
   ========================================================= */

.admin-form-row {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.admin-checkbox {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 2px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.admin-checkbox input {
    width: 18px;
    height: 18px;

    accent-color: var(--acc-pink);
}


/* =========================================================
   FORM BUTTONS
   ========================================================= */

.admin-form-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 4px;
}

.admin-form-actions .button-primary,
.admin-form-actions .button-secondary {
    min-height: 48px;

    padding:
        0
        18px;
}


/* =========================================================
   ADMIN LAYOUT SPACING
   ========================================================= */

.admin-announcement-layout {
    display: grid;

    grid-template-columns: 1fr;

    gap: 52px;

    align-items: start;
}

.admin-announcement-list {
    margin-top: 8px;
}

.admin-announcement-list .section-header {
    margin-bottom: 18px;
}


/* =========================================================
   DESKTOP FORM WIDTH
   ========================================================= */

@media (min-width: 900px) {

    .admin-announcement-form-card {
        max-width: 820px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .admin-announcement-form-card {
        padding: 20px;
    }

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

    .admin-form-actions {
        flex-direction: column;
    }

    .admin-form-actions
    .button-primary,
    .admin-form-actions
    .button-secondary {
        width: 100%;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    width: 100%;

    margin-top: 40px;

    padding:
        52px
        0
        60px;

    background: var(--panel);

    border-top:
        1px
        solid
        var(--border);
}


/* =========================================================
   FOOTER LAYOUT
   ========================================================= */

.site-footer__inner {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding:
        0
        20px;

    display: grid;

    grid-template-columns:
        minmax(180px, 1.2fr)
        minmax(160px, 1fr)
        minmax(160px, 1fr);

    gap: 70px;

    align-items: start;
}


/* =========================================================
   FOOTER BRAND
   ========================================================= */

.site-footer__brand {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


/* Logo */

.site-footer__logo {
    display: inline-flex;

    align-items: center;

    margin-bottom: 14px;

    text-decoration: none;
}

.site-footer__logo img {
    display: block;

    width: auto;
    height: 38px;

    max-width: 110px;

    object-fit: contain;

    object-position: left center;
}


/* ACC */

.site-footer__brand-name {
    margin-bottom: 5px;

    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    letter-spacing: -0.02em;
}


/* Copyright */

.site-footer__copyright {
    color: var(--muted);

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.site-footer__column h3 {
    margin:
        0
        0
        16px;

    color: var(--text);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: -0.02em;
}


/* =========================================================
   FOOTER NAVIGATION
   ========================================================= */

.site-footer__nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}

.site-footer__nav a,
.site-footer__nav a:link,
.site-footer__nav a:visited {
    color: var(--muted);

    font-size: 13px;
    font-weight: 550;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color
        150ms
        ease;
}

.site-footer__nav a:hover {
    color: var(--acc-pink);
}

.site-footer__nav a:focus-visible {
    color: var(--acc-pink);

    outline:
        2px
        solid
        var(--acc-pink);

    outline-offset: 4px;

    border-radius: 2px;
}


/* =========================================================
   FOOTER TABLET
   ========================================================= */

@media (max-width: 800px) {

    .site-footer {
        margin-top: 30px;

        padding:
            44px
            0
            50px;
    }

    .site-footer__inner {
        padding:
            0
            14px;

        grid-template-columns:
            minmax(160px, 1fr)
            minmax(140px, 1fr)
            minmax(140px, 1fr);

        gap: 40px;
    }

}


/* =========================================================
   FOOTER MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-footer {
        margin-top: 20px;

        padding:
            36px
            0
            42px;
    }

    .site-footer__inner {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            36px
            28px;
    }

    .site-footer__brand {
        grid-column:
            1
            /
            -1;

        padding-bottom: 26px;

        border-bottom:
            1px
            solid
            var(--border);
    }

    .site-footer__logo img {
        height: 34px;
    }

}


/* =========================================================
   FOOTER SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .site-footer__inner {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .site-footer__brand {
        grid-column: auto;
    }

}

/* =========================================================
   LEGAL PAGES
   ========================================================= */

.legal-page {
    width: 100%;
    max-width: 900px;

    margin:
        10px
        auto
        0;
}

.legal-title {
    margin-bottom: 0;

    font-size:
        clamp(
            42px,
            7vw,
            64px
        );
}

.legal-card {
    padding: 36px;
}

.legal-section {
    margin-bottom: 32px;

    padding-bottom: 32px;

    border-bottom:
        1px
        solid
        var(--border);
}

.legal-section:last-child {
    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: 0;
}

.legal-section h2 {
    margin-bottom: 14px;

    font-size: 20px;
    line-height: 1.25;
}

.legal-section p {
    margin-bottom: 14px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.7;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section strong {
    color: var(--text);
}

.legal-section ul {
    margin:
        0
        0
        18px;

    padding-left: 22px;

    color: var(--muted);
}

.legal-section li {
    margin-bottom: 7px;

    font-size: 14px;
    line-height: 1.6;
}

.legal-section a {
    color: var(--acc-pink);

    font-weight: 650;

    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}


/* =========================================================
   LEGAL PAGES MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .legal-card {
        padding: 22px;
    }

    .legal-section {
        margin-bottom: 26px;

        padding-bottom: 26px;
    }

    .legal-section h2 {
        font-size: 18px;
    }

}

/* =========================================================
   USER MENU
   ========================================================= */

.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 0;

    border: 0;
    background: transparent;

    font: inherit;
    color: inherit;

    cursor: pointer;
}

.user-menu-arrow {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.user-menu.is-open .user-menu-arrow {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;

    min-width: 160px;

    padding: 8px;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 1000;
}

.user-menu.is-open .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-dropdown a {
    display: block;

    padding: 10px 12px;

    color: #111;
    text-decoration: none;

    border-radius: 8px;
}

.user-menu-dropdown a:hover {
    background: #f3f3f3;
}


/* =========================================================
   MY RIDES PAGE
   ========================================================= */

.rides-page {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding:
        20px
        20px
        60px;
}


/* =========================================================
   RIDES HERO
   ========================================================= */

.rides-hero {
    margin-top: 10px;
    margin-bottom: 22px;

    padding: 28px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #f9eef3 100%
        );

    border:
        1px
        solid
        var(--border);

    border-radius: var(--radius);
}

.rides-hero h1 {
    margin-bottom: 16px;

    font-size:
        clamp(
            42px,
            7vw,
            64px
        );
}

.rides-hero .secondary {
    max-width: 680px;

    margin-bottom: 0;
}

.rides-add-button {
    min-height: 46px;

    padding:
        0
        18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: var(--acc-pink);

    color: #fff;

    border:
        1px
        solid
        var(--acc-pink);

    border-radius: 12px;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.rides-add-button:hover {
    background: var(--acc-navy);

    border-color: var(--acc-navy);

    transform: translateY(-1px);
}


/* =========================================================
   RIDES STATS
   ========================================================= */

.rides-stats {
    margin-bottom: 24px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.rides-stat-card {
    padding: 18px;

    background: var(--panel);

    border:
        1px
        solid
        var(--border);

    border-radius: 16px;
}

.rides-stat-card span {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.rides-stat-card strong {
    display: block;

    font-size: 28px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.04em;
}


/* =========================================================
   RIDES LIST SECTION
   ========================================================= */

.rides-list-section {
    padding: 24px;

    background: var(--panel);

    border:
        1px
        solid
        var(--border);

    border-radius: var(--radius);
}

.rides-section-heading {
    margin-bottom: 18px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;
}

.rides-section-heading h2 {
    margin-bottom: 0;
}

.rides-count {
    min-height: 32px;

    padding:
        0
        11px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: var(--accent-soft);

    color: var(--acc-pink);

    border:
        1px
        solid
        rgba(
            232,
            62,
            140,
            0.25
        );

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   RIDES EMPTY STATE
   ========================================================= */

.rides-empty {
    padding:
        52px
        20px;

    text-align: center;
}

.rides-empty h3 {
    margin-bottom: 8px;
}

.rides-empty p {
    max-width: 520px;

    margin:
        0
        auto
        22px;

    color: var(--muted);

    line-height: 1.6;
}


/* =========================================================
   RIDE CARDS
   ========================================================= */

.rides-list {
    display: grid;

    gap: 10px;
}

.ride-card {
    overflow: hidden;

    background: var(--bg);

    border:
        1px
        solid
        var(--border);

    border-radius: 16px;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.ride-card:hover {
    border-color:
        rgba(
            23,
            33,
            43,
            0.22
        );

    box-shadow:
        0
        8px
        24px
        rgba(
            23,
            33,
            43,
            0.05
        );
}

.ride-card-summary {
    padding: 18px;

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr);

    gap: 18px;
}


/* =========================================================
   RIDE DATE
   ========================================================= */

.ride-card-date {
    min-height: 72px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: var(--panel);

    border:
        1px
        solid
        var(--border);

    border-radius: 14px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    text-align: center;
}

.ride-date-day {
    display: block;

    margin-bottom: 2px;

    color: var(--text);

    font-size: 28px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.04em;
}


/* =========================================================
   RIDE MAIN CONTENT
   ========================================================= */

.ride-card-main {
    min-width: 0;
}

.ride-card-title-row {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.ride-card-title-row > div {
    min-width: 0;
}

.ride-card-title-row h3 {
    margin-bottom: 0;

    overflow: hidden;

    font-size: 18px;
    font-weight: 800;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.ride-card-meta {
    margin-bottom: 7px;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}

.ride-card-meta span {
    min-height: 24px;

    padding:
        0
        8px;

    display: inline-flex;

    align-items: center;

    background: var(--panel);

    color: var(--muted);

    border:
        1px
        solid
        var(--border);

    border-radius: 999px;

    font-size: 10px;
    font-weight: 750;
}


/* =========================================================
   RIDE EDIT BUTTON
   ========================================================= */

.ride-edit-toggle {
    min-height: 38px;

    padding:
        0
        12px;

    flex-shrink: 0;

    background: transparent;

    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 10px;

    cursor: pointer;

    font-size: 12px;
    font-weight: 750;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.ride-edit-toggle:hover,
.ride-edit-toggle[aria-expanded="true"] {
    background: var(--accent-soft);

    color: var(--acc-pink);

    border-color: var(--acc-pink);
}


/* =========================================================
   RIDE STATS
   ========================================================= */

.ride-card-stats {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 8px;
}

.ride-card-stats > div {
    min-width: 0;

    padding:
        10px
        12px;

    background: var(--panel);

    border-radius: 10px;
}

.ride-card-stats span {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: 0.03em;
}

.ride-card-stats strong {
    display: block;

    overflow: hidden;

    font-size: 13px;
    font-weight: 850;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   RIDE EDIT PANEL
   ========================================================= */

.ride-edit-panel {
    padding: 20px;

    background: var(--panel);

    border-top:
        1px
        solid
        var(--border);
}

.ride-edit-panel[hidden] {
    display: none;
}

.ride-edit-form {
    display: grid;

    gap: 18px;
}

.ride-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.ride-form-grid label {
    display: grid;

    gap: 7px;

    font-size: 12px;
    font-weight: 750;
}

.ride-form-full {
    grid-column:
        1
        /
        -1;
}

.ride-form-grid input,
.ride-form-grid select {
    width: 100%;

    min-height: 48px;

    padding:
        0
        13px;

    background: var(--bg);

    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 11px;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.ride-form-grid input:hover,
.ride-form-grid select:hover {
    border-color:
        rgba(
            23,
            33,
            43,
            0.28
        );
}

.ride-form-grid input:focus,
.ride-form-grid select:focus {
    outline: none;

    background: #fff;

    border-color: var(--acc-pink);

    box-shadow:
        0
        0
        0
        3px
        rgba(
            232,
            62,
            140,
            0.12
        );
}


/* =========================================================
   RIDE CHECKBOX
   ========================================================= */

.ride-checkbox-label {
    min-height: 48px;

    display: flex !important;

    align-items: center;

    gap: 10px !important;

    align-self: end;

    cursor: pointer;
}

.ride-checkbox-label input {
    width: 18px;
    height: 18px;

    min-height: auto;

    padding: 0;

    accent-color: var(--acc-pink);
}


/* =========================================================
   RIDE FORM NOTE
   ========================================================= */

.ride-form-note {
    margin: 0;

    padding:
        12px
        14px;

    background: var(--accent-soft);

    color: var(--muted);

    border:
        1px
        solid
        rgba(
            232,
            62,
            140,
            0.18
        );

    border-radius: 10px;

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   RIDE FORM ACTIONS
   ========================================================= */

.ride-form-actions {
    display: flex;

    justify-content: flex-end;

    gap: 10px;
}

.ride-cancel-button,
.ride-save-button {
    min-height: 46px;

    padding:
        0
        16px;

    border-radius: 11px;

    cursor: pointer;

    font-size: 13px;
    font-weight: 800;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.ride-cancel-button {
    background: transparent;

    color: var(--text);

    border:
        1px
        solid
        var(--border);
}

.ride-cancel-button:hover {
    border-color: var(--text);
}

.ride-save-button {
    background: var(--acc-pink);

    color: #fff;

    border:
        1px
        solid
        var(--acc-pink);
}

.ride-save-button:hover {
    background: var(--acc-navy);

    border-color: var(--acc-navy);
}


/* =========================================================
   MY RIDES TABLET
   ========================================================= */

@media (max-width: 800px) {

    .rides-page {
        padding:
            12px
            14px
            45px;
    }

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

    .ride-card-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   MY RIDES MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .rides-hero {
        padding: 20px;

        align-items: flex-start;

        flex-direction: column;
    }

    .rides-add-button {
        width: 100%;
    }

    .rides-list-section {
        padding: 16px;
    }

    .rides-section-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .ride-card-summary {
        padding: 14px;

        grid-template-columns:
            56px
            minmax(0, 1fr);

        gap: 12px;
    }

    .ride-card-date {
        min-height: 60px;

        padding: 8px;
    }

    .ride-date-day {
        font-size: 23px;
    }

    .ride-card-title-row {
        gap: 10px;
    }

    .ride-card-title-row h3 {
        font-size: 16px;
    }

    .ride-edit-toggle {
        min-height: 34px;

        padding:
            0
            10px;
    }

    .ride-edit-panel {
        padding: 16px;
    }

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

    .ride-form-full {
        grid-column: auto;
    }

    .ride-form-actions {
        flex-direction: column-reverse;
    }

    .ride-cancel-button,
    .ride-save-button {
        width: 100%;
    }

}


/* =========================================================
   MY RIDES SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .rides-stats {
        grid-template-columns: 1fr;
    }

    .ride-card-summary {
        grid-template-columns: 1fr;
    }

    .ride-card-date {
        width: fit-content;

        min-height: auto;

        padding:
            7px
            10px;

        flex-direction: row;

        gap: 5px;
    }

    .ride-date-day {
        margin-bottom: 0;

        font-size: 18px;
    }

    .ride-card-title-row {
        align-items: stretch;

        flex-direction: column;
    }

    .ride-edit-toggle {
        width: 100%;
    }

    .ride-card-stats {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   PROFILE – STRAVA
   ========================================================= */

.strava-card {
    margin-top: 18px;
}

.strava-head h2 {
    margin-bottom: 8px;
}

.strava-head .secondary {
    max-width: 580px;

    margin-bottom: 0;
}


/* =========================================================
   STRAVA STATUS
   ========================================================= */

.strava-status {
    margin-top: 26px;

    padding: 16px;

    display: flex;

    align-items: center;

    gap: 14px;

    background: var(--bg);

    border:
        1px
        solid
        var(--border);

    border-radius: 14px;
}

.strava-status-icon {
    width: 42px;
    height: 42px;

    flex:
        0
        0
        42px;

    display: grid;

    place-items: center;

    background: var(--card);

    color: var(--muted);

    border-radius: 50%;
}

.strava-status-icon svg {
    width: 20px;
    height: 20px;
}

.strava-status-content {
    min-width: 0;
}

.strava-status-content strong {
    display: block;

    margin-bottom: 4px;

    font-size: 14px;
    font-weight: 800;
}

.strava-status-content span {
    display: block;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   STRAVA CONNECTED
   ========================================================= */

.strava-status-connected {
    background: var(--success-bg);

    border-color: var(--success-border);
}

.strava-status-connected
.strava-status-icon {
    background: #fff;

    color: #26784e;
}


/* =========================================================
   STRAVA ACTIONS
   ========================================================= */

.strava-actions {
    margin-top: 16px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


/* =========================================================
   CONNECT WITH STRAVA
   ========================================================= */

.strava-connect-button {
    min-height: 48px;

    padding:
        0
        18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    background: #fc4c02;

    color: #fff;

    border:
        1px
        solid
        #fc4c02;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.strava-connect-button:hover {
    background: #e34402;

    border-color: #e34402;

    transform:
        translateY(-1px);
}

.strava-connect-icon {
    font-size: 15px;

    line-height: 1;
}


/* =========================================================
   STRAVA MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .strava-actions {
        flex-direction: column;
    }

    .strava-actions a {
        width: 100%;
    }

    .strava-connect-button {
        width: 100%;
    }
}

/* =========================================================
   STRAVA IMPORT
   ========================================================= */

.strava-import-info {
    margin-top: 24px;

    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.strava-import-info > div {
    padding: 14px;

    background: var(--bg);

    border-radius: 12px;
}

.strava-import-info strong,
.strava-import-info span {
    display: block;
}

.strava-import-info strong {
    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 800;
}

.strava-import-info span {
    color: var(--muted);

    font-size: 13px;
}


.strava-import-section {
    margin-top: 36px;
}


.strava-activity-list {
    display: grid;

    gap: 12px;
}


.strava-activity-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;
}


.strava-activity-main {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 20px;
}


.strava-activity-date {
    width: 82px;

    flex: 0 0 82px;

    text-align: center;
}

.strava-activity-date strong,
.strava-activity-date span {
    display: block;
}

.strava-activity-date strong {
    font-size: 13px;
    font-weight: 850;
}

.strava-activity-date span {
    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
}


.strava-activity-content {
    min-width: 0;
}


.strava-activity-title-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}

.strava-activity-title-row h3 {
    margin: 0;

    font-size: 16px;
}


.strava-activity-badge {
    padding: 4px 8px;

    background: var(--accent-soft);

    color: var(--acc-pink);

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}


.strava-activity-stats {
    margin-top: 10px;

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    color: var(--muted);

    font-size: 12px;
}

.strava-activity-stats strong {
    color: var(--text);
}


.strava-invalid-hint {
    margin:
        10px
        0
        0;

    color: #9a6420;

    font-size: 11px;
    font-weight: 650;
}


.strava-activity-action {
    flex:
        0
        0
        auto;
}


.strava-imported-status {
    display: inline-flex;

    align-items: center;

    min-height: 42px;

    padding:
        0
        14px;

    background: var(--success-bg);

    color: #26784e;

    border:
        1px
        solid
        var(--success-border);

    border-radius: 11px;

    font-size: 12px;
    font-weight: 800;
}


@media (max-width: 700px) {

    .strava-import-info {
        grid-template-columns: 1fr;
    }


    .strava-activity-card {
        align-items: stretch;

        flex-direction: column;
    }


    .strava-activity-main {
        align-items: flex-start;
    }


    .strava-activity-action,
    .strava-activity-action form,
    .strava-activity-action button {
        width: 100%;
    }

}

/* =========================================================
   STRAVA IMPORT – PAGE LAYOUT
   ========================================================= */

.strava-import-page {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding:
        32px
        24px
        60px;
}


/* =========================================================
   STRAVA IMPORT – SPACING
   ========================================================= */

.strava-import-page .page-intro {
    margin-bottom: 28px;
}


.strava-import-page .strava-import-info {
    margin-bottom: 32px;
}


.strava-import-page .section {
    margin-bottom: 24px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .strava-import-page {
        padding:
            22px
            16px
            40px;
    }

}

/* ==========================================================================
   Strava Import – Mobile
   ========================================================================== */

@media (max-width: 700px) {

    .strava-import-page {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }


    .strava-import-page .participant-rides-list {
        width: 100%;
    }


    .strava-import-page .participant-ride-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;

        width: 100%;
        padding: 22px 0;

        box-sizing: border-box;
    }


    /*
    |--------------------------------------------------------------------------
    | Ride Hauptinformationen
    |--------------------------------------------------------------------------
    */

    .strava-import-page .participant-ride-main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;

        width: 100%;
        min-width: 0;
    }


    .strava-import-page .participant-ride-date {
        width: auto;

        font-size: 14px;
        line-height: 1.3;
    }


    .strava-import-page .participant-ride-info {
        width: 100%;
        min-width: 0;
    }


    .strava-import-page .participant-ride-info strong {
        display: block;

        width: 100%;

        white-space: normal;
        overflow: visible;
        text-overflow: initial;

        font-size: 20px;
        line-height: 1.2;
    }


    /*
    |--------------------------------------------------------------------------
    | Statistiken
    |--------------------------------------------------------------------------
    */

    .strava-import-page .participant-ride-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

        width: 100%;
        min-width: 0;
    }


    .strava-import-page .participant-ride-stat {
        width: auto;
        min-width: 0;

        padding: 14px 10px;

        text-align: center;

        box-sizing: border-box;
    }


    /*
    |--------------------------------------------------------------------------
    | Import Button
    |--------------------------------------------------------------------------
    */

    .strava-import-page .strava-ride-action {
        width: 100%;
    }


    .strava-import-page .strava-ride-action form {
        width: 100%;
    }


    .strava-import-page .strava-ride-action button,
    .strava-import-page .strava-import-button {
        display: block;

        width: 100%;
        min-height: 48px;

        box-sizing: border-box;
    }

}

/* ==========================================================================
   Participant Rides – Mobile
   ========================================================================== */

@media (max-width: 700px) {

    .participant-rides-page {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }


    .participant-rides-list {
        width: 100%;
        overflow: hidden;
    }


    .participant-ride-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        min-width: 0;

        padding: 20px 0;
        gap: 8px;

        box-sizing: border-box;
    }


    /*
    |--------------------------------------------------------------------------
    | Hauptbereich
    |--------------------------------------------------------------------------
    */

    .participant-ride-main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        min-width: 0;

        gap: 6px;
    }


    /*
    |--------------------------------------------------------------------------
    | Datum
    |--------------------------------------------------------------------------
    */

    .participant-ride-date {
        width: auto;
        min-width: 0;

        font-size: 14px;
        line-height: 1.3;
    }


    /*
    |--------------------------------------------------------------------------
    | Titel / Zeit
    |--------------------------------------------------------------------------
    */

    .participant-ride-info {
        width: 100%;
        min-width: 0;
    }


    .participant-ride-info strong {
        display: block;

        width: 100%;
        max-width: 100%;

        font-size: 20px;
        line-height: 1.2;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;

        overflow: visible;
        text-overflow: initial;
    }


    .participant-ride-info span {
        display: block;

        margin-top: 4px;

        font-size: 15px;
        line-height: 1.4;
    }


    /*
    |--------------------------------------------------------------------------
    | Stats
    |--------------------------------------------------------------------------
    */

    .participant-ride-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;
        min-width: 0;

        gap: 10px;

        margin-top: 8px;
    }


    .participant-ride-stat {
        width: auto;
        min-width: 0;

        padding: 12px 10px;

        box-sizing: border-box;
    }

}

.announcement-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 10px;
    padding: 8px 12px;

    border: 1px solid rgba(232, 62, 140, 0.25);
    border-radius: 999px;

    background: rgba(232, 62, 140, 0.06);
    color: #e83e8c;

    font-weight: 700;
    font-size: 14px;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.announcement-link:hover {
    background: rgba(232, 62, 140, 0.12);
    border-color: rgba(232, 62, 140, 0.45);
    transform: translateY(-1px);
}

.announcement-link:focus-visible {
    outline: 2px solid #e83e8c;
    outline-offset: 3px;
}

/* =========================================================
   ANNOUNCEMENTS GRID
   ========================================================= */

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

.announcement-card {
    width: 100%;
    min-width: 0;
    height: 100%;
}

.announcement-time {
    color: var(--muted);

    font-size: 14px;
    font-weight: 650;
}

/* =========================================================
   VERIFY EMAIL
   ========================================================= */

.verify-login-button {
    width: 100%;

    margin-top: 24px;

    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    text-align: center;
    text-decoration: none;

    font-size: 15px;
    font-weight: 800;
}

.verify-login-button:link,
.verify-login-button:visited {
    color: #fff;
    text-decoration: none;
}

.verify-login-button:hover {
    color: #fff;
}

.ride-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ride-delete-form {
    margin: 0;
}

.ride-delete-button {
    min-height: 38px;

    padding:
        0
        12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: #b83232;

    border:
        1px
        solid
        rgba(184, 50, 50, 0.28);

    border-radius: 10px;

    font: inherit;
    font-size: 12px;
    font-weight: 750;

    cursor: pointer;
}

.ride-delete-button:hover {
    background: rgba(184, 50, 50, 0.06);
    border-color: rgba(184, 50, 50, 0.48);
}


/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */

.admin-dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.admin-dashboard-card {
    display: flex;

    flex-direction: column;

    min-height: 250px;

    color: inherit;

    text-decoration: none;

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.admin-dashboard-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(
            229,
            0,
            125,
            0.35
        );

    box-shadow:
        0
        10px
        28px
        rgba(
            23,
            33,
            43,
            0.06
        );
}

.admin-dashboard-card-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.admin-dashboard-card-head h3 {
    margin-bottom: 0;

    font-size: 24px;
}

.admin-dashboard-arrow {
    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: var(--accent-soft);

    color: var(--acc-pink);

    border:
        1px
        solid
        rgba(
            229,
            0,
            125,
            0.18
        );

    border-radius: 50%;

    font-size: 20px;
    font-weight: 800;

    transition:
        transform 150ms ease,
        background 150ms ease,
        color 150ms ease;
}

.admin-dashboard-card:hover
.admin-dashboard-arrow {
    transform: translateX(2px);

    background: var(--acc-pink);

    color: #fff;
}

.admin-dashboard-card > .secondary {
    margin:
        18px
        0
        24px;
}

.admin-dashboard-stats {
    margin-top: auto;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.admin-dashboard-stats > div {
    min-width: 0;

    padding: 14px;

    background: var(--bg);

    border-radius: 12px;
}

.admin-dashboard-stats strong {
    display: block;

    margin-bottom: 4px;

    font-size: 24px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.04em;
}

.admin-dashboard-stats span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   ADMIN RIDES
   ========================================================= */

.admin-rides-list {
    display: grid;

    gap: 16px;
}

.admin-ride-card {
    overflow: hidden;
}

.admin-ride-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding-bottom: 18px;

    border-bottom:
        1px
        solid
        var(--border);
}

.admin-ride-rider {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;
}

.admin-ride-rider > div:last-child {
    min-width: 0;
}

.admin-ride-rider strong {
    display: block;

    overflow: hidden;

    font-size: 14px;
    font-weight: 800;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.admin-ride-rider span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: var(--muted);

    font-size: 11px;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.admin-ride-status {
    min-height: 30px;

    padding:
        0
        10px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.admin-ride-status.is-implausible {
    background: var(--error-bg);

    color: #9e2f2f;

    border:
        1px
        solid
        var(--error-border);
}

.admin-ride-status.is-unchecked {
    background: var(--warning-bg);

    color: #8b681c;

    border:
        1px
        solid
        var(--warning-border);
}

.admin-ride-content {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    align-items: start;

    gap: 24px;
}

.admin-ride-content h3 {
    margin-bottom: 8px;

    font-size: 21px;
}

.admin-ride-content .secondary {
    margin-bottom: 0;
}

.admin-ride-stats {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;
}

.admin-ride-stats > div {
    min-width: 0;

    padding:
        12px
        10px;

    background: var(--bg);

    border-radius: 10px;

    text-align: center;
}

.admin-ride-stats strong {
    display: block;

    overflow: hidden;

    font-size: 14px;
    font-weight: 850;

    line-height: 1.15;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.admin-ride-stats span {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.admin-ride-reason {
    margin-top: 20px;

    padding:
        14px
        16px;

    background: var(--accent-soft);

    border:
        1px
        solid
        rgba(
            229,
            0,
            125,
            0.14
        );

    border-radius: 12px;
}

.admin-ride-reason strong {
    display: block;

    margin-bottom: 6px;

    font-size: 12px;
    font-weight: 800;
}

.admin-ride-reason p {
    margin-bottom: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}

.admin-ride-actions {
    margin-top: 20px;

    padding-top: 18px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    border-top:
        1px
        solid
        var(--border);
}

.admin-ride-actions form {
    margin: 0;
}

.admin-ride-reason-form {
    flex:
        1
        1
        420px;

    display: flex;

    align-items: center;

    gap: 8px;
}

.admin-ride-reason-form input[type="text"] {
    min-width: 220px;
    min-height: 46px;

    flex: 1;

    padding:
        0
        13px;

    background: var(--bg);

    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 11px;

    font: inherit;
    font-size: 13px;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.admin-ride-reason-form input[type="text"]:hover {
    border-color:
        rgba(
            23,
            33,
            43,
            0.28
        );
}

.admin-ride-reason-form input[type="text"]:focus {
    outline: none;

    background: #fff;

    border-color: var(--acc-pink);

    box-shadow:
        0
        0
        0
        3px
        rgba(
            229,
            0,
            125,
            0.1
        );
}


/* =========================================================
   ADMIN RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

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

    .admin-ride-content {
        grid-template-columns: 1fr;
    }

    .admin-ride-stats {
        max-width: 420px;
    }

}

@media (max-width: 700px) {

    .admin-ride-head {
        align-items: flex-start;

        flex-direction: column;
    }

    .admin-ride-status {
        align-self: flex-start;
    }

    .admin-ride-stats {
        max-width: none;
    }

    .admin-ride-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .admin-ride-actions form,
    .admin-ride-actions .button-primary,
    .admin-ride-actions .button-secondary,
    .admin-ride-actions .admin-action-button {
        width: 100%;
    }

    .admin-ride-reason-form {
        width: 100%;

        flex:
            1
            1
            auto;

        align-items: stretch;

        flex-direction: column;
    }

    .admin-ride-reason-form input[type="text"] {
        width: 100%;
        min-width: 0;
    }

}

@media (max-width: 520px) {

    .admin-dashboard-card {
        min-height: 0;
    }

    .admin-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .admin-ride-stats {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   UNPLAUSIBLE RIDES
   ========================================================= */

.ride-card-implausible {
    border-color: rgba(210, 45, 45, 0.65);
    background:
        linear-gradient(
            0deg,
            rgba(210, 45, 45, 0.045),
            rgba(210, 45, 45, 0.045)
        ),
        var(--card);
}

.ride-card-implausible .ride-plausibility-implausible {
    background: rgba(210, 45, 45, 0.12);
    color: #b83232;
    border-color: rgba(210, 45, 45, 0.28);
}

.ride-card-implausible .ride-plausibility-reason {
    margin-top: 12px;
    padding: 10px 14px;

    background: rgba(210, 45, 45, 0.08);

    color: #b83232;

    border:
        1px solid
        rgba(210, 45, 45, 0.18);

    border-radius: 12px;

    font-weight: 700;
}



/* =========================================================
   ABOUT – SECRET BADGES
   ========================================================= */

.about-badge-secret {
    margin-top: 18px;

    padding:
        24px
        28px;

    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #f9eef3 100%
        );

    border-color:
        rgba(
            229,
            0,
            125,
            0.18
        );
}

.about-badge-secret strong {
    display: block;

    margin-bottom: 8px;

    color: var(--text);

    font-size: 18px;
    font-weight: 850;

    letter-spacing: -0.02em;
}

.about-badge-secret p {
    max-width: 760px;

    margin-bottom: 6px;

    line-height: 1.6;
}

.about-badge-secret p:last-child {
    margin-bottom: 0;
}

.about-badge-secret .secondary {
    color: var(--muted);
}


/* =========================================================
   ABOUT – BADGES RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

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

}

@media (max-width: 600px) {

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

    .about-badge-secret {
        padding:
            20px
            18px;
    }

    .about-badge-secret strong {
        font-size: 17px;
    }

}


/* =========================================================
   ABOUT – PREISPOOL
   ========================================================= */

.about-prizes {
    margin-top: 72px;
}

.about-section-heading {
    max-width: 720px;
    margin-bottom: 28px;
}

.about-prize-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 18px;
}

.about-prize-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 260px;

    padding: 28px;
}

.about-prize-card h3 {
    margin:
        12px
        0
        12px;

    font-size: 22px;
    line-height: 1.15;
}

.about-prize-card p {
    margin:
        0
        0
        12px;

    line-height: 1.6;
}

.about-prize-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(
            229,
            0,
            125,
            0.08
        );

    border:
        1px
        solid
        rgba(
            229,
            0,
            125,
            0.16
        );

    border-radius: 14px;

    font-size: 26px;
}

.about-prize-card-featured {
    border-color:
        rgba(
            229,
            0,
            125,
            0.28
        );
}

@media (
    max-width: 900px
) {

    .about-prize-grid {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   HEADER / DROPDOWN STACKING FIX
   =========================================================
   Der Header muss über dem Main-Content liegen, damit das
   Profil-Dropdown nicht hinter Cards wie "Community" verschwindet.
*/

.site-header {
    position: relative;
    z-index: 100;
}

main {
    position: relative;
    z-index: 1;
}

.site-footer {
    position: relative;
    z-index: 1;
}

.header-user,
.user-menu {
    position: relative;
    z-index: 110;
}

.user-menu-dropdown {
    z-index: 2000;
}

/* =========================================================
   HEADER AVATAR
   ========================================================= */

.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.header-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.header-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--acc-pink);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.user-menu-name {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .header-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        flex-basis: 28px;
    }

    .user-menu-trigger {
        gap: 7px;
    }
}


/* =========================================================
   HEADER USER MENU – VERTICAL ALIGNMENT FIX
   ========================================================= */

.header-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.user-menu-trigger {
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}

.header-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
}

.header-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--acc-pink);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.user-menu-name {
    height: 40px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

.user-menu-arrow {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    font-size: 0.8em;
    line-height: 1;
}

.header-user > .nav-link,
.header-user > .logout-link,
.header-user > .profile-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

@media (max-width: 600px) {
    .header-avatar {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        flex-basis: 30px;
    }

    .user-menu-trigger {
        gap: 7px;
    }
}

/* =========================================================
   HEADER – + AKTIVITÄT
   Pink normal / ACC-Navy bei Hover
   ========================================================= */

.user-menu-dropdown .user-menu-item-activity {
    margin: 8px 12px 12px;
    padding: 12px 18px;

    width: calc(100% - 24px);
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 0;
    border-radius: 12px;

    background: var(--acc-pink) !important;
    color: #fff !important;

    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;

    box-shadow: none;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}


/* Hover wie auf rides.php */

.user-menu-dropdown .user-menu-item-activity:hover,
.user-menu-dropdown .user-menu-item-activity:focus {
    background: var(--text) !important;
    color: #fff !important;

    transform: none;
}


/* Klick */

.user-menu-dropdown .user-menu-item-activity:active {
    background: var(--text) !important;
    color: #fff !important;
}


/* Tastatur */

.user-menu-dropdown .user-menu-item-activity:focus-visible {
    outline: 3px solid rgba(229, 0, 125, 0.25);
    outline-offset: 2px;
}

/* =========================================================
   ADMIN HERO
   ========================================================= */

.admin-hero > .card {
    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #f9eef3 100%
        );
}

/* =========================================================
   PROFILE – CHALLENGE
   Gleicher Abstand wie zwischen den übrigen Profil-Blöcken
   ========================================================= */

.challenge-card {
    margin-top: 18px;
}

/* =========================================================
   HEADER – + STRAVA
   Orange normal / ACC-Navy bei Hover
   ========================================================= */

.user-menu-dropdown .user-menu-item-activity-strava {
    margin: 8px 12px 12px;
    padding: 12px 18px;

    width: calc(100% - 24px);
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 0;
    border-radius: 12px;

    background: var(--strava-orange) !important;
    color: #fff !important;

    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;

    box-shadow: none;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}


/* Hover wie auf rides.php */

.user-menu-dropdown .user-menu-item-activity-strava:hover,
.user-menu-dropdown .user-menu-item-activity-strava:focus {
    background: var(--text) !important;
    color: #fff !important;

    transform: none;
}


/* Klick */

.user-menu-dropdown .user-menu-item-activity-strava:active {
    background: var(--text) !important;
    color: #fff !important;
}


/* Tastatur */

.user-menu-dropdown .user-menu-item-activity-strava:focus-visible {
    outline: 3px solid rgba(229, 0, 125, 0.25);
    outline-offset: 2px;
}

/* =========================================================
   ANNOUNCEMENTS – MOBILE FULL WIDTH
   ========================================================= */

@media (max-width: 700px) {

    .announcement-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 16px;
    }

    .announcement-card {
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
    }

}

/* =========================================================
   HEADER – MOBILE COMPACT
   Auf Mobilgeräten: Logo links, Profilmenü rechts.
   Teilnehmer / Admin / Logout liegen im Dropdown.
   ========================================================= */

@media (max-width: 700px) {

    .site-header {
        width: 100%;
        max-width: 100%;
        min-height: 70px;
        padding: 12px 14px;
        gap: 12px;
        overflow: visible;
    }

    .site-header .logo {
        height: 42px;
        min-width: 0;
        flex: 0 1 auto;
    }

    .site-header .logo img {
        width: auto;
        height: 42px;
        max-width: 100px;
    }

    .header-user {
        min-width: 0;
        margin-left: auto;
        gap: 0;
        flex: 0 1 auto;
    }

    /* Desktop-Links auf Mobile ausblenden */
    .header-user > .nav-link,
    .header-user > .logout-link {
        display: none;
    }

    .user-menu {
        min-width: 0;
        max-width: 100%;
    }

    .user-menu-trigger {
        min-width: 0;
        max-width: calc(100vw - 135px);
        min-height: 42px;
        gap: 7px;
    }

    .header-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        flex: 0 0 32px;
    }

    .user-menu-name {
        min-width: 0;
        max-width: 135px;
        height: 42px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-menu-arrow {
        height: 42px;
        flex: 0 0 auto;
    }

    .user-menu-dropdown {
        right: 0;
        min-width: 220px;
        max-width: calc(100vw - 28px);
    }

    .user-menu-mobile-only {
        display: block;
    }
}

@media (min-width: 701px) {
    .user-menu-mobile-only {
        display: none !important;
    }
}

@media (max-width: 380px) {

    .site-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-header .logo img {
        max-width: 82px;
    }

    .user-menu-trigger {
        max-width: calc(100vw - 112px);
    }

    .user-menu-name {
        max-width: 105px;
    }

    .user-menu-dropdown {
        max-width: calc(100vw - 20px);
    }
}

/* =========================================================
   MY RIDES – MOBILE ACTION BUTTONS
   Bearbeiten / Löschen untereinander und über volle Breite
   ========================================================= */

@media (max-width: 600px) {

    .ride-card-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ride-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ride-actions .ride-edit-toggle,
    .ride-actions .ride-delete-form,
    .ride-actions .ride-delete-button {
        width: 100%;
        max-width: 100%;
    }

    .ride-delete-form {
        display: block;
        margin: 0;
    }

    .ride-edit-toggle,
    .ride-delete-button {
        min-height: 44px;
        justify-content: center;
    }

}

/* =========================================================
   ACTIVITY SELECT
   ========================================================= */

.activity-select-card {
    padding: 34px;
}

.activity-select-grid {
    margin-top: 32px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.activity-select-option {
    min-height: 150px;

    padding: 22px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 16px;

    background: var(--bg);

    color: var(--text);

    border:
        1px
        solid
        var(--border);

    border-radius: 16px;

    text-decoration: none;

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.activity-select-option:hover {
    transform: translateY(-2px);

    background: var(--accent-soft);

    border-color: var(--acc-pink);
}

.activity-select-icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    background: var(--acc-pink);

    color: #fff;

    border-radius: 14px;

    font-size: 22px;
    font-weight: 850;
}

.activity-select-option-strava
.activity-select-icon {
    background: var(--strava-orange);
}

.activity-select-option strong {
    display: block;

    margin-bottom: 6px;

    font-size: 18px;
    font-weight: 850;
}

.activity-select-option div > span {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.45;
}

.activity-select-arrow {
    color: var(--muted);

    font-size: 22px;
    font-weight: 800;
}


/* =========================================================
   ACTIVITY SELECT MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .activity-select-card {
        padding: 20px;
    }

    .activity-select-grid {
        grid-template-columns: 1fr;
    }

    .activity-select-option {
        min-height: 120px;

        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;
    }

    .activity-select-icon {
        width: 42px;
        height: 42px;
    }
}

/* =========================================================
   LOGIN – PASSWORT VERGESSEN / RESET
   ========================================================= */

.login-password-help {
    margin-top: -10px;
    text-align: right;
}

.login-password-help a,
.login-password-help a:link,
.login-password-help a:visited {
    color: var(--acc-pink);

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    transition:
        color 150ms ease,
        text-decoration-color 150ms ease;
}

.login-password-help a:hover {
    color: var(--acc-navy);
    text-decoration: underline;
}

.login-password-help a:focus-visible {
    outline:
        2px
        solid
        var(--acc-pink);

    outline-offset: 3px;

    border-radius: 3px;
}


/*
 * reset-password.php verwendet den gleichen Primary-Button auch als Link.
 * Dadurch sieht "Neuen Reset-Link anfordern" genauso aus wie ein Button.
 */

a.login-button,
a.login-button:link,
a.login-button:visited {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    text-align: center;
    text-decoration: none;
}

a.login-button:hover,
a.login-button:focus {
    color: #fff;
    text-decoration: none;
}


/* =========================================================
   LOGIN / RESET – MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .login-password-help {
        margin-top: -8px;
    }

    .login-password-help a {
        font-size: 13px;
    }

}

/* =========================================================
   PASSWORD FIELD – EYE TOGGLE
   ========================================================= */

.password-field {
    position: relative;
    width: 100%;
}

.password-field input {
    width: 100%;
    padding-right: 52px;
}

.password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 10px;

    width: 38px;
    height: 38px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    background: transparent;
    color: var(--muted);

    border: 0;
    border-radius: 9px;

    cursor: pointer;

    transition:
        color 150ms ease,
        background 150ms ease;
}

.password-toggle-icon:hover {
    background: var(--accent-soft);
    color: var(--acc-pink);
}

.password-toggle-icon:focus-visible {
    outline: 2px solid var(--acc-pink);
    outline-offset: 2px;
}

.password-toggle-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.password-eye-closed {
    display: none;
}

.password-toggle-icon.is-visible .password-eye-open {
    display: none;
}

.password-toggle-icon.is-visible .password-eye-closed {
    display: block;
}