/*
Theme Name:   Ensemble Ventana
Theme URI:    https://ensemble-plugin.com
Description:  Demo-Skin für den großen Club Ventana: Art-déco-Kino bei Nacht, Fullscreen-Slider für Woche, Floors und Theme Nights, Timetable als Leuchttafel mit Bildern, VIP-Raumpläne. Child-Theme von Ensemble Theme.
Author:       Kraftwerk Marketing
Template:     ensemble-theme
Version:      1.3.0
Text Domain:  ensemble-ventana
*/

/* ==========================================================================
   Ventana · Skin (01.11.2026, erste Fassung)

   Farben und Schriften kommen aus dem Brand Tuner (--ensemble-*). Hier stehen
   nur die Gestaltungsmittel des Skins:
     1. Tokens: Nacht, Neon-Pink, die vier Floor-Farben
     2. Typografie: Work Sans schwer, Versalien, enge Laufweite
     3. Kopf: transparent über den Fullscreen-Slidern, Website-Icon, Tickets
     4. Startseite: Woche als Fullscreen-Slider, Infos im oberen Drittel,
        darunter Program / Tickets / Reserve
     5. Theme Nights: derselbe Slider, Vorschaubilder statt Punkte
     6. Floors: Fullscreen-Slider der Räume mit Vorschaubildern
     7. Timetable als Leuchttafel, Bild über den Infos
     8. Raumpläne (Konzert, VIP)
     9. Cards, Buttons, Abstände
    10. Mobil
    11. Artist-Seiten: Bild im Vollbild, Infos darauf
    12. Veranstaltungs- und Floor-Seiten: Bild im Vollbild
   Alles hängt an body.vt-skin (functions.php). Fullscreen-Seiten tragen
   zusätzlich vt-fullhero.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

.vt-skin {
    --vt-night: var(--ensemble-bg, #0b0b12);
    --vt-ink: #07070c;
    --vt-panel: #14141f;
    --vt-line: rgba(255, 255, 255, 0.12);
    --vt-pink: var(--ensemble-primary, #ff3b6b);
    --vt-cyan: var(--ensemble-secondary, #3bd1ff);
    --vt-gold: #ffd23b;
    --vt-violet: #b57bff;
    --vt-display: var(--ensemble-font-heading, 'Work Sans', 'Inter', sans-serif);
    --vt-body: var(--ensemble-font-body, 'Inter', sans-serif);
    --vt-head-h: var(--et-header-height, 4.5rem);
    --vt-glow: 0 0 0.6em rgba(255, 59, 107, 0.55);
}

/* --- 2. Typografie ------------------------------------------------------ */

.vt-skin h1,
.vt-skin h2,
.vt-skin h3,
.vt-skin .es-hero-slide__title,
.vt-skin .ensemble-event-title,
.vt-skin .ensemble-location-title {
    font-family: var(--vt-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.98;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* Abschnittsüberschriften: Neonstrich davor */
.vt-skin .et-main h2.wp-block-heading,
.vt-skin .et-entry__content > h2 {
    display: flex;
    align-items: center;
    gap: 0.55em;
    font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}
.vt-skin .et-main h2.wp-block-heading::before,
.vt-skin .et-entry__content > h2::before {
    content: '';
    flex: 0 0 auto;
    width: 0.85em;
    height: 0.16em;
    background: var(--vt-pink);
    box-shadow: var(--vt-glow);
}

/* --- 3. Kopf ------------------------------------------------------------ */

.vt-skin .et-branding__title {
    font-family: var(--vt-display);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.vt-skin .et-branding__tagline {
    display: none;
}
.vt-skin .et-nav__list {
    gap: 1.15rem;
}
/* Kopf über die volle Breite: elf Menüpunkte plus Tickets passen sonst
   nicht in die 1200er-Spalte, Tickets rutschte in eine zweite Zeile. */
.vt-skin .et-header__inner {
    max-width: none;
    padding-left: clamp(1rem, 3vw, 3rem);
    padding-right: clamp(1rem, 3vw, 3rem);
}
@media (min-width: 1100px) {
    .vt-skin .et-nav__list {
        flex-wrap: nowrap;
        align-items: center;
    }
}
.vt-skin .et-nav__list > li > a {
    font-family: var(--vt-body);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
/* Letzter Menüpunkt (Tickets) als Signal mit Ticket-Icon */
.vt-skin .et-nav__list > li:last-child > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5em 1em;
    background: var(--vt-pink);
    color: #fff;
}
.vt-skin .et-nav__list > li:last-child > a::before {
    content: '';
    width: 15px;
    height: 15px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 0 0 4v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3a2 2 0 0 0 0-4V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z'/%3E%3Cline x1='12' y1='7' x2='12' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 0 0 4v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3a2 2 0 0 0 0-4V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z'/%3E%3Cline x1='12' y1='7' x2='12' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vt-skin .et-nav__list > li:last-child > a:hover {
    background: #fff;
    color: var(--vt-ink);
}

/* Website-Icon vor dem Namen (Adresse aus functions.php) */
.vt-skin.vt-has-icon .et-branding__title a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.vt-skin.vt-has-icon .et-branding__title a::before {
    content: '';
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    background: var(--vt-site-icon) center / contain no-repeat;
}

/* Transparent über dem Slider: ein Schleier von oben trägt die Schrift.
   Beim Scrollen macht header.js den Kopf deckend (.is-solid). */
.vt-skin.vt-fullhero .et-header:not(.is-solid) {
    background: linear-gradient(to bottom, rgba(7, 7, 12, 0.85) 0%, rgba(7, 7, 12, 0.45) 60%, rgba(7, 7, 12, 0) 100%);
    color: #fff;
}
.vt-skin.vt-fullhero .et-header:not(.is-solid) .et-nav__list > li:not(:last-child) > a {
    color: #fff;
}
.vt-skin.vt-fullhero .et-header.is-solid {
    background: rgba(7, 7, 12, 0.94);
    color: #fff;
    border-bottom-color: var(--vt-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.vt-skin.vt-fullhero .et-main {
    padding-top: 0;
}

/* --- 4. Startseite: die Woche als Fullscreen-Slider ---------------------- */
/* Gruppe .vt-hero = Slider + Aktionsleiste. Der Slider füllt den Schirm,
   die Infos stehen im oberen Drittel, unten liegen Program / Tickets /
   Reserve als drei große Felder über dem Bild. */

.vt-skin .vt-hero {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    background: var(--vt-ink);
}
.vt-skin .et-canvas > .vt-hero,
.vt-skin .et-canvas > .vt-floors {
    margin-top: 0;
}
.vt-skin .vt-hero .es-hero-slider--fullscreen {
    margin: 0;
    border-radius: 0;
}

/* Infos oben: Verlauf von oben statt von unten, Inhalt oben links */
.vt-skin .vt-hero .es-hero-slide {
    align-items: flex-start;
}
.vt-skin .vt-hero .es-hero-slide::before {
    top: 0;
    bottom: auto;
    height: 75%;
    background: linear-gradient(to bottom, rgba(7, 7, 12, 0.92) 0%, rgba(7, 7, 12, 0.55) 45%, rgba(7, 7, 12, 0) 100%);
}
.vt-skin .vt-hero .es-hero-slide::after {
    /* zweiter, schwacher Verlauf unten, damit die Aktionsleiste trägt */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    background: linear-gradient(to top, rgba(7, 7, 12, 0.85), rgba(7, 7, 12, 0));
    z-index: 1;
    pointer-events: none;
}
.vt-skin .vt-hero .es-hero-slide:hover .es-hero-slide__image {
    transform: none;
}
.vt-skin .vt-hero .es-hero-slide__content {
    max-width: min(68rem, 100%);
    padding: calc(var(--vt-head-h) + clamp(2rem, 7vh, 5rem)) clamp(1.5rem, 6vw, 6rem) 0;
}
.vt-skin .vt-hero .es-hero-slide__category {
    border-radius: 0;
    padding: 0.4em 0.9em;
    background: var(--vt-pink);
    box-shadow: var(--vt-glow);
    font-family: var(--vt-body);
    letter-spacing: 0.12em;
}
.vt-skin .vt-hero .es-hero-slide__title {
    font-size: clamp(2.8rem, 8.5vw, 8rem);
    margin-bottom: 0.18em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.vt-skin .vt-hero .es-hero-slide__meta {
    gap: 0.5rem 1.6rem;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}
.vt-skin .vt-hero .es-hero-slide__meta-item svg {
    color: var(--vt-pink);
    opacity: 1;
}
.vt-skin .vt-hero .es-hero-slide__excerpt {
    max-width: 38rem;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
}
.vt-skin .vt-hero .es-hero-slide__btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.vt-skin .vt-hero .es-hero-slide__btn--primary {
    background: transparent;
    border-color: #fff;
    color: #fff;
}
.vt-skin .vt-hero .es-hero-slide__btn--primary:hover {
    background: #fff;
    border-color: #fff;
    color: var(--vt-ink);
    transform: none;
}

/* Pfeile und Punkte: eckig, Punkte rechts über der Aktionsleiste */
.vt-skin .vt-hero .es-slider__arrow {
    border-radius: 0;
    top: 58%;
}
.vt-skin .vt-hero .es-hero-slider__dots {
    left: auto;
    right: clamp(1rem, 4vw, 3rem);
    bottom: calc(var(--vt-actions-h, 6.5rem) + 1.25rem);
    transform: none;
    border-radius: 0;
    background: rgba(7, 7, 12, 0.55);
}
.vt-skin .vt-hero .es-hero-slider__dot {
    border-radius: 0 !important;
    width: 22px !important;
    height: 4px !important;
    min-height: 4px;
}
.vt-skin .vt-hero .es-hero-slider__dot.es-slider__dot--active::after {
    background: var(--vt-pink);
}

/* Aktionsleiste: Program / Tickets / Reserve */
.vt-skin .vt-hero {
    --vt-actions-h: clamp(5rem, 11vh, 7rem);
}
.vt-skin .vt-hero .vt-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    max-width: none;
    padding: 0;
    border-top: 1px solid var(--vt-line);
}
.vt-skin .vt-actions .wp-block-button {
    margin: 0;
    width: auto;
}
.vt-skin .vt-actions .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--vt-actions-h);
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
    border-radius: 0;
    background: rgba(7, 7, 12, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--vt-display);
    font-size: clamp(1.1rem, 2.2vw, 1.9rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--et-transition, 0.2s ease), color var(--et-transition, 0.2s ease);
}
.vt-skin .vt-actions .wp-block-button + .wp-block-button .wp-block-button__link {
    border-left: 1px solid var(--vt-line);
}
.vt-skin .vt-actions .wp-block-button__link::after {
    content: '\2192';
    font-family: var(--vt-body);
    font-weight: 400;
    transition: transform var(--et-transition, 0.2s ease);
}
.vt-skin .vt-actions .wp-block-button__link:hover,
.vt-skin .vt-actions .wp-block-button__link:focus-visible {
    background: #fff;
    color: var(--vt-ink);
}
.vt-skin .vt-actions .wp-block-button__link:hover::after {
    transform: translateX(0.25em);
}
/* Reserve ist das Signal */
.vt-skin .vt-actions .vt-actions__reserve .wp-block-button__link {
    background: var(--vt-pink);
}
.vt-skin .vt-actions .vt-actions__reserve .wp-block-button__link:hover {
    background: #fff;
    color: var(--vt-pink);
}

/* Kein Abstand zwischen Slider und folgendem Abschnitt außer dem eigenen */
.vt-skin .et-canvas > .vt-hero + *,
.vt-skin .et-canvas > .vt-floors + * {
    margin-top: clamp(3rem, 7vw, 6rem);
}

/* --- 5. Theme Nights: Slider ohne Aktionsleiste, Vorschaubilder ---------- */

.vt-skin .vt-hero--themes .es-hero-slider__dots {
    bottom: clamp(1.25rem, 4vh, 2.5rem);
    right: auto;
    left: clamp(1.5rem, 6vw, 6rem);
    padding: 8px;
}
.vt-skin .vt-hero--themes .es-slider__dots--thumbs {
    --es-slider-thumb-w: 104px;
    --es-slider-thumb-h: 64px;
}
.vt-skin .vt-hero--themes .es-hero-slide::after {
    height: 30%;
}

/* --- 6. Floors: Fullscreen-Slider der Räume ------------------------------ */
/* [ensemble_locations layout=slider columns=1 dots=thumbs gap=0] in der
   Gruppe .vt-floors. Jede Location-Card wird zum Vollbild: Foto als
   Fläche, Name riesig im oberen Drittel, Vorschaubilder unten. */

.vt-skin .vt-floors {
    position: relative;
    margin-bottom: 0;
    background: var(--vt-ink);
}
.vt-skin .vt-floors .es-slider {
    position: relative;
    margin: 0;
    padding: 0;
}
.vt-skin .vt-floors .es-slider__track {
    gap: 0 !important;
}
.vt-skin .vt-floors .es-slider__slide {
    height: 100svh;
    min-height: 32rem;
}
.vt-skin .vt-floors .ensemble-location-card {
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--vt-ink);
    box-shadow: none;
    overflow: hidden;
}
.vt-skin .vt-floors .ensemble-location-card-inner {
    position: relative;
    display: block;
    height: 100%;
    color: #fff;
    text-decoration: none;
}
.vt-skin .vt-floors .ensemble-location-image {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}
.vt-skin .vt-floors .ensemble-location-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    transition: transform 6s ease;
}
.vt-skin .vt-floors .es-slider__slide--active .ensemble-location-image img {
    transform: scale(1.04);
}
.vt-skin .vt-floors .ensemble-location-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(7, 7, 12, 0.9) 0%, rgba(7, 7, 12, 0.35) 45%, rgba(7, 7, 12, 0) 65%),
        linear-gradient(to top, rgba(7, 7, 12, 0.8) 0%, rgba(7, 7, 12, 0) 30%);
}
.vt-skin .vt-floors .ensemble-location-content {
    position: absolute;
    top: calc(var(--vt-head-h) + clamp(2rem, 7vh, 5rem));
    left: clamp(1.5rem, 6vw, 6rem);
    right: clamp(1.5rem, 6vw, 6rem);
    z-index: 2;
    padding: 0;
    background: transparent;
    color: #fff;
}
.vt-skin .vt-floors .ensemble-location-type,
.vt-skin .vt-floors .ensemble-location-city {
    display: inline-block;
    align-self: flex-start;
    padding: 0.35em 0.8em;
    background: var(--vt-pink);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.vt-skin .vt-floors .ensemble-location-card .ensemble-location-title {
    margin: 0.3em 0 0.15em;
    color: #fff;
    font-size: clamp(3rem, 10vw, 9rem);
}
.vt-skin .vt-floors .ensemble-location-meta,
.vt-skin .vt-floors .ensemble-location-events {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vt-skin .vt-floors .ensemble-location-badge {
    top: auto;
    bottom: 7.5rem;
    left: clamp(1.5rem, 6vw, 6rem);
    right: auto;
    z-index: 2;
    border-radius: 0;
    background: rgba(7, 7, 12, 0.7);
    color: #fff;
}
.vt-skin .vt-floors .ensemble-location-card:hover {
    transform: none;
}
/* Vorschaubilder unten mittig über dem Bild */
.vt-skin .vt-floors .es-slider .es-slider__dots {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 4vh, 2.5rem);
    transform: translateX(-50%);
    z-index: 10;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: 8px;
    background: rgba(7, 7, 12, 0.55);
}
.vt-skin .vt-floors .es-slider__dots--thumbs {
    --es-slider-thumb-w: 120px;
    --es-slider-thumb-h: 72px;
}
.vt-skin .vt-floors .es-slider__arrow,
.vt-skin .vt-floors .es-slider .es-slider__prev,
.vt-skin .vt-floors .es-slider .es-slider__next {
    border-radius: 0;
    background: rgba(7, 7, 12, 0.55);
    color: #fff;
    border-color: var(--vt-line);
}
.vt-skin .vt-floors .es-slider .es-slider__prev { left: 1rem; }
.vt-skin .vt-floors .es-slider .es-slider__next { right: 1rem; }

/* --- 7. Timetable als Leuchttafel, Bild über den Infos ------------------ */
/* [ensemble_timetable layout=vertical show_image=true image_position=top
   class=vt-tafel]: nachtblaue Tafel, je Floor ein Farbstreifen in seiner
   Lichtfarbe, Tage als Reiter. Jeder Set-Block zeigt oben das Bild des
   Abends, darunter Zeit und Titel. */

.vt-skin .vt-tafel {
    background: var(--vt-ink);
    color: #fff;
    padding: clamp(1rem, 3vw, 2rem);
}
.vt-skin .vt-tafel .es-timetable-filters {
    margin-bottom: 1.25rem;
}
.vt-skin .vt-tafel .es-filters-inner {
    justify-content: flex-start;
    gap: 0;
}
.vt-skin .vt-tafel .es-day-filter {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    background: transparent;
    border: 1px solid var(--vt-line);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--vt-display);
    font-weight: 800;
    text-transform: uppercase;
}
.vt-skin .vt-tafel .es-day-filter + .es-day-filter {
    border-left: 0;
}
.vt-skin .vt-tafel .es-day-filter:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.vt-skin .vt-tafel .es-day-filter.active {
    background: var(--vt-pink);
    border-color: var(--vt-pink);
    color: #fff;
    box-shadow: var(--vt-glow);
}
.vt-skin .vt-tafel .es-filter-date {
    font-family: var(--vt-body);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}
.vt-skin .vt-tafel .es-day-table {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.vt-skin .vt-tafel .es-day-title {
    align-items: flex-start;
    padding: 0 0 0.9rem;
    background: transparent;
    border-bottom: 3px solid var(--vt-pink);
    color: #fff;
    text-align: left;
}
.vt-skin .vt-tafel .es-day-title .es-day-name {
    font-family: var(--vt-display);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}
.vt-skin .vt-tafel .es-day-title .es-day-date {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--vt-pink);
    opacity: 1;
}
.vt-skin .vt-tafel .es-day-grid .es-time-column {
    padding-top: 56px;
    background: var(--vt-ink);
    border-right: 1px solid var(--vt-line);
}
.vt-skin .vt-tafel .es-day-grid .es-time-slot {
    color: rgba(255, 255, 255, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.05);
    font-variant-numeric: tabular-nums;
}
.vt-skin .vt-tafel .es-stage-col {
    border-right-color: rgba(255, 255, 255, 0.06);
}
.vt-skin .vt-tafel .es-stage-col .es-stage-header {
    justify-content: flex-start;
    box-sizing: border-box;
    height: 56px;
    min-height: 56px;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border-top: 0;
    border-bottom: 4px solid var(--stage-color, var(--vt-pink));
    text-align: left;
}
.vt-skin .vt-tafel .es-stage-col .es-stage-name {
    font-family: var(--vt-display);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
}
.vt-skin .vt-tafel .es-stage-events {
    background: transparent;
}
.vt-skin .vt-tafel .es-hour-line {
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.05);
}
/* Set-Block: Bild oben, Infos darunter */
.vt-skin .vt-tafel .es-event {
    left: 3px;
    right: 3px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: var(--vt-panel);
    border: 0;
    border-top: 3px solid var(--event-color, var(--vt-pink));
    box-shadow: inset 0 -2px 0 var(--vt-ink); /* Fuge zum nächsten Set */
    color: #fff;
}
.vt-skin .vt-tafel .es-event.es-image-top .es-event-image {
    flex: 0 1 58%;
    height: auto;
    min-height: 0;
    overflow: hidden;
}
.vt-skin .vt-tafel .es-event.es-image-top .es-event-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.05);
    transition: transform 0.4s ease;
}
.vt-skin .vt-tafel .es-event-info {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.6rem 0.6rem;
    min-height: 0;
}
.vt-skin .vt-tafel .es-event:hover,
.vt-skin .vt-tafel .es-event:focus-visible {
    transform: none;
    background: var(--event-color, var(--vt-pink));
    box-shadow: 0 0 0 1px var(--event-color, var(--vt-pink)), 0 0 24px color-mix(in srgb, var(--event-color, #ff3b6b) 45%, transparent);
    color: var(--vt-ink);
    z-index: 4;
}
.vt-skin .vt-tafel .es-event:hover .es-event-image img {
    transform: scale(1.06);
}
.vt-skin .vt-tafel .es-event .es-event-track {
    display: none; /* wiederholt nur den Namen der Nacht */
}
.vt-skin .vt-tafel .es-event-time {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--event-color, var(--vt-pink));
}
.vt-skin .vt-tafel .es-event:hover .es-event-time {
    color: var(--vt-ink);
}
.vt-skin .vt-tafel .es-event-title {
    font-family: var(--vt-display);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    -webkit-line-clamp: 2;
}

/* --- 8. Raumpläne ------------------------------------------------------- */

.vt-skin .vt-plan,
.vt-skin .es-floor-plan-container {
    border-radius: 0;
}
.vt-skin .vt-perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1px;
    padding: 0;
    list-style: none;
    background: var(--vt-line);
    border: 1px solid var(--vt-line);
}
.vt-skin .vt-perks li {
    margin: 0;
    padding: 1.25rem 1.4rem;
    background: var(--vt-night);
    font-family: var(--vt-display);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
}
.vt-skin .vt-perks li::before {
    content: '';
    display: block;
    width: 1.4rem;
    height: 3px;
    margin-bottom: 0.8rem;
    background: var(--vt-pink);
    box-shadow: var(--vt-glow);
}

/* VIP-Pakete (03.11.2026): eine Kachel je Floor, Name oben, Text darunter */
.vt-skin .vt-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1px;
    padding: 0;
    list-style: none;
    background: var(--vt-line);
    border: 1px solid var(--vt-line);
}
.vt-skin .vt-packages li {
    margin: 0;
    padding: 1.4rem 1.4rem 1.6rem;
    background: var(--vt-night);
    line-height: 1.5;
}
.vt-skin .vt-packages li strong {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--vt-display);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
}
.vt-skin .vt-packages li strong::before {
    content: '';
    display: block;
    width: 1.4rem;
    height: 3px;
    margin-bottom: 0.8rem;
    background: var(--vt-cyan, var(--vt-pink));
    box-shadow: var(--vt-glow);
}

/* --- 9. Cards, Buttons, Abstände ---------------------------------------- */

.vt-skin .ensemble-event-card,
.vt-skin .ensemble-location-card,
.vt-skin .et-news-card {
    border-radius: 0;
}
.vt-skin .ensemble-event-card .ensemble-event-title,
.vt-skin .ensemble-location-card .ensemble-location-title {
    font-size: 1.2rem;
}
.vt-skin .ensemble-btn,
.vt-skin .wp-block-button__link {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
/* Buttons in den Karten angeglichen (Fabian 03.11.): gleiche Hoehe, Schrift,
   Laufweite und Kante. Tickets ist die Hauptaktion (Pink), View Event die
   zweite (Kontur). Vorher: Tickets als schmale Kontur mit Icon, View Event
   als breiter pinker Block mit anderer Schriftgroesse. */
.vt-skin .ensemble-event-card .ensemble-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
}
.vt-skin .ensemble-event-card .ensemble-btn svg {
    width: 1.1em;
    height: 1.1em;
}
.vt-skin .ensemble-event-card .ensemble-btn-tickets,
.vt-skin .ensemble-event-card .ensemble-btn-tickets--compact {
    background: var(--vt-pink);
    border-color: var(--vt-pink);
    color: #fff;
}
.vt-skin .ensemble-event-card .ensemble-btn-tickets:hover,
.vt-skin .ensemble-event-card .ensemble-btn-tickets--compact:hover {
    background: #fff;
    border-color: #fff;
    color: var(--vt-ink, #0b0b12);
}
.vt-skin .ensemble-event-card .ensemble-btn:not(.ensemble-btn-tickets) {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}
.vt-skin .ensemble-event-card .ensemble-btn:not(.ensemble-btn-tickets):hover {
    border-color: var(--vt-pink);
    color: var(--vt-pink);
}
.vt-skin .vt-btn-signal .wp-block-button__link {
    background: var(--vt-pink);
    color: #fff;
}
.vt-skin .vt-btn-signal .wp-block-button__link:hover {
    background: #fff;
    color: var(--vt-pink);
}

/* Seiten: Bausteine und Zwischenüberschriften mit Luft, Absätze eng */
.vt-skin .et-entry__content > * + :is(div, section, figure, form, table, ul, .wp-block-group, .wp-block-buttons, .wp-block-shortcode) {
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.vt-skin .et-entry__content > h2,
.vt-skin .et-entry__content > .wp-block-heading {
    margin-top: clamp(4rem, 8vw, 7rem);
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}
.vt-skin .et-entry__content > p:first-of-type {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    max-width: 48rem;
}
.vt-skin .et-canvas > :not(.alignfull):not(.alignwide) {
    margin-left: auto;
    margin-right: auto;
}

/* --- 10. Mobil ---------------------------------------------------------- */

@media (max-width: 782px) {
    /* Slider: Infos oben, wischen statt Pfeile */
    .vt-skin .vt-hero .es-slider__arrow,
    .vt-skin .vt-floors .es-slider .es-slider__prev,
    .vt-skin .vt-floors .es-slider .es-slider__next {
        display: none !important;
    }
    .vt-skin .vt-hero .es-hero-slider--fullscreen,
    .vt-skin .vt-hero .es-hero-slider--fullscreen .es-slider__slide,
    .vt-skin .vt-hero .es-hero-slider--fullscreen .es-hero-slide {
        height: 100svh;
        min-height: 100svh;
        max-height: 100svh;
    }
    .vt-skin .vt-hero .es-hero-slide__content {
        padding: calc(var(--vt-head-h) + 1.5rem) 1.25rem 0;
    }
    .vt-skin .vt-hero .es-hero-slide__title {
        font-size: clamp(2.4rem, 12vw, 3.8rem);
        word-break: normal;
        hyphens: auto;
    }
    .vt-skin .vt-hero .es-hero-slide__meta {
        flex-direction: column;
        gap: 0.35rem;
    }

    /* Aktionsleiste: am Handy fest am unteren Rand, solange die Startseite
       offen ist — sie ersetzt die Pfeile und bleibt im Daumenbereich. */
    .vt-skin.home .vt-hero .vt-actions {
        position: fixed;
        z-index: 900;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: rgba(7, 7, 12, 0.94);
    }
    .vt-skin.home {
        padding-bottom: calc(var(--vt-actions-h-mobil, 4rem) + env(safe-area-inset-bottom, 0));
    }
    .vt-skin .vt-hero {
        --vt-actions-h: 4rem;
    }
    .vt-skin .vt-actions .wp-block-button__link {
        justify-content: center;
        padding: 0 0.5rem;
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        background: transparent;
    }
    .vt-skin .vt-actions .wp-block-button__link::after {
        display: none;
    }
    .vt-skin .vt-hero .es-hero-slider__dots {
        right: 50%;
        transform: translateX(50%);
        bottom: 1.5rem;
    }
    .vt-skin .vt-hero--themes .es-hero-slider__dots {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    /* Floors: Name kleiner, Vorschaubilder als wischbare Leiste */
    .vt-skin .vt-floors .ensemble-location-content {
        top: calc(var(--vt-head-h) + 1.5rem);
        left: 1.25rem;
        right: 1.25rem;
    }
    .vt-skin .vt-floors .ensemble-location-card .ensemble-location-title {
        font-size: clamp(2.6rem, 14vw, 4.2rem);
    }
    .vt-skin .vt-floors .es-slider .es-slider__dots {
        left: 0;
        right: 0;
        transform: none;
        max-width: none;
        justify-content: flex-start;
    }
    .vt-skin .vt-floors .es-slider__dots--thumbs {
        --es-slider-thumb-w: 76px;
        --es-slider-thumb-h: 48px;
    }
    .vt-skin .vt-floors .ensemble-location-badge {
        bottom: 6rem;
        left: 1.25rem;
    }

    /* Timetable: ein Floor im Blick, wischen zum nächsten; Zeitspalte bleibt */
    .vt-skin .vt-tafel {
        padding: 0.75rem 0;
        margin-left: calc(-1 * var(--et-space-md, 1.25rem));
        margin-right: calc(-1 * var(--et-space-md, 1.25rem));
    }
    .vt-skin .vt-tafel .es-timetable-filters {
        padding: 0 0.75rem;
        overflow-x: auto;
    }
    .vt-skin .vt-tafel .es-filters-inner {
        flex-wrap: nowrap;
    }
    .vt-skin .vt-tafel .es-day-filter {
        flex: 0 0 auto;
        padding: 0.7rem 1rem;
    }
    .vt-skin .vt-tafel .es-day-title {
        padding-left: 0.75rem;
    }
    .vt-skin .vt-tafel.es-timetable-vertical .es-stage-col {
        flex: 0 0 72vw;
        min-width: 72vw;
    }
    .vt-skin .vt-tafel.es-timetable-vertical .es-timetable-days-wrapper {
        scroll-snap-type: x mandatory;
    }
    .vt-skin .vt-tafel .es-event-title {
        font-size: 0.95rem;
    }

    /* Raumpläne: Übersicht scrollt seitlich statt zu schrumpfen; gebucht wird
       in der Ticketliste darunter */
    .vt-skin .vt-plan {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-skin .vt-floors .ensemble-location-image img,
    .vt-skin .vt-tafel .es-event .es-event-image img {
        transition: none;
        transform: none !important;
    }
}

/* --- 11. Artist-Seiten: Bild im Vollbild, Infos darauf (01.11.2026) -----
   Das Titelbild der Künstlerseite füllt den Schirm direkt unter dem
   transparenten Kopf; Typ, Genre, Name und Herkunft stehen unten links auf
   dem Bild. Bild und Kopfbereich teilen sich dieselbe Rasterzelle, alle
   übrigen Bereiche (Bio, Social, Galerie, Termine) folgen darunter.
   Porträts sind hochkant: der Ausschnitt sitzt im oberen Drittel, damit
   das Gesicht bleibt. Ohne Titelbild greift nichts davon. */
.vt-skin .et-main:has(.ensemble-single-artist > .ensemble-artist-section--hero) {
    padding-top: 0;
    overflow-x: clip;
}
.vt-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(3rem, 6vw, 5.5rem);
    padding-top: 0;
    margin-top: 0;
}
.vt-skin .ensemble-single-artist > .ensemble-artist-section--hero {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    margin: 0 calc(50% - 50vw);
    height: 100svh;
    min-height: 32rem;
    overflow: hidden;
    border-radius: 0;
    background: var(--vt-ink);
}
.vt-skin .ensemble-single-artist > .ensemble-artist-section--hero img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    /* Porträt quer gezeigt: bei 36 % stehen die Augen meist in der oberen Hälfte,
       Name und Angaben liegen über Kinn und Schultern. */
    object-position: center 36%;
    border-radius: 0;
}
.vt-skin .ensemble-single-artist > .ensemble-artist-section--hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(7, 7, 12, 0.95) 0%, rgba(7, 7, 12, 0.6) 24%, rgba(7, 7, 12, 0) 48%),
        linear-gradient(to bottom, rgba(7, 7, 12, 0.6) 0%, rgba(7, 7, 12, 0) 22%);
    pointer-events: none;
}
.vt-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) > .ensemble-artist-section--header {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 0 clamp(1.75rem, 5vh, 3.5rem);
    color: #fff;
}
.vt-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) > .ensemble-artist-section--header .ensemble-artist-title {
    margin: 0.15em 0 0.2em;
    max-width: 14ch;
    color: #fff;
    font-size: clamp(3rem, 9vw, 8.5rem);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.vt-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) > .ensemble-artist-section--header .ensemble-artist-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vt-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) > .ensemble-artist-section--header .ensemble-artist-type {
    padding: 0.4em 0.9em;
    background: var(--vt-pink);
    box-shadow: var(--vt-glow);
    color: #fff;
}
/* Herkunft als schmales Feld statt Balken über die ganze Breite */
.vt-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) > .ensemble-artist-section--header .ensemble-artist-references {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    margin-top: 0.4rem;
    padding: 0.45em 0.9em;
    background: rgba(7, 7, 12, 0.6);
    border-left: 3px solid var(--vt-pink);
    border-radius: 0;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (max-width: 782px) {
    .vt-skin .ensemble-single-artist > .ensemble-artist-section--hero {
        height: 88svh;
    }
    .vt-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) > .ensemble-artist-section--header {
        padding-bottom: 2rem;
    }
    .vt-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) > .ensemble-artist-section--header .ensemble-artist-title {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }
}

/* --- 12. Veranstaltungs- und Floor-Seiten: Bild im Vollbild (01.11.2026) --
   Wie die Artist-Seiten (§ 11): Titelbild über den ganzen Schirm unter dem
   transparenten Kopf, Kategorie, Titel, Datum, Ort und Ticket-Button unten
   links auf dem Bild. Muster wie Ostgelände § 10, dort mit 72svh; hier
   Vollbild. Die Bilder sind quer (Abende 16:9, Floors 3:2), der Ausschnitt
   bleibt mittig. Ohne Titelbild greift nichts davon. */
.vt-skin .et-main:has(.ensemble-single-event > .ensemble-event-section--hero, .ensemble-single-location > .ensemble-location-section--hero) {
    padding-top: 0;
    overflow-x: clip;
}
.vt-skin :is(.ensemble-single-event, .ensemble-single-location):has(> [class*="-section--hero"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(3rem, 6vw, 5.5rem);
    padding-top: 0;
    margin-top: 0;
}
.vt-skin :is(.ensemble-single-event, .ensemble-single-location) > [class*="-section--hero"] {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    margin: 0 calc(50% - 50vw);
    height: 100svh;
    min-height: 32rem;
    overflow: hidden;
    border-radius: 0;
    background: var(--vt-ink);
}
.vt-skin :is(.ensemble-single-event, .ensemble-single-location) > [class*="-section--hero"] :is(img, video) {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}
.vt-skin :is(.ensemble-single-event, .ensemble-single-location) > [class*="-section--hero"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(7, 7, 12, 0.95) 0%, rgba(7, 7, 12, 0.6) 26%, rgba(7, 7, 12, 0) 52%),
        linear-gradient(to bottom, rgba(7, 7, 12, 0.6) 0%, rgba(7, 7, 12, 0) 22%);
    pointer-events: none;
}
.vt-skin :is(.ensemble-single-event, .ensemble-single-location):has(> [class*="-section--hero"]) > [class*="-section--header"] {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 0 clamp(1.75rem, 5vh, 3.5rem);
    color: #fff;
}
.vt-skin :is(.ensemble-single-event, .ensemble-single-location):has(> [class*="-section--hero"]) > [class*="-section--header"] :is(h1, a:not(.ensemble-btn)) {
    color: #fff;
}
/* Nur der Titel im Kopfbereich: dieselben Klassen tragen die Cards im
   Line-up und in den verwandten Terminen weiter unten. */
.vt-skin :is(.ensemble-single-event, .ensemble-single-location):has(> [class*="-section--hero"]) > [class*="-section--header"] :is(.ensemble-event-title, .ensemble-location-title) {
    margin: 0.15em 0 0.2em;
    max-width: 16ch;
    color: #fff;
    font-size: clamp(2.8rem, 8vw, 7.5rem);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.vt-skin .ensemble-single-event:has(> .ensemble-event-section--hero) > .ensemble-event-section--header :is(.ensemble-event-meta, .ensemble-event-price, .ensemble-event-age-restriction, .ensemble-event-calendar, .ensemble-event-categories),
.vt-skin .ensemble-single-location:has(> .ensemble-location-section--hero) > .ensemble-location-section--header :is(.ensemble-location-address, .ensemble-location-meta) {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    letter-spacing: 0.04em;
}
/* Ticket-Button auf dem Bild im Signal-Ton */
.vt-skin .ensemble-single-event:has(> .ensemble-event-section--hero) > .ensemble-event-section--header .ensemble-event-ticket-btn {
    border-radius: 0;
    background: var(--vt-pink);
    box-shadow: var(--vt-glow);
    color: #fff;
}
.vt-skin .ensemble-single-event:has(> .ensemble-event-section--hero) > .ensemble-event-section--header .ensemble-event-ticket-btn:hover {
    background: #fff;
    color: var(--vt-ink);
    box-shadow: none;
}
@media (max-width: 782px) {
    .vt-skin :is(.ensemble-single-event, .ensemble-single-location) > [class*="-section--hero"] {
        height: 88svh;
    }
    .vt-skin :is(.ensemble-single-event, .ensemble-single-location):has(> [class*="-section--hero"]) > [class*="-section--header"] {
        padding-bottom: 2rem;
    }
    .vt-skin :is(.ensemble-single-event, .ensemble-single-location):has(> [class*="-section--hero"]) > [class*="-section--header"] :is(.ensemble-event-title, .ensemble-location-title) {
        font-size: clamp(2.4rem, 12vw, 3.8rem);
    }
}

/* --- 13. Artists-Seite: Featured und Grid (03.11.2026) ------------------ */

/* Vorschauen unter dem Featured Artist eckig, wie die Vorschauen der
   Floors und Theme Nights */
.vt-skin .es-featured-slider-image {
    border-radius: 0;
    border-width: 2px;
}
.vt-skin .es-featured-slider-item.is-active .es-featured-slider-image {
    border-color: var(--vt-pink);
    box-shadow: var(--vt-glow);
}
.vt-skin .es-featured-more-btn,
.vt-skin .es-featured-nav-btn {
    border-radius: 0;
}

/* "View Profile" ausgeblendet (Fabian 03.11.): Bild und Name der Karte
   fuehren aufs Profil, der Button war doppelt. */
.vt-skin .ensemble-artist-card .ensemble-artist-actions,
.vt-skin .ensemble-artist-card .ensemble-artist-list-action {
    display: none;
}

/* Karten mit einem Innenabstand statt zwei (Fabian 03.11.): Die Karte und
   ihr Inhalt hatten beide --ensemble-card-padding, der Text stand 50 px
   vom Rand. Jetzt wie die Staff-Karten 25 px. Das Bild bleibt randlos. */
.vt-skin .ensemble-event-card,
.vt-skin .ensemble-artist-card,
.vt-skin .ensemble-location-card {
    padding: 0;
}