/* ============================================================================
   MotoMotors – Design System
   Hybrid: heller Editorial-Grundlook + dunkle Premium-Sektionen.
   Akzent: Kupfer/Orange. Fonts: Clash Display (Display) + Plus Jakarta Sans.
   ========================================================================== */

:root {
    /* Farben */
    --bg:           #FDFBF7;
    --bg-2:         #F4F0E8;
    --ink:          #16120D;
    --ink-soft:     #3A332B;
    --muted:        #756B5E;
    --carbon:       #0A0A0B;
    --carbon-2:     #141416;
    --carbon-3:     #1E1E22;
    --accent:       #E8531F;
    --accent-2:     #FF6A33;
    --accent-deep:  #B83C12;
    --gold:         #E9B872;

    /* Linien / Flächen */
    --line:         rgba(22, 18, 13, 0.09);
    --line-strong:  rgba(22, 18, 13, 0.16);
    --line-dark:    rgba(255, 255, 255, 0.10);
    --line-dark-2:  rgba(255, 255, 255, 0.16);
    --glass:        rgba(253, 251, 247, 0.72);

    /* Typografie */
    --font-display: 'Clash Display', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Form */
    --r-sm:  0.7rem;
    --r:     1.1rem;
    --r-lg:  1.75rem;
    --r-xl:  2.25rem;
    --pad:   clamp(1.25rem, 4vw, 2.5rem);

    /* Motion */
    --ease:    cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur:     0.6s;

    /* Schatten – weich & diffus, nie hart */
    --shadow-sm: 0 1px 2px rgba(22, 18, 13, 0.04), 0 6px 18px rgba(22, 18, 13, 0.05);
    --shadow:    0 2px 6px rgba(22, 18, 13, 0.05), 0 18px 50px -12px rgba(22, 18, 13, 0.14);
    --shadow-lg: 0 8px 30px -8px rgba(22, 18, 13, 0.16), 0 40px 90px -30px rgba(22, 18, 13, 0.28);
    --shadow-accent: 0 12px 40px -10px rgba(232, 83, 31, 0.5);

    /* Höhe der mobilen Tab-Leiste (ohne Safe-Area) – Inhalt schließt darunter an */
    --tabbar-h: 3.5rem;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- App-Feel: kein Text-Markieren, kein Drag, kein Tap-Highlight, Default-Cursor --- */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;   /* kein grauer/blauer Touch-Hintergrund auf Mobile */
    -webkit-touch-callout: none;                 /* kein "Bild/Link halten"-Menü auf iOS */
}

/* Standard-Mauszeiger überall (nicht der Text-Cursor) */
html, body { cursor: default; }

/* Links/Buttons bleiben Klick-Pointer */
a, button, label, summary, [role="button"], .btn, .follow-btn, .act, .nav__link, .nav__burger { cursor: pointer; }

/* Bilder, Links & Icons nicht ziehbar */
img, a, svg { -webkit-user-drag: none; -khtml-user-drag: none; user-drag: none; }
img { pointer-events: none; }                    /* Bilder nicht greifbar (Eltern-<a> bleibt klickbar) */

/* Eingabefelder MÜSSEN Auswahl + Text-Cursor behalten, sonst unbenutzbar */
input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: text;
}
select { cursor: pointer; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: scroll;            /* Scrollbar bekommt eine eigene Spur -> überlappt den Inhalt nicht */
    scrollbar-gutter: stable;      /* moderne Browser: Platz für die Leiste fest reservieren */
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: var(--line-strong) transparent;   /* Firefox: sichtbarer Thumb */
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 1rem;
    letter-spacing: 0.01em;          /* Fließtext minimal offener -> besser lesbar */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Der Inhaltsbereich füllt immer mind. die volle Bildschirmhöhe. Bei wenig
   Inhalt rutscht der Footer dadurch unter die Falz (statt mittig zu „schweben").
   padding-bottom = EINHEITLICHER Abstand zum Footer auf ALLEN Seiten (zentrale,
   wiederverwendbare Quelle – einzelne Seiten setzen keinen eigenen Bottom-Abstand). */
.main { min-height: 100vh; min-height: 100dvh; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Vollhöhen-Sonderseite (Chat) verwaltet ihren Abstand selbst. */
.main:has(.messenger-wrap) { padding-bottom: 0; }

/* Typografie-Rhythmus: je größer der Text, desto enger das Letter-Spacing;
   kleiner Text bekommt etwas mehr Luft für bessere Lesbarkeit. */
small, .text-muted, .field__hint, .field__label, .rider-card__handle,
.footer__col a, .footer__base, .table td, .badge {
    letter-spacing: 0.015em;
}

/* WebKit (Chrome/Edge/Safari): sichtbarer Pill-Thumb statt unsichtbarer Overlay-Leiste */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 999px;
    border: 3px solid var(--bg);     /* Abstand zum Rand -> schmaler, edler Thumb */
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Mobile: Scrollbars komplett ausblenden. Touch-Geräte scrollen per Geste –
   eine sichtbare Leiste ist dort nur optisches Rauschen. Gilt für die Seite
   selbst UND für alle inneren Scroll-Container (Modals, Listen, Chat usw.). */
@media (max-width: 768px) {
    html {
        scrollbar-width: none;     /* Firefox */
        scrollbar-gutter: auto;    /* keinen Platz mehr für die Leiste reservieren */
    }
    * {
        scrollbar-width: none;     /* Firefox: auch alle inneren Container */
        -ms-overflow-style: none;  /* altes Edge/IE */
    }
    ::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* WebKit/Blink */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; }
/* Letter-Spacing nach Größe gestaffelt – greift auf ALLEN Seiten, auch bei
   rohen <h1>/<h3>-Tags ohne Utility-Klasse. Je größer, desto enger. */
h1 { letter-spacing: -0.04em; }
h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.02em; }
h4 { letter-spacing: -0.015em; }

/* --- Film-Grain (fixed, GPU-safe) --- */
.grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

/* --- Container --- */
.container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.container--narrow { width: min(560px, 100% - 2.5rem); margin-inline: auto; }
.container--mid { width: min(880px, 100% - 2.5rem); margin-inline: auto; }

/* ============================================================================
   NAVIGATION – Floating Glass Pill
   ========================================================================== */
.nav-wrap {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    pointer-events: none;
}

.nav {
    pointer-events: auto;
    width: min(1100px, 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.55rem 0.6rem 0.55rem 1.4rem;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.nav__brand { display: flex; align-items: center; gap: 0.6rem; }
.nav__mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--carbon);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.12);
}
/* Das M-Logo (orange auf transparent) sitzt auf der dunklen Kachel */
.mm-logo { display: block; width: auto; }
.nav__mark .mm-logo { height: 20px; }
.nav__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
.nav__accent { color: var(--accent); }

.nav__links { display: flex; align-items: center; gap: 0.35rem; }
.nav__link {
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.94rem;
    color: var(--ink-soft);
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.nav__link:hover { background: rgba(22, 18, 13, 0.05); color: var(--ink); }
.nav__link--admin { color: var(--accent-deep); font-weight: 600; }

.nav__burger {
    display: none;
    width: 42px; height: 42px;
    border-radius: 999px;
    background: rgba(22,18,13,0.05);
    position: relative;
}
.nav__burger span {
    position: absolute;
    left: 50%; top: 50%;
    width: 18px; height: 1.6px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.nav__burger span:nth-child(1) { transform: translate(-50%, -4px); }
.nav__burger span:nth-child(2) { transform: translate(-50%, 4px); }
body.menu-open .nav__burger span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem 0.7rem 1.35rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    transition: transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--carbon); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #000; box-shadow: var(--shadow); }

.btn--accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); padding-inline: 1.5rem; }
.btn--accent:hover { background: var(--accent-2); }

.btn--ghost { background: rgba(22,18,13,0.05); color: var(--ink); padding-inline: 1.1rem; }
.btn--ghost:hover { background: rgba(22,18,13,0.1); }
.btn--danger { background: #c0341a; color: #fff; }
.btn--danger:hover { background: var(--accent); }
/* PWA-Install: dezenter Text-Button (Footer dunkel + Hero) */
.install-link {
    display: inline-flex; align-items: center; gap: 0.45rem;
    margin-top: 1.3rem; padding: 0.35rem 0.1rem;
    background: none; color: rgba(255,255,255,0.6);
    font-size: 0.85rem; font-weight: 600; border-radius: 0;
    border-bottom: 1px dashed rgba(255,255,255,0.25);
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.install-link:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.install-link svg { width: 17px; height: 17px; }
.install-link[hidden] { display: none; }
.install-link--hero { margin-top: 0; align-self: center; }

/* Automatisches Install-Banner (dezent, unten – nur wenn installierbar) */
.install-banner {
    position: fixed; left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem);
    transform: translateX(-50%) translateY(160%);
    width: min(440px, calc(100% - 1.5rem)); z-index: 79;
    display: flex; align-items: center; gap: 0.9rem;
    background: var(--carbon-2); color: #fff;
    border: 1px solid var(--line-dark-2); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 0.9rem 1rem;
    opacity: 0; visibility: hidden;
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.install-banner.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
.install-banner__icon img { border-radius: 11px; display: block; }
.install-banner__text { flex: 1; font-size: 0.82rem; color: rgba(255,255,255,0.65); line-height: 1.4; min-width: 0; }
.install-banner__text strong { display: block; color: #fff; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.1rem; }
.install-banner__actions { display: flex; flex-direction: column; gap: 0.4rem; flex: none; }
.install-banner__actions .btn { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.install-banner__actions .btn--ghost { background: rgba(255,255,255,0.08); color: #fff; }
@media (max-width: 460px) {
    .install-banner { flex-wrap: wrap; }
    .install-banner__actions { flex-direction: row; width: 100%; }
    .install-banner__actions .btn { flex: 1; justify-content: center; }
}
/* Install-Banner + Footer-Link nur in der Mobile-View anzeigen */
@media (min-width: 769px) {
    .install-banner { display: none !important; }
    .footer .install-link { display: none !important; }
    /* Push-Nachfrage darf auch in der Desktop-PWA erscheinen */
    .push-banner { display: flex !important; }
}
/* Push-Nachfrage: Glocken-Icon */
.push-banner__bell { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; }
.push-banner__bell svg { width: 22px; height: 22px; }

.btn--light { background: #fff; color: var(--carbon); box-shadow: var(--shadow); }
.btn--light:hover { transform: translateY(-1px) scale(1.005); }

.btn--block { width: 100%; justify-content: center; padding: 0.95rem 1.5rem; }

.btn--lg { font-size: 1.05rem; padding: 0.85rem 0.95rem 0.85rem 1.6rem; }

/* Button-in-Button: Icon im eigenen Kreis */
.btn__icon {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    transition: transform 0.45s var(--ease), background 0.4s var(--ease);
}
.btn--light .btn__icon { background: rgba(22,18,13,0.08); }
.btn__icon svg { width: 15px; height: 15px; }
.btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.06); }
.btn--accent:hover .btn__icon { background: rgba(255,255,255,0.28); }

.btn[disabled], .btn.is-loading { opacity: 0.6; pointer-events: none; }
.btn.is-loading .btn__label::after {
    content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px;
    vertical-align: -2px; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   MOBILE FULLSCREEN MENU
   ========================================================================== */
.mobile-menu {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(10,10,11,0.82);
    -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu__inner { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
.mobile-menu__link {
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 3rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
body.menu-open .mobile-menu__link { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-menu__link:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .mobile-menu__link:nth-child(2) { transition-delay: 0.14s; }
body.menu-open .mobile-menu__link:nth-child(3) { transition-delay: 0.20s; }
body.menu-open .mobile-menu__link:nth-child(4) { transition-delay: 0.26s; }
body.menu-open .mobile-menu__link:nth-child(5) { transition-delay: 0.32s; }
.mobile-menu__link:hover { color: var(--accent-2); }

/* ============================================================================
   TOASTS
   ========================================================================== */
.toasts {
    position: fixed; z-index: 250;   /* immer ganz oben (über „Mehr"-Sheet & Benachrichtigungen) */
    bottom: clamp(1rem, 4vw, 2rem); left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 0.6rem; align-items: center;
    width: max-content; max-width: calc(100% - 2rem);
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    background: var(--carbon);
    color: #fff;
    font-weight: 500; font-size: 0.92rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px); opacity: 0;
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast--error { background: var(--accent-deep); }
.toast--success .toast__dot { background: #3ddc84; }
.toast__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-2); flex: none; }

/* Punkte-Toast (Gamification) */
.toast--points { background: linear-gradient(120deg, #1c1814, #2a2118); font-weight: 700; }
.toast--points .toast__coin { flex: none; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 0.8rem; color: #1c1814; background: linear-gradient(135deg, #ffd76a, #e0a100); box-shadow: 0 0 0 2px rgba(224,161,0,0.25); animation: coin-pop 0.45s var(--ease) both; }
@keyframes coin-pop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

/* ============================================================================
   TYPO / SECTIONS
   ========================================================================== */
.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--ink-soft);
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.eyebrow--light { border-color: var(--line-dark-2); color: rgba(255,255,255,0.75); }

.display { font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 0.96; letter-spacing: -0.045em; }
.h2 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.035em; }
.h3 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.025em; }
.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); max-width: 50ch; letter-spacing: 0.005em; }

.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }

/* ============================================================================
   DOUBLE-BEZEL CARD (Doppelrand / "machined hardware")
   ========================================================================== */
.bezel {
    background: rgba(22, 18, 13, 0.04);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 0.5rem;
}
.bezel__core {
    background: #fff;
    border-radius: calc(var(--r-xl) - 0.5rem);
    box-shadow: var(--shadow), inset 0 1px 1px rgba(255,255,255,0.8);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.bezel--dark { background: rgba(255,255,255,0.04); border-color: var(--line-dark); }
.bezel--dark .bezel__core {
    background: var(--carbon-2);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), var(--shadow-lg);
    color: #fff;
}

/* ============================================================================
   HERO (dunkle Premium-Sektion)
   ========================================================================== */
.hero {
    position: relative;
    background: var(--carbon);
    color: #fff;
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    overflow: hidden;
    padding-top: clamp(8rem, 16vw, 11rem);
    padding-bottom: clamp(3rem, 8vw, 6rem);
}
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(60% 50% at 80% 0%, rgba(232,83,31,0.28), transparent 60%),
        radial-gradient(50% 60% at 10% 100%, rgba(233,184,114,0.12), transparent 55%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.hero__title { color: #fff; margin: 1.5rem 0; }
.hero__title em { font-style: normal; color: var(--accent-2); }
.hero__lead { color: rgba(255,255,255,0.7); margin-bottom: 2rem; }
.hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.hero__meta { display: flex; gap: 2rem; margin-top: 2.75rem; flex-wrap: wrap; }
.hero__stat .num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: #fff; }
.hero__stat .lbl { font-size: 0.82rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.15em; }

/* Hero Visual: gestapelte Rider-Karten (Z-Achse) */
.hero__visual { position: relative; height: 100%; min-height: 360px; }
.stack-card {
    position: absolute;
    width: 70%;
    border-radius: var(--r-lg);
    background: var(--carbon-2);
    border: 1px solid var(--line-dark);
    box-shadow: var(--shadow-lg);
    padding: 1.1rem;
    backface-visibility: hidden;
}
.stack-card__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.stack-card .av { width: 46px; height: 46px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--font-display); flex: none; }
.stack-card .nm { font-weight: 600; color: #fff; font-size: 0.95rem; }
.stack-card .mt { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.stack-card .tag { display: inline-block; font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(232,83,31,0.18); color: var(--accent-2); font-weight: 600; }
.stack-card--1 { top: 4%; right: 0; transform: rotate(3deg); z-index: 3; }
.stack-card--2 { top: 33%; left: 0; transform: rotate(-2deg); z-index: 2; opacity: 0.92; }
.stack-card--3 { top: 62%; right: 6%; transform: rotate(2.5deg); z-index: 1; opacity: 0.8; }

/* ============================================================================
   BENTO / FEATURE GRID
   ========================================================================== */
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.bento__item {
    grid-column: span 4;
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    position: relative;
    overflow: hidden;
}
.bento__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bento__item--wide { grid-column: span 8; }
.bento__item--half { grid-column: span 6; }
.bento__item--dark { background: var(--carbon); color: #fff; border-color: transparent; }
.bento__item--accent { background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: #fff; border-color: transparent; }
.bento__icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 1.25rem;
    background: rgba(22,18,13,0.05);
    color: var(--accent-deep);
}
.bento__item--dark .bento__icon, .bento__item--accent .bento__icon { background: rgba(255,255,255,0.12); color: #fff; }
.bento__icon svg { width: 26px; height: 26px; }
.bento__item h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.bento__item p { color: var(--muted); font-size: 0.97rem; }
.bento__item--dark p, .bento__item--accent p { color: rgba(255,255,255,0.75); }

/* ============================================================================
   FORMS
   ========================================================================== */
.field { margin-bottom: 1.1rem; }
.field__label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.45rem; }
.field__hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; }
/* Live-Status der Benutzername-Verfügbarkeit */
[data-username-status].is-ok { color: #1a7a45; font-weight: 600; }
[data-username-status].is-bad { color: var(--accent-deep); font-weight: 600; }
[data-username-status].is-checking { color: var(--muted); }
.field__error { font-size: 0.82rem; color: var(--accent-deep); margin-top: 0.4rem; min-height: 0; display: none; }
.field.has-error .field__error { display: block; }

.input, .select, .textarea {
    width: 100%;
    padding: 0.85rem 1.05rem;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 2px rgba(22,18,13,0.03);
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    color: var(--ink);
}
.input::placeholder, .textarea::placeholder { color: #a99e8f; }
/* Eingabefelder ohne sichtbare Scrollleiste (Textareas/Inputs). */
.input, .textarea, textarea, input {
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* alte Edge */
}
.input::-webkit-scrollbar,
.textarea::-webkit-scrollbar,
textarea::-webkit-scrollbar,
input::-webkit-scrollbar { width: 0; height: 0; display: none; }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(232,83,31,0.12);
}
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--accent-deep); }
.textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23756B5E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Grid-Items dürfen unter ihre Inhaltsbreite schrumpfen (sonst ragen
   Dropdowns/Inputs über den Container hinaus). */
.field-row > .field { min-width: 0; }
.field { min-width: 0; }

/* --- Mehrstufiges Formular (Register-Wizard) --- */
.wizard__progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.wizard__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wizard__bar-fill { display: block; height: 100%; width: 33%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transition: width 0.35s var(--ease); }
.wizard__count { flex: none; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.wizard__count b { color: var(--ink); }
.wizard__step { display: none; }
.wizard__step.is-active { display: block; animation: wizIn 0.3s var(--ease); }
@keyframes wizIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.wizard__step-title { font-size: 1.25rem; margin: 0 0 0.35rem; }
.wizard__step-sub { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin: 0 0 1.5rem; }
.wizard__nav { display: flex; gap: 0.7rem; align-items: center; margin-top: 1.5rem; }
.wizard__back { flex: none; }
.wizard__back svg { width: 18px; height: 18px; }
.wizard__next, .wizard__submit { flex: 1; justify-content: center; }
/* .btn setzt display:inline-flex und würde das hidden-Attribut überschreiben. */
.wizard__back[hidden], .wizard__next[hidden], .wizard__submit[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wizard__step.is-active { animation: none; } }

/* Segmented control (Fahrstil) */
.segment { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment label {
    padding: 0.55rem 1rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: #fff;
    font-size: 0.9rem; font-weight: 500; cursor: pointer;
    transition: all 0.35s var(--ease); text-transform: capitalize;
}
.segment input:checked + label { background: var(--carbon); color: #fff; border-color: var(--carbon); }
.segment label:hover { border-color: var(--ink-soft); }

/* ---- Custom Select (eigene gestylte Dropdowns) ---- */
.cselect { position: relative; user-select: none; min-width: 0; max-width: 100%; }
/* Geöffnetes Dropdown hebt sich über nachfolgende Felder/Karten (sonst verdeckt). */
.cselect.is-open { z-index: 50; }
.cselect__trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 1.05rem;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 2px rgba(22,18,13,0.03);
    font-size: 1rem; text-align: left; color: var(--ink);
    cursor: pointer;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cselect__trigger:hover { border-color: var(--ink-soft); }
.cselect.is-open .cselect__trigger,
.cdate.is-open .cdate__trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(232,83,31,0.12);
}
.cselect__value {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 0.35rem;
}
.cselect__value.is-placeholder { color: #a99e8f; }
.cselect__caret { flex: none; display: grid; place-items: center; color: var(--muted); transition: transform 0.35s var(--ease); }
.cselect__caret svg { width: 18px; height: 18px; }
.cselect.is-open .cselect__caret,
.cdate.is-open .cdate__caret { transform: rotate(180deg); }

/* Multi-Select: gewählte Werte als Chips im Trigger */
.cselect__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cselect__chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--bg-2); color: var(--ink-soft);
    font-size: 0.82rem; font-weight: 600;
}
.cselect__chip b { font-weight: 600; }
.cselect__chipx {
    display: grid; place-items: center; width: 16px; height: 16px;
    border-radius: 999px; background: rgba(22,18,13,0.12); cursor: pointer;
    font-size: 0.7rem; line-height: 1;
    transition: background 0.25s var(--ease);
}
.cselect__chipx:hover { background: var(--accent); color: #fff; }

.cselect__panel {
    position: absolute; z-index: 30;
    top: calc(100% + 0.4rem); left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.99);
    transform-origin: top center;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s var(--ease);
    z-index: 5;
}
.cselect.is-open .cselect__panel,
.cdate.is-open .cdate__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* Nach oben aufklappen, wenn unten kein Platz ist. */
.cselect--up .cselect__panel {
    top: auto; bottom: calc(100% + 0.4rem);
    transform-origin: bottom center;
    transform: translateY(6px) scale(0.99);
}
.cselect--up.is-open .cselect__panel { transform: translateY(0) scale(1); }

.cselect__searchwrap { position: relative; padding: 0.6rem; border-bottom: 1px solid var(--line); }
.cselect__searchicon { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cselect__searchicon svg { width: 16px; height: 16px; display: block; }
.cselect__search {
    width: 100%; padding: 0.55rem 0.8rem 0.55rem 2.4rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong); background: var(--bg-2);
    font-size: 0.92rem;
}
.cselect__search:focus { outline: none; border-color: var(--accent); }

.cselect__list { list-style: none; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.cselect__opt {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.94rem; cursor: pointer;
    transition: background 0.2s var(--ease);
}
.cselect__opt:hover, .cselect__opt.is-active { background: var(--bg-2); }
.cselect__opt.is-selected { color: var(--accent-deep); font-weight: 600; }
.cselect__check { width: 18px; height: 18px; flex: none; color: var(--accent); opacity: 0; transform: scale(0.6); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.cselect__opt.is-selected .cselect__check { opacity: 1; transform: scale(1); }
.cselect__opt.is-hidden { display: none; }

/* Buchstaben-Gruppenüberschrift (Marke/Modell) */
.cselect__group {
    padding: 0.5rem 0.75rem 0.25rem;
    font-family: var(--font-display); font-weight: 600;
    font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
    position: sticky; top: 0; background: #fff;
}
.cselect__group.is-hidden { display: none; }

.cselect__empty { display: none; padding: 1.25rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
.cselect.is-empty .cselect__empty { display: block; }
.cselect.is-empty .cselect__list { display: none; }

.cselect.is-disabled { opacity: 0.55; pointer-events: none; }

/* ---- Custom Date Picker (eigener Kalender) ---- */
.cdate { position: relative; min-width: 0; max-width: 100%; }
.cdate__value.is-placeholder { color: #a99e8f; }
.cdate__caret svg { width: 18px; height: 18px; }

.cdate__panel { padding: 0.85rem; width: 320px; max-width: calc(100vw - 2.5rem); }
.cdate--up .cdate__panel,
.cselect--up .cdate__panel { top: auto; bottom: calc(100% + 0.4rem); transform-origin: bottom center; }

.cdate__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.cdate__nav {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    transition: background 0.25s var(--ease);
}
.cdate__nav:hover { background: var(--bg-2); }
.cdate__nav svg { width: 18px; height: 18px; }
.cdate__period { display: flex; gap: 0.35rem; }
.cdate__mbtn, .cdate__ybtn {
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    padding: 0.4rem 0.7rem; border-radius: var(--r-sm);
    transition: background 0.25s var(--ease);
}
.cdate__mbtn:hover, .cdate__ybtn:hover { background: var(--bg-2); }

.cdate__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 0.35rem; }
.cdate__weekdays span { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0; }

.cdate__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cdate__day {
    aspect-ratio: 1; display: grid; place-items: center;
    border-radius: 999px; font-size: 0.9rem; color: var(--ink);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cdate__day.is-empty { pointer-events: none; }
.cdate__day:not(.is-empty):not(.is-disabled):hover { background: var(--bg-2); }
.cdate__day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cdate__day.is-selected { background: var(--accent); color: #fff; font-weight: 600; box-shadow: var(--shadow-accent); }
.cdate__day.is-disabled { color: var(--line-strong); pointer-events: none; }

/* Monats- & Jahresauswahl (eingeblendet je nach Modus) */
.cdate__panes { display: none; }
.cdate--months .cdate__weekdays,
.cdate--months .cdate__grid,
.cdate--years .cdate__weekdays,
.cdate--years .cdate__grid { display: none; }
.cdate--months .cdate__panes, .cdate--years .cdate__panes { display: block; }
.cdate--months .cdate__years, .cdate--years .cdate__months { display: none; }
.cdate__months, .cdate__years { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.cdate__mcell, .cdate__ycell {
    padding: 0.7rem 0.4rem; border-radius: var(--r-sm);
    font-size: 0.9rem; font-weight: 500; text-align: center;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cdate__mcell:hover, .cdate__ycell:not(.is-disabled):hover { background: var(--bg-2); }
.cdate__mcell.is-current, .cdate__ycell.is-current { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cdate__mcell.is-selected, .cdate__ycell.is-selected { background: var(--accent); color: #fff; font-weight: 600; }
.cdate__ycell.is-disabled { color: var(--line-strong); pointer-events: none; }

/* Auth card */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 7rem 1.25rem 4rem; }
.auth__card { width: min(480px, 100%); }
.auth__head { text-align: center; margin-bottom: 1.75rem; }
.auth__head h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin-bottom: 0.5rem; }
.auth__switch { text-align: center; margin-top: 1.5rem; color: var(--muted); font-size: 0.92rem; }
.auth__switch a { color: var(--accent-deep); font-weight: 600; }

/* ============================================================================
   RIDER CARDS / DISCOVER
   ========================================================================== */
.discover-head { padding-top: clamp(7rem, 14vw, 9rem); padding-bottom: 1.5rem; }

/* Discover-Filter: per „Filter"-Button ein-/ausklappbares Panel, das als
   Overlay ÜBER dem Content schwebt (schiebt die Liste nicht nach unten). */
.filters { display: block; }
.filters > * { min-width: 0; }
.filters .input, .filters .select { border-color: var(--line); background: var(--bg-2); }
.filters__panel { display: none; }
.filters.is-open .filters__panel {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 0.5rem;
    display: grid; gap: 0.7rem; padding: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.filters__search { grid-column: 1 / -1; }
@media (min-width: 700px) {
    .filters.is-open .filters__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .filters.is-open .filters__panel { grid-template-columns: 1fr; }
}

.rider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 1fr;            /* alle Karten exakt gleich groß */
    gap: 1rem;
    margin-top: 1.5rem;
}

.rider-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 1rem;
    height: 100%;                   /* füllt die Grid-Zelle -> einheitliche Höhe */
}
.rider-card__top { display: flex; align-items: center; gap: 0.85rem; }
.avatar {
    width: 56px; height: 56px; border-radius: 999px; flex: none;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    display: grid; place-items: center; color: #fff; font-weight: 700;
    font-family: var(--font-display); font-size: 1.1rem;
    object-fit: cover; overflow: hidden;
    background-position: center; background-repeat: no-repeat; background-size: cover;
}
.avatar--lg { width: 96px; height: 96px; font-size: 2rem; }
.avatar--xl { width: 128px; height: 128px; font-size: 2.6rem; }
.rider-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rider-card__handle { font-size: 0.85rem; color: var(--muted); }
.rider-card__loc { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--ink-soft); }
.rider-card__loc svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.rider-card__styles { display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow: hidden; min-width: 0; }
.rider-card__styles .chip { flex: none; white-space: nowrap; }
.rider-card__foot { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; padding-top: 0.5rem; }
.chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.74rem; font-weight: 600; text-transform: capitalize;
    padding: 0.3rem 0.7rem; border-radius: 999px;
    background: var(--bg-2); color: var(--ink-soft);
}
.followers { font-size: 0.82rem; color: var(--muted); }
.followers b { color: var(--ink); font-weight: 700; }

/* Follow-Button */
.follow-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border-radius: 999px;
    background: var(--accent); color: #fff; font-weight: 600; font-size: 0.86rem;
    transition: all 0.35s var(--ease);
}
.follow-btn:hover { background: var(--accent-2); }
.follow-btn:active { transform: scale(0.95); }
.follow-btn.is-following { background: var(--bg-2); color: var(--ink-soft); }
.follow-btn.is-following::after { content: 'Folgst du'; }
.follow-btn:not(.is-following)::after { content: 'Folgen'; }
.follow-btn.is-following:hover { background: #fbe3da; color: var(--accent-deep); }
.follow-btn.is-following:hover::after { content: 'Entfolgen'; }

.empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty svg { width: 48px; height: 48px; color: var(--line-strong); margin: 0 auto 1rem; }

.load-more { display: flex; justify-content: center; margin-top: 2rem; }

/* ============================================================================
   PROFILE
   ========================================================================== */
.profile-hero {
    background: var(--carbon); color: #fff;
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    padding-top: clamp(7rem, 14vw, 9rem); padding-bottom: clamp(2.5rem, 5vw, 4rem);
    position: relative; overflow: hidden;
}
.profile-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(50% 60% at 85% -10%, rgba(232,83,31,0.3), transparent 60%); }
.profile-hero__inner { position: relative; display: flex; gap: 2rem; align-items: flex-end; flex-wrap: wrap; }
.profile-hero .avatar { box-shadow: var(--shadow-lg); }
/* Fallback-Avatar (Initialen, kein Bild) ohne Rahmen -> kein dunkler Strich. */
.profile-hero .avatar:not([style]) { border: none; }
.crew-hero .crew-hero__av { border: none; }
/* Crew-Avatar ist schwarz (Crews = Schwarz, Fahrer = Orange) + Akzent-Ring/Schatten. */
.crew-hero .avatar { background: linear-gradient(150deg, var(--carbon-2), var(--carbon)); color: #fff; }
.crew-hero .avatar--xl { box-shadow: 0 0 0 4px rgba(232,83,31,0.18), 0 18px 40px -16px rgba(22,18,13,0.45); }
.profile-hero h1 { color: #fff; font-size: clamp(1.8rem, 5vw, 3rem); overflow-wrap: anywhere; }
.profile-hero__handle { color: rgba(255,255,255,0.55); }
.profile-hero__loc { color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.profile-hero__loc svg { width: 16px; height: 16px; color: var(--accent-2); }
.profile-hero__actions { margin-left: auto; display: flex; gap: 0.6rem; align-items: center; }
.profile-stats { display: flex; gap: 2rem; margin-top: 1.5rem; }
.profile-stats .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: #fff; }
.profile-stats .lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); }

.profile-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.info-row { display: flex; justify-content: space-between; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--muted); font-size: 0.92rem; }
.info-row .v { font-weight: 600; }

/* ============================================================================
   ADMIN
   ========================================================================== */
.admin-wrap { padding-top: clamp(7rem, 14vw, 8.5rem); }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-tabs { display: flex; gap: 0.4rem; }
.admin-tabs a { padding: 0.5rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.admin-tabs a.active { background: var(--carbon); color: #fff; }

/* ----- Admin-Shell mit Sidebar ----- */
.admin-shell { display: flex; align-items: flex-start; gap: 1.5rem; width: min(1180px, 100%); margin: 0 auto; padding: clamp(7rem, 14vw, 8.5rem) clamp(1rem, 4vw, 1.75rem) 0; }
.admin-shell__main { flex: 1 1 auto; min-width: 0; }
/* Die Top-Abstände übernimmt die Shell -> admin-wrap im Shell ohne eigenen Abstand. */
.main--admin .admin-shell .admin-wrap { padding-top: 0 !important; }
.admin-shell__main .container.admin-wrap { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.admin-side-open { display: none; }   /* Hamburger nur auf Mobile / im eingeklappten Zustand */
.admin-shell__backdrop { display: none; }

.admin-side {
    flex: 0 0 232px; width: 232px;
    position: sticky; top: clamp(7rem, 14vw, 8.5rem);
    align-self: flex-start;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-md, 16px); padding: 0.55rem;
    box-shadow: var(--shadow-sm);
}
.admin-side__head { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.55rem 0.65rem; }
.admin-side__title { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.admin-side__collapse { width: 28px; height: 28px; border-radius: 8px; color: var(--muted); display: grid; place-items: center; }
.admin-side__collapse svg { width: 18px; height: 18px; }
.admin-side__collapse:hover { background: var(--bg-2); color: var(--ink); }
.admin-side__nav { display: flex; flex-direction: column; gap: 0.15rem; }
.admin-side__link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 10px; font-weight: 600; font-size: 0.92rem; color: var(--ink-soft); }
.admin-side__link:hover { background: var(--bg-2); color: var(--ink); }
.admin-side__link.is-active { background: var(--carbon); color: #fff; }
.admin-side__link .tab-badge { background: var(--accent); color: #fff; font-size: 0.72rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; display: inline-grid; place-items: center; }
.admin-side__link.is-active .tab-badge { background: #fff; color: var(--carbon); }

/* Hamburger-Button (Mobile/eingeklappt) */
.admin-side-open {
    align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.9rem; margin-bottom: 1.1rem;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); box-shadow: var(--shadow-sm);
}
.admin-side-open svg { width: 20px; height: 20px; }

/* Desktop eingeklappt: Sidebar weg, Hamburger zum Wiederöffnen */
@media (min-width: 769px) {
    .admin-shell.is-collapsed .admin-side { display: none; }
    .admin-shell.is-collapsed .admin-side-open { display: inline-flex; }
}

/* Mobile: Sidebar als Overlay (Off-Canvas) */
@media (max-width: 768px) {
    .admin-shell { display: block; padding-top: 1.25rem; }
    .admin-side-open { display: inline-flex; }
    .admin-side {
        position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw);
        z-index: 130; border-radius: 0; padding: 1.1rem 0.6rem;
        transform: translateX(-100%); transition: transform 0.25s var(--ease);
        overflow-y: auto;
    }
    .admin-shell.is-open .admin-side { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .admin-shell__backdrop {
        position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, 0.45);
        opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease); display: block;
    }
    .admin-shell.is-open .admin-shell__backdrop { opacity: 1; visibility: visible; }
}

/* Marketing-Bereich: kopierbare Textblöcke */
.mkt-block { border: 1px solid var(--line); border-radius: var(--r-md, 14px); overflow: hidden; margin-bottom: 1rem; }
.mkt-block:last-child { margin-bottom: 0; }
.mkt-block__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.6rem 0.55rem 0.9rem; background: var(--bg-2, #f5f3f0); border-bottom: 1px solid var(--line); }
.mkt-block__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.mkt-copy { padding: 0.35rem 0.85rem !important; font-size: 0.82rem !important; flex: 0 0 auto; }
.mkt-code {
    margin: 0; padding: 0.9rem 1rem; background: #fff;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.9rem; line-height: 1.65; color: var(--ink); white-space: pre-wrap; word-break: break-word;
}
.mkt-scenes { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.mkt-scenes li { padding: 0.85rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm, 10px); font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.mkt-scenes__t { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-deep); font-weight: 700; margin-bottom: 0.35rem; }
.mkt-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; color: var(--ink-soft); line-height: 1.6; }

/* Marketing-Tabs (Plattform-Umschalter + Konzept-Unter-Tabs) – Pill-Look wie .profile-switch. */
.mkt-tabs {
    display: flex; gap: 0.25rem; width: max-content; max-width: 100%;
    margin: 0 0 1.5rem; padding: 0.3rem; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line);
}
.mkt-tabs--sub { margin-bottom: 1.25rem; }
.mkt-tabs__btn {
    display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
    padding: 0.5rem 1.25rem; border-radius: 999px;
    font-weight: 600; font-size: 0.9rem; color: var(--muted);
    transition: color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mkt-tabs__btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
@media (max-width: 768px) {
    .mkt-tabs { width: 100%; }
    .mkt-tabs__btn { flex: 1; justify-content: center; }
}
[data-mpanel][hidden] { display: none !important; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.4rem; box-shadow: var(--shadow-sm);
}
.stat-card .num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; line-height: 1; }
.stat-card .lbl { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.stat-card--accent { background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: #fff; border: none; }
.stat-card--accent .lbl { color: rgba(255,255,255,0.8); }
.stat-card--dark { background: var(--carbon); color: #fff; border: none; }
.stat-card--dark .lbl { color: rgba(255,255,255,0.6); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel__head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.panel__head h3 { font-size: 1.15rem; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--line); font-weight: 600; }
.table td { padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--line); font-size: 0.92rem; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr { transition: background 0.3s var(--ease); }
.table tbody tr:hover { background: var(--bg); }
.table .u { display: flex; align-items: center; gap: 0.7rem; }
.table .u .avatar { width: 38px; height: 38px; font-size: 0.85rem; }
.table .u .nm { font-weight: 600; line-height: 1.1; }
.table .u .hd { font-size: 0.8rem; color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; }
.badge--active { background: #e4f7ec; color: #1a7a45; }
.badge--pending { background: #fdf0d8; color: #9a6a16; }
.badge--suspended { background: #fde6e0; color: var(--accent-deep); }
.badge--admin { background: #efe6fb; color: #6b3fa0; }
.badge--user { background: var(--bg-2); color: var(--ink-soft); }
/* Rollen-Badges */
.badge--owner { background: #fbe4d6; color: var(--accent-deep); }
.badge--moderator { background: #e2ecfb; color: #2c52a6; }
.badge--support { background: #e4f3ee; color: #1f7a55; }
.badge--member { background: var(--bg-2); color: var(--ink-soft); }

/* Zähler-Badge an einem Admin-Tab (offene Freigaben) */
.admin-tabs a .tab-badge {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    margin-left: 0.3rem; border-radius: 999px; background: var(--accent); color: #fff;
    font-size: 0.7rem; line-height: 1; vertical-align: middle;
}
.admin-tabs a.active .tab-badge { background: #fff; color: var(--carbon); }

.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.act {
    padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    background: var(--bg-2); color: var(--ink-soft); transition: all 0.3s var(--ease);
}
.act:hover { background: var(--line-strong); }
.act--danger { color: var(--accent-deep); }
.act--danger:hover { background: var(--accent); color: #fff; }
.act--ok { color: #1a7a45; }
.act--ok:hover { background: #1a7a45; color: #fff; }
/* Rollen-Auswahl direkt in der Aktionsspalte */
.act--select { padding: 0.4rem 0.7rem; border: 1px solid var(--line-strong); cursor: pointer; font-family: inherit; }

/* Hinweisleiste für Konten in Prüfung */
.pending-bar {
    display: flex; align-items: center; gap: 0.6rem;
    /* margin-top schiebt die Leiste unter den schwebenden Header (sonst verdeckt). */
    width: min(1200px, 100% - 2.5rem); margin: clamp(5.5rem, 11vw, 6.5rem) auto 1rem;
    padding: 0.8rem 1.1rem; border-radius: var(--r);
    background: #fdf0d8; color: #7a5310; border: 1px solid #f0dcae;
    font-size: 0.9rem; font-weight: 500;
}
/* Ist die Leiste da, übernimmt SIE die Header-Freihaltung -> die Folgeseite
   braucht keinen großen Kopf-Abstand mehr (sonst doppelter Leerraum). */
body:has(.pending-bar) .discover-head,
body:has(.pending-bar) .page,
body:has(.pending-bar) .app-top,
body:has(.pending-bar) .admin-wrap,
body:has(.pending-bar) .messenger-wrap,
body:has(.pending-bar) .feed-page { padding-top: 1.25rem !important; }

/* Profil/Crew (dunkler Hero): Der Hero rendert wie OHNE Banner – voll bis nach
   oben (samt Glow) – und das Banner wird ÜBER seinen oberen Bereich gelegt.
   So sieht es exakt aus wie ohne Banner, nur mit Banner unter dem Header. */
body:has(.profile-hero) .main { position: relative; }
body:has(.profile-hero) .pending-bar {
    position: absolute; z-index: 6; margin: 0;
    top: clamp(5rem, 10vw, 6rem);
    left: 50%; transform: translateX(-50%);
    width: min(1200px, 100% - 2.5rem);
}
body:has(.profile-hero):has(.pending-bar) .profile-hero {
    padding-top: clamp(9rem, 18vw, 11.5rem) !important;
}
.pending-bar__dot { width: 9px; height: 9px; border-radius: 999px; background: #d89a1e; flex: none; box-shadow: 0 0 0 4px rgba(216,154,30,0.18); }

.bars { display: flex; flex-direction: column; gap: 0.7rem; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 0.75rem; font-size: 0.88rem; }
.bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }

/* ============================================================================
   FOOTER
   ========================================================================== */
/* Kein margin-top: .main füllt bereits die volle Höhe, ein Außenabstand würde
   den Footer zusätzlich (~Header-Höhe) nach unten schieben -> unnötiges Scrollen.
   Der innere padding-top sorgt weiterhin für Luft im dunklen Footer. */
.footer { background: var(--carbon); color: #fff; padding-top: clamp(3rem, 6vw, 4.5rem); }
.footer__inner { width: min(1200px, 100% - 2.5rem); margin-inline: auto; display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; padding-bottom: 3rem; }
.footer__logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer__logo .mm-logo { height: 24px; }
.footer__tag { color: rgba(255,255,255,0.55); margin-top: 1rem; font-size: 0.95rem; max-width: 32ch; }
.footer__cols { display: flex; gap: 4rem; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.4); margin-bottom: 0.4rem; }
.footer__col a { color: rgba(255,255,255,0.7); font-size: 0.95rem; transition: color 0.3s var(--ease); }
.footer__col a:hover { color: var(--accent-2); }
.footer__base { border-top: 1px solid var(--line-dark); padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom)); width: min(1200px, 100% - 2.5rem); margin-inline: auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: rgba(255,255,255,0.45); font-size: 0.85rem; }

/* ============================================================================
   MOBILE TAB BAR + App-Style-Elemente (Mobile-Top-Bar, "Mehr"-Sheet, Feed)
   ========================================================================== */
.tabbar { display: none; }
.tabbar__item { position: relative; }
.tabbar__badge {
    position: absolute; top: 0; left: 50%; transform: translateX(4px);
    min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center;
    background: var(--accent); color: #fff; font-size: 0.6rem; font-weight: 700;
    border-radius: 999px; border: 2px solid #fff; line-height: 1;
}
.tabbar__badge[hidden] { display: none; }
/* Aktive Seite: deutlich (Akzentfarbe + dezente Tönung), aber nicht übertrieben.
   pointer-events:none -> man kann die bereits offene Seite nicht erneut öffnen. */
.tabbar__item.is-active { color: var(--accent); background: rgba(232, 83, 31, 0.10); pointer-events: none; }

/* Mobile-Top-Bar (Logo + Nachrichten) – standardmäßig aus, nur Mobile sichtbar */
.mobile-topbar { display: none; }

/* "Mehr"-Bottom-Sheet – standardmäßig unsichtbar (öffnet per JS) */
.more-sheet {
    position: fixed; inset: 0; z-index: 110;   /* höchste Navigations-UI; nur Toasts/Benachrichtigungen darüber */
    background: rgba(10, 10, 11, 0.45);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.more-sheet.is-open { opacity: 1; visibility: visible; }
.more-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 0 0.75rem calc(1rem + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform 0.35s var(--ease);
    max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
}
.more-sheet.is-open .more-sheet__panel { transform: translateY(0); }
/* Griff: voller, höherer Ziehbereich; sichtbarer Balken zentriert via ::before.
   Bleibt oben fixiert (sticky) und scrollt NICHT mit der Liste mit. */
.more-sheet__handle { position: sticky; top: 0; z-index: 1; background: #fff; display: flex; justify-content: center; padding: 0.7rem 0 0.55rem; margin: 0; cursor: grab; touch-action: none; }
.more-sheet__handle::before { content: ''; width: 40px; height: 4px; border-radius: 999px; background: var(--line-strong); transition: width 0.2s var(--ease), background 0.2s var(--ease); }
.more-sheet__handle:active { cursor: grabbing; }
.more-sheet__handle:active::before { width: 56px; background: var(--muted); }
.more-sheet__link { display: block; width: 100%; text-align: left; padding: 0.9rem 1rem; font-size: 1rem; font-weight: 600; border-radius: var(--r-sm); color: var(--ink); }
.more-sheet__link:active { background: var(--bg-2); }
.more-sheet__link--muted { color: var(--muted); font-weight: 500; font-size: 0.92rem; }
.more-sheet__link--danger { color: #c0341a; }
/* „App installieren": hervorgehoben mit Icon. */
.more-sheet__link--install { display: flex; align-items: center; gap: 0.6rem; color: var(--accent); }
.more-sheet__link--install[hidden] { display: none; }   /* display:flex würde das hidden-Attribut sonst überschreiben */
.more-sheet__link--install svg { width: 20px; height: 20px; flex: none; }
.more-sheet__hint { margin: -0.2rem 0 0.4rem; padding: 0.65rem 1rem; font-size: 0.88rem; line-height: 1.45; color: var(--muted); background: var(--bg-2); border-radius: var(--r-sm); }
.more-sheet__hint[hidden] { display: none; }
/* Rechtliches als ausklappbares Sub-Dropdown. */
.more-sheet__legal { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.3rem; }
.more-sheet__legal > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.more-sheet__legal > summary::-webkit-details-marker { display: none; }
.more-sheet__link--legal { color: var(--ink); }
.more-sheet__caret { width: 18px; height: 18px; transition: transform 0.2s var(--ease); color: var(--muted); }
.more-sheet__legal[open] .more-sheet__caret { transform: rotate(180deg); }
.more-sheet__legal-list { padding-left: 0.4rem; }
@media (min-width: 769px) { .more-sheet { display: none; } }

/* Benachrichtigungs-Feed (Vollbild-Seite) */
.feed-page { padding-top: clamp(6.5rem, 13vw, 9rem); }
.feed-page > h1 { margin-bottom: 1.25rem; }
.feed-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.feed-list .notif__item:last-child { border-bottom: none; }
.feed-empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.feed-empty svg { color: var(--line-strong); margin: 0 auto 0.8rem; }

/* Gemeinsame Kopf-Abstand-Klasse (für Seiten mit Inline-Padding ersetzt) */
.app-top { padding-top: clamp(6.5rem, 13vw, 9rem); }

/* ============================================================================
   SCROLL REVEAL
   ========================================================================== */
/* Einblend-Effekt als Keyframe-Animation mit fill-mode "backwards":
   Vor dem Start zeigt das Element den "from"-Zustand (versteckt/verschoben),
   NACH der Animation fällt es auf den Basiszustand (.reveal) zurück – also
   OHNE transform/filter. Das ist entscheidend: ein bleibender transform oder
   filter (auch translateY(0)/blur(0)) erzeugt einen Stacking-Context, der
   Dropdowns (cselect/cdate) einsperrt und sie hinter folgende Blöcke schiebt.
   Mit "backwards" verschwindet dieser Kontext nach dem Einblenden wieder. */
@keyframes mm-reveal {
    from { opacity: 0; transform: translateY(40px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.reveal { opacity: 1; }
.reveal:not(.in) { opacity: 0; }
.reveal.in { animation: mm-reveal 0.9s var(--ease-out) backwards; }
.reveal[data-d="1"] { animation-delay: 0.08s; }
.reveal[data-d="2"] { animation-delay: 0.16s; }
.reveal[data-d="3"] { animation-delay: 0.24s; }
.reveal[data-d="4"] { animation-delay: 0.32s; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__visual { min-height: 320px; margin-top: 1rem; }
    .profile-body { grid-template-columns: 1fr; }
    .bento__item, .bento__item--wide { grid-column: span 6; }
    .filters { grid-template-columns: 1fr 1fr; position: static; }
}

@media (max-width: 768px) {
    .nav__links { display: none; }
    .nav__burger { display: block; }
    .nav { padding-left: 1.1rem; }

    .install-link--hero { margin: 30px auto 0; }
    .hero__meta {
        justify-content: center;
        flex-direction: column;
        width: max-content;
        margin: 70px auto;
        text-align: center;
    }

    .bento { grid-template-columns: 1fr; }
    .bento__item, .bento__item--wide { grid-column: span 1; }

    .field-row { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr; }

    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* .table { min-width: 640px; } */

    /* Alle Aktionen in einer zentrierten, horizontalen Reihe:
       Folgen + Nachricht (bzw. Bearbeiten) nebeneinander, Icons fix daneben. */
    .profile-hero__actions { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: center; }
    .profile-hero__actions .btn,
    .profile-hero__actions .follow-btn { width: auto; flex: 1 1 auto; justify-content: center; }
    .profile-hero__actions .share-btn,
    .profile-hero__actions .profile-report { flex: none; }

    /* Buttons in der Mobile-View grundsätzlich volle Breite */
    .btn { width: 100%; }
    .footer__inner { flex-direction: column; gap: 2rem; }

    /* --- App-Style für eingeloggte Nutzer: kein Header, kein Footer --- */
    body[data-authed="1"] .nav-wrap { display: none; }
    body[data-authed="1"] .footer { display: none; }

    /* Mobile-Top-Bar (auf Discover): Logo + Nachrichten */
    .mobile-topbar {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 30; padding: 0.55rem 1.1rem;
        background: var(--glass);
        -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
        border-bottom: 1px solid var(--line);
    }
    .mobile-topbar__brand .nav__name { font-size: 1.15rem; }
    .mobile-topbar__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; color: var(--ink); }
    .mobile-topbar__icon svg { width: 24px; height: 24px; }

    /* Ohne Nav weniger Kopf-Abstand auf den App-Seiten */
    body[data-authed="1"] .discover-head,
    body[data-authed="1"] .page,
    body[data-authed="1"] .messenger-wrap,
    body[data-authed="1"] .feed-page,
    body[data-authed="1"] .app-top { padding-top: 1.25rem !important; }
    body[data-authed="1"] .profile-hero { padding-top: 1.75rem !important; }
    /* Mobil ist kein schwebender Header da -> die Hinweisleiste braucht oben wenig Abstand. */
    body[data-authed="1"] .pending-bar { margin-top: 1rem; }
    /* Profil/Crew: Banner über dem Hero (absolut) – mobil näher oben, mehr Platz. */
    body[data-authed="1"]:has(.profile-hero) .pending-bar { margin: 0; top: 0.75rem; }
    body[data-authed="1"]:has(.profile-hero):has(.pending-bar) .profile-hero { padding-top: 8rem !important; }

    /* --- Admin-Bereich: Mobile --- */
    /* Nav ist eingeloggt+mobil ausgeblendet -> Kopf-Abstand verkleinern */
    body[data-authed="1"] .admin-wrap { padding-top: 1.25rem !important; }
    .admin-head { flex-direction: column; align-items: stretch; gap: 1rem; margin-bottom: 1.25rem; max-width: 100%; }
    .admin-head > div { min-width: 0; }
    .admin-head h1 { font-size: 1.55rem; }
    /* Tab-Leiste umbricht auf Mobile – so sind alle Tabs sichtbar (kein verstecktes Wischen) */
    .admin-tabs {
        display: flex; flex-wrap: wrap;
        gap: 0.45rem;
        width: 100%; max-width: 100%; min-width: 0;
    }
    .admin-tabs a { flex: 0 0 auto; white-space: nowrap; }
    /* Such-/Filterform im Panel-Kopf: Eingabe volle Breite, Button kompakt darunter */
    .panel__head { padding: 1.1rem 1.2rem; }
    .panel__head form { width: 100%; flex-wrap: wrap; gap: 0.6rem; }
    .panel__head form .input { flex: 1 1 100%; min-width: 0; max-width: none !important; }
    .panel__head form .btn { width: auto; flex: 0 0 auto; }

    /* Bottom Tab-Bar nur eingeloggt + mobil */
    body[data-authed="1"] .tabbar {
        display: flex; align-items: center;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
        padding: 0 0.5rem env(safe-area-inset-bottom);
        background: #fff;                       /* deckend, keine Transparenz */
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 16px rgba(22, 18, 13, 0.05);
        justify-content: space-around;
    }
    .tabbar__item { display: flex; align-items: center; justify-content: center; padding: 0.55rem 1rem; border-radius: 12px; color: var(--muted); background: none; min-width: 0; }
    /* Nur Icons – Textlabels ausblenden (Screenreader nutzen aria-label). */
    .tabbar__item > span:not(.tabbar__badge):not(.tabbar__avatar) { display: none; }
    .tabbar__item svg { width: 22px; height: 22px; }
    /* Profil-Tab: Avatar statt Icon */
    .tabbar__avatar {
        width: 26px; height: 26px; border-radius: 999px; flex: none;
        background-size: cover; background-position: center; background-repeat: no-repeat;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
    }
    .tabbar__avatar--init {
        display: grid; place-items: center; color: #fff; font-weight: 600;
        font-size: 0.9rem; font-family: var(--font-display);
        background-image: linear-gradient(140deg, var(--accent), var(--accent-deep));
    }
    .tabbar__item.is-active .tabbar__avatar { border-color: var(--accent); }
    /* Inhalt endet knapp über der Tab-Leiste – kleiner Abstand, damit der Text
       nicht direkt an der Linie klebt. */
    body[data-authed="1"] .main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1.25rem); }

    /* Scroll-Ride nur auf Desktop – stört Mobile-Tabbar nicht */
    .ride-strip { display: none; }
}

/* ============================================================================
   SCROLL-RIDE: Motorrad fährt beim Scrollen von rechts nach links,
   Räder drehen sich (scroll-gekoppelt). Rein dekorativ, blockiert nichts.
   ========================================================================== */
.ride-strip {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 110px;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}
/* gestrichelte Fahrbahn – neutrales Grau, sichtbar auf hell UND dunkel */
.ride-strip__road {
    position: absolute; left: 0; right: 0; bottom: 16px;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        rgba(140, 140, 140, 0.55) 0 20px, transparent 20px 40px);
    opacity: 1;
    transition: opacity 0.4s var(--ease);
}
/* Ganz oben/unten: Fahrbahn weich ausblenden (JS setzt .is-edge) */
.ride-strip.is-edge .ride-strip__road { opacity: 0; }
/* Schiene, die quer fährt – trägt alle Bikes übereinander gestapelt.
   JS legt translateX hierauf; gewechselt wird nur, welches Bike sichtbar ist.
   Doppel-Halo: heller Schein (sichtbar auf dunklem BG) + feine dunkle Kante
   (Definition auf hellem BG) -> Bike ist auf jedem Hintergrund lesbar. */
.rider-track {
    position: absolute;
    left: 0; bottom: 12px;
    width: 150px; height: 90px;     /* 200:120-Seitenverhältnis des SVG */
    transform: translateX(100vw);   /* Startwert; JS überschreibt beim Scrollen */
    will-change: transform;
    filter:
        drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9))
        drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}
.rider-stage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* nur das aktive Bike ist sichtbar; Wechsel per Crossfade */
.rider-moto { opacity: 0; transition: opacity 0.6s var(--ease); }
.rider-moto.is-active { opacity: 1; }
/* Räder rotieren um ihren eigenen Mittelpunkt (JS setzt --spin) */
.moto-wheel {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(var(--spin, 0deg));
    will-change: transform;
}

/* ============================================================================
   STATISCHE SEITEN: Rechtstexte & Dokumentation (Prosa-Layout)
   ========================================================================== */
.page { padding-top: clamp(6.5rem, 12vw, 9rem); }
.page__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.page__head h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.02; margin-top: 1rem; }
.page__sub { color: var(--muted); margin-top: 0.9rem; max-width: 60ch; }
.page__meta { margin-top: 1.1rem; font-size: 0.82rem; color: var(--muted); }

/* Lesbare Prosa-Spalte */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.8rem); letter-spacing: -0.02em; margin-top: 2.6rem; scroll-margin-top: 6rem; }
.prose h3 { font-size: 1.12rem; font-weight: 600; margin-top: 1.6rem; }
.prose p, .prose li { color: var(--ink-soft); line-height: 1.72; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.prose code { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.1rem 0.4rem; font-size: 0.88em; }

/* Tabellen (z.B. Cookie-Übersicht) */
.prose-table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: 0.92rem; }
.prose-table th, .prose-table td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.prose-table td { color: var(--ink-soft); }
.prose-table code { word-break: break-word; }

/* Mobile: Tabelle in gestapelte Karten umwandeln (keine zu breite 4-Spalten-Tabelle). */
@media (max-width: 640px) {
    .prose-table { font-size: 0.9rem; }
    .prose-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .prose-table tr { display: block; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.4rem 0.9rem; margin-top: 0.9rem; }
    .prose-table td { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
    .prose-table tr td:last-child { border-bottom: none; }
    .prose-table td::before {
        content: attr(data-label); flex: 0 0 34%;
        font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--muted); font-weight: 600;
    }
}

/* Hinweis-Box (z.B. "noch ausfüllen") */
.callout { margin-top: 1.4rem; padding: 1rem 1.15rem; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--bg-2); font-size: 0.92rem; color: var(--ink-soft); }
.callout--warn { border-color: rgba(232,83,31,0.35); background: rgba(232,83,31,0.06); }
.callout strong { display: block; margin-bottom: 0.25rem; }

/* Dokumentation: Sticky-Inhaltsverzeichnis + Inhalt */
.docs-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.docs-toc { position: sticky; top: 6rem; align-self: start; }
.docs-toc__head { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); margin-bottom: 0.8rem; }
.docs-toc a { display: block; padding: 0.32rem 0; color: var(--ink-soft); font-size: 0.92rem; border-left: 2px solid transparent; padding-left: 0.8rem; margin-left: -0.8rem; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.docs-toc a:hover { color: var(--accent-deep); }
.docs-toc a.is-active { color: var(--accent-deep); border-color: var(--accent); font-weight: 600; }
.docs-section { scroll-margin-top: 6rem; }
.docs-section + .docs-section { margin-top: 3rem; }

@media (max-width: 860px) {
    .docs-grid { grid-template-columns: 1fr; }
    .docs-toc { position: static; top: auto; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.15rem; margin-bottom: 2rem; background: var(--bg-2); }
    .docs-toc__wrap { columns: 2; column-gap: 1.5rem; }
}

/* ============================================================================
   COOKIE-BANNER (nur funktional/notwendig – keine Marketing-/Drittanbieter)
   ========================================================================== */
.cookie-banner {
    position: fixed;
    left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem);
    transform: translateX(-50%) translateY(140%);
    width: min(680px, calc(100% - 1.5rem));
    z-index: 80;                       /* über Nav (60), unter nichts Kritischem */
    background: var(--carbon-2);
    color: #fff;
    border: 1px solid var(--line-dark-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.1rem, 3vw, 1.5rem);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.cookie-banner.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
.cookie-banner__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.5rem; }
.cookie-banner__text { color: rgba(255,255,255,0.66); font-size: 0.9rem; line-height: 1.6; }
.cookie-banner__text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.cookie-banner__actions .btn { flex: 0 0 auto; }

@media (max-width: 520px) {
    .cookie-banner__actions { flex-direction: column; }
    .cookie-banner__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   BENACHRICHTIGUNGEN (Glocke + Live-Panel)
   ========================================================================== */
.notif { position: relative; flex: none; }
.notif__bell {
    width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 999px; color: var(--ink); position: relative;
    transition: background 0.25s var(--ease);
}
.notif__bell:hover { background: rgba(22,18,13,0.06); }
.notif__bell svg { width: 21px; height: 21px; }
.notif__badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--accent); color: #fff;
    font-size: 0.66rem; font-weight: 700; line-height: 1;
    border-radius: 999px; border: 2px solid var(--glass);
}
.notif__badge[hidden] { display: none; }

.notif__panel {
    position: absolute; top: calc(100% + 0.6rem); right: 0;
    width: min(360px, calc(100vw - 1.5rem));
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-lg); overflow: hidden; z-index: 240;   /* über „Mehr"-Sheet (110) */
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s var(--ease);
}
.notif.is-open .notif__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.notif__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 0.95rem;
}
.notif__readall { font-size: 0.8rem; color: var(--accent-deep); font-weight: 600; }
.notif__readall:hover { color: var(--accent); }
.notif__list { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.notif__item {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.8rem 1rem; border-bottom: 1px solid var(--line);
    transition: background 0.2s var(--ease); color: inherit;
}
.notif__item:last-child { border-bottom: none; }
.notif__item:hover { background: var(--bg-2); }
.notif__item.is-unread { background: rgba(232,83,31,0.06); }
.notif__avatar {
    width: 38px; height: 38px; border-radius: 999px; flex: none;
    background: var(--carbon-2) center/cover no-repeat; color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; font-family: var(--font-display);
}
.notif__body { min-width: 0; }
.notif__text { font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }
.notif__time { font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; }
.notif__empty { padding: 2.2rem 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* ============================================================================
   MESSENGER (Direkt-Chat)
   ========================================================================== */
.messenger-wrap { padding-top: clamp(6rem, 11vw, 7.5rem); padding-bottom: 1.5rem; }
.messenger {
    display: grid; grid-template-columns: 320px 1fr;
    height: calc(100dvh - 10rem); min-height: 460px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow); overflow: hidden;
}
.messenger__list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.messenger__listhead { padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--line); }
.conv-scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.conv {
    display: flex; gap: 0.75rem; align-items: center; width: 100%; text-align: left;
    padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); transition: background 0.2s var(--ease);
}
.conv:hover, .conv.is-active { background: var(--bg-2); }
.conv__avatar {
    width: 44px; height: 44px; border-radius: 999px; flex: none;
    background: var(--carbon-2) center/cover no-repeat; color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; font-family: var(--font-display);
}
.conv__main { min-width: 0; flex: 1; }
.conv__top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.conv__name { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv__time { font-size: 0.72rem; color: var(--muted); flex: none; }
.conv__preview { font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; }
.conv.has-unread .conv__preview { color: var(--ink-soft); font-weight: 600; }
.conv__badge {
    min-width: 18px; height: 18px; padding: 0 5px; flex: none;
    display: grid; place-items: center; background: var(--accent); color: #fff;
    font-size: 0.7rem; font-weight: 700; border-radius: 999px;
}
.conv-empty { padding: 2rem 1.25rem; color: var(--muted); font-size: 0.9rem; text-align: center; }

.messenger__thread { display: flex; flex-direction: column; min-height: 0; }
.thread__empty { flex: 1; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); padding: 2rem; }
.thread__empty[hidden] { display: none; }   /* sonst überschreibt display:grid das hidden-Attribut */
.thread__empty svg { color: var(--line-strong); margin: 0 auto 0.6rem; }
.thread__empty p { max-width: 28ch; }
.thread__panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.thread__panel[hidden] { display: none; }
.thread__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); flex: none; }
.thread__back { display: none; width: 36px; height: 36px; border-radius: 999px; place-items: center; flex: none; }
.thread__back:hover { background: var(--bg-2); }
.thread__back svg { width: 20px; height: 20px; }
.thread__peer { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.thread__avatar {
    width: 38px; height: 38px; border-radius: 999px; flex: none;
    background: var(--carbon-2) center/cover no-repeat; color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; font-family: var(--font-display);
}
.thread__peername { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread__msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.msg { max-width: 76%; padding: 0.55rem 0.85rem; border-radius: 1.1rem; font-size: 0.92rem; line-height: 1.45; overflow-wrap: anywhere; }
.msg--theirs { align-self: flex-start; background: var(--bg-2); color: var(--ink); border-bottom-left-radius: 0.35rem; }
.msg--mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 0.35rem; }
.msg__meta { display: block; font-size: 0.66rem; opacity: 0.65; margin-top: 0.2rem; }
.msg__time { /* in .msg__meta */ }
.msg__edited[hidden] { display: none; }
/* Inline-Editor für eigene Nachricht */
.msg-edit {
    width: min(60vw, 320px); min-width: 180px; resize: none;
    border: none; border-radius: 0.6rem; padding: 0.4rem 0.55rem;
    font: inherit; font-size: 0.92rem; line-height: 1.4;
    background: #fff; color: var(--ink);
}
.msg-edit:focus { outline: none; }
.msg-edit__bar { display: flex; gap: 0.4rem; justify-content: flex-end; margin-top: 0.45rem; }
.msg-edit__btn { font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.85); color: var(--ink); }
.msg-edit__btn--save { background: var(--carbon); color: #fff; }
/* Gelöschte Nachricht */
.msg--deleted { font-style: italic; opacity: 0.75; }
.msg--deleted.msg--mine { background: rgba(232, 83, 31, 0.45); }
.msg--deleted.msg--theirs { color: var(--muted); }

/* ---------- Eigenes Kontextmenü (Rechtsklick / Long-Press) ---------- */
.ctx-menu {
    position: fixed; z-index: 120; min-width: 190px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-lg); padding: 0.35rem;
    opacity: 0; transform: scale(0.96); transform-origin: top left;
    pointer-events: none; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.ctx-menu.is-open { opacity: 1; transform: scale(1); pointer-events: auto; }
.ctx-menu__item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
    padding: 0.6rem 0.8rem; border-radius: 10px;
    font-size: 0.9rem; font-weight: 500; color: var(--ink);
    transition: background 0.15s var(--ease);
}
.ctx-menu__item:hover { background: var(--bg-2); }
.ctx-menu__item--danger { color: var(--accent-deep); }
.ctx-menu__item svg { width: 18px; height: 18px; flex: none; }

/* Admin: Moderations-Liste (Profilinhalte entfernen) */
.mod-list { display: flex; flex-direction: column; gap: 0.6rem; }
.mod-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
}
.mod-row__main { min-width: 0; }
.mod-row__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.mod-row__val { display: block; font-size: 0.92rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.mod-clear { flex: none; }

/* ============================================================================
   CREWS & RIDEOUTS
   ========================================================================== */
.btn--sm { padding: 0.45rem 0.9rem; font-size: 0.82rem; }

.crews-bar { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.crews-bar .input { flex: 1; min-width: 0; max-width: 360px; }

.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.crew-card {
    display: flex; flex-direction: column; gap: 0.85rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.3rem; box-shadow: var(--shadow-sm);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.crew-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.crew-card__top { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.crew-card__avatar {
    width: 52px; height: 52px; border-radius: 16px; flex: none;
    background: center/cover no-repeat var(--carbon-2);
}
.crew-card__avatar--mono {
    display: grid; place-items: center; color: #fff; font-weight: 700;
    font-family: var(--font-display); font-size: 1.05rem;
    background: linear-gradient(140deg, var(--carbon-2), var(--carbon-3));
}
.crew-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-card__meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-card__desc { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crew-card__loc { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); min-width: 0; }
.crew-card__loc svg { width: 15px; height: 15px; flex: none; }
.crew-card__loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-card__styles { display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow: hidden; min-width: 0; }
.crew-card__style { flex: none; white-space: nowrap; font-size: 0.72rem; font-weight: 600; color: var(--accent-deep); background: rgba(232,83,31,0.1); padding: 0.2rem 0.55rem; border-radius: 999px; }
.crew-card__style--more { color: var(--muted); background: var(--bg-2); }
.crews-feature .crew-card__loc { color: rgba(255,255,255,0.6); }
.crews-feature .crew-card__style { color: #fff; background: rgba(255,255,255,0.14); }

/* Crew-Hero (nutzt .profile-hero) – Boss-Avatar mit „Ändern"-Overlay */
.crew-hero__av { position: relative; overflow: hidden; }
.crew-hero__init { display: grid; place-items: center; width: 100%; height: 100%; }
.crew-hero__avedit {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3rem;
    background: rgba(10,10,11,0.6); color: #fff; font-size: 0.7rem; font-weight: 600;
    text-align: center; opacity: 0; transition: opacity 0.2s var(--ease);
}
.crew-hero__av:hover .crew-hero__avedit { opacity: 1; }

/* Mitgliederliste */
.crew-mlist { display: flex; flex-direction: column; gap: 0.5rem; }
.crew-mrow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.crew-mrow__user { display: flex; align-items: center; gap: 0.65rem; min-width: 0; color: inherit; }
.crew-mrow__av { width: 38px; height: 38px; border-radius: 999px; flex: none; background: center/cover no-repeat var(--carbon-2); }
/* Mitglieder sind Fahrer -> Akzent (orange) statt Schwarz. */
.crew-mrow__av--mono { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem; font-family: var(--font-display); background: linear-gradient(150deg, var(--accent), var(--accent-deep)); }
.crew-mrow__name { display: block; font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-mrow__handle { display: block; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-mrow__role { display: inline-block; font-size: 0.72rem; font-weight: 600; }
.crew-mrow__role--boss { color: var(--accent-deep); }
.crew-mrow__role--officer { color: #8a6d1e; }
.crew-mrow__role--member { color: var(--muted); }

/* Rideouts */
.rideout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.rideout-list { display: flex; flex-direction: column; gap: 0.7rem; }
.rideout-list--past { opacity: 0.6; }
.rideout-row { display: flex; align-items: center; gap: 0.7rem; }
.rideout-row .rideout-card { flex: 1; min-width: 0; }
.rideout-card {
    display: flex; align-items: flex-start; gap: 0.9rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 0.85rem 1rem; box-shadow: var(--shadow-sm);
    scroll-margin-top: 6rem; color: inherit;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
a.rideout-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* kurzes Hervorheben, wenn per Anker angesprungen */
.rideout-card:target { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.rideout-card__desc {
    margin-top: 0.4rem; font-size: 0.84rem; line-height: 1.45; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rideout-card__date {
    flex: none; width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; align-content: center;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep)); color: #fff;
}
.rideout-card__day { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.rideout-card__mon { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; }
.rideout-card__body { min-width: 0; }
.rideout-card__title { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.98rem; }
.rideout-card__titletext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rideout-card__lock { display: inline-block; margin-left: 0.4rem; font-size: 0.66rem; font-weight: 700; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); padding: 0.05rem 0.4rem; border-radius: 999px; vertical-align: middle; }
.rideout-card__meta { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rideout-card__crew { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--accent-deep); }
.rideout-card__crewav { width: 18px; height: 18px; border-radius: 999px; background: center/cover no-repeat var(--carbon-2); }

/* „Meine Crews"-Chips */
.mycrew-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mycrew-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.8rem 0.4rem 0.4rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    font-weight: 600; font-size: 0.88rem; color: var(--ink);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mycrew-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mycrew-chip__av { width: 30px; height: 30px; border-radius: 999px; flex: none; background: center/cover no-repeat var(--carbon-2); }
.mycrew-chip__av--mono { display: grid; place-items: center; color: #fff; font-size: 0.72rem; font-weight: 700; font-family: var(--font-display); }
.mycrew-chip__name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mycrew-chip__role { font-size: 0.7rem; font-weight: 700; color: var(--accent-deep); background: rgba(232,83,31,0.1); padding: 0.1rem 0.45rem; border-radius: 999px; flex: none; }

/* ============================================================================
   STARTSEITE: Feature-Sektionen (Bild des Monats, Crews)
   ========================================================================== */
/* Bild des Monats – Erklärung + Sieger */
.botm__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.botm__steps { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin: 0; }
.botm__steps li { display: flex; align-items: center; gap: 0.7rem; color: var(--ink-soft); font-weight: 500; }
.botm__steps li span { width: 28px; height: 28px; border-radius: 999px; background: rgba(232,83,31,0.12); color: var(--accent-deep); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; flex: none; }
.botm__win { display: block; position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1 / 1; background: var(--carbon-2); }
.botm__win img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.botm__win:hover img { transform: scale(1.05); }
.botm__win:hover { box-shadow: var(--shadow-lg), 0 30px 70px -25px rgba(232,83,31,0.4); }
/* cursor-folgendes Glanzlicht (3D-Feel) */
.botm__win::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    transition: opacity 0.35s var(--ease); mix-blend-mode: soft-light;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.3), transparent 42%);
}
.botm__win:hover::after { opacity: 1; }
/* Tilt-Ziele: weiche 3D-Kanten */
.botm__win, .botm__placeholder { transform-style: preserve-3d; }
.botm__crown { position: absolute; top: 1rem; left: 1rem; background: rgba(10,10,11,0.7); color: #fff; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.botm__by { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5rem; padding: 2rem 1rem 0.9rem; color: #fff; font-size: 0.86rem; font-weight: 600; background: linear-gradient(transparent, rgba(10,10,11,0.82)); }
.botm__byav { width: 28px; height: 28px; border-radius: 999px; flex: none; background: center/cover no-repeat var(--carbon-3); }
.botm__byav--mono { display: grid; place-items: center; font-size: 0.7rem; font-family: var(--font-display); }
.botm__placeholder { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 2rem; color: #fff; background: linear-gradient(150deg, var(--carbon-2), var(--carbon-3)); box-shadow: var(--shadow-lg); }
.botm__placeholder::before { content: ''; position: absolute; inset: 0; background: radial-gradient(65% 50% at 50% 0%, rgba(232,83,31,0.28), transparent 60%); }
.botm__phcrown { position: relative; font-size: 3rem; filter: drop-shadow(0 8px 22px rgba(232,83,31,0.5)); }
.botm__phtext { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; }
.botm__phsub { position: relative; color: rgba(255,255,255,0.6); font-size: 0.9rem; }
@media (max-width: 820px) { .botm__inner { grid-template-columns: 1fr; } }

/* Crews-Feature – dunkles Banner */
.crews-feature { position: relative; overflow: hidden; background: var(--carbon); color: #fff; padding-block: clamp(4rem, 9vw, 7rem); margin-top: clamp(3rem, 7vw, 5rem); }
.crews-feature::before { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 50% at 12% -5%, rgba(232,83,31,0.25), transparent 60%); pointer-events: none; }
.crews-feature .container { position: relative; }
.crews-feature__head { max-width: 620px; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.crews-feature__title { font-size: clamp(2.2rem, 6vw, 4rem); color: #fff; line-height: 1.02; margin: 1rem 0 1.25rem; }
.crews-feature__lead { color: rgba(255,255,255,0.72); font-size: 1.05rem; line-height: 1.7; max-width: 54ch; }
.crews-feature__cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.75rem; }
.crews-feature__subhead { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: #fff; margin: clamp(1.75rem, 4vw, 2.5rem) 0 1rem; }
/* Feste 3er-Reihe auf der Startseite; mobil gestapelt (1 Spalte).
   minmax(0,1fr) -> Spalten schrumpfen mit, statt durch lange Texte den Container zu sprengen. */
.crews-feature .crew-grid, .crews-feature .rideout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) { .crews-feature .crew-grid, .crews-feature .rideout-grid { grid-template-columns: minmax(0, 1fr); } }
.crews-feature__note { margin-top: 1.1rem; font-size: 0.8rem; color: rgba(255,255,255,0.4); }

/* Glasige Karten im dunklen Feature */
.crews-feature .crew-card,
.crews-feature .rideout-card {
    background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.12); color: #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px -20px rgba(0,0,0,0.7);
}
.crews-feature .crew-card:hover { background: rgba(255,255,255,0.1); }
.crews-feature .crew-card__name, .crews-feature .rideout-card__title { color: #fff; }
.crews-feature .crew-card__meta, .crews-feature .rideout-card__meta { color: rgba(255,255,255,0.6); }
.crews-feature .rideout-card__desc { color: rgba(255,255,255,0.72); }
.crews-feature .crew-card__desc { color: rgba(255,255,255,0.72); }
.crews-feature .rideout-card__lock { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }

/* ---------- Horizontaler Slider (Label + Pfeile oben, Track darunter) ---------- */
/* Sterne-Eingabe (Bewertung) */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 0.25rem; }
.star-input input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-input label { cursor: pointer; color: var(--line-strong); line-height: 0; transition: color 0.12s var(--ease); }
.star-input label svg { width: 34px; height: 34px; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--accent); }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Bewertungs-Slider auf der Startseite */
.review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md, 16px); padding: 1.25rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.75rem; height: 100%; }
.review-card__head { display: flex; align-items: center; gap: 0.7rem; }
.review-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-2) center/cover no-repeat; display: grid; place-items: center; font-weight: 700; color: var(--muted); flex: none; }
.review-card__name { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.review-card__user { color: var(--muted); font-size: 0.82rem; }
.review-card__stars { display: inline-flex; gap: 0.1rem; color: var(--accent); }
.review-card__stars svg { width: 18px; height: 18px; }
.review-card__stars .is-empty { color: var(--line-strong); }
.review-card__text { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }

/* Abzeichen / Einladen */
.profile-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.2rem; }
.profile-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.profile-badge > span[aria-hidden] { font-size: 0.95rem; line-height: 1; }
.profile-badge--bronze { background: #f6ede2; border-color: #e7cfae; }
.profile-badge--silver { background: #eef0f2; border-color: #d2d8de; }
.profile-badge--gold   { background: #fbf1d6; border-color: #e9d08f; }

.invite-progress { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin-top: 0.8rem; }
.invite-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.badge-chip { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.badge-chip__icon { font-size: 1.6rem; line-height: 1; flex: none; }
/* Abgeschlossenes Abzeichen: grünes Häkchen statt Icon. */
.badge-chip__icon--done { width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #34c759, #1ea64a); }
.badge-chip__icon--done svg { width: 1.05rem; height: 1.05rem; }
.badge-chip.is-done { border-color: rgba(52,199,89,0.4); }
.badge-chip__body { display: flex; flex-direction: column; min-width: 0; }
.badge-chip__label { font-weight: 700; font-size: 0.9rem; }
.badge-chip__desc { color: var(--muted); font-size: 0.78rem; }
.badge-chip.is-locked { opacity: 0.45; filter: grayscale(1); }
/* Fortschritt zu zählbaren Abzeichen (Einladen/Follower/Punkte …). */
.badge-chip__progress { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.badge-chip__bar { flex: 1; height: 5px; min-width: 36px; border-radius: 999px; background: rgba(22,18,13,0.1); overflow: hidden; }
.badge-chip__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.badge-chip__count { flex: none; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
/* Zählbare, noch nicht erreichte Abzeichen weniger ausgrauen, damit der Fortschritt sichtbar ist. */
.badge-chip.is-locked:has(.badge-chip__progress) { opacity: 1; filter: grayscale(0.4); }
.badge-chip--bronze { border-color: #e7cfae; }
.badge-chip--silver { border-color: #d2d8de; }
.badge-chip--gold   { border-color: #e9d08f; }

.slider { position: relative; }
.slider__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.slider__label { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.slider__nav { display: flex; gap: 0.5rem; flex: none; }
.slider__track {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 0.3rem 0.25rem 0.6rem; scroll-padding-left: 0.25rem;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; flex: 0 0 300px; max-width: 86%; }
.slider__track--rides > * { flex: 0 0 340px; }
.slider__btn {
    width: 42px; height: 42px; border-radius: 999px; flex: none;
    background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.16);
    display: grid; place-items: center; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.slider__btn:hover { background: var(--accent); border-color: var(--accent); }
.slider__btn[hidden] { opacity: 0.3; pointer-events: none; }
.slider__btn svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .slider__nav { display: none; } }

@media (max-width: 920px) { .crews-feature__head { max-width: none; } }

/* ---------- Finale CTA-Band (premium) ---------- */
.cta-band {
    position: relative; overflow: hidden; text-align: center; color: #fff;
    border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
    background: linear-gradient(150deg, var(--carbon), var(--carbon-2));
}
.cta-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 80% at 50% -10%, rgba(232,83,31,0.32), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band__title { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.8rem); color: #fff; line-height: 1.05; margin: 1rem 0 0.8rem; }
.cta-band__lead { color: rgba(255,255,255,0.7); max-width: 50ch; margin: 0 auto 1.75rem; line-height: 1.6; }

/* ---------- Instagram-Promo ---------- */
.footer__social { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; color: rgba(255,255,255,0.7); font-size: 0.9rem; font-weight: 600; transition: color 0.25s var(--ease); }
.footer__social:hover { color: #fff; }
.footer__social svg { width: 20px; height: 20px; }

.ig-promo {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1.1rem 1.4rem; border-radius: var(--r-lg);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.ig-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ig-promo__icon {
    width: 52px; height: 52px; border-radius: 16px; flex: none; display: grid; place-items: center; color: #fff;
    background: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5);
    box-shadow: 0 8px 24px -8px rgba(214,41,118,0.5);
}
.ig-promo__icon svg { width: 26px; height: 26px; }
.ig-promo__text { flex: 1; min-width: 0; }
.ig-promo__handle { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.ig-promo__sub { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 0.1rem; }
.ig-promo__btn { flex: none; padding: 0.6rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: #fff; background: linear-gradient(45deg, #fa7e1e, #d62976 60%, #962fbf); }
@media (max-width: 560px) { .ig-promo { flex-wrap: wrap; } .ig-promo__btn { width: 100%; text-align: center; } }

.ig-chip {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem;
    padding: 0.45rem 0.9rem; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line);
    font-size: 0.88rem; font-weight: 600; color: var(--ink-soft);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ig-chip:hover { border-color: #d62976; color: var(--ink); }
.ig-chip svg { width: 17px; height: 17px; color: #d62976; flex: none; }
.ig-chip strong { color: var(--ink); }
.thread__compose { display: flex; gap: 0.6rem; align-items: flex-end; padding: 0.8rem 1rem; border-top: 1px solid var(--line); flex: none; }
.thread__compose textarea {
    flex: 1; resize: none; max-height: 120px; min-height: 44px;
    border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0.65rem 0.85rem;
    font-size: 0.92rem; line-height: 1.4; background: var(--bg);
}
.thread__compose textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,83,31,0.12); }
.thread__send { width: 44px; height: 44px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; transition: background 0.2s var(--ease); }
.thread__send:hover { background: var(--accent-2); }
.thread__send svg { width: 20px; height: 20px; }
/* Schreiben gesperrt (man folgt dem Konto nicht) */
.thread__panel.no-message .thread__compose textarea { background: var(--bg-2); cursor: not-allowed; }
.thread__panel.no-message .thread__send { opacity: 0.4; pointer-events: none; }

@media (max-width: 760px) {
    /* Seiten-Scrolling auf der Chat-Seite komplett sperren -> der Header kann
       nicht „hochgeschoben" werden, wenn die Tastatur öffnet. Nur die interne
       Nachrichtenliste (.thread__msgs / .conv-scroll) scrollt. */
    html:has(.messenger-wrap), body:has(.messenger-wrap) { overflow: hidden; }
    /* Vollbild-Chat: randlos von Kante zu Kante (wie eine native Chat-App). */
    .messenger-wrap { width: 100%; max-width: 100%; padding-bottom: 0; }
    /* Oben nur der Notch-Abstand (im Browser = 0), sonst randlos. */
    body[data-authed="1"] .messenger-wrap { padding-top: env(safe-area-inset-top) !important; }
    /* Diese Seite verwaltet ihre Höhe selbst -> kein zusätzlicher Tabbar-Abstand
       von .main, sonst entsteht minimaler Überscroll. */
    body[data-authed="1"] .main:has(.messenger-wrap) { padding-bottom: 0; }
    .messenger {
        grid-template-columns: 1fr;
        /* --vvh = sichtbare Viewport-Höhe (per JS, berücksichtigt die Tastatur). */
        height: calc(var(--vvh, 100dvh) - var(--tabbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-radius: 0; border-left: none; border-right: none; border-top: none;
        box-shadow: none;
    }
    .messenger__thread { display: none; }
    .messenger.show-thread .messenger__list { display: none; }
    .messenger.show-thread .messenger__thread { display: flex; }
    .thread__back { display: grid; }

    /* Tippen im Chat: Tabbar weg, Chat nutzt die volle (durch die Tastatur
       verkleinerte) Höhe -> nur das Nachrichtenfenster schrumpft. */
    body.composing[data-authed="1"] .tabbar { display: none; }
    body.composing .messenger {
        height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top));
    }
}

/* Feed (Benachrichtigungen): oben fixer Titelbereich + Switcher, darunter die
   randlose Scrollbox über die volle Breite. Nur Mobile (App-Ansicht). */
@media (max-width: 768px) {
    body[data-authed="1"] .main:has(.feed-page) { padding-bottom: 0; }
    body[data-authed="1"] .feed-page {
        display: flex; flex-direction: column;
        width: 100%; max-width: 100%;
        height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: 0;
    }
    /* Titelbereich + Switcher bleiben oben stehen (eigene Flex-Items). */
    .feed-page > h1 { flex: none; margin: 0; padding: 1rem 1.1rem 0.75rem; }
    .feed-filter { flex: none; margin: 0 1.1rem 0.85rem; }
    .feed-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    /* Scrollbox randlos über die volle Breite. */
    .feed-list {
        flex: 1 1 auto; min-height: 0;
        overflow-y: auto; overscroll-behavior: contain;
        border-left: none; border-right: none; border-bottom: none;
        border-radius: 0; box-shadow: none;
    }
}

/* ============================================================================
   COMMUNITY-VOTINGS „Bild des Monats"
   ========================================================================== */
.winner-card {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow); margin-bottom: 2.5rem;
}
.winner-card__media { position: relative; min-height: 300px; background: var(--carbon-2); }
.winner-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.winner-card__crown {
    position: absolute; top: 1rem; left: 1rem; z-index: 1;
    background: rgba(10,10,11,0.72); color: #fff; padding: 0.4rem 0.85rem;
    border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.winner-card__body { padding: 1.6rem; display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; }
.winner-card__by { display: flex; align-items: center; gap: 0.7rem; }
.winner-card__caption { font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); }
.winner-card__votes { font-weight: 600; color: var(--accent-deep); }
@media (max-width: 680px) { .winner-card { grid-template-columns: 1fr; } .winner-card__media { min-height: 220px; position: relative; aspect-ratio: 16/10; } }

/* „Bild des Monats" – Siege auf dem Profil */
/* Profil-Switcher (Instagram-artig): „Über …" / „Bild des Monats" */
.profile-switch {
    display: flex; gap: 0.25rem; width: max-content; max-width: 100%;
    margin: clamp(1rem, 3vw, 1.75rem) auto 0;
    padding: 0.3rem; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line);
}
.profile-switch__btn {
    display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
    padding: 0.5rem 1.25rem; border-radius: 999px;
    font-weight: 600; font-size: 0.9rem; color: var(--muted);
    transition: color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.profile-switch__btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.profile-switch__count {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; border-radius: 999px;
}
/* Tabs (Profil/Privacy, Fahrer/Crews, Über/Bild) auf Mobile über die ganze Breite. */
@media (max-width: 768px) {
    .profile-switch { width: 100%; }
    .profile-switch__btn { flex: 1; justify-content: center; }

    /* Variante mit vielen/langen Tabs (Profil): nicht quetschen, sondern
       horizontal wischbar – der angeschnittene nächste Tab zeigt, dass es weitergeht. */
    .profile-switch--scroll {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;              /* Firefox */
        -webkit-overflow-scrolling: touch;  /* iOS-Momentum */
    }
    .profile-switch--scroll::-webkit-scrollbar { display: none; }   /* WebKit */
    .profile-switch--scroll .profile-switch__btn { flex: 0 0 auto; }
}
[data-ppanel][hidden] { display: none !important; }

/* Dezenter Hinweis im eigenen „Bild des Monats"-Tab */
.profile-wins__info {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-size: 0.9rem; color: var(--ink-soft);
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
    padding: 0.85rem 1.1rem; margin-bottom: 1.5rem;
}
.profile-wins__info svg { width: 18px; height: 18px; flex: none; color: var(--accent-deep); margin-top: 1px; }
.profile-wins__info a { color: var(--accent-deep); font-weight: 600; white-space: nowrap; }

.profile-wins__head { margin-bottom: 1.25rem; }
.win-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.win-card { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: var(--carbon-2); box-shadow: var(--shadow-sm); }
.win-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--ease); }
.win-card:hover img { transform: scale(1.06); }
.win-card__badge {
    position: absolute; top: 0.6rem; left: 0.6rem;
    background: linear-gradient(135deg, #ffb347, #ff6a2e); color: #fff;
    font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(255, 106, 46, 0.35);
}
.win-card__votes {
    position: absolute; bottom: 0.6rem; left: 0.6rem;
    background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.7rem; font-weight: 600;
    padding: 0.25rem 0.55rem; border-radius: 999px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* „Bild des Monats" – Timeline (Startseite, horizontaler Streifen) */
.win-timeline {
    display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.win-timeline::-webkit-scrollbar { display: none; }
.win-tl-card {
    flex: 0 0 auto; width: 230px; scroll-snap-align: start;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.win-tl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.win-tl-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--carbon-2); }
.win-tl-card__media img { width: 100%; height: 100%; object-fit: cover; }
.win-tl-card__period {
    position: absolute; top: 0.6rem; left: 0.6rem;
    background: linear-gradient(135deg, #ffb347, #ff6a2e); color: #fff;
    font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(255, 106, 46, 0.35);
}
.win-tl-card__foot { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.8rem; }
.win-tl-card__by { display: flex; flex-direction: column; min-width: 0; }
.win-tl-card__name { font-weight: 600; font-size: 0.9rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.vote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.vote-card__media { aspect-ratio: 4 / 3; background: var(--bg-2); }
.vote-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vote-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.9rem; }
.vote-card__by { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.vote-card__name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vote-card__caption { padding: 0 0.9rem 0.9rem; font-size: 0.85rem; color: var(--muted); }
.avatar--sm { width: 28px; height: 28px; font-size: 0.7rem; }
.vote-btn {
    display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
    padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--bg-2);
    color: var(--ink-soft); font-weight: 600; font-size: 0.85rem; transition: all 0.2s var(--ease);
}
.vote-btn svg { width: 17px; height: 17px; }
.vote-btn:hover:not(:disabled) { background: var(--line-strong); }
.vote-btn.is-voted { background: var(--accent); color: #fff; }
.vote-btn.is-voted svg { fill: currentColor; }
.vote-btn:disabled { opacity: 0.45; cursor: default; }

/* ============================================================================
   SYSTEM-BENACHRICHTIGUNGEN (Kategorie) + FEED-FILTER + DATEI-PICKER
   ========================================================================== */
.notif__avatar--system {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
    color: #fff;
}
.notif__avatar--system svg { width: 20px; height: 20px; }
.notif__cat {
    display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--accent-deep); background: rgba(232, 83, 31, 0.12);
    padding: 0.1rem 0.45rem; border-radius: 6px; margin-bottom: 0.25rem;
}

.feed-filter { display: inline-flex; gap: 0.3rem; padding: 0.25rem; background: var(--bg-2); border-radius: 999px; margin-bottom: 1.25rem; }
.feed-filter__btn { padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--muted); transition: all 0.2s var(--ease); }
.feed-filter__btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* Datei-Picker / Dropzone */
.filepicker {
    display: block; position: relative; cursor: pointer;
    border: 1.5px dashed var(--line-strong); border-radius: var(--r);
    background: var(--bg-2); transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.filepicker:hover, .filepicker.is-drag { border-color: var(--accent); background: rgba(232, 83, 31, 0.05); }
.filepicker__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: 1.75rem 1rem; }
.filepicker__empty svg { width: 30px; height: 30px; color: var(--accent-deep); margin-bottom: 0.2rem; }
.filepicker__title { font-weight: 600; color: var(--ink); }
.filepicker__hint { font-size: 0.82rem; color: var(--muted); }
.filepicker__preview { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem; }
/* Vorschau standardmäßig wirklich verstecken (Klasse überstimmte sonst [hidden]) */
.filepicker__preview[hidden] { display: none; }
.filepicker__preview img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); flex: none; background: var(--bg); }
.filepicker__name { font-size: 0.9rem; color: var(--ink-soft); word-break: break-all; }
.filepicker.has-file { border-style: solid; border-color: var(--accent); background: #fff; }

/* ---------- Bild-Cropper (1:1) ---------- */
.cropper {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center; padding: 1rem;
    background: rgba(10, 8, 6, 0.6);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cropper__panel {
    background: #fff; border-radius: var(--r-lg); width: min(420px, 100%);
    max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 30px 80px rgba(10, 8, 6, 0.45);
}
.cropper__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.cropper__head h3 { font-size: 1.1rem; }
.cropper__close { font-size: 1.7rem; line-height: 1; color: var(--muted); width: 2rem; height: 2rem; display: grid; place-items: center; }
.cropper__close:hover { color: var(--ink); }
.cropper__body { padding: 1.1rem 1.25rem 0; }
.cropper__stage {
    position: relative; margin: 0 auto; width: min(340px, 100%); aspect-ratio: 1 / 1;
    border-radius: var(--r); overflow: hidden; background: #0a0a0b;
    touch-action: none; cursor: grab; user-select: none;
}
.cropper__stage.is-grabbing { cursor: grabbing; }
.cropper__canvas { display: block; width: 100%; height: 100%; }
.cropper__grid {
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 33.333% 33.333%;
}
.cropper__hint { text-align: center; font-size: 0.8rem; color: var(--muted); margin-top: 0.7rem; }
.cropper__controls { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem 0; }
.cropper__zoombtn {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 999px; color: var(--ink-soft); background: var(--bg-2);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cropper__zoombtn:hover { background: var(--line-strong); color: var(--ink); }
.cropper__zoombtn:active { background: var(--accent); color: #fff; }
.cropper__zoombtn svg { width: 20px; height: 20px; }
.cropper__zoom { flex: 1; min-width: 0; height: 38px; accent-color: var(--accent); }
.cropper__actions { display: flex; gap: 0.6rem; padding: 1rem 1.25rem 1.25rem; }
.cropper__actions .btn { flex: 1; }

/* ============================================================================
   MODAL (Listen, Melden) + Melden-Buttons + Privatsphäre-Toggles
   ========================================================================== */
.modal {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem;
    background: rgba(10, 10, 11, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
    width: min(440px, 100%); max-height: 82vh; display: flex; flex-direction: column;
    background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(0.98); transition: transform 0.25s var(--ease); overflow: hidden;
}
.modal.is-open .modal__panel { transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); flex: none; }
.modal__head h3 { font-size: 1.1rem; }
.modal__close { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); font-size: 1.5rem; line-height: 1; flex: none; }
.modal__close:hover { background: var(--bg-2); color: var(--ink); }
.modal__body { padding: 0.75rem 1.25rem 1.25rem; overflow-y: auto; overscroll-behavior: contain; }

.ulist__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.ulist__row:last-child { border-bottom: none; }
.ulist__av { width: 42px; height: 42px; border-radius: 999px; flex: none; background: var(--carbon-2) center/cover no-repeat; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; font-family: var(--font-display); }
.ulist__main { min-width: 0; flex: 1; }
.ulist__name { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.ulist__loc { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ulist__empty { padding: 1.75rem 0; text-align: center; color: var(--muted); }

/* Klickbare Profil-Statistik */
.profile-stat { display: block; text-align: left; background: none; padding: 0; }
.profile-stat .num, .profile-stat .lbl { display: block; }
.profile-stat:hover .num { text-decoration: underline; text-underline-offset: 3px; }

/* Melden-Buttons (dezent) */
.profile-report { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: rgba(255,255,255,0.55); border: 1px solid var(--line-dark-2); flex: none; transition: all 0.2s var(--ease); }
.profile-report:hover { color: #fff; background: rgba(255,255,255,0.08); }
.profile-report svg { width: 18px; height: 18px; }
.vote-card { position: relative; }
.vote-card__media { position: relative; }
.vote-card__link { display: block; width: 100%; height: 100%; }
/* Aktions-Icons oben rechts (Teilen, Melden) – über dem Bild-Link */
.vote-card__tools { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; display: flex; gap: 0.35rem; }
.vote-card__icon {
    width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
    background: rgba(10, 10, 11, 0.5); color: #fff; opacity: 0.9;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
}
.vote-card__icon:hover { opacity: 1; background: rgba(10, 10, 11, 0.72); }
.vote-card__icon svg { width: 15px; height: 15px; }
.vote-card__report:hover { background: #c0341a; }
/* Vote als Overlay unten rechts (sichtbar in jeder Kartengröße) */
.vote-card__vote { position: absolute; bottom: 0.5rem; right: 0.5rem; z-index: 2; }
.vote-btn.vote-card__vote { background: #fff; box-shadow: 0 4px 14px rgba(10, 10, 11, 0.2); }
.vote-btn.vote-card__vote:hover:not(:disabled) { background: #fff; }
.vote-btn.vote-card__vote.is-voted { background: var(--accent); color: #fff; }
.vote-pending.vote-card__vote { background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px rgba(10, 10, 11, 0.15); }

/* Mobile: 3 Karten pro Reihe (quadratisch), Details auf der Detailseite */
@media (max-width: 560px) {
    .vote-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .vote-card { border-radius: var(--r-sm); }
    .vote-card__media { aspect-ratio: 1 / 1; }
    .vote-card__foot, .vote-card__caption { display: none; }
    .vote-card__tools { top: 0.3rem; right: 0.3rem; gap: 0.25rem; }
    .vote-card__icon { width: 26px; height: 26px; }
    .vote-card__icon svg { width: 12px; height: 12px; }
    .vote-card__vote { bottom: 0.3rem; right: 0.3rem; }
    .vote-btn.vote-card__vote { padding: 0.24rem 0.45rem; font-size: 0.72rem; gap: 0.2rem; }
    .vote-btn.vote-card__vote svg { width: 13px; height: 13px; }
    .vote-pending.vote-card__vote { font-size: 0.62rem; padding: 0.2rem 0.42rem; }
}

/* Privatsphäre-Toggle-Schalter */
.toggle { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong); flex: none; transition: background 0.2s var(--ease); }
.toggle__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease); }
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__track { box-shadow: 0 0 0 3px rgba(232, 83, 31, 0.25); }
.toggle__text { font-size: 0.92rem; color: var(--ink-soft); }

/* „Warum folgen?"-Gründe – dezent als Text in der „Über"-Karte */
.profile-body--single { grid-template-columns: 1fr; }
.follow-hints { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.follow-hints__label { display: block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 0.7rem; }
.follow-hint { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--ink-soft); }
.follow-hint + .follow-hint { margin-top: 0.45rem; }
.follow-hint svg { width: 15px; height: 15px; flex: none; color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .reveal, .reveal:not(.in) { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
    .ride-strip { display: none; }   /* keine scroll-getriebene Bewegung */
}

/* --- Wartungsseite (eigenständig, dunkel) --- */
/* Eigene <html>-Klasse hebt das globale overflow-y:scroll auf und sperrt die
   Höhe auf die echte Viewport-Höhe -> kein minimales Scrollen auf Mobile. */
html.maintenance-html {
    overflow: hidden;
    height: 100%;
    scrollbar-gutter: auto;
}
html.maintenance-html body { overflow: hidden; }
.maintenance-body {
    height: 100vh;
    height: 100dvh;
    background: var(--carbon);
    color: rgba(255, 255, 255, 0.92);
    display: flex;
}
.maintenance-body .grain { opacity: 0.06; mix-blend-mode: overlay; }
.maintenance {
    position: relative;
    flex: 1;
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
    text-align: center;
    overflow: hidden;
}
.maintenance::before {
    content: '';
    position: absolute;
    top: -25%;
    left: 50%;
    width: min(900px, 120vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(232, 83, 31, 0.22), transparent 62%);
    pointer-events: none;
}
.maintenance__inner {
    position: relative;
    width: min(560px, 100%);
    animation: mm-rise 0.8s var(--ease-out) both;
}
@keyframes mm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.maintenance__mark {
    display: grid;
    place-items: center;
    width: clamp(140px, 32vw, 190px);
    height: clamp(140px, 32vw, 190px);
    margin: 0 auto 2rem;
    filter: drop-shadow(0 24px 70px rgba(232, 83, 31, 0.45));
}
.maintenance__mark .mm-logo {
    width: clamp(120px, 28vw, 168px);
    height: auto;
}
.maintenance__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 1rem;
}
.maintenance__text {
    font-size: clamp(1rem, 2.4vw, 1.12rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.66);
    max-width: 46ch;
    margin: 0 auto;
}
.maintenance__legal {
    margin-top: 2.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.34);
}
.maintenance__legal a {
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.25s var(--ease);
}
.maintenance__legal a:hover { color: var(--accent-2); }

/* ============================================================================
   Sprach-Switcher – Dropdown (<details>), skaliert für viele Sprachen
   ========================================================================== */
.lang-switch { position: relative; display: inline-block; }
.lang-switch > summary { list-style: none; }
.lang-switch > summary::-webkit-details-marker { display: none; }

.lang-switch__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(22, 18, 13, 0.03);
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lang-switch__trigger:hover { color: var(--ink); border-color: var(--line-strong); }
.lang-switch__globe { width: 16px; height: 16px; opacity: 0.8; }
.lang-switch__caret { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.lang-switch[open] .lang-switch__caret { transform: rotate(180deg); }

.lang-switch__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 168px;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 14px);
    box-shadow: 0 18px 40px -12px rgba(22, 18, 13, 0.28);
    animation: langPop 0.16s var(--ease);
}
@keyframes langPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.lang-switch__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--r-xs, 10px);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switch__opt:hover { background: var(--bg-2); color: var(--ink); }
.lang-switch__opt.is-active { color: var(--accent); font-weight: 600; }
.lang-switch__check { width: 16px; height: 16px; opacity: 0; flex: none; }
.lang-switch__opt.is-active .lang-switch__check { opacity: 1; }

/* Variante in Mobile-Menü / „Mehr"-Sheet (größerer Touch-Bereich) */
.lang-switch--menu .lang-switch__trigger { padding: 0.6rem 0.9rem; font-size: 1rem; gap: 0.45rem; }
.lang-switch--menu .lang-switch__menu { min-width: 200px; }
.lang-switch--menu .lang-switch__opt { padding: 0.7rem 0.8rem; font-size: 1rem; }

/* Mobile-Menü: dunkler Vollbild-Hintergrund -> heller Trigger, das Panel bleibt hell */
.mobile-menu .lang-switch--menu { margin-top: 1.4rem; }
.mobile-menu .lang-switch--menu .lang-switch__trigger {
    border-color: var(--line-dark-2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.mobile-menu .lang-switch--menu .lang-switch__menu { left: 50%; right: auto; transform: translateX(-50%); top: calc(100% + 10px); }
@keyframes langPopCenter { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mobile-menu .lang-switch--menu .lang-switch__menu { animation: langPopCenter 0.16s var(--ease); }

/* „Mehr"-Sheet (heller Hintergrund) */
.more-sheet__lang { padding: 0.35rem 1rem 0.2rem; }
.more-sheet__lang .lang-switch { display: block; }
.more-sheet__lang .lang-switch__trigger { width: 100%; justify-content: flex-start; }
.more-sheet__lang .lang-switch__caret { margin-left: auto; }
.more-sheet__lang .lang-switch__menu { left: 0; right: auto; min-width: 100%; }

/* ============================================================================
   Desktop-Header: Action-Cluster (Icons), Profil-Dropdown
   ========================================================================== */
.nav__actions { display: flex; align-items: center; gap: 0.4rem; }

/* Icon-Button (Nachrichten) – im Stil der Glocke */
.nav__icon {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--ink-soft);
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__icon:hover { background: rgba(22, 18, 13, 0.06); color: var(--ink); }
.nav__icon svg { width: 21px; height: 21px; }

/* Profil-Dropdown */
.nav__profile { position: relative; flex: none; }
.nav__profile > summary { list-style: none; }
.nav__profile > summary::-webkit-details-marker { display: none; }
.nav__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
    user-select: none;
    transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav__avatar:hover { border-color: var(--line-strong); }
.nav__profile[open] .nav__avatar { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 83, 31, 0.18); }
.nav__avatar-img { width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; }

.nav__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 224px;
    max-width: 280px;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 14px);
    box-shadow: 0 18px 40px -12px rgba(22, 18, 13, 0.28);
    animation: langPop 0.16s var(--ease);
}
.nav__menu-head {
    padding: 0.55rem 0.7rem 0.6rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--line);
}
.nav__menu-name { display: block; font-weight: 600; color: var(--ink); font-size: 0.95rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__menu-handle { display: block; color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-radius: var(--r-xs, 10px);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__menu-item:hover { background: var(--bg-2); color: var(--ink); }
.nav__menu-item--admin { color: var(--accent-deep); font-weight: 600; }
.nav__menu-item--danger { color: #c0341a; }

/* Action-Cluster gehört zur Desktop-Leiste; auf Mobile übernimmt der Burger */
@media (max-width: 768px) { .nav__actions { display: none; } }

/* ============================================================================
   Teilen-Button (Web-Share / Link kopieren)
   ========================================================================== */
.share-btn {
    width: 40px; height: 40px; border-radius: 999px;
    display: inline-grid; place-items: center; flex: none;
    color: var(--ink-soft); border: 1px solid var(--line); background: transparent;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.share-btn:hover { color: var(--ink); background: rgba(22, 18, 13, 0.05); border-color: var(--line-strong); }
.share-btn svg { width: 18px; height: 18px; }

/* Pill-Variante: Symbol + Text */
.share-btn--pill {
    width: auto; height: auto; padding: 0.55rem 0.95rem; gap: 0.45rem;
    grid-auto-flow: column; align-items: center; font-size: 0.9rem; font-weight: 600;
}
/* Voll-Breite (z.B. Einladungslink): Teilen stretcht, Kopieren-Icon daneben. */
.share-btn--block { flex: 1; justify-content: center; }
.invite-actions { display: flex; gap: 0.6rem; margin-top: 0.6rem; }

/* Bild-Bearbeiten-Block (Profil/Crew/Voting): Bild + Titel/Subtext nebeneinander,
   Aktions-Buttons darunter. */
.avatar-edit { display: flex; flex-direction: column; gap: 1.25rem; }
.avatar-edit__head { display: flex; align-items: center; gap: 1.25rem; }
.avatar-edit__text { min-width: 0; }
.avatar-edit__text h3 { margin-bottom: 0.25rem; }
.avatar-edit__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.avatar-edit__actions > * { flex: 1 1 auto; }
/* Crew-Avatar ist schwarz (auch im Bearbeiten-Block). */
.crew-avatar-black { background: linear-gradient(150deg, var(--carbon-2), var(--carbon)); color: #fff; }

/* Im dunklen Profil-/Crew-Hero: hell auf dunkel (wie .profile-report) */
.profile-hero__actions .share-btn { color: rgba(255, 255, 255, 0.55); border-color: var(--line-dark-2); }
.profile-hero__actions .share-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: var(--line-dark-2); }

/* Helle Teilen-/Einladen-Variante für dunkle Flächen (z.B. CTA-Band) */
.share-btn--light { color: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.28); }
.share-btn--light:hover { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); }

/* CTA-Band: Buttons nebeneinander, zentriert */
.cta-band__actions { display: flex; gap: 0.8rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }

/* ============================================================================
   Discover: einheitliche Rider-Cards (kein Hover-Effekt)
   ========================================================================== */

/* Folgen-Button über die volle Kartenbreite */
.rider-card__foot { justify-content: stretch; }
.rider-card__foot .follow-btn { width: 100%; justify-content: center; padding-block: 0.62rem; }

/* Region mit etwas mehr Gewicht, Chips minimal größer */
.rider-card__loc { font-weight: 500; }
.rider-card__styles .chip { font-size: 0.76rem; }

/* Mobile: Karten untereinander (eine pro Reihe) */
@media (max-width: 560px) {
    .rider-grid { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 1rem; }
    .rider-card { padding: 1rem; gap: 0.7rem; border-radius: var(--r); }
    .rider-card__top { flex-direction: row; align-items: center; gap: 0.7rem; }
    .rider-card .avatar { width: 46px; height: 46px; font-size: 0.95rem; }
    .rider-card__name { font-size: 1rem; }
    .rider-card__loc { font-size: 0.78rem; }
    .rider-card__styles .chip { font-size: 0.72rem; padding: 0.25rem 0.55rem; }
    .rider-card__foot .follow-btn { padding-block: 0.5rem; font-size: 0.8rem; }
}

/* ============================================================================
   Discover-Toolbar: Tabs (Übersicht/Fahrer/Crews) + „Filter"-Button
   ========================================================================== */
/* Klebende, randlose Discover-Kopfleiste (Tabs + Filter), bleibt beim Scrollen oben. */
.discover-headbar {
    position: sticky; top: 0; z-index: 30;
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--line);
}
.discover-headbar .disc-toolbar {
    width: min(1200px, 100% - 2.5rem); margin-inline: auto; padding-block: 0.8rem;
}
#crews-page .discover-headbar { margin-bottom: 1.25rem; }   /* Abstand zur ersten Sektion */
.crews-actions { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }

/* Crew-Detailseite: Schließen-Button (zurück zu /crews) */
.crew-close {
    position: absolute; z-index: 35;
    top: clamp(0.9rem, 2vw, 1.4rem); right: clamp(0.9rem, 2vw, 1.4rem);
    width: 40px; height: 40px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--glass); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--ink); box-shadow: var(--shadow-sm);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.crew-close:hover { border-color: var(--accent); color: var(--accent-deep); }
.crew-close svg { width: 20px; height: 20px; }

/* Crew-Detailseite: „Über die Crew"-Detailliste */
/* Crew-Verwaltung: CTA-Karte (Detailseite) + Gefahrenzone */
.crew-manage-cta { display: block; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.crew-manage-cta:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.crew-danger { border-color: rgba(192,52,26,0.35); }

/* Crews-Chips auf dem Profil (im „Über"-Bereich) */
.profile-crews { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.profile-crew { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem 0.3rem 0.35rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-weight: 600; font-size: 0.85rem; color: var(--ink); transition: border-color 0.2s var(--ease); }
.profile-crew:hover { border-color: var(--accent); }
.profile-crew__av { width: 24px; height: 24px; border-radius: 999px; flex: none; background: center/cover no-repeat var(--carbon-2); }
.profile-crew__av--mono { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.62rem; font-family: var(--font-display); background: linear-gradient(150deg, var(--carbon-2), var(--carbon)); }
.profile-crew__name { white-space: nowrap; }

.crew-details { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.crew-details__row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.crew-details__row dt { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.crew-details__row dd { margin: 0; color: var(--ink); }
.crew-details__row dd a { color: var(--accent-deep); font-weight: 600; }
@media (max-width: 480px) { .crew-details__row { grid-template-columns: 6.5rem 1fr; gap: 0.6rem; } }

/* Rideout-Konfigurator */
.rideout-cfg__back { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--muted); margin-bottom: 1rem; }
.rideout-cfg__back:hover { color: var(--ink); }
.rideout-cfg__back svg { width: 18px; height: 18px; }
.rideout-cfg { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem; align-items: start; }
.rideout-cfg__result { position: sticky; top: clamp(5rem, 11vw, 6.5rem); }
.rideout-reqs__head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 0.6rem; }
#rideoutBasics { margin-top: 1.25rem; }
.rideout-req { border-left: 3px solid var(--line); padding: 0.1rem 0 0.1rem 0.85rem; margin-bottom: 0.9rem; }
.rideout-req__title { font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.15rem; }
.rideout-req__text { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.rideout-req--must { border-left-color: #c0341a; }
.rideout-req--warn { border-left-color: var(--accent); }
.rideout-req--info { border-left-color: #d8a23a; }
.rideout-req--basic { border-left-color: var(--line); }
.rideout-cfg__disclaimer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--line); color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
@media (max-width: 860px) {
    .rideout-cfg { grid-template-columns: 1fr; }
    .rideout-cfg__result { position: static; }
}

/* Desktop: unter dem schwebenden Nav-Header andocken; Inhalt darunter Platz geben. */
@media (min-width: 769px) {
    #discover, #crews-page { padding-top: clamp(6rem, 12vw, 7.5rem); }
    .discover-headbar { top: clamp(4.75rem, 10vw, 6rem); }
}
/* Mobile: kein Nav-Header -> ganz oben, randlos bis an die Kanten. */
@media (max-width: 768px) {
    .discover-headbar { top: 0; padding-top: env(safe-area-inset-top); }
    .discover-headbar .disc-toolbar { width: 100%; margin-inline: 0; padding: 0.7rem 1rem; }
}

.disc-toolbar { position: relative; }   /* Anker für das Filter-Overlay */
.discover-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0; }
/* .profile-switch zentriert per margin:auto – hier links ausrichten. */
.discover-tabs { margin: 1.25rem 0 0; }
.discover-bar .discover-tabs { margin: 0; }

.disc-filter-btn {
    display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
    padding: 0.6rem 1.1rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg-2);
    font-weight: 600; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.disc-filter-btn:hover { border-color: var(--accent); color: var(--ink); }
.disc-filter-btn[aria-expanded="true"] { border-color: var(--accent); background: rgba(232,83,31,0.08); color: var(--accent-deep); }
.disc-filter-btn svg { width: 17px; height: 17px; }

/* Aktionsgruppe rechts in der Leiste (Crews: „Crew gründen" + Suche). */
.discover-bar__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.disc-create-btn { flex: none; width: auto; }
.disc-create-btn svg { width: 18px; height: 18px; }

/* Mobile: Buttons bleiben neben den Tabs (kein Umbruch), nur Icons. */
@media (max-width: 768px) {
    .discover-bar { flex-wrap: nowrap; }
    .discover-bar .discover-tabs {
        width: auto; flex: 0 1 auto; min-width: 0;
        overflow-x: auto; scrollbar-width: none;
    }
    .discover-bar .discover-tabs::-webkit-scrollbar { display: none; }
    .discover-bar .discover-tabs .profile-switch__btn { flex: 0 0 auto; }
    .disc-filter-btn { padding: 0.55rem 0.7rem; gap: 0.3rem; }
    .disc-filter-btn__label { display: none; }
    .discover-bar__actions { gap: 0.4rem; }
    .discover-bar__actions .btn { width: auto; }   /* .btn ist mobil sonst 100% breit */
    .disc-create-btn { padding: 0.55rem 0.7rem; }
    .disc-create-btn__label { display: none; }
}

.filters__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.filters__chips[hidden] { display: none; }

.filter-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.32rem 0.7rem; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s var(--ease);
}
.filter-chip:hover { background: var(--accent-deep); }
.filter-chip span { font-size: 1.15em; line-height: 1; margin-left: 0.05rem; }

.filters__count {
    display: inline-grid; place-items: center; min-width: 14px; height: 14px; padding: 0 5px;
    background: var(--accent); color: #fff; font-size: 0.4rem; font-weight: 700; border-radius: 999px;
    position: absolute; top: 20px; right: 20px;
}
.filters__count[hidden] { display: none; }

/* Fahrerliste: feste 3 Spalten (3×3 = 9 pro Seite), responsiv runter. */
#riderGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { #riderGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #riderGrid { grid-template-columns: 1fr; } }

/* ============================================================================
   RIDER-CARD: ganze Karte zum Profil verlinkt (Stretched-Link)
   ========================================================================== */
.rider-card { position: relative; }
/* Der Name ist der „echte" Link; ::after dehnt den Klickbereich über die ganze
   Karte. Interaktive Elemente (Follow-Button) liegen mit z-index darüber. */
.rider-card__link { color: inherit; text-decoration: none; display: block; }
.rider-card__link::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    border-radius: inherit;
}
.rider-card__body { display: flex; flex-direction: column; gap: 0.55rem; }
.rider-card__loc--bike { color: var(--muted); }
.rider-card__loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip--more { background: var(--bg-2); color: var(--muted); }
/* Follow-Button bleibt klickbar (über dem Stretched-Link). */
.rider-card__foot { position: relative; z-index: 2; }

/* ============================================================================
   ABOUT-PANEL (Profil) – Bio mit Akzent, Info als Kachel-Grid
   ========================================================================== */
.about__title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; margin-bottom: 0.9rem; }
.about__bio {
    color: var(--ink-soft); line-height: 1.7; white-space: pre-line;
    margin: 0 0 1.6rem; padding: 0.1rem 0 0.1rem 1rem;
    border-left: 3px solid var(--accent); overflow-wrap: anywhere;
}
.about__bio--empty { color: var(--muted); font-style: italic; border-left-color: var(--line-strong); }
.about__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.about__tile {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.9rem 1rem; border-radius: var(--r);
    background: var(--bg-2); border: 1px solid var(--line);
}
.about__tile--wide { grid-column: 1 / -1; }
.about__ic {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; color: var(--accent-deep);
    background: linear-gradient(140deg, rgba(232,83,31,0.16), rgba(232,83,31,0.05));
}
.about__ic svg { width: 19px; height: 19px; }
.about__meta { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.1rem; }
.about__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.about__val { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.about__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (max-width: 560px) {
    .about__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   PROFIL-HERO auf Mobile zentrieren (sieht aufgeräumter aus)
   ========================================================================== */
@media (max-width: 768px) {
    .profile-hero__inner { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
    .profile-hero__inner > div { align-items: center; }
    .profile-hero__handle,
    .profile-hero__loc,
    .profile-stats,
    .profile-socials { justify-content: center; }
    .profile-hero__actions { margin-left: 0; justify-content: center; }
}

/* ============================================================================
   PROFIL: „Weitere Fahrer"-Liste unten
   ========================================================================== */
.profile-suggest__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; }
.profile-suggest__all { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; font-size: 0.92rem; color: var(--accent-deep); white-space: nowrap; }
.profile-suggest__all svg { width: 16px; height: 16px; }
.profile-suggest__all:hover { color: var(--accent); }

/* ============================================================================
   CONSENT-CHECKBOX (Rechtstexte bei der Registrierung akzeptieren)
   ========================================================================== */
.consent { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.consent input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.consent__box {
    flex: none; width: 22px; height: 22px; margin-top: 0.1rem;
    border: 1.5px solid var(--line-strong); border-radius: 7px; background: #fff;
    display: grid; place-items: center; color: #fff;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.consent__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); }
.consent input:checked + .consent__box { background: var(--accent); border-color: var(--accent); }
.consent input:checked + .consent__box svg { opacity: 1; transform: scale(1); }
.consent input:focus-visible + .consent__box { box-shadow: 0 0 0 4px rgba(232,83,31,0.18); border-color: var(--accent); }
.consent__text a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.consent__text a:hover { color: var(--accent); }
[data-field="accept"].has-error .consent__box { border-color: #c0341a; box-shadow: 0 0 0 3px rgba(192,52,26,0.14); }

/* ============================================================================
   BILD DES MONATS: Phasen-Banner (Einreichen / Voting) + "Bald"-Chip
   ========================================================================== */
.phase-banner { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; border-radius: var(--r); margin-bottom: 2rem; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.phase-banner__dot { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.phase-banner--submit .phase-banner__dot { background: #2ea043; box-shadow: 0 0 0 4px rgba(46,160,67,0.16); }
.phase-banner--vote .phase-banner__dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(232,83,31,0.16); }
.phase-banner__main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.phase-banner__badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.phase-banner--submit .phase-banner__badge { color: #218739; }
.phase-banner--vote .phase-banner__badge { color: var(--accent-deep); }
.phase-banner__text { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; }
.vote-pending { font-size: 0.76rem; font-weight: 600; color: var(--muted); padding: 0.32rem 0.66rem; border-radius: 999px; background: var(--bg-2); white-space: nowrap; }

/* ============================================================================
   SOCIAL MEDIA: Icons im Profil-Hero + Eingabefelder in den Einstellungen
   ========================================================================== */
.profile-socials { display: flex; gap: 0.5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.profile-social {
    width: 40px; height: 40px; border-radius: 999px; flex: none;
    display: grid; place-items: center; color: rgba(255,255,255,0.82);
    background: rgba(255,255,255,0.06); border: 1px solid var(--line-dark-2);
    transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.profile-social:hover { color: #fff; background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.32); transform: translateY(-2px); }
.profile-social svg { width: 19px; height: 19px; }

/* Social-Editor in den Einstellungen: pro Zeile Plattform-Picker + Handle-Feld */
.social-editor { display: flex; flex-direction: column; gap: 0.55rem; }
.social-row { position: relative; }
.social-row__main {
    display: flex; align-items: stretch; border: 1px solid var(--line-strong);
    border-radius: var(--r); background: #fff; overflow: hidden;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.social-row__main:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232,83,31,0.12); }
.social-row__pick {
    flex: none; display: flex; align-items: center; gap: 0.1rem;
    padding: 0 0.5rem 0 0.7rem; background: var(--bg-2);
    border-right: 1px solid var(--line); color: var(--ink-soft); cursor: pointer;
    transition: background 0.2s var(--ease);
}
.social-row__pick:hover { background: rgba(22,18,13,0.06); }
.social-row__icon { display: grid; place-items: center; width: 22px; }
.social-row__icon svg { width: 19px; height: 19px; }
.social-row__caret { width: 14px; height: 14px; color: var(--muted); }
.social-row__input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0.8rem 0.85rem; font-size: 1rem; color: var(--ink); }
.social-row__input:focus { outline: none; }
.social-row__remove { flex: none; display: grid; place-items: center; width: 40px; color: var(--muted); cursor: pointer; transition: color 0.2s var(--ease); }
.social-row__remove:hover { color: #c0341a; }
.social-row__remove svg { width: 16px; height: 16px; }
.social-row.has-error .social-row__main { border-color: #c0341a; box-shadow: 0 0 0 3px rgba(192,52,26,0.12); }

/* Plattform-Dropdown */
.social-row__menu {
    position: absolute; z-index: 40; top: calc(100% + 0.3rem); left: 0;
    min-width: 230px; max-width: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-lg); padding: 0.3rem;
}
.social-row__opt {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
    padding: 0.55rem 0.6rem; border-radius: var(--r-sm);
    font-weight: 600; font-size: 0.95rem; color: var(--ink);
    transition: background 0.15s var(--ease);
}
.social-row__opt:hover { background: var(--bg-2); }
.social-row__opt.is-active { color: var(--accent-deep); }
.social-row__optic { flex: none; display: grid; place-items: center; width: 22px; color: var(--ink-soft); }
.social-row__optic svg { width: 19px; height: 19px; }
.social-row__opt.is-active .social-row__optic { color: var(--accent-deep); }
.social-row__empty { padding: 0.6rem; color: var(--muted); font-size: 0.9rem; }

.social-add { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; font-weight: 600; font-size: 0.92rem; color: var(--accent-deep); }
.social-add:hover { color: var(--accent); }
.social-add svg { width: 16px; height: 16px; }

/* Zurück-Link (z.B. Beitrags-Teilen-Seite) */
.back-link { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; font-size: 0.92rem; color: var(--muted); }
.back-link:hover { color: var(--ink); }
.back-link svg { width: 17px; height: 17px; }

/* ===========================================================================
   Punkte / Level / Bestenliste / Kosmetik
   =========================================================================== */

/* Level-Chip auf dem Profil */
.profile-level { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 0.85rem; }
.profile-level__icon { font-size: 1rem; line-height: 1; }
.profile-level__name { font-weight: 700; color: var(--ink); }
.profile-level__pts { color: var(--muted); }
.profile-level__pts::before { content: "·"; margin-right: 0.4rem; color: var(--line-strong); }

/* Flair-Titel-Chip */
.profile-flair { display: inline-block; margin-top: 0.45rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }

/* Profil-Akzentfarbe (freigeschaltete Kosmetik) */
.profile-hero.has-accent .avatar--xl { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--profile-accent); }
.profile-hero.has-accent .profile-hero__name { background-image: linear-gradient(transparent 78%, color-mix(in srgb, var(--profile-accent) 35%, transparent) 0); display: inline; }

/* Level-Karte (Einladen-Seite) */
.lvl-card { display: flex; gap: 1rem; align-items: center; }
.lvl-card__icon { font-size: 2.2rem; line-height: 1; flex: none; }
.lvl-card__body { flex: 1; min-width: 0; }
.lvl-card__top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.lvl-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.lvl-card__pts { color: var(--muted); font-size: 0.9rem; }
.lvl-card__pts strong { color: var(--ink); }

/* „Wie verdiene ich Punkte" */
.points-how { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.points-how > summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--accent-deep); list-style: none; }
.points-how > summary::-webkit-details-marker { display: none; }
.points-how[open] > summary { margin-bottom: 0.7rem; }
.points-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.points-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--line); }
.points-list__pts { font-weight: 700; color: var(--accent-deep); flex: none; }

/* Bestenliste */
.lb-scope { display: inline-flex; gap: 0.3rem; padding: 0.3rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 1.25rem; }
.lb-scope__btn { padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.lb-scope__btn.is-active { background: var(--ink); color: var(--bg); }
.lb-me { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lb-me__rank { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--accent-deep); }
.lb-me__lvl { font-weight: 600; }
.lb-me__pts { margin-left: auto; color: var(--muted); }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.lb-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0.4rem; border-bottom: 1px solid var(--line); --profile-accent: var(--accent); }
.lb-row:last-child { border-bottom: none; }
.lb-row__rank { flex: none; width: 2rem; text-align: center; font-weight: 700; color: var(--muted); font-size: 1.05rem; }
.lb-row--top .lb-row__rank { font-size: 1.3rem; }
.lb-row__user { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; color: var(--ink); }
.lb-row__avatar { width: 40px; height: 40px; border-radius: 999px; background-size: cover; background-position: center; flex: none; box-shadow: 0 0 0 2px var(--profile-accent); }
.lb-row__avatar--init { display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; font-weight: 700; font-size: 0.9rem; }
.lb-row__meta { min-width: 0; }
.lb-row__name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row__lvl { display: block; font-size: 0.8rem; color: var(--muted); }
.lb-row__score { flex: none; font-size: 0.95rem; color: var(--muted); }
.lb-row__score strong { color: var(--ink); font-size: 1.05rem; }

/* Kosmetik-Auswahl (Einstellungen) */
.accent-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.accent-swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; cursor: pointer; padding: 0.3rem; border-radius: 12px; border: 2px solid transparent; transition: border-color 0.2s; }
.accent-swatch:has(input:checked) { border-color: var(--ink); }
.accent-swatch.is-locked { cursor: not-allowed; opacity: 0.55; }
.accent-swatch__dot { width: 34px; height: 34px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.accent-swatch__dot--none { background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 5px, var(--line) 5px, var(--line) 10px); }
.accent-swatch__name { font-size: 0.72rem; color: var(--muted); min-height: 1em; }

/* ===========================================================================
   Level-Aufstieg: Feier-Overlay (Konfetti + Level-Karte)
   =========================================================================== */
.levelup {
    position: fixed; inset: 0; z-index: 1200;
    display: grid; place-items: center; padding: 1.5rem;
    background: rgba(10, 10, 11, 0.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; overflow: hidden;
    transition: opacity 0.35s var(--ease);
}
.levelup.show { opacity: 1; pointer-events: auto; }

.levelup__card {
    position: relative; text-align: center; max-width: 360px;
    padding: 2.4rem 2.6rem; border-radius: 24px; color: #fff;
    background: linear-gradient(160deg, #1c1814, #0e0c0a);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.82) translateY(12px); opacity: 0;
    overflow: hidden;
}
.levelup.show .levelup__card { animation: levelup-pop 0.6s cubic-bezier(0.22, 1.3, 0.36, 1) forwards; }
@keyframes levelup-pop { to { transform: scale(1) translateY(0); opacity: 1; } }

.levelup__glow {
    position: absolute; left: -10%; right: -10%; top: -22%; height: 70%; pointer-events: none;
    background: radial-gradient(circle at 50% 0, rgba(232, 83, 31, 0.45), transparent 70%);
}
.levelup__icon {
    position: relative; font-size: 4.2rem; line-height: 1;
    filter: drop-shadow(0 6px 16px rgba(232, 83, 31, 0.45));
    animation: levelup-icon 0.8s cubic-bezier(0.22, 1.4, 0.36, 1) 0.1s both;
}
@keyframes levelup-icon {
    0% { transform: scale(0) rotate(-25deg); }
    60% { transform: scale(1.18) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}
.levelup__title { position: relative; margin-top: 0.9rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }
.levelup__name { position: relative; margin-top: 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; }

.levelup__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.levelup__p { position: absolute; top: -8%; border-radius: 2px; opacity: 0; animation-name: levelup-fall; animation-timing-function: cubic-bezier(0.4, 0.1, 0.5, 1); animation-iteration-count: 1; }
@keyframes levelup-fall {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .levelup.show .levelup__card { animation: none; transform: scale(1) translateY(0); opacity: 1; }
    .levelup__icon { animation: none; }
}

/* Profil-Unterseiten: richtungsabhängiger Slide beim Wischen/Umschalten */
@keyframes ppanel-in-r { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes ppanel-in-l { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.ppanel-in-r { animation: ppanel-in-r 0.28s var(--ease); }
.ppanel-in-l { animation: ppanel-in-l 0.28s var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .ppanel-in-r, .ppanel-in-l { animation: none; }
}

/* ===========================================================================
   Discover: Umschalter (/users ↔ /crews) + Teaser-Abschnitte (Übersicht)
   =========================================================================== */
.discover-switch { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.discover-switch .profile-switch { margin: 0; }
.discover-switch__overview { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.discover-switch__overview:hover { color: var(--ink); }
.discover-switch__overview svg { width: 16px; height: 16px; }

.disc-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.disc-section__all { display: inline-flex; align-items: center; gap: 0.2rem; flex: none; font-weight: 600; font-size: 0.92rem; color: var(--accent-deep); }
.disc-section__all:hover { color: var(--accent); }
.disc-section__all svg { width: 16px; height: 16px; }

/* --- Discover-ÜBERSICHT: redaktionell/einladend (vs. reine Listen) --- */
.discover-intro .lead { max-width: 58ch; }
.disc-hero-cards { margin-top: 1.75rem; }
.disc-stats { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.disc-stat--static { cursor: default; }
.disc-stat--static:hover { transform: none; border-color: var(--line); }
.disc-stat {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.7rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--bg-2); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.disc-stat:hover { border-color: var(--accent); transform: translateY(-2px); }
.disc-stat__num { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.55rem; line-height: 1; color: var(--ink); }
.disc-stat__label { font-size: 0.82rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Pfeil-CTA in den Preview-Karten der Übersicht (--half siehe oben bei .bento). */
.bento__cta { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 1rem; font-weight: 600; font-size: 0.95rem; }
.bento__cta svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.bento__item:hover .bento__cta svg { transform: translateX(3px); }

@media (max-width: 768px) {
    .discover-switch { justify-content: space-between; }
    .disc-stat { flex: 1 1 calc(50% - 0.7rem); }
}