/*
Theme Name:   Ensemble Ostgelände
Theme URI:    https://ensemble-plugin.com
Description:  Demo-Skin für das Event-Areal Ostgelände: Industrie-Typografie, harte Kanten, Laufband mit den Highlights. Child-Theme von Ensemble Theme.
Author:       Kraftwerk Marketing
Template:     ensemble-theme
Version:      1.3.0
Text Domain:  ensemble-ostgelaende
*/

/* ==========================================================================
   Ostgelände · Skin (31.10.2026, erste Fassung: aufbauen, danach verfeinern)

   Farben und Schriften kommen aus dem Brand Tuner (--ensemble-*). Hier stehen
   nur die Gestaltungsmittel des Skins:
     1. Typografie: Unbounded (breit), Versalien, Silbentrennung
     2. Harte Kanten (Radius 0 setzt der Brand Tuner)
     3. Slider: Verlauf von unten, Inhalt unten links, sehr große Titel
     4. Laufband: Ziegelrot auf Schwarz, wie ein Bahnsteigband
     5. Schwarze Bänder (Quick Links) als Taktgeber zwischen den Abschnitten
   Alles hängt an body.og-skin (functions.php).
   ========================================================================== */

.og-skin {
    --og-black: var(--ensemble-secondary, #1f1f1f);
    /* Farben 31.10.: Schwarz trägt (Buttons, Flächen), Ziegelrot ist das Signal
       (Laufband, Striche, Datum). Orange/Cyan gehört Cityfest. */
    --og-signal: var(--ensemble-primary, #a8322a);
    --og-signal-hell: #e0634f;  /* Ziegelrot auf Schwarz, lesbar für kleine Schrift */
    --og-action: var(--ensemble-secondary, #121212);
    --og-beton-hell: #f5f3ee;
    --og-concrete: var(--ensemble-bg, #efede8);
    --og-line: var(--ensemble-card-border, #d9d5cc);
    --og-display: var(--ensemble-font-heading, 'Unbounded', 'Inter', sans-serif);
}

/* --- 1. Typografie ------------------------------------------------------ */

.og-skin h1,
.og-skin h2,
.og-skin h3,
.og-skin .et-hero-slider__title,
.og-skin .ensemble-event-title,
.og-skin .ensemble-location-title {
    font-family: var(--og-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.02;
    /* Unbounded ist breit: lange deutsche Wörter ("Werkstattgespräch") an
       Silben trennen statt aus der Card laufen lassen. Braucht lang="de" am
       <html> (setzt WordPress). Trennt erst Wörter ab 10 Zeichen, mindestens
       4 Buchstaben je Teil. Zeilen der Titel ausgleichen. */
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* Abschnittsüberschriften der Startseite: groß, mit Signalstrich davor */
.og-skin .et-main h2.wp-block-heading {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-top: var(--et-space-xl, 4rem);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
}
.og-skin .et-main h2.wp-block-heading::before {
    content: '';
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.18em;
    background: var(--og-signal);
}

/* --- Header: Display-Schrift, Tickets als Signal ------------------------ */

.og-skin .et-branding__title {
    font-family: var(--og-display);
    font-size: 1.35rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}
/* Die Unterzeile kostet die Breite, die zehn Menüpunkte brauchen.
   Das Menü bleibt in Inter: die breite Display-Schrift sprengt die Zeile. */
.og-skin .et-branding__tagline {
    display: none;
}
.og-skin .et-nav__list {
    gap: 1.1rem;
}
.og-skin .et-nav__list > li > a {
    font-family: var(--ensemble-font-body, 'Inter', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.og-skin .et-nav__list > li:last-child > a {
    padding: 0.45em 0.9em;
    background: var(--og-action);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Ticket-Icon wie an den Ticket-Knoepfen der Cards (01.11.2026) */
.og-skin .et-nav__list > li:last-child > a::before {
    content: '';
    width: 15px;
    height: 15px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 0 0 4v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3a2 2 0 0 0 0-4V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z'/%3E%3Cline x1='12' y1='7' x2='12' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 0 0 4v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3a2 2 0 0 0 0-4V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z'/%3E%3Cline x1='12' y1='7' x2='12' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
}
.og-skin .et-nav__list > li:last-child > a:hover {
    background: var(--og-signal);
}

/* --- Canvas: Bausteine mit eigenem Außenabstand mittig halten ----------- */
/* Orte-Liste und Karte bringen eigene Margins mit und standen links. */
.og-skin .et-canvas > :not(.alignfull):not(.alignwide) {
    margin-left: auto;
    margin-right: auto;
}

/* --- 3. Hero Slider ----------------------------------------------------- */

.og-skin .et-hero-slider {
    --slider-radius: 0;
}
.og-skin .et-hero-slider__overlay {
    /* Verlauf von unten statt flacher Abdunkelung: oben bleibt das Bild hell,
       unten trägt es den Text. Die Stärke aus dem Block wirkt weiter. */
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%),
        rgba(0, 0, 0, calc(var(--slider-overlay-opacity, 0.35) * 0.5));
}
.og-skin .et-hero-slider__content {
    align-items: flex-end;
    padding-bottom: clamp(5rem, 12vh, 9rem);
}
/* Breite Schrift braucht Breite: zwei Zeilen statt vier */
.og-skin .et-hero-slider__content--left .et-hero-slider__inner {
    max-width: 62rem;
}
.og-skin .et-hero-slider__title {
    font-size: clamp(2.4rem, 6.5vw, 5.75rem);
    font-weight: 800;
    margin-bottom: 0.15em;
    text-shadow: none;
}
.og-skin .et-hero-slider__text {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    max-width: 34rem;
}
.og-skin .et-hero-slider__button {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--og-beton-hell);
    color: var(--og-action);
}
.og-skin .et-hero-slider__button:hover {
    background: var(--og-signal);
    color: #fff;
}
.og-skin .et-hero-slider__arrow,
.og-skin .et-hero-slider__dots button {
    border-radius: 0;
}

/* Kein Abstand zwischen Header und Slider auf der Canvas-Startseite */
.og-skin.page-template-template-canvas .et-main {
    padding-top: 0;
}

/* --- 4. Laufband -------------------------------------------------------- */

.og-laufband {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #000;
    color: #fff;
    border-block: 3px solid var(--og-signal);
    font-family: var(--og-display);
    text-transform: uppercase;
}
.og-laufband__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    background: var(--og-signal);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}
.og-laufband__viewport {
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 0;
}
.og-laufband__track {
    display: flex;
    width: max-content;
    animation: og-laufband var(--og-laufband-dauer, 60s) linear infinite;
}
.og-laufband:hover .og-laufband__track,
.og-laufband:focus-within .og-laufband__track {
    animation-play-state: paused;
}
.og-laufband__group {
    display: flex;
    flex: 0 0 auto;
}
.og-laufband__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.og-laufband__item:hover,
.og-laufband__item:focus-visible {
    color: var(--og-signal-hell);
}
.og-laufband__date {
    color: var(--og-signal-hell);
}
.og-laufband__house {
    font-family: var(--ensemble-font-body, 'Inter', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--og-haus, rgba(255, 255, 255, 0.7));
}
/* Laufband steht über dem Slider: direkt anschließen, kein Blockabstand */
.og-skin .et-canvas > .og-laufband + .et-hero-slider {
    margin-top: 0;
}
.og-skin .et-canvas > .og-laufband:first-child {
    border-top: 0;
}
@keyframes og-laufband {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .og-laufband__viewport { overflow-x: auto; }
    .og-laufband__track { animation: none; }
    .og-laufband__group[aria-hidden="true"] { display: none; }
}

/* --- 5. Schwarzes Band: Quick Links ------------------------------------- */

.og-skin .og-band {
    background: #000;
    color: #fff;
    padding-block: var(--et-space-xl, 4rem);
    margin-block: var(--et-space-xl, 4rem);
}
.og-skin .og-band > * {
    box-sizing: border-box;
    max-width: var(--et-container, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--et-space-md, 1.5rem);
    padding-right: var(--et-space-md, 1.5rem);
}
.og-skin .og-band h2.wp-block-heading {
    margin-top: 0;
    color: #fff;
}
.og-skin .og-quicklinks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Kein Innenabstand im Gitter (er wäre grau); stattdessen schmaler,
       damit die Kanten mit der Überschrift fluchten. */
    padding: 0;
    width: calc(100% - 2 * var(--et-space-md, 1.5rem));
    max-width: calc(var(--et-container, 1200px) - 2 * var(--et-space-md, 1.5rem));
}
@media (max-width: 900px) {
    .og-skin .og-quicklinks { grid-template-columns: repeat(2, 1fr); }
}
.og-skin .og-quicklinks .wp-block-button {
    margin: 0;
    width: auto;
}
.og-skin .og-quicklinks .wp-block-button__link {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    min-height: 7rem;
    padding: 1.25rem;
    border-radius: 0;
    background: #000;
    color: #fff;
    font-family: var(--og-display);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.1;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    transition: background var(--et-transition, 0.2s ease), color var(--et-transition, 0.2s ease);
}
.og-skin .og-quicklinks .wp-block-button__link::after {
    content: '\2192';
    font-family: var(--ensemble-font-body, 'Inter', sans-serif);
    font-size: 1.4rem;
    font-weight: 400;
}
.og-skin .og-quicklinks .wp-block-button__link:hover,
.og-skin .og-quicklinks .wp-block-button__link:focus-visible {
    background: var(--og-signal);
    color: #fff;
}

/* --- Cards: harte Kante, Titel in der Display-Schrift -------------------- */

.og-skin .ensemble-event-card,
.og-skin .ensemble-location-card,
.og-skin .et-news-card {
    border-radius: 0;
}
.og-skin .ensemble-event-card .ensemble-event-title,
.og-skin .ensemble-location-card .ensemble-location-title {
    font-size: 1.15rem;
}
.og-skin .ensemble-event-card .ensemble-btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.og-skin .ensemble-event-card .ensemble-btn-tickets {
    background: var(--og-action);
    color: #fff;
}
.og-skin .ensemble-event-card .ensemble-btn-tickets:hover {
    background: var(--og-signal);
    opacity: 1;
}
/* "Veranstaltung ansehen" als Kontur */
.og-skin .ensemble-event-card .ensemble-btn-primary {
    background: transparent;
    color: var(--ensemble-text, #161616);
    box-shadow: inset 0 0 0 2px currentColor;
}
.og-skin .ensemble-event-card .ensemble-btn-primary:hover {
    background: var(--ensemble-text, #161616);
    color: #fff;
    opacity: 1;
}

/* --- 6. Timetable als Tafel (Areal-Wochenende, Klasse og-tafel) ---------- */
/* Nur Text, keine Bilder (show_image=false): schwarze Tafel, je Haus ein
   Farbstreifen, Titel in der Display-Schrift, Zeiten in gleich breiten Ziffern. */

.og-skin .og-tafel {
    background: #121212;
    color: #fff;
    padding: clamp(1rem, 3vw, 2rem);
}
.og-skin .og-tafel .es-timetable-filters {
    margin-bottom: 1.25rem;
}
.og-skin .og-tafel .es-filters-inner {
    justify-content: flex-start;
    gap: 0;
}
.og-skin .og-tafel .es-day-filter {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.8rem 1.4rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--og-display);
    font-weight: 800;
    text-transform: uppercase;
}
.og-skin .og-tafel .es-day-filter + .es-day-filter {
    border-left: 0;
}
.og-skin .og-tafel .es-day-filter:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}
.og-skin .og-tafel .es-day-filter.active {
    background: var(--og-signal);
    border-color: var(--og-signal);
    color: #fff;
}
.og-skin .og-tafel .es-filter-date {
    font-family: var(--ensemble-font-body, 'Inter', sans-serif);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}
.og-skin .og-tafel .es-day-table {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.og-skin .og-tafel .es-day-title {
    align-items: flex-start;
    padding: 0 0 0.9rem;
    background: transparent;
    border-bottom: 3px solid var(--og-signal);
    color: #fff;
    text-align: left;
}
.og-skin .og-tafel .es-day-title .es-day-name {
    font-family: var(--og-display);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}
.og-skin .og-tafel .es-day-title .es-day-date {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--og-signal-hell);
    opacity: 1;
}
.og-skin .og-tafel .es-day-grid .es-time-column {
    /* Zeitspalte beginnt unter den Hausköpfen (56 px), sonst steht 15:00 neben dem Kopf */
    padding-top: 56px;
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.og-skin .og-tafel .es-day-grid .es-time-slot {
    color: rgba(255, 255, 255, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    font-variant-numeric: tabular-nums;
}
.og-skin .og-tafel .es-stage-col {
    border-right-color: rgba(255, 255, 255, 0.08);
}
.og-skin .og-tafel .es-stage-col .es-stage-header {
    justify-content: flex-start;
    box-sizing: border-box;
    height: 56px;
    min-height: 56px;
    padding: 0.4rem 0.5rem;
    background: transparent;
    border-top: 0;
    border-bottom: 4px solid var(--stage-color, var(--og-signal));
    text-align: left;
}
.og-skin .og-tafel .es-stage-col .es-stage-name {
    font-family: var(--og-display);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.og-skin .og-tafel .es-stage-events {
    background: transparent;
}
.og-skin .og-tafel .es-hour-line {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.06);
}
.og-skin .og-tafel .es-event {
    left: 3px;
    right: 3px;
    border-radius: 0;
    background: #1e1e1e;
    border-left: 4px solid var(--event-color, var(--og-signal));
    border-top: 2px solid #121212;  /* Fuge zwischen zwei Sets im selben Haus */
    box-shadow: none;
    color: #fff;
}
.og-skin .og-tafel .es-event:hover,
.og-skin .og-tafel .es-event:focus-visible {
    transform: none;
    background: var(--event-color, var(--og-signal));
    box-shadow: none;
    color: #fff;
}
/* Die Track-Zeile wiederholt nur den Namen des Abends ("Areal-Wochenende · …") */
.og-skin .og-tafel .es-event .es-event-track {
    display: none;
}
.og-skin .og-tafel .es-event-time {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}
.og-skin .og-tafel .es-event-title {
    font-family: var(--og-display);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
    -webkit-line-clamp: 3;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 3 3;
}

/* Tage als Reiter ([et_tabs class=og-tafel], 01.11.): je Tag ein Timetable mit
   eigenem Zeitfenster. Reiter wie die Tagesreiter oben, eckig, aktiv Ziegelrot. */
.og-skin .og-tafel .et-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.og-skin .og-tafel .et-tabs__tab {
    padding: 0.85rem 1.6rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--og-display);
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}
.og-skin .og-tafel .et-tabs__tab + .et-tabs__tab {
    border-left: 0;
}
.og-skin .og-tafel .et-tabs__tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.og-skin .og-tafel .et-tabs__tab.is-active,
.og-skin .og-tafel .et-tabs__tab[aria-selected="true"] {
    background: var(--og-signal);
    border-color: var(--og-signal);
    color: #fff;
}
.og-skin .og-tafel .et-tabs__tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.og-skin .og-tafel .et-tab-panel > p:empty {
    display: none;
}

/* --- 7. Was geht heute ([ensemble_whats_on], 01.11.2026) ----------------- */
/* Direkt unter dem Slider: schwarze Abfahrtstafel. Links die Uhrzeit in
   Ziegelrot, dann Titel und Haus, rechts der Ticket-Knopf. Der Strich links
   trägt die Farbe des Hauses wie im Timetable. */
.og-skin .ensemble-whats-on {
    margin-top: var(--et-space-xl, 4rem);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    background: var(--og-action);
    color: #fff;
}
.og-skin .ensemble-whats-on__title {
    display: flex;
    align-items: center;
    gap: 0.6em;
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
}
.og-skin .ensemble-whats-on__title::before {
    content: '';
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.18em;
    background: var(--og-signal);
}
/* Umschalter wie die Tagesreiter der Tafel: eckig, aktiv Ziegelrot */
.og-skin .ensemble-whats-on__tabs {
    gap: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.og-skin .ensemble-whats-on__tab {
    padding: 0.75rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--og-display);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}
.og-skin .ensemble-whats-on__tab + .ensemble-whats-on__tab {
    border-left: 0;
}
.og-skin .ensemble-whats-on__tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.og-skin .ensemble-whats-on__tab[aria-selected="true"] {
    background: var(--og-signal);
    border-color: var(--og-signal);
    color: #fff;
}
.og-skin .ensemble-whats-on__tab:focus-visible {
    outline: 2px solid #fff;
}
/* „Ganzes Programm" als helle Kontur, die Tickets bleiben das Signal */
.og-skin .ensemble-whats-on .ensemble-btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.og-skin .ensemble-whats-on .ensemble-whats-on__all {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px currentColor;
}
.og-skin .ensemble-whats-on .ensemble-whats-on__all:hover {
    background: #fff;
    color: var(--og-action);
    opacity: 1;
}
.og-skin .ensemble-whats-on__day {
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.05rem;
}
.og-skin .ensemble-whats-on__day-date {
    color: rgba(255, 255, 255, 0.6);
    text-transform: none;
}
.og-skin .ensemble-whats-on__list {
    gap: 0;
}
.og-skin .ensemble-whats-on__row {
    padding: 0.35rem 0 0.35rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.og-skin .ensemble-whats-on__time {
    color: var(--og-signal-hell);
    font-family: var(--og-display);
    font-size: 1.05rem;
}
.og-skin .ensemble-whats-on__row.is-running .ensemble-whats-on__time {
    color: var(--og-signal-hell);
    font-family: inherit;
}
.og-skin .ensemble-whats-on .ensemble-event-card--compact {
    padding: 0.6rem 0;
    background: transparent;
    border: 0;
    color: #fff;
    box-shadow: none;
}
.og-skin .ensemble-whats-on .ensemble-event-card--compact .ensemble-event-title {
    font-size: 1rem;
}
.og-skin .ensemble-whats-on .ensemble-event-card--compact:hover .ensemble-event-title {
    color: var(--og-signal-hell);
}
.og-skin .ensemble-whats-on .ensemble-event-card--compact .ensemble-event-artists,
.og-skin .ensemble-whats-on .ensemble-event-card--compact .ensemble-event-meta {
    color: rgba(255, 255, 255, 0.65);
}
/* Ticket-Knopf wie in den Cards: Icon + "Tickets", Kontur; auf der dunklen Tafel hell (01.11.2026) */
.og-skin .ensemble-whats-on .ensemble-whats-on__ticket {
    border-radius: 0;
    text-transform: uppercase;
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1px currentColor;
}
.og-skin .ensemble-whats-on .ensemble-whats-on__ticket:hover {
    background: var(--og-signal);
    color: #fff;
    box-shadow: none;
    opacity: 1;
}
.og-skin .ensemble-whats-on__empty {
    color: rgba(255, 255, 255, 0.7);
}

/* Ticket-Knopf aller Cards dezent, Kontur, Hover Ziegelrot (01.11.2026, seit dem Abend fuer alle Cards) */
.og-skin .ensemble-event-card .ensemble-btn-tickets--compact {
    background: transparent;
    color: var(--ensemble-text, #161616);
    box-shadow: inset 0 0 0 1px currentColor;
}
.og-skin .ensemble-event-card .ensemble-btn-tickets--compact:hover {
    background: var(--og-signal);
    color: #fff;
    box-shadow: none;
}

/* --- 8. Seitenicon vor dem Namen (01.11.2026) ----------------------------
   Statt eines eigenen Logos: das Website-Icon (Customizer, Website-
   Information) steht vor "Ostgelände". Die Adresse setzt functions.php als
   --og-site-icon, nur wenn ein Icon hinterlegt ist (Klasse og-has-icon). */
.og-skin.og-has-icon .et-branding__title a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.og-skin.og-has-icon .et-branding__title a::before {
    content: '';
    flex: 0 0 auto;
    width: 1.55em;
    height: 1.55em;
    background: var(--og-site-icon) center / contain no-repeat;
}

/* --- 9. Mehr Luft zwischen den Bereichen (01.11.2026) --------------------
   Seiten: Bausteine (Karte, Grids, FAQ, Formulare) und Zwischenüberschriften
   bekommen deutlich mehr Abstand; Absätze untereinander bleiben eng.
   Zwischenüberschriften der Seiten tragen den Signalstrich wie die der
   Startseite. */
.og-skin .et-entry__content > * + :is(div, section, figure, form, table, ul, ol, .wp-block-group, .wp-block-columns, .wp-block-buttons, .wp-block-shortcode) {
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.og-skin .et-entry__content > h2,
.og-skin .et-entry__content > .wp-block-heading {
    margin-top: clamp(4rem, 8vw, 7rem);
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}
.og-skin .et-entry__content > h2:not(.wp-block-heading) {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
}
.og-skin .et-entry__content > h2:not(.wp-block-heading)::before {
    content: '';
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.18em;
    background: var(--og-signal);
}
/* Einleitungssatz unter dem Seitenkopf etwas größer */
.og-skin .et-entry__content > p:first-of-type {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    max-width: 48rem;
}

/* --- 10. Titelbild der Veranstaltungs-, Künstler- und Hausseiten ----------
   (01.11.2026, Stil der Startseite): Bild über die volle Breite direkt am
   Header, Verlauf von unten, Titel und Daten groß auf dem Bild. Das Bild
   und der Kopfbereich liegen in derselben Rasterzelle; alle übrigen
   Bereiche folgen darunter. Ohne Titelbild greift nichts davon. Auf dem
   Handy steht der Kopf unter dem Bild (zu viele Angaben für das Bild). */
.og-skin .et-main:has(.ensemble-event-section--hero, .ensemble-artist-section--hero, .ensemble-location-section--hero) {
    padding-top: 0;
    overflow-x: clip;
}
.og-skin :is(.ensemble-single-event, .ensemble-single-artist, .ensemble-single-location):has(> [class*="-section--hero"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(3rem, 6vw, 5.5rem);
    padding-top: 0;
    margin-top: 0;
}
.og-skin :is(.ensemble-single-event, .ensemble-single-artist, .ensemble-single-location) > [class*="-section--hero"] {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    margin: 0 calc(50% - 50vw);
    height: clamp(22rem, 72svh, 52rem);
    overflow: hidden;
    border-radius: 0;
    background: var(--og-action);
}
.og-skin :is(.ensemble-single-event, .ensemble-single-artist, .ensemble-single-location) > [class*="-section--hero"] img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
}
.og-skin :is(.ensemble-single-event, .ensemble-single-artist, .ensemble-single-location) > [class*="-section--hero"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0) 72%);
    pointer-events: none;
}

@media (max-width: 782px) {
    .og-skin :is(.ensemble-single-event, .ensemble-single-artist, .ensemble-single-location) > [class*="-section--hero"] {
        height: clamp(15rem, 52svh, 26rem);
    }
}
@media (min-width: 783px) {
    .og-skin :is(.ensemble-single-event, .ensemble-single-artist, .ensemble-single-location):has(> [class*="-section--hero"]) > [class*="-section--header"] {
        grid-row: 1;
        grid-column: 1;
        align-self: end;
        position: relative;
        z-index: 2;
        padding-bottom: clamp(2.5rem, 7vh, 5rem);
        color: #fff;
    }
    .og-skin :is(.ensemble-single-event, .ensemble-single-artist, .ensemble-single-location):has(> [class*="-section--hero"]) > [class*="-section--header"] :is(h1, a:not(.ensemble-btn)) {
        color: #fff;
    }
    /* Nur der Titel im Kopfbereich: dieselben Klassen tragen die Cards in
       Line-up, Ort und Verwandten-Liste (01.11.2026, die waren riesig). */
    .og-skin :is(.ensemble-single-event, .ensemble-single-artist, .ensemble-single-location):has(> [class*="-section--hero"]) > [class*="-section--header"] :is(.ensemble-event-title, .ensemble-artist-title, .ensemble-location-title) {
        font-size: clamp(2.6rem, 6vw, 5.5rem);
        max-width: 18ch;
        margin-bottom: 0.2em;
    }
    .og-skin .ensemble-single-event:has(> .ensemble-event-section--hero) > .ensemble-event-section--header .ensemble-event-meta,
    .og-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) > .ensemble-artist-section--header .ensemble-artist-meta,
    .og-skin .ensemble-single-location:has(> .ensemble-location-section--hero) > .ensemble-location-section--header :is(.ensemble-location-address, .ensemble-location-meta) {
        color: rgba(255, 255, 255, 0.85);
    }
    .og-skin .ensemble-single-event:has(> .ensemble-event-section--hero) .ensemble-event-section--header :is(.ensemble-event-price, .ensemble-event-age-restriction, .ensemble-event-calendar, .ensemble-event-categories) {
        color: rgba(255, 255, 255, 0.85);
    }
    /* Herkunft (Künstler) als schmales Feld statt Balken über die ganze Breite */
    .og-skin .ensemble-single-artist:has(> .ensemble-artist-section--hero) .ensemble-artist-section--header .ensemble-artist-references {
        display: inline-flex;
        width: auto;
        max-width: 100%;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        border-radius: 0;
    }
    /* Ticket-Knopf auf dem Bild im Signal-Ton */
    .og-skin .ensemble-single-event:has(> .ensemble-event-section--hero) .ensemble-event-section--header .ensemble-event-ticket-btn {
        background: var(--og-signal);
        color: #fff;
    }
    .og-skin .ensemble-single-event:has(> .ensemble-event-section--hero) .ensemble-event-section--header .ensemble-event-ticket-btn:hover {
        background: #fff;
        color: var(--og-action);
    }
}

/* --- 11. Ansprechpartner-Seiten einspaltig (01.11.2026) ------------------
   Kontaktkarte direkt unter dem Kopf, darunter Text und Formular; die Spalte
   bleibt lesbar schmal. */
.og-skin .es-single-staff {
    max-width: 52rem;
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.og-skin .es-single-staff__body {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
}
.og-skin .es-single-staff__sidebar {
    order: -1;
}
.og-skin .es-single-staff__contact-card {
    border-radius: 0;
}