/*
Theme Name: Ensemble Theme
Theme URI: https://ensemble-plugin.com
Author: Kraftwerk Marketing
Author URI: https://kraftwerk-marketing.de
Description: Schlankes Basis-Theme für das Ensemble-Plugin. Liefert nur Chrome (Header, Footer, Menü, 404, Suche) und reagiert auf die Brand-Tuner-Presets des Plugins. Bringt KEINE Plugin-Funktionen. Grundlage für Premium-Child-Themes (Skins).
Version: 3.13.2
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-theme
Tags: custom-menu, featured-images, translation-ready, theme-options
*/

/* ============================================================
   ENSEMBLE THEME — BASIS-CHROME
   ------------------------------------------------------------
   Regeln:
   - Nur --ensemble-* Frontend-Variablen mit Fallbacks konsumieren.
   - Das Plugin gibt :root{} + es-mode-dark/light selbst aus — hier NICHTS davon.
   - Keine Plugin-Funktionalität, kein Single-Override (Kanon rendert selbst).
   ============================================================ */

/* --- Theme-eigene Struktur-Tokens (kein Marken-Look) --- */
:root {
    --et-space-xs: 0.5rem;
    --et-space-sm: 1rem;
    --et-space-md: 1.5rem;
    --et-space-lg: 2.5rem;
    --et-space-xl: 4rem;
    --et-header-height: 4.5rem;
    --et-container: var(--ensemble-container-width, 1200px);
    --et-transition: 0.2s ease;
}

/* --- Reset / Basis --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ensemble-bg, #ffffff);
    color: var(--ensemble-text, #1a1a1a);
    font-family: var(--ensemble-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: var(--ensemble-body-size, 1rem);
    font-weight: var(--ensemble-body-weight, 400);
    line-height: var(--ensemble-line-height-body, 1.6);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ensemble-font-heading, var(--ensemble-font-body, system-ui, sans-serif));
    font-weight: var(--ensemble-heading-weight, 700);
    line-height: var(--ensemble-line-height-heading, 1.2);
    color: var(--ensemble-text, #1a1a1a);
    margin: 0 0 var(--et-space-sm);
}

a {
    color: var(--ensemble-link, var(--ensemble-primary, #0066cc));
    text-decoration: none;
    transition: color var(--et-transition);
}
a:hover { color: var(--ensemble-hover, var(--ensemble-secondary, #004a99)); }

img { max-width: 100%; height: auto; }

/* --- Layout-Container --- */
.et-container {
    width: 100%;
    max-width: var(--et-container);
    margin-inline: auto;
    padding-inline: var(--et-space-md);
}

.et-site { display: flex; flex-direction: column; min-height: 100vh; }
.et-main { flex: 1 0 auto; padding-block: var(--et-space-xl); }

/* --- Skip-Link (a11y) --- */
.et-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--et-space-sm) var(--et-space-md);
    background: var(--ensemble-primary, #0066cc);
    color: #fff;
    border-radius: 0 0 6px 0;
}
.et-skip-link:focus { left: 0; }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.et-header {
    background: var(--ensemble-nav-bg, var(--ensemble-surface, var(--ensemble-bg, #ffffff)));
    color: var(--ensemble-nav-text, var(--ensemble-text, #1a1a1a));
    border-bottom: 1px solid var(--ensemble-border, var(--ensemble-divider, rgba(0,0,0,0.08)));
    position: relative;
    z-index: 1000; /* über allen Skin-Inhalten (inkl. Dropdown-Klickbarkeit) */
}
/* Sticky nur wenn im Customizer aktiviert (body.et-header-is-sticky). */
.et-header-is-sticky .et-header {
    position: sticky;
    top: 0;
}
.et-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--et-space-md);
    min-height: var(--et-header-height);
}

.et-branding { display: flex; align-items: center; gap: var(--et-space-sm); }
.et-branding__title { font-size: 1.25rem; margin: 0; }
.et-branding__title a { color: inherit; }
.et-branding__tagline { font-size: var(--ensemble-small-size, 0.85rem); color: var(--ensemble-text-muted, #666); margin: 0; }
.et-branding__logo img { display: block; max-height: 2.5rem; width: auto; }

/* A3 (19.10.2026): Das Branding darf vom Menü nicht zusammengedrückt werden.
   Vorher brach "Pfarrei St. Elian" in drei Zeilen, weil .et-branding als
   Flex-Kind schrumpfte. Jetzt: Titel einzeilig, Branding fest, das Menü
   bekommt den Rest und bricht notfalls um; zwischen 783 und 1199 px fällt
   der Untertitel weg, damit das Menü Platz hat. */
.et-branding { flex-shrink: 0; }
.et-branding__title { white-space: nowrap; }
.et-branding__tagline { max-width: 16rem; }
.et-header__end { min-width: 0; }
.et-nav__list { flex-wrap: wrap; row-gap: 0; }
.et-header--classic .et-nav__list { justify-content: flex-end; }
@media (min-width: 783px) and (max-width: 1199px) {
    .et-header--classic .et-branding__tagline,
    .et-header--minimal .et-branding__tagline { display: none; }
}

/* --- Primary menu (Desktop) --- */
.et-nav ul { list-style: none; margin: 0; padding: 0; }  /* killt Aufzählungs-Punkte in Submenüs */

.et-nav__list {
    display: flex;
    align-items: center;
    gap: var(--et-space-md);
}
.et-nav__list li { position: relative; }

.et-nav__list a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--ensemble-nav-text, var(--ensemble-text, #1a1a1a));
    font-weight: 500;
    line-height: 1.2;
    padding: 0.5rem 0;
    white-space: nowrap;
}
.et-nav__list a:hover,
.et-nav__list .current-menu-item > a,
.et-nav__list .current-menu-ancestor > a {
    color: var(--ensemble-primary, #0066cc);
}

/* Aktiv-/Hover-Unterstrich (Akzent) — nur Top-Level */
.et-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--ensemble-nav-active-bg, var(--ensemble-primary, #0066cc));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--et-transition);
}
.et-nav__list > li:hover > a::after,
.et-nav__list > li.current-menu-item > a::after,
.et-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Caret bei Untermenü-Eltern */
.et-nav__list .menu-item-has-children > a::before {
    content: "";
    order: 2;
    width: 0.4em; height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.12em);
    opacity: 0.55;
}

/* Dropdown-Panel */
.et-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--ensemble-card-bg, var(--ensemble-surface, #fff));
    border: 1px solid var(--ensemble-border, rgba(0,0,0,0.1));
    border-radius: var(--ensemble-card-radius, 8px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    padding: 0.4rem 0;
    margin-top: 0;          /* flush an den Elternpunkt — keine Hover-Tote-Zone */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--et-transition), transform var(--et-transition), visibility var(--et-transition);
    z-index: 200;
}
.et-nav__list li:hover > .sub-menu,
.et-nav__list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.et-nav__list .sub-menu a { display: block; padding: 0.5rem 1rem; font-weight: 400; }
/* Neutraler Hover-Tint statt Marken-Farbe als Hintergrund (kein Dunkel-auf-Dunkel). */
.et-nav__list .sub-menu a:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ensemble-primary, #0066cc);
}
.es-mode-dark .et-nav__list .sub-menu a:hover { background: rgba(255, 255, 255, 0.10); }

/* Mobile toggle */
.et-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--ensemble-border, rgba(0,0,0,0.15));
    border-radius: var(--ensemble-button-radius, 6px);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
}

/* --- Mobile (Drawer) --- */
@media (max-width: 782px) {
    .et-nav-toggle { display: inline-flex; }
    .et-nav {
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        background: var(--ensemble-nav-bg, var(--ensemble-surface, #fff));
        border-bottom: 1px solid var(--ensemble-border, rgba(0,0,0,0.08));
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.28s ease;
    }
    .et-nav.is-open { max-height: calc(100vh - var(--et-header-height)); overflow-y: auto; }
    .et-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--et-space-xs) var(--et-space-md) var(--et-space-md);
    }
    .et-nav__list > li { border-bottom: 1px solid var(--ensemble-divider, rgba(0,0,0,0.06)); }
    .et-nav__list > li:last-child { border-bottom: 0; }
    .et-nav__list a { padding: var(--et-space-sm) 0; }
    .et-nav__list > li > a::after { content: none; }              /* kein Unterstrich im Drawer */
    .et-nav__list .menu-item-has-children > a::before { margin-left: auto; }

    /* Untermenü im Drawer: statisch, eingerückt, sichtbar */
    .et-nav__list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        min-width: 0;
        margin: 0;
        padding: 0 0 0.4rem 0.9rem;
        background: transparent;
    }
    .et-nav__list .sub-menu a { padding: 0.4rem 0; }
}

/* ============================================================
   BUTTONS (Theme-Chrome, z. B. Suche/404) — Plugin-Look
   ============================================================ */
.et-button,
.et-main .wp-block-button__link {
    display: inline-block;
    background: var(--ensemble-button-bg, var(--ensemble-primary, #0066cc));
    color: var(--ensemble-button-text, #ffffff);
    font-weight: var(--ensemble-button-weight, 600);
    border: none;
    border-radius: var(--ensemble-button-radius, 6px);
    padding: 0.7em 1.4em;
    cursor: pointer;
    transition: background var(--et-transition);
}
.et-button:hover { background: var(--ensemble-button-hover-bg, var(--ensemble-secondary, #004a99)); color: var(--ensemble-button-hover-text, #fff); }

/* ============================================================
   CONTENT (normale WP-Seiten/Beiträge — NICHT Plugin-Singles)
   ============================================================ */
.et-entry { margin-bottom: var(--et-space-xl); }
.et-entry__title { font-size: var(--ensemble-xl-size, 2rem); }
.et-entry__meta { color: var(--ensemble-text-muted, #666); font-size: var(--ensemble-meta-size, 0.85rem); margin-bottom: var(--et-space-md); }
.et-entry__content > * { margin-block: var(--et-space-sm); }
.et-entry__thumb { margin-bottom: var(--et-space-md); border-radius: var(--ensemble-card-radius, 8px); overflow: hidden; }

.et-pagination { display: flex; gap: var(--et-space-sm); flex-wrap: wrap; margin-top: var(--et-space-lg); }
.et-pagination .page-numbers {
    padding: 0.4em 0.8em;
    border: 1px solid var(--ensemble-border, rgba(0,0,0,0.12));
    border-radius: var(--ensemble-button-radius, 6px);
}
.et-pagination .page-numbers.current { background: var(--ensemble-primary, #0066cc); color: #fff; border-color: transparent; }

/* --- Search form --- */
.et-search { display: flex; gap: var(--et-space-xs); max-width: 30rem; }
.et-search__field {
    flex: 1;
    padding: 0.6em 0.9em;
    background: var(--ensemble-input-bg, var(--ensemble-bg, #fff));
    color: var(--ensemble-text, #1a1a1a);
    border: 1px solid var(--ensemble-input-border, var(--ensemble-border, rgba(0,0,0,0.15)));
    border-radius: var(--ensemble-input-radius, 6px);
}

/* --- 404 --- */
.et-404 { text-align: center; padding-block: var(--et-space-xl); }
.et-404__code { font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--ensemble-primary, #0066cc); }

/* ============================================================
   FOOTER
   ============================================================ */
.et-footer {
    flex-shrink: 0;
    background: var(--ensemble-surface, var(--ensemble-card-bg, #f5f5f5));
    color: var(--ensemble-text, #1a1a1a);
    border-top: 1px solid var(--ensemble-border, var(--ensemble-divider, rgba(0,0,0,0.08)));
    padding-block: var(--et-space-lg);
}
.et-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--et-space-md);
}
.et-footer__nav ul { display: flex; flex-wrap: wrap; gap: var(--et-space-md); list-style: none; margin: 0; padding: 0; }
.et-footer__credit { color: var(--ensemble-text-muted, #666); font-size: var(--ensemble-small-size, 0.85rem); }

/* ============================================================
   DARK-MODE-FEINSCHLIFF
   Das Plugin setzt bg/text schon dunkel, wenn ein dunkles Preset aktiv ist.
   Hier nur minimale Chrome-Korrekturen, die die Semantik-Variablen nicht abdecken.
   ============================================================ */
.es-mode-dark .et-header,
.es-mode-dark .et-footer {
    border-color: var(--ensemble-divider, rgba(255,255,255,0.12));
}

/* ============================================================
   HEADER-VARIANTEN
   ============================================================ */
.et-branding--center { flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; }

/* Centered — Logo mittig, Menü darunter */
.et-header--centered .et-header__inner {
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding-block: 0.9rem;
}
.et-header--centered .et-branding { flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; }
.et-header--centered .et-nav__list { justify-content: center; flex-wrap: wrap; }

/* Minimal — kompakt */
.et-header--minimal { --et-header-height: 3.5rem; }
.et-header--minimal .et-branding__title { font-size: 1.05rem; }
.et-header--minimal .et-branding__logo img { max-height: 2rem; }
.et-header--minimal .et-nav__list { gap: var(--et-space-sm); font-size: 0.95rem; }
.et-header--minimal .et-nav__list > li > a::after { content: none; } /* ohne Akzent-Unterstrich */

/* Split — Menü links, Logo mittig, Zweitmenü rechts */
.et-header--split .et-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--et-space-md);
}
.et-header--split .et-nav--left  { justify-self: start; }
.et-header--split .et-branding--center { justify-self: center; }
.et-header--split .et-nav--right { justify-self: end; }
.et-header--split .et-nav--right .et-nav__list { justify-content: flex-end; }

/* Mobil: alle Varianten auf eine konsistente Zeile (Brand links, Toggle rechts,
   Menü als Drawer). Ergänzt die Drawer-Regeln oben. */
@media (max-width: 782px) {
    .et-header__inner { flex-direction: row; justify-content: space-between; }
    .et-header--split .et-header__inner { display: flex; }
    .et-branding--center { flex-direction: row; align-items: center; text-align: left; }
    .et-header--split .et-nav--right { display: none; } /* Zweitmenü auf Mobil aus */
    .et-header--centered .et-nav__list,
    .et-header--split .et-nav--left .et-nav__list { justify-content: flex-start; }
}

/* ============================================================
   FOOTER-VARIANTEN
   ============================================================ */
/* Classic — Widget-Spalten + Leiste */
.et-footer--classic .et-footer__widgets {
    display: grid;
    gap: var(--et-space-lg);
    margin-bottom: var(--et-space-lg);
}
.et-footer__widgets--2 { grid-template-columns: repeat(2, 1fr); }
.et-footer__widgets--3 { grid-template-columns: repeat(3, 1fr); }
.et-footer__widgets--4 { grid-template-columns: repeat(4, 1fr); }
.et-footer-widget { margin-bottom: var(--et-space-md); }
.et-footer-widget__title { font-size: 1rem; margin: 0 0 var(--et-space-sm); }
.et-footer--classic .et-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--et-space-md);
    padding-top: var(--et-space-md);
    border-top: 1px solid var(--ensemble-divider, rgba(0,0,0,0.08));
}
@media (max-width: 782px) { .et-footer--classic .et-footer__widgets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .et-footer--classic .et-footer__widgets { grid-template-columns: 1fr; } }

/* Centered — alles mittig */
.et-footer--centered .et-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--et-space-md);
}
.et-footer--centered .et-footer__list { justify-content: center; }

/* ============================================================
   SINGLE-EVENT-LAYOUT (ein-/zweispaltig)
   ------------------------------------------------------------
   Nur CSS gegen den Sektions-Vertrag. Die Sektion→Slot-Zuordnung
   (grid-column pro .ensemble-event-section--{name}) liefert
   inc/single-layout.php als dynamisches Inline-CSS.
   Einspaltig = Kanon-Default (kein Grid).
   ============================================================ */
/* Zwei ECHTE Spalten-Container (per JS gruppiert, assets/js/single-layout.js):
   Haupt- und Sidebar-Spalte fließen unabhängig — keine geteilten Grid-Zeilen,
   also keine Lücken und kein Zickzack. Ohne JS bleibt es einspaltig (Fallback). */
/* .et-cols existiert NUR, wenn das JS für two-col gruppiert hat → Grid-Regel
   hängt bewusst nur an dieser Klasse (unabhängig von der Body-Klasse), damit
   sie robust greift, sobald die Spalten-Container da sind. */
.et-cols {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--et-space-lg) var(--et-space-xl);
    align-items: start;
}
.et-sidebar-left .et-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.et-sidebar-left .et-col--side { grid-column: 1; }
.et-sidebar-left .et-col--main { grid-column: 2; }

.et-col {
    display: flex;
    flex-direction: column;
    gap: var(--et-space-lg);
    min-width: 0;
}

/* Sidebar-Reflow: interne Mehrspalten-Container auf eine Spalte, kein Overflow
   (deckt grid/column und die Ensemble-BEM-Konvention __list/cards ab). */
.et-col--side * { min-width: 0; }
.et-col--side [class*="grid"],
.et-col--side [class*="column"],
.et-col--side [class*="__list"],
.et-col--side [class*="cards"] { grid-template-columns: 1fr !important; }
.et-col--side [class*="card"] { width: auto !important; max-width: 100% !important; }

/* Schmale Viewports: eine Spalte (Container stapelt). */
@media (max-width: 782px) {
    .et-cols { display: block; }
}

/* ============================================================
   SINGLE-EVENT — TABS (der interaktive Motor)
   ============================================================ */
/* Motor = assets/js/single-tabs.js (setzt .is-active + ARIA). Die OPTIK unten ist
   bewusst unter .et-event-layout-tabs gescopet, damit sie NUR das nüchterne Basis-
   Tabs-Layout betrifft und NICHT in Premium-Skins blutet, die denselben Motor über
   eigene Klassen nutzen (z. B. Congress skinnt seine eigenen .es-kongress-tab*).
   [hidden] bleibt generisch (Motor blendet inaktive Panels aus). */
.et-tab-panel[hidden] {
    display: none;
}
.et-event-layout-tabs .et-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--et-space-xs);
    border-bottom: 1px solid var(--ensemble-border, var(--ensemble-divider, rgba(0, 0, 0, 0.12)));
    margin-bottom: var(--et-space-lg);
}
.et-event-layout-tabs .et-tabs__tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--et-space-sm) var(--et-space-md);
    font-family: var(--ensemble-font-heading, inherit);
    font-weight: var(--ensemble-heading-weight, 600);
    font-size: var(--ensemble-body-size, 1rem);
    line-height: 1.2;
    color: var(--ensemble-text-muted, var(--ensemble-text, inherit));
    cursor: pointer;
    transition: color var(--et-transition), border-color var(--et-transition);
}
.et-event-layout-tabs .et-tabs__tab:hover {
    color: var(--ensemble-text, inherit);
}
.et-event-layout-tabs .et-tabs__tab[aria-selected="true"] {
    color: var(--ensemble-primary, var(--ensemble-text, inherit));
    border-bottom-color: var(--ensemble-primary, currentColor);
}
.et-event-layout-tabs .et-tabs__tab:focus-visible {
    outline: 2px solid var(--ensemble-primary, currentColor);
    outline-offset: 2px;
    border-radius: 2px;
}
.et-event-layout-tabs .et-tab-panel.is-active {
    animation: et-tab-fade var(--et-transition);
}
@keyframes et-tab-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   SINGLE-EVENT — AKKORDEON (der interaktive Motor, gestapelt)
   ============================================================ */
/* Per JS gebaut (assets/js/single-accordion.js): Inhaltssektionen werden gestapelte,
   aufklappbare Elemente. Sichtbarkeit per [hidden] (ZUSTAND → reduce-motion-fest),
   nur der Chevron dreht dekorativ. Optik unter .et-event-layout-accordion gescopet. */
.et-accordion__panel[hidden] {
    display: none;
}
.et-event-layout-accordion .et-accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ensemble-border, var(--ensemble-divider, rgba(0, 0, 0, 0.12)));
}
.et-event-layout-accordion .et-accordion__toggle-all {
    align-self: flex-end;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: var(--et-space-xs) 0;
    margin: var(--et-space-xs) 0;
    font-size: var(--ensemble-small-size, 0.875rem);
    color: var(--ensemble-link, var(--ensemble-primary, inherit));
    cursor: pointer;
}
.et-event-layout-accordion .et-accordion__toggle-all:hover {
    text-decoration: underline;
}
.et-event-layout-accordion .et-accordion__item {
    border-bottom: 1px solid var(--ensemble-border, var(--ensemble-divider, rgba(0, 0, 0, 0.12)));
}
.et-event-layout-accordion .et-accordion__heading {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.et-event-layout-accordion .et-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--et-space-sm);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: var(--et-space-md) 0;
    font-family: var(--ensemble-font-heading, inherit);
    font-weight: var(--ensemble-heading-weight, 600);
    font-size: var(--ensemble-xl-size, 1.25rem);
    color: var(--ensemble-text, inherit);
    text-align: left;
    cursor: pointer;
}
.et-event-layout-accordion .et-accordion__header:hover {
    color: var(--ensemble-primary, inherit);
}
.et-event-layout-accordion .et-accordion__header:focus-visible {
    outline: 2px solid var(--ensemble-primary, currentColor);
    outline-offset: 2px;
}
.et-event-layout-accordion .et-accordion__title {
    min-width: 0;
}
/* Chevron als CSS-Kante; dreht bei aria-expanded (dekorativ → reduce-motion-fest,
   der Endzustand ist eine deklarierte Property, nicht eine Animation). */
.et-event-layout-accordion .et-accordion__icon {
    flex: 0 0 auto;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--et-transition);
}
.et-event-layout-accordion .et-accordion__header[aria-expanded="true"] .et-accordion__icon {
    transform: rotate(-135deg);
}
.et-event-layout-accordion .et-accordion__panel {
    padding-bottom: var(--et-space-lg);
}
/* Sektionstitel im Panel NICHT doppelt zeigen — die Kopfzeile IST der Titel. */
.et-event-layout-accordion .et-accordion__panel .ensemble-event-section-title {
    display: none;
}

/* --- Breakout: alignwide/alignfull innerhalb des zentrierten Containers ---
   100vw-Trick — overflow-x:clip auf dem body fängt die Scrollbar-Differenz ab
   (clip bricht position:sticky NICHT, anders als hidden). */
body { overflow-x: clip; }

.et-container .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.et-container .alignwide {
    width: min(100vw - 2 * var(--et-space-md), var(--et-container) + 10rem);
    max-width: none;
    margin-left: calc(50% - min(100vw - 2 * var(--et-space-md), var(--et-container) + 10rem) / 2);
    margin-right: calc(50% - min(100vw - 2 * var(--et-space-md), var(--et-container) + 10rem) / 2);
}

/* --- Canvas-Template (template-canvas.php): randlos, ohne Titel ---
   Kein Außenabstand am Main; normale Blöcke werden auf Containerbreite
   zentriert, alignwide/alignfull brechen aus (constrained layout). */
.page-template-template-canvas .et-main { padding-block: 0; }

.et-canvas > * {
    max-width: var(--et-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--et-space-md);
    padding-right: var(--et-space-md);
}

.et-canvas > .alignwide {
    max-width: calc(var(--et-container) + 10rem);
    padding-left: 0;
    padding-right: 0;
}

.et-canvas > .alignfull {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* ============================================================
   HEADER-KOMFORT (v3.12.0)
   Shrink / Auto-Hide / Transparent / Suche.
   Geschaltet über Body-Klassen aus dem Customizer; die Zustände
   .is-shrunk / .is-hidden / .is-solid setzt assets/js/header.js.
   ============================================================ */

/* Rechte Header-Gruppe: Menü + Aktionen (Social, Suche) */
.et-header__end {
    display: flex;
    align-items: center;
    gap: var(--et-space-md);
}
.et-header__actions {
    display: flex;
    align-items: center;
    gap: var(--et-space-sm);
}
.et-header--centered .et-header__end { width: 100%; justify-content: center; }
.et-header--split .et-header__end { justify-self: end; }

.et-header {
    transition: transform var(--et-transition), background var(--et-transition), min-height var(--et-transition);
}

/* --- Beim Scrollen verkleinern --- */
.et-header.is-shrunk { --et-header-height: 3.25rem; }
.et-header.is-shrunk .et-branding__logo img { max-height: 2rem; }
.et-header.is-shrunk .et-branding__tagline { display: none; }

/* --- Beim Runterscrollen ausblenden --- */
.et-header.is-hidden { transform: translateY(-100%); }

/* --- Transparent auf der Startseite ---
   Der Header legt sich über den Hero (fixed, damit der Inhalt darunter
   durchläuft) und wird beim Scrollen wieder deckend. Body-Klasse wird nur
   auf der Startseite gesetzt. */
.et-header-is-transparent .et-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
    color: var(--ensemble-overlay-text, #ffffff);
}
.et-header-is-transparent .et-header .et-branding__tagline { color: inherit; }
.et-header-is-transparent .et-main { padding-top: 0; }

.et-header-is-transparent .et-header.is-solid {
    position: fixed;
    background: var(--ensemble-nav-bg, var(--ensemble-surface, var(--ensemble-bg, #ffffff)));
    color: var(--ensemble-nav-text, var(--ensemble-text, #1a1a1a));
    border-bottom-color: var(--ensemble-border, var(--ensemble-divider, rgba(0,0,0,0.08)));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* --- Such-Icon + Panel --- */
.et-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0.35rem;
    cursor: pointer;
    color: inherit;
    border-radius: var(--ensemble-button-radius, 6px);
    transition: color var(--et-transition), opacity var(--et-transition);
}
.et-search-toggle:hover { color: var(--ensemble-primary, currentColor); }
.et-search-toggle svg { display: block; }

.et-header__search {
    border-top: 1px solid var(--ensemble-divider, rgba(0,0,0,0.08));
    background: var(--ensemble-nav-bg, var(--ensemble-surface, var(--ensemble-bg, #ffffff)));
    padding-block: var(--et-space-sm);
}
.et-header__search .et-search { margin-inline: auto; width: 100%; }
.et-header-is-transparent .et-header .et-header__search { color: var(--ensemble-text, #1a1a1a); }

/* ============================================================
   SOCIAL-ICONS (v3.12.0)
   Standard-Stil erbt die Textfarbe des Chromes (= Preset).
   „Markenfarben" setzt der Renderer inline pro Icon.
   ============================================================ */
.et-social-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.et-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    line-height: 0;
    opacity: 0.85;
    transition: opacity var(--et-transition), color var(--et-transition), transform var(--et-transition);
}
.et-social-icon:hover,
.et-social-icon:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}
.et-social-icons--default .et-social-icon:hover,
.et-social-icons--default .et-social-icon:focus-visible {
    color: var(--ensemble-primary, currentColor);
}
.et-social-icon svg { display: block; }
.et-social-icon--custom img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.et-social-icon:focus-visible {
    outline: 2px solid var(--ensemble-primary, currentColor);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Menü-Fallback (Position „Social Links") */
.et-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--et-space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--ensemble-small-size, 0.85rem);
}

/* Footer-Platzierung */
.et-footer__social { display: flex; align-items: center; }
.et-footer--centered .et-footer__social { justify-content: center; }

/* Im mobilen Drawer: auf dem Desktop aus, im offenen Menü sichtbar. */
.et-nav__social { display: none; }

@media (max-width: 782px) {
    /* Reihenfolge auf Mobil: Logo, Aktionen, Burger. */
    .et-header__end { order: 2; gap: var(--et-space-sm); }
    .et-nav-toggle { order: 3; }
    .et-header--centered .et-header__end { width: auto; }

    .et-nav__social {
        display: flex;
        justify-content: center;
        gap: var(--et-space-md);
        padding: var(--et-space-sm) var(--et-space-md) var(--et-space-md);
        border-top: 1px solid var(--ensemble-divider, rgba(0,0,0,0.06));
    }

    /* Verkleinern auf Mobil aus — der Header ist dort ohnehin flach. */
    .et-header.is-shrunk { --et-header-height: 3.5rem; }
}

/* ============================================================
   CANVAS: ABSTAND ZWISCHEN DEN BLOECKEN (16.10.2026)
   Auf Canvas-Seiten (Startseite, Seiten mit Hero Header) standen die
   Bloecke ohne Abstand aneinander: Ueberschriften klebten am Slider,
   Abschnitte am naechsten. Jetzt ein gleichmaessiger Abstand; eine
   Ueberschrift sitzt naeher an dem, was sie einleitet.
   ============================================================ */
.et-canvas > * {
    margin-top: 0;
    margin-bottom: 0;
}
.et-canvas > * + * {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.et-canvas > :is(h1, h2, h3, .wp-block-heading) + * {
    margin-top: var(--et-space-md);
}
.et-canvas > :last-child:not(.alignfull) {
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* ============================================================
   KOMMENTARE (16.10.2026)
   Das Kommentarformular kam bisher ungestylt (weisse Browserfelder,
   auch bei dunklen Marken). Felder und Button folgen jetzt der Marke.
   ============================================================ */
.comments-area,
.comment-respond {
    margin-top: var(--et-space-lg);
    padding-top: var(--et-space-lg);
    border-top: 1px solid var(--ensemble-card-border, rgba(127, 127, 127, 0.25));
}
.comment-reply-title,
.comments-title {
    font-size: 1.5rem;
}
.comment-form p {
    margin: 0 0 var(--et-space-sm);
}
.comment-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--ensemble-text-secondary, inherit);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    max-width: 640px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: var(--ensemble-text, inherit);
    background: var(--ensemble-card-bg, transparent);
    border: 1px solid var(--ensemble-card-border, rgba(127, 127, 127, 0.4));
    border-radius: var(--ensemble-radius, 4px);
}
.comment-form textarea {
    min-height: 9rem;
    resize: vertical;
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: 2px solid var(--ensemble-primary, currentColor);
    outline-offset: 1px;
}
.comment-form .comment-form-cookies-consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}
.comment-form .comment-form-cookies-consent label {
    display: inline;
    margin: 0;
}
.comment-form .submit {
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-weight: 600;
    color: var(--ensemble-primary-contrast, #ffffff);
    background: var(--ensemble-primary, #333333);
    border: 0;
    border-radius: var(--ensemble-radius, 4px);
    cursor: pointer;
}
.comment-form .submit:hover {
    background: var(--ensemble-primary-hover, var(--ensemble-primary, #333333));
}
.comment-list {
    list-style: none;
    margin: 0 0 var(--et-space-lg);
    padding: 0;
}
.comment-list .comment-body {
    padding: var(--et-space-sm) 0;
    border-bottom: 1px solid var(--ensemble-card-border, rgba(127, 127, 127, 0.25));
}
.comment-list .children {
    list-style: none;
    padding-left: var(--et-space-md);
}

/* ============================================================
   STARTSEITEN-HERO AUF CANVAS + ADMIN-LEISTE (16.10.2026)
   [ensemble_hero] ist ein Vollbild-Hero. Auf der Canvas-Vorlage wurde er
   wie jeder andere Block auf Containerbreite gesetzt; jetzt geht er von
   Kante zu Kante, wie Hero Slider und Hero Header mit "Volle Breite".
   Fester Kopf (klebend oder transparent) lag fuer angemeldete Benutzer
   unter der WordPress-Admin-Leiste. Jetzt rueckt er um deren Hoehe nach
   unten (32 px, mobil 46 px; unter 600 px scrollt die Leiste mit).
   ============================================================ */
.et-canvas > .es-hero {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.admin-bar.et-header-is-sticky .et-header,
.admin-bar.et-header-is-transparent .et-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar.et-header-is-sticky .et-header,
    .admin-bar.et-header-is-transparent .et-header {
        top: 46px;
    }
}
@media (max-width: 600px) {
    .admin-bar.et-header-is-sticky .et-header,
    .admin-bar.et-header-is-transparent .et-header {
        top: 0;
    }
}

/* Naechste Termine ([ensemble_homepage_events]) bei dunklen Marken:
   Das Datum stand in der Primaerfarbe (bei Nachtwerk Bordeaux) auf dunklem
   Grund und war kaum lesbar. Bei es-mode-dark gilt die aufgehellte
   Primaerfarbe, die der Brand Tuner dafuer ausgibt (16.10.2026). */
.es-homepage-events.es-mode-dark {
    --hp-primary: var(--ensemble-primary-on-dark, var(--ensemble-primary, #ff3366));
}

/* Naechste Termine als Overlay auf dem Startbild: Das Datum war klein und
   in der Primaerfarbe auf dem Foto kaum zu lesen. Auf dem Bild jetzt die
   Akzentfarbe (Brand Tuner "Sekundaer", bei Nachtwerk Gold), groesser und
   mit leichtem Schatten gegen unruhige Bildstellen (16.10.2026). */
.es-homepage-events.es-homepage-events--overlay {
    --hp-primary: var(--ensemble-secondary, var(--ensemble-primary, #ff3366));
}
.es-homepage-events--overlay.es-homepage-events--minimal .es-homepage-events__date {
    font-size: 1.375rem;
    letter-spacing: 0.04em;
    min-width: 130px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.es-homepage-events--overlay .es-homepage-events__name,
.es-homepage-events--overlay .es-homepage-events__location {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* Canvas: Slider- und Hero-Layouts aus [ensemble_events] mittig.
   Das Plugin setzt fuer .es-is-slider margin:0 und hebt damit die
   Zentrierung des Canvas auf, der Slider klebte links. (16.10.2026) */
.et-canvas > .ensemble-events-grid-wrapper.es-is-slider {
    margin-left: auto;
    margin-right: auto;
}
.et-canvas > * + .ensemble-events-grid-wrapper.es-is-slider {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}