/* =========================================================
   VN-BIKER – Termine / gemeinsame Termin-Card
   Ein Markup für create, preview, compact, overview, detail, private.
   globale.css bleibt für Farben/Buttons/Grundsystem führend.
   ========================================================= */

.termin-main,
.termine-main {
    width: 100%;
    padding: clamp(18px, 3.5vw, 42px) 0 58px;
}

.termin-main .vn-content,
.termine-main .vn-content {
    width: min(calc(100% - 24px), var(--vn-content-width, 1180px));
    margin: 0 auto;
}

.termin-hero,
.termine-hero {
    margin: 0 0 18px;
    padding: clamp(22px, 4vw, 38px);
}

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

.termin-message,
.termine-message { margin: 0 0 14px; }

/* ---------- gemeinsame Ausgabe-Card ---------- */
.vn-termin-card {
    --termin-card-width: 286px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--termin-card-width);
    width: var(--termin-card-width);
    min-width: var(--termin-card-width);
    min-height: 372px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--vn-border-soft, rgba(255,255,255,.13));
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(12, 15, 20, .58);
    color: var(--vn-text, #fff);
    box-shadow: var(--vn-shadow-card, inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.28));
    text-decoration: none !important;
    isolation: isolate;
    scroll-snap-align: start;
}

.vn-termin-card--overview,
.vn-termin-card--compact,
.vn-termin-card--detail,
.vn-termin-card--private { --termin-card-width: 286px; }

.vn-termin-card--detail { --termin-card-width: 326px; min-height: 408px; }
.vn-termin-card--private { border-color: rgba(218,178,86,.28); }

.vn-termin-card__bildzone {
    position: relative;
    display: block;
    width: 100%;
    height: 158px;
    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,.36);
}

.vn-termin-card--detail .vn-termin-card__bildzone { height: 176px; }

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

.vn-termin-card__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.04) 38%, rgba(0,0,0,.72)),
        linear-gradient(to right, rgba(0,0,0,.22), transparent 48%, rgba(0,0,0,.18));
    pointer-events: none;
}

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

.vn-termin-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-termin-chip--neu,
.vn-termin-chip--heute,
.vn-termin-chip--morgen {
    color: #111;
    border-color: rgba(255,255,255,.36);
    background: linear-gradient(180deg, #f6d979, #c99427);
    text-shadow: none;
}
.vn-termin-chip--privat,
.vn-termin-chip--team { background: rgba(70,120,200,.70); }
.vn-termin-chip--vn { background: rgba(160,22,28,.74); }
.vn-termin-chip--orga { background: rgba(145,78,185,.72); }
.vn-termin-chip--dauer,
.vn-termin-chip--wiederholt,
.vn-termin-chip--reminder { background: rgba(218,178,86,.30); }

.vn-termin-card__titel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 14px;
    z-index: 2;
    display: block;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 13px;
    background: rgba(5,8,12,.78);
    color: #fff;
    font-size: clamp(1rem, 2.4vw, 1.18rem);
    font-weight: 950;
    line-height: 1.05;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.vn-termin-card__body {
    display: grid;
    gap: 6px;
    padding: 11px 13px 12px;
    min-width: 0;
}

.vn-termin-card__date,
.vn-termin-card__ort,
.vn-termin-card__von,
.vn-termin-card__text {
    display: block;
    min-width: 0;
    color: rgba(255,255,255,.92);
    font-size: var(--vn-font-sm, .88rem);
    line-height: 1.20;
}

.vn-termin-card__date {
    color: #fff;
    font-weight: 850;
}
.vn-termin-card__ort { color: rgba(255,255,255,.82); }
.vn-termin-card__von { color: rgba(255,255,255,.72); }
.vn-termin-card__text {
    color: rgba(255,255,255,.70);
    font-size: var(--vn-font-xs, .78rem);
    line-height: 1.25;
}

.vn-termin-card__date i,
.vn-termin-card__ort i { width: 16px; margin-right: 4px; opacity: .92; }

.vn-termin-star { font-size: .88em; margin-left: 2px; text-shadow: 0 1px 7px rgba(0,0,0,.40); }
.vn-termin-star--admin { color: #6aa7ff; }
.vn-termin-star--moderation { color: #76b8ff; }
.vn-termin-star--orga { color: #d69cff; }
.vn-termin-star--vn { color: #ff4d55; }
.vn-termin-star--rip { color: #111; -webkit-text-stroke: .7px rgba(255,255,255,.75); }
.vn-termin-star--biker { color: #d8ad48; }

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

.vn-termin-card-center {
    display: flex;
    justify-content: center;
    padding: 8px 0 14px;
}

.termine-section,
.termine-detail { margin-top: 16px; }
.termine-section-head { margin: 0 0 12px; }

/* ---------- create / große Handy-Livecard ---------- */
.vn-termin-create {
    display: grid;
    justify-items: center;
    gap: 16px;
    width: 100%;
}

.vn-termin-create__tools {
    width: min(100%, 760px);
    display: grid;
    gap: 10px;
    padding: 14px;
}

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

.vn-termin-picker summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 13px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}
.vn-termin-picker summary::-webkit-details-marker { display: none; }

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

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

.vn-termin-mini-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 12px;
    color: rgba(255,255,255,.84);
    font-size: var(--vn-font-sm, .88rem);
    font-weight: 800;
}
.vn-termin-mini-field input,
.vn-termin-mini-field select {
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    background: rgba(0,0,0,.30);
    padding: 0 10px;
}

.vn-termin-card--create {
    --termin-card-width: min(100%, 430px);
    min-height: auto;
    border-radius: 30px;
}

.vn-termin-card--create .vn-termin-card__bildzone {
    height: auto;
    min-height: 322px;
    aspect-ratio: 4 / 3;
}

.vn-termin-card__bildzone--drop.is-drag {
    outline: 2px dashed rgba(218,178,86,.8);
    outline-offset: -10px;
}

.vn-termin-card--create .vn-termin-card__bild[hidden] { display: none; }

.vn-termin-upload {
    position: absolute;
    top: 56px;
    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,.32);
    color: rgba(255,255,255,.88);
    font-weight: 850;
    cursor: pointer;
    backdrop-filter: blur(7px);
}
.vn-termin-upload i { font-size: 1.75rem; color: #e0b34f; }
.vn-termin-upload input { position: absolute; opacity: 0; pointer-events: none; }
.vn-termin-card--create.has-user-image .vn-termin-upload { opacity: .72; transform: translateX(-50%) scale(.82); top: 48px; }

.vn-termin-card__input,
.vn-termin-card__textarea,
.vn-termin-card--create input,
.vn-termin-card--create textarea {
    font: inherit;
}

.vn-termin-card__input {
    border: 0;
    outline: none;
}

.vn-termin-card__date--edit,
.vn-termin-card__ort--edit {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.vn-termin-card--create input[type="date"],
.vn-termin-card--create input[type="time"],
.vn-termin-card--create input[type="text"] {
    min-width: 0;
    min-height: 34px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    background: rgba(0,0,0,.28);
    outline: none;
}
.vn-termin-card--create input[name="ort"] { flex: 1 1 150px; }
.vn-termin-card--create input[name="region"] { flex: 1 1 100px; }
.vn-termin-card--create input::placeholder,
.vn-termin-card--create textarea::placeholder { color: rgba(255,255,255,.48); }

.vn-termin-end-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-termin-card__date--end { display: none; }
.vn-termin-card__date--end.is-visible { display: flex; }

.vn-termin-card__textarea {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    padding: 11px 12px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.13);
    color: #fff;
    background: rgba(0,0,0,.26);
    outline: none;
}

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

@media (max-width: 980px) {
    .vn-termin-card { --termin-card-width: 274px; min-height: 360px; }
    .vn-termin-card--detail { --termin-card-width: 306px; }
}

@media (max-width: 560px) {
    .termin-main .vn-content,
    .termine-main .vn-content { width: min(calc(100% - 14px), 430px); }
    .termin-hero,
    .termine-hero { padding: 20px 16px; border-radius: 24px; }
    .termin-hero .vn-h1,
    .termine-hero .vn-h1 { font-size: clamp(2.15rem, 13vw, 3.25rem); }
    .vn-termin-create__tools { padding: 10px; }
    .vn-termin-card { --termin-card-width: 266px; }
    .vn-termin-card--create { --termin-card-width: 100%; }
    .vn-termin-card--create .vn-termin-card__bildzone { min-height: 300px; }
    .vn-termin-picker__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 13px; }
    .vn-termin-pickchip { flex: 0 0 auto; }
    .vn-termin-card-scroll { margin-left: -2px; margin-right: -2px; }
}

/* ---------- Termin-Card Aktionen ---------- */
.vn-termin-card__actions-bottom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    max-width: 100%;
}

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

.vn-termin-card__action,
.vn-termin-card__more > summary.vn-termin-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(5,8,12,.72);
    box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    text-decoration: none !important;
    cursor: pointer;
    list-style: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vn-termin-card__more > summary.vn-termin-card__action::-webkit-details-marker { display: none; }

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

.vn-termin-card__action.is-danger {
    color: #ffd2d2;
    border-color: rgba(255,80,80,.30);
    background: rgba(90,12,18,.74);
}

.vn-termin-card__action i {
    font-size: .88rem;
    line-height: 1;
    pointer-events: none;
}

.vn-termin-card__more {
    position: relative;
    display: inline-flex;
}

.vn-termin-card__more-menu {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 36px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(5,8,12,.86);
    box-shadow: 0 14px 34px rgba(0,0,0,.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.vn-termin-card__more:not([open]) .vn-termin-card__more-menu { display: none; }

.vn-termin-card.is-gemerkt .vn-termin-card__action .fa-bookmark,
.vn-termin-card.has-erinnerung .vn-termin-card__action .fa-bell {
    color: #f6d979;
}

@media (hover: hover) and (pointer: fine) {
    .vn-termin-card__action:hover {
        transform: translateY(-1px);
        filter: brightness(1.08);
    }
}

@media (max-width: 560px) {
    .vn-termin-card__actions-bottom {
        gap: 5px;
    }

    .vn-termin-card__action,
    .vn-termin-card__more > summary.vn-termin-card__action {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
}


/* =========================================================
   Termin-Card Feinabgleich: ruhiger, niedriger, Aktionen unten
   ========================================================= */

.vn-termin-card--compact,
.vn-termin-card--overview,
.vn-termin-card--private {
    min-height: 372px;
}

.vn-termin-card--detail {
    min-height: 408px;
}

.vn-termin-card__bildzone {
    height: 158px;
}

.vn-termin-card--detail .vn-termin-card__bildzone {
    height: 176px;
}

.vn-termin-card__bild {
    object-position: center 68%;
}

.vn-termin-card__titel {
    bottom: 10px;
    min-height: 34px;
    padding: 8px 11px;
}

.vn-termin-card__body {
    gap: 6px;
    padding: 11px 13px 12px;
}

.vn-termin-card__text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vn-termin-card__actions-bottom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    max-width: 100%;
}

.vn-termin-card__actions-bottom .vn-termin-card__action,
.vn-termin-card__actions-bottom .vn-termin-card__more > summary.vn-termin-card__action {
    width: 30px;
    height: 30px;
    min-width: 30px;
}

.vn-termin-card__actions-bottom .vn-termin-card__more-menu {
    top: auto;
    right: 0;
    bottom: 38px;
}

@media (max-width: 980px) {
    .vn-termin-card--compact,
    .vn-termin-card--overview,
    .vn-termin-card--private {
        min-height: 360px;
    }

    .vn-termin-card__bildzone {
        height: 150px;
    }
}

@media (max-width: 560px) {
    .vn-termin-card--compact,
    .vn-termin-card--overview,
    .vn-termin-card--private {
        min-height: 352px;
    }

    .vn-termin-card__bildzone {
        height: 146px;
    }
}


/* =========================================================
   CREATE Livecard – Eingabe direkt in der Karte, kein Formularlook
   Zielpfad: /forum/templates/termin/teile/termin_card_gross.php
   ========================================================= */

.vn-termin-editor__buehne.vn-section {
    width: 100%;
    display: grid;
    justify-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

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

.vn-termin-card-gross-live.vn-termin-card--create {
    --termin-card-width: min(100%, 430px);
    width: min(100%, 430px);
    min-width: 0;
    min-height: auto;
    border-radius: 30px;
    overflow: hidden;
    border-color: rgba(255,255,255,.16);
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(10,13,18,.68);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 22px 52px rgba(0,0,0,.38);
}

.vn-termin-card-gross-live .vn-termin-card__bildzone {
    height: auto;
    min-height: 322px;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(circle at 50% 26%, rgba(218,178,86,.18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)),
        rgba(0,0,0,.34);
}

.vn-termin-card-gross-live .vn-termin-card__bild {
    object-fit: cover;
    object-position: center 62%;
}

.vn-termin-card-gross-live .vn-termin-card__shade {
    background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18) 36%, rgba(0,0,0,.76)),
        radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 38%);
}

.vn-termin-card-gross-live .vn-termin-upload {
    top: 74px;
    width: 112px;
    height: 112px;
    border-radius: 28px;
    background: rgba(5,8,12,.46);
}

.vn-termin-card-gross-live.has-user-image .vn-termin-upload {
    top: 54px;
    width: 74px;
    height: 74px;
    opacity: .82;
}

.vn-termin-card-gross-live .vn-termin-card__chips--create {
    top: 12px;
    left: 12px;
    right: 12px;
}

.vn-termin-card-gross-live .vn-termin-card__titel--edit {
    left: 14px;
    right: 14px;
    bottom: 14px;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    background: rgba(5,8,12,.80);
}

.vn-termin-card__title-input {
    width: 100%;
    min-height: 42px;
    border: 0 !important;
    outline: none !important;
    color: #fff !important;
    background: transparent !important;
    font: inherit;
    font-weight: 950;
}

.vn-termin-card__title-input::placeholder {
    color: rgba(255,255,255,.58);
}

.vn-termin-card-gross-live .vn-termin-card__body--create {
    gap: 10px;
    padding: 14px 15px 16px;
}

.vn-termin-card-gross-live :where(input[type="text"], input[type="date"], input[type="time"], input[type="number"], textarea) {
    color: #fff !important;
    background: rgba(0,0,0,.26) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.vn-termin-card-gross-live :where(input, textarea)::placeholder {
    color: rgba(255,255,255,.50) !important;
}

.vn-termin-card-gross-live .vn-termin-card__date--edit,
.vn-termin-card-gross-live .vn-termin-card__ort--edit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.vn-termin-card-gross-live .vn-termin-card__date--edit input {
    width: 112px;
    min-height: 34px;
    border-radius: 999px !important;
    padding: 0 10px;
}

.vn-termin-card-gross-live .vn-termin-card__date--edit input[name="uhrzeit"],
.vn-termin-card-gross-live .vn-termin-card__date--edit input[name="ende_uhrzeit"] {
    width: 76px;
}

.vn-termin-card-gross-live .vn-termin-card__ort--edit input[name="ort"] {
    flex: 1 1 160px;
    min-height: 34px;
    border-radius: 999px !important;
    padding: 0 10px;
}

.vn-termin-card-gross-live .vn-termin-card__ort--edit input[name="region"] {
    flex: 1 1 96px;
    min-height: 34px;
    border-radius: 999px !important;
    padding: 0 10px;
}

.vn-termin-card-gross-live .vn-termin-card__textarea--live {
    min-height: 88px;
    max-height: 150px;
    border-radius: 18px !important;
    resize: vertical;
}

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

.vn-termin-create-details > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    color: rgba(255,255,255,.86);
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.vn-termin-create-details > summary::-webkit-details-marker { display: none; }

.vn-termin-picker__chips--live {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

.vn-termin-picker__chips--live .vn-termin-pickchip {
    flex: 0 0 auto;
    min-height: 34px;
    white-space: nowrap;
}

.vn-termin-mini-field--inline {
    flex: 0 0 auto;
    padding: 0;
}

.vn-termin-mini-field--inline input {
    width: 90px;
}

.vn-termin-card__actions--create {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 2px;
}

.vn-termin-card__bildzone--drop.is-drag {
    outline: 2px dashed rgba(218,178,86,.9);
    outline-offset: -12px;
}

@media (max-width: 560px) {
    .vn-termin-editor__form {
        width: min(100%, 430px);
    }

    .vn-termin-card-gross-live.vn-termin-card--create {
        border-radius: 25px;
    }

    .vn-termin-card-gross-live .vn-termin-card__bildzone {
        min-height: 300px;
    }

    .vn-termin-card-gross-live .vn-termin-card__body--create {
        padding: 13px;
    }

    .vn-termin-card-gross-live .vn-termin-card__date--edit input {
        width: 108px;
    }

    .vn-termin-card__actions--create .vn-action {
        flex: 1 1 auto;
    }
}

/* Termin-Detailkarte: dunkle Bildkarten-Sprache analog Treffen */
.vn-termin-card--detail,
.vn-termin-card--treffen-private.vn-termin-card--detail {
    --termin-card-width: min(100%, 640px);
    width: min(100%, 640px);
    min-width: 0;
    min-height: auto;
    border-radius: var(--vn-radius-xl, 28px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(8,10,14,.74);
    color: var(--vn-text, #fff);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 22px 54px rgba(0,0,0,.36);
}

.vn-termin-card--detail .vn-termin-card__bildzone {
    height: clamp(245px, 32vw, 360px);
    background:
        radial-gradient(circle at 70% 12%, rgba(218,178,86,.18), transparent 35%),
        rgba(0,0,0,.42);
}

.vn-termin-card--detail .vn-termin-card__bild {
    object-fit: cover;
    object-position: center center;
}

.vn-termin-card--detail .vn-termin-card__shade {
    background:
        linear-gradient(180deg,
            rgba(0,0,0,.04) 0%,
            rgba(0,0,0,.16) 40%,
            rgba(0,0,0,.82) 100%),
        radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 38%);
}

.vn-termin-card--detail .vn-termin-card__titel {
    left: 0;
    right: auto;
    bottom: 18px;
    width: fit-content;
    max-width: calc(100% - 22px);
    min-height: 0;
    padding: 9px 14px 10px;
    border-radius: 0 16px 16px 0;
    background: rgba(8,10,14,.76);
    color: var(--vn-text, #fff);
    font-size: clamp(1.25rem, 3vw, 2rem);
    line-height: 1.05;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.vn-termin-card--detail .vn-termin-card__body {
    gap: 9px;
    padding: 15px 17px 17px;
    background: transparent;
}

.vn-termin-card__statusline,
.vn-termin-card__treffenlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    color: rgba(255,255,255,.92);
    font-size: var(--vn-font-sm, .96rem);
    line-height: 1.18;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,.42);
}

.vn-termin-card__statusline--own {
    color: var(--vn-green-text, #bfffd3);
}

.vn-termin-card__statusline--private {
    color: var(--vn-gold, #ffd45a);
}

.vn-termin-card__treffenlink {
    color: var(--vn-gold, #ffd45a);
    text-decoration: none;
}

.vn-termin-card--detail .vn-termin-card__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    color: rgba(255,255,255,.78);
    line-height: 1.35;
}



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