/* =========================================================
   VN-BIKER – Treffen
   Termin-analog: gemeinsame Livecard, Bulma-sicher, mobile-first.
   Grundsystem/Farben bleiben bei globale.css.
   ========================================================= */

.vn-treffen-seite {
    width: 100%;
    padding: clamp(18px, 3.5vw, 42px) 0 58px;
}

.vn-treffen-editor.vn-content {
    width: min(calc(100% - 24px), var(--vn-content-width, 1180px));
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: 18px;
}

.vn-treffen-editor__kopf {
    width: 100%;
    margin: 0 0 2px;
    padding: clamp(22px, 4vw, 38px);
}

.vn-treffen-editor__kopf .vn-h1 {
    margin: 10px 0 6px;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: .95;
}

.vn-treffen-editor__buehne {
    width: min(100%, 520px);
    display: grid;
    justify-items: center;
    padding: clamp(14px, 2.4vw, 22px);
}

.vn-treffen-editor__form {
    width: min(100%, 430px);
    display: grid;
    justify-items: center;
}

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

.vn-treffen-livecard {
    width: min(100%, 430px);
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid var(--vn-border-soft, rgba(255,255,255,.14));
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(10,13,18,.70);
    color: var(--vn-text, #fff);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 20px 44px rgba(0,0,0,.34);
    isolation: isolate;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.vn-treffen-livecard__bildzone {
    position: relative;
    min-height: 322px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 10%, rgba(218,178,86,.20), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
        rgba(0,0,0,.40);
}

.vn-treffen-livecard__bildzone.is-drag {
    outline: 2px dashed rgba(218,178,86,.82);
    outline-offset: -10px;
}

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

.vn-treffen-livecard__bild[hidden] { display: none; }

.vn-treffen-livecard__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,.02) 38%, rgba(0,0,0,.75)),
        linear-gradient(to right, rgba(0,0,0,.24), transparent 48%, rgba(0,0,0,.18));
    pointer-events: none;
}

.vn-treffen-upload {
    position: absolute;
    top: 58px;
    left: 50%;
    z-index: 4;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    gap: 7px;
    width: 104px;
    height: 104px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(0,0,0,.34);
    color: rgba(255,255,255,.88);
    font-weight: 850;
    cursor: pointer;
    backdrop-filter: blur(7px);
}

.vn-treffen-upload i { font-size: 1.75rem; color: var(--vn-gold, #e0b34f); }
.vn-treffen-upload input { position: absolute; opacity: 0; pointer-events: none; }
.vn-treffen-livecard.has-user-image .vn-treffen-upload { opacity: .72; transform: translateX(-50%) scale(.82); top: 48px; }

.vn-treffen-livecard__chips {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.vn-treffen-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(8,10,14,.68);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .025em;
    text-shadow: 0 1px 6px rgba(0,0,0,.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.vn-treffen-chip--neu {
    color: #111;
    border-color: rgba(255,255,255,.36);
    background: linear-gradient(180deg, #f6d979, #c99427);
    text-shadow: none;
}

.vn-treffen-chip--sichtbarkeit { background: rgba(218,178,86,.30); }

.vn-treffen-livecard__titel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 14px;
    z-index: 2;
    display: block;
    min-height: 42px;
    width: calc(100% - 24px);
    padding: 9px 12px;
    border: 0 !important;
    border-radius: 13px !important;
    background: rgba(5,8,12,.80) !important;
    color: #fff !important;
    font-size: clamp(1.08rem, 4.2vw, 1.34rem);
    font-weight: 950;
    line-height: 1.05;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
    outline: none !important;
}

.vn-treffen-livecard__body {
    display: grid;
    gap: 9px;
    padding: 14px 14px 16px;
}

.vn-treffen-livecard input,
.vn-treffen-livecard textarea,
.vn-treffen-livecard select,
.vn-treffen-livecard button {
    font: inherit;
}

.vn-treffen-livecard input[type="date"],
.vn-treffen-livecard input[type="time"],
.vn-treffen-livecard input[type="text"],
.vn-treffen-livecard input[type="number"],
.vn-treffen-livecard textarea {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    background: rgba(0,0,0,.28) !important;
    outline: none !important;
    box-shadow: none !important;
}

.vn-treffen-livecard input::placeholder,
.vn-treffen-livecard textarea::placeholder { color: rgba(255,255,255,.50); }

.vn-treffen-livecard__date-row,
.vn-treffen-livecard__line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: rgba(255,255,255,.92);
}

.vn-treffen-livecard__date-row i,
.vn-treffen-livecard__line i {
    width: 16px;
    opacity: .92;
}

.vn-treffen-livecard__date-row strong {
    font-size: var(--vn-font-sm, .88rem);
    white-space: nowrap;
}

.vn-treffen-livecard__date-row input[type="date"] { flex: 1 1 138px; min-height: 34px; padding: 0 9px; border-radius: 999px !important; }
.vn-treffen-livecard__date-row input[type="time"] { flex: 0 0 86px; min-height: 34px; padding: 0 9px; border-radius: 999px !important; }
.vn-treffen-livecard__line input { flex: 1 1 auto; min-height: 34px; padding: 0 10px; border-radius: 999px !important; }

.vn-treffen-bis-toggle {
    justify-self: start;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(218,178,86,.32);
    border-radius: 999px;
    color: #111;
    background: linear-gradient(180deg, #f6d979, #c99427);
    font-weight: 950;
    cursor: pointer;
}

.vn-treffen-livecard__date-row--end { display: none; }
.vn-treffen-livecard__date-row--end.is-visible { display: flex; }

.vn-treffen-livecard__veranstalter {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    align-items: baseline;
    color: rgba(255,255,255,.78);
    font-size: var(--vn-font-sm, .88rem);
}

.vn-treffen-livecard__veranstalter strong { color: #fff; }
.vn-treffen-star--admin { color: #6aa7ff; }
.vn-treffen-star--moderation { color: #76b8ff; }
.vn-treffen-star--orga { color: #d69cff; }
.vn-treffen-star--vn { color: #ff4d55; }
.vn-treffen-star--biker { color: #d8ad48; }

.vn-treffen-livecard__meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    gap: 8px;
}

.vn-treffen-livecard__meta-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.vn-treffen-livecard__meta-row i { width: 15px; opacity: .9; }
.vn-treffen-livecard__meta-row input { width: 100%; min-height: 32px; padding: 0 9px; border-radius: 999px !important; }

.vn-treffen-livecard__beschreibung {
    width: 100%;
    min-height: 94px;
    resize: vertical;
    padding: 11px 12px;
    border-radius: 17px !important;
    line-height: 1.42;
}

.vn-treffen-picker {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    overflow: hidden;
}

.vn-treffen-picker summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.vn-treffen-picker summary::-webkit-details-marker { display: none; }
.vn-treffen-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }

.vn-treffen-pickchip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.075);
    color: #fff;
    font-size: var(--vn-font-sm, .88rem);
    font-weight: 850;
    cursor: pointer;
}

.vn-treffen-pickchip input { position: absolute; opacity: 0; pointer-events: none; }
.vn-treffen-pickchip.is-active { color: #111; background: linear-gradient(180deg, #f6d979, #c99427); border-color: rgba(255,255,255,.34); }
.vn-treffen-pickchip--vn_biker.is-active { color: #fff; background: rgba(160,22,28,.86); }
.vn-treffen-pickchip--orga.is-active { color: #fff; background: rgba(145,78,185,.86); }
.vn-treffen-pickchip--team.is-active { color: #fff; background: rgba(70,120,200,.86); }

.vn-treffen-fragen {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.vn-treffen-fragen__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.vn-treffen-fragen__head h2 {
    margin: 0;
    color: #fff;
    font-size: var(--vn-font-md, 1rem);
    font-weight: 950;
}

.vn-treffen-fragen__leer {
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: var(--vn-font-xs, .78rem);
    line-height: 1.35;
}

.vn-treffen-frage {
    padding: 10px 11px;
    border-radius: 16px;
    background: rgba(255,255,255,.055);
}

.vn-treffen-frage header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255,255,255,.74);
    font-size: var(--vn-font-xs, .78rem);
}

.vn-treffen-frage p { margin: 6px 0 0; color: #fff; font-size: var(--vn-font-sm, .88rem); line-height: 1.35; }
.vn-treffen-antwort { margin-top: 8px; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.075); }

.vn-treffen-composer { display: grid; gap: 7px; }
.vn-treffen-composer textarea {
    width: 100%;
    min-height: 58px;
    resize: vertical;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: rgba(0,0,0,.28) !important;
    outline: none !important;
}

.vn-treffen-composer__bar { display: flex; align-items: center; gap: 6px; }
.vn-treffen-composer__icon { width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); color: #fff; cursor: pointer; }
.vn-treffen-composer__hint { margin-left: auto; color: rgba(255,255,255,.54); font-size: var(--vn-font-xs, .78rem); }

.vn-treffen-livecard__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }

/* Übersichtskarten können dieselbe Höhe wie Termin-Cards bekommen. */
.vn-treffen-card--compact,
.vn-treffen-card--overview,
.vn-treffen-card--detail {
    width: 286px;
    min-width: 286px;
    min-height: 372px;
}

@media (max-width: 700px) {
    .vn-treffen-editor.vn-content { width: min(calc(100% - 14px), 430px); }
    .vn-treffen-editor__kopf { padding: 20px 16px; border-radius: 24px; }
    .vn-treffen-editor__kopf .vn-h1 { font-size: clamp(2.15rem, 13vw, 3.25rem); }
    .vn-treffen-editor__buehne { width: 100%; padding: 10px; }
    .vn-treffen-livecard { border-radius: 25px; }
    .vn-treffen-livecard__bildzone { min-height: 300px; }
    .vn-treffen-livecard__body { padding: 13px; }
    .vn-treffen-livecard__meta-row { grid-template-columns: 1fr; }
    .vn-treffen-picker__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 13px; }
    .vn-treffen-pickchip { flex: 0 0 auto; }
}

@media (hover: hover) and (pointer: fine) {
    .vn-treffen-pickchip:hover,
    .vn-treffen-composer__icon:hover { filter: brightness(1.08); }
}

/* =========================================================
   Treffen Livecard – analog Termin, Bulma-sicher
   ========================================================= */

.vn-treffen-editor__buehne.vn-section {
    width: min(100%, 520px);
    display: grid;
    justify-items: center;
    padding: clamp(12px, 2.5vw, 20px);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.vn-treffen-editor__form {
    width: min(100%, 430px);
}

.vn-treffen-livecard {
    width: min(100%, 430px);
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.16);
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(10,13,18,.72);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 52px rgba(0,0,0,.36);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    isolation: isolate;
}

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

.vn-treffen-livecard :where(input, textarea, select, button) {
    font: inherit;
    max-width: none !important;
}

.vn-treffen-livecard__bildzone {
    position: relative;
    width: 100%;
    min-height: 322px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 15%, rgba(218,178,86,.24), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)),
        rgba(0,0,0,.38);
}

.vn-treffen-livecard__bildzone.is-drag {
    outline: 2px dashed rgba(218,178,86,.85);
    outline-offset: -10px;
}

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

.vn-treffen-livecard__bild[hidden] {
    display: none;
}

.vn-treffen-livecard__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.05) 38%, rgba(0,0,0,.78)),
        linear-gradient(90deg, rgba(0,0,0,.18), transparent 50%, rgba(0,0,0,.18));
    pointer-events: none;
}

.vn-treffen-livecard__upload {
    position: absolute;
    top: 58px;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    gap: 7px;
    width: 108px;
    height: 108px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(0,0,0,.34);
    color: rgba(255,255,255,.92);
    font-weight: 900;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vn-treffen-livecard__upload i {
    color: #e0b34f;
    font-size: 1.8rem;
}

.vn-treffen-livecard__upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.vn-treffen-livecard.has-user-image .vn-treffen-livecard__upload {
    top: 48px;
    opacity: .72;
    transform: translateX(-50%) scale(.82);
}

.vn-treffen-livecard__chips {
    position: absolute;
    z-index: 4;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vn-treffen-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(8,10,14,.70);
    color: #fff;
    font-size: .72rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .025em;
    text-shadow: 0 1px 6px rgba(0,0,0,.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.vn-treffen-chip--neu {
    color: #111;
    border-color: rgba(255,255,255,.36);
    background: linear-gradient(180deg, #f6d979, #c99427);
    text-shadow: none;
}

.vn-treffen-livecard__titel {
    position: absolute;
    z-index: 4;
    left: 14px;
    right: 14px;
    bottom: 16px;
    width: calc(100% - 28px);
    min-height: 46px;
    padding: 10px 13px;
    border: 0 !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: rgba(5,8,12,.82) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font-size: clamp(1.08rem, 5vw, 1.7rem);
    font-weight: 950;
    line-height: 1.05;
    outline: none !important;
}

.vn-treffen-livecard__body {
    display: grid;
    gap: 10px;
    padding: 14px 16px 16px;
}

.vn-treffen-livecard__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: rgba(255,255,255,.88);
    font-size: var(--vn-font-sm, .88rem);
}

.vn-treffen-livecard__row > i {
    width: 18px;
    color: rgba(255,255,255,.86);
    text-align: center;
}

.vn-treffen-livecard__row input,
.vn-treffen-livecard__meta input,
.vn-treffen-livecard__text,
.vn-treffen-composer textarea {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: rgba(0,0,0,.28) !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.vn-treffen-livecard__row input {
    min-height: 34px;
    padding: 0 9px;
}

.vn-treffen-livecard__row--date input[type="date"] { flex: 1 1 138px; }
.vn-treffen-livecard__row--date input[type="time"] { flex: 0 0 92px; }

.vn-treffen-livecard__bis-toggle {
    justify-self: start;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(218,178,86,.32);
    border-radius: 999px;
    color: #111;
    background: linear-gradient(180deg, #f6d979, #c99427);
    font-weight: 950;
    cursor: pointer;
}

.vn-treffen-livecard__row[data-treffen-bis-row] {
    display: none;
}

.vn-treffen-livecard__row[data-treffen-bis-row].is-visible {
    display: flex;
}

.vn-treffen-star { font-size: .9em; margin-left: 2px; }
.vn-treffen-star--admin { color: #6aa7ff; }
.vn-treffen-star--moderation { color: #76b8ff; }
.vn-treffen-star--orga { color: #d69cff; }
.vn-treffen-star--vn { color: #ff4d55; }
.vn-treffen-star--biker { color: #d8ad48; }

.vn-treffen-livecard__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vn-treffen-livecard__meta label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vn-treffen-livecard__meta i {
    color: rgba(255,255,255,.82);
}

.vn-treffen-livecard__meta input {
    width: 100%;
    min-height: 34px;
    padding: 0 9px;
}

.vn-treffen-livecard__text {
    width: 100%;
    min-height: 104px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.42;
}

.vn-treffen-livecard input::placeholder,
.vn-treffen-livecard textarea::placeholder {
    color: rgba(255,255,255,.48);
}

.vn-treffen-picker {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    overflow: hidden;
}

.vn-treffen-picker summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.vn-treffen-picker summary::-webkit-details-marker { display: none; }

.vn-treffen-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px 12px;
}

.vn-treffen-pickchip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.075);
    color: #fff;
    font-size: var(--vn-font-sm, .88rem);
    font-weight: 850;
    cursor: pointer;
}

.vn-treffen-pickchip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vn-treffen-pickchip.is-active {
    color: #111;
    background: linear-gradient(180deg, #f6d979, #c99427);
    border-color: rgba(255,255,255,.34);
}

.vn-treffen-pickchip--vn_biker.is-active { color: #fff; background: rgba(160,22,28,.86); }
.vn-treffen-pickchip--orga.is-active { color: #fff; background: rgba(145,78,185,.86); }
.vn-treffen-pickchip--team.is-active { color: #fff; background: rgba(70,120,200,.86); }

.vn-treffen-fragen-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
}

.vn-treffen-fragen-card h2 {
    margin: 0;
    color: #fff;
    font-size: var(--vn-font-md, 1rem);
    font-weight: 950;
}

.vn-treffen-fragen-card__leer {
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: var(--vn-font-sm, .88rem);
}

.vn-treffen-composer {
    display: grid;
    gap: 8px;
}

.vn-treffen-composer textarea {
    width: 100%;
    min-height: 74px;
    padding: 10px 11px;
    resize: vertical;
}

.vn-treffen-composer__smilies {
    display: flex;
    gap: 6px;
}

.vn-treffen-composer__smilies button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    color: #fff;
    cursor: pointer;
}

.vn-treffen-livecard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

@media (max-width: 560px) {
    .vn-treffen-livecard {
        border-radius: 25px;
    }

    .vn-treffen-livecard__bildzone {
        min-height: 300px;
    }

    .vn-treffen-livecard__body {
        padding: 13px;
    }

    .vn-treffen-livecard__row--date {
        flex-wrap: wrap;
    }

    .vn-treffen-livecard__meta {
        grid-template-columns: 1fr;
    }

    .vn-treffen-picker__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 13px;
    }

    .vn-treffen-pickchip {
        flex: 0 0 auto;
    }
}

.vn-treffen-fragenliste {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.treffen-fragen-composer {
    margin-top: 1rem;
}

.vn-treffen-frage {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.26);
    padding: .85rem;
}

.vn-treffen-frage--antwort {
    margin-top: .7rem;
    margin-left: 1.5rem;
    background: rgba(255,255,255,.06);
}

.vn-treffen-frage__kopf {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
    font-size: .88rem;
    color: rgba(255,255,255,.72);
}

.vn-treffen-frage__kopf strong {
    color: #fff;
}

.vn-treffen-frage__text {
    color: #fff;
    line-height: 1.5;
}

.vn-treffen-frage .vn-composer {
    margin-top: .75rem;
    box-shadow: none;
}

/* =========================================================
   Treffen Detail-Livecard – nur für treffenansicht.php
   Erhält die bestehende Livecard-Optik und ergänzt Readonly-Detailmodus.
   ========================================================= */

.treffenkarte-section {
    display: grid;
    gap: 14px;
}

.vn-treffen-card-center {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 6px 0 12px;
}

.vn-treffen-livecard--detail {
    width: min(100%, 430px);
}

.vn-treffen-livecard--detail .vn-treffen-livecard__bildzone {
    min-height: 322px;
}

.vn-treffen-livecard__titel--view {
    display: flex;
    align-items: center;
    width: calc(100% - 28px);
    min-height: 46px;
}

.vn-treffen-livecard__text--view {
    min-height: auto;
    resize: none;
    padding: 11px 12px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.13);
    color: #fff;
    background: rgba(0,0,0,.26);
}

.vn-treffen-livecard__actions--detail {
    align-items: center;
}

.vn-treffen-inline-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.vn-treffen-livecard__actions--detail .vn-action {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
}

@media (max-width: 560px) {
    .vn-treffen-livecard--detail {
        width: 100%;
        border-radius: 25px;
    }

    .vn-treffen-livecard--detail .vn-treffen-livecard__bildzone {
        min-height: 300px;
    }
}

/* =========================================================
   START – Treffen/Termine als dunkle Plakatkarten
   Einfügen ans Ende von /forum/oeffentlich/css/start.css
   Entfernt keine Struktur, überschreibt nur die Startansicht.
   ========================================================= */

.start-treffen-viewport .start-treffen-card--plakat,
.start-treffen-viewport .vn-scroll-termin.start-treffen-card--plakat {
    position: relative;
    isolation: isolate;
    height: 346px;
    min-height: 346px;
    max-height: 346px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.14);
    background:
        linear-gradient(180deg, rgba(18,22,28,.20), rgba(5,6,8,.96)),
        rgba(8,10,13,.82);
    color: var(--vn-offwhite, rgba(246,244,236,.96));
    box-shadow:
        0 16px 36px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.start-treffen-card--plakat .start-treffen-card__image-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    overflow: hidden;
}

.start-treffen-card--plakat .start-treffen-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.start-treffen-card--plakat .start-treffen-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(.82) contrast(1.04) saturate(.96);
    transform: scale(1.01);
}

.start-treffen-card--plakat .start-treffen-card__shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    background:
        linear-gradient(180deg,
            rgba(5,6,8,.04) 0%,
            rgba(5,6,8,.10) 30%,
            rgba(5,6,8,.38) 58%,
            rgba(5,6,8,.76) 78%,
            rgba(5,6,8,.96) 100%),
        radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 36%);
    pointer-events: none;
}

.start-treffen-card--plakat .start-treffen-card__title {
    position: absolute;
    z-index: 4;
    left: 0;
    right: auto;
    bottom: 134px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: calc(100% - 12px);
    min-height: 34px;
    max-height: 2.35em;
    padding: 6px 12px 6px 14px;
    border-radius: 0 13px 13px 0;
    background: linear-gradient(90deg, rgba(8,10,13,.88), rgba(8,10,13,.62));
    color: var(--vn-offwhite, rgba(246,244,236,.98));
    font-size: var(--vn-font-md);
    font-weight: 940;
    line-height: 1.08;
    letter-spacing: -.015em;
    text-shadow: 0 2px 10px rgba(0,0,0,.58);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.start-treffen-card--plakat .start-treffen-card__neu {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,212,90,.92);
    color: #15120a;
    font-size: var(--vn-font-xs);
    font-weight: 950;
    line-height: 1;
    letter-spacing: .045em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

.start-treffen-card--plakat .start-treffen-card__body {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 146px;
    max-height: 168px;
    padding: 54px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 7px;
    background: linear-gradient(180deg,
        rgba(5,6,8,0) 0%,
        rgba(5,6,8,.20) 18%,
        rgba(5,6,8,.62) 48%,
        rgba(5,6,8,.93) 100%);
    color: var(--vn-offwhite, rgba(246,244,236,.96));
}

.start-treffen-card--plakat .start-treffen-card__date,
.start-treffen-card--plakat .start-treffen-card__meta,
.start-treffen-card--plakat .start-treffen-card__place,
.start-treffen-card--plakat .start-treffen-card__host,
.start-treffen-card--plakat .start-treffen-card__facts,
.start-treffen-card--plakat .start-treffen-card__fact {
    color: var(--vn-offwhite, rgba(246,244,236,.96));
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

.start-treffen-card--plakat .start-treffen-card__date,
.start-treffen-card--plakat .start-treffen-card__place,
.start-treffen-card--plakat .start-treffen-card__host {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--vn-font-sm);
    line-height: 1.12;
    font-weight: 850;
}

.start-treffen-card--plakat .start-treffen-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    max-width: 100%;
}

.start-treffen-card--plakat .start-treffen-card__host a {
    color: inherit;
    text-decoration: none;
    font-weight: 900;
}

.start-treffen-card--plakat .start-treffen-card__date i,
.start-treffen-card--plakat .start-treffen-card__place i,
.start-treffen-card--plakat .start-treffen-card__host i,
.start-treffen-card--plakat .start-treffen-card__fact i {
    color: rgba(246,244,236,.88);
    text-shadow: none;
}

.start-treffen-card--plakat .start-treffen-card__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    max-width: 100%;
    margin-top: 2px;
    font-size: var(--vn-font-sm);
    line-height: 1.12;
    font-weight: 880;
}

.start-treffen-card--plakat .start-treffen-card__fact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
}

.start-treffen-card--plakat .start-treffen-card__fact.is-own,
.start-treffen-card--plakat .start-treffen-card__fact.is-own i {
    color: var(--vn-green-text, #b7f0c7);
}

.start-treffen-card--plakat .start-treffen-card__fact.is-full,
.start-treffen-card--plakat .start-treffen-card__fact.is-full i {
    color: var(--vn-warning-text, #ffd79b);
}

@media (max-width: 760px) {
    .start-treffen-viewport .start-treffen-card--plakat,
    .start-treffen-viewport .vn-scroll-termin.start-treffen-card--plakat {
        height: 338px;
        min-height: 338px;
        max-height: 338px;
    }

    .start-treffen-card--plakat .start-treffen-card__title {
        bottom: 128px;
    }

    .start-treffen-card--plakat .start-treffen-card__body {
        min-height: 140px;
        max-height: 160px;
        padding: 48px 13px 13px;
    }
}

/* =========================================================
   START – weiße Forenbubbles wieder in dunkle Beta-Optik drehen
   Nur Normalzustand; Hover bleibt bewusst identisch/ruhig.
   ========================================================= */

.start-forum-row-live__main {
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
        rgba(5,7,10,.56);
    border: 1px solid rgba(255,255,255,.105);
    box-shadow:
        0 10px 24px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.055);
    color: var(--vn-offwhite, rgba(246,244,236,.96));
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--vn-radius-lg, 22px);
    border-bottom-left-radius: var(--vn-radius-lg, 22px);
}

.start-forum-row-live__main .start-forum-row-live__title,
.start-forum-row-live__main .start-forum-row-live__titleline,
.start-forum-row-live__presence--stack,
.start-forum-row-live__presence-item,
.start-forum-row-live__presence-item strong {
    color: var(--vn-offwhite, rgba(246,244,236,.96));
    text-shadow: 0 2px 8px rgba(0,0,0,.42);
}

.start-forum-row-live__main .start-forum-row-live__presence-pill {
    color: var(--vn-gold, #ffd45a);
    background: rgba(255,212,90,.12);
    border-color: rgba(255,212,90,.20);
}

.start-forum-row-live__main .start-forum-row-live__presence-pill::before {
    background: currentColor;
    box-shadow: 0 0 8px rgba(255,212,90,.42);
}

@media (hover: hover) and (pointer: fine) {
    .start-forum-row-live__main:hover,
    .start-forum-row-live__main.vn-row:hover,
    .start-forum-row-live__main.vn-card:hover,
    .start-forum-row-live__main.vn-action-card:hover,
    .start-forum-row-live__main.vn-action--neutral:hover {
        background:
            linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
            rgba(5,7,10,.56);
        border-color: rgba(255,255,255,.105);
        box-shadow:
            0 10px 24px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.055);
        color: var(--vn-offwhite, rgba(246,244,236,.96));
        transform: none;
        filter: none;
        opacity: 1;
    }
}


/* =========================================================
   Treffen v20 – edle Detailseite, Startkarten-Hinweise, Teilnehmer
   ========================================================= */
.treffenansicht-actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}.treffenkarte-section,.treffen-teilnehmer-card,.treffen-fragen-card{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding-left:0!important;padding-right:0!important}.vn-treffen-card-center{justify-content:flex-start}.vn-treffen-teilnehmer-scroll{display:flex;gap:14px;overflow-x:auto;overflow-y:visible;padding:4px 2px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.vn-treffen-profilmini{position:relative;flex:0 0 148px;width:148px;min-height:214px;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),rgba(9,12,17,.68);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.30);text-decoration:none!important;color:#fff!important;scroll-snap-align:start}.vn-treffen-profilmini__bild{display:block;width:100%;height:145px;overflow:hidden;background:rgba(0,0,0,.28)}.vn-treffen-profilmini__bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.vn-treffen-profilmini__name{display:block;padding:10px 10px 0;font-weight:950;line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vn-treffen-profilmini__region{display:block;padding:5px 10px 12px;color:rgba(255,255,255,.78);font-size:.78rem;font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vn-treffen-profilmini__gaeste{position:absolute;right:8px;bottom:8px;min-height:22px;padding:3px 8px;border-radius:999px;color:#15100a;background:linear-gradient(180deg,#ffe48a,#c8952d);font-size:.76rem;font-weight:950;box-shadow:0 8px 20px rgba(0,0,0,.30)}.vn-treffen-star--admin{color:#2b5da8}.vn-treffen-star--moderation{color:#3f8fd6}.vn-treffen-star--orga{color:#bd76ff}.vn-treffen-star--vn{color:#f0444d}.vn-treffen-star--rip{color:#050505;-webkit-text-stroke:.6px rgba(255,255,255,.75)}.vn-treffen-star--biker{color:#d7a93c}.vn-treffen-fragenliste{display:grid;gap:14px}.vn-treffen-frage{width:min(86%,760px);padding:13px 15px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(9,12,17,.62);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.22)}.vn-treffen-frage:nth-child(even){justify-self:end}.vn-treffen-frage--antwort{width:calc(100% - 28px);margin:12px 0 0 28px;background:rgba(255,255,255,.045)}.vn-treffen-frage__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;color:rgba(255,255,255,.74);font-size:.78rem}.vn-treffen-frage__kopf strong{color:#fff;font-weight:950}.vn-treffen-frage__text{color:rgba(255,255,255,.92);line-height:1.38}.vn-treffen-antwort-composer{margin-top:10px}.vn-treffen-antwort-composer>summary{cursor:pointer;color:rgba(255,255,255,.88);font-weight:850}.treffen-fragen-card .vn-composer,.vn-treffen-antwort-composer .vn-composer{max-width:980px;margin-top:12px;border-radius:22px;background:rgba(5,8,12,.72);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.28)}.treffen-fragen-card .vn-composer__text{background:rgba(236,232,218,.94)!important;color:#191919!important;border-radius:14px!important}.treffen-fragen-card .vn-composer__panel{display:flex;flex-wrap:wrap;gap:8px;margin:8px 12px 12px;padding:10px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}.treffen-fragen-card .vn-composer__panel[hidden]{display:none!important}.treffen-fragen-card .vn-composer__tool.is-active{color:#111;background:linear-gradient(180deg,#f6d979,#c99427)}.vn-treffen-eventcard__scope{position:absolute;left:12px;top:12px;z-index:7;display:inline-flex;align-items:center;gap:5px;min-height:25px;padding:4px 9px;border-radius:999px;color:#16110a;background:linear-gradient(180deg,#f4d774,#c9962b);font-size:.72rem;font-weight:950;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 8px 20px rgba(0,0,0,.32)}.vn-treffen-eventcard__fact.is-full{color:#ffd0d0}.vn-treffen-eventcard__fact.is-own{color:#bfffd0}.treffen-form-block--bild input[type=file]{padding:10px;background:rgba(0,0,0,.25);border-radius:14px}
@media(max-width:720px){.vn-treffen-frage,.vn-treffen-frage:nth-child(even){width:100%;justify-self:stretch}.vn-treffen-frage--antwort{width:calc(100% - 14px);margin-left:14px}.vn-treffen-profilmini{flex-basis:138px;width:138px}.vn-treffen-profilmini__bild{height:136px}.treffenansicht-actions .vn-action{flex:1 1 auto;justify-content:center}}


/* =========================================================
   FINAL v22 – Treffen/Termin-Seiten ruhiger und zentriert
   ========================================================= */
.vn-treffen-seite,
.termin-main,
.termine-main {
    padding-top: clamp(16px, 2.5vw, 32px);
}
.vn-treffen-editor.vn-content,
.termin-main .vn-content,
.termine-main .vn-content {
    display: grid;
    justify-items: center;
}
.vn-treffen-editor__kopf,
.treffenansicht-hero,
.termin-hero,
.termine-hero {
    width: min(100%, 720px);
    margin-inline: auto;
    padding: clamp(20px, 3vw, 32px);
    text-align: left;
}
.vn-treffen-editor__kopf .vn-h1,
.treffenansicht-hero .vn-h1,
.termin-hero .vn-h1,
.termine-hero .vn-h1 {
    font-size: clamp(2rem, 4.2vw, 3.6rem);
}
.vn-treffen-card-center,
.termin-card-center,
.vn-termin-card-center {
    width: 100%;
    justify-content: center !important;
}
.treffenkarte-section,
.treffen-teilnehmer-card,
.treffen-fragen-card,
.termine-section,
.termine-detail {
    width: min(100%, 760px);
    margin-inline: auto;
}
.vn-treffen-livecard,
.vn-termin-card--create,
.vn-termin-card-gross-live.vn-termin-card--create {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 58px rgba(0,0,0,.38);
}
.vn-treffen-teilnehmer-scroll,
.vn-profilkarten-rail,
.vn-profile-rail {
    width: 100%;
    padding-bottom: 14px;
}
.vn-treffen-profilmini {
    flex-basis: 156px;
    width: 156px;
    min-height: 218px;
}
.vn-treffen-profilmini__bild {
    height: 150px;
}
.vn-treffen-profilmini__name {
    display: flex;
    align-items: center;
    gap: 4px;
}
@media (min-width: 981px) {
    .vn-treffen-editor__buehne,
    .vn-termin-editor__buehne {
        width: min(100%, 560px);
        margin-inline: auto;
    }
}
@media (max-width: 700px) {
    .vn-treffen-editor__kopf,
    .treffenansicht-hero,
    .termin-hero,
    .termine-hero,
    .treffenkarte-section,
    .treffen-teilnehmer-card,
    .treffen-fragen-card,
    .termine-section,
    .termine-detail {
        width: min(100%, calc(100vw - 18px));
    }
}