/*
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.12.1
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; }

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