/* =========================================================
   VN-BIKER – Fusszeile
   Datei: /forum/oeffentlich/css/fusszeile.css

   Zuständigkeit:
   - nur Footer-Layout, Raster, Abstände, Ticker-Mechanik
   - Kartenoptik/Hover kommt global über .vn-card.is-hoverable
   - keine Pills/Bubbles, keine !important-Regeln
   - einheitliche 3-Spalten-Logik auf allen Screens
   ========================================================= */

:root {
    --vn-footer-card-h: 86px;
    --vn-footer-avatar: 76px;
    --vn-footer-gap: clamp(.78rem, 1.35vw, 1rem);
}

.forum-footer {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: clamp(20px, 3vw, 38px);
    padding: clamp(18px, 2.4vw, 24px) 0 calc(clamp(18px, 2.4vw, 28px) + env(safe-area-inset-bottom));
    background: transparent;
}

.forum-footer-overlay,
.forum-footer-inner,
.forum-footer-legal-switch,
.forum-footer-legal-row,
.forum-footer-marquee {
    position: relative;
}

.forum-footer-inner {
    width: min(calc(100% - 24px), var(--vn-content-width, 1180px));
    margin-inline: auto;
}

/* =========================================================
   Statistik-Raster
   Einheitlich: links Label, Mitte Wert/Bild, rechts Detail/Delta
   ========================================================= */

.forum-footer-stats {
    margin-top: clamp(.76rem, 1.5vw, 1.1rem);
}

.forum-footer-stats-grid--compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--vn-footer-gap);
    margin-bottom: clamp(.68rem, 1.25vw, .92rem);
}

.footer-stat-card--compact {
    position: relative;
    display: grid;
    grid-template-columns: minmax(100px, .95fr) minmax(76px, .66fr) minmax(118px, 1.18fr);
    align-items: center;
    gap: .72rem;
    height: var(--vn-footer-card-h);
    min-height: var(--vn-footer-card-h);
    padding: .72rem .92rem;
    overflow: visible;
}

.footer-stat-side {
    min-width: 0;
}

.footer-stat-side--label {
    justify-self: start;
    text-align: left;
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.footer-stat-side--value {
    justify-self: center;
    text-align: center;
    color: var(--vn-text);
    font-size: var(--vn-font-lg);
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

.footer-stat-side--date {
    font-size: var(--vn-font-md);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: .015em;
}

.footer-stat-side--badge,
.footer-stat-delta,
.footer-start-days {
    justify-self: end;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: .18rem;
    min-height: 1.2rem;
    text-align: right;
    color: var(--vn-text-soft);
    font-size: var(--vn-font-md);
    line-height: 1.08;
    font-weight: 900;
    white-space: nowrap;
}

.footer-start-days,
.footer-start-days span {
    font-size: var(--vn-font-md);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: .015em;
}

.footer-card--start .footer-stat-side--value,
.footer-card--start .footer-start-days {
    font-size: var(--vn-font-md);
    line-height: 1.08;
    font-weight: 950;
}

.footer-delta {
    color: var(--vn-gold);
    font-size: var(--vn-font-md);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: .02em;
}

.footer-delta--beitraege {
    color: var(--vn-green-text);
}

.footer-delta--biker {
    color: var(--vn-blue-text);
}

.footer-stat-side:empty,
.footer-stat-side--badge:empty,
.footer-stat-delta:empty,
.footer-stat-bubble:empty,
.footer-aktiv-liste.is-empty {
    display: none;
}

.footer-stat-card--interactive[data-footer-disabled="1"],
.footer-chip-link[data-footer-disabled="1"],
.forum-link-external[data-footer-disabled="1"] {
    cursor: default;
    pointer-events: none;
}

/* =========================================================
   Aktiv-Karte
   Total mittig, Biker/Besucher/Bots rechts untereinander
   ========================================================= */

.footer-card--aktiv,
.footer-stat-card--aktiv {
    grid-template-columns: minmax(100px, .95fr) minmax(76px, .66fr) minmax(124px, 1.18fr);
}

.footer-card--aktiv .footer-stat-side--label,
.footer-stat-card--aktiv .footer-stat-side--label,
.footer-stat-side--label.is-green {
    color: var(--vn-green-text);
}

.footer-card--aktiv .footer-stat-side--value,
.footer-stat-card--aktiv .footer-stat-side--value {
    justify-self: center;
    text-align: center;
}

.footer-aktiv-liste {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .12rem;
    min-width: 0;
    text-align: right;
}

.footer-aktiv-zeile {
    display: block;
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1.06;
    font-weight: 900;
    white-space: nowrap;
}

/* =========================================================
   Neu-dabei-Karte
   Einheitlich: links Label, Mitte Profilbild, rechts Name
   ========================================================= */

.footer-stat-card--neu,
.footer-card--neu {
    grid-template-columns: minmax(100px, .95fr) var(--vn-footer-avatar) minmax(118px, 1.18fr);
    gap: .72rem;
    align-items: center;
    height: var(--vn-footer-card-h);
    min-height: var(--vn-footer-card-h);
    padding: .52rem .92rem;
    overflow: visible;
    isolation: isolate;
}

.footer-neu-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    gap: .12rem;
}

.footer-neu-links .footer-stat-side--label,
.footer-neu-links .footer-stat-side--label-link {
    white-space: nowrap;
    line-height: 1.08;
}

.footer-neu-heute {
    display: block;
    margin-top: .06rem;
    color: var(--vn-green-text);
    font-size: var(--vn-font-sm);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer-neu-mitte {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    justify-self: center;
    align-self: center;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--vn-footer-avatar);
    height: var(--vn-footer-avatar);
    pointer-events: auto;
}

.footer-neu-bildbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--vn-footer-avatar);
    height: var(--vn-footer-avatar);
    overflow: hidden;
    border-radius: var(--vn-radius-md);
    background: rgba(0,0,0,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.footer-neu-bild,
.footer-neu-bildbox img,
.footer-neu-bild--fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.footer-neu-bild--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vn-text);
    font-size: var(--vn-font-lg);
    font-weight: 950;
}

.footer-neu-rechts {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    text-align: right;
    padding-left: 0;
}

.footer-neu-name {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--vn-text);
    font-size: var(--vn-font-sm);
    line-height: 1.08;
    font-weight: 950;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   Rechtliches / Links
   Standardlinks nebeneinander, nur mittiger Punkt als Trenner
   ========================================================= */

.forum-footer-legal-switch {
    min-height: 32px;
    z-index: 80;
}

.forum-footer-legal-row,
.forum-footer-marquee {
    transition: opacity 180ms ease;
}

.forum-footer-legal-row {
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: .52rem;
    margin-top: .66rem;
    margin-bottom: .32rem;
    color: var(--vn-text);
    font-size: var(--vn-font-md);
    line-height: 1.24;
    font-weight: 850;
    text-align: center;
    opacity: 0;
    white-space: nowrap;
}

.forum-footer-legal-row.is-visible {
    opacity: 1;
}

.forum-footer-legal-row a,
.forum-footer-legal-link {
    position: relative;
    z-index: 100;
    pointer-events: auto;
    cursor: pointer;
    color: var(--vn-text);
    text-decoration: none;
    white-space: nowrap;
}

.forum-footer-legal-link:not(:last-child)::after {
    content: '•';
    display: inline-block;
    margin-left: .52rem;
    color: var(--vn-gold);
    opacity: .82;
    font-weight: 900;
}

.forum-footer-legal-link:hover {
    color: var(--vn-gold);
}

.forum-footer-legal-sep {
    display: none;
}

/* =========================================================
   Marquee / Lauftext
   ========================================================= */

.forum-footer-marquee[hidden] {
    display: none;
    pointer-events: none;
}

.forum-footer-marquee {
    opacity: 0;
}

.forum-footer-marquee:not(.is-visible) {
    pointer-events: none;
}

.forum-footer-marquee.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.forum-footer-marquee__viewport {
    overflow: hidden;
    width: 100%;
    min-height: 52px;
}

.forum-footer-marquee__track {
    display: inline-flex;
    align-items: center;
    gap: .64rem;
    white-space: nowrap;
    transform: translate3d(100%,0,0);
    will-change: transform;
}

.forum-footer-marquee__item,
.forum-footer-marquee__sep {
    display: inline-flex;
    align-items: center;
    color: var(--vn-text);
    font-size: var(--vn-font-md);
    line-height: 1.28;
    font-weight: 850;
}

.forum-footer-marquee__item {
    gap: .48rem;
}

.forum-footer-marquee__item i,
.forum-footer-marquee__item svg {
    color: var(--vn-gold);
    font-size: 1.04em;
}

.forum-footer-marquee__item strong,
.forum-footer-marquee__item b {
    font-weight: 950;
}

.footer-marquee-status {
    color: var(--vn-green-text);
    font-weight: 950;
}

@keyframes forumFooterTickerSingle {
    0% { transform: translate3d(100%,0,0); }
    100% { transform: translate3d(-100%,0,0); }
}

/* =========================================================
   Cookie-Reste ausblenden, falls Altmarkup geladen wird
   ========================================================= */

.forum-cookie-banner-wrap,
.forum-cookie-banner,
.cookie-banner,
.cookie-consent,
#cookie-banner,
#cookie-consent {
    display: none;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 920px) {
    :root {
        --vn-footer-card-h: 88px;
        --vn-footer-avatar: 76px;
    }

    .forum-footer-stats-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .78rem;
    }

    .footer-stat-card--compact,
    .footer-card--aktiv,
    .footer-stat-card--aktiv,
    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: minmax(96px, .95fr) minmax(74px, .66fr) minmax(112px, 1.18fr);
        height: var(--vn-footer-card-h);
        min-height: var(--vn-footer-card-h);
        padding: .64rem .86rem;
        gap: .64rem;
    }

    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: minmax(96px, .95fr) var(--vn-footer-avatar) minmax(112px, 1.18fr);
    }

    .footer-card--aktiv { order: 1; }
    .footer-card--themen { order: 2; }
    .footer-card--beitraege { order: 3; }
    .footer-card--neu { order: 4; }
    .footer-card--start { order: 5; }
    .footer-card--biker { order: 6; }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 560px) {
    :root {
        --vn-footer-card-h: 96px;
        --vn-footer-avatar: 82px;
    }

    .forum-footer {
        margin-top: clamp(22px, 5vw, 34px);
        padding-top: 22px;
        padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }

    .forum-footer-inner {
        width: min(calc(100% - 14px), var(--vn-content-width, 1180px));
    }

    .forum-footer-stats-grid--compact {
        grid-template-columns: 1fr;
        gap: .78rem;
        margin-bottom: 1rem;
    }

    .footer-stat-card--compact,
    .footer-card--aktiv,
    .footer-stat-card--aktiv,
    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: minmax(100px, .92fr) minmax(72px, .64fr) minmax(118px, 1.18fr);
        height: var(--vn-footer-card-h);
        min-height: var(--vn-footer-card-h);
        padding: .74rem .88rem;
        gap: .58rem;
    }

    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: minmax(100px, .92fr) var(--vn-footer-avatar) minmax(118px, 1.18fr);
    }

    .footer-stat-side--label,
    .footer-stat-side--badge,
    .footer-start-days,
    .footer-start-days span,
    .footer-delta,
    .footer-aktiv-zeile,
    .footer-neu-heute,
    .footer-neu-name {
        font-size: var(--vn-font-md);
    }

    .footer-stat-side--value {
        font-size: var(--vn-font-xl);
    }

    .forum-footer-legal-row {
        gap: .42rem;
        margin-top: .86rem;
        margin-bottom: .56rem;
        font-size: clamp(.82rem, 2.55vw, var(--vn-font-sm));
        line-height: 1.22;
        font-weight: 900;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .forum-footer-legal-link:not(:last-child)::after {
        margin-left: .42rem;
    }

    .forum-footer-marquee__viewport {
        min-height: 56px;
    }

    .forum-footer-marquee__item,
    .forum-footer-marquee__sep {
        font-size: var(--vn-font-md);
        line-height: 1.3;
        font-weight: 900;
    }

    .footer-card--aktiv { order: 1; }
    .footer-card--themen { order: 2; }
    .footer-card--beitraege { order: 3; }
    .footer-card--neu { order: 4; }
    .footer-card--start { order: 5; }
    .footer-card--biker { order: 6; }
}

/* =========================================================
   Sehr schmal
   ========================================================= */

@media (max-width: 420px) {
    :root {
        --vn-footer-card-h: 92px;
        --vn-footer-avatar: 76px;
    }

    .forum-footer-inner {
        width: min(calc(100% - 12px), var(--vn-content-width, 1180px));
    }

    .footer-stat-card--compact,
    .footer-card--aktiv,
    .footer-stat-card--aktiv,
    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: 94px minmax(64px, .62fr) minmax(104px, 1fr);
        height: var(--vn-footer-card-h);
        min-height: var(--vn-footer-card-h);
        padding: .72rem .76rem;
        gap: .50rem;
    }

    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: 94px var(--vn-footer-avatar) minmax(0, 1fr);
    }

    .footer-stat-side--label,
    .footer-stat-side--badge,
    .footer-start-days,
    .footer-start-days span,
    .footer-delta,
    .footer-aktiv-zeile,
    .footer-neu-heute,
    .footer-neu-name,
    .forum-footer-marquee__item,
    .forum-footer-marquee__sep {
        font-size: var(--vn-font-sm);
    }

    .forum-footer-legal-row {
        gap: .34rem;
        font-size: clamp(.76rem, 2.7vw, .9rem);
    }

    .forum-footer-legal-link:not(:last-child)::after {
        margin-left: .34rem;
    }
}

/* =========================================================
   FINAL 2026-05-10 – Footer ohne Sprung beim Wechsel
   ========================================================= */
.forum-footer-legal-switch {
    min-height: 34px;
    height: 34px;
    overflow: hidden;
}

.forum-footer-legal-row,
.forum-footer-marquee {
    min-height: 34px;
    height: 34px;
    align-items: center;
}

.forum-footer-marquee__viewport {
    height: 34px;
    display: flex;
    align-items: center;
}

.forum-footer-marquee__track {
    align-items: center;
    line-height: 34px;
}

@media (max-width: 560px) {
    .forum-footer-legal-switch,
    .forum-footer-legal-row,
    .forum-footer-marquee,
    .forum-footer-marquee__viewport {
        min-height: 42px;
        height: 42px;
    }

    .forum-footer-legal-row a,
    .forum-footer-legal-link {
        font-size: .98rem;
        line-height: 1.15;
        padding: .18rem .06rem;
    }

    .forum-footer-marquee__track {
        line-height: 42px;
    }

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

    .footer-card--aktiv { order: 1; }
    .footer-card--themen { order: 2; }
    .footer-card--beitraege { order: 3; }
    .footer-card--neu { order: 4; }
    .footer-card--start { order: 5; }
    .footer-card--biker { order: 6; }
}

/* =========================================================
   FINAL 2026-05-11 – Footer stabil: keine Abschneidung, mobile logisch untereinander
   ========================================================= */
.forum-footer-legal-switch {
    min-height: 58px;
    height: 58px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forum-footer-legal-row,
.forum-footer-marquee {
    min-height: 58px;
    height: 58px;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.forum-footer-legal-row {
    line-height: 1.35;
    padding: .18rem 0 .22rem;
}

.forum-footer-legal-row a,
.forum-footer-legal-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    line-height: 1.25;
    padding: .16rem .02rem;
}

.forum-footer-marquee__viewport {
    height: 58px;
    min-height: 58px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.forum-footer-marquee__track {
    min-height: 58px;
    line-height: 1.35;
    align-items: center;
}

.forum-footer-marquee__item,
.forum-footer-marquee__sep {
    line-height: 1.35;
    padding: .14rem 0 .18rem;
}

@media (min-width: 921px) {
    .forum-footer-stats-grid--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) and (min-width: 561px) {
    .forum-footer-stats-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-card--aktiv { order: 1; }
    .footer-card--themen { order: 2; }
    .footer-card--beitraege { order: 3; }
    .footer-card--neu { order: 4; }
    .footer-card--start { order: 5; }
    .footer-card--biker { order: 6; }
}

@media (max-width: 560px) {
    .forum-footer-stats-grid--compact {
        grid-template-columns: 1fr;
        gap: .72rem;
    }

    .footer-stat-card--compact,
    .footer-card--aktiv,
    .footer-stat-card--aktiv,
    .footer-stat-card--neu,
    .footer-card--neu {
        width: 100%;
        grid-template-columns: minmax(96px, .92fr) minmax(64px, .58fr) minmax(104px, 1.05fr);
        min-height: 90px;
        height: auto;
        padding: .72rem .82rem;
    }

    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: minmax(96px, .92fr) var(--vn-footer-avatar) minmax(0, 1.05fr);
    }

    .footer-card--aktiv { order: 1; }
    .footer-card--themen { order: 2; }
    .footer-card--beitraege { order: 3; }
    .footer-card--neu { order: 4; }
    .footer-card--start { order: 5; }
    .footer-card--biker { order: 6; }

    .forum-footer-legal-switch,
    .forum-footer-legal-row,
    .forum-footer-marquee,
    .forum-footer-marquee__viewport {
        min-height: 64px;
        height: 64px;
    }

    .forum-footer-legal-row {
        gap: .46rem;
        font-size: clamp(.92rem, 3.25vw, 1.02rem);
        line-height: 1.3;
        overflow-x: auto;
        justify-content: flex-start;
        padding: .24rem .32rem .30rem;
        scrollbar-width: none;
    }

    .forum-footer-legal-row::-webkit-scrollbar {
        display: none;
    }

    .forum-footer-legal-row a,
    .forum-footer-legal-link {
        min-height: 40px;
        line-height: 1.25;
        padding: .18rem .02rem;
    }

    .forum-footer-marquee__track {
        min-height: 64px;
        line-height: 1.35;
    }
}

@media (max-width: 420px) {
    .forum-footer-stats-grid--compact {
        grid-template-columns: 1fr;
    }

    .footer-stat-card--compact,
    .footer-card--aktiv,
    .footer-stat-card--aktiv,
    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: minmax(88px, .86fr) minmax(58px, .52fr) minmax(92px, 1fr);
        min-height: 88px;
        height: auto;
    }

    .footer-stat-card--neu,
    .footer-card--neu {
        grid-template-columns: minmax(88px, .86fr) var(--vn-footer-avatar) minmax(0, 1fr);
    }
}