/* =========================================================
   VN-BIKER – GLOBALE SYSTEMBASIS
   Datei: /forum/oeffentlich/css/globale.css

   Grundsatz:
   - Echte globale CSS: keine seitenbezogenen Selektoren.
   - Seiten-CSS regeln Layout, Abstände, Grids und Spezialfälle.
   - Globale CSS liefert nur Tokens, Grundlayout, Typografie,
     neutrale Komponenten, Medien, Buttons, Formulare und ruhige Zustände.
   - Standard: groessere Basis-Schrift, keine Pills, keine Bubble-Orgie, keine starken Hover-Effekte.
   - Echte Pills nur bewusst per .vn-pill.
   ========================================================= */

/* =========================================================
   01 Design Tokens
   ========================================================= */

:root {
    --vn-content-width: 1180px;
    --vn-content-width-wide: 1360px;
    --vn-page-pad: 16px;

    --vn-bg: #050608;
    --vn-page-bg: #050608;
    --vn-bg-image: url('/forum/oeffentlich/bilder/hintergruende/vn2.jpg');

    --vn-text: #ffffff;
    --vn-text-soft: rgba(255,255,255,.84);
    --vn-text-muted: rgba(255,255,255,.64);
    --vn-text-faint: rgba(255,255,255,.46);

    /* Goldgelb, bewusst waermer/heller als vorher */
    --vn-gold: #ffd45a;
    --vn-gold-soft: rgba(255,212,90,.12);
    --vn-gold-strong: #ffe28a;
    --vn-gold-deep: #b87918;
    --vn-gold-border: rgba(255,212,90,.24);

    --vn-green: #45d06d;
    --vn-green-text: #bfffd3;
    --vn-red-text: #ffaaa0;
    --vn-blue-text: #b9ddff;
    --vn-purple-text: #d8c2ff;
    --vn-silver-text: #d7d7d7;

    --vn-border: rgba(255,255,255,.14);
    --vn-border-soft: rgba(255,255,255,.09);
    --vn-border-strong: rgba(255,255,255,.18);

    --vn-radius-xs: 8px;
    --vn-radius-sm: 12px;
    --vn-radius-md: 16px;
    --vn-radius-lg: 22px;
    --vn-radius-xl: 28px;
    --vn-radius-pill: 999px;

    /* Globale Lesbarkeit: bewusst groessere Basis fuer alle Screens */
    --vn-font-xs: clamp(.88rem, .84rem + .16vw, .98rem);
    --vn-font-sm: clamp(.96rem, .91rem + .18vw, 1.06rem);
    --vn-font-md: clamp(1.0625rem, 1rem + .24vw, 1.16rem);
    --vn-font-lg: clamp(1.18rem, 1.08rem + .32vw, 1.34rem);
    --vn-font-xl: clamp(1.40rem, 1.22rem + .64vw, 1.78rem);
    --vn-font-2xl: clamp(1.78rem, 1.42rem + 1.08vw, 2.42rem);
    --vn-font-hero: clamp(2.35rem, 8.5vw, 4.80rem);

    --vn-line-tight: 1.08;
    --vn-line-title: 1.15;
    --vn-line-normal: 1.48;
    --vn-line-loose: 1.62;

    --vn-panel-bg:
        linear-gradient(135deg, rgba(255,255,255,.070), rgba(255,255,255,.025)),
        rgba(12,13,16,.50);
    --vn-panel-bg-strong:
        radial-gradient(circle at 14% 0%, rgba(255,212,90,.12), transparent 34%),
        linear-gradient(145deg, rgba(18,18,22,.84), rgba(5,5,8,.78));
    --vn-row-bg:
        linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
        rgba(5,7,10,.52);
    /* Hover sehr nah am Normalzustand: kein heller/dunkler Flaechensprung */
    --vn-row-bg-hover:
        linear-gradient(135deg, rgba(255,255,255,.064), rgba(255,255,255,.022)),
        rgba(5,7,10,.54);

    --vn-input-bg: rgba(0,0,0,.24);
    --vn-page-shade:
        linear-gradient(
            to bottom,
            rgba(10,12,16,.08) 0%,
            rgba(10,12,16,.16) 38%,
            rgba(10,12,16,.34) 100%
        );

    --vn-shadow-panel: 0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055);
    --vn-shadow-card: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055);
    --vn-shadow-soft: 0 10px 24px rgba(0,0,0,.16);
    --vn-shadow-inset: inset 0 1px 0 rgba(255,255,255,.055);

    --vn-text-shadow: 0 2px 12px rgba(0,0,0,.50);
    --vn-text-shadow-soft: 0 1px 8px rgba(0,0,0,.38);

    --vn-transition: 140ms ease;
    --vn-scrollbar-thumb: rgba(255,255,255,.24);
    --vn-bg-fade-duration: 1800ms;

    /* Absolute Kopfzeile: globale Abstaende fuer normale Seiten */

}

/* =========================================================
   02 Reset / Browser-Basis
   ========================================================= */

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

html {
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--vn-page-bg);
    color: var(--vn-text-soft);
    font-size: 16px;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
    background: var(--vn-page-bg);
    color: var(--vn-text-soft);
    font-family: inherit;
    font-size: var(--vn-font-md);
    line-height: var(--vn-line-normal);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

img,
picture,
video,
canvas,
iframe {
    height: auto;
}

img {
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
}

button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* =========================================================
   03 Hintergrund / Layer
   ========================================================= */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--vn-bg-image) center center / cover no-repeat;
    transform: scale(1.02);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--vn-page-shade);
}

body > :where(header, main, footer, nav, section, div) {
    position: relative;
    z-index: 2;
}

.vn-bg-rotator {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--vn-bg);
}

.vn-bg-rotator__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.025);
    transition: opacity var(--vn-bg-fade-duration) ease;
    will-change: opacity;
}

.vn-bg-rotator__layer.is-active {
    opacity: 1;
}

.vn-bg-rotator__shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--vn-page-shade);
}

body.vn-bg-js {
    background: var(--vn-bg);
}

body.vn-bg-js::before,
body.vn-bg-js::after {
    content: none;
    display: none;
}


/* =========================================================
   03.5 Global: Kopfzeile im Seitenfluss
   ========================================================= */

/*
   Die Kopfzeile reserviert ihre Hoehe selbst in /css/kopfzeile.css.
   Deshalb setzt globale.css hier keine kuenstlichen padding-top-Abstaende
   mehr auf Main- oder Seitenelemente.
*/

html {
    scroll-padding-top: 164px;
}

[id] {
    scroll-margin-top: 164px;
}

@media (max-width: 820px) {
    html { scroll-padding-top: 122px; }
    [id] { scroll-margin-top: 122px; }
}

@media (max-width: 560px) {
    html { scroll-padding-top: 104px; }
    [id] { scroll-margin-top: 104px; }
}

@media (max-width: 390px) {
    html { scroll-padding-top: 98px; }
    [id] { scroll-margin-top: 98px; }
}

/* =========================================================
   04 Neutrale Breiten / Hüllen
   ========================================================= */

.vn-content,
.vn-content-wrap {
    width: min(calc(100% - 32px), var(--vn-content-width));
    margin-inline: auto;
}

.vn-content-wide {
    width: min(calc(100% - 32px), var(--vn-content-width-wide));
    margin-inline: auto;
}

.vn-content-open-right {
    width: calc(100% + max(0px, (100vw - min(calc(100vw - 32px), var(--vn-content-width))) / 2));
    margin-right: calc(-1 * max(0px, (100vw - min(calc(100vw - 32px), var(--vn-content-width))) / 2));
}

/* =========================================================
   05 Typografie / Links
   ========================================================= */

h1,
.vn-h1 {
    margin: 0;
    color: var(--vn-text);
    font-size: var(--vn-font-2xl);
    line-height: var(--vn-line-title);
    letter-spacing: -.035em;
    text-shadow: var(--vn-text-shadow);
}

.vn-hero-title {
    margin: 0;
    color: var(--vn-text);
    font-size: var(--vn-font-hero);
    line-height: var(--vn-line-tight);
    letter-spacing: -.045em;
    text-shadow: var(--vn-text-shadow);
}

h2,
.vn-h2,
.vn-section-title,
.vn-panel-title {
    margin: 0;
    color: var(--vn-text);
    font-size: var(--vn-font-xl);
    line-height: var(--vn-line-title);
    letter-spacing: -.025em;
    text-shadow: var(--vn-text-shadow-soft);
}

h3,
.vn-h3,
.vn-card-title {
    margin: 0;
    color: var(--vn-text);
    font-size: var(--vn-font-lg);
    line-height: var(--vn-line-title);
    letter-spacing: -.018em;
}

p,
.vn-text,
.vn-card-text,
.vn-body-text,
.vn-content-text {
    color: var(--vn-text-soft);
    font-size: var(--vn-font-md);
    line-height: var(--vn-line-normal);
}

.vn-meta,
.vn-subline,
.vn-card-meta,
.vn-muted {
    color: var(--vn-text-muted);
    font-size: var(--vn-font-sm);
    line-height: 1.28;
}

.vn-mini,
.vn-kicker,
.vn-small {
    color: var(--vn-text-muted);
    font-size: var(--vn-font-xs);
    line-height: 1.15;
}

.vn-kicker {
    color: var(--vn-gold);
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    color: var(--vn-text);
    text-decoration: none;
}

a :where(i, svg),
a:hover :where(i, svg) {
    color: currentColor;
}

/* =========================================================
   06 Neutrale Komponenten
   ========================================================= */

.vn-panel,
.vn-section,
.vn-box {
    position: relative;
    border: 1px solid var(--vn-border-soft);
    border-radius: var(--vn-radius-xl);
    background: var(--vn-panel-bg);
    color: var(--vn-text);
    box-shadow: var(--vn-shadow-panel);
    overflow: hidden;
}

.vn-panel--strong {
    background: var(--vn-panel-bg-strong);
}

.vn-card,
.vn-row,
.vn-mini-card,
.vn-action-card {
    border: 1px solid var(--vn-border-soft);
    border-radius: var(--vn-radius-lg);
    background: var(--vn-row-bg);
    color: var(--vn-text);
    box-shadow: var(--vn-shadow-card);
    text-decoration: none;
}

a.vn-card,
a.vn-row,
a.vn-mini-card,
a.vn-action-card {
    color: var(--vn-text);
    text-decoration: none;
}

/* =========================================================
   07 Buttons / Aktionen
   ========================================================= */

.vn-btn,
.vn-button,
a.vn-btn,
a.vn-button,
button.vn-btn,
button.vn-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 2.24rem;
    padding: .56rem .92rem;
    border: 1px solid var(--vn-border-soft);
    border-radius: var(--vn-radius-pill);
    background: rgba(255,255,255,.075);
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1;
    font-weight: 850;
    letter-spacing: .015em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--vn-transition), border-color var(--vn-transition), opacity var(--vn-transition);
}

.vn-btn:hover,
.vn-button:hover {
    background: rgba(255,255,255,.10);
    border-color: var(--vn-border-strong);
    color: var(--vn-text);
}

.vn-btn--primary,
.vn-button--primary {
    color: #160f03;
    background: linear-gradient(135deg, #fff0a8, #ffd45a);
    border-color: rgba(255,212,90,.30);
}

.vn-btn--primary:hover,
.vn-button--primary:hover {
    color: #160f03;
    background: linear-gradient(135deg, #fff3b8, #ffda70);
}

.vn-btn--ghost,
.vn-button--ghost {
    background: transparent;
    border-color: rgba(255,255,255,.10);
    color: var(--vn-text-soft);
}

.vn-icon-action,
.vn-icon-button,
.vn-btn-icon {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--vn-text);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

.vn-icon-action:hover,
.vn-icon-button:hover,
.vn-btn-icon:hover {
    color: var(--vn-text);
    background: transparent;
    filter: brightness(1.10);
}

/* =========================================================
   08 Formulare
   ========================================================= */

.vn-input,
.vn-textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
textarea,
select {
    border: 1px solid var(--vn-border-strong);
    border-radius: var(--vn-radius-md);
    background: var(--vn-input-bg);
    color: var(--vn-text);
    outline: none;
    box-shadow: var(--vn-shadow-inset);
}

.vn-input::placeholder,
.vn-textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--vn-text-faint);
}

.vn-input:focus,
.vn-textarea:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--vn-gold-border);
    box-shadow: var(--vn-shadow-inset), 0 0 0 3px rgba(255,212,90,.08);
}

/* =========================================================
   09 Medien / Avatare / Icons
   ========================================================= */

.vn-avatar,
.vn-avatar-sm,
.vn-avatar-md,
.vn-avatar-lg {
    position: relative;
    overflow: hidden;
    border-radius: var(--vn-radius-md);
    background: rgba(255,255,255,.08);
}

.vn-avatar-sm { width: 42px; height: 54px; }
.vn-avatar-md { width: 66px; height: 84px; }
.vn-avatar-lg { width: 96px; height: 122px; }

.vn-avatar img,
.vn-avatar-sm img,
.vn-avatar-md img,
.vn-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.vn-online-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: .68rem;
    height: .68rem;
    border-radius: var(--vn-radius-pill);
    background: var(--vn-green);
    box-shadow: 0 0 0 2px rgba(0,0,0,.42);
}

.vn-icon {
    color: var(--vn-gold);
}

/* =========================================================
   09.1 Globale Icon-Farben
   Standard: weiss oder goldgelb
   Hover: goldgelb -> weiss
   Keine Bubble, keine Pill, keine Bewegung
   ========================================================= */

/* Standard-Icon: weiss */
.vn-icon,
.vn-icon-white {
    color: var(--vn-text);
}

/* Goldgelbes Icon */
.vn-icon-gold {
    color: var(--vn-gold);
}

/* Gedimmtes Icon */
.vn-icon-muted {
    color: var(--vn-text-muted);
}

/* Icon in Links/Button-Aktionen übernimmt Textfarbe sauber */
.vn-icon :where(i, svg),
.vn-icon-white :where(i, svg),
.vn-icon-gold :where(i, svg),
.vn-icon-muted :where(i, svg),
a .vn-icon,
button .vn-icon,
a .vn-icon-white,
button .vn-icon-white,
a .vn-icon-gold,
button .vn-icon-gold,
a .vn-icon-muted,
button .vn-icon-muted {
    color: currentColor;
}

/* Goldgelb -> weiss beim Hover */
a:hover .vn-icon-gold,
button:hover .vn-icon-gold,
.vn-icon-gold:hover {
    color: var(--vn-text);
}

/* Weiss bleibt weiss, nur minimal heller über Deckkraft möglich */
a:hover .vn-icon-white,
button:hover .vn-icon-white,
.vn-icon-white:hover {
    color: var(--vn-text);
}

/* Gedimmt -> goldgelb beim Hover */
a:hover .vn-icon-muted,
button:hover .vn-icon-muted,
.vn-icon-muted:hover {
    color: var(--vn-gold);
}

/* Ruhige globale Icon-Aktion ohne Bubble */
.vn-icon-action,
.vn-icon-button,
.vn-btn-icon {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    color: var(--vn-gold);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;

    transition:
        color var(--vn-transition),
        opacity var(--vn-transition),
        filter var(--vn-transition);
}

.vn-icon-action:hover,
.vn-icon-button:hover,
.vn-btn-icon:hover {
    color: var(--vn-text);
    background: transparent;
    box-shadow: none;
    transform: none;
    filter: none;
}

.vn-icon-action :where(i, svg),
.vn-icon-button :where(i, svg),
.vn-btn-icon :where(i, svg) {
    display: block;
    width: 1em;
    height: 1em;
    color: currentColor;
    font-size: 1em;
    line-height: 1;
}


/* =========================================================
   09.5 Global: Profilmodule / Profilkarten
   Für WIO, WWD, Suche, Footer, Profilbesucher und Start-Scroller
   ========================================================= */

.vn-profilkarte {
    position: relative;
    display: block;
    width: 172px;
    min-width: 172px;
    overflow: hidden;
    border: 1px solid var(--vn-border-soft);
    border-radius: var(--vn-radius-lg);
    background: var(--vn-row-bg);
    color: var(--vn-text);
    box-shadow: var(--vn-shadow-card);
    text-decoration: none;
    isolation: isolate;
}

.vn-profilkarte,
.vn-profilkarte * {
    box-sizing: border-box;
}

.vn-profilkarte__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.vn-profilkarte__link:hover,
.vn-profilkarte__link:focus,
.vn-profilkarte__link:active {
    color: inherit;
    text-decoration: none;
}

.vn-profilkarte__bildrahmen {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.18;
    overflow: hidden;
    border-radius: var(--vn-radius-md) var(--vn-radius-md) 0 0;
    background: rgba(255,255,255,.06);
}

.vn-profilkarte__bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.vn-profilkarte__bild--leer {
    background:
        radial-gradient(circle at 50% 28%, rgba(255,255,255,.20), transparent 34%),
        linear-gradient(145deg, rgba(35,35,38,.82), rgba(8,8,10,.92));
}

.vn-profilkarte__inhalt {
    padding: .62rem .68rem .72rem;
    text-align: center;
}

.vn-profilkarte__name {
    display: block;
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1.08;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vn-profilkarte__stern,
.vn-gruppenstern {
    display: inline;
    margin-left: .18rem;
    color: var(--vn-gold);
    font-weight: 950;
}






.vn-profilkarte__meta,
.vn-profilkarte__region,
.vn-profilkarte__bike,
.vn-profilkarte__geburtstag,
.vn-profilkarte__zeit {
    display: block;
    margin-top: .22rem;
    color: var(--vn-text-muted);
    font-size: var(--vn-font-xs);
    line-height: 1.16;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vn-profilkarte__zeit {
    color: var(--vn-gold);
    font-weight: 900;
}

.vn-profilkarte__badge-neu {
    position: absolute;
    top: .48rem;
    right: .48rem;
    z-index: 3;
    color: var(--vn-gold);
    font-size: var(--vn-font-xs);
    line-height: 1;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.vn-profilkarte__online {
    position: absolute;
    top: .48rem;
    right: .48rem;
    z-index: 3;
    width: .72rem;
    height: .72rem;
    border-radius: 999px;
    background: var(--vn-green);
    box-shadow: 0 0 0 2px rgba(0,0,0,.42);
}

.vn-profilkarte--wio .vn-profilkarte__online {
    display: none;
}

.vn-profilkarte--klein {
    width: 148px;
    min-width: 148px;
}

.vn-profilkarte--gross {
    width: 210px;
    min-width: 210px;
}

.vn-profilkarten-rail,
.vn-profile-rail {
    display: flex;
    align-items: stretch;
    gap: .72rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--vn-scrollbar-thumb) transparent;
    padding-bottom: .25rem;
}

.vn-profilkarten-rail::-webkit-scrollbar,
.vn-profile-rail::-webkit-scrollbar {
    height: 6px;
}

.vn-profilkarten-rail::-webkit-scrollbar-thumb,
.vn-profile-rail::-webkit-scrollbar-thumb {
    background: var(--vn-scrollbar-thumb);
    border-radius: 999px;
}

@media (max-width: 560px) {
    .vn-profilkarte {
        width: 156px;
        min-width: 156px;
    }

    .vn-profilkarte--klein {
        width: 138px;
        min-width: 138px;
    }

    .vn-profilkarte--gross {
        width: 178px;
        min-width: 178px;
    }
}


/* =========================================================
   09.6 Global: Benutzergruppen-Sterne
   ========================================================= */

.vn-gruppenstern,
.vn-profilmodul-stern {
    display: inline;
    margin-left: .18rem;
    color: var(--vn-gold);
    font-weight: 950;
    line-height: 1;
}

.vn-gruppenstern::before,
.vn-profilmodul-stern::before {
    content: "★";
}

/* Administrator – dunkelblau */
.vn-gruppenstern--admin,
.vn-gruppenstern--administrator,
.vn-profilmodul-stern.is-admin,
.vn-profilmodul-stern.is-administrator {
    color: #1e4f9a;
}

/* Moderation / Mods – mittelblau */
.vn-gruppenstern--moderation,
.vn-gruppenstern--moderator,
.vn-gruppenstern--mod,
.vn-profilmodul-stern.is-moderation,
.vn-profilmodul-stern.is-moderator,
.vn-profilmodul-stern.is-mod {
    color: #3f8fdc;
}

/* VN-Biker / VulcaN-Biker – rot */
.vn-gruppenstern--vn-biker,
.vn-gruppenstern--vulcan-biker,
.vn-profilmodul-stern.is-vn-biker,
.vn-profilmodul-stern.is-vulcan-biker {
    color: #d92727;
}

/* JT-Orga / Orga – lila */
.vn-gruppenstern--jt-orga,
.vn-gruppenstern--orga,
.vn-profilmodul-stern.is-jt-orga,
.vn-profilmodul-stern.is-orga {
    color: #9b5cff;
}

/* RIP – schwarz */
.vn-gruppenstern--rip,
.vn-profilmodul-stern.is-rip {
    color: #050505;
}

/* Spaß-/Sonderstern – pink */
.vn-gruppenstern--pink,
.vn-profilmodul-stern.is-pink {
    color: #ff4fb8;
}

/* Standard-Biker/Besucher – bewusst neutral/gold */
.vn-gruppenstern--biker,
.vn-gruppenstern--besucher,
.vn-profilmodul-stern.is-biker,
.vn-profilmodul-stern.is-besucher {
    color: var(--vn-gold);
}

/* =========================================================
   10 Textlabels statt Pills
   ========================================================= */

.vn-status-text,
.vn-label-text,
.vn-counter-text,
.vn-delta {
    display: inline;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--vn-text-soft);
    font-size: var(--vn-font-xs);
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: .025em;
    text-decoration: none;
    white-space: nowrap;
}

.vn-status-text {
    color: var(--vn-gold);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vn-counter-text {
    color: var(--vn-gold);
    font-weight: 900;
}

.vn-delta {
    color: rgba(255,255,255,.78);
    font-weight: 900;
}

.vn-status-text:hover,
.vn-label-text:hover,
.vn-counter-text:hover,
.vn-delta:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    filter: none;
    text-decoration: none;
}

.vn-text-gold,
[data-vn-color="gold"] { color: var(--vn-gold); }
.vn-text-green,
[data-vn-color="green"] { color: var(--vn-green-text); }
.vn-text-red,
[data-vn-color="red"] { color: var(--vn-red-text); }
.vn-text-blue,
[data-vn-color="blue"] { color: var(--vn-blue-text); }
.vn-text-purple,
[data-vn-color="purple"] { color: var(--vn-purple-text); }
.vn-text-silver,
[data-vn-color="silver"] { color: var(--vn-silver-text); }
.vn-text-muted,
[data-vn-color="muted"] { color: var(--vn-text-muted); }

/* Seltene bewusste Ausnahme: echte Pill nur per Opt-in */
.vn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    min-height: 1.5rem;
    padding: .24rem .56rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--vn-radius-pill);
    background: rgba(255,255,255,.05);
    color: var(--vn-text-soft);
    font-size: var(--vn-font-xs);
    line-height: 1;
    font-weight: 850;
    letter-spacing: .025em;
    text-decoration: none;
    box-shadow: none;
}

.vn-pill:hover {
    color: var(--vn-text-soft);
    background: rgba(255,255,255,.065);
    transform: none;
    filter: none;
    box-shadow: none;
}

/* =========================================================
   11 Scroll / Empty / Alerts
   ========================================================= */

.vn-scrollbox {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.vn-scroll-viewport {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--vn-scrollbar-thumb) transparent;
}

.vn-scroll-track {
    display: flex;
    min-width: max-content;
}

.vn-scroll-item {
    scroll-snap-align: start;
}

.vn-scroll-viewport::-webkit-scrollbar {
    height: 6px;
}

.vn-scroll-viewport::-webkit-scrollbar-track {
    background: transparent;
}

.vn-scroll-viewport::-webkit-scrollbar-thumb {
    background: var(--vn-scrollbar-thumb);
    border-radius: var(--vn-radius-pill);
}

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

.vn-alert {
    border: 1px solid rgba(255,120,120,.30);
    border-radius: var(--vn-radius-md);
    background: rgba(255,255,255,.05);
    color: #ffd6d6;
}

/* =========================================================
   13 Responsive globale Basis
   ========================================================= */

@media (max-width: 860px) {
    :root {
        --vn-page-pad: 10px;
    }

    .vn-content,
    .vn-content-wrap {
        width: min(calc(100% - 20px), var(--vn-content-width));
    }

    .vn-content-wide {
        width: min(calc(100% - 20px), var(--vn-content-width-wide));
    }
}

@media (max-width: 560px) {
    :root {
        --vn-radius-xl: 24px;
        --vn-radius-lg: 18px;
    }
}

/* =========================================================
   VN-BIKER – Bildkarten-Basis Phase 1
   Nutzung: Startseite/Scroller/Module für Profil, Termine, Treffen.
   Diese Basis ersetzt KEINE bestehenden Livecards.
   ========================================================= */

.vn-bildkarte,
.vn-bildkarte * {
    box-sizing: border-box;
}

.vn-bildkarte {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--vn-radius-xl, 24px);
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(10,13,18,.72);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 38px rgba(0,0,0,.30);
    text-decoration: none !important;
}

.vn-bildkarte__bild {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 70% 15%, rgba(218,178,86,.20), transparent 36%),
        rgba(0,0,0,.38);
}

.vn-bildkarte__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.vn-bildkarte__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22) 44%, rgba(0,0,0,.78)),
        linear-gradient(90deg, rgba(0,0,0,.42), transparent 58%);
    pointer-events: none;
}

.vn-bildkarte__inhalt {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.vn-bildkarte__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: linear-gradient(180deg, #f6d979, #c99427);
    color: #111;
    font-size: .74rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .035em;
    text-shadow: none;
}

.vn-bildkarte__badge--green {
    color: #06170b;
    background: linear-gradient(180deg, #8df0a5, #2ead56);
}

.vn-bildkarte__titleband {
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    color: #101010;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.vn-bildkarte__facts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.vn-bildkarte__fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: rgba(255,255,255,.92);
    font-weight: 800;
}

.vn-bildkarte__fact i {
    width: 18px;
    text-align: center;
    opacity: .9;
}

.vn-bildkarte-scroll {
    display: flex;
    gap: 14px;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 2px 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.vn-bildkarte-scroll > * {
    scroll-snap-align: start;
}

/* =========================================================
   Treffen – Start-/Übersichtskarte
   Eigener Baustein, NICHT treffen_card_gross.php.
   ========================================================= */

.vn-treffen-eventcard {
    --vn-eventcard-width: 286px;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--vn-eventcard-width);
    width: var(--vn-eventcard-width);
    min-width: var(--vn-eventcard-width);
    min-height: 382px;
    background: rgba(255,255,255,.94);
    color: #101010;
}

.vn-treffen-eventcard__image {
    position: relative;
    display: block;
    height: 164px;
    overflow: hidden;
    background: rgba(0,0,0,.34);
}

.vn-treffen-eventcard__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.vn-treffen-eventcard__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.20));
    pointer-events: none;
}

.vn-treffen-eventcard__badge {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    min-width: 54px;
    min-height: 34px;
    border-radius: 0;
    background: #238735;
    color: #fff;
    font-size: .9rem;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: none;
}

.vn-treffen-eventcard__titleband {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: block;
    padding: 9px 12px;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1.12;
}

.vn-treffen-eventcard__body {
    display: grid;
    gap: 9px;
    padding: 13px 14px 15px;
    background: rgba(255,255,255,.95);
    color: #101010;
    flex: 1 1 auto;
}

.vn-treffen-eventcard__date {
    color: #111;
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: .02em;
    line-height: 1.15;
}

.vn-treffen-eventcard__status {
    color: #1e862f;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.2;
}

.vn-treffen-eventcard__status.is-full {
    color: #9c1d38;
}

.vn-treffen-eventcard__host {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a23e9f;
    font-size: .95rem;
    font-weight: 750;
    min-width: 0;
}

.vn-treffen-eventcard__hint {
    color: rgba(0,0,0,.62);
    font-size: .86rem;
    line-height: 1.28;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vn-treffen-eventcard__facts {
    margin-top: auto;
    color: #111;
}

.vn-treffen-eventcard__fact {
    color: #111;
    font-size: .96rem;
}

.vn-treffen-eventcard__fact i {
    color: #111;
    font-size: 1.05rem;
}

/* =========================================================
   Termin – Start-/Übersichtskarte im gleichen Bildkartenstil
   ========================================================= */

.vn-termin-bildkarte {
    --vn-termin-bildkarte-width: 286px;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--vn-termin-bildkarte-width);
    width: var(--vn-termin-bildkarte-width);
    min-width: var(--vn-termin-bildkarte-width);
    min-height: 348px;
    background: rgba(255,255,255,.94);
    color: #101010;
}

.vn-termin-bildkarte__image {
    position: relative;
    height: 158px;
    overflow: hidden;
}

.vn-termin-bildkarte__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.vn-termin-bildkarte__titleband {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 8px 11px;
    font-size: 1.08rem;
    font-weight: 950;
    line-height: 1.12;
}

.vn-termin-bildkarte__body {
    display: grid;
    gap: 8px;
    padding: 13px 14px 15px;
    background: rgba(255,255,255,.95);
    color: #101010;
    flex: 1 1 auto;
}

.vn-termin-bildkarte__date {
    color: #111;
    font-size: 1.04rem;
    font-weight: 950;
    line-height: 1.15;
}

.vn-termin-bildkarte__meta,
.vn-termin-bildkarte__text {
    color: rgba(0,0,0,.68);
    font-size: .9rem;
    line-height: 1.28;
}

.vn-termin-bildkarte__actions {
    margin-top: auto;
    display: inline-flex;
    gap: 7px;
}

/* =========================================================
   Profil – Bildkartenmodul für Start/Scroller/Module
   ========================================================= */

.vn-profil-bildkarte {
    --vn-profil-bildkarte-width: 156px;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--vn-profil-bildkarte-width);
    width: var(--vn-profil-bildkarte-width);
    min-width: var(--vn-profil-bildkarte-width);
    height: 232px;
    background: rgba(10,13,18,.68);
}

.vn-profil-bildkarte__bild {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.vn-profil-bildkarte__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.vn-profil-bildkarte__shade {
    background:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.12) 38%, rgba(0,0,0,.86)),
        linear-gradient(90deg, rgba(0,0,0,.25), transparent 58%);
}

.vn-profil-bildkarte__inhalt {
    display: grid;
    align-content: end;
    gap: 4px;
    min-height: 100%;
    padding: 12px;
}

.vn-profil-bildkarte__badge {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
}

.vn-profil-bildkarte__name {
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

.vn-profil-bildkarte__stern {
    margin-left: 4px;
}

.vn-profil-bildkarte__meta {
    color: rgba(255,255,255,.84);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.25;
}

.vn-profil-bildkarte__sub {
    color: rgba(255,255,255,.70);
    font-size: .78rem;
    line-height: 1.25;
}

.vn-profil-bildkarte--rip .vn-profil-bildkarte__shade {
    background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.34) 35%, rgba(0,0,0,.90)),
        linear-gradient(90deg, rgba(0,0,0,.40), transparent 58%);
}

@media (max-width: 720px) {
    .vn-treffen-eventcard,
    .vn-termin-bildkarte {
        --vn-eventcard-width: 274px;
        --vn-termin-bildkarte-width: 274px;
    }

    .vn-treffen-eventcard__titleband {
        font-size: 1.08rem;
    }

    .vn-profil-bildkarte {
        --vn-profil-bildkarte-width: 148px;
        height: 222px;
    }
}


/* =========================================================
   FINAL 2026-05-10 – globale Sternfarben auch für Profilkarten
   ========================================================= */
.vn-profilkarte__stern.is-admin,
.vn-profilkarte.is-admin .vn-profilkarte__stern { color: #1e4f9a; }
.vn-profilkarte__stern.is-moderation,
.vn-profilkarte__stern.is-moderator,
.vn-profilkarte.is-moderation .vn-profilkarte__stern,
.vn-profilkarte.is-moderator .vn-profilkarte__stern { color: #3f8fdc; }
.vn-profilkarte__stern.is-vn-biker,
.vn-profilkarte__stern.is-vulcan-biker,
.vn-profilkarte.is-vn-biker .vn-profilkarte__stern,
.vn-profilkarte.is-vulcan-biker .vn-profilkarte__stern { color: #d92727; }
.vn-profilkarte__stern.is-jt-orga,
.vn-profilkarte__stern.is-orga,
.vn-profilkarte.is-jt-orga .vn-profilkarte__stern,
.vn-profilkarte.is-orga .vn-profilkarte__stern { color: #9b5cff; }
.vn-profilkarte__stern.is-rip,
.vn-profilkarte.is-rip .vn-profilkarte__stern { color: #050505; }
.vn-profilkarte__stern.is-pink,
.vn-profilkarte.is-pink .vn-profilkarte__stern { color: #ff4fb8; }

/* VN global: horizontale Scroll-Rails / reinfliegen */
.vn-scroll-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 4px 44px 8px 0;
    margin-right: calc(var(--vn-page-edge, 0px) * -1);
    scrollbar-width: thin;
}
.vn-scroll-rail > * { flex: 0 0 auto; scroll-snap-align: start; }
.vn-scroll-rail--flyin { opacity: 0; transform: translateX(22px); }
.vn-scroll-rail--flyin.is-ready { animation: vnRailFlyIn .42s ease-out var(--vn-fly-delay, 0ms) both; }
@keyframes vnRailFlyIn { to { opacity: 1; transform: translateX(0); } }
.vn-chip-select,
.vn-chip-static {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.34);
    color: rgba(255,255,255,.92);
    font-weight: 750;
    white-space: nowrap;
}
.vn-chip-select input { position: absolute; opacity: 0; pointer-events: none; }
.vn-chip-select span { display: inline-flex; align-items: center; gap: .45rem; }
.vn-chip-select i,
.vn-chip-static i { color: var(--vn-gold, #f0b90b); opacity: .3; }
.vn-chip-select input:checked + span i,
.vn-chip-static i { opacity: 1; }
.vn-chip-select:has(input:checked),
.vn-chip-static {
    border-color: rgba(240,185,11,.46);
    background: linear-gradient(180deg, rgba(240,185,11,.11), rgba(0,0,0,.28));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
@media (prefers-reduced-motion: reduce) {
    .vn-scroll-rail--flyin { opacity: 1; transform: none; }
    .vn-scroll-rail--flyin.is-ready { animation: none; }
}

/* =========================================================
   FINAL 2026-05-11 – VN HOVER / INTERAKTION aus alter globaler Linie
   Basis: alte 99.11-Hoverlogik, angepasst an aktuellen Stand.
   Wichtig:
   - globale.css steuert Hover forumweit zentral.
   - Start-Forenbubbles bleiben ausgeschlossen, weil sie bewusst
     stabil/weiß und ohne Zucken laufen.
   ========================================================= */

:root {
    --vn-hover-lift: -1px;
    --vn-hover-scale: 1;
    --vn-hover-transition: 160ms ease;
    --vn-hover-border: var(--vn-gold-border);
    --vn-hover-bg: var(--vn-row-bg-hover);
    --vn-hover-shadow: var(--vn-shadow-card-hover, 0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.075));

    --vn-hover-action-lift: -1px;
    --vn-hover-action-brightness: 1.035;
    --vn-hover-action-shadow:
        0 12px 28px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.10);

    --vn-hover-quiet-bg: rgba(255,255,255,.075);
    --vn-hover-quiet-border: rgba(255,255,255,.16);
}

.vn-card,
.vn-row,
.vn-mini-card,
.vn-action-card,
.start-scroll-card,
.start-treffen-card,
.forum-topic-row,
.forum-subcard,
.forum-mini-profil,
.forum-session-card,
.forum-beitrag-card,
.forum-icon-action,
.suche-treffer-karte,
.suche-bereich-karte,
.statistik-event-row,
.statistik-ranking-row,
.statistik-mini-row,
.welcome-help-item,
.nachrichten-row,
.nachrichten-message,
.profil-row,
.profil-field,
.treffen-row,
.vn-profilkarte,
.vn-bikekarte,
.vn-galeriekarte,
.vn-treffen-eventcard,
.vn-termin-bildkarte {
    transition:
        transform var(--vn-hover-transition),
        box-shadow var(--vn-hover-transition),
        border-color var(--vn-hover-transition),
        background var(--vn-hover-transition),
        filter var(--vn-hover-transition),
        opacity var(--vn-hover-transition);
}

@media (hover: hover) and (pointer: fine) {
    a.vn-card:hover,
    a.vn-row:hover,
    a.vn-mini-card:hover,
    a.vn-action-card:hover,
    a.start-scroll-card:hover,
    a.start-treffen-card:hover,
    a.forum-topic-row:hover,
    a.forum-subcard:hover,
    a.forum-mini-profil:hover,
    a.forum-session-card:hover,
    a.forum-beitrag-card:hover,
    a.suche-treffer-karte:hover,
    a.suche-bereich-karte:hover,
    a.welcome-help-item:hover,
    a.vn-profilkarte:hover,
    a.vn-bikekarte:hover,
    a.vn-galeriekarte:hover,
    a.vn-treffen-eventcard:hover,
    a.vn-termin-bildkarte:hover,
    button.vn-card:hover,
    button.vn-row:hover,
    .vn-action-card:hover,
    .forum-icon-action:hover,
    .statistik-event-row:hover,
    .statistik-ranking-row:hover,
    .statistik-mini-row:hover,
    .nachrichten-row:hover,
    .profil-row:hover,
    .treffen-row:hover {
        transform: translateY(var(--vn-hover-lift)) scale(var(--vn-hover-scale));
        border-color: var(--vn-hover-border);
        background: var(--vn-hover-bg);
        box-shadow: var(--vn-hover-shadow);
        color: var(--vn-text);
        text-decoration: none;
        filter: none;
    }

    .vn-action:hover,
    .vn-button:hover,
    .vn-btn:hover,
    .vn-icon-action:hover,
    .vn-icon-button:hover,
    .vn-btn-icon:hover,
    .forumansicht-primary:hover,
    .forum-schnellstart-button:hover,
    .welcome-go-button:hover,
    button[type="submit"]:hover,
    input[type="submit"]:hover {
        transform: translateY(var(--vn-hover-action-lift));
        filter: brightness(var(--vn-hover-action-brightness));
        border-color: var(--vn-border-strong);
        box-shadow: var(--vn-hover-action-shadow);
        text-decoration: none;
    }

    .vn-action--ghost:hover,
    .vn-button--ghost:hover,
    .vn-btn--ghost:hover,
    .vn-button-ghost:hover,
    .vn-action--neutral:hover,
    .vn-button--neutral:hover,
    .vn-btn--neutral:hover {
        background: var(--vn-hover-quiet-bg);
        border-color: var(--vn-hover-quiet-border);
        box-shadow: var(--vn-shadow-soft, 0 10px 24px rgba(0,0,0,.16));
    }
}

/* Start-Forenbubbles bleiben bewusst ohne globalen Hover.
   Die linke Offwhite-Bubble und die rechte Rail wurden separat stabilisiert. */
@media (hover: hover) and (pointer: fine) {
    .start-forum-row-live:hover,
    .start-forum-row-live *:hover,
    .start-forum-row-live__main:hover,
    .start-forum-row-live__stats:hover,
    .start-forum-row-live__activity:hover,
    .start-forum-row-live__topic:hover {
        transform: none;
        filter: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .vn-card:hover,
    .vn-row:hover,
    .vn-mini-card:hover,
    .vn-action-card:hover,
    .start-scroll-card:hover,
    .start-treffen-card:hover,
    .forum-topic-row:hover,
    .forum-subcard:hover,
    .forum-mini-profil:hover,
    .forum-session-card:hover,
    .forum-beitrag-card:hover,
    .forum-icon-action:hover,
    .suche-treffer-karte:hover,
    .suche-bereich-karte:hover,
    .statistik-event-row:hover,
    .statistik-ranking-row:hover,
    .statistik-mini-row:hover,
    .welcome-help-item:hover,
    .nachrichten-row:hover,
    .nachrichten-message:hover,
    .profil-row:hover,
    .profil-field:hover,
    .treffen-row:hover,
    .vn-profilkarte:hover,
    .vn-bikekarte:hover,
    .vn-galeriekarte:hover,
    .vn-treffen-eventcard:hover,
    .vn-termin-bildkarte:hover,
    .vn-action:hover,
    .vn-button:hover,
    .vn-btn:hover,
    .vn-icon-action:hover,
    .vn-icon-button:hover,
    .vn-btn-icon:hover {
        transform: none;
        filter: none;
    }
}

.vn-no-action,
.vn-display-chip,
.vn-display-badge,
.vn-static-pill,
.vn-info-move,
.vn-meta-move,
.vn-no-action:hover,
.vn-display-chip:hover,
.vn-display-badge:hover,
.vn-static-pill:hover,
.vn-info-move:hover,
.vn-meta-move:hover,
.vn-no-action:focus,
.vn-display-chip:focus,
.vn-display-badge:focus,
.vn-static-pill:focus,
.vn-info-move:focus,
.vn-meta-move:focus {
    transform: none;
    filter: none;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}

.vn-badge,
.forum-badge,
.start-forum-badge,
.vn-status-badge,
.vn-role-badge,
.vn-chip,
.start-forum-chip,
.start-tab,
.start-switch-tab,
.vn-filter-chip,
.vn-action-chip,
.vn-tag,
.vn-pill,
.vn-counter,
.start-forum-count,
.start-forum-counter,
.vn-icon-counter,
.vn-message-badge {
    transition:
        border-color var(--vn-hover-transition),
        background var(--vn-hover-transition),
        box-shadow var(--vn-hover-transition),
        filter var(--vn-hover-transition),
        opacity var(--vn-hover-transition);
}

@media (hover: hover) and (pointer: fine) {
    .vn-action-chip:hover,
    a.vn-chip:hover,
    button.vn-chip:hover,
    a.vn-filter-chip:hover,
    button.vn-filter-chip:hover,
    a.start-tab:hover,
    button.start-tab:hover,
    a.start-switch-tab:hover,
    button.start-switch-tab:hover {
        transform: none;
        filter: brightness(1.035);
        text-decoration: none;
    }
}

/* In /forum/oeffentlich/css/globale.css übernommen, damit die Kopfzeile forumweit mit Delta reagiert. */
.forum-nachrichten-badge.is-visible,
.header-nachrichten-badge.is-visible,
[data-nachrichten-badge].is-visible {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.forum-nachrichten-badge.is-delta,
.header-nachrichten-badge.is-delta,
[data-nachrichten-badge].is-delta {
    animation: vnNachrichtenDeltaPulse .9s ease-out 1;
}

@keyframes vnNachrichtenDeltaPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

/* =========================================================
   VN-BIKER – GLOBALE SHOWCASE-KOMPONENTEN
   Datei-Ziel: /forum/oeffentlich/css/globale_showcase.css

   Zweck:
   - Spielfläche für ein vollständiges forumweites Komponenten-System.
   - Diese Datei ist eine Kopie der aktuellen globale.css plus neue Bausteine.
   - Seiten-CSS soll später nur noch echte Seitenanordnung und Sonderfälle liefern.
   ========================================================= */

:root {
    --vn-component-gap: clamp(12px, 1.8vw, 22px);
    --vn-component-pad: clamp(14px, 2.2vw, 26px);
    --vn-component-pad-sm: clamp(10px, 1.5vw, 16px);
    --vn-component-pad-lg: clamp(20px, 3vw, 38px);
    --vn-lacquer-top: linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.026) 18%, transparent 42%);
    --vn-chrome-sheen: linear-gradient(116deg, transparent 0%, transparent 34%, rgba(255,255,255,.038) 47%, rgba(255,255,255,.085) 52%, rgba(255,255,255,.030) 58%, transparent 72%, transparent 100%);
    --vn-glass-bg:
        var(--vn-lacquer-top),
        linear-gradient(135deg, rgba(255,255,255,.064), rgba(255,255,255,.018)),
        rgba(9,10,13,.58);
    --vn-glass-bg-strong:
        radial-gradient(circle at 16% 0%, rgba(255,212,90,.13), transparent 34%),
        var(--vn-lacquer-top),
        linear-gradient(145deg, rgba(20,21,25,.84), rgba(4,5,8,.76));
    --vn-glass-border: rgba(255,255,255,.15);
    --vn-glass-border-soft: rgba(255,255,255,.10);
    --vn-glass-shadow: 0 20px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.075);
}

/* Seitenhüllen */
.vn-page,
.vn-main,
.forum-main {
    position: relative;
    z-index: 2;
}

.vn-page,
.vn-main {
    width: 100%;
}

.vn-stack {
    display: grid;
    gap: var(--vn-component-gap);
}

.vn-stack--tight { gap: clamp(8px, 1.1vw, 14px); }
.vn-stack--loose { gap: clamp(18px, 2.4vw, 30px); }

.vn-grid,
.vn-grid-2,
.vn-grid-3,
.vn-grid-4,
.vn-auto-grid {
    display: grid;
    gap: var(--vn-component-gap);
    min-width: 0;
}

.vn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vn-auto-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* Grundflächen */
.vn-panel,
.vn-section,
.vn-box,
.vn-card,
.vn-row,
.vn-mini-card,
.vn-action-card,
.vn-hero-panel,
.vn-glass,
.vn-surface {
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

.vn-panel,
.vn-section,
.vn-box,
.vn-hero-panel,
.vn-glass,
.vn-surface {
    background: var(--vn-glass-bg);
    border-color: var(--vn-glass-border-soft);
    box-shadow: var(--vn-glass-shadow);
}

.vn-panel::before,
.vn-section::before,
.vn-box::before,
.vn-hero-panel::before,
.vn-glass::before,
.vn-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--vn-chrome-sheen);
    opacity: .16;
}

.vn-panel > *,
.vn-section > *,
.vn-box > *,
.vn-hero-panel > *,
.vn-glass > *,
.vn-surface > * {
    position: relative;
    z-index: 1;
}

.vn-card,
.vn-row,
.vn-mini-card,
.vn-action-card {
    background: var(--vn-row-bg);
    border-color: var(--vn-glass-border-soft);
}

.vn-section,
.vn-panel,
.vn-hero-panel {
    padding: var(--vn-component-pad);
}

.vn-hero-panel {
    display: grid;
    gap: clamp(12px, 1.8vw, 22px);
    min-height: clamp(260px, 34vw, 430px);
    align-content: end;
    background: var(--vn-glass-bg-strong);
}

.vn-section-head,
.vn-panel-head,
.vn-card-head,
.vn-module-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vn-component-gap);
    margin-bottom: clamp(12px, 1.6vw, 20px);
}

.vn-section-head > *,
.vn-panel-head > *,
.vn-card-head > *,
.vn-module-head > * {
    min-width: 0;
}

.vn-card,
.vn-action-card,
.vn-mini-card {
    padding: var(--vn-component-pad-sm);
}

.vn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vn-component-gap);
    padding: var(--vn-component-pad-sm);
}

.vn-row > * {
    min-width: 0;
}

/* Aktionen */
.vn-actions,
.vn-action-row,
.vn-icon-row,
.vn-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .58rem;
    min-width: 0;
}

.vn-actions--right { justify-content: flex-end; }
.vn-actions--center { justify-content: center; }
.vn-actions--between { justify-content: space-between; }

.vn-action,
a.vn-action,
button.vn-action {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    min-height: 2.46rem;
    padding: .64rem .94rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--vn-radius-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,.082), rgba(255,255,255,.018)),
        rgba(6,7,10,.34);
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 24px rgba(0,0,0,.16);
}

.vn-action--primary {
    color: #171100;
    border-color: rgba(255,212,90,.36);
    background: linear-gradient(180deg, #fff0a8, #ffd45a 58%, #d99d29);
    text-shadow: none;
}

.vn-action--info {
    border-color: rgba(185,221,255,.24);
    background:
        linear-gradient(180deg, rgba(185,221,255,.115), rgba(255,255,255,.018)),
        rgba(6,7,10,.34);
}

.vn-action--ghost {
    background: transparent;
    color: var(--vn-text-soft);
    box-shadow: none;
}

.vn-action--danger {
    border-color: rgba(255,170,160,.26);
    color: #ffd3ce;
}

/* Badges, Chips, Zähler */
.vn-display-badge,
.vn-display-chip,
.vn-badge,
.vn-chip,
.vn-counter,
.vn-message-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 1.72rem;
    padding: .28rem .64rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--vn-radius-pill);
    background:
        linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.018)),
        rgba(0,0,0,.20);
    color: var(--vn-text-soft);
    font-size: var(--vn-font-xs);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.vn-display-badge,
.vn-badge {
    text-transform: uppercase;
    letter-spacing: .055em;
}

.vn-display-badge--gold,
.vn-badge--gold,
.vn-chip--gold {
    color: var(--vn-gold-strong);
    border-color: rgba(255,212,90,.25);
    background: linear-gradient(180deg, rgba(255,212,90,.13), rgba(255,212,90,.035)), rgba(0,0,0,.20);
}

.vn-display-badge--green,
.vn-badge--green,
.vn-chip--green {
    color: var(--vn-green-text);
    border-color: rgba(69,208,109,.23);
    background: linear-gradient(180deg, rgba(69,208,109,.13), rgba(69,208,109,.032)), rgba(0,0,0,.20);
}

.vn-display-badge--blue,
.vn-badge--blue,
.vn-chip--blue {
    color: var(--vn-blue-text);
    border-color: rgba(185,221,255,.22);
    background: linear-gradient(180deg, rgba(185,221,255,.11), rgba(185,221,255,.028)), rgba(0,0,0,.20);
}

.vn-display-badge--red,
.vn-badge--red,
.vn-chip--red {
    color: var(--vn-red-text);
    border-color: rgba(255,170,160,.24);
    background: linear-gradient(180deg, rgba(255,170,160,.105), rgba(255,170,160,.028)), rgba(0,0,0,.20);
}

.vn-counter {
    color: #101010;
    border-color: rgba(255,212,90,.34);
    background: linear-gradient(180deg, #fff0a8, #ffd45a);
    text-shadow: none;
}

.vn-message-badge {
    color: #07180d;
    border-color: rgba(69,208,109,.30);
    background: linear-gradient(180deg, #b8ffc9, #45d06d);
    text-shadow: none;
}

/* KPI / Statistik */
.vn-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: var(--vn-component-gap);
}

.vn-kpi-card {
    display: grid;
    gap: .38rem;
    padding: var(--vn-component-pad-sm);
    border: 1px solid var(--vn-glass-border-soft);
    border-radius: var(--vn-radius-lg);
    background: var(--vn-row-bg);
    box-shadow: var(--vn-shadow-card);
}

.vn-kpi-label {
    color: var(--vn-text-muted);
    font-size: var(--vn-font-xs);
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.vn-kpi-value {
    color: var(--vn-text);
    font-size: clamp(1.55rem, 3vw, 2.28rem);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.03em;
}

.vn-kpi-delta {
    color: var(--vn-gold);
    font-size: var(--vn-font-xs);
    font-weight: 900;
}

/* Foren-/Listen-Pattern */
.vn-forum-list,
.vn-list {
    display: grid;
    gap: .74rem;
}

.vn-forum-row,
.vn-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--vn-component-gap);
    padding: var(--vn-component-pad-sm);
    border: 1px solid var(--vn-glass-border-soft);
    border-radius: var(--vn-radius-lg);
    background: var(--vn-row-bg);
    box-shadow: var(--vn-shadow-card);
}

.vn-forum-row__main,
.vn-list-row__main {
    min-width: 0;
}

.vn-forum-row__side,
.vn-list-row__side {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .48rem;
    min-width: 0;
}

.vn-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .44rem;
    min-width: 0;
}

/* =========================================================
   VN-BIKER – Globale Inhaltsglas-Komponenten
   Nutzung: Start, Suche, Forumansicht, Nachrichten, Profil, Treffen
   Zweck: dunkle Inhaltsflächen, ruhige Glaskarten, Topic-Kontext
   ========================================================= */

.vn-glass-content {
    position: relative;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--vn-radius-xl, 28px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.024)),
        rgba(3,6,9,.74);
    box-shadow:
        0 22px 52px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.08);
    color: var(--vn-text, #fff);
    overflow: hidden;
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
}

.vn-glass-content-row {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--vn-radius-lg, 22px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
        rgba(3,6,10,.68);
    color: var(--vn-text, #fff);
    box-shadow:
        0 12px 28px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.065);
}

.vn-glass-content-row--open-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.vn-glass-content-card {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--vn-radius-md, 16px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.080), rgba(255,255,255,.024)),
        rgba(4,7,11,.62);
    color: var(--vn-text, #fff);
    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.065);
    text-decoration: none;
}

a.vn-glass-content-card,
a.vn-glass-content-row {
    color: var(--vn-text, #fff);
    text-decoration: none;
}

.vn-topic-prefix,
.vn-topic-model {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: .62rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .085em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vn-topic-prefix {
    color: var(--vn-gold, #ffd45a);
}

.vn-topic-model {
    color: rgba(210,225,235,.78);
}

.vn-scroll-rail {
    display: flex;
    align-items: stretch;
    gap: .72rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,212,90,.28) transparent;
}

.vn-scroll-rail::-webkit-scrollbar {
    height: 4px;
}

.vn-scroll-rail::-webkit-scrollbar-track {
    background: transparent;
}

.vn-scroll-rail::-webkit-scrollbar-thumb {
    background: rgba(255,212,90,.28);
    border-radius: 999px;
}

.vn-scroll-rail > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.vn-scroll-rail--open-right {
    width: calc(100% + max(14px, (100vw - var(--vn-content-width, 1180px)) / 2));
    margin-right: calc(-1 * max(14px, (100vw - var(--vn-content-width, 1180px)) / 2));
    padding-right: max(14px, (100vw - var(--vn-content-width, 1180px)) / 2);
}

@media (hover: hover) and (pointer: fine) {
    .vn-glass-content-row:hover,
    .vn-glass-content-card:hover {
        transform: none;
        filter: none;
        border-color: rgba(255,255,255,.16);
        box-shadow:
            0 12px 28px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.08);
    }
}

@media (max-width: 760px) {
    .vn-scroll-rail--open-right {
        width: calc(100% + 14px);
        margin-right: -14px;
        padding-right: 28px;
    }
}


/* =========================================================
   FINAL v22 – Start/Treffen/Termine Konsistenz
   ========================================================= */
.start-hero-compact.is-member {
    justify-content: flex-end;
    align-items: flex-end;
}
.start-hero-countdown {
    flex: 0 1 360px;
    max-width: min(360px, 100%);
    margin-left: auto;
    margin-right: clamp(56px, 8vw, 132px);
}
.start-hero-countdown__value {
    font-size: clamp(1.32rem, 2vw, 1.92rem);
    line-height: 1.12;
}
@media (max-width: 760px) {
    .start-hero-compact.is-member { justify-content: center; }
    .start-hero-countdown { width: min(100%, 330px); margin: 0 auto; }
}
.vn-treffen-eventcard__image-status {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 54px;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    pointer-events: none;
}
.vn-treffen-eventcard__image-status-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(5,8,12,.76);
    color: #fff;
    font-size: .76rem;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 2px 7px rgba(0,0,0,.48);
    box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.vn-treffen-eventcard__image-status-item.is-own {
    color: #06170b;
    background: linear-gradient(180deg, #8df0a5, #2ead56);
    text-shadow: none;
}
.vn-treffen-eventcard__image-status-item.is-private {
    color: #111;
    background: linear-gradient(180deg, #f6d979, #c99427);
    text-shadow: none;
}
.vn-treffen-eventcard__facts {
    gap: 7px 10px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.vn-treffen-eventcard__fact {
    white-space: nowrap;
}
.vn-treffen-eventcard__scope {
    max-width: calc(100% - 24px);
}
.start-treffen-card--rip .start-treffen-card__memorial-badge,
.start-treffen-card--rip .start-treffen-card__quote,
.start-treffen-card--rip .start-treffen-card__date-label,
.start-treffen-card--rip .start-treffen-card__status--rip,
.start-treffen-card--rip .start-treffen-card__host {
    display: none !important;
}
.start-treffen-card--rip .start-treffen-card__title--rip {
    top: auto !important;
    bottom: 54px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    align-items: center;
    gap: 7px;
    max-height: none;
    font-size: var(--vn-font-md);
    font-weight: 950;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.start-treffen-card--rip .start-treffen-card__rip-cross {
    flex: 0 0 auto;
    color: #fff;
    font-size: 1.05em;
    font-weight: 950;
}
.start-treffen-card--rip .start-treffen-card__body {
    min-height: 70px !important;
    height: 70px !important;
    padding: 12px 14px 13px !important;
    justify-content: flex-end !important;
}
.start-treffen-card--rip .start-treffen-card__date--rip {
    color: rgba(255,255,255,.88);
    font-size: var(--vn-font-sm);
    font-weight: 880;
}

.vn-smiley {
    display: inline-block;
    width: auto;
    height: 1.45em;
    max-width: 34px;
    max-height: 34px;
    vertical-align: -0.28em;
    margin: 0 2px;
    object-fit: contain;
}