@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
    --primary-color:    #b91ccc;
    --accent-color:     #0d9488;
    --primary-glow:     rgba(185,28,204,0.18);
    --accent-glow:      rgba(13,148,136,0.18);

    --background-color: #f7f5fb;
    --card-background:  #ffffff;
    --card-surface:     #f3f0f9;
    --border-color:     rgba(0,0,0,0.08);
    --text-primary:     #1a1625;
    --text-secondary:   #6b6480;
    --hover-color:      rgba(185,28,204,0.04);

    /* Stärke des Hintergrund-Weichzeichners (vom Admin-Panel überschrieben). */
    --bg-blur: 0px;

    color-scheme: light;
}

/* ─── RESET & BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    /* Fallback-Farbe, falls das Hintergrundbild fehlt. */
    background-color: var(--background-color);
}

body {
    background-color: transparent;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: 70px;
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Geloopt-weichgezeichnetes Hintergrundbild der ganzen Website.
   Liegt fixiert hinter allen Inhalten; Blur-Stärke via --bg-blur (Admin).
   inset: negativ, damit die weichen Blur-Kanten außerhalb des Viewports liegen. */
body::before {
    content: '';
    position: fixed;
    inset: -60px;
    z-index: -1;
    background: url('background.png?v=3') center / cover no-repeat;
    filter: blur(var(--bg-blur, 0px));
    pointer-events: none;
}

h1, h2, h3, h4, h5 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    margin: 0 0 0.5em;
}

a { color: var(--primary-color); text-decoration: none; }
a:hover { opacity: 0.75; }

input, select, button, textarea {
    font-family: 'Barlow', sans-serif;
}

/* ─── HERO STRIP ─────────────────────────────────────────────────────────── */
/* Add <div class="hero-strip"></div> in each HTML right after the top-bar   */
.hero-strip {
    width: 100%;
    height: 140px;
    background-image: url('hero.jpeg');
    background-size: cover;
    background-position: center 30%;
    position: relative;
    margin-top: 54px; /* offset for fixed top-bar */
    flex-shrink: 0;
}

.hero-strip::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        to right,
        rgba(247,245,251,0.10) 0%,
        rgba(247,245,251,0.0) 50%,
        rgba(247,245,251,0.55) 100%
    ),
    linear-gradient(
        to bottom,
        rgba(247,245,251,0) 0%,
        rgba(247,245,251,0.7) 100%
    );
}

/* ─── TOP BAR ────────────────────────────────────────────────────────────── */
.top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    z-index: 100;
    gap: 8px;
}

.top-bar h1 {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Rechte Header-Gruppe: Login/Score-Pill + kleines Läuferin-Bild (nur Home). */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header-runner {
    height: 40px;
    width: auto;
    flex-shrink: 0;
    display: block;
    border-radius: 8px;
}

/* ─── CONTAINER ──────────────────────────────────────────────────────────── */
.container {
    max-width: 800px;
    margin: 70px auto 0;
    padding: 20px 16px;
}

@media (max-width: 600px) {
    .container { padding: 12px; }
    .top-bar h1 { font-size: 1.1em; }
    .top-bar { padding: 10px; }
    .container { margin-top: 0; } /* hero-strip handles offset */
    /* index hat keinen hero-strip: großes Login-Bild unter den fixen Header schieben. */
    .login-hero { margin-top: 100px; }
}

/* ─── PAGE SUBTITLE ──────────────────────────────────────────────────────── */
.page-subtitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8em; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    margin: 0 0 16px; color: var(--text-primary);
    padding: 14px 18px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Freistehende Abschnitts-Titel (über bereits „gekarteten" Inhalten):
   eigener kompakter Kasten, damit sie auf dem Hintergrundbild lesbar bleiben. */
.settings-section > h2,
.faq-section > h2,
.weekly-winner-section > h2,
.admin-section > h2 {
    display: inline-block;
    padding: 10px 16px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* ─── LOGIN ──────────────────────────────────────────────────────────────── */
.login-section {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px; padding: 0; background: none;
}

/* ─── Vollbild-Login-Poster (Design „Mix A", nur wenn nicht eingeloggt) ─────
   Läuferin gross mit Kopf + ganzem Körper, riesiger getrennter Titel
   „SPORT- / CHALLENGE", Login-Formular auf dunklem Grund darunter. */
.login-screen {
    --lp-magenta: oklch(60% 0.27 330);
    --lp-turkis:  oklch(72% 0.18 185);
    --lp-dark:    #0d0b12;
    --lp-dark2:   #13101c;
    --lp-text:    #f0edf8;
    --lp-grad: linear-gradient(90deg, var(--lp-turkis) 0%, var(--lp-magenta) 100%);

    position: fixed; top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: 480px;
    z-index: 6000; overflow: hidden;
    background: var(--lp-dark);
    color: var(--lp-text);
}
@media (min-width: 700px) {
    .login-screen {
        top: 50%; bottom: auto;
        transform: translate(-50%, -50%);
        height: min(100dvh, 900px);
        border-radius: 28px;
        box-shadow: 0 40px 100px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
    }
}

/* Läuferin (Kopf bleibt drin, volle Körperhöhe; Boden startet tief) */
.login-screen-hero {
    position: absolute; top: 0; left: 0; right: 0;
    height: 65%; overflow: hidden;
}
.login-screen-hero-img {
    position: absolute; inset: 0;
    background: url('hero.png') center top / cover no-repeat;
}
.login-screen-hero-fade {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, var(--lp-dark) 0%, rgba(13,11,18,0.4) 26%, transparent 56%),
        linear-gradient(to bottom, rgba(13,11,18,0.5) 0%, transparent 13%);
}

/* Inhalt: Titel (linksbündig, getrennt) + Login */
.login-screen-content {
    position: absolute; left: 0; right: 0; bottom: 0; top: 51%;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 22px;
    padding: 0 24px calc(40px + env(safe-area-inset-bottom));
}
.login-screen-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(54px, 17vw, 74px);
    line-height: 0.84; letter-spacing: -2px;
    text-transform: uppercase;
    margin: 0;
    background: var(--lp-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.85))
            drop-shadow(0 5px 20px rgba(0,0,0,0.55));
}
.login-screen-title span { display: block; }

.login-screen-form { display: flex; flex-direction: column; gap: 14px; }
.login-screen-field { display: flex; flex-direction: column; }
.login-screen-field label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 12px; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--lp-turkis);
    margin-bottom: 7px;
}
.login-screen-field .password-field { position: relative; display: block; }
.login-screen-field input {
    width: 100%; height: 52px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 13px;
    color: var(--lp-text);
    font-family: 'Barlow', sans-serif; font-size: 16px;
    padding: 0 16px;
    transition: border-color 0.18s, background 0.18s;
}
.login-screen-field input[type="password"],
.login-screen-field .password-field input { padding-right: 48px; }
.login-screen-field input::placeholder { color: #6f6886; }
/* Platzhalter (z. B. die ••••••••-Punkte) beim Reinklicken ausblenden. */
.login-screen-field input:focus::placeholder { color: transparent; }
.login-screen-field input:focus {
    outline: none;
    border-color: var(--lp-turkis);
    background: rgba(255,255,255,0.10);
}
.login-screen-field .password-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 6px 8px;
    font-size: 18px; line-height: 1; cursor: pointer;
    box-shadow: none;
}
.login-screen-field .password-toggle:hover { opacity: 0.85; transform: translateY(-50%); }

.login-screen-btn {
    margin-top: 4px; height: 54px;
    border: none; border-radius: 13px;
    background: var(--lp-grad);
    color: var(--lp-dark);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 20px; letter-spacing: 2.5px;
    text-transform: uppercase; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    transition: filter 0.18s, transform 0.05s;
}
.login-screen-btn:hover { filter: brightness(1.07); opacity: 1; }
.login-screen-btn:active { transform: translateY(1px); }

.login-screen .login-error { color: #ff9db5; font-size: 14px; min-height: 0; }

/* Solange nicht eingeloggt: nur das Poster zeigen, sonst nichts. */
body.logged-out { overflow: hidden; padding-bottom: 0; }
body.logged-out::before { display: none; }
body.logged-out .top-bar,
body.logged-out .container { display: none !important; }

@media screen and (max-width: 600px) {
    .top-bar h1 { width: 100%; text-align: center; }
    .login-section { width: 100%; justify-content: center; margin-top: 6px; }
    /* Läuferin oben rechts in die Titelzeile pinnen statt eigener Zeile. */
    .header-runner { position: absolute; top: 8px; right: 12px; height: 34px; }
}

.login-section input {
    width: 120px; padding: 7px 10px;
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-primary);
    font-size: 0.9em;
}

.login-section input:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

#currentPlayer {
    margin-left: 6px; font-weight: 700;
    color: var(--accent-color); white-space: nowrap; font-size: 0.9em;
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
button {
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    color: white; border: none; border-radius: 8px;
    padding: 8px 16px; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 0.95em; letter-spacing: 0.5px;
    transition: opacity 0.15s, transform 0.1s;
}

button:hover { opacity: 0.85; }
button:active { transform: scale(0.97); }

.button-primary { background: linear-gradient(135deg, var(--primary-color), #7c3aed); }
.button-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
}
.button-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }

.back-button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px; margin-bottom: 20px;
    font-weight: 600; font-size: 0.9em;
    text-decoration: none; transition: background 0.15s;
}

.back-button:hover { background: #ede9f8; }

/* ─── BOTTOM NAV ─────────────────────────────────────────────────────────── */
/* Dunkles Brand-Glas (Türkis→Magenta-Akzent), passend zum dunklen Redesign. */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(13, 11, 18, 0.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; justify-content: space-around; align-items: stretch;
    z-index: 1000;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 9px 2px; text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.62em; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; transition: color 0.15s;
    gap: 4px; min-width: 0; position: relative;
}

.bottom-nav-item i { font-size: 1.35em; }

.bottom-nav-item span {
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 100%;
}

.bottom-nav-item.active { color: #fff; }

.bottom-nav-item.active::before {
    content: '';
    position: absolute; top: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, oklch(72% 0.18 185), oklch(62% 0.27 330));
    border-radius: 0 0 2px 2px;
}

.bottom-nav-item.active i {
    filter: drop-shadow(0 0 10px color-mix(in oklab, oklch(72% 0.18 185) 70%, transparent));
}

.bottom-nav-item:hover { color: rgba(255, 255, 255, 0.85); }
.bottom-nav.hidden { display: none; }

/* ─── MORE SHEET ─────────────────────────────────────────────────────────── */
.more-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 2000; opacity: 0; pointer-events: none;
    transition: opacity 0.2s; backdrop-filter: blur(4px);
}

.more-sheet-overlay.open { opacity: 1; pointer-events: auto; }

.more-sheet {
    background: #ffffff;
    border: 1px solid var(--border-color);
    width: 100%; max-width: 500px;
    border-radius: 20px 20px 0 0;
    padding: 12px 20px calc(30px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
}

.more-sheet-overlay.open .more-sheet { transform: translateY(0); }

.more-sheet-handle {
    width: 36px; height: 4px;
    background: rgba(0,0,0,0.12); border-radius: 2px;
    margin: 0 auto 16px;
}

.more-sheet-title {
    margin: 0 0 16px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3em; font-weight: 900;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-primary);
}

.more-sheet-items { display: flex; flex-direction: column; gap: 2px; }

.more-sheet-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 12px; color: var(--text-primary);
    text-decoration: none; border-radius: 10px;
    transition: background 0.15s; font-size: 1em; font-weight: 500;
}

.more-sheet-item:hover, .more-sheet-item:active { background: var(--card-surface); }
.more-sheet-item i { font-size: 1.1em; color: var(--primary-color); width: 24px; text-align: center; }

/* ─── PERSONAL STATUS BAR ────────────────────────────────────────────────── */
.personal-status {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    background: linear-gradient(135deg, rgba(185,28,204,0.08), rgba(13,148,136,0.07)), var(--card-background);
    border: 1px solid rgba(185,28,204,0.18);
    color: var(--text-primary); padding: 14px 18px;
    border-radius: 14px; margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.status-item { display: flex; flex-direction: column; align-items: center; min-width: 56px; }

.status-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8em; font-weight: 900; line-height: 1.1;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.status-label {
    font-size: 0.65em; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-secondary); margin-top: 2px;
}

.status-divider { width: 1px; height: 32px; background: rgba(0,0,0,0.1); }

@media (max-width: 480px) {
    .personal-status { gap: 10px; padding: 12px 12px; }
    .status-value { font-size: 1.4em; }
}

/* ─── QUICK LOG SECTION ──────────────────────────────────────────────────── */
.quick-log-section {
    margin: 0 0 14px; padding: 16px;
    background: var(--card-background);
    border: 1px solid var(--border-color); border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.quick-log-section.collapsible .quick-log-header {
    display: flex; align-items: center;
    justify-content: space-between; cursor: pointer; user-select: none; padding: 2px 0;
}

.quick-log-section.collapsible .quick-log-header h2 { margin: 0; }

.quick-log-section .toggle-icon {
    color: var(--primary-color); font-size: 1em;
    transition: transform 0.25s; margin-left: 12px;
}

.quick-log-section.collapsed .toggle-icon { transform: rotate(-90deg); }

.quick-log-section .quick-log-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease;
    max-height: 2000px; opacity: 1; margin-top: 14px;
}

.quick-log-section.collapsed .quick-log-body {
    max-height: 0; opacity: 0; margin-top: 0;
}

.quick-log-header h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-primary);
}

/* ─── DURATION BUTTONS ───────────────────────────────────────────────────── */
.duration-buttons {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin-bottom: 12px; justify-content: center; align-items: center;
}

.duration-button {
    padding: 7px 14px;
    border: 1.5px solid rgba(185,28,204,0.3);
    border-radius: 20px; background: transparent;
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95em; font-weight: 700; letter-spacing: 0.3px;
    white-space: nowrap; min-width: 54px; text-align: center;
}

.duration-button:hover { border-color: var(--primary-color); color: var(--primary-color); }

.duration-button.selected {
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    color: white; border-color: transparent;
    box-shadow: 0 2px 10px var(--primary-glow);
}

.custom-duration { display: inline-flex; align-items: center; gap: 6px; }

/* Inline "Anderes" input — looks like a duration button */
.duration-buttons input[type="number"] {
    width: 68px; padding: 7px 10px;
    border: 1.5px solid var(--primary-color);
    border-radius: 20px; background: var(--card-surface);
    color: var(--primary-color);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95em; text-align: center; font-weight: 700;
    box-shadow: 0 2px 10px var(--primary-glow);
    outline: none;
    -moz-appearance: textfield;
}
.duration-buttons input[type="number"]::-webkit-outer-spin-button,
.duration-buttons input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

.custom-duration input {
    width: 68px; padding: 7px 10px;
    border: 1.5px solid rgba(185,28,204,0.3);
    border-radius: 20px; background: var(--card-surface);
    color: var(--primary-color);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95em; text-align: center; font-weight: 700;
}

.custom-duration input:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.custom-duration span { color: var(--text-secondary); font-size: 0.9em; }

@media screen and (max-width: 480px) {
    .duration-button { padding: 6px 11px; font-size: 0.9em; min-width: 48px; }
    .custom-duration input { width: 58px; }
}

/* ─── QUICK LOG BUTTONS ──────────────────────────────────────────────────── */
.quick-log-buttons {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-top: 12px;
}

@media (min-width: 600px) {
    .quick-log-buttons {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
    }
}

.quick-log-button {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 11px 5px; border: none; border-radius: 12px;
    background: linear-gradient(145deg, var(--primary-color), #7c3aed);
    color: white; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative; overflow: hidden;
    min-height: 70px; gap: 4px;
}

.quick-log-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(185,28,204,0.3);
}

.quick-log-button:active { transform: translateY(1px); }

.quick-log-button .sport-name {
    color: white; font-size: 0.82em; font-weight: 700;
    margin: 0; line-height: 1.2; text-align: center;
}

.quick-log-button .points-preview {
    color: rgba(255,255,255,0.85); font-size: 0.67em;
    background: rgba(255,255,255,0.2);
    padding: 2px 7px; border-radius: 8px;
}

.icon-wrapper {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.2); border-radius: 50%;
    margin-bottom: 3px; transition: transform 0.3s;
}

.quick-log-button:hover .icon-wrapper { transform: rotate(360deg); }
.quick-log-button i { font-size: 1.1em; color: white; }

/* Sport-specific gradients */
.sport-running        { background: linear-gradient(145deg, #7c3aed, #4338ca); }
.sport-swimming       { background: linear-gradient(145deg, #0e7490, #0369a1); }
.sport-cycling        { background: linear-gradient(145deg, #0d9488, #0284c7); }
.sport-yoga           { background: linear-gradient(145deg, #7c3aed, #a21caf); }
.sport-weightlifting  { background: linear-gradient(145deg, #c026d3, #7c3aed); }
.sport-pushups        { background: linear-gradient(145deg, #db2777, #be185d); }
.sport-plank          { background: linear-gradient(145deg, #6d28d9, #4c1d95); }
.sport-squats         { background: linear-gradient(145deg, #0891b2, #4338ca); }
.sport-pullups        { background: linear-gradient(145deg, #9333ea, #7c3aed); }
.sport-burpees        { background: linear-gradient(145deg, #e11d48, #9f1239); }
.sport-situps         { background: linear-gradient(145deg, #0d9488, #065f46); }
.sport-jackknife      { background: linear-gradient(145deg, #d97706, #b45309); }
.sport-superman       { background: linear-gradient(145deg, #1d4ed8, #1e3a8a); }
.sport-mountain_climbers { background: linear-gradient(145deg, #7c3aed, #1d4ed8); }
.sport-squat_thrust   { background: linear-gradient(145deg, #059669, #065f46); }
.sport-russian_twists { background: linear-gradient(145deg, #dc2626, #991b1b); }
.sport-dips           { background: linear-gradient(145deg, #d97706, #c026d3); }
.sport-walking        { background: linear-gradient(145deg, #0d9488, #059669); }
.sport-trampolin      { background: linear-gradient(145deg, #d97706, #ea580c); }
.sport-stretching     { background: linear-gradient(145deg, #0284c7, #0e7490); }
.sport-moderate_training  { background: linear-gradient(145deg, #db2777, #9333ea); }
.sport-ambitious_training { background: linear-gradient(145deg, #c026d3, #db2777); }
.sport-intense_training   { background: linear-gradient(145deg, #dc2626, #c026d3); }
.sport-climbing       { background: linear-gradient(145deg, #92400e, #78350f); }

/* Ripple */
.quick-log-button::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; width: 5px; height: 5px;
    background: rgba(255,255,255,0.4);
    opacity: 0; border-radius: 100%;
    transform: scale(1,1) translate(-50%);
    transform-origin: 50% 50%;
}
.quick-log-button:focus:not(:active)::after { animation: ripple 1s ease-out; }

@keyframes ripple {
    0%   { transform: scale(0,0); opacity: 0.5; }
    100% { transform: scale(100,100); opacity: 0; }
}

/* ─── ACTIVITY COMMENT ───────────────────────────────────────────────────── */
.activity-comment { width: 100%; margin-top: 10px; }

.activity-comment input {
    width: 100%; padding: 9px 14px;
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px; color: var(--text-primary);
    font-size: 0.9em; transition: border-color 0.2s;
}

.activity-comment input:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.activity-comment input::placeholder { color: var(--text-secondary); }

/* ─── HOME · DUNKLES BRAND-DESIGN (eingeloggte Startseite) ───────────────────
   „Home Seite" aus dem Design-Bundle (G3): Läuferin-Hero mit Punkte/Rang/Streak,
   dunkler Grund, Akzentbalken-Header, 3-spaltige Sport-Kacheln in den
   Punkteverlauf-(Jewel-)Farben. Farbtokens lokal, um nicht mit dem hellen
   Rest der Website zu kollidieren. */
.home-dark {
    --hd-magenta: oklch(62% 0.27 330);
    --hd-turkis:  oklch(72% 0.18 185);
    --hd-dark:    #0d0b12;
    --hd-dark3:   #1c1728;
    --hd-text:    #f0edf8;
    --hd-muted:   #8a83a0;
    --hd-grad: linear-gradient(135deg, var(--hd-turkis) 0%, var(--hd-magenta) 100%);
    background: var(--hd-dark);
    padding-bottom: 70px;
    /* Dunklen Grund immer bis zum Viewport-Ende ziehen, damit bei kurzem
       Inhalt (beide Sektionen eingeklappt) unten kein heller html-Hintergrund
       durchscheint. */
    min-height: 100vh;
    min-height: 100dvh;
}
.home-dark::before { display: none; }            /* helles Muster aus, dunkler Grund */
.home-dark .top-bar { display: none; }           /* keine Wortmarke — der Hero ersetzt sie */
.home-dark .page-subtitle { display: none !important; }
.home-dark .container {
    margin-top: 0; padding: 0 0 24px;
    max-width: 480px; margin-left: auto; margin-right: auto;
}

/* Hero: Läuferin im Hintergrund (wie Profilseite), Text über dunklem Verlauf */
.home-hero {
    position: relative; height: 234px;
    background:
        linear-gradient(to bottom,
            rgba(13,11,18,0.12) 0%, rgba(13,11,18,0.10) 26%,
            rgba(13,11,18,0.52) 54%, rgba(13,11,18,0.9) 82%, #0d0b12 100%),
        url('hero.png') center 12% / cover no-repeat;
}
.home-hero-overlay { position: absolute; left: 16px; right: 16px; bottom: 14px; }
.home-hero-score {
    display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none;
}
.home-hero-score-num {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
    font-size: 70px; line-height: 0.9; color: #fff;
    text-shadow: 0 3px 18px rgba(0,0,0,0.95);
}
.home-hero-score-label {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 16px; letter-spacing: 3px; text-transform: uppercase;
    color: #fff; opacity: 0.92; text-shadow: 0 1px 10px rgba(0,0,0,1);
}
.home-hero-meta { display: flex; gap: 18px; margin-top: 4px; }
.home-hero-meta span {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
    color: #fff; opacity: 0.9; text-shadow: 0 1px 8px rgba(0,0,0,1);
}
.home-hero-title {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
    font-size: 30px; letter-spacing: 0.5px; text-transform: uppercase;
    color: #fff; margin-top: 12px; text-shadow: 0 2px 14px rgba(0,0,0,0.95);
}

/* Sektionen: keine weiße Karte mehr, nur auf dunklem Grund */
.home-dark .quick-log-section {
    background: transparent; border: none; box-shadow: none;
    margin: 0; padding: 2px 16px 4px;
}
.home-dark .quick-log-section + .quick-log-section { padding-top: 4px; }
.home-dark .quick-log-header h2 {
    display: flex; align-items: center; gap: 9px;
    color: var(--hd-text); font-size: 1.05em; letter-spacing: 1.5px;
}
.home-dark .quick-log-header h2::before {
    content: ''; width: 8px; height: 20px; border-radius: 2px;
    background: var(--hd-grad); flex-shrink: 0;
}
.home-dark .toggle-icon { color: var(--hd-magenta); }

/* Dauer-/Wiederholungs-Pillen */
.home-dark .duration-button {
    border: 1.5px solid rgba(255,255,255,0.18);
    color: #fff; background: transparent;
}
.home-dark .duration-button:hover { border-color: var(--hd-turkis); color: var(--hd-turkis); }
.home-dark .duration-button.selected {
    background: var(--hd-grad); color: #fff; border-color: transparent; box-shadow: none;
}
.home-dark .duration-buttons input[type="number"] {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.18);
    color: #fff; box-shadow: none;
}
.home-dark .duration-buttons input[type="number"]::placeholder { color: var(--hd-muted); }

/* Sport-Kacheln: Farbe pro Sportart wird inline (JS) gesetzt; hier nur Form/Typo */
.home-dark .quick-log-button {
    border-radius: 15px; min-height: 58px; padding: 8px 8px 7px; gap: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.home-dark .quick-log-button:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.home-dark .quick-log-button .sport-name {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.2px;
    font-size: 0.84em; hyphens: auto; overflow-wrap: break-word;
    text-shadow: 0 1px 3px rgba(0,0,0,0.38);
}
.home-dark .quick-log-button .points-preview {
    color: #fff; background: rgba(0,0,0,0.18); font-weight: 800;
}

/* Kommentar-Feld dunkel */
.home-dark .activity-comment input {
    background: var(--hd-dark3);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--hd-text); border-radius: 12px;
}
.home-dark .activity-comment input::placeholder { color: var(--hd-muted); }

/* ─── RÜCKWIRKEND EINTRAGEN ──────────────────────────────────────────────── */
.log-date-bar {
    display: flex; align-items: stretch; gap: 8px;
    max-width: 480px; margin: 0 auto 14px; padding: 0 16px;
}
.log-date-bar-main {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 12px; cursor: pointer;
    background: var(--hd-dark3); color: var(--hd-text);
    border: 1px dashed rgba(255,255,255,0.18);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 15px; letter-spacing: 0.4px; text-transform: uppercase;
    transition: border-color 0.15s, background 0.15s;
}
.log-date-bar-main:hover { border-color: var(--hd-turkis); }
.log-date-bar-main > i:first-child { color: var(--hd-turkis); font-size: 1.05em; }
.log-date-bar-text { flex: 1; text-align: left; }
.log-date-bar-caret { color: var(--hd-muted); font-size: 0.8em; }

/* Aktiver Zustand: anderer Tag gewählt → auffällige Warn-Optik. */
.log-date-bar.is-active .log-date-bar-main {
    background: rgba(216,166,87,0.16);
    border: 1px solid #d8a657; border-style: solid;
    color: #f3dcab;
}
.log-date-bar.is-active .log-date-bar-main > i:first-child,
.log-date-bar.is-active .log-date-bar-caret { color: #f3dcab; }
.log-date-bar-reset {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; border-radius: 12px; cursor: pointer;
    background: none; color: #f3dcab; border: 1px solid rgba(216,166,87,0.55);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase;
    transition: border-color 0.15s;
}
.log-date-bar-reset:hover { border-color: #d8a657; }

/* Tagesauswahl im Bottom-Sheet (nutzt .more-sheet, hier dunkel überschrieben) */
.log-date-sheet { background: var(--hd-dark3); border-color: rgba(255,255,255,0.1); }
.log-date-sheet .more-sheet-handle { background: rgba(255,255,255,0.18); }
.log-date-sheet .more-sheet-title { color: var(--hd-text); }
.log-date-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.log-date-option {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 11px 14px; border-radius: 12px; cursor: pointer; text-align: left;
    background: var(--hd-dark); color: var(--hd-text);
    border: 1.5px solid rgba(255,255,255,0.1);
    transition: border-color 0.15s, background 0.15s;
}
.log-date-option:hover { border-color: var(--hd-turkis); }
.log-date-option.selected { border-color: var(--hd-magenta); background: rgba(185,28,204,0.14); }
.log-date-option-label {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 16px; letter-spacing: 0.4px; text-transform: uppercase;
}
.log-date-option-sub { font-size: 12px; color: var(--hd-muted); }
.log-date-custom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.log-date-custom label {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--hd-muted);
}
.log-date-custom input[type="date"] {
    background: var(--hd-dark); color: var(--hd-text);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    padding: 9px 12px; font-family: 'Barlow', sans-serif; font-size: 14px;
    color-scheme: dark;
}

/* „Meine Lieblingskommentare"-Zeile unter den Kommentarfeldern */
.home-dark .fav-comments-link {
    display: flex; align-items: center; gap: 8px;
    width: 100%; margin-top: 8px; padding: 9px 12px;
    background: none; border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 12px; color: var(--hd-muted); cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.4px; text-transform: uppercase;
    transition: border-color 0.15s, color 0.15s;
}
.home-dark .fav-comments-link:hover { border-color: var(--hd-turkis); color: var(--hd-text); }
.home-dark .fav-comments-link i { color: var(--hd-turkis); }

/* Sheet-Leerzustand (noch keine Vorschläge) */
.sheet-empty { color: var(--hd-muted, #8a83a0); font-size: 14px; line-height: 1.5; padding: 6px 2px 2px; }

/* „Erneut eintragen"-Optionen (häufigste Kombis) */
.repeat-options { display: flex; flex-direction: column; gap: 8px; }
.repeat-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
    background: var(--hd-dark); color: var(--hd-text);
    border: 1.5px solid rgba(255,255,255,0.1);
    transition: border-color 0.15s, background 0.15s;
}
.repeat-option:hover { border-color: var(--hd-turkis); }
.repeat-option-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.repeat-option-name {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 16px; letter-spacing: 0.3px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.repeat-option-dur { font-size: 12px; color: var(--hd-muted); }
.repeat-option-pts {
    flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
    font-size: 17px;
    background: var(--hd-grad); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}

/* „Meine Lieblingskommentare"-Optionen */
.fav-comments-options { display: flex; flex-direction: column; gap: 8px; }
.fav-comment-option {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
    background: var(--hd-dark); color: var(--hd-text);
    border: 1.5px solid rgba(255,255,255,0.1);
    font-size: 14px; line-height: 1.4;
    transition: border-color 0.15s, background 0.15s;
}
.fav-comment-option:hover { border-color: var(--hd-turkis); }
.fav-comment-option i { color: var(--hd-turkis); flex-shrink: 0; }
.fav-comment-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── LEADERBOARD ────────────────────────────────────────────────────────── */
.leaderboard {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 14px; padding: 18px; margin-top: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.leaderboard h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3em; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--primary-color); margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border-color);
}

.player-score {
    display: grid; grid-template-columns: 30px 1fr auto;
    gap: 10px; align-items: center;
    padding: 11px 13px; margin: 4px 0;
    background: var(--card-surface);
    border-left: 3px solid var(--primary-color);
    border-radius: 8px; transition: background 0.15s;
}

.player-score:hover { background: rgba(185,28,204,0.06); }
.player-score a { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.player-score a:hover { color: var(--primary-color); }

/* ─── TEAM LEADERBOARD ───────────────────────────────────────────────────── */
.team-leaderboard-entry {
    display: flex; flex-direction: column;
    padding: 14px; margin: 8px 0;
    background: var(--card-surface);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px; transition: background 0.15s;
}

.team-leaderboard-entry:hover { background: rgba(185,28,204,0.04); }

.team-leaderboard-main {
    display: grid; grid-template-columns: 30px 1fr auto;
    gap: 12px; align-items: center; margin-bottom: 6px;
}

.team-leaderboard-details {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 14px; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

@media screen and (max-width: 768px) {
    .team-leaderboard-details {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.team-stat-box {
    background: rgba(185,28,204,0.05);
    padding: 10px; border-radius: 8px;
    border: 1px solid rgba(185,28,204,0.1);
}

.team-stat-box h4 {
    margin: 0 0 6px; font-size: 0.88em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--primary-color);
    font-family: 'Barlow Condensed', sans-serif;
}

.sport-info { display: flex; align-items: center; gap: 8px; font-size: 0.95em; padding: 5px 0; }
.sport-info i { color: var(--primary-color); font-size: 1.1em; }
.sport-minutes { color: var(--accent-color); font-weight: 700; }

.team-top-members { display: flex; flex-direction: column; gap: 5px; }

.team-member-entry {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; font-size: 0.9em;
}

.team-member-name { margin-right: 10px; color: var(--text-primary); }
.team-member-entry a { text-decoration: none; color: var(--text-secondary); }
.team-member-entry a:hover { color: var(--primary-color); }
.team-member-score { font-weight: 700; color: var(--accent-color); }
.team-score { font-weight: 700; color: var(--accent-color); }
.team-name { font-weight: 700; font-size: 1em; }

/* ─── RANKING TABS ───────────────────────────────────────────────────────── */
.ranking-tabs {
    display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 18px;
}

.ranking-tab {
    flex: 1; padding: 11px 0; text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1em; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-secondary); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s;
}

.ranking-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.ranking-panel { display: none; }
.ranking-panel.active { display: block; }

/* ─── ACTIVITY ENTRIES (Basis; Profil-Tageskarten überschreiben unter .ac-*) ── */
.activity-entry {
    padding: 13px; margin: 7px 0;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.activity-details { display: flex; flex-direction: column; gap: 5px; }

/* ─── SPORT BADGE ────────────────────────────────────────────────────────── */
.sport-badge {
    padding: 3px 9px; border-radius: 12px;
    font-size: 0.8em; font-weight: 700; color: white;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.4px; text-transform: uppercase;
}

.sport-badge.running       { background: #4338ca; }
.sport-badge.swimming      { background: #0e7490; }
.sport-badge.cycling       { background: #0369a1; }
.sport-badge.yoga          { background: #7c3aed; }
.sport-badge.weightlifting { background: #c026d3; }
.sport-badge.pushups       { background: #be185d; }
.sport-badge.plank         { background: #6d28d9; }
.sport-badge.squats        { background: #0891b2; }
.sport-badge.pullups       { background: #9333ea; }

/* ─── PLAYER / ACTIVITY SECTION ──────────────────────────────────────────── */
.player-section, .activity-section {
    margin: 14px 0; padding: 15px;
    background: var(--card-background);
    border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.activity-section select, .activity-section input {
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary); border-radius: 8px; padding: 8px 10px;
}

input, select {
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary); border-radius: 8px; padding: 8px 10px;
}

input:focus, select:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

input::placeholder { color: var(--text-secondary); }

/* ─── PROFILE ────────────────────────────────────────────────────────────── */
.player-profile {
    text-align: center; margin: 18px 0 28px;
    padding: 22px 20px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.player-profile h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2em; font-weight: 900; text-transform: uppercase;
    margin-top: 10px; color: var(--text-primary);
}

.player-total-score { font-size: 1.05em; color: var(--text-secondary); font-weight: 400; }
.player-total-score span { color: var(--accent-color); font-weight: 700; }
.streak-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, #ff6b35, #f7c59f);
    color: #7c2d00;
    font-weight: 700; font-size: 0.9em;
    padding: 5px 14px; border-radius: 20px;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.profile-picture {
    width: 160px; height: 160px;
    border-radius: 50%; object-fit: cover;
    border: 3px solid var(--primary-color);
    box-shadow: 0 4px 20px var(--primary-glow);
    display: block; margin: 0 auto;
}

.profile-picture-wrapper { position: relative; display: inline-block; margin-top: 50px; }

.profile-picture-wrapper svg.crown-large {
    position: absolute; top: -45px; left: 8%;
    transform: rotate(-28deg); z-index: 2;
}

/* Tap-to-reveal explanation bubble for the team-rank crown.
   Pops up directly to the right of the crown, with the arrow pointing back at
   it. There's ample room to the right of the avatar in the hero row on every
   screen size, so it never clips. */
.profile-picture-wrapper .crown-explainer {
    position: absolute;
    top: -12px;                       /* vertical centre lines up with the crown */
    left: calc(50% + 52px);           /* just clear of the crown's right edge */
    transform: translateY(-50%) translateX(-6px);
    width: max-content;
    max-width: min(220px, calc(100vw - 32px));
    background: #1b1726;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}
.profile-picture-wrapper .crown-explainer.show {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.profile-picture-wrapper .crown-explainer::before {
    content: '';
    position: absolute;
    top: 50%; left: -6px;             /* arrow on the left edge, pointing at the crown */
    transform: translateY(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: #1b1726;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* ===================== Profil-Hero (Claude Design L2) ===================== */
.profile-hero {
    flex-direction: column;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    margin: 14px 0 22px;
}

/* Top part with the runner photo */
.hero-top { position: relative; }
.hero-photo { position: absolute; inset: 0; background: url('hero.png') center 8% / cover no-repeat; }
.hero-fade {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 18%, rgba(13,11,18,0.45) 38%, rgba(13,11,18,0.88) 66%, #0d0b12 100%);
}
.hero-top-content { position: relative; padding: 0 clamp(16px, 5vw, 28px); }

/* Stats row over the photo (big bottom padding clears the avatar crown) */
.hero-stats { display: flex; align-items: center; padding: clamp(20px, 7vw, 40px) 0 clamp(40px, 11vw, 62px); }
.hero-stat { flex: 1; min-width: 0; text-align: center; position: relative; padding: 0 4px; }
.hero-stat + .hero-stat::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(255,255,255,0.25); }
.hero-stat-num { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(27px, 10vw, 46px); line-height: 1; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
.hero-stat-label { display: block; margin-top: 5px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(9.5px, 3vw, 13px); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,0.8); white-space: nowrap; }

/* Avatar + name/total/message */
.hero-profile-row { position: relative; display: flex; align-items: center; gap: clamp(16px, 5vw, 30px); padding: 4px 0 clamp(20px, 6vw, 28px); }
.hero-avatar { position: relative; flex-shrink: 0; }
.hero-avatar .profile-picture-wrapper { margin: 0; display: block; }
.hero-avatar .profile-picture {
    width: clamp(110px, 34vw, 200px); height: clamp(110px, 34vw, 200px);
    border-radius: 50%; object-fit: cover; display: block; margin: 0;
    border: 4px solid oklch(52% 0.28 330);
    box-shadow: 0 0 0 5px #13101c, 0 12px 34px rgba(0,0,0,0.6), 0 0 40px rgba(176,40,140,0.4);
}
.change-pic-btn {
    position: absolute; right: 4px; bottom: 4px; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid #fff; background: oklch(62% 0.27 330); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.change-pic-btn:hover { background: oklch(56% 0.27 330); }

/* Upload-Fortschritt über dem Profilbild (kreisrunde Maske wie das Avatar) */
.avatar-upload-overlay {
    position: absolute; inset: 0; z-index: 6; border-radius: 50%;
    background: rgba(13, 11, 18, 0.72); backdrop-filter: blur(1px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 0 14%; text-align: center;
}
.avatar-upload-spinner {
    width: 30px; height: 30px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: oklch(72% 0.18 185);
    animation: avatar-upload-spin 0.8s linear infinite;
}
@keyframes avatar-upload-spin { to { transform: rotate(360deg); } }
.avatar-upload-bar {
    width: 100%; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.18); overflow: hidden;
}
.avatar-upload-bar i {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, oklch(72% 0.18 185), oklch(62% 0.27 330));
    transition: width 0.2s ease;
}
.avatar-upload-pct {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 13px; letter-spacing: 0.5px; color: #fff;
}
.profile-hero .profile-picture-wrapper svg.crown-large {
    left: 50%; top: -26%;
    transform: translateX(-50%) rotate(-8deg); z-index: 3;
    width: clamp(46px, 14vw, 78px); height: auto;
}
.hero-info { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 2.5vw, 14px); min-width: 0; }
.hero-info h1 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(26px, 9vw, 48px); letter-spacing: 1px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.7); line-height: 1; white-space: nowrap; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; max-width: 100%; }
.hero-total { display: flex; align-items: baseline; gap: 10px; }
.hero-total-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(240,237,248,0.8); text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.hero-total-num {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(30px, 10vw, 42px); line-height: 1;
    background: linear-gradient(135deg, oklch(72% 0.18 185) 0%, oklch(62% 0.27 330) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.hero-msg-btn {
    align-items: center; gap: 8px; border: none; cursor: pointer;
    background: linear-gradient(135deg, oklch(55% 0.18 185), oklch(52% 0.28 330));
    color: #fff; padding: 11px 22px; border-radius: 12px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px;
    letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 6px 20px rgba(0,0,0,0.4); white-space: nowrap;
}

/* Lieblingssportarten (Claude Design F-D · vertical list, dark section) */
.hero-favs { background: #0d0b12; padding: 4px clamp(16px, 5vw, 28px) 8px; }
.hero-favs-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(240,237,248,0.85); text-align: center; margin: 6px 0 11px; }
.hero-favs-list { display: flex; flex-direction: column; gap: 7px; }
.hero-fav-row { display: flex; align-items: center; gap: 11px; background: #1c1728; border: 1px solid rgba(255,255,255,0.07); border-left: 4px solid #8a83a0; border-radius: 12px; padding: 8px 14px; }
.hero-fav-row.r1 { border-left-color: #D4A93A; }
.hero-fav-row.r2 { border-left-color: #BFC2CC; }
.hero-fav-row.r3 { border-left-color: #B2733A; }
.hero-fav-medal { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 14px; line-height: 1; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28), 0 3px 8px rgba(0,0,0,0.35); }
.hero-fav-medal.r1 { background: radial-gradient(circle at 36% 30%, #F6E69A 0%, #D4A93A 58%, #A87F26 100%); color: #5a420f; }
.hero-fav-medal.r2 { background: radial-gradient(circle at 36% 30%, #FBFCFF 0%, #BFC2CC 58%, #8C909C 100%); color: #3d4049; }
.hero-fav-medal.r3 { background: radial-gradient(circle at 36% 30%, #E8B57F 0%, #B2733A 58%, #87521F 100%); color: #46290f; }
.hero-fav-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; color: #f0edf8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Duell (dark section below) */
.hero-duell { background: #0d0b12; padding: 4px clamp(16px, 5vw, 28px) 28px; }
.duell-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(240,237,248,0.85); text-align: center; margin: 14px 0 14px; }
.duell-row { display: flex; align-items: center; gap: 14px; background: #1c1728; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.duell-letter { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #1c1728; border: 2px solid #8a83a0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; }
.duell-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #1c1728; border: 2px solid #8a83a0; margin: -9px 0; }
.duell-mid { flex: 1; min-width: 0; }
.duell-name { display: flex; align-items: center; gap: 8px; }
.duell-name > span:first-child { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 19px; color: #f0edf8; }
.duell-icon { font-size: 14px; }
.duell-bar { margin-top: 8px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.duell-bar-fill { height: 100%; border-radius: 3px; background: #8a83a0; transition: width 0.3s; }
.duell-right { text-align: right; flex-shrink: 0; }
.duell-big { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 26px; line-height: 1; }
.duell-sub { font-family: 'Barlow', sans-serif; font-size: 11px; color: #8a83a0; margin-top: 2px; }
#playerRivalAhead .duell-letter, #teamRivalAhead .duell-letter { border-color: oklch(62% 0.27 330); color: oklch(62% 0.27 330); }
#playerRivalAhead .duell-bar-fill, #teamRivalAhead .duell-bar-fill { background: oklch(62% 0.27 330); }
#playerRivalAhead .duell-big, #teamRivalAhead .duell-big { color: oklch(62% 0.27 330); }
#playerRivalBehind .duell-letter, #teamRivalBehind .duell-letter { border-color: oklch(72% 0.18 185); color: oklch(72% 0.18 185); }
#playerRivalBehind .duell-bar-fill, #teamRivalBehind .duell-bar-fill { background: oklch(72% 0.18 185); }
#playerRivalBehind .duell-big, #teamRivalBehind .duell-big { color: oklch(72% 0.18 185); }
/* Avatar ring colours, matching the rival/threat accent */
#playerRivalAhead .duell-avatar, #teamRivalAhead .duell-avatar { border-color: oklch(62% 0.27 330); }
#playerRivalBehind .duell-avatar, #teamRivalBehind .duell-avatar { border-color: oklch(72% 0.18 185); }

/* Kompakte Duell-Zeilen — gleiche Größe auf Profil- UND Teamseite */
#playerRivalAhead.duell-row, #playerRivalBehind.duell-row,
#teamRivalAhead.duell-row, #teamRivalBehind.duell-row { gap: 12px; padding: 2px 14px; margin-bottom: 18px; }
#playerRivalAhead .duell-name > span:first-child, #playerRivalBehind .duell-name > span:first-child,
#teamRivalAhead .duell-name > span:first-child, #teamRivalBehind .duell-name > span:first-child { font-size: 16px; }
#playerRivalAhead .duell-bar, #playerRivalBehind .duell-bar,
#teamRivalAhead .duell-bar, #teamRivalBehind .duell-bar { margin-top: 4px; }

/* „Dein Duell": klickbare Überschrift (Erklärung) + Zeilen als Profil-Links */
button.duell-title {
    background: none; border: none; padding: 0;
    display: block; width: 100%; cursor: pointer;
}
.duell-info-icon { font-size: 0.78em; opacity: 0.55; margin-left: 5px; vertical-align: middle; }
button.duell-title:hover .duell-info-icon { opacity: 0.9; }
.duell-explainer {
    display: none;
    max-width: 460px; margin: -4px auto 16px;
    background: #1c1728; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 12px 14px;
    font-family: 'Barlow', sans-serif; font-size: 13px; line-height: 1.5;
    color: rgba(240,237,248,0.85); text-align: left;
}
.duell-explainer.show { display: block; }
.duell-explainer strong { color: #f0edf8; font-weight: 700; white-space: nowrap; }
#playerRivalAhead.duell-row, #playerRivalBehind.duell-row,
#teamRivalAhead.duell-row, #teamRivalBehind.duell-row { transition: border-color 0.15s; }
#playerRivalAhead.duell-row:hover, #teamRivalAhead.duell-row:hover { border-color: oklch(62% 0.27 330); }
#playerRivalBehind.duell-row:hover, #teamRivalBehind.duell-row:hover { border-color: oklch(72% 0.18 185); }
#playerRivalAhead .duell-big, #playerRivalBehind .duell-big,
#teamRivalAhead .duell-big, #teamRivalBehind .duell-big { font-size: 21px; }
#playerRivalAhead .duell-sub, #playerRivalBehind .duell-sub,
#teamRivalAhead .duell-sub, #teamRivalBehind .duell-sub { font-size: 10px; line-height: 1.1; margin-top: 1px; }

/* Team hero spiegelt jetzt das Profil (Avatar links, Name rechts) — die Basis-
   Werte für .hero-stats/.hero-profile-row gelten, damit mehr vom Foto sichtbar
   ist. Nur die Team-Beschreibung wird zusätzlich gestylt. */
.team-hero-desc { margin: 8px 0 0; font-family: 'Barlow', sans-serif; font-size: clamp(13px, 3.6vw, 15px); line-height: 1.4; color: rgba(240,237,248,0.82); text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.team-hero-desc:empty { display: none; }

/* ─── STATS ──────────────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px; margin: 14px 0;
}

@media screen and (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } }

.stat-box {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    padding: 14px; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-box h3 {
    color: var(--accent-color); margin-top: 0;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* ─── ACHIEVEMENTS ───────────────────────────────────────────────────────── */
.achievements-section {
    margin: 14px 0; padding: 16px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.achievements-section h2 {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-primary); margin-bottom: 14px;
}
.achievements-section > h2::before {
    content: ''; width: 7px; height: 19px; border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(135deg, oklch(62% 0.27 330) 0%, oklch(52% 0.28 330) 100%);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px; margin-top: 10px;
}

.achievement-card {
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px; padding: 10px 6px;
    text-align: center; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    cursor: pointer;
}

.achievement-card:hover {
    transform: translateY(-3px);
    border-color: rgba(185,28,204,0.25);
    box-shadow: 0 4px 14px var(--primary-glow);
}

.achievement-card.locked { filter: grayscale(100%); opacity: 0.4; }
.achievement-card.reveal-cryptic.locked .achievement-name,
.achievement-card.reveal-hidden .achievement-name {
    color: var(--text-secondary);
    font-style: italic;
}

.achievement-icon {
    width: 56px; height: 56px; margin: 0 auto 6px;
    border-radius: 50%; padding: 0; overflow: hidden;
    background: rgba(185,28,204,0.08);
    border: 1px solid rgba(185,28,204,0.15);
}

.achievement-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.achievement-name { font-weight: 700; margin: 4px 0 0; color: var(--primary-color); font-size: 0.82em; line-height: 1.2; }

/* ─── ACHIEVEMENT STACKS (series) ───────────────────────────────────────── */
.achievement-stacks {
    display: flex; flex-wrap: wrap; gap: 22px;
    margin: 4px 0 16px;
}

.achievement-stack-wrapper {
    display: flex; flex-direction: column; align-items: flex-start;
}

.achievement-stack-label {
    font-size: 0.78em; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.achievement-stack {
    position: relative;
    height: 56px;
}

.achievement-coin {
    position: absolute; top: 0; left: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    background: #d4d4d8;
    color: rgba(0,0,0,0.55);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 1.5em; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: transform 0.15s;
}

.achievement-coin.unlocked {
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.achievement-coin.locked {
    background: #d4d4d8;
    opacity: 0.55;
}

/* Freigeschaltete Münze: echtes PNG statt CSS-Kreis */
.achievement-coin.has-img {
    background: none;
    border: none;
    box-shadow: none;
}

.achievement-coin-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.achievement-coin:hover {
    transform: translateY(-3px);
    z-index: 99 !important;
}

/* ─── ACHIEVEMENT MODAL ─────────────────────────────────────────────────── */
.achievement-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.achievement-modal-inner {
    background: var(--card-background);
    border-radius: 16px;
    padding: 28px 24px 22px;
    max-width: 360px; width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.achievement-modal-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: none;
    font-size: 1.6em; line-height: 1; cursor: pointer;
    color: var(--text-secondary);
}

.achievement-modal-icon {
    width: 92px; height: 92px; margin: 0 auto 14px;
    border-radius: 50%; padding: 0; overflow: hidden;
    background: rgba(185,28,204,0.08);
    border: 1px solid rgba(185,28,204,0.15);
}
.achievement-modal-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.achievement-modal-icon.locked { filter: grayscale(100%); opacity: 0.5; }

.achievement-modal-title { margin: 0 0 8px; color: var(--primary-color); font-size: 1.2em; }
.achievement-modal-desc { margin: 0 0 10px; color: var(--text-primary); font-size: 0.92em; }
.achievement-modal-status {
    margin: 0; color: var(--text-secondary); font-size: 0.82em;
    font-style: italic;
}

/* ─── ACHIEVEMENT CELEBRATION (unlock pop-up) ───────────────────────────────
   Full-screen dim backdrop + spinning gold coin + sunburst + confetti.
   Shared across all pages via showAchievementNotification() in utils.js. */
.achievement-celebration {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 6, 28, 0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 0.4s ease;
    pointer-events: none;
}
.achievement-celebration.show { opacity: 1; pointer-events: auto; }
.achievement-celebration.hide { opacity: 0; }

.ach-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 28px 26px 22px;
    max-width: min(86vw, 340px);
    background: linear-gradient(160deg, #ffffff, #faf5ff);
    border: 1px solid rgba(185,28,204,0.25);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(76, 5, 90, 0.45);
    transform: scale(0.6); opacity: 0;
    cursor: pointer;
}
.achievement-celebration.show .ach-card {
    animation: ach-card-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes ach-card-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.ach-coin-wrap {
    position: relative; width: 150px; height: 150px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    perspective: 700px;
}
.ach-burst {
    position: absolute; inset: -16%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        rgba(250, 204, 21, 0.55) 0deg 11deg,
        transparent 11deg 22deg);
    opacity: 0;
    -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 68%);
    mask-image: radial-gradient(circle, #000 28%, transparent 68%);
}
.achievement-celebration.show .ach-burst {
    animation: ach-burst-in 0.6s ease forwards, ach-burst-spin 9s linear infinite;
}
@keyframes ach-burst-in  { to { opacity: 0.85; } }
@keyframes ach-burst-spin { to { transform: rotate(360deg); } }

.ach-coin {
    position: relative; width: 124px; height: 124px;
    border-radius: 50%;
    transform-style: preserve-3d;
    background: radial-gradient(circle at 38% 32%, #fff7da, #f6c64a 55%, #d99a1f 100%);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.7),
                0 0 0 8px rgba(217,154,31,0.55),
                0 10px 26px rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
}
.achievement-celebration.show .ach-coin {
    animation: ach-coin-spin 1.25s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.ach-coin-img {
    width: 80%; height: 80%; object-fit: contain;
    border-radius: 50%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
@keyframes ach-coin-spin {
    0%   { transform: rotateY(0deg)    scale(0.3);  }
    70%  { transform: rotateY(900deg)  scale(1.12); }
    85%  { transform: rotateY(1040deg) scale(0.97); }
    100% { transform: rotateY(1080deg) scale(1);    }
}

.ach-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700; font-size: 0.95em;
    color: var(--accent-color, #b91ccc);
    margin-bottom: 4px;
}
.ach-title {
    margin: 0 0 6px; font-size: 1.5em; line-height: 1.1;
    color: var(--primary-color, #6d28d9);
}
.ach-desc { margin: 0 0 12px; font-size: 0.9em; color: var(--text-secondary); }
.ach-hint { font-size: 0.72em; color: var(--text-secondary); opacity: 0.7; }

/* Confetti + streamers */
.ach-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ach-confetti-piece {
    position: absolute; top: -8%;
    border-radius: 2px;
    opacity: 0;
    animation-name: ach-confetti-fall;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.ach-confetti-piece.ribbon { border-radius: 6px; }
@keyframes ach-confetti-fall {
    0%   { opacity: 0; transform: translateY(-10vh) translateX(0) rotate(0deg); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(105vh) translateX(var(--drift, 0)) rotate(var(--spin, 360deg)); }
}

/* Reduced motion: keep the pop-up, drop the spin/sunburst/confetti. */
@media (prefers-reduced-motion: reduce) {
    .achievement-celebration.show .ach-card,
    .achievement-celebration.show .ach-coin,
    .achievement-celebration.show .ach-burst {
        animation: none;
    }
    .ach-card { transform: scale(1); opacity: 1; }
    .ach-burst { opacity: 0.6; }
}

/* ─── ADMIN: GEHEIME ACHIEVEMENTS ÜBERSICHT ─────────────────────────────────
   Admin-only catalogue of hidden achievements + who unlocked each. */
.secret-achievements-list {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 16px;
}
.secret-achievement-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.secret-achievement-img {
    width: 44px; height: 44px; flex-shrink: 0;
    object-fit: cover; border-radius: 50%;
    background: rgba(185,28,204,0.06);
}
.secret-achievement-info { min-width: 0; }
.secret-achievement-name { font-weight: 700; color: var(--primary-color); }
.secret-achievement-desc {
    font-size: 0.85em; color: var(--text-secondary); margin: 2px 0 4px;
}
.secret-achievement-unlockers { font-size: 0.82em; color: var(--text-secondary); }
.secret-achievement-count {
    display: inline-block; font-weight: 700; color: var(--accent-color);
    margin-right: 4px;
}

/* ─── TEAMS ──────────────────────────────────────────────────────────────── */
.teams-section {
    margin: 14px 0; padding: 16px;
    background: var(--card-background);
    border: 1px solid var(--border-color); border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

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

.team-card {
    background: var(--card-surface);
    border: 1px solid var(--border-color); border-radius: 12px; padding: 16px;
    transition: transform 0.2s, border-color 0.2s;
}

.team-card:hover { transform: translateY(-3px); border-color: rgba(185,28,204,0.25); }
.team-description { color: var(--text-secondary); margin-bottom: 10px; font-size: 0.9em; }

.team-stats {
    display: grid; grid-template-columns: repeat(2,1fr);
    gap: 8px; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.team-stat { text-align: center; }
.stat-value { font-size: 1.15em; font-weight: 700; color: var(--accent-color); }
.stat-label { font-size: 0.8em; color: var(--text-secondary); }
.create-team-btn { background: linear-gradient(135deg, var(--accent-color), #0891b2); margin-bottom: 14px; }

/* Mitgliederliste je Team-Card im Admin-Dashboard (Hinzufügen/Entfernen) */
.teams-empty { color: var(--text-secondary); font-style: italic; }
.team-member-list { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 6px; }
.team-member-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9em; color: var(--text-primary); }
.team-member-row .leave-team-btn { padding: 3px 10px; font-size: 0.8em; flex-shrink: 0; }
.team-member-empty { color: var(--text-secondary); font-style: italic; font-size: 0.85em; }

/* ─── MEMBERS ────────────────────────────────────────────────────────────── */
.team-members {
    margin: 14px 0;
    padding: 16px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.team-members > h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3em; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-primary);
}
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }

.member-card {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    padding: 13px; border-radius: 10px; position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.member-name { font-size: 1em; font-weight: 700; color: var(--primary-color); text-decoration: none; display: block; margin-bottom: 3px; }
.member-score { color: var(--accent-color); font-weight: 700; }
.member-percent { font-size: 0.83em; color: var(--text-secondary); margin-top: 3px; }

.captain-badge {
    position: absolute; top: 10px; right: 10px;
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.73em; font-weight: 700;
}

.member-card-pic { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 7px; }
.member-card-pic img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
.member-other-team { color: var(--text-secondary); font-style: italic; font-size: 0.88em; }

/* ─── ADMIN ──────────────────────────────────────────────────────────────── */
.admin-section { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border-color); }
.admin-divider { margin: 20px 0; border: none; border-top: 1px solid var(--border-color); }
.admin-button { background: linear-gradient(135deg, #dc2626, #b91c1c); font-weight: 700; margin-left: 8px; }
.admin-button:hover { opacity: 0.85; }

.admin-controls { margin-top: 14px; padding: 14px; background: var(--card-surface); border: 1px solid var(--border-color); border-radius: 10px; }

.sport-points-section { margin: 14px 0; padding: 14px; background: var(--card-surface); border: 1px solid var(--border-color); border-radius: 10px; }
.sport-points-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.sport-point-entry { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; background: var(--card-background); border-radius: 8px; border: 1px solid var(--border-color); }
.sport-point-entry label { font-weight: 600; color: var(--text-primary); }
.sport-point-entry input { width: 54px; }

.player-management { margin: 14px 0; padding: 13px; background: var(--card-surface); border: 1px solid var(--border-color); border-radius: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.player-management input { width: 200px; }

.activity-logging { margin: 14px 0; padding: 13px; background: var(--card-surface); border: 1px solid var(--border-color); border-radius: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.activity-logging select, .activity-logging input { min-width: 130px; }
.activity-logging input[type="number"] { width: 100px; }

.activity-header {
    display: grid; grid-template-columns: repeat(6,1fr);
    background: var(--card-surface); padding: 9px 12px; font-weight: 700;
    border-radius: 8px 8px 0 0;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.activity-row { display: grid; grid-template-columns: repeat(6,1fr); padding: 9px 12px; border-bottom: 1px solid var(--border-color); align-items: center; }
.activity-row:hover { background: var(--hover-color); }
.activity-row button { padding: 4px 8px; background: linear-gradient(135deg, #dc2626, #b91c1c); border-radius: 6px; font-size: 0.82em; }
.activity-row select, .activity-row input { padding: 4px 7px; font-size: 0.86em; }

.player-list-admin { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.player-list-row { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--card-surface); border: 1px solid var(--border-color); border-left: 3px solid var(--primary-color); border-radius: 8px; }
.player-list-row.inactive { border-left-color: #dc2626; opacity: 0.6; }
.player-list-name { flex: 1; font-weight: 600; }
.player-list-score { color: var(--text-secondary); min-width: 70px; text-align: right; }
.player-list-status { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent-color); min-width: 78px; text-align: center; font-weight: 700; }
.player-list-row.inactive .player-list-status { color: #dc2626; }
.player-list-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.player-toggle-btn { padding: 5px 10px; border-radius: 6px; background: linear-gradient(135deg, var(--accent-color), #0891b2); white-space: nowrap; font-size: 0.85em; }
.player-list-row.inactive .player-toggle-btn { background: linear-gradient(135deg, #059669, #065f46); }
.player-pw-btn { padding: 5px 10px; border-radius: 6px; background: linear-gradient(135deg, var(--primary-color), #7c3aed); white-space: nowrap; font-size: 0.85em; }

/* On narrow viewports, split the row into two lines so the Reaktivieren /
   Austreten-lassen button can't overflow off-screen. */
@media screen and (max-width: 600px) {
    .player-list-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name   score"
            "status button";
        gap: 6px 10px;
    }
    .player-list-name   { grid-area: name; }
    .player-list-score  { grid-area: score;  min-width: auto; text-align: right; }
    .player-list-status { grid-area: status; min-width: auto; text-align: left; }
    .player-list-actions { grid-area: button; justify-self: end; }
}

/* ─── CHARTS ─────────────────────────────────────────────────────────────── */
.daily-activity-chart { margin: 14px 0; padding: 16px; background: var(--card-background); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.daily-activity-chart h3 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 1.1em; margin-bottom: 10px; }
.activities-list {
    margin: 14px 0;
    padding: 16px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.activities-list > h2 {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-primary); margin-bottom: 14px;
}
.activities-list > h2::before {
    content: ''; width: 7px; height: 19px; border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(135deg, oklch(62% 0.27 330) 0%, oklch(52% 0.28 330) 100%);
}

/* Pinnwand (Profil + Team) */
.wall {
    margin: 14px 0; padding: 16px;
    background: var(--card-background); border: 1px solid var(--border-color);
    border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.wall > h2 {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Barlow Condensed', sans-serif; font-size: 1.1em; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px; color: var(--text-primary); margin-bottom: 14px;
}
.wall > h2 i { color: var(--primary-color); font-size: 0.92em; }
.wall-composer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.wall-input {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 42px;
    padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px;
    font-family: 'Barlow', sans-serif; font-size: 14px; color: var(--text-primary); background: #fff;
}
.wall-input:focus { outline: none; border-color: var(--primary-color); }
.wall-submit {
    align-self: flex-end; border: none; cursor: pointer; border-radius: 10px; padding: 9px 18px;
    background: linear-gradient(135deg, var(--primary-color), #7c3aed); color: #fff;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.5px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.wall-submit:hover { filter: brightness(1.07); }
.wall-submit:disabled { opacity: 0.6; cursor: default; }
.wall-list { display: flex; flex-direction: column; gap: 10px; }
.wall-post {
    background: var(--card-surface, #f7f5fb); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 10px 12px;
}
.wall-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.wall-post-author {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.5px; font-size: 14px; color: var(--primary-color); text-decoration: none;
}
.wall-post-author:hover { text-decoration: underline; }
/* Team-Pinnwand: tuerkiser Akzent wie die anderen Team-Ueberschriften
   (Icon + Autorennamen), statt des lila auf der Profilseite. */
.wall-team > h2 i { color: var(--accent-color); }
.wall-team .wall-post-author { color: var(--accent-color); }
.wall-post-time { font-size: 11.5px; color: var(--text-secondary); }
.wall-post-del {
    margin-left: auto; background: none; border: none; color: var(--text-secondary);
    cursor: pointer; padding: 2px 7px; border-radius: 6px; font-size: 13px;
}
.wall-post-del:hover { color: #dc2626; background: rgba(220,38,38,0.08); }
.wall-post-text {
    font-family: 'Barlow', sans-serif; font-size: 14px; color: var(--text-primary);
    line-height: 1.4; white-space: pre-wrap; word-break: break-word;
}
.wall-empty { color: var(--text-secondary); font-size: 13px; }
.wall-more {
    display: block; width: 100%; margin-top: 12px; cursor: pointer;
    background: none; border: 1px solid var(--border-color); border-radius: 10px; padding: 9px 0;
    color: var(--primary-color); font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px;
}
.wall-more:hover { background: rgba(185,28,204,0.06); }
.chart-container { position: relative; height: 340px; width: 100%; margin: 14px 0; }

/* Horizontally scrollable chart (e.g. daily points over a long challenge):
   the bars scroll inside .chart-scroll-x while a mirrored Y-axis (drawn onto
   the fixed .chart-yaxis-overlay canvas) stays pinned to the left. */
.chart-scroll-wrap { overflow: hidden; }
.chart-scroll-x { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.chart-scroll-inner { position: relative; height: 100%; min-width: 100%; }
.chart-yaxis-overlay { position: absolute; top: 0; left: 0; height: 100%; z-index: 3; pointer-events: none; }

/* ── Meine Stats · Claude Design S1 ─────────────────────────────────────── */
.ms-card { container-type: inline-size; background: #fff; border-radius: 28px; padding: 26px clamp(16px, 5vw, 30px) 28px; box-shadow: 0 18px 44px rgba(0,0,0,0.16); margin: 14px 0; }
.ms-header { display: flex; align-items: center; gap: 12px; }
.ms-accent { width: 7px; height: 19px; border-radius: 3px; flex-shrink: 0; background: linear-gradient(135deg, oklch(62% 0.27 330) 0%, oklch(52% 0.28 330) 100%); }
.ms-card h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.1em; letter-spacing: 1px; text-transform: uppercase; color: #0d0b12; }
.ms-grid { display: grid; grid-template-columns: 370px 1fr; gap: 30px; align-items: stretch; margin-top: 22px; }
@container (max-width: 680px) { .ms-grid { grid-template-columns: 1fr; gap: 24px; } }
.ms-tables { display: flex; flex-direction: column; gap: 16px; }
.ms-subtitle { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: oklch(50% 0.22 300); }
.ms-table { margin-top: 8px; background: #f6f4fa; border: 1px solid #ece8f3; border-radius: 16px; overflow: hidden; }
.ms-trow { display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: center; padding: 6px 16px; border-bottom: 1px solid #ece8f3; }
.ms-trow:last-child { border-bottom: none; }
.ms-trow.ms-thead { padding: 6px 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #a39cb4; }
.ms-trow.ms-thead span + span { text-align: right; }
/* Spaltenüberschriften farblich passend zu den Werten (Minuten = blau, Punkte = grün) */
.ms-trow.ms-thead span:nth-child(2) { color: oklch(58% 0.12 252); }
.ms-trow.ms-thead span:nth-child(3) { color: oklch(52% 0.12 185); }
.ms-c0 { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2; color: #231d33; }
/* Minuten = blauer Text */
.ms-c1 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 14px; color: oklch(50% 0.17 252); text-align: right; }
/* Punkte = grüner Text */
.ms-c2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; color: oklch(48% 0.15 185); text-align: right; }
/* Aufklappbare Wiederholungs-Zeilen: Einzelübungen mit Wdh. + Punkten */
.ms-trow-exp { cursor: pointer; }
.ms-trow-exp:hover { background: #efeaf7; }
.ms-exp-caret { font-size: 10px; color: #a39cb4; transition: transform 0.18s; margin-left: 5px; }
.ms-trow-exp.open .ms-exp-caret { transform: rotate(180deg); }
.ms-detail { display: none; background: #efeaf7; border-bottom: 1px solid #ece8f3; padding: 2px 16px 8px; }
.ms-trow-exp.open + .ms-detail { display: block; }
.ms-detail-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: center; padding: 4px 0; }
.ms-detail-name { font-family: 'Barlow', sans-serif; font-size: 13px; color: #6f6880; }
.ms-detail-reps { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; color: oklch(54% 0.16 252); text-align: right; }
.ms-detail-pts { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; color: oklch(48% 0.15 185); text-align: right; }
.ms-chart-panel { display: flex; flex-direction: column; }
.ms-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ms-legend { display: flex; gap: 18px; }
.ms-legend-chip { display: inline-flex; align-items: center; gap: 8px; font-family: 'Barlow', sans-serif; font-size: 14px; color: #6f6880; }
.ms-sw { width: 13px; height: 13px; border-radius: 4px; display: inline-block; flex-shrink: 0; }
.ms-sw-turkis { background: oklch(70% 0.17 185); }
.ms-sw-magenta { background: oklch(52% 0.28 330); }
.ms-chart-tile { flex: 1; margin-top: 12px; background: #f6f4fa; border: 1px solid #ece8f3; border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 12px; }
.team-radar-panel { margin: 18px 0 4px; }
.sport-stat { display: grid; grid-template-columns: 120px 80px 80px 80px; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 0.88em; }
.sport-name { font-weight: 600; color: var(--text-primary); }
.sport-details { display: contents; }
.stat-number { text-align: right; color: var(--text-secondary); }
.sport-stat.header { font-weight: 700; border-bottom: 1px solid rgba(0,0,0,0.12); margin-bottom: 4px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.5px; }
.sport-stat.header .stat-number { color: var(--text-secondary); }

.radar-chart-container { width: 100%; max-width: 480px; margin: 0 auto; height: 360px; }

.team-progress-section { background: var(--card-background); border: 1px solid var(--border-color); padding: 16px; border-radius: 14px; margin-top: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.team-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.team-progress-header h3 { margin: 0; color: var(--accent-color); font-family: 'Barlow Condensed', sans-serif; font-size: 1.1em; text-transform: uppercase; letter-spacing: 0.5px; }
.team-progress-header select { padding: 5px 9px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-surface); color: var(--text-primary); cursor: pointer; }
.team-progress-section .chart-container { height: 260px; }

/* Punkteverlauf — brand "G1" look (white card, accent-bar headline, stat chips) */
#playerProgressSection.progress-card {
    background: #ffffff;
    border: none;
    border-radius: 24px;
    padding: 22px clamp(16px, 5vw, 28px) 18px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}
#playerProgressSection .team-progress-header { margin-bottom: 8px; }
#playerProgressSection .progress-stats { margin: 0; }
.pg-titlewrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pg-accent {
    width: 10px; height: 28px; border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(135deg, oklch(62% 0.27 330) 0%, oklch(52% 0.28 330) 100%);
}
#playerProgressSection .team-progress-header h3 {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    /* gleiche Groesse wie die Ueberschriften auf der Team-Seite (16.5px) */
    font-size: 1.1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0d0b12;
    white-space: nowrap;
}
.progress-stats { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin: 6px 0 8px; }
.progress-chip {
    display: inline-flex; align-items: baseline; gap: 7px;
    background: #fff; border: 1.5px solid #ece8f3; border-radius: 999px;
    padding: 6px 16px; white-space: nowrap;
}
.progress-chip .chip-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 20px; line-height: 1; }
.progress-chip .chip-label { font-family: 'Barlow', sans-serif; font-size: 13px; color: #6f6880; }

/* Fixed legend for the stacked points-per-sport chart */
.progress-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 2px 0 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: 'Barlow', sans-serif; font-size: 12.5px; color: #6f6880; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

.player-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 14px 0; }
.favorite-sports { background: var(--card-surface); border: 1px solid var(--border-color); padding: 14px; border-radius: 12px; }
.favorite-sports h3 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-color); margin-bottom: 10px; }
.favorite-sports-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.favorite-sports-table th { text-align: left; padding: 5px 7px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.5px; }
.favorite-sports-table td { padding: 7px; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--text-primary); }

.top-sports-grid { display: flex; justify-content: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.top-sport-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--card-background); border: 1px solid var(--border-color); border-radius: 12px; min-width: 170px; transition: transform 0.2s, border-color 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.top-sport-card:hover { transform: translateY(-3px); border-color: rgba(185,28,204,0.25); }
.top-sport-card .icon-wrapper { background: rgba(185,28,204,0.1); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; }
.top-sport-card:hover .icon-wrapper { transform: rotate(360deg); }
.top-sport-card i { font-size: 1.15em; color: var(--primary-color); }
.top-sport-card .sport-details { display: flex; flex-direction: column; }
.top-sport-card .sport-name { font-weight: 700; color: var(--primary-color); text-transform: capitalize; }
.top-sport-card .sport-time { color: var(--text-secondary); font-size: 0.86em; }

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 1000; }
.modal-content { position: relative; background: #ffffff; border: 1px solid var(--border-color); margin: 10% auto; padding: 22px; width: 85%; max-width: 460px; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.15); }
.close-modal { position: absolute; right: 16px; top: 10px; font-size: 20px; cursor: pointer; color: var(--text-secondary); transition: color 0.15s; }
.close-modal:hover { color: var(--text-primary); }
.modal-content input, .modal-content textarea { width: 100%; padding: 9px 11px; margin: 7px 0; background: var(--card-surface); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); }
.modal-content textarea { height: 85px; resize: vertical; }
.team-actions { display: flex; gap: 8px; margin-top: 12px; }
.team-actions button { flex: 1; }

.team-profile {
    text-align: center; margin: 18px 0 28px;
    padding: 22px 20px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.team-info { margin: 14px 0; color: var(--text-secondary); }
.add-player-section { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.add-player-select { flex: 1; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-surface); color: var(--text-primary); font-size: 0.9em; }
.join-team-btn { background: linear-gradient(135deg, var(--accent-color), #0891b2); }
.leave-team-btn { background: linear-gradient(135deg, #dc2626, #b91c1c); }

.color-picker { display: flex; flex-wrap: wrap; gap: 9px; margin: 9px 0; }
.color-button { width: 36px; height: 36px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; transition: transform 0.2s; background: none; padding: 0; }
.color-button:hover { transform: scale(1.12); }
.color-button.selected { border-color: #333; transform: scale(1.12); }

/* ─── TOAST ──────────────────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 80px; right: 16px; padding: 12px 18px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); transform: translateY(100px); opacity: 0; transition: all 0.3s; color: var(--text-primary); font-size: 0.9em; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-left: 3px solid var(--accent-color); }
.toast.error { border-left: 3px solid #dc2626; }
@media screen and (max-width: 768px) { .toast { left: 16px; right: 16px; text-align: center; } .form-group { margin-bottom: 13px; } }

/* ─── FORMS ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-weight: 600; font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.4px; }
.form-group input, .form-group select { width: 100%; }

/* ─── SETTINGS ───────────────────────────────────────────────────────────── */
.settings-section { margin: 14px auto; padding: 0; max-width: 460px; }
.settings-card { background: var(--card-background); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px; max-width: 460px; margin: 0 auto; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.settings-card h3 { color: var(--accent-color); margin-bottom: 16px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
#settingsButton { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 5px 8px; display: flex; align-items: center; gap: 4px; font-size: 0.88em; border-radius: 6px; transition: color 0.15s, background 0.15s; }
#settingsButton:hover { color: var(--primary-color); background: rgba(185,28,204,0.06); }

/* Settings: An/Aus-Schalter (z. B. tägliche Erinnerung) */
.settings-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.settings-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-switch-slider { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; background: #cbd5e1; transition: background 0.2s; }
.settings-switch-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s; }
.settings-switch input:checked + .settings-switch-slider { background: var(--primary-color); }
.settings-switch input:checked + .settings-switch-slider::before { transform: translateX(20px); }
.settings-switch input:focus-visible + .settings-switch-slider { box-shadow: 0 0 0 3px rgba(185,28,204,0.35); }
.settings-switch-label { font-size: 0.95em; color: var(--text-primary); }

/* ─── MESSAGING ──────────────────────────────────────────────────────────── */
.messaging-container { display: flex; height: 460px; border: 1px solid var(--border-color); border-radius: 14px; margin: 14px 0; background: var(--card-background); overflow: hidden; }
.conversations-list { width: 220px; border-right: 1px solid var(--border-color); overflow-y: auto; background: var(--card-surface); }
.conversation-item { padding: 11px; cursor: pointer; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; font-size: 0.88em; transition: background 0.15s; }
.conversation-item:hover { background: var(--hover-color); }
.conversation-item.active { background: rgba(185,28,204,0.08); }
.messages-area { flex: 1; display: flex; flex-direction: column; }
.messages-container { flex: 1; overflow-y: auto; padding: 11px; }
.message { margin: 7px 0; padding: 9px 11px; border-radius: 10px; background: var(--card-surface); border: 1px solid var(--border-color); font-size: 0.88em; }
.message.achievement { background: rgba(185,28,204,0.06); border-color: rgba(185,28,204,0.15); }
.message-header { display: flex; justify-content: space-between; margin-bottom: 3px; font-size: 0.8em; color: var(--text-secondary); }
.message-input-area { padding: 10px 11px; border-top: 1px solid var(--border-color); display: flex; gap: 7px; }
.message-input-area input { flex: 1; }

/* ─── BADGES ─────────────────────────────────────────────────────────────── */
.unread-badge { background: #dc2626; color: white; border-radius: 50%; padding: 1px 5px; font-size: 0.73em; font-weight: 700; }
.message-badge { position: absolute; top: -11px; right: -11px; background: #dc2626; color: white; border-radius: 50%; width: 17px; height: 17px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 4px rgba(0,0,0,0.2); border: 2px solid #ffffff; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }

/* ─── LOADING ────────────────────────────────────────────────────────────── */
.loading { position: relative; opacity: 0.65; }
.loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); animation: loading 1.5s infinite; }
@keyframes loading { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

/* ─── CROWNS ─────────────────────────────────────────────────────────────── */
svg.crown { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); display: inline-block; vertical-align: middle; }
svg.crown-small { width: 20px; height: 16px; margin-right: 5px; transform: rotate(-12deg); }
svg.crown-large { width: 82px; height: 66px; }

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.faq-section { max-width: 740px; margin: 0 auto; }
.faq-item { background: var(--card-background); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; margin: 12px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.faq-item h3 {
    color: var(--primary-color); margin: 0; cursor: pointer; user-select: none;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.2em;
    line-height: 1.25;
    position: relative; padding-right: 22px;
}
/* Accordion chevron (collapsed by default, rotates when open) */
.faq-item h3::after {
    content: '\25BE'; position: absolute; right: 0; top: 0;
    color: var(--text-secondary); transition: transform 0.2s ease;
}
.faq-item.open h3::after { transform: rotate(180deg); }
.faq-answer { color: var(--text-secondary); line-height: 1.65; display: none; margin-top: 10px; }
.faq-item.open .faq-answer { display: block; }
.faq-answer ul { padding-left: 18px; }
.faq-answer li { margin: 4px 0; }
/* Punkte-Tabellen in den FAQs (Name links, Wert rechts) */
.faq-answer ul.faq-points-list { list-style: none; padding-left: 0; margin: 6px 0 14px; }
.faq-points-list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 5px 0; margin: 0; border-bottom: 1px solid var(--border-color); }
.faq-points-list li:last-child { border-bottom: none; }
.faq-points-list li span:last-child { font-weight: 600; white-space: nowrap; color: var(--text-primary); }

.faq-intro {
    max-width: 740px; margin: 0 auto 18px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--card-background); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.faq-intro-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.9em; font-weight: 900; line-height: 1.1;
    letter-spacing: 0.5px; text-transform: uppercase;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.faq-intro-sub { color: var(--text-secondary); font-weight: 600; font-size: 0.98em; }

/* Jump-to-category chips */
.faq-nav { max-width: 740px; margin: 0 auto 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.faq-nav a {
    display: inline-block; padding: 7px 14px; border-radius: 999px;
    background: var(--card-background); border: 1px solid var(--border-color);
    color: var(--text-primary); text-decoration: none;
    font-size: 0.9em; font-weight: 600;
    transition: border-color 0.15s, color 0.15s;
}
.faq-nav a:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* Category headings (inherit the boxed look from .faq-section > h2) */
.faq-category { margin-top: 14px; scroll-margin-top: 90px; }

/* Screenshots in FAQ-Antworten – flexibel für Hoch- und Querformat.
   max-height begrenzt hohe Handy-Shots, max-width: 100% begrenzt breite Desktop-Shots. */
.faq-shot { margin: 14px 0 4px; text-align: center; }
.faq-shot img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.faq-shot figcaption { margin-top: 7px; font-size: 0.86em; color: var(--text-secondary); font-style: italic; }

/* ─── MISC ───────────────────────────────────────────────────────────────── */
.musterplayer-button { background: linear-gradient(135deg, var(--accent-color), #0891b2); color: white; padding: 9px 18px; border: none; border-radius: 8px; cursor: pointer; margin: 8px 0; font-weight: 700; }
.musterplayer-button:hover { opacity: 0.85; }
.notification-test { margin: 14px 0; padding: 13px; background: var(--card-surface); border: 1px solid var(--border-color); border-radius: 10px; }

/* ── Activity-log confirmation toast ─────────────────────────────────
   Slides up briefly when a sport tile is tapped. Sits above the bottom
   nav (~64px tall on mobile) so it never gets covered. */
.activity-toast {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translate(-50%, 24px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    min-width: 220px;
    max-width: 90vw;
    background: linear-gradient(135deg, var(--accent-color, #b91ccc), #0891b2);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1500;
    pointer-events: none;
}
.activity-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.activity-toast-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1em;
}
.activity-toast-title { font-weight: 700; font-size: 0.95em; }
.activity-toast-sub   { font-size: 0.82em; opacity: 0.92; }

/* ── Bestmarken (personal top-3 superlatives) ──────────────────────── */
/* ── Bestmarken — design B1 (white card, accent-bar headline, coin badges) ── */
.best-marks-section {
    background: #ffffff;
    border-radius: 24px;
    padding: 18px clamp(14px, 4vw, 24px) 18px;
    margin: 16px 0;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}
.best-marks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.bm-titlewrap { display: flex; align-items: center; gap: 12px; }
.bm-accent {
    width: 7px; height: 19px; border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(135deg, oklch(62% 0.27 330) 0%, oklch(52% 0.28 330) 100%);
}
.best-marks-header h3 {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 1.1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0d0b12;
    line-height: 1;
}
.best-marks-sub {
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
    color: #6f6880;
}
.best-marks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}
@media (min-width: 560px) {
    .best-marks-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
.best-mark-card {
    background: #f4f2f8;
    border: 1px solid #e2dcee;
    border-left-width: 4px;
    border-radius: 11px;
    overflow: hidden;
}
.best-mark-rank-1.best-mark-card { border-left-color: #D4A93A; }
.best-mark-rank-2.best-mark-card { border-left-color: #BFC2CC; }
.best-mark-rank-3.best-mark-card { border-left-color: #B2733A; }
.best-mark-strip { display: none; }
.best-mark-row {
    padding: 8px 10px;
    display: flex;
    gap: 9px;
    align-items: center;
}
.best-mark-coin {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 14px; line-height: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.best-mark-rank-1 .best-mark-coin { background: radial-gradient(circle at 36% 30%, #F6E69A 0%, #D9AE3E 55%, #A87F26 100%); color: #5a420f; }
.best-mark-rank-2 .best-mark-coin { background: radial-gradient(circle at 36% 30%, #FBFCFF 0%, #C6C9D2 55%, #8C909C 100%); color: #3d4049; }
.best-mark-rank-3 .best-mark-coin { background: radial-gradient(circle at 36% 30%, #E8B57F 0%, #B5763C 55%, #87521F 100%); color: #46290f; }
.best-mark-body { min-width: 0; }
.best-mark-category {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 12.5px; line-height: 1.05;
    color: #0d0b12;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.best-mark-value {
    margin-top: 3px; line-height: 1.2;
}
.best-mark-number {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 16px;
    color: oklch(48% 0.15 185);
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}
.best-mark-unit {
    font-family: 'Barlow', sans-serif;
    font-size: 11px; color: #6f6880;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}

/* ── Home-Screen Score-Pill ─────────────────────────────────────────
   Quick self-check pill in the top-bar — rounded integer score for
   the logged-in player. Tap to jump to own profile. */
.home-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primary-color, #6d28d9), var(--accent-color, #b91ccc));
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95em;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(109,40,217,0.25);
    transition: transform 0.15s, box-shadow 0.15s;
}
.home-score-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(109,40,217,0.35);
}
.home-score-pill-emoji { font-size: 1em; }
.home-score-pill-value { font-variant-numeric: tabular-nums; }

/* ── Team-α admin section ────────────────────────────────────────────── */
.team-alpha-explainer { color: var(--text-secondary); font-size: 0.92em; line-height: 1.5; margin: 8px 0 12px; }
.team-alpha-explainer code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; font-family: 'Courier New', monospace; }
.team-alpha-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; background: var(--card-surface); border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 16px; }
.team-alpha-control input { width: 90px; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 1em; }
.team-alpha-control button { padding: 6px 14px; }
.team-alpha-status { font-size: 0.88em; color: var(--text-secondary); }
.team-alpha-status.ok { color: var(--accent-color); }
.team-alpha-status.error { color: #dc2626; }

.bg-blur-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; background: var(--card-surface); border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 16px; }
.bg-blur-control input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--primary-color); }
.bg-blur-control button { padding: 6px 14px; }
.bg-blur-value { min-width: 48px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); }

.team-alpha-preview { overflow-x: auto; }
.team-alpha-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.team-alpha-table th, .team-alpha-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); text-align: left; white-space: nowrap; }
.team-alpha-table thead th { background: var(--card-surface); font-weight: 600; }
.team-alpha-table th.current-alpha,
.team-alpha-table td.current-alpha { background: rgba(185,28,204,0.06); }
.team-alpha-table thead th.current-alpha { color: var(--accent-color); }
.rank-badge { display: inline-block; font-weight: 600; color: var(--text-secondary); margin-right: 6px; min-width: 24px; }
.rank-score { color: var(--text-primary); }
.tooltip { position: fixed; bottom: 80px; right: 16px; background: #ffffff; border: 1px solid var(--border-color); color: var(--text-primary); padding: 13px 17px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); z-index: 1000; display: none; animation: slideIn 0.3s ease-out; font-size: 0.9em; }
.tooltip a { color: var(--accent-color); text-decoration: none; }
.tooltip a:hover { text-decoration: underline; }
@keyframes slideIn { from{transform:translateY(100px);opacity:0;} to{transform:translateY(0);opacity:1;} }

#errorDisplay { background: rgba(220,38,38,0.08) !important; border-bottom: 1px solid rgba(220,38,38,0.2); color: #dc2626 !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(185,28,204,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(185,28,204,0.4); }

/* ─── PHOTO STRIP (profile page) ────────────────────────────────────────── */
/* Fotos — design C2 (white card, accent-bar headline, round camera button) */
.photo-strip-section {
    margin: 16px 0 20px;
    padding: 22px clamp(16px, 5vw, 30px) 26px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}
.photo-strip-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ph-titlewrap { display: flex; align-items: center; gap: 12px; }
.ph-accent {
    width: 10px; height: 28px; border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(135deg, oklch(62% 0.27 330) 0%, oklch(52% 0.28 330) 100%);
}

/* Team-Seite: die Akzent-Striche neben den Ueberschriften tuerkis statt magenta,
   passend zum uebrigen Brand-Design. Die Profilseite bleibt magenta. */
#teamProgressSection .pg-accent,
#teamPhotoGallerySection .ph-accent {
    background: linear-gradient(135deg, oklch(72% 0.18 185) 0%, oklch(60% 0.15 185) 100%);
    /* kleiner, passend zur angeglichenen Ueberschriften-Groesse (16.5px) */
    width: 7px; height: 19px;
}
/* "Punkteverlauf"-Ueberschrift schwarz lassen (nur der Strich ist tuerkis);
   die Basis-Regel faerbt sie sonst im Akzent-Teal ein. */
#teamProgressSection .team-progress-header h3 { color: #0d0b12; }

/* Team-Stats und "Sportskanonen der Woche" bekommen denselben tuerkisen
   Akzent-Strich wie Punkteverlauf/Fotos (beide Sektionen sind team-only). */
.team-members > h2 { display: flex; align-items: center; gap: 12px; }
.weekly-winner-section > h2 { display: inline-flex; align-items: center; gap: 10px; }
.team-members > h2::before,
.weekly-winner-section > h2::before {
    content: ''; width: 7px; height: 19px; border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(135deg, oklch(72% 0.18 185) 0%, oklch(60% 0.15 185) 100%);
}

/* Alle Sektions-Ueberschriften auf der Team-Seite auf die Groesse von
   "Punkteverlauf" (1.1em) angleichen. Die .photo-strip-title gibt es auch auf
   der Profilseite -> nur die Team-Variante anpassen. */
#teamPhotoGallerySection .photo-strip-title,
.team-members > h2,
.weekly-winner-section > h2 {
    font-size: 1.1em;
}
.photo-strip-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(24px, 6.5vw, 32px); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #0d0b12; line-height: 1; }

/* Profilseite: "Punkteverlauf"- und "Fotos und Videos"-Ueberschriften auf die
   Team-Seiten-Groesse (16.5px) bringen und die lila Striche entsprechend
   verkleinern (7x19 wie auf der Team-Seite). */
#photoGallerySection .photo-strip-title { font-size: 1.1em; }
#playerProgressSection .pg-accent,
#photoGallerySection .ph-accent { width: 7px; height: 19px; }

/* Round camera upload button */
.photo-upload-btn-round {
    width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, oklch(62% 0.27 330) 0%, oklch(52% 0.28 330) 100%);
    color: #fff; font-size: 1.2em; cursor: pointer;
    box-shadow: 0 8px 22px rgba(176, 40, 140, 0.42);
    transition: transform 0.15s;
}
.photo-upload-btn-round:hover { transform: scale(1.05); }

/* Header actions + grid-size toggle */
.photo-header-actions { display: flex; align-items: center; gap: 10px; }
.photo-expand-btn {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1eef7; color: #6f6880; font-size: 0.95em; cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.photo-expand-btn:hover { background: #e7e2f1; color: oklch(55% 0.24 330); transform: scale(1.05); }

/* Team-Seite: Foto-Upload-Button tuerkis (passend zu den Akzent-Strichen);
   Profilseite (#uploadPhotoBtn) bleibt magenta. */
#uploadTeamPhotoBtn {
    background: linear-gradient(135deg, oklch(72% 0.18 185) 0%, oklch(60% 0.15 185) 100%);
    box-shadow: 0 8px 22px rgba(20, 160, 165, 0.42);
}

/* Instagram-style photo grid: 3 per row (compact overview), 2 per row when expanded */
.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 16px; }
.photo-strip.is-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.photo-strip-empty { grid-column: 1 / -1; font-family: 'Barlow', sans-serif; color: #6f6880; font-size: 15px; text-align: center; padding: 8px; }

/* Compact square "add" tile (first cell of the grid) */
.photo-add-tile {
    aspect-ratio: 1 / 1; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, oklch(62% 0.27 330) 0%, oklch(52% 0.28 330) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    color: #fff; box-shadow: 0 8px 18px rgba(176, 40, 140, 0.32);
}
.photo-add-plus { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 1.3em; line-height: 1; }
.photo-add-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; }

/* Empty placeholder tiles */
.photo-ph-tile { aspect-ratio: 1 / 1; border-radius: 12px; background: #f4f2f8; display: flex; align-items: center; justify-content: center; color: #d8d2e6; font-size: 1.4em; }

/* Photo / video thumbnails in the grid */
.photo-strip .photo-thumb { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; cursor: pointer; background: #f4f2f8; position: relative; }
.photo-strip.is-expanded .photo-thumb, .photo-strip.is-expanded .photo-add-tile, .photo-strip.is-expanded .photo-ph-tile { border-radius: 16px; }
.photo-strip .photo-thumb img, .photo-strip .photo-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.18s; }
.photo-strip .photo-thumb:hover img, .photo-strip .photo-thumb:hover video { transform: scale(1.06); }
.photo-strip .photo-uploader { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: white; font-size: 0.65em; padding: 10px 5px 4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* ─── PHOTO GALLERY (team page — keep 3-col grid) ────────────────────────── */
.photo-gallery-section { margin: 20px 0 24px; }
.photo-gallery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.photo-gallery-header h2 { margin: 0; }
.photo-upload-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-color); color: white; padding: 8px 14px; border-radius: 8px; font-size: 0.85em; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.photo-upload-btn:hover { opacity: 0.85; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--border-color); }
.photo-thumb img,
.photo-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.photo-thumb:hover img,
.photo-thumb:hover video { transform: scale(1.04); }
.photo-thumb .photo-uploader { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.55)); color: white; font-size: 0.7em; padding: 6px 6px 4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.photo-thumb .photo-video-badge {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.55); color: white;
    font-size: 0.78em; line-height: 1;
    padding: 4px 6px; border-radius: 999px;
    pointer-events: none;
}

/* Lightbox */
.photo-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.photo-lightbox img,
.photo-lightbox video { max-width: 92vw; max-height: 78vh; border-radius: 10px; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.photo-lightbox video { background: #000; }
.lightbox-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: white; font-size: 2.2rem; cursor: pointer; line-height: 1; }
.lightbox-delete-btn { margin-top: 16px; background: rgba(220,38,38,0.85); color: white; border: none; border-radius: 8px; padding: 9px 20px; font-size: 0.9em; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; position: relative; }
.lightbox-delete-btn:hover { background: rgba(220,38,38,1); }

/* ─── PHOTO UPLOAD MODAL ─────────────────────────────────────────────────── */
.photo-upload-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 8500; display: flex; align-items: flex-end; justify-content: center; }
.photo-upload-modal-inner { background: var(--card-background); border-radius: 16px 16px 0 0; padding: 24px 20px 32px; width: 100%; max-width: 480px; }
.photo-upload-modal-inner h3 { margin: 0 0 14px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: 1.2em; }
.upload-preview-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; background: #000; }
video.upload-preview-img { object-fit: contain; }
.upload-size-hint { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.78em; text-align: center; }
.photo-caption-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.95em; font-family: inherit; resize: none; background: var(--card-surface, #f9f9f9); color: var(--text-primary); }
.photo-caption-input:focus { outline: none; border-color: var(--primary-color); }
.upload-modal-actions { display: flex; gap: 10px; margin-top: 14px; }
.upload-modal-cancel { flex: 1; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; background: none; color: var(--text-secondary); font-size: 0.95em; cursor: pointer; }
.upload-modal-submit { flex: 2; padding: 10px; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-size: 0.95em; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.upload-modal-submit:hover { opacity: 0.87; }

/* Lightbox caption */
.lightbox-caption { color: rgba(255,255,255,0.9); font-size: 0.95em; text-align: center; max-width: 80vw; margin: 10px auto 0; line-height: 1.4; }

/* Lightbox reactions */
.lightbox-reactions { display: flex; gap: 10px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.reaction-btn {
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.15);
    color: white; border-radius: 50px;
    padding: 7px 14px; font-size: 1.2rem;
    cursor: pointer; display: flex; align-items: center; gap: 5px;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.reaction-btn:hover { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.reaction-btn.active { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.6); }
/* Read-only Reaktionen auf eigenen Fotos: nur Anzeige, nicht klickbar. */
.reaction-btn.reaction-readonly { cursor: default; opacity: 0.7; }
.reaction-btn.reaction-readonly:hover { background: rgba(255,255,255,0.12); transform: none; }
.reaction-count { font-size: 0.75rem; font-weight: 700; }

/* Wer hat reagiert: Emoji = Like-Button, ZAHL daneben = Namen auf-/zuklappen. */
.reaction-buttons-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; width: 100%; }
/* Emoji + Zahl gehören zusammen, sind aber klar getrennt (kein Fehlklick). */
.reaction-item { display: flex; align-items: center; gap: 9px; }
.reaction-count-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff; cursor: pointer;
    padding: 4px 11px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 700; line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}
.reaction-count-btn:hover { background: rgba(255,255,255,0.16); }
.reaction-count-btn.open { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.6); }
.reaction-count-btn .rc-caret { font-size: 0.6rem; opacity: 0.8; transition: transform 0.2s; }
.reaction-count-btn.open .rc-caret { transform: rotate(180deg); }
.reactors-breakdown {
    width: 100%; max-width: 360px; margin: 14px auto 0;
    display: flex; flex-direction: column; gap: 7px;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12);
}
.reactors-row { display: flex; align-items: center; gap: 9px; }
.reactors-emoji { flex-shrink: 0; font-size: 1.1rem; line-height: 1; }
.reactors-names { display: flex; flex-wrap: wrap; gap: 6px; }
.reactor-link {
    color: #fff; background: rgba(255,255,255,0.14);
    padding: 3px 10px; border-radius: 11px;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    transition: background 0.15s;
}
.reactor-link:hover { background: rgba(255,255,255,0.28); }

/* Thumb reaction badge */
.photo-reaction-count {
    position: absolute; bottom: 4px; right: 4px;
    background: rgba(0,0,0,0.55); color: white;
    font-size: 0.68rem; font-weight: 700;
    padding: 2px 6px; border-radius: 10px;
    pointer-events: none;
}

/* ─── SPIELER DER WOCHE ──────────────────────────────────────────────────── */
.weekly-winner-section { margin: 28px 0 16px; }
.weekly-winner-section h2 { margin-bottom: 12px; }
.weekly-winner-card { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #fcd34d; border-radius: 14px; padding: 16px 20px; box-shadow: 0 2px 8px rgba(251,191,36,0.2); }
.weekly-winner-podium { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.podium-entry { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 8px 12px; }
.podium-medal { font-size: 1.4rem; flex-shrink: 0; }
.podium-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.05em; flex: 1; }
.podium-points { font-size: 0.9em; font-weight: 700; white-space: nowrap; }
.podium-gold   { background: rgba(251,191,36,0.35); }
.podium-gold   .podium-name  { font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.4px; color: #78350f; }
.podium-gold   .podium-points { color: #92400e; }
.podium-silver { background: rgba(148,163,184,0.25); }
.podium-silver .podium-name  { color: #374151; }
.podium-silver .podium-points { color: #4b5563; }
.podium-bronze { background: rgba(180,131,90,0.2); }
.podium-bronze .podium-name  { color: #44281a; }
.podium-bronze .podium-points { color: #78350f; }
.weekly-winner-range { font-size: 0.78em; color: #a16207; margin-top: 2px; align-self: flex-end; }

/* Alle Wochen: eine Gold-Karte pro Woche, Datumskopf oben. */
.weekly-winner-list { display: flex; flex-direction: column; gap: 12px; }
.ww-week-range {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 0.95em; letter-spacing: 0.6px; text-transform: uppercase;
    color: #92400e;
}

/* ============================ Onboarding ============================ */

/* Login: inline error + password show/hide toggle */
.login-error {
    display: none;
    width: 100%;
    color: #d32f2f;
    font-size: 13px;
    text-align: center;
    margin-top: 4px;
}

.password-field {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.password-field input {
    padding-right: 28px;  /* room for the toggle button */
}

.password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
}

.password-toggle:hover { opacity: 1; }

/* Erste Schritte card */
.onboarding-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #4CAF50;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.onboarding-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.onboarding-card-header h2 { margin: 0; font-size: 18px; }

.onboarding-dismiss {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
}

.onboarding-dismiss:hover { color: #555; }

.onboarding-progress {
    margin: 6px 0 12px;
    font-size: 13px;
    color: #4CAF50;
    font-weight: 600;
}

.onboarding-checklist { list-style: none; margin: 0; padding: 0; }

.onboarding-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
}

.onboarding-check { width: 20px; text-align: center; color: #bbb; font-weight: bold; }
.onboarding-item.done .onboarding-check { color: #4CAF50; }
.onboarding-label { flex: 1; }
.onboarding-item.done .onboarding-label { color: #888; text-decoration: line-through; }

.onboarding-action {
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}

.onboarding-action:hover { background: #43a047; }

/* Welcome modal */
.welcome-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 16px;
}

.welcome-modal {
    background: #fff;
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.welcome-slide h2 { margin: 0 0 12px; font-size: 20px; }
.welcome-slide p { margin: 0 0 10px; line-height: 1.5; color: #444; }

.welcome-pw-choice { display: flex; gap: 10px; margin-top: 14px; }

.welcome-pw-choice button {
    flex: 1;
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 9px 0;
    font-size: 14px;
    cursor: pointer;
    color: #555;
}

.welcome-pw-choice button:hover { border-color: #4CAF50; }
.welcome-pw-choice button.active { background: #4CAF50; color: #fff; border-color: #4CAF50; }

.welcome-pw-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.welcome-pw-form input {
    padding: 9px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.welcome-pw-form button,
#tutorialStartBtn {
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px 14px;
    font-size: 15px;
    cursor: pointer;
}

.welcome-pw-form button:hover,
#tutorialStartBtn:hover { background: #43a047; }

.welcome-pw-error { color: #d32f2f; font-size: 13px; min-height: 16px; }
.welcome-pw-success { color: #4CAF50; font-size: 13px; min-height: 16px; }

.welcome-tutorial-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.welcome-later {
    background: none;
    border: none;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
}

.welcome-later:hover { color: #555; text-decoration: underline; }

.welcome-modal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
}

.welcome-modal-nav button {
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #555;
}

#welcomeNextBtn { background: #4CAF50; color: #fff; border-color: #4CAF50; }


/* Tutorial coach banner + highlight */
.tutorial-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 76px; /* clear the bottom nav */
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #231d33;
    border: 3px solid oklch(62% 0.27 330);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(176, 40, 140, 0.18);
    font-size: 14px;
    line-height: 1.45;
}

.tutorial-banner span { flex: 1; }

.tutorial-banner button {
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.tutorial-banner button:hover { background: #43a047; }

/* Zentrierte Variante (Feier-Schritte) — mittig statt unten, damit sie nicht
   die Aktivitäts-Bestätigung am unteren Rand überlappt. */
.tutorial-banner.tutorial-banner--center {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100% - 32px));
    flex-direction: column; text-align: center; gap: 14px;
    animation: av3pop .22s cubic-bezier(.2,.9,.3,1.3);
}

.ptut-actions { display: flex; gap: 8px; flex-shrink: 0; }
.tutorial-banner button.ptut-secondary { background: #eceaf2; color: #555; }
.tutorial-banner button.ptut-secondary:hover { background: #ddd9e6; }

/* Vollbild-Läuferin-Hintergrund für den Tutorial-Start. Liegt über der
   Home-Seite, aber unter dem Willkommens-Modal-Overlay (5000), Bottom-Nav (5100)
   und dem Home-Pfeil (5200). Während dieser Phase wird die Modal-Abdunklung
   transparent geschaltet (.tut-intro), damit die Läuferin klar sichtbar ist. */
.tut-intro-backdrop {
    position: fixed; inset: 0; z-index: 4999; pointer-events: none;
    background-color: #0d0b12;
    background-image:
        linear-gradient(to bottom, rgba(13,11,18,0.30) 0%, rgba(13,11,18,0.45) 55%, rgba(13,11,18,0.82) 100%),
        url('hero.png');
    background-repeat: no-repeat;
    background-position: center 12%;
    background-size: cover;
}
.welcome-modal-overlay.tut-intro { background: transparent; }

.home-nav-pointer {
    position: fixed;
    z-index: 5200;
    transform: translateX(-50%);
    color: oklch(64% 0.27 330);   /* Brand-Magenta statt unauffälligem Grün */
    font-size: 52px;              /* deutlich größer (auch am Laptop sichtbar) */
    line-height: 1;
    pointer-events: none;
    /* Weißer Kern + magentafarbenes Leuchten, damit der Pfeil auf hellem wie
       dunklem Hintergrund klar heraussticht. */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 10px oklch(64% 0.27 330 / 0.85));
    animation: home-pointer-bounce 0.85s ease-in-out infinite;
}

@keyframes home-pointer-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    50% { transform: translateX(-50%) translateY(11px) scale(1.18); }
}

/* Lift the bottom nav above the welcome modal backdrop and highlight the
   tab the tutorial is currently pointing at (Home or Profil). */
.bottom-nav.nav-highlight { z-index: 5100; }
.bottom-nav-item.tut-pointed { color: oklch(64% 0.27 330); }
/* Pulsierendes, leuchtendes Icon, damit das Ziel auch am breiten Laptop-Screen
   nicht zu übersehen ist. */
.bottom-nav-item.tut-pointed i {
    color: oklch(64% 0.27 330);
    text-shadow: 0 0 10px oklch(64% 0.27 330 / 0.9), 0 0 20px oklch(64% 0.27 330 / 0.6);
    animation: tut-tab-pulse 1.05s ease-in-out infinite;
}
@keyframes tut-tab-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

.tutorial-highlight {
    outline: 3px solid #4CAF50;
    outline-offset: 2px;
    animation: tutorial-pulse 1.3s ease-in-out infinite;
}

@keyframes tutorial-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
    50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
}

/* ---- Delete / undo activity entries ---- */

/* "Rückgängig" button inside the activity confirmation toast */
.activity-toast-undo {
    margin-left: 12px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    /* The toast itself is pointer-events:none (click-through); re-enable on
       the button so a real mouse click actually hits it. */
    pointer-events: auto;
}

.activity-toast-undo:hover {
    background: rgba(255, 255, 255, 0.38);
}

/* Per-activity edit + delete buttons on the profile (own profile only) */
.activity-entry {
    position: relative;
}

.activity-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
}

.activity-edit,
.activity-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.activity-edit { color: #555; }       /* pencil */
.activity-delete { color: #c0392b; }  /* trash, visible regardless of inherited color */

.activity-edit:hover,
.activity-delete:hover {
    opacity: 1;
}

/* Inline activity editor */
.activity-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.activity-edit-form input {
    padding: 7px 9px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.activity-edit-form .edit-duration { width: 90px; }

.activity-edit-actions {
    display: flex;
    gap: 8px;
}

.activity-edit-actions .edit-save {
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
}

.activity-edit-actions .edit-save:hover { background: #43a047; }

.activity-edit-actions .edit-cancel {
    background: none;
    border: 1px solid #ccc;
    color: #555;
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
}

/* ─── Aktivitäten · Tageskarten (Claude Design Variante C) ────────────────────
   Eine Karte je Tag mit Tages-Header und farbigen Sport-Zeilen. Brand-Tokens
   lokal, damit es auf der (noch hellen) Profilseite eigenständig steht. */
.ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}
@media (max-width: 600px) { .ac-grid { grid-template-columns: 1fr; } }

.ac-daycard {
    border-radius: 18px;
    border: 1px solid #ece8f3;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20, 12, 40, 0.06);
}
.ac-day-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; background: #f7f5fb; border-bottom: 1px solid #ece8f3;
}
.ac-day-date {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px;
    letter-spacing: 0.6px; text-transform: uppercase; color: #231d33; white-space: nowrap;
}
.ac-day-total {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 15px;
    color: oklch(50% 0.13 175); white-space: nowrap;
}
.ac-day-total .ac-unit { font-size: 11px; color: #a39cb4; letter-spacing: 1px; margin-left: 2px; }
.ac-day-body { display: flex; flex-direction: column; }

/* eine Aktivität = .activity-entry (Editor-kompatibel) als Zeile in der Tageskarte */
.ac-day-body .activity-entry {
    position: relative; padding: 11px 14px; margin: 0;
    background: transparent; border: none; border-radius: 0; box-shadow: none;
}
.ac-day-body .activity-entry + .activity-entry { border-top: 1px solid #ece8f3; }
.ac-row { display: flex; align-items: center; gap: 11px; }
.ac-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px;
    background: linear-gradient(150deg, var(--c, #888), color-mix(in oklab, var(--c, #888) 86%, #000));
    box-shadow: 0 4px 11px color-mix(in oklab, var(--c, #888) 40%, transparent);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.34);
}
.ac-day-body .activity-details { flex: 1; min-width: 0; display: block; gap: 0; }
.ac-sport { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 15px; color: #231d33; line-height: 1.15; }
.ac-sub { font-family: 'Barlow', sans-serif; font-size: 12px; color: #6f6880; margin-top: 1px; }
.ac-pts { white-space: nowrap; flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; }
.ac-pts-num { font-weight: 900; font-size: 18px; color: oklch(50% 0.13 175); }
.ac-pts-unit { font-weight: 700; font-size: 10px; letter-spacing: 1px; color: #a39cb4; margin-left: 3px; }
.ac-comment { display: flex; gap: 8px; margin-top: 8px; margin-left: 45px; }
.ac-comment > i { font-size: 12px; margin-top: 2px; flex-shrink: 0; }
.ac-comment > span { font-family: 'Barlow', sans-serif; font-size: 13.5px; line-height: 1.4; color: #231d33; }

/* Edit/Delete inline rechts in der Zeile (überschreibt die absolute Positionierung) */
.ac-row .activity-actions {
    position: static; top: auto; right: auto;
    display: inline-flex; gap: 10px; flex-shrink: 0; margin-left: 2px;
}
.ac-row .activity-actions .activity-edit,
.ac-row .activity-actions .activity-delete { font-size: 13px; padding: 2px; opacity: 0.7; }
.ac-empty { font-family: 'Barlow', sans-serif; color: #6f6880; padding: 6px 2px; }

/* ─── News-Seite · Brand-Redesign (Claude Design) ─────────────────────────────
   Eine weisse Karte auf dem dunklen Splatter-BG: Kopf "What's going on?",
   "Schon gewusst?" (Fact-Cards) und "Highlights" (Foto-/Achievement-Feed nach
   Tag gruppiert). Tokens lokal auf .nw gescoped. */
.nw {
    --nw-ink: #231d33; --nw-muted: #6f6880; --nw-faint: #a39cb4;
    --nw-card: #fff; --nw-tile: #f7f5fb; --nw-line: #ece8f3;
    --nw-magenta: oklch(52% 0.28 330); --nw-magBright: oklch(62% 0.27 330); --nw-turkis: oklch(60% 0.13 195);
    --nw-grad: linear-gradient(150deg, oklch(62% 0.27 330), oklch(60% 0.13 195));
    --nw-head: 'Barlow Condensed', sans-serif; --nw-body: 'Barlow', sans-serif;
}
@media screen and (max-width: 600px) { .nw { margin-top: 0 !important; } }

.nw-card { background: var(--nw-card); border-radius: 26px; padding: 18px 16px 22px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30); }

.nw-pagehead { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.nw-pagehead .nw-bar { width: 8px; height: 26px; border-radius: 4px; background: var(--nw-magBright); flex-shrink: 0; }
.nw-pagehead h1 { margin: 0; font-family: var(--nw-head); font-weight: 900; font-size: 24px; letter-spacing: 0.3px; line-height: 1; color: var(--nw-ink); white-space: nowrap; }

.nw-sechead { display: flex; align-items: center; gap: 10px; margin: 2px 2px 14px; }
.nw-sechead-icon { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--nw-grad); color: #fff; box-shadow: 0 4px 10px rgba(120, 30, 110, 0.28); font-size: 14px; }
.nw-sechead h2 { margin: 0; font-family: var(--nw-head); font-weight: 900; font-size: 19px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--nw-ink); white-space: nowrap; }
.nw-sechead-spacer { flex: 1; }
.nw-sechead-action { font-family: var(--nw-head); font-weight: 800; font-size: 12px; letter-spacing: 0.6px; color: var(--nw-faint); text-transform: uppercase; white-space: nowrap; }

/* Highlights — Feed nach Tag gruppiert */
.nw-daygroup { margin-bottom: 16px; }
.nw-dayhead { display: flex; align-items: center; gap: 10px; margin: 2px 2px 9px; }
.nw-dayhead > span:first-child { font-family: var(--nw-head); font-weight: 800; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--nw-muted); white-space: nowrap; }
.nw-dayline { flex: 1; height: 1px; background: var(--nw-line); }
.nw-items { display: flex; flex-direction: column; gap: 9px; }

.nw-item { background: #fff; border: 1px solid var(--nw-line); border-left: 4px solid var(--nw-magBright); border-radius: 15px; padding: 13px 14px; box-shadow: 0 4px 13px rgba(20, 12, 40, 0.05); }
.nw-item-ach { display: flex; align-items: center; gap: 13px; }
.nw-badge { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #f2eefa; box-shadow: 0 4px 9px rgba(0, 0, 0, 0.18); }
.nw-item-body { flex: 1; min-width: 0; }
.nw-item-head { font-family: var(--nw-body); font-size: 14.5px; line-height: 1.3; color: var(--nw-muted); }
.nw-item-head a { font-weight: 700; color: var(--nw-magenta); text-decoration: none; }
.nw-item-name { font-weight: 700; color: var(--nw-ink); }
.nw-item-desc { font-family: var(--nw-body); font-size: 12.5px; color: var(--nw-faint); margin-top: 3px; line-height: 1.25; }
.nw-item-time { font-family: var(--nw-head); font-weight: 700; font-size: 11.5px; letter-spacing: 0.4px; color: var(--nw-faint); white-space: nowrap; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }

/* Foto-/Video-Item (türkiser Akzent) */
.nw-item-photo { border-left-color: var(--nw-turkis); }
.nw-photo-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.nw-photo-headline { font-family: var(--nw-body); font-size: 14.5px; line-height: 1.3; color: var(--nw-muted); }
.nw-photo-headline a { font-weight: 700; color: var(--nw-magenta); text-decoration: none; }
.nw-photo-headline strong { color: var(--nw-ink); }
.nw-photo-wrap { border-radius: 12px; overflow: hidden; background: #000; line-height: 0; }
.nw-photo-wrap img, .nw-photo-wrap video { width: 100%; display: block; max-height: 440px; object-fit: cover; }
.nw-caption { font-family: var(--nw-body); font-size: 13.5px; color: var(--nw-ink); margin: 9px 2px 0; line-height: 1.35; }
.nw-reactions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.nw-reaction { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--nw-line); background: var(--nw-tile); cursor: pointer; font-family: var(--nw-body); font-size: 13px; transition: border-color 0.15s, background 0.15s; }
.nw-reaction.mine { border-color: color-mix(in oklab, var(--nw-turkis) 50%, #fff); background: color-mix(in oklab, var(--nw-turkis) 12%, #fff); }
.nw-reaction-count { font-weight: 700; color: var(--nw-muted); }

.nw-loading, .nw-empty { font-family: var(--nw-body); color: var(--nw-muted); padding: 10px 2px; line-height: 1.4; }

/* ─── Krankmeldung ──────────────────────────────────────────────────────── */
/* Home: Button ganz unten (dunkle Startseite) */
.sick-log-section { max-width: 460px; margin: 18px auto 8px; text-align: center; padding: 0 16px; }
.sick-today-btn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 18px; border-radius: 14px; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px;
    letter-spacing: 0.5px; text-transform: uppercase;
    background: #1c1728; color: #f0edf8; border: 1px solid rgba(216,166,87,0.5);
    transition: background 0.15s, border-color 0.15s;
}
.sick-today-btn:hover { background: #251d35; }
.sick-today-btn.is-sick { background: rgba(216,166,87,0.16); border-color: #d8a657; color: #f3dcab; }
.sick-log-note { margin: 9px 4px 0; font-size: 12px; line-height: 1.4; color: rgba(240,237,248,0.55); }
.sick-log-note a { color: #d8a657; }

/* Krankmeldung: Bestätigungs-Dialog */
.sick-confirm-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.sick-confirm-modal {
    background: #1c1728; color: #f0edf8;
    border: 1px solid rgba(216,166,87,0.5); border-radius: 16px;
    max-width: 420px; width: 100%; padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.sick-confirm-modal h2 {
    margin: 0 0 12px; font-size: 20px;
    display: flex; align-items: center; gap: 10px; color: #f3dcab;
}
.sick-confirm-modal p { margin: 0 0 10px; line-height: 1.5; font-size: 14px; color: rgba(240,237,248,0.8); }
.sick-confirm-modal a { color: #d8a657; }
.sick-confirm-question { font-weight: 700; color: #f0edf8 !important; }
.sick-confirm-choice { display: flex; gap: 10px; margin-top: 18px; }
.sick-confirm-choice button {
    flex: 1; border-radius: 10px; padding: 11px 0; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px;
    letter-spacing: 0.5px; text-transform: uppercase;
    transition: background 0.15s, border-color 0.15s;
}
#sickConfirmYes { background: #d8a657; color: #1c1728; border: 1px solid #d8a657; }
#sickConfirmYes:hover { background: #e3b76e; }
#sickConfirmNo { background: none; color: #f0edf8; border: 1px solid rgba(240,237,248,0.3); }
#sickConfirmNo:hover { border-color: rgba(240,237,248,0.6); }

/* ─── Profilbild zuschneiden ─────────────────────────────────────────────── */
.crop-overlay {
    position: fixed; inset: 0; z-index: 6000;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.crop-modal {
    background: #1c1728; color: #f0edf8;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
    width: 100%; max-width: 380px; padding: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.crop-modal h2 {
    margin: 0 0 16px; font-size: 19px;
    display: flex; align-items: center; gap: 10px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.crop-modal h2 i { color: var(--accent-color); }
.crop-stage {
    position: relative; width: min(78vw, 300px); aspect-ratio: 1;
    margin: 0 auto; border-radius: 12px; overflow: hidden;
    background: #0d0b12; cursor: grab; touch-action: none; user-select: none;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage img {
    position: absolute; left: 0; top: 0; max-width: none;
    pointer-events: none; -webkit-user-drag: none;
}
/* Kreis-Maske: zeigt den runden Avatar-Ausschnitt, dunkelt die Ecken ab. */
.crop-mask {
    position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
    pointer-events: none;
}
.crop-zoom {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 4px 4px; color: var(--hd-muted, #8a83a0);
}
.crop-zoom input[type="range"] { flex: 1; accent-color: var(--primary-color); }
.crop-actions { display: flex; gap: 10px; margin-top: 18px; }
.crop-actions button {
    flex: 1; border-radius: 12px; padding: 12px 0; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase;
    transition: filter 0.15s, border-color 0.15s;
}
.crop-btn-primary {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    color: #fff; border: none;
}
.crop-btn-primary:hover { filter: brightness(1.08); }
.crop-btn-secondary { background: none; color: #f0edf8; border: 1px solid rgba(240,237,248,0.3); }
.crop-btn-secondary:hover { border-color: rgba(240,237,248,0.6); }

/* Video-Editor (Zoom + Zeit trimmen) */
.ved-overlay {
    position: fixed; inset: 0; z-index: 6000;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ved-modal {
    background: #1c1728; color: #f0edf8;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
    width: 100%; max-width: 420px; padding: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.ved-modal h2 {
    margin: 0 0 16px; font-size: 19px;
    display: flex; align-items: center; gap: 10px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.ved-modal h2 i { color: var(--accent-color); }
.ved-stage {
    position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 46vh;
    margin: 0 auto; border-radius: 12px; overflow: hidden;
    background: #0d0b12; cursor: grab; touch-action: none; user-select: none;
}
.ved-stage:active { cursor: grabbing; }
.ved-stage video {
    width: 100%; height: 100%; object-fit: cover;
    pointer-events: none; display: block;
}
.ved-zoom {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 4px 4px; color: var(--hd-muted, #8a83a0);
}
.ved-zoom input[type="range"] { flex: 1; accent-color: var(--primary-color); }
/* Trim-Leiste */
.ved-trim { margin: 16px 2px 4px; }
.ved-track {
    position: relative; height: 30px; border-radius: 8px;
    background: #0d0b12; border: 1px solid rgba(255,255,255,0.1);
    touch-action: none; user-select: none;
}
.ved-range {
    position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(135deg, rgba(13,148,136,0.45), rgba(185,28,204,0.45));
    border-left: 2px solid var(--accent-color); border-right: 2px solid var(--primary-color);
}
.ved-handle {
    position: absolute; top: 50%; width: 16px; height: 38px;
    transform: translate(-50%, -50%); border-radius: 6px; cursor: ew-resize;
    background: #f0edf8; box-shadow: 0 2px 6px rgba(0,0,0,0.5); touch-action: none;
}
.ved-handle::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 2px; height: 16px; background: #1c1728; transform: translate(-50%, -50%);
    box-shadow: -3px 0 0 #1c1728, 3px 0 0 #1c1728;
}
.ved-playhead {
    position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px;
    background: #fff; pointer-events: none; box-shadow: 0 0 4px rgba(255,255,255,0.8);
}
.ved-times {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; font-family: 'Barlow', sans-serif; font-size: 13px;
    color: var(--hd-muted, #8a83a0); font-variant-numeric: tabular-nums;
}
.ved-preview {
    background: rgba(255,255,255,0.08); color: #f0edf8; border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px; padding: 6px 14px; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.ved-preview:hover { background: rgba(255,255,255,0.14); }
.ved-actions { display: flex; gap: 10px; margin-top: 18px; }
.ved-actions button {
    flex: 1; border-radius: 12px; padding: 12px 0; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase;
    transition: filter 0.15s, border-color 0.15s;
}
.ved-btn-primary { background: linear-gradient(135deg, var(--accent-color), var(--primary-color)); color: #fff; border: none; }
.ved-btn-primary:hover { filter: brightness(1.08); }
.ved-btn-secondary { background: none; color: #f0edf8; border: 1px solid rgba(240,237,248,0.3); }
.ved-btn-secondary:hover { border-color: rgba(240,237,248,0.6); }

/* Profil: inline „wie eine Aktivität" eintragen */
.sick-entry-control { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.sick-entry-icon { color: #c08a2e; font-size: 15px; flex-shrink: 0; }
#sickEntrySelect { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid #e2dcec; background: #fff; font-family: 'Barlow', sans-serif; font-size: 14px; color: #231d33; }
.sick-entry-btn {
    flex-shrink: 0; padding: 8px 14px; border-radius: 10px; cursor: pointer; border: none;
    background: #d8a657; color: #3a2a08; font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; font-size: 14px;
}
.sick-entry-btn:hover { background: #cf9a45; }

/* Krank-Zeile in der Aktivitäten-Tageskarte (helle Karten) */
.ac-icon-sick { background: linear-gradient(150deg, #d8a657, #b5803a) !important; box-shadow: 0 4px 11px rgba(181,128,58,0.4) !important; }
.activity-entry-sick .ac-sport { color: #8a6a1f; }
.ac-daycard-sick .ac-day-head { background: #fbf3e3; }

/* Settings: Liste der Krank-Tage (nutzt die hellen Settings-Variablen) */
.settings-hint { font-size: 13px; line-height: 1.45; color: var(--text-secondary); margin-bottom: 14px; }
.sick-days-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.sick-days-empty { font-size: 13px; color: var(--text-secondary); }
.sick-day-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--card-surface, #f7f5fb); border: 1px solid var(--border-color); font-size: 14px; }
.sick-day-row > span > i { color: #c08a2e; margin-right: 8px; }
.sick-day-remove { background: none; border: none; cursor: pointer; color: #c0392b; padding: 4px 6px; font-size: 14px; border-radius: 6px; }
.sick-day-remove:hover { background: rgba(192,57,43,0.1); }

/* ─── Achievements v3 (Design "Achievements Section v3") ─────────────────── */
.av3-section { padding: 0; }
.av3-card { background: #fff; border-radius: 24px; padding: 16px 15px 18px; box-shadow: 0 14px 36px rgba(0,0,0,0.10); }
.av3-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.av3-accent { width: 7px; height: 24px; border-radius: 4px; background: oklch(62% 0.27 330); flex-shrink: 0; }
.av3-card-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 0.4px; color: #231d33; line-height: 1; }
.av3-visitor-pill { display: inline-flex; align-items: center; gap: 5px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: #6f6880; background: #f7f5fb; border: 1px solid #ece8f3; padding: 4px 9px 4px 7px; border-radius: 999px; white-space: nowrap; }

/* Akkordeon */
.av3-acc { border-top: 1px solid #ece8f3; padding: 13px 0 6px; }
.av3-acc-head { cursor: pointer; display: flex; align-items: center; gap: 9px; }
.av3-acc-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #231d33; }
.av3-acc-count { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; color: #a39cb4; white-space: nowrap; }
.av3-chev { display: inline-flex; transition: transform .25s ease; }
.av3-acc-body { margin-top: 12px; }

/* Grid + Kacheln */
.av3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 2px; padding: 6px 0; justify-items: center; align-items: start; }
.av3-tile { background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; width: 92px; text-align: center; }
.av3-tile-static { cursor: default; }
.av3-tile-spacer { display: block; height: 12.5px; margin-bottom: 9px; }
.av3-series-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: 0.4px; text-transform: uppercase; color: oklch(44% 0.13 330); margin-bottom: 9px; white-space: nowrap; }
.av3-badge-wrap { position: relative; display: inline-flex; transition: transform .15s ease; }
.av3-tile:hover .av3-badge-wrap { transform: translateY(-3px); }
.av3-badge-inner { position: relative; display: inline-flex; }
.av3-img-badge { border-radius: 50%; object-fit: cover; display: block; background: #f7f5fb; box-shadow: 0 0 5px rgba(212,169,58,0.35), 0 5px 11px rgba(0,0,0,0.30); }
.av3-locked { filter: grayscale(1) brightness(0.96); opacity: 0.5; }
.av3-lockov { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(22,15,32,0.28); }
.av3-stack { position: absolute; inset: 0; border-radius: 50%; }
.av3-stack-1 { transform: translate(2.2px,2.2px) scale(0.965); background: #ded7ec; }
.av3-stack-2 { transform: translate(4.5px,4.5px) scale(0.93); background: #ece6f4; box-shadow: 0 3px 6px rgba(20,12,40,0.07); }
.av3-xy { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #ece8f3; border-radius: 999px; padding: 1px 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.3px; box-shadow: 0 2px 5px rgba(20,12,40,0.08); white-space: nowrap; }
.av3-tile-title { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 12px; line-height: 1.15; color: #231d33; max-width: 92px; margin-top: 13px; }
.av3-faint { color: #a39cb4; }
.av3-hidden { border: 2px dashed; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 29px; line-height: 1; }

/* Untertitel + Vorschau */
.av3-sublabel { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; }
.av3-sublabel > span:first-child { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; color: #6f6880; white-space: nowrap; }
.av3-subline { flex: 1; height: 1px; background: #ece8f3; }
.av3-preview { display: flex; gap: 6px; align-items: flex-start; }
.av3-seeall { background: none; border: none; padding: 0; cursor: pointer; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.av3-seeall-circle { width: 78px; height: 78px; border-radius: 50%; background: #f7f5fb; border: 1px solid #ece8f3; display: flex; align-items: center; justify-content: center; }
.av3-seeall > .av3-faint { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 12px; }

/* Modal */
#achModalHost .av3-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(13,11,18,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: av3fadeIn .18s ease; }
.av3-modal { width: 356px; max-width: 100%; background: #fff; border-radius: 26px; padding: 28px 22px 24px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); position: relative; animation: av3pop .22s cubic-bezier(.2,.9,.3,1.3); max-height: 90vh; overflow-y: auto; }
.av3-modal-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: #f7f5fb; color: #6f6880; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; z-index: 3; }
.av3-modal-body, .av3-cd { text-align: center; }
.av3-bigbadge { display: inline-flex; position: relative; }
.av3-modal-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: 0.3px; color: #231d33; line-height: 1; margin: 16px 0 12px; }
.av3-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.3px; text-transform: uppercase; }
.av3-pill-sm { padding: 4px 9px; font-size: 11px; }
.av3-infocard { background: #f7f5fb; border: 1px solid #ece8f3; border-radius: 15px; padding: 13px 15px; text-align: left; margin-top: 16px; }
.av3-infocard-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.9px; text-transform: uppercase; color: #a39cb4; margin-bottom: 5px; }
.av3-infocard-body { font-family: 'Barlow', sans-serif; font-size: 14.5px; line-height: 1.4; color: #231d33; }

/* Lieblingssportarten – Detail-Tabelle im Modal */
.fav-modal-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 23px; letter-spacing: 0.3px; text-transform: uppercase; color: #231d33; display: flex; align-items: center; gap: 9px; margin: 2px 0 16px; }
.fav-modal-title i { color: #D4A93A; }
.av3-modal:has(.fav-modal) { padding-left: 15px; padding-right: 15px; }
.fav-modal-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fav-modal-table th { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: #a39cb4; text-align: left; padding: 0 5px 8px; border-bottom: 1px solid #ece8f3; }
.fav-modal-table td { padding: 10px 5px; border-bottom: 1px solid #f1eef7; font-family: 'Barlow', sans-serif; font-size: 14px; color: #231d33; }
.fav-modal-table tr:last-child td { border-bottom: none; }
.fav-modal-num { text-align: right; white-space: nowrap; }
.fav-modal-points { font-weight: 700; color: oklch(55% 0.24 330); }
.fav-modal-unit { color: #a39cb4; font-size: 11px; }
.fav-modal-sport { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.2px; text-transform: uppercase; line-height: 1.1; }
.fav-modal-rankcell { width: 26px; padding-right: 0; }
.fav-modal-table th:nth-child(1) { width: 26px; }
.fav-modal-table th:nth-child(3) { width: 52px; }
.fav-modal-table th:nth-child(4) { width: 66px; }
.fav-modal-table th:nth-child(5) { width: 50px; }
.fav-modal-medal { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 13px; line-height: 1; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45), 0 2px 5px rgba(0,0,0,0.22); }
.fav-modal-medal.r1 { background: radial-gradient(circle at 36% 30%, #F6E69A 0%, #D4A93A 58%, #A87F26 100%); color: #5a420f; }
.fav-modal-medal.r2 { background: radial-gradient(circle at 36% 30%, #FBFCFF 0%, #BFC2CC 58%, #8C909C 100%); color: #3d4049; }
.fav-modal-medal.r3 { background: radial-gradient(circle at 36% 30%, #E8B57F 0%, #B2733A 58%, #87521F 100%); color: #46290f; }

/* Klickbarer Hero-Kasten */
.hero-favs.is-clickable { cursor: pointer; transition: background 0.15s; }
.hero-favs.is-clickable:hover { background: #14111b; }

/* Serien-Modal (Karussell A · Stepper) */
.av3-series-head { text-align: center; margin-bottom: 14px; }
.av3-series-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: 0.3px; color: #231d33; line-height: 1; }
.av3-series-sub { font-family: 'Barlow', sans-serif; font-size: 13px; color: #6f6880; margin-top: 4px; }
.av3-series-sub b { color: #231d33; }
.av3-stepper { display: flex; align-items: center; justify-content: center; overflow-x: auto; padding: 4px 2px 14px; }
.av3-step { background: none; border: none; padding: 0; cursor: pointer; flex: 0 0 auto; border-radius: 50%; display: inline-flex; }
.av3-step-active { box-shadow: 0 0 0 3px oklch(52% 0.28 330); }
.av3-step-line { height: 2px; width: 16px; flex: 0 0 auto; display: inline-block; }
.av3-step-next { width: 30px; height: 30px; border-radius: 50%; background: #e7e2f0; display: flex; align-items: center; justify-content: center; }
.av3-step-locked { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed rgba(163,156,180,0.6); display: flex; align-items: center; justify-content: center; color: #a39cb4; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 15px; }
.av3-slides-clip { overflow: hidden; }
.av3-slides { display: flex; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.av3-slide { flex: 0 0 100%; min-height: 244px; padding: 0 4px; }
.av3-cd-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 0.3px; color: #231d33; margin: 13px 0 11px; }
.av3-cd-pillwrap { margin-top: 8px; }
.av3-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.av3-navbtn { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #ece8f3; box-shadow: 0 3px 8px rgba(20,12,40,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.av3-navbtn:disabled { background: #f7f5fb; box-shadow: none; opacity: 0.45; cursor: default; }
.av3-nav-count { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.5px; color: #6f6880; }

@keyframes av3fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes av3pop { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }