/* =========================================================
   VN-BIKER – Startseite
   Datei: /forum/oeffentlich/css/start.css

   Auslieferungsfassung Start:
   - gebuendelt fuer die Startseite
   - globale Optik aus globale.css
   - Kopfzeile aus kopfzeile.css
   - Fusszeile aus fusszeile.css
   - keine Bulma-Abhaengigkeit
   - keine !important-Regeln
   ========================================================= */

/* =========================================================
   01 Start – Grundlayout
   Quelle: start(43).css
   ========================================================= */

/* =========================================================
   VN-BIKER – Startseite Modul-CSS
   Aus start.css modularisiert.
   ========================================================= */

.forum-main.forum-main--start {
    padding-top: 6px;
    padding-bottom: 18px;
}
.start-stats-wrap {
    display: none;
}
.start-content-wrap {
    width: min(calc(100% - 18px), var(--vn-content-width, 1180px));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.start-section-card {
    padding: 14px 16px;
    overflow: visible;
}
.start-section-card__head,
.start-switch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.start-head-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.start-section-card__head h2,
.start-switch-head h2,
.start-section-card__titlelink {
    margin: 0;
    font-size: var(--vn-font-xl);
    line-height: 1.08;
    font-weight: 900;
}
.start-section-card__titlelink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.start-section-card__star {
font-size: .85em;
}
.start-section-card__more {
    font-size: var(--vn-font-md);
    font-weight: 800;
white-space: nowrap;
}
.start-switch-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.start-switch-tab {
    min-height: 32px;
    padding: 0 12px;
    font-size: var(--vn-font-sm);
    font-weight: 800;
    cursor: pointer;
}
.start-switch-tab--link[href] {
    display: inline-flex;
    align-items: center;
}
.start-section-card--forums,
.start-section-card--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: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    overflow: visible;
}
.start-section-card--forums .start-section-card__head,
.start-section-card--open-right .start-switch-head,
.start-section-card--open-right .start-empty-state {
    padding-right: max(14px, (100vw - var(--vn-content-width, 1180px)) / 2);
}
.start-switch-panel,
.start-scrollbox {
    overflow: visible;
}
@media (max-width: 980px) {
.start-section-card--forums,
    .start-section-card--open-right { width: calc(100% + 14px); margin-right: -14px; }
}
@media (max-width: 980px) and (orientation: landscape) {
.start-content-wrap { gap: 12px; }
.start-section-card { padding: 12px 14px; }
}
@media (max-width: 560px) {
.start-section-card { padding: 12px; }
.start-section-card__head h2,
    .start-switch-head h2,
    .start-section-card__titlelink { font-size: var(--vn-font-lg); }
.start-head-group { gap: 8px; }
.start-switch-tabs { gap: 6px; }
.start-switch-tab { min-height: 30px; padding: 0 11px; font-size: var(--vn-font-sm); }
}
.start-section-card--forums .start-section-card__head {
    margin-bottom: .7rem;
}

/* =========================================================
   GLOBAL-HANDOFF start.css
   Typo, Farben, Buttons, Badges und Hover kommen aus globale.css.
   Diese Datei liefert nur Seitenlayout, Abstände, Grids und Sondergrößen.
   ========================================================= */

/* =========================================================
   02 Start – Hero / Profilbox / Sound
   Quelle: hero_final.css
   ========================================================= */

/* =========================================================
   02 Start – Hero / Profilbox / Sound
   ========================================================= */

.start-stage {
    min-height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.start-stage__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(calc(100% - 32px), var(--vn-content-width, 1180px));
    margin: 0 auto;
    padding: 82px 18px 22px;
    text-align: center;
}

.start-stage__title {
    max-width: 840px;
    margin: 0 auto;
    color: var(--vn-text);
    font-size: clamp(2.7rem, 4.7vw, 4.35rem);
    line-height: 1.03;
    font-weight: 950;
    letter-spacing: -.035em;
    text-align: center;
    text-shadow: var(--vn-text-shadow);
}

.start-stage__subtitle {
    max-width: 900px;
    min-height: 2.1em;
    margin: 14px auto 0;
    color: var(--vn-text-soft);
    font-size: clamp(1.08rem, 1.85vw, 1.65rem);
    line-height: 1.28;
    text-align: center;
    text-shadow: var(--vn-text-shadow-soft);
}

.countdown-text {
    display: inline-block;
}

.start-stage__subtitle a,
.countdown-text a {
    font-weight: 850;
}

.start-hero-compact {
    position: relative;
    width: min(100%, var(--vn-content-width, 1180px));
    margin: 22px auto 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    align-self: stretch;
}

.start-hero-profile {
    width: min(100%, 376px);
    margin-left: 0;
    padding: 11px 13px;
    overflow: visible;
}

.start-hero-profile__main {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.start-hero-profile__avatar-link {
    display: inline-flex;
    width: 78px;
    height: 78px;
}

.start-hero-profile__avatar {
    width: 78px;
    height: 78px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--vn-radius-md);
}

.start-hero-profile__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.start-hero-profile__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

.start-hero-profile__eyebrow {
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1.05;
    font-weight: 900;
}

.start-hero-profile__name-line {
    display: inline-flex;
    align-items: center;
    gap: .46rem;
    min-width: 0;
    max-width: 100%;
}

.start-hero-profile__name {
    margin: 0;
    color: var(--vn-text);
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    line-height: .98;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--vn-text-shadow);
}

.start-hero-profile__action-wrap {
    margin-top: 3px;
}

.start-hero-profile__action {
    color: var(--vn-text);
    font-size: var(--vn-font-md);
    line-height: 1.08;
    font-weight: 900;
    opacity: .92;
}

.start-hero-profile--guest {
    width: min(100%, 366px);
}

.start-hero-profile--guest .start-hero-profile__main--guest {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
}

.start-hero-profile__cta-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    min-height: 70px;
    padding: 0;
    border: 1px solid rgba(255,212,90,.22);
    border-radius: var(--vn-radius-md);
    background: rgba(0,0,0,.20);
    color: var(--vn-gold);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    text-decoration: none;
}

.start-hero-profile__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    color: currentColor;
}

.start-hero-profile__cta-icon i {
    color: currentColor;
    font-size: var(--vn-icon-size-xl, 2.05rem);
    line-height: 1;
}

.start-hero-profile__cta-text {
    display: none;
}

.start-hero-profile--guest .start-hero-profile__name {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.start-stage__audio {
    position: relative;
    z-index: 4;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 54px;
}

.start-stage__audio::before {
    content: "";
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    width: min(38vw, 520px);
    height: 1px;
    background: linear-gradient(to left, rgba(255,212,90,.44), rgba(255,255,255,.16), transparent);
    transform: translateY(-50%);
    pointer-events: none;
}

.start-stage__sound-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--vn-gold);
    font-size: var(--vn-icon-size-lg, 1.75rem);
    line-height: 1;
    cursor: pointer;
}

.start-stage__sound-button.is-playing {
    color: var(--vn-gold);
}
.start-stage__sound-button i {
    color: currentColor;
    font-size: 1em;
    line-height: 1;
}

@media (max-width: 980px) {
    .start-stage {
        min-height: 370px;
    }

    .start-stage__inner {
        width: min(calc(100% - 18px), var(--vn-content-width, 1180px));
        padding-top: 78px;
        padding-bottom: 22px;
    }

    .start-hero-profile {
        width: min(100%, 350px);
    }

    .start-stage__audio::before {
        width: min(28vw, 360px);
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    .start-stage {
        min-height: 250px;
    }

    .start-stage__inner {
        padding-top: 72px;
        padding-bottom: 18px;
    }

    .start-stage__title {
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.05;
    }

    .start-stage__subtitle {
        margin-top: 10px;
        font-size: var(--vn-font-md);
        line-height: 1.24;
    }

    .start-hero-compact {
        margin-top: 16px;
    }
}

@media (max-width: 700px) {
    .start-hero-compact {
        padding-left: 0;
        padding-right: 0;
        gap: 10px;
    }

    .start-stage__audio::before {
        width: min(22vw, 160px);
    }
}

@media (max-width: 560px) {
    .start-stage {
        min-height: 315px;
    }

    .start-stage__inner {
        padding: 74px 8px 16px;
    }

    .start-stage__title {
        font-size: clamp(2.1rem, 9vw, 3.05rem);
        line-height: 1.07;
    }

    .start-stage__subtitle {
        margin-top: 10px;
        font-size: var(--vn-font-md);
        line-height: 1.28;
    }

    .start-hero-compact {
        width: min(100%, calc(100vw - 18px));
        margin-top: 16px;
        gap: 8px;
    }

    .start-hero-profile {
        width: min(100%, 286px);
        padding: 9px 10px;
    }

    .start-hero-profile__main {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 9px;
    }

    .start-hero-profile__avatar-link,
    .start-hero-profile__avatar {
        width: 60px;
        height: 60px;
    }

    .start-hero-profile__eyebrow {
        font-size: var(--vn-font-xs);
    }

    .start-hero-profile__name {
        font-size: clamp(1.38rem, 6.5vw, 2rem);
    }

    .start-hero-profile--guest {
        width: min(100%, 286px);
    }

    .start-hero-profile--guest .start-hero-profile__main--guest {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
    }

    .start-hero-profile__cta-box {
        width: 56px;
        height: 56px;
        min-height: 56px;
    }

    .start-hero-profile__cta-icon i {
        font-size: var(--vn-icon-size-lg, 1.75rem);
    }

    .start-hero-profile--guest .start-hero-profile__name {
        font-size: clamp(1.45rem, 7vw, 2.05rem);
    }

    .start-stage__audio {
        min-width: 42px;
    }

    .start-stage__audio::before {
        right: calc(100% + 8px);
        width: min(14vw, 70px);
    }

    .start-stage__sound-button {
        width: 40px;
        height: 40px;
        font-size: var(--vn-icon-size-md, 1.5rem);
    }
}

@media (max-width: 390px) {
    .start-stage {
        min-height: 302px;
    }

    .start-stage__inner {
        padding-top: 70px;
        padding-bottom: 14px;
    }

    .start-hero-profile {
        width: min(100%, 258px);
    }

    .start-hero-profile--guest {
        width: min(100%, 258px);
    }

    .start-hero-profile__name,
    .start-hero-profile--guest .start-hero-profile__name {
        font-size: clamp(1.32rem, 6.8vw, 1.8rem);
    }

    .start-stage__audio::before {
        width: 42px;
    }

    .start-stage__sound-button {
        width: 36px;
        height: 36px;
    }
}


/* =========================================================
   03 Start – Live-Forenblöcke
   Quelle: forum-live(2).css
   ========================================================= */

/* =========================================================
   VN-BIKER – Startseite Modul-CSS
   Aus start.css modularisiert.
   ========================================================= */


/* =========================================================
   GLOBAL-HANDOFF forum-live.css
   Typo, Farben, Buttons, Badges und Hover kommen aus globale.css.
   Diese Datei liefert nur Seitenlayout, Abstände, Grids und Sondergrößen.
   ========================================================= */

/* =========================================================
   START-LIVE – GLOBAL-FIRST PATCH v6
   forum-live.css bleibt Layoutdatei. Design kommt aus globale.css.
   ========================================================= */


/* =========================================================
   04 Start – Community / Profilmodule
   Quelle: community(1).css
   ========================================================= */

/* =========================================================
   VN-BIKER – Startseite Modul-CSS
   Aus start.css modularisiert.
   ========================================================= */

.start-community-shell {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 2px;
}
.start-community-viewport,
.start-treffen-viewport {
    width: 100%;
    max-width: none;
    margin-right: 0;
    padding: 0 max(18px, calc((100vw - var(--vn-content-width, 1180px)) / 2 + 18px)) 8px 0;
    overflow-x: auto;
    overflow-y: visible;
}
.start-community-viewport .vn-scrollbox-track,
.start-treffen-viewport .vn-scrollbox-track,
.start-scroll-row,
.start-treffen-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.start-scroll-card,
.start-treffen-card,
.start-community-viewport .vn-scrollbox-item,
.start-treffen-viewport .vn-scrollbox-item {
    scroll-snap-align: start;
}
.start-scroll-card {
    flex: 0 0 auto;
    padding: 12px 12px 10px;
}
.start-scroll-row--medium .start-scroll-card { min-width: 138px; }
.start-scroll-row--small .start-scroll-card { min-width: 92px; }
.start-scroll-card--birthday { min-width: 102px; display: flex; flex-direction: column; align-items: center; }
.start-scroll-card--time { position: relative; padding-top: 26px; }
.start-scroll-card__time { position: absolute; top: 6px; left: 10px; font-size: var(--vn-font-xs); font-weight: 700; }
.start-mini-meta { margin-top: 6px; font-size: var(--vn-font-sm); font-weight: 900; }
.start-mini-hint { margin-top: 4px; font-size: var(--vn-font-sm); text-align: center; }
.start-community-viewport .vn-scrollbox-track { align-items: stretch; }
.start-community-viewport .vn-scrollbox-item { display: flex; align-items: stretch; }
.start-community-viewport .start-profilbox { min-width: 152px; max-width: 172px; min-height: 208px; padding: .9rem .8rem; justify-content: flex-start; text-align: left; }
.start-community-viewport .start-profilbox .vn-profilmodul-media { margin-bottom: .15rem; }
.start-community-viewport .start-profilbox .vn-profilmodul-avatar-md { width: 84px; height: 104px; }
.start-community-viewport .start-profilbox .vn-profilmodul-name { font-size: var(--vn-font-md); line-height: 1.08; white-space: normal; overflow: visible; text-overflow: initial; }
.start-community-viewport .start-profilbox .vn-profilmodul-zeit,
.start-community-viewport .start-profilbox .vn-profilmodul-status { font-size: var(--vn-font-sm); line-height: 1.2; }
.start-community-viewport .start-profilbox--birthday { min-height: 220px; }
@media (max-width: 980px) {
.start-section-card--forums .start-section-card__head,
    .start-section-card--open-right .start-switch-head,
    .start-section-card--open-right .start-empty-state,
    .start-community-viewport,
    .start-treffen-viewport { padding-right: 14px; }
}
@media (max-width: 980px) and (orientation: landscape) {
.start-community-shell { max-height: 150px; }
.start-scroll-card { padding: 7px 7px 5px; }
}
@media (max-width: 560px) {
.start-community-shell { max-height: 178px; }
.start-scroll-row { gap: 10px; padding: 2px 0; }
.start-scroll-row--medium .start-scroll-card { min-width: 126px; }
.start-scroll-row--small .start-scroll-card { min-width: 82px; }
.start-community-viewport .start-profilbox { min-width: 132px; max-width: 144px; min-height: 186px; padding: .76rem .66rem; }
.start-community-viewport .start-profilbox .vn-profilmodul-avatar-md { width: 70px; height: 88px; }
.start-community-viewport .start-profilbox .vn-profilmodul-name { font-size: var(--vn-font-md); }
}
.start-community-viewport .start-profilbox {
    min-width: 104px;
    max-width: 118px;
    min-height: 142px;
    padding: .52rem .48rem;
}
.start-community-viewport .start-profilbox .vn-profilmodul-avatar-md,
.start-community-viewport .start-profilbox .vn-profilmodul-avatar-lg {
    width: 52px;
    height: 66px;
}
.start-community-viewport .start-profilbox .vn-profilmodul-name {
    font-size: var(--vn-font-xs);
    line-height: 1.08;
}
.start-community-viewport .start-profilbox .vn-profilmodul-region {
    margin-top: .12rem;
font-size: var(--vn-font-xs);
    line-height: 1.15;
}
.start-profilbox--online .vn-profilmodul-online {
    display: none;
}

/* =========================================================
   GLOBAL-HANDOFF community.css
   Typo, Farben, Buttons, Badges und Hover kommen aus globale.css.
   Diese Datei liefert nur Seitenlayout, Abstände, Grids und Sondergrößen.
   ========================================================= */

/* =========================================================
   VN-BIKER – START / RIP-Gedenkkarten
   Datei: /forum/oeffentlich/css/rip-gedenkkarten.css
   Ziel: kleiner, würdiger, ruhiger, ohne Überlagerungen.
   ========================================================= */

.start-treffen-card--rip,
.start-treffen-viewport .start-treffen-card--rip.vn-scroll-termin {
    position: relative;
    isolation: isolate;
    flex: 0 0 216px;
    width: 216px;
    min-width: 216px;
    max-width: 216px;
    min-height: 286px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(14,14,18,.16), rgba(5,5,8,.95));
    box-shadow: 0 14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05);
}

.start-treffen-card--rip .start-treffen-card__image-wrap {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: rgba(0,0,0,.10);
}

.start-treffen-card--rip .start-treffen-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(1.20) contrast(1.03) saturate(.98);
    transform: scale(1.01);
}

.start-treffen-card--rip .start-treffen-card__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(5,6,8,.02) 0%,
            rgba(5,6,8,.06) 22%,
            rgba(5,6,8,.12) 40%,
            rgba(5,6,8,.34) 58%,
            rgba(5,5,7,.74) 78%,
            rgba(5,5,7,.97) 100%),
        radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 34%);
    pointer-events: none;
}

.start-treffen-card--rip .start-treffen-card__memorial-badge {
    position: absolute;
    z-index: 4;
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: .24rem .50rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(28,28,32,.82), rgba(10,10,13,.90));
    box-shadow: 0 5px 12px rgba(0,0,0,.15);
    color: rgba(255,255,255,.96);
    font-size: var(--vn-font-xs);
    font-weight: 820;
    letter-spacing: .025em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: none;
    white-space: nowrap;
}

.start-treffen-card--rip .start-treffen-card__quote {
    position: absolute;
    z-index: 3;
    top: 112px;
    left: 12px;
    right: 12px;
    color: rgba(255,255,255,.84);
    font-size: var(--vn-font-xs);
    font-weight: 820;
    letter-spacing: .07em;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,.16);
}

.start-treffen-card--rip .start-treffen-card__title {
    position: absolute;
    z-index: 3;
    left: 12px;
    right: 12px;
    bottom: 96px;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .32rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
    font-size: var(--vn-font-sm);
    font-weight: 840;
    line-height: 1.08;
    letter-spacing: -.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,.30);
}

.start-treffen-card--rip .start-treffen-card__title span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-treffen-card--rip .start-treffen-card__rip-star {
    flex: 0 0 auto;
    width: .94rem;
    height: .94rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(20,20,24,.92), rgba(7,7,10,.98));
    color: #fff;
    font-size: var(--vn-font-xs);
    line-height: 1;
    box-shadow: 0 5px 12px rgba(0,0,0,.15);
}

.start-treffen-card--rip .start-treffen-card__body {
    position: relative;
    z-index: 2;
    margin-top: auto;
    min-height: 112px;
    padding: 198px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 3px;
    background: linear-gradient(180deg,
        rgba(5,5,7,0) 0%,
        rgba(5,5,7,.02) 18%,
        rgba(5,5,7,.20) 38%,
        rgba(5,5,7,.64) 62%,
        rgba(5,5,7,.96) 100%);
}

.start-treffen-card--rip .start-treffen-card__date {
    display: block;
    color: #fff;
    font-size: var(--vn-font-sm);
    font-weight: 880;
    letter-spacing: .01em;
    line-height: 1.08;
}

.start-treffen-card--rip .start-treffen-card__date-label {
    display: block;
    color: rgba(255,255,255,.82);
    font-size: var(--vn-font-xs);
    font-weight: 730;
    letter-spacing: .06em;
    line-height: 1.1;
    text-transform: uppercase;
}

.start-treffen-card--rip .start-treffen-card__status--rip {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: .30rem .58rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
    background: linear-gradient(180deg, rgba(31,31,36,.82), rgba(12,12,15,.94));
    color: rgba(255,255,255,.98);
    font-size: var(--vn-font-xs);
    font-weight: 840;
    letter-spacing: .01em;
}

.start-treffen-card--rip .start-treffen-card__host {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.94);
    font-size: var(--vn-font-sm);
    font-weight: 730;
    line-height: 1.14;
}

@media (max-width: 980px) {
    .start-treffen-card--rip,
    .start-treffen-viewport .start-treffen-card--rip.vn-scroll-termin {
        flex-basis: 206px;
        width: 206px;
        min-width: 206px;
        max-width: 206px;
        min-height: 276px;
    }

    .start-treffen-card--rip .start-treffen-card__quote { top: 108px; }
    .start-treffen-card--rip .start-treffen-card__title { bottom: 92px; }
    .start-treffen-card--rip .start-treffen-card__body { padding-top: 190px; }
}

@media (max-width: 980px) and (orientation: landscape) {
    .start-treffen-card--rip,
    .start-treffen-viewport .start-treffen-card--rip.vn-scroll-termin {
        flex-basis: 196px;
        width: 196px;
        min-width: 196px;
        max-width: 196px;
        min-height: 246px;
    }

    .start-treffen-card--rip .start-treffen-card__quote { top: 92px; }
    .start-treffen-card--rip .start-treffen-card__title { bottom: 80px; }
    .start-treffen-card--rip .start-treffen-card__body { padding-top: 164px; }
}


/* =========================================================
   RIP-Karten – Angleichung an neue Termin-Card-Breite
   Ziel: gleiche Grundlinie wie Termin-Cards, aber ruhige
   Gedenkoptik ohne Aktionsüberladung.
   ========================================================= */

.start-treffen-card--rip .start-treffen-card__memorial-badge {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
}

.start-treffen-card--rip .start-treffen-card__quote {
    top: 122px;
    left: 14px;
    right: 14px;
    font-size: var(--vn-font-xs);
}

.start-treffen-card--rip .start-treffen-card__title {
    left: 14px;
    right: 14px;
    bottom: 100px;
    font-size: var(--vn-font-md);
}

.start-treffen-card--rip .start-treffen-card__body {
    padding: 198px 14px 14px;
    gap: 5px;
}

.start-treffen-card--rip .start-treffen-card__date {
    font-size: var(--vn-font-md);
}

.start-treffen-card--rip .start-treffen-card__host {
    font-size: var(--vn-font-sm);
    font-weight: 780;
}

.start-treffen-card--rip .start-treffen-card__status--rip {
    margin-top: 7px;
}

@media (max-width: 980px) {
    .start-treffen-card--rip .start-treffen-card__quote {
        top: 116px;
    }

    .start-treffen-card--rip .start-treffen-card__title {
        bottom: 94px;
    }

    .start-treffen-card--rip .start-treffen-card__body {
        padding-top: 190px;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    .start-treffen-card--rip .start-treffen-card__quote {
        top: 98px;
    }

    .start-treffen-card--rip .start-treffen-card__title {
        bottom: 82px;
    }

    .start-treffen-card--rip .start-treffen-card__body {
        padding-top: 164px;
    }
}

/* =========================================================
   GLOBAL-HANDOFF rip-gedenkkarten.css
   Typo, Farben, Buttons, Badges und Hover kommen aus globale.css.
   Diese Datei liefert nur Seitenlayout, Abstände, Grids und Sondergrößen.
   ========================================================= */

/* =========================================================
   RIP-Karten – finale vertikale Trennung nach Termin-Card-Angleichung
   Verhindert Überlagerung von Name, Todestag und Gedenk-Link.
   ========================================================= */

.start-treffen-card--rip,
.start-treffen-viewport .start-treffen-card--rip.vn-scroll-termin {
    min-height: 286px;
}

.start-treffen-card--rip .start-treffen-card__quote {
    top: 112px;
    left: 14px;
    right: 14px;
    z-index: 4;
}

.start-treffen-card--rip .start-treffen-card__title {
    top: auto;
    bottom: 108px;
    left: 14px;
    right: 14px;
    z-index: 5;
    min-height: 22px;
    max-height: 34px;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.start-treffen-card--rip .start-treffen-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    min-height: 102px;
    height: 102px;
    margin-top: 0;
    padding: 12px 14px 13px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    background: linear-gradient(
        180deg,
        rgba(5,5,7,0) 0%,
        rgba(5,5,7,.34) 18%,
        rgba(5,5,7,.78) 48%,
        rgba(5,5,7,.98) 100%
    );
}

.start-treffen-card--rip .start-treffen-card__date,
.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 {
    position: relative;
    z-index: 6;
}

.start-treffen-card--rip .start-treffen-card__date {
    margin: 0;
    font-size: var(--vn-font-sm);
    line-height: 1.08;
}

.start-treffen-card--rip .start-treffen-card__date-label {
    margin: 0;
    font-size: var(--vn-font-xs);
    line-height: 1.05;
}

.start-treffen-card--rip .start-treffen-card__status--rip {
    margin-top: 4px;
    min-height: 23px;
    padding: .22rem .52rem;
}

.start-treffen-card--rip .start-treffen-card__host {
    margin-top: 2px;
    font-size: var(--vn-font-sm);
    line-height: 1.10;
}

@media (max-width: 980px) {
    .start-treffen-card--rip,
    .start-treffen-viewport .start-treffen-card--rip.vn-scroll-termin {
        min-height: 276px;
    }

    .start-treffen-card--rip .start-treffen-card__quote {
        top: 104px;
    }

    .start-treffen-card--rip .start-treffen-card__title {
        bottom: 104px;
    }

    .start-treffen-card--rip .start-treffen-card__body {
        min-height: 98px;
        height: 98px;
        padding: 11px 13px 12px;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    .start-treffen-card--rip,
    .start-treffen-viewport .start-treffen-card--rip.vn-scroll-termin {
        min-height: 246px;
    }

    .start-treffen-card--rip .start-treffen-card__quote {
        top: 88px;
    }

    .start-treffen-card--rip .start-treffen-card__title {
        bottom: 92px;
    }

    .start-treffen-card--rip .start-treffen-card__body {
        min-height: 88px;
        height: 88px;
        padding: 9px 12px 10px;
    }
}


/* =========================================================
   06 Start – Terminleiste
   Quelle: terminleiste(2).css
   ========================================================= */

/* =========================================================
   VN-BIKER – START / Termine & Treffen
   Datei: /forum/oeffentlich/css/terminleiste.css
   Stabiler Fix: ruhige Karten, gleiche Grundhöhe wie RIP,
   weniger Leerraum und saubere horizontale Darstellung.
   ========================================================= */

.start-treffen-viewport {
    width: 100%;
    max-width: none;
    margin-right: 0;
    padding: 0 max(18px, calc((100vw - var(--vn-content-width, 1180px)) / 2 + 18px)) 10px 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--vn-scrollbar-thumb, rgba(255,255,255,.24)) transparent;
    min-height: 286px;
}

.start-treffen-viewport::-webkit-scrollbar { height: 6px; }
.start-treffen-viewport::-webkit-scrollbar-track { background: transparent; }
.start-treffen-viewport::-webkit-scrollbar-thumb {
    background: var(--vn-scrollbar-thumb, rgba(255,255,255,.24));
    border-radius: 999px;
}

.start-treffen-viewport .vn-scrollbox-track,
.start-treffen-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: max-content;
    min-width: max-content;
    min-height: 286px;
    padding: 2px 0;
    overflow: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}

.start-treffen-card,
.start-treffen-viewport .vn-scroll-card.vn-scroll-termin {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 252px;
    width: 252px;
    min-width: 252px;
    max-width: 252px;
    min-height: 286px;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: 22px;
    border: 1px solid var(--vn-border-soft, rgba(255,255,255,.10));
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(17,21,27,.44);
    color: var(--vn-text, #fff);
    box-shadow: var(--vn-shadow-card, inset 0 1px 0 rgba(255,255,255,.075), 0 12px 30px rgba(0,0,0,.22));
    backdrop-filter: var(--vn-blur-soft, blur(9px));
    -webkit-backdrop-filter: var(--vn-blur-soft, blur(9px));
    text-decoration: none;
}

.start-treffen-card.is-disabled {
    cursor: default;
    opacity: 1;
}

.start-treffen-card__image-wrap {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 116px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        rgba(0,0,0,.22);
}

.start-treffen-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.start-treffen-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,.10));
    pointer-events: none;
}

.start-treffen-card__quote {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 2;
    color: var(--vn-text, #fff);
    font-size: var(--vn-font-xs);
    font-weight: 740;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.44);
}

.start-treffen-card__title {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(10,13,18,.74);
    color: var(--vn-text, #fff);
    font-size: var(--vn-font-md);
    font-weight: 860;
    line-height: 1.12;
    text-shadow: 0 2px 8px rgba(0,0,0,.36);
}

.start-treffen-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 14px 14px;
    min-width: 0;
}

.start-treffen-card__date {
    display: block;
    color: var(--vn-text, #fff);
    font-size: var(--vn-font-md);
    font-weight: 880;
    line-height: 1.18;
}

.start-treffen-card__host {
    display: block;
    color: var(--vn-text-soft, rgba(255,255,255,.90));
    font-size: var(--vn-font-sm);
    line-height: 1.22;
}

.start-treffen-card__status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--vn-border-soft, rgba(255,255,255,.12));
    background: rgba(255,255,255,.08);
    color: var(--vn-text, #fff);
    font-size: var(--vn-font-sm);
    font-weight: 800;
}

.start-treffen-card__status--aktiv {
    color: var(--vn-green-text, #b7f0c7);
    border-color: var(--vn-green-border, rgba(69,208,109,.24));
    background: var(--vn-green-soft, rgba(69,208,109,.18));
}

.start-treffen-card__status--warnung {
    color: var(--vn-warning-text, #ffd79b);
    background: var(--vn-warning-soft, rgba(181,126,30,.22));
}

@media (max-width: 980px) {
    .start-treffen-viewport,
    .start-treffen-viewport .vn-scrollbox-track,
    .start-treffen-row { min-height: 276px; }

    .start-treffen-card,
    .start-treffen-viewport .vn-scroll-card.vn-scroll-termin {
        flex-basis: 244px;
        width: 244px;
        min-width: 244px;
        max-width: 244px;
        min-height: 276px;
    }

    .start-treffen-card__image-wrap { height: 110px; }
}

@media (max-width: 980px) and (orientation: landscape) {
    .start-treffen-viewport,
    .start-treffen-viewport .vn-scrollbox-track,
    .start-treffen-row { min-height: 246px; }

    .start-treffen-card,
    .start-treffen-viewport .vn-scroll-card.vn-scroll-termin {
        flex-basis: 228px;
        width: 228px;
        min-width: 228px;
        max-width: 228px;
        min-height: 246px;
    }

    .start-treffen-card__image-wrap { height: 98px; }
    .start-treffen-card__body { padding: 10px 10px 12px; gap: 6px; }
}

/* =========================================================
   GLOBAL-HANDOFF terminleiste.css
   Typo, Farben, Buttons, Badges und Hover kommen aus globale.css.
   Diese Datei liefert nur Seitenlayout, Abstände, Grids und Sondergrößen.
   ========================================================= */

/* =========================================================
   START FINAL 3-10 – ruhige Auslieferungslogik
   ========================================================= */

.start-content-wrap {
    margin-top: clamp(1.1rem, 2.2vw, 2.2rem);
}

.start-section-card--forums {
    padding: clamp(.82rem, 1.4vw, 1.08rem) 0 clamp(.9rem, 1.5vw, 1.18rem);
}

.start-section-card__head--link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(.9rem, 1.7vw, 1.45rem);
    margin-bottom: .65rem;
}

.start-section-card__titlelink {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .62rem;
    width: 100%;
    color: var(--vn-text);
    text-decoration: none;
}

.start-section-card__star--red {
    color: var(--vn-red-text, #ffaaa0);
    text-shadow: 0 2px 10px rgba(0,0,0,.42);
}

.start-section-card__arrow {
    margin-left: auto;
    color: var(--vn-gold);
    font-size: var(--vn-icon-size-md, 1.45rem);
    line-height: 1;
}


.start-switch-tabs {
    display: flex;
    align-items: center;
    gap: clamp(.82rem, 1.4vw, 1.2rem);
    padding: 0;
}

.start-switch-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--vn-text-soft);
    font-size: var(--vn-font-md);
    line-height: 1.1;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.start-switch-tab.is-active,
.start-switch-tab[aria-selected="true"] {
    color: var(--vn-gold);
}

.vn-profilmodul-avatar-md,
.start-hero-profile__avatar,
.start-profilbox .vn-profilmodul-avatar-md {
    border-radius: var(--vn-radius-md);
}

.start-profilbox {
    min-height: 156px;
}

.start-profilbox .vn-profilmodul-name,
.vn-profilmodul-name {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.start-treffen-card {
    width: clamp(220px, 20vw, 280px);
    min-height: 300px;
    overflow: hidden;
}

.start-treffen-card__image-wrap {
    min-height: 66%;
    height: 66%;
}

.start-treffen-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.start-treffen-card__quote,
.start-treffen-card__title {
    max-height: 1.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-treffen-card__body {
    gap: .38rem;
}

.start-treffen-card__status,
.start-treffen-card__date,
.start-treffen-card__host {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--vn-text-soft);
    font-size: var(--vn-font-sm);
    line-height: 1.18;
    font-weight: 850;
}

.start-treffen-card__status {
    color: var(--vn-gold);
    text-transform: uppercase;
    letter-spacing: .045em;
}


@media (max-width: 640px) {
    

    

    

    

    

    

    .start-section-card__head--link {
        padding-inline: .9rem;
    }

    .start-switch-tab {
        font-size: var(--vn-font-md);
    }

    .start-treffen-card {
        width: 240px;
        min-height: 310px;
    }
}

/* =========================================================
   Foren-Schaufenster / Gesamtlisten
   ========================================================= */
.foren-schaufenster {
    padding-top: clamp(7rem, 12vw, 10rem);
}

.foren-schaufenster__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(.72rem, 1.2vw, 1rem);
    padding: clamp(.9rem, 1.5vw, 1.2rem);
}

.foren-schaufenster__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .78rem;
    min-height: 92px;
    padding: .9rem 1rem;
}

.foren-schaufenster__icon,
.foren-schaufenster__arrow {
    color: var(--vn-gold);
    font-size: var(--vn-icon-size-md, 1.45rem);
}

.foren-schaufenster__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .22rem;
}

.foren-schaufenster__title {
    color: var(--vn-text);
    font-size: var(--vn-font-lg);
    line-height: 1.1;
    font-weight: 950;
}

.foren-schaufenster__text {
    color: var(--vn-text-muted);
    font-size: var(--vn-font-sm);
    line-height: 1.22;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
   Start Hero: Titel und Countdown entfernt
   ========================================================= */

.start-stage__title,
.start-stage__subtitle,
#countdownie {
    display: none;
}

.start-stage__inner {
    min-height: clamp(250px, 33vw, 430px);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: clamp(86px, 12vw, 150px);
    padding-bottom: clamp(24px, 4vw, 48px);
}

.start-hero-compact {
    margin-top: 0;
}

@media (max-width: 560px) {
    .start-stage__inner {
        min-height: 230px;
        padding-top: 82px;
        padding-bottom: 18px;
    }
}

@media (max-width: 390px) {
    .start-stage__inner {
        min-height: 215px;
        padding-top: 76px;
        padding-bottom: 16px;
    }
}


/* =========================================================
   Start Feinschliff final:
   Hero kompakter, Profilbox tiefer/links, Sound weiss rechts,
   Haken statt Pfeil, Forenbubble hoeher
   ========================================================= */

/* alte Titel-/Countdownreste sicher ausblenden */
.start-stage__title,
.start-stage__subtitle,
#countdownie,
.start-stage__kicker,
.start-stage__sound-label {
    display: none;
}

/* Hero nur etwas niedriger, nicht leerziehen */
.start-stage {
    min-height: clamp(315px, 29vw, 430px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.start-stage__inner {
    position: relative;
    width: min(calc(100% - 32px), var(--vn-content-width, 1180px));
    min-height: clamp(315px, 29vw, 430px);
    margin: 0 auto;
    padding: clamp(106px, 10vw, 148px) 18px clamp(26px, 3.5vw, 42px);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
}

/* Profil-/Gastbox: kompakter, tiefer, links auf Forenachse */
.start-hero-compact {
    position: relative;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(14px, 2vw, 24px);
    align-self: auto;
}

.start-hero-profile {
    width: min(100%, 332px);
    margin-left: 0;
    padding: 10px 12px;
    border-radius: var(--vn-radius-lg);
    overflow: visible;
}

.start-hero-profile__main {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.start-hero-profile__avatar-link,
.start-hero-profile__avatar {
    width: 90px;
    height: 90px;
}

.start-hero-profile__avatar {
    margin: 0;
    overflow: hidden;
    border-radius: var(--vn-radius-md);
}

.start-hero-profile__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.start-hero-profile__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}

.start-hero-profile__eyebrow {
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1.05;
    font-weight: 950;
}

.start-hero-profile__name-line {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    gap: .18rem;
}

.start-hero-profile__name {
    color: var(--vn-text);
    font-size: clamp(2.15rem, 3.3vw, 3.2rem);
    line-height: .98;
    font-weight: 950;
    letter-spacing: -.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gruppenstern hinter Anzeigename */
.vn-profilmodul-stern {
    display: inline;
    color: var(--vn-gold);
    font-size: .62em;
    line-height: 1;
    font-weight: 950;
    vertical-align: .18em;
}

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

.vn-profilmodul-stern.is-admin,
.vn-profilmodul-stern.is-administrator {
    color: #7eb6ff;
}

.vn-profilmodul-stern.is-moderation {
    color: #8ec8ff;
}

.vn-profilmodul-stern.is-vn-biker {
    color: #ff6b6b;
}

.vn-profilmodul-stern.is-orga {
    color: #d8c2ff;
}

.vn-profilmodul-stern.is-rip {
    color: #d7d7d7;
}

.vn-profilmodul-stern.is-biker {
    color: var(--vn-gold);
}

/* Gastbox kompakt: Kameraicon als goldene eckige Iconbox */
.start-hero-profile--guest {
    width: min(100%, 300px);
}

.start-hero-profile__main--guest {
    grid-template-columns: 76px minmax(0, 1fr);
}

.start-hero-profile__cta-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: var(--vn-radius-md);
    border: 1px solid rgba(255,212,90,.22);
    background: rgba(0,0,0,.18);
    color: var(--vn-gold);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.start-hero-profile__cta-icon i {
    color: currentColor;
    font-size: var(--vn-icon-size-xl, 2.05rem);
    line-height: 1;
}

.start-hero-profile__cta-text {
    display: none;
}

.start-hero-profile--guest .start-hero-profile__name {
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
}

.start-hero-profile__action {
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    font-weight: 900;
}

/* Sound rechts im Hero, weiss, auf Profilbox-Linie, keine sichtbare Linie */
.start-stage__audio {
    position: absolute;
    z-index: 4;
    right: clamp(24px, 7vw, 130px);
    top: 50%;
    transform: translateY(-20%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
}

.start-stage__audio::before {
    content: none;
    display: none;
}

.start-stage__sound-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--vn-text);
    font-size: var(--vn-icon-size-lg, 1.75rem);
    line-height: 1;
    cursor: pointer;
}

.start-stage__sound-button.is-playing {
    color: var(--vn-gold);
}
.start-stage__sound-button i {
    color: currentColor;
    font-size: 1em;
    line-height: 1;
}

/* Biker-/VN-Biker-Block: Haken statt Pfeil */
.start-section-card__arrow {
    margin-left: auto;
    color: var(--vn-gold);
    font-size: var(--vn-icon-size-md, 1.45rem);
    line-height: 1;
}

/* Biker-Block etwas naeher an Hero */
.start-content-wrap {
    margin-top: clamp(-8px, -0.8vw, 0px);
}

/* Forenbubble: hoeher, ruhiger, klarere Achse */


/* Tablet */
@media (max-width: 980px) {
    .start-stage {
        min-height: 300px;
    }

    .start-stage__inner {
        min-height: 300px;
        padding-top: 100px;
        padding-bottom: 24px;
    }

    .start-hero-profile {
        width: min(100%, 320px);
    }

    .start-hero-profile__main {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .start-hero-profile__avatar-link,
    .start-hero-profile__avatar {
        width: 82px;
        height: 82px;
    }

    .start-stage__audio {
        right: clamp(18px, 4vw, 52px);
    }

    
}

/* Mobile */
@media (max-width: 560px) {
    .start-stage {
        min-height: 250px;
    }

    .start-stage__inner {
        width: min(calc(100% - 20px), var(--vn-content-width, 1180px));
        min-height: 250px;
        padding-top: 84px;
        padding-bottom: 16px;
        align-items: flex-start;
    }

    .start-hero-profile {
        width: min(100%, 275px);
        padding: 9px 10px;
    }

    .start-hero-profile__main {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 11px;
    }

    .start-hero-profile__avatar-link,
    .start-hero-profile__avatar {
        width: 68px;
        height: 68px;
    }

    .start-hero-profile__name {
        font-size: clamp(1.85rem, 8vw, 2.55rem);
    }

    .start-hero-profile__eyebrow,
    .start-hero-profile__action {
        font-size: var(--vn-font-xs);
    }

    .start-hero-profile--guest {
        width: min(100%, 255px);
    }

    .start-hero-profile__main--guest {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .start-hero-profile__cta-box {
        width: 62px;
        height: 62px;
    }

    .start-stage__audio {
        right: 14px;
        top: 58%;
    }

    .start-stage__sound-button {
        width: 42px;
        height: 42px;
        font-size: var(--vn-icon-size-md, 1.5rem);
    }

    .start-content-wrap {
        margin-top: -6px;
    }

    

    

    

    
}

@media (max-width: 390px) {
    .start-stage {
        min-height: 235px;
    }

    .start-stage__inner {
        min-height: 235px;
        padding-top: 78px;
        padding-bottom: 14px;
    }

    .start-hero-profile {
        width: min(100%, 248px);
    }

    .start-stage__audio {
        right: 10px;
        top: 58%;
    }

    .start-stage__sound-button {
        width: 38px;
        height: 38px;
    }
}

/* =========================================================
   FINAL 2026-05-10 – Start/Kopf/Fuß Deltas
   ========================================================= */
.start-hero-compact.is-guest .start-hero-profile {
    transform: translateY(18px);
}

.start-hero-profile__cta-icon,
.start-hero-profile__cta-icon i {
    color: var(--vn-gold);
}

.start-hero-compact.is-member .start-hero-profile--member {
    display: none;
}

.start-section-card__titlelink {
    gap: .48rem;
}

.start-section-card__arrow {
    color: var(--vn-gold);
    font-size: 1rem;
    transform: translateY(.02rem);
}

.start-section-card__star,
.start-section-card__star--red {
    color: #d92727;
}


.start-switch-tabs {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .72rem;
}

.start-switch-tab {
    color: var(--vn-text);
    font-weight: 950;
}

.start-switch-tab.is-active,
.start-switch-tab[aria-selected="true"] {
    color: var(--vn-gold);
}

.start-switch-tab[data-switch-target="community-rip"] {
    margin-left: auto;
}

.start-community-viewport .vn-scrollbox-track {
    align-items: stretch;
}

.start-community-viewport .vn-scrollbox-item {
    display: flex;
}

.start-community-viewport .vn-profilkarte,
.start-community-viewport .start-profilbox {
    width: clamp(128px, 12.5vw, 154px);
    min-width: clamp(128px, 12.5vw, 154px);
    height: 214px;
    min-height: 214px;
    max-height: 214px;
}

.start-community-viewport .vn-profilkarte__link {
    height: 100%;
}

.start-community-viewport .vn-profilkarte__bildrahmen {
    aspect-ratio: auto;
    height: 128px;
    min-height: 128px;
    max-height: 128px;
}

.start-community-viewport .vn-profilkarte__inhalt {
    padding: .52rem .58rem .6rem;
}

.start-community-viewport .vn-profilkarte__namezeile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    min-width: 0;
}

.start-community-viewport .vn-profilkarte__name {
    font-size: var(--vn-font-sm);
    min-width: 0;
}

.start-community-viewport .vn-profilkarte__stern {
    flex: 0 0 auto;
    margin-left: .08rem;
}

.start-community-viewport .vn-profilkarte__bike {
    display: none;
}

.start-community-viewport .vn-profilkarte__meta,
.start-community-viewport .vn-profilkarte__geburtstag,
.start-community-viewport .vn-profilkarte__zeit {
    margin-top: .28rem;
    font-size: var(--vn-font-xs);
    line-height: 1.15;
}

.start-treffen-viewport .vn-scrollbox-track {
    align-items: stretch;
}

.start-treffen-card,
.vn-scroll-termin {
    width: clamp(260px, 25vw, 320px);
    min-width: clamp(260px, 25vw, 320px);
    height: 346px;
    min-height: 346px;
    max-height: 346px;
    overflow: hidden;
}

.start-treffen-card__image-wrap {
    height: 206px;
    min-height: 206px;
    max-height: 206px;
}

.start-treffen-card__quote,
.start-treffen-card__memorial-badge {
    display: none;
}

.start-treffen-card__title {
    max-height: 2.35em;
    overflow: hidden;
}

.start-treffen-card__body {
    min-height: 0;
    gap: .34rem;
    padding: .72rem .82rem .86rem;
}

.start-treffen-card__date,
.start-treffen-card__status,
.start-treffen-card__host {
    font-size: var(--vn-font-sm);
    line-height: 1.22;
}

@media (max-width: 760px) {
    

    

    

    

    

    

    

    

    .start-community-viewport .vn-profilkarte,
    .start-community-viewport .start-profilbox {
        width: 38vw;
        min-width: 38vw;
        max-width: 148px;
        height: 206px;
        min-height: 206px;
        max-height: 206px;
    }

    .start-community-viewport .vn-profilkarte__bildrahmen {
        height: 122px;
        min-height: 122px;
        max-height: 122px;
    }

    .start-treffen-card,
    .vn-scroll-termin {
        width: 76vw;
        min-width: 76vw;
        max-width: 330px;
        height: 338px;
        min-height: 338px;
        max-height: 338px;
    }
}

/* =========================================================
   FINAL 2026-05-11 – Startachsen / Schaufenster / Drehscheiben-Haken
   ========================================================= */

.start-section-card__titlelink,
.start-section-card__titletext {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.start-section-card__titletext {
    gap: .34rem;
}

.start-section-card__check,
.start-section-card__checklink {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vn-gold, #ffd45a);
    font-size: clamp(1.18rem, 1.55vw, 1.62rem);
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,.48);
}

.start-section-card__checklink {
    margin-left: auto;
    min-width: 2.1rem;
    min-height: 2.1rem;
    text-decoration: none;
}

.start-section-card__head--link,
.start-section-card__head--between,
.start-switch-head {
    align-items: center;
}

/* Foren-Überschriften: eine linke Achse, größer, nicht zentriert */


/* Themen-Bubbles grundsätzlich links ausrichten */


/* Community-Tabs: Geburtstag direkt neben Heute; RIP bleibt rechts außen. */
.start-switch-tab[data-switch-target="community-rip"] {
    margin-left: auto;
}

.start-switch-tab[data-switch-target="community-birthday"] {
    margin-left: 0;
}

.start-switch-head .start-switch-tabs {
    min-width: 0;
    flex: 1 1 auto;
}

@media (max-width: 760px) {
    

    

    .start-switch-tabs {
        gap: .55rem;
    }

    .start-section-card__checklink {
        min-width: 1.8rem;
        min-height: 1.8rem;
    }
}

/* =========================================================
   START – Bildkarten aktivieren
   Nutzt die globale .vn-bildkarte-Basis für Treffen, Termine und Profile.
   Bestehende Livecards / Erstellen / Bearbeiten bleiben unberührt.
   ========================================================= */

.start-community-viewport .vn-profil-bildkarte {
    flex: 0 0 clamp(142px, 13vw, 168px);
    width: clamp(142px, 13vw, 168px);
    min-width: clamp(142px, 13vw, 168px);
    height: clamp(214px, 20vw, 244px);
}

.start-treffen-viewport .vn-treffen-eventcard,
.start-treffen-viewport .vn-termin-bildkarte {
    flex: 0 0 clamp(274px, 26vw, 336px);
    width: clamp(274px, 26vw, 336px);
    min-width: clamp(274px, 26vw, 336px);
}

.start-treffen-viewport .vn-treffen-eventcard {
    min-height: 382px;
}

.start-treffen-viewport .vn-termin-bildkarte {
    min-height: 354px;
}

.start-treffen-viewport .vn-treffen-eventcard__image {
    height: clamp(162px, 15vw, 198px);
}

.start-treffen-viewport .vn-termin-bildkarte__image {
    height: clamp(154px, 14vw, 186px);
}

@media (max-width: 760px) {
    .start-community-viewport .vn-profil-bildkarte {
        flex-basis: 42vw;
        width: 42vw;
        min-width: 42vw;
        max-width: 164px;
        height: 222px;
    }

    .start-treffen-viewport .vn-treffen-eventcard,
    .start-treffen-viewport .vn-termin-bildkarte {
        flex-basis: 78vw;
        width: 78vw;
        min-width: 78vw;
        max-width: 336px;
    }
}

/* =========================================================
   START – nur Scroll-Delta
   Ziel: Profil-/Community-Scroller wie Treffen/Termine nach rechts öffnen.
   Keine Header-, Tab-, Bubble-, Hero- oder Card-Änderung.
   ========================================================= */

.start-section-card--open-right {
    overflow: visible;
}

.start-section-card--open-right .vn-scrollbox,
.start-section-card--open-right .start-scrollbox {
    overflow: visible;
}

/* Community/Profilbereich: nach rechts über die Inhaltskante öffnen */
.start-community-viewport {
    width: calc(100% + max(16px, (100vw - var(--vn-content-width, 1180px)) / 2 + 16px));
    margin-right: calc(-1 * max(16px, (100vw - var(--vn-content-width, 1180px)) / 2 + 16px));
    padding-right: max(32px, (100vw - var(--vn-content-width, 1180px)) / 2 + 32px);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Track nicht künstlich umbrechen oder einengen */
.start-community-viewport .vn-scrollbox-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content;
    align-items: stretch;
    gap: var(--vn-scroll-gap, 14px);
    padding-right: 42px;
}

/* Items behalten feste Scroller-Breite */
.start-community-viewport .vn-scrollbox-item,
.start-community-viewport .vn-scroll-item {
    flex: 0 0 auto;
}

/* Nur dezentes Reinlaufen des Tracks, ohne Layoutverschiebung */

@keyframes start-community-scroll-in {
    from {
        transform: translateX(18px);
        opacity: .72;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .start-community-viewport .vn-scrollbox-track {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .start-community-viewport {
        width: calc(100% + 14px);
        margin-right: -14px;
        padding-right: 28px;
    }
}

/* START – Scroll beruhigen */
.start-community-viewport .vn-scrollbox-track {
    animation: none;
    transform: none;
    opacity: 1;
}

.start-community-viewport {
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
}

/* =========================================================
   FINAL START 2026 – stabile CSS-Ergänzung nach PHP-Delta
   Ziel:
   - echtes > aus PHP sauber anzeigen
   - Statistik-Bubbles kompakt: nur Icon + Zahl
   - Inhalte links ausrichten
   - Card-Hintergrund nur auf Foren-/Themenbubbles
   - Community-Scroll ruhig/offen
   ========================================================= */

/* Echtes > aus dem PHP-Markup */
.start-section-card__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    margin-left: .62rem;
    color: var(--vn-gold, #ffd45a);
    font-weight: 1000;
    font-size: clamp(1.38rem, 2vw, 1.78rem);
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,.42);
}

.start-section-card__checklink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    min-height: 2.1rem;
    color: var(--vn-gold, #ffd45a);
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Alte Icon-Haken nur verstecken, falls altes Markup parallel noch im Cache liegt */
.start-section-card__check.fa-check,
.start-section-card__checklink .fa-check {
    display: none;
}

/* Statistik-Bubbles: PHP liefert compact-Klassen; Altmarkup wird zusätzlich stabilisiert */


/* sichtbare Texte Themen/Beiträge raus, Icon + Zahl bleiben */


/* Inhalte der Themen-/Beitragsbubbles links */


/* Der Zeilencontainer selbst bleibt transparent, damit kein flächiger Hintergrund entsteht */


/* Community/Profilscroll bleibt offen, aber ohne nervöse Bewegung */
.start-community-viewport {
    width: calc(100% + max(16px, (100vw - var(--vn-content-width, 1180px)) / 2 + 16px));
    margin-right: calc(-1 * max(16px, (100vw - var(--vn-content-width, 1180px)) / 2 + 16px));
    padding-right: max(32px, (100vw - var(--vn-content-width, 1180px)) / 2 + 32px);
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.start-community-viewport .vn-scrollbox-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content;
    align-items: stretch;
    gap: var(--vn-scroll-gap, 14px);
    padding-right: 42px;
    animation: none;
    transform: none;
    opacity: 1;
}

.start-community-viewport .vn-scrollbox-item,
.start-community-viewport .vn-scroll-item {
    flex: 0 0 auto;
}

/* kleine Screens */
@media (max-width: 760px) {
    .start-section-card__more {
        min-width: 1.25rem;
        margin-left: .38rem;
        font-size: 1.38rem;
    }

    .start-section-card__checklink {
        min-width: 1.7rem;
        min-height: 1.7rem;
    }

    

    .start-community-viewport {
        width: calc(100% + 14px);
        margin-right: -14px;
        padding-right: 28px;
    }
}

/* START – Forenbubbles minimal ruhiger / weniger grau */


/* rechte Themen-/Stat-Bubbles etwas klarer, nicht heller */


/* =========================================================
   FINAL 2026-05-11 – Hover-Handoff an globale.css
   Start.css setzt hier nur Layout/Normalzustand.
   Keine lokalen Hover-Flaechen fuer Foren-/Themenbubbles.
   ========================================================= */

/* Pfeile bleiben im Normalzustand goldgelb; Hover kommt global ueber Link/Action-Regeln. */
.start-section-card__more,
.start-section-card__checklink,
.start-switch-morelink,
.start-switch-moregroup .start-switch-tab--right {
    color: var(--vn-gold, #ffd45a);
}

/* Tabs/Punkttrenner bleiben ruhig im Normalzustand. */
.start-switch-tabs--separated {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: auto;
}

.start-tab-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 .46rem;
    color: rgba(255,255,255,.72);
    font-weight: 950;
    line-height: 1;
}

.start-switch-moregroup,
.start-switch-morelink {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .58rem;
    margin-left: auto;
    white-space: nowrap;
    line-height: 1;
}

.start-switch-morelink--icononly span {
    display: none;
}

/* RIP-Bilder auf der Startseite etwas aufhellen, ohne Hover-Effekt. */
.start-community-viewport .vn-profilkarte--rip img,
.start-community-viewport .start-profilbox--rip img,
.start-community-viewport [data-start-card="rip"] img,
.start-community-viewport .vn-profilkarte.is-rip img {
    filter: brightness(1.16) contrast(1.04) saturate(1.03);
}

/* Scroll ruhig, ohne Animation und ohne !important. */


.start-community-viewport .vn-scrollbox-track {
    animation: none;
    transform: none;
    opacity: 1;
}

@media (max-width: 760px) {
    .start-tab-separator {
        margin: 0 .32rem;
    }

    .start-switch-moregroup,
    .start-switch-morelink {
        gap: .42rem;
    }
}

/* =========================================================
   FINAL 2026-05-11 – Forenbubble-Aktiv wie Fußzeile inkl. Bots
   Desktop: rechts untereinander.
   Mobile hochkant: unten nebeneinander mit Punkttrenner.
   ========================================================= */


/* =========================================================
   FINAL 2026-05-12 – Mobile Aktiv-Anzeige sauber unten
   Verhindert die mittige/alte Anmutung in schmalen Layouts.
   Desktop bleibt rechts, mobile hochkant wird unten links.
   ========================================================= */


/* sehr schmale Browser-/Webview-Breiten auch ohne Orientation-Angabe abfangen */


/* =========================================================
   FINAL 2026-05-13 – Start: dunkle Forenbubbles + Plakatkarten
   Ziel: Treffen/Termine/RIP ruhige Bildkarten-Familie, Forenbubbles
   wieder dunkle globale Glasoptik statt gebrochenem Weiss.
   ========================================================= */

/* Forenblöcke zurück auf globale dunkle Glasoptik */


/* Treffen- und Termin-Startkarten: gemeinsame dunkle Plakatoptik */
.start-treffen-viewport .vn-treffen-eventcard,
.start-treffen-viewport .vn-termin-bildkarte {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 clamp(260px, 25vw, 320px);
    width: clamp(260px, 25vw, 320px);
    min-width: clamp(260px, 25vw, 320px);
    height: 346px;
    min-height: 346px;
    max-height: 346px;
    border-radius: var(--vn-radius-lg, 22px);
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(6,8,12,.74);
    color: var(--vn-text, #fff);
    box-shadow: var(--vn-shadow-card, 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055));
    text-decoration: none;
}

.start-treffen-viewport .vn-treffen-eventcard__image,
.start-treffen-viewport .vn-termin-bildkarte__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 14%, rgba(255,212,90,.18), transparent 34%),
        rgba(0,0,0,.34);
}

.start-treffen-viewport .vn-treffen-eventcard__image img,
.start-treffen-viewport .vn-termin-bildkarte__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(.93) contrast(1.04) saturate(1.02);
}

.start-treffen-viewport .vn-treffen-eventcard__image::after,
.start-treffen-viewport .vn-termin-bildkarte__image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,.03) 0%,
            rgba(0,0,0,.10) 32%,
            rgba(0,0,0,.38) 58%,
            rgba(0,0,0,.82) 82%,
            rgba(0,0,0,.96) 100%),
        radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 34%);
    pointer-events: none;
}

.start-treffen-viewport .vn-treffen-eventcard__main {
    position: static;
    display: contents;
    color: inherit;
    text-decoration: none;
}

.start-treffen-viewport .vn-treffen-eventcard__titleband,
.start-treffen-viewport .vn-termin-bildkarte__titleband {
    position: absolute;
    z-index: 4;
    left: 0;
    right: auto;
    bottom: 126px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: calc(100% - 14px);
    min-height: 34px;
    padding: 7px 13px 7px 14px;
    border-radius: 0 14px 14px 0;
    border: 1px solid rgba(255,255,255,.12);
    border-left: 0;
    background: rgba(8,10,14,.76);
    color: var(--vn-text, #fff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.22);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    font-size: var(--vn-font-md, 1rem);
    font-weight: 950;
    line-height: 1.06;
    text-shadow: var(--vn-text-shadow-soft, 0 1px 8px rgba(0,0,0,.38));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.start-treffen-viewport .vn-treffen-eventcard__badge,
.start-treffen-viewport .vn-termin-chip--neu {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    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: var(--vn-font-xs, .78rem);
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .035em;
    text-shadow: none;
}

.start-treffen-viewport .vn-treffen-eventcard__body,
.start-treffen-viewport .vn-termin-bildkarte__body {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 5px;
    min-height: 156px;
    padding: 72px 14px 14px;
    background: linear-gradient(180deg,
        rgba(5,5,7,0) 0%,
        rgba(5,5,7,.26) 20%,
        rgba(5,5,7,.70) 58%,
        rgba(5,5,7,.98) 100%);
    color: var(--vn-text, #fff);
}

.start-treffen-viewport .vn-treffen-eventcard__date,
.start-treffen-viewport .vn-termin-bildkarte__date,
.start-treffen-viewport .vn-treffen-eventcard__meta,
.start-treffen-viewport .vn-termin-bildkarte__meta,
.start-treffen-viewport .vn-termin-bildkarte__text,
.start-treffen-viewport .vn-treffen-eventcard__place,
.start-treffen-viewport .vn-treffen-eventcard__host,
.start-treffen-viewport .vn-treffen-eventcard__facts,
.start-treffen-viewport .vn-treffen-eventcard__fact {
    color: var(--vn-text-soft, rgba(255,255,255,.84));
    text-shadow: var(--vn-text-shadow-soft, 0 1px 8px rgba(0,0,0,.38));
}

.start-treffen-viewport .vn-treffen-eventcard__date,
.start-treffen-viewport .vn-termin-bildkarte__date {
    color: var(--vn-text, #fff);
    font-size: var(--vn-font-sm, .96rem);
    font-weight: 950;
    line-height: 1.12;
}

.start-treffen-viewport .vn-treffen-eventcard__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.start-treffen-viewport .vn-treffen-eventcard__place,
.start-treffen-viewport .vn-treffen-eventcard__host,
.start-treffen-viewport .vn-treffen-eventcard__fact,
.start-treffen-viewport .vn-termin-bildkarte__meta,
.start-treffen-viewport .vn-termin-bildkarte__text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--vn-font-sm, .96rem);
    line-height: 1.14;
    font-weight: 850;
}

.start-treffen-viewport .vn-treffen-eventcard__host a {
    color: var(--vn-text, #fff);
    text-decoration: none;
}

.start-treffen-viewport .vn-treffen-eventcard__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    margin-top: 2px;
    justify-content: flex-start;
}

.start-treffen-viewport .vn-treffen-eventcard__fact i,
.start-treffen-viewport .vn-treffen-eventcard__place i,
.start-treffen-viewport .vn-treffen-eventcard__host i,
.start-treffen-viewport .vn-termin-bildkarte__meta i,
.start-treffen-viewport .vn-termin-bildkarte__date i {
    width: 1em;
    min-width: 1em;
    color: rgba(255,255,255,.86);
    text-align: center;
}

.start-treffen-viewport .vn-treffen-eventcard__fact.is-own,
.start-treffen-viewport .vn-treffen-eventcard__fact.is-own i,
.start-treffen-viewport .vn-treffen-eventcard.is-own .vn-treffen-eventcard__date,
.start-treffen-viewport .vn-termin-bildkarte.is-own .vn-termin-bildkarte__date {
    color: var(--vn-green-text, #bfffd3);
}

.start-treffen-viewport .vn-treffen-eventcard__fact.is-full,
.start-treffen-viewport .vn-treffen-eventcard__fact.is-full i {
    color: var(--vn-red-text, #ffaaa0);
}

.start-treffen-viewport .vn-termin-bildkarte__actions {
    position: relative;
    z-index: 5;
    margin-top: 6px;
}

.start-treffen-viewport .vn-termin-bildkarte__actions .vn-icon-action,
.start-treffen-viewport .vn-termin-bildkarte__actions .vn-btn-icon,
.start-treffen-viewport .vn-termin-bildkarte__actions a {
    color: var(--vn-gold, #ffd45a);
}

@media (max-width: 760px) {
    .start-treffen-viewport .vn-treffen-eventcard,
    .start-treffen-viewport .vn-termin-bildkarte {
        flex-basis: 76vw;
        width: 76vw;
        min-width: 76vw;
        max-width: 330px;
        height: 338px;
        min-height: 338px;
        max-height: 338px;
    }

    .start-treffen-viewport .vn-treffen-eventcard__titleband,
    .start-treffen-viewport .vn-termin-bildkarte__titleband {
        bottom: 124px;
        max-width: calc(100% - 12px);
    }
}

/* Start: Terminkarte optisch analog Treffencard */
.start-treffen-viewport .vn-termin-eventcard,
.start-treffen-viewport .vn-termin-bildkarte {
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(8,10,14,.72);
    color: var(--vn-text);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__body,
.start-treffen-viewport .vn-termin-bildkarte__body {
    background: transparent;
    color: var(--vn-text);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: rgba(255,255,255,.94);
    text-shadow: 0 2px 8px rgba(0,0,0,.42);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__meta,
.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__facts,
.start-treffen-viewport .vn-termin-bildkarte__date,
.start-treffen-viewport .vn-termin-bildkarte__meta,
.start-treffen-viewport .vn-termin-bildkarte__text {
    color: rgba(255,255,255,.94);
    text-shadow: 0 2px 8px rgba(0,0,0,.42);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact.is-own,
.start-treffen-viewport .vn-termin-bildkarte .is-own {
    color: var(--vn-green-text, #bfffd3);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__image::after,
.start-treffen-viewport .vn-termin-bildkarte__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.16) 38%,
            rgba(0,0,0,.78) 100%);
    pointer-events: none;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__titleband,
.start-treffen-viewport .vn-termin-bildkarte__titleband {
    left: 0;
    right: auto;
    max-width: calc(100% - 18px);
    width: fit-content;
    border-radius: 0 14px 14px 0;
    background: rgba(8,10,14,.72);
    color: var(--vn-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* START – Terminkarte Feinschliff nach dunkler Plakatoptik */
.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__image,
.start-treffen-viewport .vn-termin-bildkarte__image {
    min-height: 218px;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__image::after,
.start-treffen-viewport .vn-termin-bildkarte__image::after {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.10) 34%,
            rgba(0,0,0,.50) 70%,
            rgba(0,0,0,.88) 100%
        );
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__titleband,
.start-treffen-viewport .vn-termin-bildkarte__titleband {
    bottom: 72px;
    left: 0;
    right: auto;
    max-width: calc(100% - 18px);
    width: fit-content;
    min-height: 0;
    padding: 6px 12px 7px;
    border-radius: 0 14px 14px 0;
    background: rgba(8,10,14,.74);
    color: var(--vn-text);
    line-height: 1.08;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__body,
.start-treffen-viewport .vn-termin-bildkarte__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 14px 14px;
    background: transparent;
    gap: 4px;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__date {
    font-size: var(--vn-font-sm);
    line-height: 1.12;
    font-weight: 950;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__meta {
    gap: 3px;
    font-size: var(--vn-font-xs);
    line-height: 1.12;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__facts {
    margin-top: 2px;
    gap: 7px;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact {
    font-size: var(--vn-font-xs);
    line-height: 1.08;
}
/* START – Terminkarte: nur aussagekräftige Status anzeigen */
.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact.is-own {
    color: var(--vn-green-text, #bfffd3);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__facts:empty {
    display: none;
}

/* START – Terminkarte: Datum immer sichtbar, generisches Terminlabel weg */
.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 0 14px 14px;
    display: grid;
    gap: 4px;
    background: transparent;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__date {
    display: block;
    color: rgba(255,255,255,.96);
    font-size: var(--vn-font-sm);
    line-height: 1.12;
    font-weight: 950;
    text-shadow: 0 2px 8px rgba(0,0,0,.48);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact[data-status="termin"],
.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact.is-generic {
    display: none;
}

/* START – Terminkarte: Datum zweizeilig, Privatstatus sichtbar, Veranstalter-Stern */
.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: rgba(255,255,255,.96);
    font-size: var(--vn-font-sm);
    line-height: 1.12;
    font-weight: 950;
    text-shadow: 0 2px 8px rgba(0,0,0,.48);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__date span {
    display: block;
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__host {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.start-treffen-viewport .vn-termin-eventcard .vn-termin-host-star {
    margin-left: 0;
    font-size: .88em;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact.is-own {
    color: var(--vn-green-text, #bfffd3);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact.is-private {
    color: var(--vn-gold, #ffd45a);
}

.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact.is-generic,
.start-treffen-viewport .vn-termin-eventcard .vn-treffen-eventcard__fact[data-status="termin"] {
    display: none;
}

/* =========================================================
   FINAL 2026-05-14 – Foren-Live gezielt zurück auf altes Layout
   - links Forenbubble: Name, kleine Gesamtzahlen, aktive Nutzer
   - rechts Rail: neue Inhalte nur wenn > 0, danach 5 letzte Themen
   - keine Änderungen an Treffen/Terminen/RIP
   ========================================================= */
.start-section-card--forums .start-forum-live-shell {
    overflow: visible;
}

.start-section-card--forums .start-forum-list--vertical {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    gap: clamp(.68rem, 1vw, .86rem);
}

.start-section-card--forums .start-forum-row-live {
    display: grid;
    grid-template-columns: minmax(270px, 36%) minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(82px, 7vw, 112px);
    gap: clamp(.68rem, 1.05vw, .96rem);
    overflow: visible;
}

.start-section-card--forums .start-forum-row-live__main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: .9rem;
    row-gap: .24rem;
    min-width: 0;
    padding: .82rem 1rem;
    border-radius: var(--vn-radius-lg);
    background: rgba(0,0,0,.24);
}

.start-section-card--forums .start-forum-row-live__titleline {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.start-section-card--forums .start-forum-row-live__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vn-text);
    font-size: clamp(1.2rem, 1.65vw, 1.52rem);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.02em;
}

.start-section-card--forums .start-forum-row-live__totals {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    width: fit-content;
    max-width: 100%;
    color: rgba(255,255,255,.72);
    font-size: var(--vn-font-xs);
    line-height: 1;
    font-weight: 850;
    opacity: .78;
}

.start-section-card--forums .start-forum-row-live__totals span {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    white-space: nowrap;
}

.start-section-card--forums .start-forum-row-live__totals i {
    color: var(--vn-gold);
    font-size: .9em;
    opacity: .9;
}

.start-section-card--forums .start-forum-row-live__presence {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .18rem;
    margin: 0;
    color: rgba(255,255,255,.74);
    font-size: var(--vn-font-xs);
    line-height: 1.05;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.start-section-card--forums .start-forum-row-live__presence-item {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
}

.start-section-card--forums .start-forum-row-live__presence-item strong {
    color: var(--vn-gold);
    font-weight: 950;
}

.start-section-card--forums .start-forum-row-live__rail {
    display: flex;
    align-items: stretch;
    gap: .72rem;
    min-width: 0;
    width: calc(100% + clamp(110px, 18vw, 280px));
    margin-right: calc(-1 * clamp(110px, 18vw, 280px));
    padding: .58rem clamp(110px, 18vw, 280px) .58rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    mask-image: linear-gradient(90deg, #000 0%, #000 82%, rgba(0,0,0,.42) 94%, transparent 100%);
}

.start-section-card--forums .start-forum-row-live__rail::-webkit-scrollbar {
    height: 5px;
}

.start-section-card--forums .start-forum-row-live__newstats {
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .28rem;
    padding: .52rem .58rem;
    border-radius: var(--vn-radius-md);
    border: 1px solid var(--vn-border-soft);
    background: rgba(0,0,0,.34);
    box-shadow: var(--vn-shadow-inset);
    scroll-snap-align: start;
    animation: startForumSlideIn .32s ease-out both;
}

.start-section-card--forums .start-forum-row-live__newstat {
    display: grid;
    grid-template-columns: 1rem 1fr;
    align-items: center;
    gap: .28rem;
    color: var(--vn-text);
    font-size: var(--vn-font-xs);
    line-height: 1;
    font-weight: 950;
}

.start-section-card--forums .start-forum-row-live__newstat i {
    color: var(--vn-gold);
    font-size: .95em;
}

.start-section-card--forums .start-forum-row-live__newstat strong {
    color: var(--vn-text);
    font-weight: 950;
    text-align: right;
}

.start-section-card--forums .start-forum-row-live__stats {
    display: none;
}

.start-section-card--forums .start-forum-row-live__activity {
    flex: 0 0 clamp(245px, 24vw, 330px);
    width: clamp(245px, 24vw, 330px);
    min-width: clamp(245px, 24vw, 330px);
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .16rem;
    padding: .58rem .78rem;
    border-radius: var(--vn-radius-md);
    border: 1px solid var(--vn-border-soft);
    background: rgba(0,0,0,.28);
    box-shadow: var(--vn-shadow-inset);
    color: var(--vn-text);
    text-decoration: none;
    scroll-snap-align: start;
    animation: startForumSlideIn .32s ease-out both;
}

.start-section-card--forums .start-forum-row-live__chips {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    min-height: 1rem;
}

.start-section-card--forums .start-forum-row-live__prefix,
.start-section-card--forums .start-forum-row-live__model {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--vn-gold);
    font-size: var(--vn-font-xs);
    line-height: 1;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.start-section-card--forums .start-forum-row-live__model {
    color: var(--vn-text-soft);
}

.start-section-card--forums .start-forum-row-live__activity-title {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1.08;
    font-weight: 950;
}

.start-section-card--forums .start-forum-row-live__activity-meta {
    display: flex;
    align-items: center;
    gap: .38rem;
    max-width: 100%;
    overflow: hidden;
    color: var(--vn-text-muted);
    font-size: var(--vn-font-xs);
    line-height: 1.05;
    white-space: nowrap;
}

.start-section-card--forums .start-forum-row-live__activity-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.start-section-card--forums .start-forum-row-live__activity-meta span + span::before {
    content: "·";
    margin-right: .34rem;
    opacity: .62;
}

@keyframes startForumSlideIn {
    from { opacity: 0; transform: translateX(34px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 760px) {
    .start-section-card--forums .start-forum-row-live {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: .44rem;
    }

    .start-section-card--forums .start-forum-row-live__main {
        min-height: 76px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        row-gap: .22rem;
        padding: .78rem .9rem;
    }

    .start-section-card--forums .start-forum-row-live__title {
        font-size: clamp(1.14rem, 5vw, 1.38rem);
    }

    .start-section-card--forums .start-forum-row-live__presence {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        align-self: start;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: .42rem;
        margin-top: .1rem;
        text-align: left;
    }

    .start-section-card--forums .start-forum-row-live__presence-item + .start-forum-row-live__presence-item::before {
        content: "·";
        color: rgba(255,255,255,.5);
        margin-right: .1rem;
    }

    .start-section-card--forums .start-forum-row-live__rail {
        width: calc(100% + 96px);
        margin-right: -96px;
        padding: 0 96px .7rem 0;
        gap: .55rem;
    }

    .start-section-card--forums .start-forum-row-live__newstats {
        flex-basis: 66px;
        width: 66px;
        min-width: 66px;
        min-height: 52px;
    }

    .start-section-card--forums .start-forum-row-live__activity {
        flex-basis: min(78vw, 280px);
        width: min(78vw, 280px);
        min-width: min(78vw, 280px);
        min-height: 54px;
    }
}

/* =========================================================
   FINAL START – Forenblock Showcase-Optik konsolidiert
   Etappe 2: alte Foren-Live-Generationen entfernt, finaler Forenblock bleibt führend.
   ========================================================= */

.start-section-card--forums {
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.024)),
        rgba(3,6,9,.74);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 22px 52px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(18px) saturate(1.05);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.start-section-card--forums .start-forum-row-live {
    gap: clamp(.86rem, 1.25vw, 1.18rem);
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    filter: none;
    animation: none;
}

.start-section-card--forums .start-forum-row-live__main,
.start-section-card--forums .start-forum-row-live__activity,
.start-section-card--forums .start-forum-row-live__newstats {
    transform: none;
    filter: none;
    opacity: 1;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    will-change: auto;
}

.start-section-card--forums .start-forum-row-live__main {
    margin-left: clamp(8px, 1.1vw, 16px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
        rgba(3,6,10,.68);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
        0 12px 28px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.065);
    color: var(--vn-text, #fff);
    text-shadow: var(--vn-text-shadow-soft, 0 1px 8px rgba(0,0,0,.38));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top-left-radius: var(--vn-radius-lg, 22px);
    border-bottom-left-radius: var(--vn-radius-lg, 22px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.start-section-card--forums .start-forum-row-live__main .start-forum-row-live__title,
.start-section-card--forums .start-forum-row-live__main .start-forum-row-live__titleline {
    color: var(--vn-text, #fff);
    text-shadow: var(--vn-text-shadow-soft, 0 1px 8px rgba(0,0,0,.38));
}

.start-section-card--forums .start-forum-row-live__activity,
.start-section-card--forums .start-forum-row-live__newstats {
    background:
        linear-gradient(135deg, rgba(255,255,255,.080), rgba(255,255,255,.024)),
        rgba(4,7,11,.62);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.065);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

.start-section-card--forums .start-forum-row-live__rail {
    padding-left: .12rem;
    scrollbar-gutter: stable;
    scrollbar-color: rgba(255,212,90,.28) transparent;
}

.start-section-card--forums .start-forum-row-live__rail::-webkit-scrollbar {
    height: 4px;
}

.start-section-card--forums .start-forum-row-live__rail::-webkit-scrollbar-track {
    background: transparent;
}

.start-section-card--forums .start-forum-row-live__rail::-webkit-scrollbar-thumb {
    background: rgba(255,212,90,.28);
    border-radius: 999px;
}

.start-section-card--forums .start-forum-row-live__newstats {
    margin-left: .08rem;
}

.start-section-card--forums .start-forum-row-live__prefix,
.start-section-card--forums .start-forum-row-live__model {
    font-size: .62rem;
    letter-spacing: .085em;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
}

.start-section-card--forums .start-forum-row-live__prefix {
    color: var(--vn-gold, #ffd45a);
}

.start-section-card--forums .start-forum-row-live__model {
    color: rgba(210,225,235,.78);
}

@media (hover: hover) and (pointer: fine) {
    .start-section-card--forums .start-forum-row-live__main:hover,
    .start-section-card--forums .start-forum-row-live__activity:hover,
    .start-section-card--forums .start-forum-row-live__newstats:hover {
        transform: none;
        filter: none;
        opacity: 1;
        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);
    }
}

/* START – Forenreihen optisch noch klarer trennen */
.start-section-card--forums .start-forum-row-live__main {
    margin-block: .16rem;
}

.start-section-card--forums .start-forum-row-live__newstats,
.start-section-card--forums .start-forum-row-live__activity {
    margin-block: .10rem;
}

/* Zwischen den Reihen etwas mehr Luft, ohne den Block aufzublasen */
.start-section-card--forums .start-forum-list--vertical {
    gap: clamp(1rem, 1.55vw, 1.38rem);
}

/* Linke Bubble minimal schmaler, damit rechts mehr Luft entsteht */
.start-section-card--forums .start-forum-row-live {
    grid-template-columns: minmax(270px, 34%) minmax(0, 1fr);
}

/* =========================================================
   START – Mobile hochkant: Themen-Scroller wieder unter das Forum
   ========================================================= */

@media (max-width: 760px) and (orientation: portrait) {
    .start-section-card--forums .start-forum-row-live {
        display: grid;
        grid-template-columns: 1fr;
        gap: .44rem;
        min-height: 0;
    }

    .start-section-card--forums .start-forum-row-live__main {
        grid-column: 1;
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-block: 0;
    }

    .start-section-card--forums .start-forum-row-live__rail {
        grid-column: 1;
        width: calc(100% + 96px);
        max-width: none;
        margin-right: -96px;
        padding: 0 96px .72rem 0;
        padding-left: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .start-section-card--forums .start-forum-row-live__newstats {
        margin-left: 0;
    }

    .start-section-card--forums .start-forum-row-live__activity {
        flex-basis: min(78vw, 280px);
        width: min(78vw, 280px);
        min-width: min(78vw, 280px);
    }
}

/* sehr schmale Webviews ohne saubere Orientation-Erkennung */
@media (max-width: 520px) {
    .start-section-card--forums .start-forum-row-live {
        display: grid;
        grid-template-columns: 1fr;
        gap: .44rem;
        min-height: 0;
    }

    .start-section-card--forums .start-forum-row-live__main,
    .start-section-card--forums .start-forum-row-live__rail {
        grid-column: 1;
    }

    .start-section-card--forums .start-forum-row-live__rail {
        width: calc(100% + 88px);
        margin-right: -88px;
        padding: 0 88px .7rem 0;
        padding-left: 0;
    }
}

/* =========================================================
   FINAL 2026-05-24 – Start-Hero Countdown + moderne Chevron-Pfeile
   Ziel: Countdown echte Hero-Karte, mobile Proportionen größer,
   moderne offene Chevron statt Text->.
   ========================================================= */

.start-hero-countdown {
    position: relative;
    flex: 0 1 420px;
    max-width: min(420px, 100%);
    margin-left: auto;
    padding: clamp(.92rem, 1.35vw, 1.18rem) clamp(1rem, 1.55vw, 1.28rem);
    border-radius: var(--vn-radius-lg, 22px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.078), rgba(255,255,255,.024)),
        rgba(4,6,10,.64);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow:
        0 18px 42px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.075);
    color: var(--vn-text, #fff);
    text-align: left;
    overflow: hidden;
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.start-hero-countdown::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,212,90,.14), transparent 38%),
        linear-gradient(116deg, transparent 0%, transparent 38%, rgba(255,255,255,.07) 50%, transparent 64%);
    opacity: .68;
}

.start-hero-countdown > * {
    position: relative;
    z-index: 1;
}

.start-hero-countdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-bottom: .52rem;
}

.start-hero-countdown__label {
    color: var(--vn-gold, #ffd45a);
    font-size: var(--vn-font-xs);
    line-height: 1;
    font-weight: 950;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.start-hero-countdown__date {
    color: rgba(255,255,255,.76);
    font-size: var(--vn-font-sm);
    line-height: 1;
    font-weight: 950;
    letter-spacing: .02em;
    white-space: nowrap;
}

.start-hero-countdown__value,
.start-hero-countdown #countdownie,
.start-hero-countdown .countdown-text {
    display: block;
}

.start-hero-countdown__value {
    margin: 0;
    color: var(--vn-text, #fff);
    font-size: clamp(1.55rem, 2.45vw, 2.38rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -.025em;
    text-shadow: var(--vn-text-shadow, 0 2px 12px rgba(0,0,0,.5));
}

.start-hero-countdown__value strong {
    font-weight: 1000;
}

.start-hero-countdown__sub {
    margin-top: .58rem;
    color: rgba(255,255,255,.70);
    font-size: var(--vn-font-sm);
    line-height: 1.18;
    font-weight: 720;
}

/* Alte Countdown-Ausblendungen gezielt aufheben, aber nur in der neuen Karte. */
.start-hero-countdown #countdownie {
    display: block;
}

/* Hero-Anordnung: Profil/Gast links, Countdown rechts. */
.start-hero-compact {
    align-items: flex-end;
    justify-content: space-between;
}

.start-stage__audio {
    z-index: 6;
}

/* Moderne Chevron-Pfeile statt Textzeichen. */
.start-section-card__more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.85rem, 2.4vw, 2.55rem);
    min-width: clamp(1.85rem, 2.4vw, 2.55rem);
    height: clamp(2.25rem, 3vw, 3.1rem);
    margin-left: .62rem;
    color: var(--vn-gold, #ffd45a);
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    filter: drop-shadow(0 3px 9px rgba(0,0,0,.48));
}

.start-section-card__more::before {
    content: "";
    display: block;
    width: clamp(1.02rem, 1.25vw, 1.28rem);
    height: clamp(1.02rem, 1.25vw, 1.28rem);
    border-top: clamp(.22rem, .32vw, .34rem) solid currentColor;
    border-right: clamp(.22rem, .32vw, .34rem) solid currentColor;
    transform: rotate(45deg);
    border-radius: 2px;
}

.start-section-card__more::after {
    content: "";
    position: absolute;
    width: clamp(.70rem, .9vw, .92rem);
    height: clamp(.70rem, .9vw, .92rem);
    border-top: clamp(.12rem, .18vw, .20rem) solid rgba(255,255,255,.22);
    border-right: clamp(.12rem, .18vw, .20rem) solid rgba(255,255,255,.22);
    transform: rotate(45deg) translate(-.04rem, .04rem);
    border-radius: 2px;
}

.start-section-card__checklink,
.start-switch-morelink,
.start-switch-morelink--icononly {
    min-width: 2.5rem;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
}

@media (max-width: 820px) {
    .start-hero-countdown {
        flex-basis: 380px;
    }
}

@media (max-width: 760px) and (orientation: portrait), (max-width: 560px) {
    .start-stage {
        min-height: 340px;
    }

    .start-stage__inner {
        min-height: 340px;
        padding-top: 92px;
        padding-bottom: 18px;
        align-items: stretch;
    }

    .start-hero-compact {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        align-items: end;
        gap: .72rem;
    }

    .start-hero-profile,
    .start-hero-profile--guest,
    .start-hero-countdown {
        width: min(100%, 360px);
        max-width: 100%;
        margin-left: 0;
    }

    .start-hero-countdown {
        padding: .9rem .95rem 1rem;
    }

    .start-hero-countdown__value {
        font-size: clamp(1.72rem, 7.2vw, 2.38rem);
        line-height: 1.08;
    }

    .start-hero-countdown__sub {
        font-size: var(--vn-font-sm);
    }

    .start-content-wrap {
        width: min(calc(100% - 14px), var(--vn-content-width, 1180px));
        gap: 18px;
        margin-top: .12rem;
    }

    .start-section-card--forums {
        padding-top: 1rem;
        padding-bottom: 1.05rem;
        border-radius: 24px 0 0 24px;
    }

    .start-section-card__head--link {
        padding-inline: 1rem;
        margin-bottom: .88rem;
    }

    .start-section-card__titlelink,
    .start-section-card__titletext {
        font-size: clamp(1.48rem, 6vw, 1.82rem);
        line-height: 1.05;
    }

    .start-section-card__more {
        width: 2.3rem;
        min-width: 2.3rem;
        height: 2.75rem;
        margin-left: .45rem;
    }

    .start-section-card__more::before {
        width: 1.18rem;
        height: 1.18rem;
        border-top-width: .30rem;
        border-right-width: .30rem;
    }

    .start-section-card--forums .start-forum-list--vertical {
        gap: 1.18rem;
    }

    .start-section-card--forums .start-forum-row-live {
        gap: .62rem;
    }

    .start-section-card--forums .start-forum-row-live__main {
        min-height: 96px;
        padding: .98rem 1rem;
        border-radius: 20px;
    }

    .start-section-card--forums .start-forum-row-live__title {
        font-size: clamp(1.38rem, 6.2vw, 1.74rem);
        line-height: 1.04;
    }

    .start-section-card--forums .start-forum-row-live__totals,
    .start-section-card--forums .start-forum-row-live__presence {
        font-size: clamp(.92rem, 3.7vw, 1.05rem);
    }

    .start-section-card--forums .start-forum-row-live__rail {
        width: calc(100% + 104px);
        margin-right: -104px;
        padding: .08rem 104px .78rem 0;
        gap: .68rem;
    }

    .start-section-card--forums .start-forum-row-live__activity {
        flex-basis: min(84vw, 315px);
        width: min(84vw, 315px);
        min-width: min(84vw, 315px);
        min-height: 68px;
        padding: .72rem .86rem;
        border-radius: 18px;
    }

    .start-section-card--forums .start-forum-row-live__activity-title {
        font-size: clamp(1rem, 4.1vw, 1.14rem);
    }

    .start-section-card--forums .start-forum-row-live__newstats {
        flex-basis: 78px;
        width: 78px;
        min-width: 78px;
        min-height: 68px;
        border-radius: 18px;
    }
}

@media (max-width: 390px) {
    .start-stage {
        min-height: 326px;
    }

    .start-stage__inner {
        min-height: 326px;
        padding-top: 88px;
    }

    .start-hero-countdown__value {
        font-size: clamp(1.55rem, 7.4vw, 2.05rem);
    }
}

/* =========================================================
   FINAL 2026-05-24 – Hero Countdown sauber angeordnet
   Ziel:
   - Profil/Gastbox, Countdown und Sound stehen ruhig auf einer Achse
   - keine Überlagerung des Soundicons in der Countdownkarte
   - Hero-Bubbles nutzen die globale Glaslinie transparenter
   - moderne offene Chevron-Pfeile bleiben erhalten
   ========================================================= */

.start-stage__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: clamp(330px, 31vw, 430px);
    padding-top: clamp(92px, 9vw, 132px);
    padding-bottom: clamp(34px, 4vw, 54px);
}

.start-hero-compact {
    width: min(100%, var(--vn-content-width, 1180px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(290px, 360px) minmax(340px, 390px) 48px;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 58px);
}

.start-hero-compact.is-member {
    grid-template-columns: minmax(340px, 390px) 48px;
}

.start-hero-profile,
.start-hero-countdown {
    border-color: rgba(255,255,255,.105);
    background:
        linear-gradient(135deg, rgba(255,255,255,.050), rgba(255,255,255,.014)),
        rgba(7,9,12,.36);
    box-shadow:
        0 14px 34px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.start-hero-profile::before,
.start-hero-countdown::before {
    opacity: .10;
}

.start-hero-profile {
    width: min(100%, 330px);
    justify-self: start;
}

.start-hero-countdown {
    justify-self: start;
    width: min(100%, 390px);
    min-height: 154px;
    padding: 1.05rem 1.16rem 1.05rem;
}

.start-hero-countdown__head {
    gap: .9rem;
    margin-bottom: .64rem;
}

.start-hero-countdown__label {
    letter-spacing: .24em;
}

.start-hero-countdown__value {
    max-width: 100%;
    font-size: clamp(1.72rem, 2.22vw, 2.22rem);
    line-height: 1.06;
}

.start-hero-countdown__sub {
    margin-top: .55rem;
}

.start-stage__audio {
    position: static;
    z-index: 6;
    transform: none;
    justify-self: start;
    align-self: center;
    min-width: 48px;
    margin: 0;
}

.start-stage__sound-button {
    width: 46px;
    height: 46px;
    color: var(--vn-text, #fff);
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.58));
}

.start-stage__sound-button.is-playing {
    color: var(--vn-gold, #ffd45a);
}

/* Chevrons: offener, moderner Doppelkontur-Look */
.start-section-card__more {
    color: var(--vn-text, #fff);
    opacity: .96;
}

.start-section-card__more::before {
    color: currentColor;
    border-radius: 1px;
}

.start-section-card__more::after {
    border-color: rgba(255,212,90,.56);
}

@media (hover: hover) and (pointer: fine) {
    .start-section-card__titlelink:hover .start-section-card__more,
    .start-section-card__checklink:hover .start-section-card__more,
    .start-switch-morelink:hover .start-section-card__more {
        color: var(--vn-gold, #ffd45a);
        opacity: 1;
    }
}

@media (max-width: 980px) {
    .start-hero-compact {
        grid-template-columns: minmax(270px, 340px) minmax(320px, 370px) 44px;
        gap: clamp(18px, 3.2vw, 34px);
    }

    .start-hero-compact.is-member {
        grid-template-columns: minmax(320px, 370px) 44px;
    }

    .start-hero-countdown {
        width: min(100%, 370px);
    }

    .start-stage__sound-button {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 760px) and (orientation: portrait), (max-width: 560px) {
    .start-stage__inner {
        min-height: 390px;
        padding-top: 98px;
        padding-bottom: 22px;
        align-items: stretch;
        justify-content: flex-end;
    }

    .start-hero-compact,
    .start-hero-compact.is-member {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .78rem .72rem;
        align-items: end;
        justify-content: stretch;
    }

    .start-hero-profile,
    .start-hero-profile--guest {
        grid-column: 1 / -1;
        width: min(100%, 372px);
        justify-self: start;
    }

    .start-hero-countdown {
        grid-column: 1 / 2;
        width: min(100%, 372px);
        min-height: 0;
        padding: .92rem .98rem 1rem;
        justify-self: stretch;
    }

    .start-stage__audio {
        grid-column: 2 / 3;
        grid-row: 2;
        justify-self: end;
        align-self: center;
        min-width: 42px;
    }

    .start-stage__sound-button {
        width: 40px;
        height: 40px;
        font-size: 1.48rem;
    }

    .start-hero-countdown__head {
        margin-bottom: .55rem;
    }

    .start-hero-countdown__value {
        font-size: clamp(1.72rem, 7vw, 2.28rem);
        line-height: 1.08;
    }

    .start-hero-countdown__sub {
        margin-top: .48rem;
    }
}

@media (max-width: 390px) {
    .start-stage__inner {
        min-height: 374px;
        padding-top: 92px;
    }

    .start-hero-compact,
    .start-hero-compact.is-member {
        gap: .66rem .58rem;
    }

    .start-hero-countdown__value {
        font-size: clamp(1.48rem, 7.1vw, 1.96rem);
    }

    .start-stage__sound-button {
        width: 37px;
        height: 37px;
        font-size: 1.35rem;
    }
}


/* =========================================================
   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;
}

/* =========================================================
   FINAL v23 – Startkarten Treffen/Termine/RIP
   Ruhige Bildkarten über alle Screens, keine zerfallenden Statuszeilen.
   ========================================================= */

.start-treffen-viewport .vn-treffen-eventcard,
.start-treffen-viewport .vn-termin-eventcard {
    --vn-eventcard-width: clamp(270px, 23vw, 306px);
    position: relative;
    flex: 0 0 var(--vn-eventcard-width) !important;
    width: var(--vn-eventcard-width) !important;
    min-width: var(--vn-eventcard-width) !important;
    max-width: var(--vn-eventcard-width) !important;
    height: clamp(300px, 28vw, 332px) !important;
    min-height: clamp(300px, 28vw, 332px) !important;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(6,8,12,.78);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.30);
}

.start-treffen-viewport .vn-treffen-eventcard__main,
.start-treffen-viewport .vn-treffen-eventcard__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

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

.start-treffen-viewport .vn-treffen-eventcard__image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.82) 100%),
        linear-gradient(90deg, rgba(0,0,0,.32), transparent 58%);
    pointer-events: none;
}

.start-treffen-viewport .vn-treffen-eventcard__scope,
.start-treffen-viewport .vn-treffen-eventcard__badge,
.start-treffen-viewport .vn-treffen-eventcard__image-status,
.start-treffen-viewport .vn-treffen-eventcard__titleband,
.start-treffen-viewport .vn-treffen-eventcard__body,
.start-treffen-viewport .vn-treffen-qa-bell {
    position: absolute;
    z-index: 3;
}

.start-treffen-viewport .vn-treffen-eventcard__scope,
.start-treffen-viewport .vn-treffen-eventcard__badge {
    top: 12px;
    left: 12px;
    right: auto;
    max-width: calc(100% - 24px);
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #17120a;
    background: linear-gradient(180deg, #ffe681, #c9972d);
    font-size: .72rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 8px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.32);
}

.start-treffen-viewport .vn-treffen-eventcard__image-status {
    left: 12px;
    right: 12px;
    bottom: 54px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.start-treffen-viewport .vn-treffen-eventcard__image-status-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #07170b;
    background: linear-gradient(180deg, #8df0a5, #35bc5d);
    font-size: .76rem;
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.30);
}

.start-treffen-viewport .vn-treffen-eventcard__image-status-item.is-private {
    color: #15100a;
    background: linear-gradient(180deg, #ffe681, #c9972d);
}

.start-treffen-viewport .vn-treffen-eventcard__titleband {
    left: 12px;
    right: 12px;
    bottom: 118px;
    width: auto;
    max-width: calc(100% - 24px);
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 12px;
    background: rgba(5,8,12,.76);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.04;
    font-weight: 950;
    text-shadow: 0 2px 8px rgba(0,0,0,.48);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.start-treffen-viewport .vn-treffen-eventcard__body {
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 108px;
    padding: 0 14px 13px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;
    background: linear-gradient(180deg, rgba(5,6,8,0) 0%, rgba(5,6,8,.38) 18%, rgba(5,6,8,.80) 56%, rgba(5,6,8,.98) 100%);
}

.start-treffen-viewport .vn-treffen-eventcard__date,
.start-treffen-viewport .vn-treffen-eventcard__meta,
.start-treffen-viewport .vn-treffen-eventcard__place,
.start-treffen-viewport .vn-treffen-eventcard__host,
.start-treffen-viewport .vn-treffen-eventcard__facts,
.start-treffen-viewport .vn-treffen-eventcard__fact {
    position: static;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255,255,255,.94);
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

.start-treffen-viewport .vn-treffen-eventcard__date {
    gap: 5px;
    color: #fff;
    font-size: clamp(.92rem, 1.15vw, 1.02rem);
    line-height: 1.08;
    font-weight: 950;
    white-space: nowrap;
}

.start-treffen-viewport .vn-treffen-eventcard__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: .88rem;
    line-height: 1.08;
    font-weight: 850;
}

.start-treffen-viewport .vn-treffen-eventcard__place,
.start-treffen-viewport .vn-treffen-eventcard__host {
    gap: 6px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.start-treffen-viewport .vn-treffen-eventcard__place span,
.start-treffen-viewport .vn-treffen-eventcard__host span,
.start-treffen-viewport .vn-treffen-eventcard__host a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-treffen-viewport .vn-treffen-eventcard__place i,
.start-treffen-viewport .vn-treffen-eventcard__host i,
.start-treffen-viewport .vn-treffen-eventcard__fact i {
    flex: 0 0 auto;
    width: 15px;
    color: var(--vn-gold, #ffd45a);
    text-align: center;
}

.start-treffen-viewport .vn-treffen-eventcard__facts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 9px;
    padding-top: 1px;
}

.start-treffen-viewport .vn-treffen-eventcard__fact {
    gap: 5px;
    width: auto;
    font-size: .88rem;
    line-height: 1.08;
    font-weight: 950;
    white-space: nowrap;
}

.start-treffen-viewport .vn-treffen-eventcard__fact.is-own {
    color: var(--vn-green-text, #bfffd3);
}

.start-treffen-viewport .vn-treffen-eventcard__fact.is-full {
    color: #ffd0d0;
}

.start-treffen-viewport .vn-treffen-qa-bell {
    right: 12px !important;
    bottom: 118px !important;
}

/* RIP-Gedenkkarten: Name †, Unvergessen-Pill, echtes Todesdatum. */
.start-treffen-card--rip,
.start-treffen-viewport .start-treffen-card--rip.vn-scroll-termin {
    flex: 0 0 clamp(218px, 19vw, 246px) !important;
    width: clamp(218px, 19vw, 246px) !important;
    min-width: clamp(218px, 19vw, 246px) !important;
    max-width: clamp(218px, 19vw, 246px) !important;
    height: clamp(300px, 26vw, 328px) !important;
    min-height: clamp(300px, 26vw, 328px) !important;
}

.start-treffen-card--rip .start-treffen-card__memorial-badge {
    position: absolute;
    z-index: 6;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(7,8,11,.74);
    color: rgba(255,255,255,.96);
    font-size: .74rem;
    line-height: 1;
    font-weight: 920;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 8px 20px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}

.start-treffen-card--rip .start-treffen-card__title {
    position: absolute;
    z-index: 6;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 58px;
    min-height: 24px;
    max-height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.08;
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

.start-treffen-card--rip .start-treffen-card__title span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-treffen-card--rip .start-treffen-card__rip-cross {
    flex: 0 0 auto;
    display: inline;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 1em;
    line-height: 1;
    box-shadow: none;
}

.start-treffen-card--rip .start-treffen-card__body {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    min-height: 96px;
    margin: 0;
    padding: 48px 14px 13px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    background: linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,.34) 20%, rgba(5,5,7,.82) 58%, rgba(5,5,7,.98) 100%);
}

.start-treffen-card--rip .start-treffen-card__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: rgba(255,255,255,.96);
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,.50);
}

.start-treffen-card--rip .start-treffen-card__date-label {
    color: rgba(255,255,255,.66);
    font-size: .70rem;
    font-weight: 850;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

.start-treffen-card--rip .start-treffen-card__quote,
.start-treffen-card--rip .start-treffen-card__status--rip,
.start-treffen-card--rip .start-treffen-card__host {
    display: none !important;
}

@media (max-width: 980px) {
    .start-treffen-viewport .vn-treffen-eventcard,
    .start-treffen-viewport .vn-termin-eventcard {
        --vn-eventcard-width: 286px;
        height: 308px !important;
        min-height: 308px !important;
    }
}

@media (max-width: 560px) {
    .start-treffen-viewport .vn-treffen-eventcard,
    .start-treffen-viewport .vn-termin-eventcard {
        --vn-eventcard-width: min(286px, calc(100vw - 44px));
        height: 306px !important;
        min-height: 306px !important;
    }

    .start-treffen-viewport .vn-treffen-eventcard__titleband {
        bottom: 116px;
    }

    .start-treffen-viewport .vn-treffen-eventcard__body {
        min-height: 106px;
        padding: 0 12px 12px;
    }

    .start-treffen-viewport .vn-treffen-eventcard__fact,
    .start-treffen-viewport .vn-treffen-eventcard__meta {
        font-size: .84rem;
    }

    .start-treffen-card--rip,
    .start-treffen-viewport .start-treffen-card--rip.vn-scroll-termin {
        flex-basis: 224px !important;
        width: 224px !important;
        min-width: 224px !important;
        max-width: 224px !important;
        height: 306px !important;
        min-height: 306px !important;
    }
}