/*
Theme Name: Ensemble Bristol
Theme URI: https://ensemble-plugin.com
Template: ensemble-theme
Author: Kraftwerk Marketing
Author URI: https://kraftwerk-marketing.de
Description: Premium skin "Bristol" for the Ensemble plugin — bold editorial style (Cityfest): Space Grotesk headlines, edge-to-edge grids, dramatic hover effects, dark/light mode toggle. Child theme of Ensemble Theme. Activate the "Bristol" preset in the Brand Tuner for the matching color world.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ensemble-bristol
*/

/* ============================================================
   ENSEMBLE BRISTOL — HERKUNFT & ARCHITEKTUR (Phase 5, 15.08.2026)
   ------------------------------------------------------------
   Skin-CSS verbatim portiert aus dem alten Layout-Set
   templates/layouts/bristol (alte Multisite cityfestival).
   Eigenes Scoping über .es-bristol*-Klassen; Standard ist DARK,
   der Light-Modus greift über die es-mode-light-Klasse (setzt
   assets/js/bristol-mode.js per Toggle-Button, Wahl gemerkt in
   localStorage). Farb-/Font-Werte kommen aus dem Brand-Tuner-
   Preset "Bristol" (includes/presets/bristol.php) über die
   --ensemble-*-Variablen — die #-Fallbacks im CSS entsprechen
   dem Preset. Kanon-Overrides liegen unter /ensemble/
   (Loader-Seam des Plugins).
   ============================================================ */

/**
 * Bristol Card Title Fix
 * ======================
 * Ensures card titles are always white, regardless of parent container.
 * 
 * Problem: Theme styles like `.et-content h3` override card titles
 * Solution: Higher specificity + !important for critical cases
 * 
 * Add this at the END of bristol style.css
 */

/* ============================================
   CARD TITLE COLOR FIX - HIGH SPECIFICITY
   Ensures white titles in ALL contexts
   ============================================ */

/* Base card title - force white */
.es-bristol-card .es-bristol-card-title,
.es-bristol-card h3.es-bristol-card-title,
.es-bristol-card-title {
    color: #fff !important;
}

/* Info panel title on hover - force white */
.es-bristol-card .es-bristol-card-info-title,
.es-bristol-card h3.es-bristol-card-info-title,
.es-bristol-card-info-title {
    color: #fff !important;
}

/* Shortcode Container für Bristol Cards */
.ensemble-artists-list:has(.es-bristol-card),
.ensemble-locations-list:has(.es-bristol-card),
.ensemble-events-grid:has(.es-bristol-card) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

@media (max-width: 1024px) {
    .ensemble-artists-list:has(.es-bristol-card),
    .ensemble-locations-list:has(.es-bristol-card),
    .ensemble-events-grid:has(.es-bristol-card) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ensemble-artists-list:has(.es-bristol-card),
    .ensemble-locations-list:has(.es-bristol-card),
    .ensemble-events-grid:has(.es-bristol-card) {
        grid-template-columns: 1fr;
    }
}
/* Within any container (blocks, shortcodes, theme content) */
.et-content .es-bristol-card-title,
.et-content .es-bristol-card-info-title,
.et-site-content .es-bristol-card-title,
.et-site-content .es-bristol-card-info-title,
.et-page-content .es-bristol-card-title,
.et-page-content .es-bristol-card-info-title,
.entry-content .es-bristol-card-title,
.entry-content .es-bristol-card-info-title,
.wp-block-group .es-bristol-card-title,
.wp-block-group .es-bristol-card-info-title {
    color: #fff !important;
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif) !important;
}

/* Related scroll cards */
.es-bristol-related-scroll .es-bristol-card-title,
.es-bristol-related-scroll .es-bristol-card-info-title {
    color: #fff !important;
}

/* Grid cards */
.es-bristol-cards-grid .es-bristol-card-title,
.es-bristol-cards-grid .es-bristol-card-info-title {
    color: #fff !important;
}

/* Artist item names */
.es-bristol-artist-item-name,
.es-bristol-artist-item .es-bristol-artist-item-name {
    color: #fff !important;
}

/* ============================================
   LIGHT MODE: Still white on cards!
   Cards have dark overlay, so titles stay white
   ============================================ */

.es-mode-light .es-bristol-card-title,
.es-mode-light .es-bristol-card-info-title,
.es-bristol.es-mode-light .es-bristol-card-title,
.es-bristol.es-mode-light .es-bristol-card-info-title {
    color: #fff !important;
}

/* ============================================
   ENSURE VARIABLES ARE SET ON CARDS
   For contexts outside .es-bristol wrapper
   ============================================ */

.es-bristol-card {
    /* Ensure these are always defined */
    --es-primary: var(--ensemble-primary, #ff5722);
    --es-accent: var(--ensemble-secondary, #00e5ff);
    --es-surface: var(--ensemble-card-bg, #18181f);
    --es-bg-alt: var(--ensemble-card-bg-dark, #111118);
    --es-text-muted: var(--ensemble-text-muted, #606075);
    --es-text-secondary: var(--ensemble-text-secondary, #a0a0b8);
    --es-font-heading: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
}

/* ============================================
   BLOCK/SHORTCODE CONTEXT FIX
   When Bristol cards are used outside .es-bristol
   ============================================ */

/* Gutenberg Block context */
[class*="wp-block"] .es-bristol-card-title,
[class*="wp-block"] .es-bristol-card-info-title {
    color: #fff !important;
}

/* Shortcode context */
.ensemble-events-grid .es-bristol-card-title,
.ensemble-events-grid .es-bristol-card-info-title,
.ensemble-shortcode .es-bristol-card-title,
.ensemble-shortcode .es-bristol-card-info-title {
    color: #fff !important;
}

/* Elementor context */
.elementor-widget .es-bristol-card-title,
.elementor-widget .es-bristol-card-info-title {
    color: #fff !important;
}
/**
 * Bristol City Festival - EDITORIAL STYLE
 * ========================================
 * Bold, magazine-inspired design
 * Edge-to-edge grids, dramatic hovers
 * Asymmetric layouts, overlapping elements
 * 
 * @package Ensemble
 * @layout Bristol City Festival
 * @version 2.0.0
 */

/* ============================================
   BRISTOL SETS --ensemble-* VARIABLES
   Theme and layout both use these!
   Selectors match both html and body classes
   ============================================ */

/* Dark Mode (Default) */
html.es-layout-bristol,
html.es-bristol-active,
body.es-bristol-active,
body.et-layout-bristol,
.es-bristol {
    /* Core Colors */
    --ensemble-primary: #ff5722;
    --ensemble-secondary: #00e5ff;
    --ensemble-hover: #00e5ff;
    
    /* Backgrounds */
    --ensemble-bg: #0a0a0f;
    --ensemble-card-bg: #18181f;
    --ensemble-card-bg-dark: #111118;
    
    /* Text */
    --ensemble-text: #ffffff;
    --ensemble-text-dark: #ffffff;
    --ensemble-text-secondary: #a0a0b8;
    --ensemble-text-muted: #606075;
    --ensemble-text-muted-dark: #606075;
    
    /* Borders */
    --ensemble-card-border: #2a2a3a;
    --ensemble-card-border-dark: #2a2a3a;
    
    /* Typography */
    --ensemble-font-heading: 'Space Grotesk', system-ui, sans-serif;
    --ensemble-font-body: 'Inter', system-ui, sans-serif;
    --ensemble-heading-weight: 900;
    
    /* Buttons */
    --ensemble-button-bg: #ff5722;
    --ensemble-button-text: #ffffff;
    --ensemble-button-hover-bg: #00e5ff;
    --ensemble-button-hover-text: #0a0a0f;
    --ensemble-button-radius: 0;
    
    /* Radius */
    --ensemble-radius: 0;
    --ensemble-card-radius: 0;
    
    /* Bristol-specific (for brutal typography) */
    --es-title-hero: clamp(4rem, 15vw, 12rem);
    --es-title-card: clamp(1.75rem, 5vw, 4rem);
    --es-title-section: clamp(2rem, 6vw, 5rem);
    --es-title-related: clamp(3rem, 10vw, 8rem);
    
    /* Map es-* to ensemble-* for internal use */
    --es-primary: var(--ensemble-primary);
    --es-accent: var(--ensemble-secondary);
    --es-bg: var(--ensemble-bg);
    --es-bg-alt: var(--ensemble-card-bg-dark);
    --es-surface: var(--ensemble-card-bg);
    --es-border: var(--ensemble-card-border);
    --es-text: var(--ensemble-text);
    --es-text-secondary: var(--ensemble-text-secondary);
    --es-text-muted: var(--ensemble-text-muted);
    --es-font-heading: var(--ensemble-font-heading);
    --es-font-body: var(--ensemble-font-body);
}

/* Light Mode */
html.es-layout-bristol.es-mode-light,
html.es-bristol-active.es-mode-light,
body.es-bristol-active.es-mode-light,
body.et-layout-bristol.es-mode-light,
.es-bristol.es-mode-light {
    /* Core Colors */
    --ensemble-primary: #e64a19;
    --ensemble-secondary: #0097a7;
    --ensemble-hover: #0097a7;
    
    /* Backgrounds */
    --ensemble-bg: #f5f5f8;
    --ensemble-card-bg: #ffffff;
    --ensemble-card-bg-dark: #ffffff;
    
    /* Text */
    --ensemble-text: #0a0a0f;
    --ensemble-text-dark: #0a0a0f;
    --ensemble-text-secondary: #505068;
    --ensemble-text-muted: #808098;
    --ensemble-text-muted-dark: #808098;
    
    /* Borders */
    --ensemble-card-border: #e0e0e8;
    --ensemble-card-border-dark: #e0e0e8;
}

/* ============================================
   BASE
   ============================================ */

.es-bristol {
    background: var(--ensemble-bg, #0a0a0f);
    color: var(--ensemble-text, #ffffff);
    font-family: var(--ensemble-font-body);
    line-height: 1.6;
    min-height: 100vh;
}

.es-bristol *, .es-bristol *::before, .es-bristol *::after {
    box-sizing: border-box;
}

.es-bristol a {
    color: var(--es-primary, #ff5722);
    text-decoration: none;
}

.es-bristol img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   CONTAINER
   ============================================ */

.es-bristol-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.es-bristol-container--full {
    max-width: none;
    padding: 0;
}

/* ============================================
   EDITORIAL CARDS GRID
   Edge-to-edge, no gaps, varying sizes
   ============================================ */

.es-bristol-cards-grid {
    /* Define variables for shortcode contexts */
    --es-primary: #ff5722;
    --es-accent: #00e5ff;
    --es-surface: #18181f;
    --es-bg-alt: #111118;
    --es-text-muted: #606075;
    --es-text-secondary: #a0a0b8;
    --es-font-heading: 'Space Grotesk', system-ui, sans-serif;
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

/* Alternate card sizes for visual interest */
.es-bristol-cards-grid .es-bristol-card:nth-child(5n+1) {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 1200px) {
    .es-bristol-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .es-bristol-cards-grid .es-bristol-card:nth-child(5n+1) {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .es-bristol-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .es-bristol-cards-grid .es-bristol-card:nth-child(5n+1) {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .es-bristol-cards-grid {
        grid-template-columns: 1fr;
    }
    .es-bristol-cards-grid .es-bristol-card:nth-child(5n+1) {
        grid-column: span 1;
    }
}

/* ============================================
   EDITORIAL CARD
   Minimal default, BRUTAL hover
   ============================================ */

.es-bristol-card {
    /* Define variables locally for shortcode contexts */
    --es-primary: #ff5722;
    --es-accent: #00e5ff;
    --es-surface: #18181f;
    --es-bg-alt: #111118;
    --es-text-muted: #606075;
    --es-text-secondary: #a0a0b8;
    --es-font-heading: 'Space Grotesk', system-ui, sans-serif;
    
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--es-surface, #18181f);
}

/* Larger cards get taller aspect ratio */
.es-bristol-cards-grid .es-bristol-card:nth-child(5n+1) {
    aspect-ratio: 1/1.2;
}

.es-bristol-card-link {
    display: block;
    position: absolute;
    inset: 0;
    text-decoration: none;
    color: inherit;
}

/* Image fills entire card */
.es-bristol-card-media {
    position: absolute;
    inset: 0;
}

.es-bristol-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Placeholder */
.es-bristol-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--es-surface) 0%, var(--es-bg-alt) 100%);
}

.es-bristol-card-placeholder svg {
    width: 80px;
    height: 80px;
    stroke: var(--es-text-muted, #606075);
    stroke-width: 0.5;
    opacity: 0.2;
}

/* Default state: BRUTAL title at bottom */
.es-bristol-card-title-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 24px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.8) 40%, transparent 100%);
    z-index: 5;
    transition: opacity 0.4s ease;
}

.es-bristol-card-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.75rem, 5vw, 4rem);
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

/* ============================================
   CARD HOVER: THE MAGIC - BRUTAL EDITION
   ============================================ */

/* Geometric frame overlay - THICKER */
.es-bristol-card::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 3px solid var(--es-primary, #ff5722);
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    pointer-events: none;
}

/* Corner accents - BIGGER */
.es-bristol-card::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-top: 4px solid var(--es-accent, #00e5ff);
    border-left: 4px solid var(--es-accent, #00e5ff);
    opacity: 0;
    transform: translate(-15px, -15px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    z-index: 11;
    pointer-events: none;
}

/* Info panel - hidden by default */
.es-bristol-card-info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    text-align: left;
    background: rgba(10, 10, 15, 0.92);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 8;
}

.es-bristol-card-info-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.75rem, 5vw, 4rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 20px 0;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.es-bristol-card-badge {
    display: inline-block;
    padding: 8px 16px;
    background: var(--es-primary, #ff5722);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
    transform: translateY(30px) skewX(-5deg);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.es-bristol-card-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--es-text-secondary, #a0a0b8);
    font-size: 0.85rem;
    font-weight: 500;
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.es-bristol-card-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.es-bristol-card-meta-item svg {
    width: 18px;
    height: 18px;
    stroke: var(--es-accent, #00e5ff);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

/* CTA Arrow - BIGGER */
.es-bristol-card-cta {
    position: absolute;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--es-primary, #ff5722);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0) rotate(-90deg);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
    z-index: 12;
}

.es-bristol-card-cta svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
    stroke-width: 2.5;
    fill: none;
}

/* ============================================
   HOVER STATE - MAXIMUM IMPACT
   ============================================ */

.es-bristol-card:hover .es-bristol-card-media img {
    transform: scale(1.15);
}

.es-bristol-card:hover .es-bristol-card-title-bar {
    opacity: 0;
}

.es-bristol-card:hover::before {
    opacity: 1;
    transform: scale(1);
}

.es-bristol-card:hover::after {
    opacity: 1;
    transform: translate(0, 0);
}

.es-bristol-card:hover .es-bristol-card-info {
    opacity: 1;
}

.es-bristol-card:hover .es-bristol-card-info-title,
.es-bristol-card:hover .es-bristol-card-badge,
.es-bristol-card:hover .es-bristol-card-meta-list {
    transform: translateY(0) skewX(0);
}

.es-bristol-card:hover .es-bristol-card-badge {
    transform: translateY(0) skewX(-5deg);
}

.es-bristol-card:hover .es-bristol-card-cta {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.es-bristol-card:hover .es-bristol-card-link::after {
    opacity: 1;
    transform: translate(0, 0);
}

/* Second corner accent (bottom right) - BIGGER */
.es-bristol-card-link::after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-bottom: 4px solid var(--es-accent, #00e5ff);
    border-right: 4px solid var(--es-accent, #00e5ff);
    opacity: 0;
    transform: translate(15px, 15px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
    z-index: 11;
    pointer-events: none;
}

.es-bristol-card:hover .es-bristol-card-link::after {
    opacity: 1;
    transform: translate(0, 0);
}

/* ============================================
   SINGLE PAGE - HERO (Asymmetric)
   ============================================ */

.es-bristol-single-hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--es-bg, #0a0a0f);
}

@media (max-width: 1024px) {
    .es-bristol-single-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

/* Left: Image */
.es-bristol-single-hero-media {
    position: relative;
    min-height: 60vh;
}

.es-bristol-single-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Diagonal cut overlay */
.es-bristol-single-hero-media::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 120px;
    background: var(--es-bg, #0a0a0f);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

@media (max-width: 1024px) {
    .es-bristol-single-hero-media::after {
        display: none;
    }
}

/* Right: Content */
.es-bristol-single-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 60px;
    position: relative;
}

@media (max-width: 768px) {
    .es-bristol-single-hero-content {
        padding: 40px 24px;
    }
}

/* Decorative line */
.es-bristol-single-hero-content::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 0;
    width: 4px;
    height: 100px;
    background: var(--es-gradient, linear-gradient(135deg, #ff5722 0%, #ff9800 100%));
}

@media (max-width: 1024px) {
    .es-bristol-single-hero-content::before {
        top: 40px;
        height: 60px;
    }
}

.es-bristol-single-hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: var(--es-primary, #ff5722);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
    transform: skewX(-5deg);
    align-self: flex-start;
}

.es-bristol-single-hero-badge span {
    display: inline-block;
    transform: skewX(5deg);
}

.es-bristol-single-hero-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(4rem, 15vw, 12rem);
    font-weight: 900;
    line-height: 0.85;
    color: var(--es-text, #ffffff);
    margin: 0 0 24px 0;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    /* Text can break out a bit for dramatic effect */
    margin-left: -0.05em;
}

.es-bristol-single-hero-subtitle {
    font-size: 1.25rem;
    color: var(--es-text-secondary, #a0a0b8);
    margin-bottom: 32px;
    max-width: 500px;
}

/* Meta info with icons */
.es-bristol-single-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.es-bristol-single-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.es-bristol-single-hero-meta-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--es-surface, #18181f);
    border: 1px solid var(--es-border, #2a2a3a);
}

.es-bristol-single-hero-meta-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--es-primary, #ff5722);
    stroke-width: 2;
    fill: none;
}

.es-bristol-single-hero-meta-text {
    display: flex;
    flex-direction: column;
}

.es-bristol-single-hero-meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--es-text-muted, #606075);
}

.es-bristol-single-hero-meta-value {
    font-size: 1rem;
    color: var(--es-text, #ffffff);
    font-weight: 500;
}

/* Social links */
.es-bristol-single-hero-social {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 40px;
}

.es-bristol-single-hero-social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--es-border, #2a2a3a);
    color: var(--es-text, #ffffff);
    transition: all 0.3s ease;
}

.es-bristol-single-hero-social a:hover {
    background: var(--es-primary, #ff5722);
    border-color: var(--es-primary, #ff5722);
    color: #fff;
}

.es-bristol-single-hero-social svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   SINGLE PAGE - BODY (Asymmetric Grid)
   ============================================ */

.es-bristol-body {
    padding: 0;
    background: var(--es-bg, #0a0a0f);
}

.es-bristol-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 0;
}

@media (max-width: 1024px) {
    .es-bristol-layout {
        grid-template-columns: 1fr;
    }
}

.es-bristol-main {
    padding: 80px 60px;
    border-right: 1px solid var(--es-border, #2a2a3a);
}

@media (max-width: 768px) {
    .es-bristol-main {
        padding: 40px 24px;
        border-right: none;
    }
}

.es-bristol-aside {
    padding: 80px 40px;
    background: var(--es-bg-alt, #111118);
    position: sticky;
    top: 0;
    height: fit-content;
}

@media (max-width: 1024px) {
    .es-bristol-aside {
        position: static;
        padding: 40px 24px;
    }
}

/* ============================================
   SECTIONS
   ============================================ */

.es-bristol-section {
    margin-bottom: 64px;
}

.es-bristol-section:last-child {
    margin-bottom: 0;
}

.es-bristol-section-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--es-text-muted, #606075);
    margin: 0 0 40px 0;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--es-border, #2a2a3a);
    display: flex;
    align-items: center;
    gap: 20px;
}

.es-bristol-section-title::before {
    content: '';
    width: 50px;
    height: 4px;
    background: var(--es-primary, #ff5722);
}

.es-bristol-prose {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--es-text-secondary, #a0a0b8);
}

.es-bristol-prose p {
    margin: 0 0 1.5em 0;
}

.es-bristol-prose p:last-child {
    margin-bottom: 0;
}

/* ============================================
   INFO CARD (Sidebar) - Stacked style
   ============================================ */

.es-bristol-info-card {
    background: transparent;
    border: none;
}

.es-bristol-info-card-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--es-text-muted, #606075);
    margin: 0 0 32px 0;
}

.es-bristol-info-row {
    padding: 20px 0;
    border-bottom: 1px solid var(--es-border, #2a2a3a);
}

.es-bristol-info-row:last-child {
    border-bottom: none;
}

.es-bristol-info-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--es-text-muted, #606075);
    margin-bottom: 6px;
}

.es-bristol-info-value {
    font-size: 1rem;
    color: var(--es-text, #ffffff);
    font-weight: 500;
}

.es-bristol-info-link {
    color: var(--es-primary, #ff5722);
    font-weight: 500;
}

.es-bristol-info-link:hover {
    text-decoration: underline;
}

/* ============================================
   BUTTONS
   ============================================ */

.es-bristol-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.es-bristol-btn-primary {
    background: var(--es-primary, #ff5722);
    color: #fff;
}

.es-bristol-btn-primary:hover {
    background: var(--es-accent);
    transform: translateX(4px);
}

.es-bristol-btn-outline {
    background: transparent;
    border: 2px solid var(--es-border, #2a2a3a);
    color: var(--es-text, #ffffff);
}

.es-bristol-btn-outline:hover {
    border-color: var(--es-primary, #ff5722);
    color: var(--es-primary, #ff5722);
}

.es-bristol-btn svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   BADGE
   ============================================ */

.es-bristol-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--es-primary, #ff5722);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: skewX(-5deg);
}

.es-bristol-badge > * {
    display: inline-block;
    transform: skewX(5deg);
}

/* ============================================
   RELATED SECTION - Horizontal scroll
   ============================================ */

.es-bristol-related {
    padding: 100px 0;
    background: var(--es-surface, #18181f);
    overflow: hidden;
}

.es-bristol-related-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 60px;
    margin-bottom: 48px;
}

@media (max-width: 768px) {
    .es-bristol-related-header {
        padding: 0 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}

.es-bristol-related-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 900;
    color: var(--es-text, #ffffff);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.85;
}

.es-bristol-related-nav {
    display: flex;
    gap: 8px;
}

.es-bristol-related-nav button {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--es-border, #2a2a3a);
    color: var(--es-text, #ffffff);
    cursor: pointer;
    transition: all 0.3s ease;
}

.es-bristol-related-nav button:hover {
    background: var(--es-primary, #ff5722);
    border-color: var(--es-primary, #ff5722);
    color: #fff;
}

.es-bristol-related-scroll {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.es-bristol-related-scroll::-webkit-scrollbar {
    display: none;
}

.es-bristol-related-scroll .es-bristol-card {
    flex: 0 0 400px;
    scroll-snap-align: start;
    aspect-ratio: 3/4;
}

@media (max-width: 768px) {
    .es-bristol-related-scroll .es-bristol-card {
        flex: 0 0 320px;
    }
}

/* ============================================
   ARTISTS GRID ON SINGLE EVENT
   ============================================ */

.es-bristol-artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
}

.es-bristol-artist-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--es-surface, #18181f);
}

.es-bristol-artist-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.es-bristol-artist-item:hover img {
    transform: scale(1.15);
}

.es-bristol-artist-item-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* ============================================
   EVENTS LIST ON SINGLE ARTIST/LOCATION
   ============================================ */

.es-bristol-events-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.es-bristol-event-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 32px 0;
    border-bottom: 1px solid var(--es-border, #2a2a3a);
    text-decoration: none;
    color: inherit;
    transition: background 0.3s ease;
}

.es-bristol-event-row:hover {
    background: var(--es-surface, #18181f);
    margin: 0 -32px;
    padding: 32px;
}

.es-bristol-event-date {
    text-align: center;
}

.es-bristol-event-date-day {
    display: block;
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    color: var(--es-primary, #ff5722);
    line-height: 0.8;
}

.es-bristol-event-date-month {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--es-text-muted, #606075);
}

.es-bristol-event-info h4 {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--es-text, #ffffff);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
}

.es-bristol-event-info p {
    font-size: 1rem;
    color: var(--es-text-muted, #606075);
    margin: 0;
}

.es-bristol-event-arrow {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--es-border, #2a2a3a);
    transition: all 0.3s ease;
}

.es-bristol-event-row:hover .es-bristol-event-arrow {
    background: var(--es-primary, #ff5722);
    border-color: var(--es-primary, #ff5722);
}

.es-bristol-event-arrow svg {
    width: 24px;
    height: 24px;
    stroke: var(--es-text-muted, #606075);
    stroke-width: 2;
    fill: none;
    transition: stroke 0.3s ease;
}

.es-bristol-event-row:hover .es-bristol-event-arrow svg {
    stroke: #fff;
}

/* ============================================
   THEME TOGGLE
   ============================================ */

.es-bristol-theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--es-surface, #18181f);
    border: 1px solid var(--es-border, #2a2a3a);
    cursor: pointer;
    transition: all 0.3s ease;
}

.es-bristol-theme-toggle:hover {
    background: var(--es-primary, #ff5722);
    border-color: var(--es-primary, #ff5722);
}

.es-bristol-theme-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--es-text, #ffffff);
}

.es-bristol-theme-toggle:hover svg {
    color: #fff;
}

.es-bristol .es-bristol-theme-toggle .icon-sun { display: block; }
.es-bristol .es-bristol-theme-toggle .icon-moon { display: none; }
.es-bristol.es-mode-light .es-bristol-theme-toggle .icon-sun { display: none; }
.es-bristol.es-mode-light .es-bristol-theme-toggle .icon-moon { display: block; }

/* ============================================
   HERO SLIDER
   ============================================ */

.es-bristol-hero-slide {
    position: relative;
    min-height: 80vh;
    display: flex;
    overflow: hidden;
}

.es-bristol-hero-slide-media {
    position: absolute;
    inset: 0;
}

.es-bristol-hero-slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-bristol-hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.5) 50%, transparent 100%);
}

.es-mode-light .es-bristol-hero-slide-overlay {
    background: linear-gradient(90deg, rgba(245,245,248,0.98) 0%, rgba(245,245,248,0.7) 50%, transparent 100%);
}

.es-bristol-hero-slide-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px;
    max-width: 700px;
}

@media (max-width: 768px) {
    .es-bristol-hero-slide-content {
        padding: 40px 24px;
    }
}

.es-bristol-hero-slide-badge {
    display: inline-block;
    padding: 8px 20px;
    background: var(--es-primary, #ff5722);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
    transform: skewX(-5deg);
    align-self: flex-start;
}

.es-bristol-hero-slide-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 0.9;
    color: var(--es-text, #ffffff);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.es-bristol-hero-slide-title a {
    color: inherit;
    text-decoration: none;
}

.es-bristol-hero-slide-title a:hover {
    color: var(--es-primary, #ff5722);
}

.es-bristol-hero-slide-meta {
    font-size: 1rem;
    color: var(--es-text-secondary, #a0a0b8);
    margin-bottom: 32px;
}

.es-bristol-hero-slide-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ============================================
   TICKETS SECTION
   ============================================ */

.es-bristol-tickets-card {
    background: var(--es-surface, #18181f);
    border: 1px solid var(--es-border, #2a2a3a);
    padding: 32px;
}

.es-bristol-tickets-card-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--es-text, #ffffff);
    margin: 0 0 32px 0;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.9;
}

.es-bristol-ticket-cat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--es-border, #2a2a3a);
}

.es-bristol-ticket-cat:last-child {
    border-bottom: none;
}

.es-bristol-cat-name {
    font-weight: 500;
    color: var(--es-text, #ffffff);
}

.es-bristol-cat-price {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-weight: 700;
    color: var(--es-primary, #ff5722);
    font-size: 1.125rem;
}

/* ============================================
   MAP
   ============================================ */

.es-bristol-map-wrapper {
    aspect-ratio: 16/9;
    background: var(--es-surface, #18181f);
    border: 1px solid var(--es-border, #2a2a3a);
    overflow: hidden;
}

.es-bristol-map-wrapper iframe,
.es-bristol-map-wrapper .es-map {
    width: 100%;
    height: 100%;
}

/* ============================================
   GALLERY
   ============================================ */

.es-bristol-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.es-bristol-gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
}

.es-bristol-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.es-bristol-gallery-item:hover img {
    transform: scale(1.1);
}

/* Large first item */
.es-bristol-gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .es-bristol-event-row {
        grid-template-columns: 80px 1fr;
    }
    
    .es-bristol-event-arrow {
        display: none;
    }
    
    .es-bristol-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .es-bristol-gallery-item:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }
}
/**
 * Bristol Card Title Fix
 * ======================
 * Ensures card titles are always white, regardless of parent container.
 * 
 * Problem: Theme styles like `.et-content h3` override card titles
 * Solution: Higher specificity + !important for critical cases
 * 
 * Add this at the END of bristol style.css
 */

/* ============================================
   CARD TITLE COLOR FIX - HIGH SPECIFICITY
   Ensures white titles in ALL contexts
   ============================================ */

/* Base card title - force white */
.es-bristol-card .es-bristol-card-title,
.es-bristol-card h3.es-bristol-card-title,
.es-bristol-card-title {
    color: #fff !important;
}

/* Info panel title on hover - force white */
.es-bristol-card .es-bristol-card-info-title,
.es-bristol-card h3.es-bristol-card-info-title,
.es-bristol-card-info-title {
    color: #fff !important;
}

/* Within any container (blocks, shortcodes, theme content) */
.et-content .es-bristol-card-title,
.et-content .es-bristol-card-info-title,
.et-site-content .es-bristol-card-title,
.et-site-content .es-bristol-card-info-title,
.et-page-content .es-bristol-card-title,
.et-page-content .es-bristol-card-info-title,
.entry-content .es-bristol-card-title,
.entry-content .es-bristol-card-info-title,
.wp-block-group .es-bristol-card-title,
.wp-block-group .es-bristol-card-info-title {
    color: #fff !important;
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif) !important;
}

/* Related scroll cards */
.es-bristol-related-scroll .es-bristol-card-title,
.es-bristol-related-scroll .es-bristol-card-info-title {
    color: #fff !important;
}

/* Grid cards */
.es-bristol-cards-grid .es-bristol-card-title,
.es-bristol-cards-grid .es-bristol-card-info-title {
    color: #fff !important;
}

/* Artist item names */
.es-bristol-artist-item-name,
.es-bristol-artist-item .es-bristol-artist-item-name {
    color: #fff !important;
}

/* ============================================
   LIGHT MODE: Still white on cards!
   Cards have dark overlay, so titles stay white
   ============================================ */

.es-mode-light .es-bristol-card-title,
.es-mode-light .es-bristol-card-info-title,
.es-bristol.es-mode-light .es-bristol-card-title,
.es-bristol.es-mode-light .es-bristol-card-info-title {
    color: #fff !important;
}

/* ============================================
   ENSURE VARIABLES ARE SET ON CARDS
   For contexts outside .es-bristol wrapper
   ============================================ */

.es-bristol-card {
    /* Ensure these are always defined */
    --es-primary: var(--ensemble-primary, #ff5722);
    --es-accent: var(--ensemble-secondary, #00e5ff);
    --es-surface: var(--ensemble-card-bg, #18181f);
    --es-bg-alt: var(--ensemble-card-bg-dark, #111118);
    --es-text-muted: var(--ensemble-text-muted, #606075);
    --es-text-secondary: var(--ensemble-text-secondary, #a0a0b8);
    --es-font-heading: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
}

/* ============================================
   BLOCK/SHORTCODE CONTEXT FIX
   When Bristol cards are used outside .es-bristol
   ============================================ */

/* Gutenberg Block context */
[class*="wp-block"] .es-bristol-card-title,
[class*="wp-block"] .es-bristol-card-info-title {
    color: #fff !important;
}

/* Shortcode context */
.ensemble-events-grid .es-bristol-card-title,
.ensemble-events-grid .es-bristol-card-info-title,
.ensemble-shortcode .es-bristol-card-title,
.ensemble-shortcode .es-bristol-card-info-title {
    color: #fff !important;
}

/* Elementor context */
.elementor-widget .es-bristol-card-title,
.elementor-widget .es-bristol-card-info-title {
    color: #fff !important;
}

/* ============================================
   HERO INFO TOGGLE - Bristol v2.1.0
   ============================================
   Allows users to toggle between title and 
   detailed info without scrolling.
   Mobile: Both panels visible stacked.
   ============================================ */

/* ============================================
   CONTAINER QUERIES FOR RESPONSIVE TITLE
   ============================================ */

.es-bristol-single-hero-content {
    container-type: inline-size;
}

/* Modern browsers with container query support */
@supports (container-type: inline-size) {
    .es-bristol-single-hero-title {
        font-size: clamp(3rem, 18cqw, 11rem);
        line-height: 1.05;
    }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
    .es-bristol-single-hero-title {
        font-size: clamp(3rem, 8vw, 6rem);
        line-height: 1.05;
    }
}

/* ============================================
   HERO BADGES ROW
   ============================================ */

.es-bristol-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Event Badge - match Category Badge styling */
.es-bristol-event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    border-radius: 0;
    /* Match the skew of category badge if it has one */
}

/* Ensure both badges have same height */
.es-bristol-single-hero-badge,
.es-bristol-event-badge {
    height: auto;
    line-height: 1.2;
}

.es-bristol-single-hero-badge span,
.es-bristol-event-badge {
    padding: 8px 16px;
}

/* ============================================
   INFO PANEL DESCRIPTION - NO SCROLL
   ============================================ */

.es-bristol-hero-info-description {
    margin-bottom: 20px;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

.es-bristol-hero-info-description p {
    margin: 0;
    line-height: 1.6;
    color: var(--es-text-secondary, #a0a0b8);
    max-height: none !important;
    overflow: visible !important;
}

/* Info Panel - prevent overflow scroll */
.es-bristol-hero-panel--info {
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
}

/* Also target any scrollable containers inside */
.es-bristol-hero-panel--info * {
    overflow-y: visible;
}

/* Ensure the meta section doesn't scroll */
.es-bristol-single-hero-meta {
    max-height: none !important;
    overflow: visible !important;
}

/* Toggle Button */
.es-bristol-hero-info-toggle {
    position: absolute;
    top: 80px;
    right: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: var(--es-primary, #ff5722);
    border: none;
    color: #fff;
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
    transform: skewX(-5deg);
}

.es-bristol-hero-info-toggle:hover {
    background: var(--es-accent, #00e5ff);
    color: var(--es-bg, #0a0a0f);
    transform: skewX(-5deg) translateX(-4px);
}

.es-bristol-hero-info-toggle.es-active {
    background: var(--es-accent, #00e5ff);
    color: var(--es-bg, #0a0a0f);
}

.es-bristol-hero-toggle-text {
    display: inline-block;
    transform: skewX(5deg);
}

.es-bristol-hero-toggle-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    transform: skewX(5deg);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.es-bristol-hero-info-toggle.es-active .es-bristol-hero-toggle-icon {
    transform: skewX(5deg) rotate(180deg);
}

/* Panel System */
.es-bristol-hero-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 60px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(30px);
}

.es-bristol-hero-panel.es-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Title Panel specific styles */
.es-bristol-hero-panel--title {
    /* Inherits hero content styles */
}

/* Info Panel specific styles */
.es-bristol-hero-panel--info {
    transform: translateX(-30px);
}

.es-bristol-hero-panel--info.es-active {
    transform: translateX(0);
}

.es-bristol-hero-info-heading {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--es-text-muted, #606075);
    margin: 0 0 32px 0;
}

/* Description im Info-Panel */
.es-bristol-hero-info-description {
    font-family: var(--es-font-body, 'Inter', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--es-text-secondary, #a0a0b8);
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--es-border, #2a2a3a);
    max-height: 150px;
    overflow-y: auto;
}

.es-bristol-hero-info-description p {
    margin: 0;
}

.es-mode-light .es-bristol-hero-info-description {
    color: var(--es-text-secondary, #555570);
    border-bottom-color: var(--es-border, #e0e0e5);
}

/* Quick Info Bar (visible on title panel) */
.es-bristol-hero-quick-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--es-border, #2a2a3a);
}

.es-bristol-hero-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--es-text-secondary, #a0a0b8);
}

.es-bristol-hero-quick-item svg {
    width: 18px;
    height: 18px;
    stroke: var(--es-primary, #ff5722);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

/* Info Panel Actions */
.es-bristol-hero-info-actions {
    margin-top: 40px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Ensure hero content container is relative for absolute panels */
.es-bristol-hero-toggleable .es-bristol-single-hero-content {
    position: relative;
    overflow: hidden;
}

/* Keep decorative line on toggleable hero */
.es-bristol-hero-toggleable .es-bristol-single-hero-content::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 0;
    width: 4px;
    height: 100px;
    background: var(--es-gradient, linear-gradient(135deg, #ff5722 0%, #ff9800 100%));
    z-index: 10;
}

/* ============================================
   LIGHT MODE ADJUSTMENTS
   ============================================ */

.es-mode-light .es-bristol-hero-info-toggle {
    background: var(--es-primary, #e64a19);
}

.es-mode-light .es-bristol-hero-info-toggle:hover,
.es-mode-light .es-bristol-hero-info-toggle.es-active {
    background: var(--es-accent, #0097a7);
    color: #fff;
}

.es-mode-light .es-bristol-hero-quick-info {
    border-top-color: var(--es-border, #e0e0e8);
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 1024px) {
    .es-bristol-hero-info-toggle {
        top: 40px;
        right: 24px;
        padding: 12px 20px;
        font-size: 0.75rem;
    }
    
    .es-bristol-hero-panel {
        padding: 80px 40px 40px;
    }
    
    .es-bristol-hero-toggleable .es-bristol-single-hero-content::before {
        top: 40px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    /* Hide toggle button on mobile */
    .es-bristol-hero-info-toggle {
        display: none;
    }
    
    /* Show both panels stacked on mobile */
    .es-bristol-hero-panel {
        position: relative;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 40px 24px;
    }
    
    .es-bristol-hero-panel--title {
        padding-bottom: 24px;
    }
    
    .es-bristol-hero-panel--info {
        padding-top: 0;
        border-top: 1px solid var(--es-border, #2a2a3a);
    }
    
    .es-bristol-hero-info-heading {
        margin-bottom: 24px;
    }
    
    /* Reset hero content for mobile */
    .es-bristol-hero-toggleable .es-bristol-single-hero-content {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    
    .es-bristol-hero-toggleable .es-bristol-single-hero-content::before {
        display: none;
    }
    
    .es-bristol-hero-quick-info {
        margin-top: 24px;
        padding-top: 16px;
    }
    
    .es-bristol-hero-info-actions {
        margin-top: 24px;
    }
}

/* ============================================
   ANIMATION ENHANCEMENTS
   ============================================ */

/* Stagger animation for meta items in info panel */
.es-bristol-hero-panel--info .es-bristol-single-hero-meta-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.es-bristol-hero-panel--info.es-active .es-bristol-single-hero-meta-item {
    opacity: 1;
    transform: translateY(0);
}

.es-bristol-hero-panel--info.es-active .es-bristol-single-hero-meta-item:nth-child(1) { transition-delay: 0.05s; }
.es-bristol-hero-panel--info.es-active .es-bristol-single-hero-meta-item:nth-child(2) { transition-delay: 0.1s; }
.es-bristol-hero-panel--info.es-active .es-bristol-single-hero-meta-item:nth-child(3) { transition-delay: 0.15s; }
.es-bristol-hero-panel--info.es-active .es-bristol-single-hero-meta-item:nth-child(4) { transition-delay: 0.2s; }
.es-bristol-hero-panel--info.es-active .es-bristol-single-hero-meta-item:nth-child(5) { transition-delay: 0.25s; }
.es-bristol-hero-panel--info.es-active .es-bristol-single-hero-meta-item:nth-child(6) { transition-delay: 0.3s; }

/* Actions slide in */
.es-bristol-hero-panel--info .es-bristol-hero-info-actions {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.es-bristol-hero-panel--info.es-active .es-bristol-hero-info-actions {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: Remove stagger animations */
@media (max-width: 768px) {
    .es-bristol-hero-panel--info .es-bristol-single-hero-meta-item,
    .es-bristol-hero-panel--info .es-bristol-hero-info-actions {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    /* Badge on mobile */
    .es-bristol-hero-badge {
        top: 16px;
        left: 16px;
        padding: 8px 16px;
        font-size: 0.7rem;
    }
}

/* ============================================
   MAP CARD - Sidebar
   ============================================ */

.es-bristol-map-card {
    background: var(--es-surface, #1a1a2e);
    border: 1px solid var(--es-border, #2a2a3a);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.es-bristol-map-card .es-bristol-info-card-title {
    font-family: var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--es-text-muted, #606075);
    margin: 0 0 16px 0;
}

.es-bristol-map-card .es-bristol-map-wrapper {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.es-bristol-map-card .es-bristol-map-wrapper .leaflet-container,
.es-bristol-map-card .es-bristol-map-wrapper .es-map-container {
    height: 200px !important;
    min-height: 200px;
}

.es-bristol-map-address {
    font-size: 0.9rem;
    color: var(--es-text-secondary, #a0a0b8);
    margin: 12px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--es-border, #2a2a3a);
}

.es-bristol-map-link {
    display: block;
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--es-primary, #ff5722);
    text-decoration: none;
    transition: color 0.2s ease;
}

.es-bristol-map-link:hover {
    color: var(--es-accent, #00e5ff);
}

/* Light Mode Map Card */
.es-mode-light .es-bristol-map-card {
    background: var(--es-surface, #f8f9fa);
    border-color: var(--es-border, #e0e0e8);
}

.es-mode-light .es-bristol-map-address {
    color: var(--es-text-secondary, #555570);
    border-top-color: var(--es-border, #e0e0e8);
}

/* ============================================
   HERO ACTION BUTTONS
   Uses --ensemble-* Designer variables with fallbacks
   ============================================ */

.es-bristol-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 24px;
}

.es-bristol-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--ensemble-font-heading, var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif));
    font-size: var(--ensemble-button-font-size, 0.85rem);
    font-weight: var(--ensemble-button-font-weight, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: var(--ensemble-button-radius, var(--es-radius, 0));
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Primary Button (Tickets/Reservieren) - orange mit weißem Text */
.es-bristol-hero-btn--primary,
a.es-bristol-hero-btn--primary,
a.es-bristol-hero-btn--primary:link,
a.es-bristol-hero-btn--primary:visited {
    background: var(--ensemble-primary, var(--es-primary, #ff5722));
    border: 2px solid var(--ensemble-primary, var(--es-primary, #ff5722));
    color: #fff !important;
}

.es-bristol-hero-btn--primary:hover,
a.es-bristol-hero-btn--primary:hover {
    background: transparent;
    color: var(--ensemble-primary, var(--es-primary, #ff5722)) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}

/* Secondary Button (Weiterlesen) - outline style */
.es-bristol-hero-btn--secondary,
a.es-bristol-hero-btn--secondary,
a.es-bristol-hero-btn--secondary:link,
a.es-bristol-hero-btn--secondary:visited {
    background: transparent;
    border: 2px solid var(--ensemble-text, var(--es-text, #fff));
    color: var(--ensemble-text, var(--es-text, #fff)) !important;
}

.es-bristol-hero-btn--secondary:hover,
a.es-bristol-hero-btn--secondary:hover {
    background: var(--ensemble-text, var(--es-text, #fff));
    color: var(--ensemble-bg, var(--es-bg, #0d0d1a)) !important;
    transform: translateY(-2px);
}

.es-bristol-hero-btn svg {
    transition: transform 0.3s ease;
}

.es-bristol-hero-btn:hover svg {
    transform: translateY(3px);
    animation: bounce-arrow 0.6s ease infinite;
}

@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* Light Mode */
.es-mode-light .es-bristol-hero-btn--primary,
.es-mode-light a.es-bristol-hero-btn--primary,
.es-mode-light a.es-bristol-hero-btn--primary:link,
.es-mode-light a.es-bristol-hero-btn--primary:visited {
    background: var(--ensemble-primary, var(--es-primary, #e64a19));
    border-color: var(--ensemble-primary, var(--es-primary, #e64a19));
    color: #fff !important;
}

.es-mode-light .es-bristol-hero-btn--primary:hover,
.es-mode-light a.es-bristol-hero-btn--primary:hover {
    background: transparent;
    color: var(--ensemble-primary, var(--es-primary, #e64a19)) !important;
}

.es-mode-light .es-bristol-hero-btn--secondary,
.es-mode-light a.es-bristol-hero-btn--secondary,
.es-mode-light a.es-bristol-hero-btn--secondary:link,
.es-mode-light a.es-bristol-hero-btn--secondary:visited {
    border-color: var(--ensemble-text, var(--es-text, #1a1a2e));
    color: var(--ensemble-text, var(--es-text, #1a1a2e)) !important;
}

.es-mode-light .es-bristol-hero-btn--secondary:hover,
.es-mode-light a.es-bristol-hero-btn--secondary:hover {
    background: var(--ensemble-text, var(--es-text, #1a1a2e));
    color: #fff !important;
}

/* Mobile */
@media (max-width: 768px) {
    .es-bristol-hero-actions {
        flex-direction: column;
    }
    
    .es-bristol-hero-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   ADDITIONAL INFO SECTION
   ============================================ */

.es-bristol-additional-info {
    background: var(--es-surface, #1a1a2e);
    border: 1px solid var(--es-border, #2a2a3a);
    border-radius: 12px;
    padding: 32px;
    margin-top: 40px;
}

.es-bristol-additional-info .es-bristol-section-title {
    margin-bottom: 20px;
}

.es-bristol-additional-info .es-bristol-prose {
    color: var(--es-text-secondary, #a0a0b8);
}

.es-bristol-additional-info .es-bristol-prose p:last-child {
    margin-bottom: 0;
}

/* Light Mode Additional Info */
.es-mode-light .es-bristol-additional-info {
    background: var(--es-surface, #f8f9fa);
    border-color: var(--es-border, #e0e0e8);
}

.es-mode-light .es-bristol-additional-info .es-bristol-prose {
    color: var(--es-text-secondary, #555570);
}
/* ============================================================
   HERO-ABLAUF DER EINZELSEITEN (21.10.2026)
   ------------------------------------------------------------
   Erst wenig zeigen (Titel, Datum/Ort, „Tickets", „More info"),
   „More info" blendet die Details ein. Unten im Hero ein
   Scroll-Hinweis: im Titel-Zustand „Scroll", im Info-Zustand
   deutlicher mit „… & more below". Keine Scrollsperre.
   Verhalten: assets/js/bristol-hero.js (setzt es-info-open,
   es-scrolled und --es-bristol-hero-top am Hero).
   ============================================================ */

/* Hero fuellt genau den sichtbaren Bereich unter Header/Admin-Leiste */
@media (min-width: 1025px) {
    .es-bristol-single-hero.es-bristol-hero-toggleable {
        min-height: calc(100vh - var(--es-bristol-hero-top, 0px));
        min-height: calc(100svh - var(--es-bristol-hero-top, 0px));
    }
}

/* Kein Abstand zwischen Header und Hero (et-main hat 64px Polster) */
.es-layout-bristol .et-main:has(> .es-bristol > .es-bristol-single-hero) {
    padding-top: 0;
}

/* Platz fuer den Hinweis unter den Panels; zu hoher Inhalt wird nicht
   oben abgeschnitten (safe center), der Titel richtet sich auch nach der
   Fensterhoehe */
@media (min-width: 769px) {
    .es-bristol-hero-toggleable .es-bristol-hero-panel {
        padding-top: 120px;
        padding-bottom: 130px;
        justify-content: safe center;
    }
}

@supports (container-type: inline-size) {
    .es-bristol-hero-toggleable .es-bristol-single-hero-title {
        font-size: clamp(3rem, min(18cqw, 13vh), 11rem);
    }
}

.es-bristol-hero-actions--title {
    margin-top: 32px;
    margin-bottom: 0;
}

.es-bristol-hero-actions--info {
    margin-top: 32px;
    margin-bottom: 0;
}

/* <button> sieht aus wie die Link-Knoepfe */
button.es-bristol-hero-btn {
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* Plus-Symbol dreht statt zu huepfen */
.es-bristol-hero-more:hover svg {
    animation: none;
    transform: rotate(90deg);
}

/* Scroll-Hinweis */
.es-bristol-scroll-cue {
    position: absolute;
    left: 60px;
    bottom: 48px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--ensemble-font-heading, var(--es-font-heading, 'Space Grotesk', system-ui, sans-serif));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--es-text-secondary, #a0a0b8);
    transition: opacity 0.4s ease, color 0.3s ease;
}

.es-bristol-scroll-cue:hover,
.es-bristol-scroll-cue:focus-visible {
    color: var(--ensemble-primary, var(--es-primary, #ff5722));
}

.es-bristol-scroll-cue-line {
    position: relative;
    flex-shrink: 0;
    width: 2px;
    height: 48px;
    background: var(--es-border, #2a2a3a);
    overflow: hidden;
    transition: height 0.4s ease;
}

.es-bristol-scroll-cue-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: -50%;
    width: 100%;
    height: 50%;
    background: var(--ensemble-primary, var(--es-primary, #ff5722));
    animation: es-bristol-cue 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes es-bristol-cue {
    0%   { top: -50%; }
    100% { top: 100%; }
}

.es-bristol-scroll-cue-text--info {
    display: none;
}

/* Info-Zustand: deutlicher */
.es-info-open .es-bristol-scroll-cue {
    color: var(--ensemble-text, var(--es-text, #fff));
}

.es-info-open .es-bristol-scroll-cue-text--title {
    display: none;
}

.es-info-open .es-bristol-scroll-cue-text--info {
    display: inline;
}

.es-info-open .es-bristol-scroll-cue-line {
    height: 64px;
}

/* Nach dem ersten Scrollen weg */
.es-scrolled .es-bristol-scroll-cue {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .es-bristol-scroll-cue-line::after {
        animation: none;
        top: 0;
        height: 100%;
    }
}

@media (max-width: 1024px) {
    .es-bristol-scroll-cue {
        left: 40px;
        bottom: 32px;
    }
}

/* Mobil: beide Panels stehen untereinander — Umschalter, „More info",
   Hinweis und der doppelte Tickets-Knopf entfallen */
@media (max-width: 768px) {
    .es-bristol-scroll-cue,
    .es-bristol-hero-more,
    .es-bristol-hero-tickets--info {
        display: none;
    }
}

/* ============================================================
   VOLLE BREITE (21.10.2026)
   ------------------------------------------------------------
   Alle Seiten laufen randlos mit festen Seitenraendern statt im
   1200px-Kasten — Header, Seiten, Footer, Einzelseiten-Body.
   Fliesstext behaelt eine lesbare Zeilenlaenge (72ch), Shortcodes
   und Bloecke (Grids, Timetable, Karten) nehmen die volle Breite.
   ============================================================ */

body.es-layout-bristol {
    --et-container: 100%;
    --es-bristol-gutter: clamp(16px, 4vw, 64px);
}

.es-layout-bristol .et-container,
.es-layout-bristol .et-canvas > * {
    padding-inline: var(--es-bristol-gutter);
}

.es-layout-bristol .es-bristol-container {
    max-width: none;
    padding-inline: var(--es-bristol-gutter);
}

.es-layout-bristol .et-entry__content > :is(p, ul, ol, h2, h3, h4, h5, blockquote, .wp-block-quote) {
    max-width: 72ch;
}

/* Seitentitel im Bristol-Stil statt 20px-Standard */
.es-layout-bristol .et-entry__title {
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ensemble-text, #0a0a0f);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ============================================================
   TIMETABLE IM BRISTOL-DESIGN (21.10.2026)
   ------------------------------------------------------------
   Nur Aussehen (Plugin-Markup unveraendert): eckig, Space Grotesk,
   Tagesreiter wie die schraegen Kategorie-Etiketten, breitere
   Buehnenspalten, Programmpunkte mit Buehnenfarbe als Kante.
   ============================================================ */

.es-layout-bristol .es-timetable-frontend {
    font-family: var(--ensemble-font-body, 'Inter', system-ui, sans-serif);
}

/* Tagesreiter */
.es-layout-bristol .es-timetable-filters {
    justify-content: flex-start;
    margin-bottom: 32px;
}

.es-layout-bristol .es-filters-inner {
    justify-content: flex-start;
    gap: 10px;
}

.es-layout-bristol .es-day-filter {
    align-items: flex-start;
    padding: 12px 22px;
    border: 2px solid var(--ensemble-text, #0a0a0f);
    border-radius: 0;
    background: transparent;
    color: var(--ensemble-text, #0a0a0f);
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: skewX(-5deg);
}

.es-layout-bristol .es-day-filter > * {
    transform: skewX(5deg);
}

.es-layout-bristol .es-day-filter .es-filter-date {
    font-family: var(--ensemble-font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.7;
}

.es-layout-bristol .es-day-filter:hover {
    border-color: var(--ensemble-primary, #ff5722);
    color: var(--ensemble-primary, #ff5722);
    background: transparent;
}

.es-layout-bristol .es-day-filter.active {
    background: var(--ensemble-primary, #ff5722);
    border-color: var(--ensemble-primary, #ff5722);
    color: #fff;
}

/* Tagestabellen */
.es-layout-bristol .es-timetable-days-wrapper {
    gap: 24px;
    padding-bottom: 20px;
}

.es-layout-bristol .es-timetable-days-wrapper::-webkit-scrollbar-track,
.es-layout-bristol .es-timetable-days-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0;
}

.es-layout-bristol .es-day-table {
    border: 2px solid var(--ensemble-text, #0a0a0f);
    border-radius: 0;
    background: var(--ensemble-card-bg, #fff);
}

.es-layout-bristol .es-day-title {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: var(--ensemble-text, #0a0a0f);
    color: var(--ensemble-bg, #fff);
    border-bottom: 4px solid var(--ensemble-primary, #ff5722);
    text-align: left;
}

.es-layout-bristol .es-day-title .es-day-name,
.es-layout-bristol .es-day-title .es-day-date {
    color: var(--ensemble-bg, #fff);
}

.es-layout-bristol .es-day-title .es-day-name {
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1;
}

.es-layout-bristol .es-day-title .es-day-date {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Zeitspalte */
.es-layout-bristol .es-day-grid .es-time-column {
    width: 56px;
    min-width: 56px;
    background: transparent;
    border-right: 1px solid var(--ensemble-card-border, #e0e0e8);
}

.es-layout-bristol .es-day-grid .es-time-column::before {
    /* Platz in Hoehe der Buehnenkoepfe, damit 11:00 neben 11:00 steht */
    content: '';
    display: block;
    height: 56px;
    border-bottom: 1px solid var(--ensemble-card-border, #e0e0e8);
}

.es-layout-bristol .es-day-grid .es-time-slot {
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ensemble-text-muted, #808098);
    border-bottom-color: var(--ensemble-card-border, #e0e0e8);
}

/* Buehnen */
.es-layout-bristol .es-stage-col {
    min-width: 150px;
    border-right-color: var(--ensemble-card-border, #e0e0e8);
}

.es-layout-bristol .es-stage-col .es-stage-header {
    min-height: 56px;
    padding: 10px 12px;
    justify-content: flex-start;
    text-align: left;
    background: transparent;
    border-top: 4px solid var(--stage-color, var(--ensemble-primary, #ff5722));
    border-bottom-color: var(--ensemble-card-border, #e0e0e8);
}

.es-layout-bristol .es-stage-col .es-stage-name {
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    hyphens: manual;
}

.es-layout-bristol .es-stage-events {
    background: transparent;
}

.es-layout-bristol .es-hour-line {
    border-color: var(--ensemble-card-border, #e0e0e8);
}

/* Programmpunkte (21.10.2026, Runde 2)
   Shortcode mit image_position="top": das Plugin gibt das Bild als <img>
   aus statt als Inline-Hintergrund mit fest eingebautem Verlauf. Die
   Kachel ist ein Size-Container und entscheidet selbst:
   - kurz (unter 110px, also bis ~1 h): einfarbig, Buehnenfarbe als
     Kante und Uhrzeit, Act-Name gross
   - lang: Bild sichtbar, nur unten ein Verlauf fuer die Schrift
   Farben ueber --ensemble-text/--ensemble-bg — kippen mit Hell/Dunkel. */
.es-layout-bristol .es-day-table .es-event {
    left: 3px;
    right: 3px;
    container-type: size;
    border-radius: 0;
    border-left: 5px solid var(--event-color, var(--ensemble-primary, #ff5722));
    /* Fuge zwischen direkt aufeinander folgenden Auftritten */
    border-bottom: 2px solid var(--ensemble-card-bg, #fff);
    background: var(--ensemble-text, #0a0a0f);
    color: var(--ensemble-bg, #fff);
    box-shadow: none;
    overflow: hidden;
}

.es-layout-bristol .es-day-table .es-event:hover {
    transform: none;
    box-shadow: none;
    z-index: 10;
}

.es-layout-bristol .es-day-table .es-event.es-image-top .es-event-image,
.es-layout-bristol .es-day-table .es-event .es-event-image {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: none;
}

.es-layout-bristol .es-event .es-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.es-layout-bristol .es-day-table .es-event-info {
    position: relative;
    z-index: 1;
    justify-content: flex-start;
    gap: 1px;
    padding: 6px 10px;
}

.es-layout-bristol .es-day-table .es-event-time {
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--event-color, var(--ensemble-primary, #ff5722));
    opacity: 1;
}

.es-layout-bristol .es-day-table .es-event-title {
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(0.85rem, 9cqw, 1.15rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    -webkit-line-clamp: 2;
}

.es-layout-bristol .es-day-table .es-event:hover .es-event-title {
    color: var(--event-color, var(--ensemble-primary, #ff5722));
}

/* Lange Kacheln: Bild zeigen */
@container (min-height: 110px) {
    .es-layout-bristol .es-day-table .es-event.es-image-top .es-event-image,
    .es-layout-bristol .es-day-table .es-event .es-event-image {
        display: block;
    }

    .es-layout-bristol .es-day-table .es-event-info {
        justify-content: flex-end;
        padding: 10px 12px;
        color: #fff;
        background: linear-gradient(180deg, rgba(10, 10, 15, 0) 35%, rgba(10, 10, 15, 0.85) 100%);
    }

    .es-layout-bristol .es-day-table .es-event-title {
        font-size: clamp(1rem, 11cqw, 1.6rem);
        color: #fff;
    }

    .es-layout-bristol .es-day-table .es-event-time {
        align-self: flex-start;
        padding: 3px 6px;
        background: var(--event-color, var(--ensemble-primary, #ff5722));
        color: #fff;
        margin-bottom: 4px;
    }

    .es-layout-bristol .es-day-table .es-event:hover .es-event-title {
        color: #fff;
    }
}

.es-layout-bristol .es-day-table .es-event:hover .es-event-image img {
    transform: scale(1.06);
}

.es-layout-bristol .es-event-genre {
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .es-layout-bristol .es-day-table .es-event:hover .es-event-image img {
        transform: none;
    }
}

/* Volle Breite: auf grossen Bildschirmen vier statt drei Karten je Reihe,
   sonst werden die Kacheln ueber 600px hoch */
@media (min-width: 1600px) {
    .ensemble-artists-list:has(.es-bristol-card),
    .ensemble-locations-list:has(.es-bristol-card),
    .ensemble-events-grid:has(.es-bristol-card) {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Startseite (Canvas): Fliesstext ebenfalls mit Zeilenlaenge */
.es-layout-bristol .et-canvas > :is(p, h2, h3, h4) {
    max-width: calc(72ch + 2 * var(--es-bristol-gutter));
    margin-left: 0;
}

/* Header und Footer folgen Hell/Dunkel (21.10.2026) — blieben bisher in
   beiden Modi weiss */
.es-layout-bristol .et-header,
.es-layout-bristol .et-footer {
    background: var(--ensemble-bg, #0a0a0f);
    color: var(--ensemble-text, #fff);
    border-color: var(--ensemble-card-border, #2a2a3a);
}

.es-layout-bristol .et-header a:not(.et-button),
.es-layout-bristol .et-footer a:not(.et-button) {
    color: var(--ensemble-text, #fff);
}

.es-layout-bristol .et-header :is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a,
.es-layout-bristol .et-header a:hover,
.es-layout-bristol .et-footer a:hover {
    color: var(--ensemble-primary, #ff5722);
}

.es-layout-bristol .et-header .sub-menu {
    background: var(--ensemble-card-bg, #18181f);
    border-color: var(--ensemble-card-border, #2a2a3a);
}

/* ============================================================
   SEITEN-HERO (21.10.2026) — page.php
   Split-Hero wie auf den Einzelseiten, aber niedriger. Etikett =
   Menue-Bereich der Seite. Seiten ohne Bild: Etikett ueber dem Titel.
   ============================================================ */

.es-bristol.es-bristol--page {
    min-height: 0;
}

.es-bristol-page-hero.es-bristol-single-hero {
    min-height: clamp(420px, 62vh, 720px);
}

.es-bristol-page-hero .es-bristol-single-hero-content {
    container-type: inline-size;
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

.es-bristol-page-hero .es-bristol-single-hero-title {
    font-size: clamp(2.75rem, min(16cqw, 11vh), 8rem);
    line-height: 0.95;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.es-bristol-page-hero .es-bristol-single-hero-badge {
    margin-bottom: 20px;
}

/* Inhalt unter dem Hero */
.es-layout-bristol .et-entry--has-hero {
    padding-top: clamp(40px, 6vw, 80px);
}

/* Etikett ueber dem Titel bei Seiten ohne Bild */
.es-bristol-page-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 16px;
    background: var(--ensemble-primary, #ff5722);
    color: #fff;
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transform: skewX(-5deg);
}

@media (max-width: 1024px) {
    .es-bristol-page-hero.es-bristol-single-hero {
        min-height: 0;
    }

    .es-bristol-page-hero .es-bristol-single-hero-media {
        min-height: 42vh;
    }
}

/* Zwischenueberschriften im Seiteninhalt im Bristol-Stil */
.es-layout-bristol .et-entry__content > :is(h2, h3) {
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-top: 2.5em;
    margin-bottom: 0.6em;
}

.es-layout-bristol .et-entry__content > :is(h2, h3):first-child {
    margin-top: 0;
}

/* ============================================================
   STARTSEITEN-HERO (21.10.2026)
   ------------------------------------------------------------
   HTML-Block auf der Startseite (cf-startseite.php). Vollbild-Foto,
   Headline im Karten-Stil (Space Grotesk 900, Versalien, riesig),
   „stage" auf schraegem Orange-Balken, Kicker mit Datum, zwei
   Calls to Action. Zeilen fahren gestaffelt ein, das Foto zoomt
   langsam. Darunter das Laufband mit allen Acts.
   ============================================================ */

.es-layout-bristol .et-main:has(.es-bristol-home-hero) {
    padding-top: 0;
}

.es-layout-bristol .et-canvas > .es-bristol-home-hero,
.es-layout-bristol .et-canvas > .es-bristol-ticker {
    max-width: none;
    padding-inline: 0;
}

.es-bristol-home-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* 64px weniger als der Bildschirm, damit das Laufband unten hereinschaut */
    min-height: calc(100svh - var(--et-header-height, 4.5rem) - 64px);
    overflow: hidden;
    background: #0a0a0f;
    color: #fff;
    isolation: isolate;
}

.es-bristol-home-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Slides: uebereinander, das aktive blendet ein und zoomt langsam
   (bristol-hero.js setzt is-active; das erste ist serverseitig aktiv,
   damit ohne JS ein Bild steht) */
.es-bristol-home-hero__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.es-bristol-home-hero__slide.is-active {
    opacity: 1;
}

.es-bristol-home-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
}

.es-bristol-home-hero__slide.is-active img {
    animation: es-bristol-kenburns 9s ease-out both;
}

/* Logo auf dem ersten Slide: als schraeger Aufkleber rechts — das Logo hat
   schwarze Schrift und braucht hellen Grund */
.es-bristol-home-hero__logo {
    position: absolute;
    z-index: 1;
    right: calc(var(--es-bristol-gutter, 40px) + 2vw);
    top: 50%;
    width: clamp(220px, 24vw, 440px);
    padding: clamp(14px, 1.6vw, 26px);
    background: #fff;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(-50%) rotate(4deg);
}

.es-bristol-home-hero__media .es-bristol-home-hero__logo img {
    display: block;
    width: 100%;
    height: auto;
    transform: none;
    animation: none;
}

.es-bristol-home-hero__slide.is-active .es-bristol-home-hero__logo {
    animation: es-bristol-sticker 0.9s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes es-bristol-sticker {
    from { opacity: 0; transform: translateY(-50%) rotate(14deg) scale(0.7); }
    to   { opacity: 1; transform: translateY(-50%) rotate(4deg) scale(1); }
}

@media (max-width: 1024px) {
    .es-bristol-home-hero__logo {
        display: none;
    }
}

/* Fortschrittsbalken unten rechts */
.es-bristol-home-hero__dots {
    position: absolute;
    right: var(--es-bristol-gutter, 40px);
    top: clamp(24px, 4vh, 40px);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.es-bristol-home-hero__dot {
    position: relative;
    width: 44px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.es-bristol-home-hero__dot::before,
.es-bristol-home-hero__dot::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    background: rgba(255, 255, 255, 0.35);
}

.es-bristol-home-hero__dot::after {
    background: var(--ensemble-primary, #ff5722);
    transform: scaleX(0);
    transform-origin: left;
}

.es-bristol-home-hero__dot.is-active::after {
    transform: scaleX(1);
}

.es-bristol-home-hero__dot.is-running::after {
    animation: es-bristol-progress var(--es-dauer, 6s) linear both;
}

.es-bristol-home-hero__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@keyframes es-bristol-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.es-bristol-home-hero__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 10, 15, 0.85) 0%, rgba(10, 10, 15, 0.35) 55%, rgba(10, 10, 15, 0.1) 100%),
        linear-gradient(0deg, rgba(10, 10, 15, 0.7) 0%, rgba(10, 10, 15, 0) 45%);
}

.es-bristol-home-hero__content {
    width: 100%;
    padding: clamp(96px, 14vh, 160px) var(--es-bristol-gutter, 40px) clamp(48px, 8vh, 96px);
}

.es-bristol-home-hero__kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0 0 clamp(16px, 2.5vh, 28px);
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: es-bristol-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.es-bristol-home-hero__kicker span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.es-bristol-home-hero__kicker span:first-child::before {
    content: '';
    width: 40px;
    height: 4px;
    background: var(--ensemble-primary, #ff5722);
}

.es-bristol-home-hero__kicker span + span {
    color: rgba(255, 255, 255, 0.7);
}

.es-bristol-home-hero__title {
    margin: 0;
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(3.5rem, min(13vw, 17vh), 13rem);
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: #fff;
}

.es-bristol-home-hero__line {
    display: block;
    animation: es-bristol-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.es-bristol-home-hero__line:nth-child(2) { animation-delay: 0.08s; }
.es-bristol-home-hero__line:nth-child(3) { animation-delay: 0.16s; }

.es-bristol-home-hero__line--accent em {
    position: relative;
    display: inline-block;
    font-style: normal;
    padding: 0 0.12em;
    margin-top: 0.06em;
    z-index: 0;
}

.es-bristol-home-hero__line--accent em::before {
    content: '';
    position: absolute;
    inset: 0.08em -0.02em 0.02em;
    z-index: -1;
    background: var(--ensemble-primary, #ff5722);
    transform: skewX(-8deg) scaleX(0);
    transform-origin: left;
    animation: es-bristol-swipe 0.7s 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.es-bristol-home-hero__lead {
    max-width: 44ch;
    margin: clamp(20px, 3vh, 36px) 0 0;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    animation: es-bristol-rise 0.9s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.es-bristol-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(24px, 4vh, 40px);
    animation: es-bristol-rise 0.9s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.es-bristol-home-hero .es-bristol-hero-btn {
    padding: 18px 30px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.es-bristol-home-hero a.es-bristol-hero-btn--secondary,
.es-bristol-home-hero a.es-bristol-hero-btn--secondary:link,
.es-bristol-home-hero a.es-bristol-hero-btn--secondary:visited {
    border-color: #fff;
    color: #fff !important;
}

.es-bristol-home-hero a.es-bristol-hero-btn--secondary:hover {
    background: #fff;
    color: #0a0a0f !important;
}

.es-bristol-home-hero .es-bristol-hero-btn:hover svg {
    animation: none;
    transform: translateX(4px);
}

@keyframes es-bristol-rise {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes es-bristol-swipe {
    to { transform: skewX(-8deg) scaleX(1); }
}

@keyframes es-bristol-kenburns {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
}

/* Laufband mit allen Acts */
.es-bristol-ticker {
    overflow: hidden;
    background: var(--ensemble-primary, #ff5722);
    color: #fff;
    border-block: 2px solid #0a0a0f;
    transform: rotate(-1deg) scale(1.02);
    margin-top: -14px;
    position: relative;
    z-index: 2;
}

.es-bristol-ticker__track {
    display: flex;
    width: max-content;
    animation: es-bristol-ticker 60s linear infinite;
}

.es-bristol-ticker:hover .es-bristol-ticker__track {
    animation-play-state: paused;
}

.es-bristol-ticker__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.es-bristol-ticker__group span,
.es-bristol-ticker__group i {
    padding: 14px 18px;
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    font-weight: 900;
    font-style: normal;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.es-bristol-ticker__group i {
    padding-inline: 4px;
    color: #0a0a0f;
}

@keyframes es-bristol-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Einleitung unter dem Band als grosse Aussage */
.es-layout-bristol .et-canvas > .es-bristol-ticker + p {
    margin-top: clamp(64px, 10vw, 140px);
    max-width: calc(28ch + 2 * var(--es-bristol-gutter, 40px));
    font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    .es-bristol-home-hero {
        min-height: 88svh;
    }


    .es-bristol-home-hero__actions .es-bristol-hero-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .es-bristol-home-hero__slide.is-active img,
    .es-bristol-home-hero__slide.is-active .es-bristol-home-hero__logo,
    .es-bristol-home-hero__media img,
    .es-bristol-home-hero__kicker,
    .es-bristol-home-hero__line,
    .es-bristol-home-hero__lead,
    .es-bristol-home-hero__actions,
    .es-bristol-ticker__track {
        animation: none;
    }

    .es-bristol-home-hero__line--accent em::before {
        animation: none;
        transform: skewX(-8deg);
    }
}

/* ============================================================
   MEGA-MENUE (21.10.2026) — functions.php + bristol-mega.js
   Menuepunkt mit Klasse es-mega: Panel in voller Breite unter dem
   Header, links Bild (wechselt beim Ueberfahren), rechts Spalten in
   Bristol-Schrift, unten Tickets + Anfahrt. Nur ab 783px.
   ============================================================ */

.es-mega-panel {
    display: none;
}

@media (min-width: 783px) {
    .es-layout-bristol .et-nav__list > li.es-mega {
        position: static;
    }

    .es-layout-bristol .et-nav__list > li.es-mega > a {
        position: relative;
    }

    /* Normales Untermenue weicht dem Panel */
    .es-layout-bristol .et-nav__list > li.es-mega > .sub-menu {
        display: none;
    }

    /* Vollbild unter dem Header (21.10.2026, Runde 2): fest am Fenster,
       Oberkante setzt bristol-mega.js beim Oeffnen (--es-mega-top) */
    .es-layout-bristol .es-mega-panel {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--es-mega-top, 72px);
        bottom: 0;
        z-index: 300;
        display: grid;
        grid-template-columns: minmax(280px, 42%) 1fr;
        background: var(--ensemble-bg, #0a0a0f);
        color: var(--ensemble-text, #fff);
        border-top: 4px solid var(--ensemble-primary, #ff5722);
        border-bottom: 2px solid var(--ensemble-text, #0a0a0f);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        /* Schliessen mit kurzer Verzoegerung — kein Flackern beim Weg nach unten */
        transition: opacity 0.25s ease 0.12s, transform 0.25s ease 0.12s, visibility 0s linear 0.37s;
    }

    .es-layout-bristol li.es-mega:hover > .es-mega-panel,
    .es-layout-bristol li.es-mega:focus-within > .es-mega-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
    }

    .es-layout-bristol li.es-mega.es-mega-closed > .es-mega-panel {
        opacity: 0;
        visibility: hidden;
    }

    /* Bild links mit Schraegschnitt wie in den Hero-Bereichen */
    .es-mega__media {
        position: relative;
        overflow: hidden;
        background: #0a0a0f;
        clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
    }

    .es-mega__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.14s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .es-mega__media img.is-swapping {
        opacity: 0;
        transform: scale(1.04);
    }

    /* Inhalt rechts als EIN Block (Logo, Spalten, Knoepfe), linksbuendig,
       senkrecht mittig, begrenzt breit — nichts haengt mehr verstreut */
    .es-mega__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: clamp(24px, 4vh, 48px);
        padding: clamp(28px, 5vh, 64px) var(--es-bristol-gutter, 40px) clamp(28px, 4vh, 48px) clamp(32px, 4vw, 72px);
        overflow-y: auto;
    }

    /* Zweispaltig: links die Seiten des Bereichs, rechts darunter
       gestapelt Acts / Buehnen / Essen */
    .es-mega__cols {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        column-gap: clamp(40px, 5vw, 96px);
        row-gap: clamp(20px, 3vh, 36px);
        align-items: start;
        width: 100%;
        max-width: 64rem;
    }

    .es-mega__col--pages {
        grid-row: 1 / span 3;
    }

    .es-mega__cta {
        width: 100%;
        max-width: 64rem;
    }

    /* Logo oben im Panel, ohne Hintergrund */
    .es-layout-bristol .es-mega__logo {
        display: block;
        align-self: flex-start;
        padding: 0;
    }

    .es-layout-bristol .es-mega__logo::after {
        content: none;
    }

    .es-mega__logo img {
        display: block;
        width: auto;
        height: clamp(70px, 12vh, 140px);
    }


    .es-mega__col {
        min-width: 0;
    }


    .es-mega__heading {
        margin: 0 0 16px;
        font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ensemble-primary, #ff5722);
    }

    .es-layout-bristol .es-mega__list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .es-layout-bristol .es-mega__col--acts .es-mega__list {
        display: block;
        columns: 2;
        column-gap: 32px;
    }

    .es-layout-bristol .es-mega__list li {
        position: static;
        break-inside: avoid;
    }

    .es-layout-bristol .es-mega-panel .es-mega__list a {
        display: inline-block;
        padding: 4px 0;
        white-space: normal;
        font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--ensemble-text, #fff);
        transition: color 0.2s ease, transform 0.2s ease;
    }

    /* Seiten des Bereichs: gross */
    .es-layout-bristol .es-mega-panel .es-mega__col--pages .es-mega__list a {
        font-size: clamp(1.5rem, min(3vw, 5.5vh), 3.25rem);
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: -0.02em;
        text-transform: uppercase;
    }

    .es-layout-bristol .es-mega-panel .es-mega__list a::after,
    .es-layout-bristol .es-mega-panel .es-mega__list a::before {
        content: none;
    }

    .es-layout-bristol .es-mega-panel .es-mega__list a:hover,
    .es-layout-bristol .es-mega-panel .es-mega__list a:focus-visible {
        color: var(--ensemble-primary, #ff5722);
        transform: translateX(6px);
        background: transparent;
    }

    .es-mega__cta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 24px;
        border-top: 1px solid var(--ensemble-card-border, #2a2a3a);
    }

    .es-layout-bristol .es-mega-panel .es-mega__cta a {
        padding: 14px 24px;
    }

    .es-layout-bristol .es-mega-panel .es-mega__cta a::after {
        content: none;
    }
}

@media (min-width: 783px) and (max-width: 1100px) {
    .es-layout-bristol .es-mega-panel {
        grid-template-columns: 30% 1fr;
    }

    /* Schmal: alles untereinander */
    .es-mega__cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .es-mega__col--pages {
        grid-row: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .es-mega__media img,
    .es-layout-bristol .es-mega-panel {
        transition: none;
    }
}

/* Aktiv-Unterstrich im Menue in Bristol-Orange statt Brand-Tuner-Farbe */
body.es-layout-bristol {
    --ensemble-nav-active-bg: var(--ensemble-primary, #ff5722);
}

/* Logo-Variante nach Modus (21.10.2026): helle Variante (weisse Schrift)
   im Dunkelmodus — Header und Mega-Menue. Ohne Modus-Klasse gilt dunkel,
   wie bristol-mode.js es vorgibt. */
.es-bristol-logo-light {
    display: none !important;
}

body.es-layout-bristol:not(.es-mode-light) .custom-logo-link .es-bristol-logo-light,
body.es-layout-bristol:not(.es-mode-light) .es-mega__logo .es-bristol-logo-light {
    display: block !important;
}

body.es-layout-bristol:not(.es-mode-light) .custom-logo-link .custom-logo:not(.es-bristol-logo-light),
body.es-layout-bristol:not(.es-mode-light) .es-mega__logo .es-bristol-logo-dark {
    display: none !important;
}

/* ============================================================
   SEITEN ZWEISPALTIG (21.10.2026)
   ------------------------------------------------------------
   Ab 1100px: Zwischenueberschriften links, Text rechts daneben —
   editorial statt eines schmalen Textstreifens am linken Rand.
   Technik: Floats statt Grid (ein Grid mit dense-Packing schob bei
   mehreren Absaetzen je Abschnitt die Ueberschriften zusammen). Der
   Inhalt hat links 38% Einzug; jede Ueberschrift floatet in diesen
   Einzug und beginnt mit clear eine neue Zeile. Einleitung (erster
   Absatz) und breite Elemente (Shortcodes, Gruppen, Bilder, Formulare)
   ziehen per negativem Rand ueber die volle Breite. Masse in cqw
   bezogen auf .et-entry. Darunter einspaltig wie bisher.
   Gilt nur fuer normale Seiten (page.php), nicht die Startseite.
   ============================================================ */

@media (min-width: 1100px) {
    .es-layout-bristol.page .et-entry {
        container-type: inline-size;
    }

    .es-layout-bristol.page .et-entry__content {
        --es-col: 38cqw;
        padding-left: var(--es-col);
    }

    .es-layout-bristol.page .et-entry__content::after {
        content: '';
        display: block;
        clear: both;
    }

    /* Ueberschrift links in den Einzug */
    .es-layout-bristol.page .et-entry__content > :is(h2, h3) {
        float: left;
        clear: both;
        width: calc(var(--es-col) - clamp(40px, 5cqw, 96px));
        margin: clamp(32px, 4cqw, 56px) 0 0 calc(-1 * var(--es-col));
        padding-top: 14px;
        border-top: 4px solid var(--ensemble-primary, #ff5722);
    }

    /* Erster Absatz eines Abschnitts startet auf Hoehe der Ueberschrift */
    .es-layout-bristol.page .et-entry__content > :is(h2, h3) + * {
        margin-top: clamp(32px, 4cqw, 56px);
        padding-top: 18px;
    }

    /* Text rechts groesser */
    .es-layout-bristol.page .et-entry__content > :is(p, ul, ol, blockquote) {
        font-size: clamp(1rem, 1.25vw, 1.25rem);
        line-height: 1.6;
        max-width: 62ch;
    }

    /* Einleitung vor der ersten Ueberschrift: gross, volle Breite */
    .es-layout-bristol.page .et-entry__content > p:first-child {
        margin-left: calc(-1 * var(--es-col));
        max-width: 38ch;
        margin-top: 0;
        font-family: var(--ensemble-font-heading, 'Space Grotesk', system-ui, sans-serif);
        font-size: clamp(1.4rem, 2.2vw, 2.1rem);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.015em;
    }

    /* Breite Elemente: Shortcodes, Gruppen, Bilder, Tabellen, Formulare */
    .es-layout-bristol.page .et-entry__content > :is(div, section, figure, table, form, iframe, .wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-table, .alignwide, .alignfull) {
        clear: both;
        margin-left: calc(-1 * var(--es-col));
        width: auto;
        max-width: none;
        margin-top: clamp(32px, 4cqw, 56px);
    }

    .es-layout-bristol.page .et-entry__content > :is(div, section, figure, table, form, iframe, .wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-table, .alignwide, .alignfull):first-child {
        margin-top: 0;
    }

    /* Seiten, die nur aus einem Shortcode/Block bestehen (Timetable, Acts …):
       kein Einzug */
    .es-layout-bristol.page .et-entry__content:not(:has(> :is(p, h2, h3, ul, ol))) {
        padding-left: 0;
    }

    /* Spezifischer als die Regel fuer breite Elemente — sonst zog deren
       negativer Rand Shortcode-Seiten (Team) links aus dem Bild */
    .es-layout-bristol.page .et-entry__content:not(:has(> :is(p, h2, h3, ul, ol))) > :is(*, div, section, figure, table, form, iframe, .wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-table, .alignwide, .alignfull) {
        margin-left: 0;
    }
}

/* Kontaktformulare (Einreichungen) bleiben in der rechten Textspalte statt
   ueber die volle Breite — sonst werden die Eingabefelder 1.500px breit */
@media (min-width: 1100px) {
    .es-layout-bristol.page .et-entry__content > .es-contact-form-wrapper {
        clear: none;
        margin-left: 0;
        max-width: 46rem;
        margin-top: clamp(24px, 3cqw, 40px);
    }
}

/* Team-Raster (21.10.2026): bei voller Breite wurden aus „3 Spalten" Karten
   von ueber 1000px — Spaltenzahl nach Bildschirmbreite statt fest */
.es-layout-bristol .es-staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
    .es-layout-bristol .es-staff-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1300px) {
    .es-layout-bristol .es-staff-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .es-layout-bristol .es-staff-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Logo frei auf dem Foto (Shortcode logo="frei"): helle Variante ohne
   Aufkleber, Schatten fuer helle Bildstellen */
.es-bristol-home-hero__logo.es-bristol-home-hero__logo--frei {
    padding: 0;
    background: transparent;
    box-shadow: none;
    width: clamp(240px, 26vw, 480px);
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55));
}