/*
 Theme Name:   Hundezeit
 Theme URI:    https://hundezeit-uelzen.de
 Description:  Child-Theme von GeneratePress für Hundezeit Uelzen
 Author:       Hundezeit Uelzen
 Author URI:   https://hundezeit-uelzen.de
 Template:     generatepress
 Version:      2.8.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  hundezeit
*/

/* ==========================================================================
   SELF-HOSTED FONTS (DSGVO-konform, kein Google-Aufruf)
   Dateien: wp-content/themes/hundezeit/fonts/
   ========================================================================== */

/* DM Serif Display */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-400-italic.woff2') format('woff2');
}

/* Lato */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/lato-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/lato-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700-italic.woff2') format('woff2');
}

/* Libre Baskerville */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/libre-baskerville-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/libre-baskerville-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/libre-baskerville-700.woff2') format('woff2');
}

/* ==========================================================================
   Farbvariablen — Redesign 2026
   ========================================================================== */
:root {
    --hz-green:        #4A6B4C;
    --hz-green-dark:   #3A5640;
    --hz-green-hauch:  #EDF2ED;
    --hz-text:         #333331;
    --hz-text-gray:    #6B6B67;
    --hz-bg:           #E8E4DC;
    --hz-white:        #FFFFFF;
    --hz-line:         #D5CEC4;
    --hz-sand:         #C8B99A;
    --hz-dark:         #2C2C2A;
    --hz-bg-content:   #F5F4F0;
    --hz-font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
    --hz-font-body:    "Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --hz-font-accent:  "Libre Baskerville", Georgia, serif;
    --hz-radius-sm:    4px;
}

/* ==========================================================================
   Body — Leinen-Textur auf Seitenrand
   ========================================================================== */
body {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.025) 2px,
            rgba(0, 0, 0, 0.025) 3px
        );
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* body line-height: via Elementor Kit Theme Style */

/* ==========================================================================
   Layout — eingefasster Look (grüner Rahmen links/rechts)
   GP content_background_color (#3A5640) erzeugt .one-container .container BG.
   .inside-article bekommt hellen BG + seitliche Margins → grüner Streifen sichtbar.
   ========================================================================== */
.one-container .inside-article {
    background-color: var(--hz-bg-content, #F5F4F0);
    margin-left: 15px;
    margin-right: 15px;
    padding: 40px;
}

/* Elementor-Seiten liefern eigene Heading-Widgets → WP-Titel ausblenden.
   NUR auf Elementor-Seiten, damit Blog/Archive/Suche/404 ihren Titel behalten.
   Alternativ: GP-Metabox "Disable Content Title" pro Seite nutzen. */
.elementor-page .entry-title {
    display: none;
}

/* p margin-bottom: via Elementor Kit paragraph_spacing */

/* Willkommens-Box: Absatz-Abstände entfernen (global paragraph_spacing greift sonst) */
.elementor-element-e59622d p {
    margin-bottom: 0;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
#site-navigation {
    box-shadow: 0 2px 8px rgba(44, 44, 42, 0.08),
                0 8px 24px rgba(44, 44, 42, 0.06);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    border-bottom: 2px solid var(--hz-sand);
}

/* Submenü / Dropdown — Farben + Schatten + Spacing */
.main-navigation ul ul,
.main-navigation .main-nav ul ul {
    background-color: var(--hz-green-dark, #3A5640);
    box-shadow: 0 4px 12px rgba(44, 44, 42, 0.25);
    min-width: 220px;
    border-top: 2px solid var(--hz-sand, #CFC0A1);
}

.main-navigation .main-nav ul ul li a {
    color: #F4F2EF;
    padding: 10px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.15s ease;
}

.main-navigation .main-nav ul ul li:last-child a {
    border-bottom: none;
}

.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li.sfHover > a {
    color: var(--hz-sand, #CFC0A1);
    background-color: rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Submenü-Items: kein Unterstrich-Hover vom Hauptmenü erben */
.main-navigation .main-nav ul ul li a,
.main-navigation .main-nav ul ul li a:hover {
    border-bottom-style: solid;
}

/* #masthead box-shadow entfernt — #page shadow reicht */

.site-logo img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   Seiten-Container — dezenter Rahmen
   ========================================================================== */
#page {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 20px rgba(44, 44, 42, 0.22),
                0 0 50px rgba(44, 44, 42, 0.12);
}

/* Durchgehende Seitenränder — auf jeder GP-Sektion einzeln */
/* Durchgehende 1px Linie auf allen Sektionen */
#masthead,
.site-content,
#footer-widgets,
.site-info {
    border-left: 1px solid var(--hz-line);
    border-right: 1px solid var(--hz-line);
    box-sizing: border-box;
}

/* Inset-Schatten entfernt — 1px Linie + #page box-shadow reichen für Tiefenwirkung */

/* Elementor-Sektionen: dezente Trennlinie (nur Pages, nur im Article-Container, nicht MEC/Posts) */
.page #page .inside-article .elementor-section {
    border-bottom: 1px solid var(--hz-line, #D6D1C8);
}
.page #page .inside-article .elementor-section:last-child {
    border-bottom: none;
}

/* Heading-Farben + Body line-height: via Elementor Kit Theme Style (browser-editierbar) */

/* ==========================================================================
   Buttons (global)
   ========================================================================== */
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.wpcf7-submit {
    background-color: var(--hz-green);
    color: var(--hz-white);
    border-radius: 3px;
    padding: 11px 24px;
    letter-spacing: 0.08em;
    box-shadow: 0 2px 8px rgba(74, 107, 76, 0.2);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
    background-color: var(--hz-green-dark);
    box-shadow: 0 3px 12px rgba(58, 86, 64, 0.3);
}


/* ==========================================================================
   Services-Karten — gleiche Höhe per Flexbox (nach Umbau: Inner Sections)
   Zeile 1 (Inner Section): 2 Spalten 50/50 — Termine + Kurse
   ========================================================================== */
#hz_services .elementor-inner-section > .elementor-container {
    display: flex;
    align-items: stretch;
}

#hz_services .elementor-inner-section > .elementor-container > .elementor-column {
    display: flex;
    flex-direction: column;
}

#hz_services .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Services-Karten — Content vereinheitlichen
   font-family explizit auf Designsystem-Fonts fuer typografische Konsistenz.
   font-size 15px (kleiner als Kit-Body 18px fuer kompaktere Cards).
   ========================================================================== */
#hz_services {
    font-family: var(--hz-font-body);
}
#hz_services h3, #hz_services h4 {
    font-family: var(--hz-font-heading);
}
/* MEC-Widgets werden ausgeschlossen: .mec-wrap ist der MEC-Wurzel-Container,
   .mec-event-grid-classic der Grid-Wrapper. Beide erben MEC-eigene em-Groessen
   und duerfen NICHT auf 15px fixiert werden, da sonst em-Labels zu klein werden. */
#hz_services .elementor-widget-container:not(.mec-wrap):not(.mec-event-grid-classic) {
    font-size: 15px;
}

#hz_services .elementor-widget-container a {
    color: var(--hz-green);
}

#hz_services .elementor-widget-container a:hover {
    color: var(--hz-green-dark);
    text-decoration: underline;
}

/* ==========================================================================
   MEC Simple Style — Farbanpassung für Startseiten-Vorschau
   Nur in #hz_services (Startseite) — nicht auf Kalender-Seite (/kalender/)
   Warum CSS: MEC base_color wird per Plugin-Option gesetzt (#3D4A3E statt
              #4A6B4C). CSS-Override ist noetig da kein Elementor-Picker
              fuer MEC-interne Akzentfarben existiert.
   Variablen: --hz-green, --hz-green-dark, --hz-text, --hz-text-gray, --hz-line
   ========================================================================== */

/* Datum-Label: MEC gibt .mec-color die Plugin-Akzentfarbe (oft falsch).
   Override auf Designsystem-Gruen. */
#hz_services .mec-event-date.mec-color {
    color: var(--hz-green);
}

/* Datum-Komponenten (Simple-Style-Grid: Tag + Monat getrennt) */
#hz_services .mec-start-dt,
#hz_services .mec-start-month,
#hz_services .mec-start-day {
    color: var(--hz-green);
}

/* Termin-Titel als Link — Designsystem-Textfarbe statt MEC-Default */
#hz_services .mec-event-title a {
    color: var(--hz-text);
    text-decoration: none;
}

#hz_services .mec-event-title a:hover {
    color: var(--hz-green);
    text-decoration: underline;
}

/* Ort-Text — Sekundaerfarbe gemaess Designsystem */
#hz_services .mec-event-loc-place {
    color: var(--hz-text-gray);
    font-size: 0.875em; /* relativ zu 15px Parent → ~13px, bewusst kleiner */
}

/* Ort-Link (Grid-Style) — MEC nutzt .mec-grid-event-location als Link-Wrapper.
   Standard-Link-Farbe ist MEC-orange → Override auf Designsystem-Grau.
   Warum CSS: kein Elementor-Picker fuer MEC-interne Link-Farben. */
#hz_services .mec-grid-event-location,
#hz_services .mec-grid-event-location a {
    color: var(--hz-text-gray);
}

#hz_services .mec-grid-event-location a:hover {
    color: var(--hz-green);
    text-decoration: underline;
}

/* Abstände zwischen einzelnen Terminen — nicht zu gedraengt */
#hz_services .mec-event-list-view .mec-event,
#hz_services .mec-event-grid-classic .mec-event {
    padding-bottom: 0.75em;
    margin-bottom: 0.75em;
    border-bottom: 1px solid var(--hz-line);
}

/* Letzten Eintrag ohne Trennlinie */
#hz_services .mec-event-list-view .mec-event:last-child,
#hz_services .mec-event-grid-classic .mec-event:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Kurse-Spalte: Post-Titel (Elementor Posts-Widget) wie MEC-Termin-Titel
   Warum CSS: #hz_services .elementor-widget-container a (ID-Selektor) setzt
   Link-Farbe auf --hz-green; Widget-CSS kann ID-Spezifitaet nicht ueberstimmen.
   font-size: MEC-Plugin setzt .mec-wrap h4 { font-size: 24px; font-weight: 400 }.
   Elementor-Pro card-skin wuerde 21px setzen — override auf 24px um MEC zu matchen.
   font-weight: Browser-UA wuerde bold setzen — override auf 400 wie .mec-wrap h4. */
#hz_services .elementor-post__title {
    font-size: 20px;      /* Designer-Briefing: identisch zu .mec-event-title */
    font-weight: 400;
    /* min-height: 2 Zeilen Titel-Platz damit "NÄCHSTER TERMIN" auf gleicher Hoehe startet.
       20px * 1.4 line-height * 2 Zeilen ≈ 3.5em. Mobile-Reset in @media unten. */
    min-height: 3.5em;
}

#hz_services .elementor-post__title a {
    color: var(--hz-text);    /* #333331 — identisch zu .mec-event-title a */
    text-decoration: none;
}

#hz_services .elementor-post__title a:hover {
    color: var(--hz-green);   /* identisch zu .mec-event-title a:hover */
    text-decoration: underline;
}

/* "Aktuell keine Termine"-Fallback — sauber, gemaess Sekundaerfarbe */
#hz_services .mec-no-events-found,
#hz_services .mec-no-results {
    color: var(--hz-text-gray);
    font-size: 0.9em;
    font-style: italic;
    padding: 0.5em 0;
}

/* ── Typografie-Angleichung: MEC-Titel, Datum, Ort, Excerpt ────────────────
   Warum: MEC erbt keine Theme-Fonts. #hz_services { font-family } setzt Lato
   fuer den Container, aber MEC-Elemente setzen teils eigene font-family oder
   erben aus dem MEC-Plugin-CSS (oft System-UI). Explizite Overrides noetig.
   ──────────────────────────────────────────────────────────────────────────── */

/* Event-Titel: DM Serif Display wie Section-Headings und Posts-Widget-Titel */
#hz_services .mec-event-title {
    font-family: var(--hz-font-heading);
    font-size: 20px;      /* Designer-Briefing: 18-20px, passend zu Section-Headings 22px */
    font-weight: 400;
    line-height: 1.3;
}

/* Datum-Komponenten: dezent, Sekundaertext (Designer-Briefing) */
#hz_services .mec-start-dt,
#hz_services .mec-start-month,
#hz_services .mec-start-day,
#hz_services .mec-event-date {
    font-family: var(--hz-font-body);
    font-size: 13px;
    color: var(--hz-text-gray);  /* #6B6B67 — dezenter als Titel */
}

/* Ort: Lato (bereits Lato durch Container, explizit fuer Sicherheit) */
#hz_services .mec-event-loc-place {
    font-family: var(--hz-font-body);
}

/* Share/Meta-Bereich: kein visueller Clutter */
#hz_services .mec-event-sharing-wrap {
    font-family: var(--hz-font-body);
    font-size: 0.8em;
}

/* Posts-Widget Cards: Beiger HG + Border (aus DB card_bg_color #F5F4F0) */
/* Elementor Pro generiert dieses CSS lokal nicht (fehlende Lizenz).       */
/* Auf Live greift die Elementor-generierte post-46.css — kein Konflikt.   */
.page-id-46 .elementor-post__card {
    background-color: var(--hz-bg-content);
    border: 1px solid #E0E0DB;
}

/* Posts-Widget Excerpt: Lato, sekundaere Textfarbe */
.page-id-46 .elementor-post__excerpt {
    font-family: var(--hz-font-body);
    font-size: 14px;      /* bewusst kompakt — Cards-Kontext */
    color: var(--hz-text-gray);
    line-height: 1.5;
}

/* ── MEC Cards: Termin-Block im Excerpt (Post 46 Posts-Widget) ────────────── */
/* hundezeit_mec_excerpt_with_dates() in functions.php generiert dieses Markup */
.page-id-46 .elementor-post__excerpt .hz-event-card-dates {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hz-green-hauch);
}

.page-id-46 .elementor-post__excerpt .hz-event-card-dates__next {
    font-family: var(--hz-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hz-green);
}

.page-id-46 .elementor-post__excerpt .hz-event-card-dates__schedule {
    font-family: var(--hz-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--hz-text);
}

.page-id-46 .elementor-post__excerpt .hz-event-card-content {
    margin: 0;
}

/* ── Button-Angleichung: MEC-Buttons = Elementor-Button-Design ──────────────
   Warum: MEC rendert .mec-detail-button und .mec-load-more-button mit eigenem
   Styling (haeufig MEC-Akzentfarbe + anderer Radius/Padding). Kein Elementor-
   Picker fuer diese Buttons vorhanden.
   Ziel: identisches Aussehen wie Elementor-Buttons auf der Seite.
   ──────────────────────────────────────────────────────────────────────────── */
#hz_services a.mec-detail-button,
#hz_services a.mec-booking-button,
#hz_services a.mec-load-more-button {
    display: inline-block;
    background-color: var(--hz-green);
    color: var(--hz-white);
    font-family: var(--hz-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 4px;            /* var(--hz-radius-sm) Aequivalent */
    padding: 10px 20px;
    min-height: 44px;              /* WCAG Touch-Target */
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
}

#hz_services a.mec-detail-button:hover,
#hz_services a.mec-booking-button:hover,
#hz_services a.mec-load-more-button:hover {
    background-color: var(--hz-green-dark);
    color: var(--hz-white);
    text-decoration: none;
    transform: translateY(-1px);
}

#hz_services a.mec-detail-button:focus-visible,
#hz_services a.mec-booking-button:focus-visible,
#hz_services a.mec-load-more-button:focus-visible {
    outline: 2px solid var(--hz-green);
    outline-offset: 2px;
}

/* Load-More: volle Breite als Block — MEC rendert ihn typisch als eigene Zeile */
#hz_services .mec-load-more-button {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1em;
}

/* ── MEC Carousel Navigation (OWL Carousel Pfeile) ─────────────────────────
   Warum CSS: OWL Carousel generiert .owl-nav Buttons per JS. Kein Elementor-
   oder MEC-Setting fuer Position/Farbe/Groesse. Standard-Position ist weit
   ausserhalb des Containers, ueberlappt mit Seiteninhalt.
   Scope: #hz_services (nur Startseite), nicht Kalender-Seite.
   ──────────────────────────────────────────────────────────────────────────── */
#hz_services .mec-skin-carousel-container .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 4px;
    z-index: 2;
}

/* MEC setzt .mec-wrap .mec-event-carousel-type2 .owl-prev/next mit
   background-color: transparent !important und position: absolute !important.
   Ausserdem right: -60px / left: -60px. Deshalb !important noetig. */
#hz_services .mec-wrap .mec-event-carousel-type2 .owl-prev,
#hz_services .mec-wrap .mec-event-carousel-type2 .owl-next {
    pointer-events: auto;
    background-color: rgba(74, 107, 76, 0.8) !important; /* Fallback fuer aeltere Browser */
    background-color: color-mix(in srgb, var(--hz-green) 80%, transparent) !important;
    color: var(--hz-bg);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    cursor: pointer;
}

#hz_services .mec-event-carousel-type2 .owl-next {
    right: -20px;
}

#hz_services .mec-event-carousel-type2 .owl-prev {
    left: -15px;
}

/* Icon: MEC setzt font-size: 40px + color: #282828 */
#hz_services .mec-wrap .mec-event-carousel-type2 .owl-prev i,
#hz_services .mec-wrap .mec-event-carousel-type2 .owl-next i {
    font-size: 15px;
    color: var(--hz-bg);
    line-height: 1;
}

#hz_services .mec-wrap .mec-event-carousel-type2 .owl-prev:hover,
#hz_services .mec-wrap .mec-event-carousel-type2 .owl-next:hover {
    background-color: var(--hz-green) !important;
}

/* Carousel braucht position:relative fuer absolute Nav-Positionierung */
#hz_services .mec-skin-carousel-container {
    position: relative;
}

/* ==========================================================================
   Cards Foto-Höhen
   MEC classic (links): CSS max-height (MEC hat kein natives Crop-Setting).
   Kurse (rechts): native Elementor Bildproportion (cards_item_ratio 0.37).
   ========================================================================== */

/* MEC classic (linke Karte): Foto auf max. 180px begrenzen (kein natives Setting in MEC) */
#hz_services .mec-event-grid-classic .mec-event-image img {
    max-height: 180px;
    object-fit: cover;
    width: 100%;
}

/* Kurse-Karte Foto-Höhe: gesteuert via Elementor Posts-Widget → Bildproportion (cards_item_ratio).
   Aktueller Wert: 0.37 (37% der Kartenbreite = ~160px bei 430px Breite).
   Kein CSS nötig — native Elementor-Einstellung via DB (Post 2, Widget #hz_kurse_posts).
   CSS-ID stabil gesetzt (Session 15): _element_id=hz_kurse_posts → #hz_kurse_posts im DOM. */

/* ==========================================================================
   Spruch / Zitat — max-width für Lesbarkeit
   ========================================================================== */
.hz-spruch {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Slider — Sicherheits-Obergrenze (Elementor slides_height steuert die Höhe).
   700px als Fallback-Maximum, damit ein versehentlicher Wert den Viewport
   nicht sprengt. Die Kundin steuert die tatsächliche Höhe im Elementor-Editor.
   ========================================================================== */
.elementor-widget-slides .elementor-slides,
.elementor-widget-slides .swiper-container,
.elementor-widget-slides .swiper {
    max-height: 700px;
}

.elementor-widget-slides .swiper-slide-bg {
    object-fit: cover;
}

/* ==========================================================================
   Karten / Boxen (Elementor)
   ========================================================================== */
.elementor-widget-container .elementor-post,
.elementor-widget-container .elementor-posts-container article {
    background: var(--hz-white);
    border: 1px solid var(--hz-line);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(44, 44, 42, 0.06),
                0 4px 12px rgba(44, 44, 42, 0.04);
}

/* ==========================================================================
   Zitate / Hervorhebungen
   ========================================================================== */
blockquote {
    border-left: 3px solid var(--hz-sand);
    padding-left: 18px;
    font-style: italic;
}

/* ==========================================================================
   Formulare (Contact Form 7) — Redesign "Wald & Leinen"
   Scope: Alle Selektoren beginnen mit .wpcf7-form (CF7-Freigabe: FREIGABE)
   Keine globalen input/button-Selektoren — nur CF7-spezifisch.
   Gilt fuer: Post 48 (Kontakt, ID 360), Post 357 (Anmeldung, ID 362, Void Widget),
              Post 577 (Anamnese, ID 579, Gutenberg Shortcode).
   WCAG/EAA: Alle Kontraste geprueft (siehe plan-plugin-styling.md).
   ========================================================================== */

/* Wrapper — Font-Vererbung */
.wpcf7 {
    font-family: var(--hz-font-body);
}

/* ── Felder-Grundstil ──────────────────────────────────────────────────── */
/* Warum CSS: Elementor Theme Style Form Fields deckt CF7 nicht vollstaendig
   ab (Hover-State, Fehler-State, spezifische CF7-Klassen fehlen im Panel). */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
    font-family: var(--hz-font-body);
    font-size: 1rem;
    color: var(--hz-text, #333331);           /* Kontrast 14.7:1 AAA auf #FFFFFF */
    background-color: var(--hz-white, #FFFFFF);
    border: 1px solid var(--hz-line, #D5CEC4);
    border-radius: 4px;
    padding: 10px 14px;
    min-height: 44px;                          /* Touch-Target WCAG 2.5.5 */
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── Hover-State ────────────────────────────────────────────────────────── */
.wpcf7-form input[type="text"]:hover,
.wpcf7-form input[type="email"]:hover,
.wpcf7-form input[type="tel"]:hover,
.wpcf7-form input[type="url"]:hover,
.wpcf7-form input[type="number"]:hover,
.wpcf7-form input[type="date"]:hover,
.wpcf7-form textarea:hover,
.wpcf7-form select:hover {
    border-color: #C8B99A;                     /* Sand — dezenter Hover-Hinweis */
}

/* ── Fokus-State (WCAG 2.4.7 / 2.4.11) ──────────────────────────────── */
/* Fokus-Ring: 2px solid #4A6B4C, Kontrast 5.1:1 AA auf #FFFFFF */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: var(--hz-green, #4A6B4C);
    outline: 2px solid var(--hz-green, #4A6B4C);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(74, 107, 76, 0.15);
}

/* ── Textarea Mindesthoehe ──────────────────────────────────────────── */
.wpcf7-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* ── Nummer-Feld (mobil responsive, war 100px fix) ─────────────────── */
.wpcf7-form input[type="number"] {
    width: 100%;
    max-width: 160px;
}

/* ── Labels ─────────────────────────────────────────────────────────── */
/* Kontrast #6B6B67 auf #FFFFFF = 6.5:1 AA */
.wpcf7-form label,
.wpcf7-form .wpcf7-list-item-label {
    font-family: var(--hz-font-body);
    font-size: 0.875rem;                       /* 14px */
    color: var(--hz-text-gray, #6B6B67);
    display: block;
    margin-bottom: 4px;
    font-weight: 400;
}

/* ── Placeholder-Text ───────────────────────────────────────────────── */
/* Dezent — Labels sind immer sichtbar (WCAG 1.3.5, kein Label-Ersatz) */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--hz-line, #D5CEC4);
    opacity: 1;
}

/* ── Abstands-Wrapper fuer Label + Feld ─────────────────────────────── */
/* CF7 gibt jedem Feld einen <span class="wpcf7-form-control-wrap"> */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 16px;
}

/* ── Fieldset / Abschnitts-Trenner in laengeren Formularen ─────────── */
/* Post 577 (Anamnese) und Post 362 nutzen <h2> als Abschnitts-Trenner */
.wpcf7-form h2 {
    font-family: var(--hz-font-heading);
    font-size: 1.4rem;
    color: var(--hz-green, #4A6B4C);           /* Kontrast 5.1:1 AA auf #FFFFFF */
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hz-line, #D5CEC4);
}

/* ── Submit-Button ──────────────────────────────────────────────────── */
/* BG #4A6B4C / Text #FFFFFF = Kontrast 5.1:1 AA.
   Mindesthoehe 48px (Touch-Target >= 44px gemaess WCAG 2.5.5).
   Basisstil erbt vom globalen button[type="submit"]-Selektor weiter oben.
   Hier nur CF7-spezifische Ergaenzungen (min-height explizit da Void Widget
   manchmal den globalen Selektor nicht trifft). */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type="submit"] {
    min-height: 48px;
    min-width: 120px;
    cursor: pointer;
    font-family: var(--hz-font-body);
    font-size: 1rem;
    letter-spacing: 0.05em;
    /* Farben erben vom globalen .wpcf7-submit Selektor (Buttons-Block oben) */
}

/* ── Validierungs-Fehler (WCAG 1.3.1, 3.3.1) ──────────────────────── */
/* Fehler-Rahmen: #8B3A3A (warmes Bordeaux), Kontrast 5.8:1 AA auf #FFFFFF */
.wpcf7-form .wpcf7-not-valid {
    border-color: #8B3A3A;
    border-width: 2px;
}

/* Fehlermeldung unter dem Feld */
.wpcf7-form .wpcf7-not-valid-tip {
    color: #8B3A3A;                            /* 5.8:1 AA auf #FFFFFF */
    font-size: 0.8125rem;                      /* 13px */
    font-family: var(--hz-font-body);
    margin-top: 4px;
    display: block;
}

/* ── Antwort-Block (Erfolg / allgemeiner Fehler) ───────────────────── */
/* CF7 setzt role="alert" automatisch — Screenreader lesen den Block vor */
.wpcf7-form .wpcf7-response-output {
    margin-top: 1.5rem;
    padding: 14px 18px 14px 22px;
    border-radius: 4px;
    font-family: var(--hz-font-body);
    font-size: 0.9375rem;                      /* 15px */
    border-left-width: 3px;
    border-left-style: solid;
}

/* Erfolgs-Meldung */
.wpcf7-form.sent .wpcf7-response-output {
    background-color: #EDF2ED;                 /* --hz-green-hauch */
    border-left-color: var(--hz-green, #4A6B4C);
    color: var(--hz-text, #333331);            /* Kontrast ~13:1 AAA auf #EDF2ED */
}

/* Fehler-Meldung (Validierung schlaegt fehl) */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
    background-color: #FDF0F0;
    border-left-color: #8B3A3A;
    color: var(--hz-text, #333331);
}

/* ── Checkboxen und Radio-Buttons ───────────────────────────────────── */
/* Nur Abstandskorrektur — Styling der nativen Controls bleibt Browser-Standard
   (beste Barrierefreiheit, keine Custom-Controls noetig) */
.wpcf7-form .wpcf7-list-item {
    display: block;
    margin-bottom: 8px;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
    width: auto;
    min-height: auto;
    margin-right: 8px;
    vertical-align: middle;
    accent-color: var(--hz-green, #4A6B4C);   /* Checkmark/Radio-Punkt in Waldgruen */
}

/* ── Acceptance-Felder (Einverstaendnis / DSGVO) ────────────────────── */
/* CF7 [acceptance] rendert als Checkbox mit Wrapper .wpcf7-acceptance.
   Beide Formulare (ID 362, 579) nutzen Acceptance-Tags fuer DSGVO + AGB.
   Darstellung: horizontale Zeile (Checkbox links, Text rechts).
   Hintergrund: dezent Sand-Hauch um Wichtigkeit zu signalisieren. */
.wpcf7-form .wpcf7-acceptance {
    display: block;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: #FAF7F2;               /* Leinen-Hauch — dezent */
    border: 1px solid var(--hz-line, #D5CEC4);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 0;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;                         /* Optisch zu Textzeile ausrichten */
    margin-right: 0;                         /* gap uebernimmt Abstand */
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 0.8125rem;                    /* 13px — Fliesstext, kein Heading */
    color: var(--hz-text-gray, #6B6B67);
    display: inline;                         /* Inline damit Zeilenumbruch korrekt */
    margin-bottom: 0;
}

/* ── Formular-Trennlinien <hr> (Anamnese-Formular) ─────────────────── */
/* Post 577 (ID 579) verwendet <hr> als Abschnitts-Trenner zwischen Sektionen.
   Kontrast: #D5CEC4 auf #FFFFFF = 2.4:1 — dekorativ, kein Inhalt (WCAG Ausnahme). */
.wpcf7-form hr {
    border: none;
    border-top: 1px solid var(--hz-line, #D5CEC4);
    margin: 2rem 0 1.5rem;
}

/* ── Mobile Anpassungen ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wpcf7-form input[type="number"] {
        max-width: 100%;
    }

    .wpcf7-form .wpcf7-submit,
    .wpcf7-form input[type="submit"] {
        width: 100%;                           /* Volle Breite auf Mobile */
    }
}

/* ==========================================================================
   Kommentare
   ========================================================================== */
.comment-content {
    padding: 10px;
    border: 1px dotted var(--hz-line);
}

/* ==========================================================================
   Team-Bild — Höhe begrenzen, oben/unten croppen + warmer Schatten
   Warum box-shadow per CSS: Elementor hat kein box-shadow-Feld fuer Image Widget
   ========================================================================== */
#hz_team_img img {
    max-height: 340px;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(44, 44, 42, 0.10),
                0 6px 16px rgba(44, 44, 42, 0.07);
}


/* ==========================================================================
   Karten-Hover — Services-Karten (CTA Cards in #hz_services)
   Warum CSS: Elementor hat kein hover-transform-Feld fuer Inner Sections
   Struktur: Section > Wrapper-Column > Inner Sections (nach Umbau zu 2 Zeilen)
   ========================================================================== */
#hz_services .elementor-inner-section {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#hz_services .elementor-inner-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(44, 44, 42, 0.10),
                0 8px 24px rgba(44, 44, 42, 0.06);
}

/* ==========================================================================
   CTA-Button — horizontales Layout (Bild links, Text rechts)
   Warum CSS: Elementor hat kein Horizontal-Layout-Setting fuer Column Widgets.
   Elementor-Basis setzt width:100% + flex-wrap:wrap auf Widgets → jedes Widget
   nimmt volle Zeile ein. Fix: nowrap + width:auto mit erhoehter Spezifitaet.
   Abgestimmt: @css-specialist, @elementor-specialist, @designer, @qa-specialist
   ========================================================================== */
/* Selektoren nutzen _element_id (#hz_cta) statt auto-generierter Elementor-ID.
   Warum !important: Elementor setzt width:100% + flex-wrap:wrap inline auf
   .elementor-widget-wrap. Ohne !important kein Override moeglich. */
.elementor-2 .elementor-element#hz_cta > .elementor-widget-wrap {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Widgets im CTA: nicht volle Breite, sondern auto (Inhalt bestimmt) */
.elementor-2 .elementor-element#hz_cta > .elementor-widget-wrap > .elementor-element {
    width: auto !important;
    flex-shrink: 0;
}

/* Link-Farbe im CTA wird im Elementor-Widget direkt gesetzt (nicht per CSS).
   Dieser Fallback greift nur wenn das Widget-Setting fehlt. */
#hz_cta .elementor-heading-title a,
#hz_cta .elementor-heading-title a:hover {
    color: #FFFFFF;
}

/* Mobile: CTA vertikal stapeln wenn zu eng */
@media (max-width: 480px) {
    .elementor-2 .elementor-element#hz_cta > .elementor-widget-wrap {
        flex-wrap: wrap !important;
        gap: 8px;
    }
}

/* ==========================================================================
   Footer — dezenter Rahmen (Farben via GP/DB)
   ========================================================================== */
#footer-widgets {
    border-top: 3px solid var(--hz-sand);
}

#footer-widgets .widget-title {
    letter-spacing: 0.05em;
}



/* footer-widget-2 text-align entfernt — bei 3 Spalten alle linksbündig */

/* Social Icons im Footer — Farbe auf dunklem Hintergrund */
#footer-widgets .wp-block-social-links .wp-social-link svg {
    fill: #F4F2EF;
}

#footer-widgets .wp-block-social-links .wp-social-link:hover svg {
    fill: var(--hz-sand);
}

.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-info .footer-bar-active a {
    margin: 0 8px;
}

.site-info a + a {
    margin-left: 8px;
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */
.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
    float: left;
}

@media (max-width: 768px) {
    /* Mobile-Header: !important nötig da GP inline display:none setzt
       und diese Regeln den GP Mobile-Header-Modus aktivieren. */
    #mobile-header {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .site-logo.mobile-header-logo {
        display: flex;
        align-items: center;
        order: 1;
        margin-right: auto;
        margin-left: 10px;
        height: 100px;
    }

    .main-navigation.mobile-header-navigation {
        display: none;
        text-align: center;
        padding: 25px 0 0 0;
    }

    /* Mobile-Logo: Feste Höhe weil GP Customizer keine separate Mobile-Logo-Höhe
       bietet und das Logo (head26.JPG) sonst unkontrolliert skaliert.
       !important nötig da GP inline-Styles setzt. Bei Logo-Wechsel hier anpassen. */
    .site-logo.mobile-header-logo img {
        position: relative;
        vertical-align: middle;
        padding: 5px 10px 10px 0px;
        margin: 15px 10px 10px 0px;
        display: block;
        box-sizing: border-box;
        transition: height .3s ease;
        max-width: 100%;
        width: auto !important;
        height: 140px !important;
    }

    /* Eingefasster Look: schmaler auf Mobile */
    .one-container .inside-article {
        margin-left: 8px;
        margin-right: 8px;
        padding: 20px;
    }

    /* Footer: alle Spalten linksbündig (Mobile) */

    /* Slider: Höhe reduzieren */
    .elementor-widget-slides .elementor-slides,
    .elementor-widget-slides .swiper-container,
    .elementor-widget-slides .swiper {
        max-height: 280px;
    }

    /* Formulare: Number-Input — redundante Regel entfernt (korrekt in CF7-Block) */
}

/* ==========================================================================
   Kurs-Karten (Gutenberg Block)
   ========================================================================== */
.kurs-card {
    font-family: var(--hz-font-body);
    color: var(--hz-text);
}

/* !important nötig: WP Block-Editor setzt eigene margin inline auf .wp-block-post-title */
.kurs-card .wp-block-post-title {
    margin: 10px 0 6px !important;
    line-height: 1.15;
}

.kurs-card .wp-block-post-title a {
    font-family: var(--hz-font-heading);
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 38px);
    letter-spacing: 0;
    /* !important nötig: Elementor/Kit erbt globale Link-Farbe, die hier
       bewusst auf Waldgrün gesetzt sein muss (Brand-Konsistenz in Kurs-Karten) */
    color: var(--hz-green) !important;
    text-decoration: none;
}

.kurs-card .wp-block-post-title a:hover {
    text-decoration: underline;
}

.kurs-body {
    font-family: var(--hz-font-body);
}

/* ==========================================================================
   Barrierefreiheit — Focus-Styles (Keyboard-Navigation)
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--hz-green);   /* #4A6B4C — 6.00:1 auf Weiss (WCAG 2.4.11) */
    outline-offset: 2px;
}

/* Auf dunklen Hintergründen (Nav, Footer, CTA, Spruch): hellerer Focus-Ring */
#site-navigation :focus-visible,
#footer-widgets :focus-visible,
.site-info :focus-visible,
#hz_cta :focus-visible,
.elementor-section[style*="3A5640"] :focus-visible {
    outline-color: #F4F2EF;
}

/* ==========================================================================
   Barrierefreiheit — Skip-Link (WCAG 2.4.1 Level A)
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--hz-green);
    color: var(--hz-white, #FFFFFF);
    padding: 8px 16px;
    z-index: 99999;
    text-decoration: none;
    font-family: var(--hz-font-body);
    font-size: 14px;
}
.skip-link:focus {
    top: 0;
}

/* ==========================================================================
   Barrierefreiheit — Touch-Targets (min 44x44px)
   ========================================================================== */
.main-navigation a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

#footer-widgets a,
.site-info a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
}

/* Social-Buttons: eigene Dimensionen beibehalten (38x38, border-radius: 50%) */
#footer-widgets .hz-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-height: 38px;
    line-height: normal;
    border-radius: 50%;
}

.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.wpcf7-submit {
    min-height: 44px;
}

/* ==========================================================================
   Barrierefreiheit — Reduced Motion (WCAG SC 2.2.2 / 2.3.3)
   Respektiert die Systemeinstellung fuer Nutzer mit vestibulären Störungen.
   Deaktiviert alle CSS-Transitions und Animationen.
   Elementor Slider-Autoplay muss separat im Elementor-Editor geprueft werden.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   FooGallery + FooBox — Designsystem "Wald & Leinen"
   Plugin: FooGallery v3.1.13 + FooBox Image Lightbox v2.7.41
   Seite: Post 717 (Impressionen), Galerie: Post 716

   Was per DB gesetzt wurde (kein CSS noetig):
   - Spacing: 8px (default_spacing = "8")
   - Drop-Shadow: deaktiviert (default_drop_shadow = "")
   - Rounded Corners: deaktiviert (default_rounded_corners = "") — CSS setzt 2px
   - Border: deaktiviert (default_border_size = "")
   - Hover-Grayscale: deaktiviert (default_hover_effect_color = "")

   Was nur per CSS moeglich ist:
   - Grid-BG: #F5F4F0
   - Border-Radius: 2px (kein Admin-Setting fuer diesen Wert — Stufen: 0/5/10/15/50%)
   - Hover-Overlay: rgba(74,107,76,0.15) — Waldgruen-Hauch
   - Hover Icon: #FFFFFF
   - Hover Transition: 200ms ease + scale(1.02)
   - FooBox Lightbox-Overlay, -BG, Nav-Farben, Caption-Farbe

   Kontrastwerte (WCAG AA):
   - #C8B99A (Sand) auf #2C2C2A (Lightbox-BG) = 6.3:1 AA
   - #F4F2EF (Caption) auf #2C2C2A (Lightbox-BG) = 12:1 AAA
   ========================================================================== */

/* ── Galerie-Container: Grid-Hintergrund ─────────────────────────────── */
/* Warum CSS: FooGallery bietet kein BG-Color-Feld im Admin */
.foogallery {
    background-color: var(--hz-bg-content);        /* #F5F4F0 — Content-BG */
    border-radius: 4px;                             /* Rahmen-Abrundung aussen */
}

/* ── Thumbnail Border-Radius: 2px ───────────────────────────────────── */
/* Warum CSS: FooGallery bietet nur Stufen 0/5/10/15/50% — kein 2px */
/* Admin-Setting default_rounded_corners ist leer (kein Klassen-Radius),
   damit fg-round-small (5px) nicht gesetzt wird. CSS setzt exakt 2px. */
.foogallery .fg-item,
.foogallery .fg-item-inner {
    border-radius: 2px;
    overflow: hidden;                               /* Bild bleibt in Radius */
}

/* ── Hover-Effekt: Waldgruen-Overlay + scale(1.02) ──────────────────── */
/* Warum CSS: FooGallery-Admin-UI bietet Hover-Color nur als Preset-Klassen
   (z.B. fg-hover-grayscale). Das Waldgruen-Overlay ist kein natives Preset. */
/* Scope auf .fg-thumb (Link-Element) fuer praezise Overlay-Platzierung */
.foogallery .fg-thumb {
    position: relative;
    overflow: hidden;
    display: block;
}

/* Pseudo-Element als Waldgruen-Overlay */
.foogallery .fg-thumb::before {
    content: "";
    position: absolute;
    inset: 0;                                       /* top/right/bottom/left: 0 */
    background-color: rgba(74, 107, 76, 0.15);     /* Waldgruen-Hauch */
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: 1;
    pointer-events: none;
    border-radius: 2px;
}

.foogallery .fg-item:hover .fg-thumb::before,
.foogallery .fg-item.fg-item-hover .fg-thumb::before {
    opacity: 1;
}

/* Bild skaliert bei Hover: scale(1.02) */
.foogallery .fg-image {
    transition: transform 200ms ease;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.foogallery .fg-item:hover .fg-image,
.foogallery .fg-item.fg-item-hover .fg-image {
    transform: scale(1.02);
}

/* Hover-Icon: weiss (#FFFFFF) */
/* FooGallery setzt Hover-Icons per .fg-caption-inner::before — Farbe via color */
.foogallery .fg-caption-inner::before {
    color: #FFFFFF;                                 /* Lupe/Zoom-Icon weiss */
}

/* ── Caption: Theme-Farben ──────────────────────────────────────────── */
.foogallery .fg-caption {
    font-family: inherit;
}

.foogallery .fg-caption-title {
    color: var(--hz-text);                          /* #333331 */
    font-weight: 600;
}

.foogallery .fg-caption-desc {
    color: var(--hz-text-gray);                     /* #6B6B67 */
}

/* ── Tastatur-Fokus auf Thumbnails ──────────────────────────────────── */
/* Warum: FooGallery hat keinen eigenen Focus-Ring. Tab-Navigation prueft: */
.foogallery .fg-thumb:focus-visible {
    outline: 2px solid var(--hz-green);            /* #4A6B4C — 6.00:1 (WCAG 2.4.11) */
    outline-offset: 2px;
}

/* ==========================================================================
   FooBox Lightbox — Designsystem-Farben
   Plugin: FooBox Image Lightbox v2.7.41
   Warum CSS: FooBox FREE hat kein Custom-CSS-Feld im Admin (geprueft).
   FooBox PRO hat ein Custom-CSS-Feld — FREE-Version erfordert Child-Theme CSS.

   Kontrastwerte:
   - #C8B99A auf #2C2C2A = 6.3:1 AA (Close/Nav-Buttons)
   - #F4F2EF auf #2C2C2A = 12:1 AAA (Caption-Text)
   ========================================================================== */

/* ── Lightbox-Overlay: fast-opaques Dunkel ──────────────────────────── */
.fbx-modal {
    background-color: rgba(44, 42, 42, 0.92);      /* Vorgabe: rgba(44,42,42,0.92) */
}

/* ── Lightbox-Hintergrund hinter Bild ──────────────────────────────── */
.fbx-inner {
    background-color: #2C2C2A;                     /* Tiefdunkel — var(--hz-dark) */
    box-shadow: none;                              /* Kein zusaetzlicher Glow */
}

/* ── Navigation: Zurueck / Weiter / Schliessen ──────────────────────── */
/* Farbe: #C8B99A (Sand) — 6.3:1 AA auf #2C2C2A */
.fbx-prev,
.fbx-next,
.fbx-close {
    color: var(--hz-sand);                         /* #C8B99A */
}

.fbx-prev:hover,
.fbx-next:hover,
.fbx-close:hover {
    color: var(--hz-white);                        /* Weiss beim Hover */
    opacity: 0.9;
}

/* Focus-Ring auf Lightbox-Buttons (Tastatur-Navigation) */
.fbx-prev:focus-visible,
.fbx-next:focus-visible,
.fbx-close:focus-visible {
    outline: 2px solid var(--hz-green);   /* #4A6B4C — 6.00:1 (WCAG 2.4.11) */
    outline-offset: 2px;
}

/* ── Bild-Zaehler ────────────────────────────────────────────────────── */
.fbx-count {
    color: var(--hz-sand);                         /* #C8B99A — lesbar auf Dunkel */
}

/* ── Caption ─────────────────────────────────────────────────────────── */
/* Farbe: #F4F2EF — 12:1 AAA auf #2C2C2A */
.fbx-caption {
    font-family: inherit;
    color: #F4F2EF;                                /* var(--hz-text)-Warm-Variante */
}

.fbx-caption-title {
    font-family: inherit;
    color: #F4F2EF;
    font-weight: 600;
}

.fbx-caption-desc {
    color: #F4F2EF;
    opacity: 0.85;
}

/* ── Lade-Indikator: Designsystem-Gruen ─────────────────────────────── */
.fbx-loader {
    border-color: var(--hz-sand) transparent transparent transparent;
}


/* ==========================================================================
   YOAST SEO BREADCRUMBS
   Selektor: .hundezeit-breadcrumb (Custom-Wrapper aus functions.php)
   Platzierung: generate_before_content Hook (unter Header, vor Content)
   Startseite: via is_front_page() ausgeblendet (PHP, kein CSS-Hide)
   Farben: Designvorgabe Block D (Session 16)
     Links    #4A6B4C — 4.6:1 AA auf #F5F4F0
     Hover    #3A5640 — 6.6:1 AA auf #F5F4F0
     Aktuelle Seite  #333331 — 11.7:1 AAA auf #F5F4F0
     Trenner  #C8B99A (Sand)
   Font: Lato 13px
   ========================================================================== */

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.hundezeit-breadcrumb {
    padding: 8px 0 4px;
    font-family: var(--hz-font-body, 'Lato', sans-serif);
    font-size: 0.8125rem;           /* 13px */
    line-height: 1.5;
}

/* ── Links ───────────────────────────────────────────────────────────── */
.hundezeit-breadcrumb a {
    color: var(--hz-green, #4A6B4C); /* 4.6:1 AA auf Content-BG #F5F4F0 */
    text-decoration: none;
}

.hundezeit-breadcrumb a:hover,
.hundezeit-breadcrumb a:focus-visible {
    color: var(--hz-green-dark, #3A5640); /* 6.6:1 AA */
    text-decoration: underline;
}

/* ── Aktuelle Seite (letztes span-Element) ───────────────────────────── */
/* Yoast rendert die aktuelle Seite als <span class="breadcrumb_last"> */
.hundezeit-breadcrumb .breadcrumb_last {
    color: var(--hz-text, #333331);  /* 11.7:1 AAA */
    font-weight: 400;
}

/* ── Trenner ─────────────────────────────────────────────────────────── */
/* Yoast rendert Trenner als <span class="breadcrumb-separator"> */
.hundezeit-breadcrumb .breadcrumb-separator {
    color: var(--hz-sand, #C8B99A);
    margin: 0 0.3em;
    /* aria-hidden gehoert ins HTML-Template, nicht ins CSS (P2, noch offen) */
}

/* ── Reduced Motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hundezeit-breadcrumb a {
        transition: none;
    }
}

/* ==========================================================================
   Single-Post-Seiten (Post-Typ "post")
   Selektor: .single-post (WP-Body-Klasse, NUR fuer post-type "post")
   Warum nicht .single: .single trifft auch mec-events, event_listing etc.
   Warum CSS: GP hat keine max-height/object-fit/Lesebreite fuer Single-Posts.
   ========================================================================== */

/* Featured Image: Groesse begrenzen + ins Designsystem einbetten */
/* Selektor: .featured-image (GP-Klasse) — NICHT .post-image (existiert nicht in GP Free) */
/* object-position: center center — neutraler Default, kein Abschneiden wichtiger Bildbereiche */
.single-post .featured-image img {
    max-height: 400px;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(44, 44, 42, 0.06),
                0 4px 12px rgba(44, 44, 42, 0.04);
    display: block;
}

/* Lesespaltbreite: 720px zentriert statt ~1000px volle Containerbreite */
/* Warum CSS: kein GP-Feld fuer single_post Lesebreite */
.single-post .entry-content {
    max-width: 720px;
    margin-inline: auto;
}

/* Meta-Zeile (Datum, Autor): Designsystem-Styling */
/* #6B6B67 = --hz-text-gray, WCAG AA 4.54:1 auf #F5F4F0 */
.single-post .entry-header .entry-meta,
.single-post .entry-header .entry-meta a {
    font-size: 0.875rem;
    color: var(--hz-text-gray);
}

.single-post .entry-header .entry-meta a:hover {
    color: var(--hz-green);
    text-decoration: underline;
}

/* Gutenberg-Trenner: Designsystem-Linie statt Browser-Default */
/* Warum CSS: wp-block-separator ist Gutenberg-Block, kein Elementor-Feld */
.single-post .entry-content .wp-block-separator {
    border: none;
    border-top: 1px solid var(--hz-line);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Layout: Reihenfolge Breadcrumb → Titel/Meta → Bild → Content → Footer-Meta
   Warum CSS: GP Free liest single_post_image_position nicht aus (nur GP Premium).
   Scope .single-post: NUR Post-Typ "post" (sicher per regression.md Session 18).
   Fallback order:99 — unbekannte kuenftige Kinder landen sicher am Ende.
   Kritiker-Auflage: .hundezeit-breadcrumb bekommt order:0, da sie via
   generate_before_content (Priority 5) als erstes Kind eingefuegt wird. */
.single-post .inside-article {
    display: flex;
    flex-direction: column;
}

/* Fallback: alle unbekannten direkten Kinder ans Ende */
.single-post .inside-article > * {
    order: 99;
}

.single-post .hundezeit-breadcrumb {
    order: 0;   /* Breadcrumbs ganz oben */
}

.single-post .entry-header {
    order: 1;   /* Titel + Meta-Zeile */
}

/* Bild: max-width 720px = gleiche Breite wie Lesebereich, zentriert */
/* Warum nicht volle Breite: User-Entscheidung Session 18 */
.single-post .featured-image {
    order: 2;
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.single-post .entry-content {
    order: 3;   /* Content nach Bild */
}

/* entry-meta = Footer mit Kategorien, Tags, Post-Navigation */
.single-post .entry-meta {
    order: 4;   /* Footer-Meta nach Content */
}

/* H1-Titelgroesse: 2rem (32px) statt globalem ~42px — angemessen fuer 720px Lesebreite */
/* Kein Konflikt: .entry-title auf Elementor-Pages bereits display:none (Session 10) */
.single-post .entry-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.25em;
}

/* ==========================================================================
   Workshops-Seite (Post 627) — Card-Reihen gleichmaessige Ausrichtung
   Scope: .page-id-627 (nur diese Seite, kein globaler Eingriff)

   Layout: Separate Widgets pro Card (Image + H3 + Text + Button).
   Flex-Column auf der widget-wrap drueckt Buttons nach unten.

   Kein Farbeingriff — alle Farben kommen aus Elementor.
   Kein !important — Spezifizitaet genuegt durch .page-id-627-Scope.

   Getestet:   2026-03-13
   Variablen:  --hz-radius-sm (4px)
   ========================================================================== */

/* ── Column als Flex-Container: Button sinkt ans Ende ── */
.page-id-627 .elementor-column > .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
}

/* ── Text-Widget nimmt restlichen Raum, drueckt Button nach unten ── */
.page-id-627 .elementor-widget-text-editor {
    flex-grow: 1;
}

/* ── Bilder: feste Hoehe + object-fit:cover fuer einheitliche Reihen ── */
/* Warum CSS: Elementor Image-Widget hat kein Feld fuer feste Hoehe mit object-fit */
.page-id-627 .elementor-widget-image img {
    height: 210px;
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--hz-radius-sm, 4px);
    background-color: #F4F2EF;
}

/* ── H3-Titel: min-height damit Textbereich auf gleicher Hoehe startet ── */
/* Warum CSS: Elementor Heading-Widget hat kein min-height-Feld */
.page-id-627 .elementor-widget-heading .elementor-heading-title {
    min-height: 2.8em;
}

/* ── Abstand H3 → Text reduzieren ── */
.page-id-627 .elementor-widget-heading + .elementor-widget-text-editor {
    margin-top: -20px;
}
.page-id-627 .elementor-widget-heading {
    margin-bottom: 0;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-id-627 .elementor-widget-image img {
        height: 180px;
    }

    .page-id-627 .elementor-widget-heading .elementor-heading-title {
        min-height: auto;
    }
}

/* ==========================================================================
   Angebots-Unterseiten — Posts-Widget Cards-Styling
   Scope: .page-id-2126, .page-id-2124, .page-id-2130, .page-id-2128, .page-id-2132
   (Gruppen, Verhaltensberatung, Beschaeftigung, Fuehrerschein, Events)

   Layout: Elementor Posts-Widget mit Cards-Skin — dynamische Beitraege.
   Farben kommen aus dem Widget-Panel (bereits gesetzt).
   CSS nur fuer: Bildhoehe, Schatten, Hover, Radius.

   Getestet:   2026-03-13
   Variablen:  --hz-radius-sm (4px), --hz-shadow-card
   ========================================================================== */

.page-id-2126 .elementor-posts--skin-cards article,
.page-id-2124 .elementor-posts--skin-cards article,
.page-id-2130 .elementor-posts--skin-cards article,
.page-id-2128 .elementor-posts--skin-cards article,
.page-id-2132 .elementor-posts--skin-cards article {
    box-shadow: 0 2px 8px rgba(44, 44, 42, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: var(--hz-radius-sm, 4px);
    overflow: hidden;
}

.page-id-2126 .elementor-posts--skin-cards article:hover,
.page-id-2124 .elementor-posts--skin-cards article:hover,
.page-id-2130 .elementor-posts--skin-cards article:hover,
.page-id-2128 .elementor-posts--skin-cards article:hover,
.page-id-2132 .elementor-posts--skin-cards article:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(44, 44, 42, 0.15);
}

/* ── Card-Bilder: feste Hoehe + object-fit ── */
.page-id-2126 .elementor-posts--skin-cards .elementor-post__thumbnail img,
.page-id-2124 .elementor-posts--skin-cards .elementor-post__thumbnail img,
.page-id-2130 .elementor-posts--skin-cards .elementor-post__thumbnail img,
.page-id-2128 .elementor-posts--skin-cards .elementor-post__thumbnail img,
.page-id-2132 .elementor-posts--skin-cards .elementor-post__thumbnail img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* ── Card-Inhalt: gleiche Hoehe durch flex ── */
.page-id-2126 .elementor-posts--skin-cards .elementor-post__card,
.page-id-2124 .elementor-posts--skin-cards .elementor-post__card,
.page-id-2130 .elementor-posts--skin-cards .elementor-post__card,
.page-id-2128 .elementor-posts--skin-cards .elementor-post__card,
.page-id-2132 .elementor-posts--skin-cards .elementor-post__card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-id-2126 .elementor-posts--skin-cards .elementor-post__text,
.page-id-2124 .elementor-posts--skin-cards .elementor-post__text,
.page-id-2130 .elementor-posts--skin-cards .elementor-post__text,
.page-id-2128 .elementor-posts--skin-cards .elementor-post__text,
.page-id-2132 .elementor-posts--skin-cards .elementor-post__text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.page-id-2126 .elementor-posts--skin-cards .elementor-post__excerpt,
.page-id-2124 .elementor-posts--skin-cards .elementor-post__excerpt,
.page-id-2130 .elementor-posts--skin-cards .elementor-post__excerpt,
.page-id-2128 .elementor-posts--skin-cards .elementor-post__excerpt,
.page-id-2132 .elementor-posts--skin-cards .elementor-post__excerpt {
    flex-grow: 1;
}

/* ── "Mehr erfahren" Link: Button-artig ── */
.page-id-2126 .elementor-posts--skin-cards .elementor-post__read-more,
.page-id-2124 .elementor-posts--skin-cards .elementor-post__read-more,
.page-id-2130 .elementor-posts--skin-cards .elementor-post__read-more,
.page-id-2128 .elementor-posts--skin-cards .elementor-post__read-more,
.page-id-2132 .elementor-posts--skin-cards .elementor-post__read-more {
    display: inline-block;
    padding: 6px 16px;
    background: #EDF2ED;
    border-radius: var(--hz-radius-sm, 4px);
    transition: background 0.2s ease;
    align-self: flex-start;
    margin-top: 8px;
}

.page-id-2126 .elementor-posts--skin-cards .elementor-post__read-more:hover,
.page-id-2124 .elementor-posts--skin-cards .elementor-post__read-more:hover,
.page-id-2130 .elementor-posts--skin-cards .elementor-post__read-more:hover,
.page-id-2128 .elementor-posts--skin-cards .elementor-post__read-more:hover,
.page-id-2132 .elementor-posts--skin-cards .elementor-post__read-more:hover {
    background: #3A5640;
    color: #FFFFFF;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .page-id-2126 .elementor-posts--skin-cards .elementor-post__thumbnail img,
    .page-id-2124 .elementor-posts--skin-cards .elementor-post__thumbnail img,
    .page-id-2130 .elementor-posts--skin-cards .elementor-post__thumbnail img,
    .page-id-2128 .elementor-posts--skin-cards .elementor-post__thumbnail img,
    .page-id-2132 .elementor-posts--skin-cards .elementor-post__thumbnail img {
        height: 180px;
    }
}

/* ==========================================================================
   Uebersichtsseite "Unser Angebot" (Post 4482)
   Scope: .page-id-4482

   Layout: Anker-Sektionen mit Bild + Text + Button, abwechselnde BGs.
   Sprungnavigation oben.

   Getestet:   2026-03-13
   ========================================================================== */

/* ── Sektions-Bilder: feste Hoehe + abgerundete Ecken ── */
.page-id-4482 .elementor-widget-image img {
    height: 240px;
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--hz-radius-sm, 4px);
}

/* ── Sprungnavigation: buttons eng zusammen ── */
.page-id-4482 .elementor-section:nth-child(2) .elementor-widget-button {
    margin-bottom: 0;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .page-id-4482 .elementor-widget-image img {
        height: 180px;
    }
}

/* ==========================================================================
   Post 46 Mobile — Horizontal Swipe Carousel (Pattern 3)
   Widget-ID: d18d8b95 (Nested Accordion, hide_desktop/hide_tablet)
   Scope: .page-id-46 — kein globaler Eingriff

   Konzept: Auf Mobile werden alle Akkordeon-Panels permanent geoeffnet (per JS).
   Die <summary> Elemente dienen als Kategorie-Headings (kein Toggle mehr).
   Posts-Widget-Grids werden zu horizontalen Scroll-Strips umgebaut.
   JS (functions.php) setzt details[open] und erstellt Scroll-Indicator-Dots.

   Kritiker-Review: AUFLAGE (PM-001 bis PM-009), alle P1 adressiert:
   - PM-002: Bestehender Akkordeon-JS ersetzt (kein zweiter Hook)
   - PM-003: Grid-to-Flex explizit, width:100% ueberschrieben
   - PM-008: JS nutzt matchMedia (CSS allein reicht nicht)

   DB-First: Padding (eb7b474e), Icon (d18d8b95), Schriftgroessen → Elementor DB
   Late-Injection: Flex-Override → functions.php wp_head Priority 999

   Breakpoint: max-width 767px
   Variablen:  --hz-green, --hz-sand, --hz-line, --hz-font-heading
   ========================================================================== */
@media (max-width: 768px) {

    /* ── 0b. Padding: jetzt per Elementor DB (eb7b474e padding_mobile) ── */

    /* ── 1. Summary als Kategorie-Heading (kein Toggle) ── */
    /* Pro-Lizenz generiert kein CSS fuer Accordion-Titel — Farbe/Font hier setzen.
       pointer-events:none verhindert Tap (PM-009: kein irreführendes UI) */
    .page-id-46 .e-n-accordion-item-title {
        pointer-events: none;
        cursor: default;
        list-style: none;
        font-family: var(--hz-font-heading);
        font-weight: 400;
        font-size: 20px;
        color: var(--hz-green);
        padding: 16px 8px 8px;
        border-bottom: 2px solid var(--hz-sand);
        margin-bottom: 8px;
    }

    /* WebKit: Dreieck-Marker entfernen */
    .page-id-46 .e-n-accordion-item-title::-webkit-details-marker {
        display: none;
    }

    /* Kein border-left mehr (war Akkordeon-Aktiv-Indikator) */
    .page-id-46 .e-n-accordion-item[open] > .e-n-accordion-item-title {
        border-left: none;
    }

    /* ── 1b. Tab-Titel: Schrift + Farbe (Pro-Lizenz generiert kein CSS) ── */
    .page-id-46 .e-n-tab-title {
        font-family: var(--hz-font-heading);
        font-weight: 400;
        color: var(--hz-green);
    }

    .page-id-46 .e-n-tab-title[aria-selected="true"] {
        color: var(--hz-green-dark);
    }

    /* ── 2. Posts-Container: Scroll-Behavior ── */
    /* Flex-Override via Late-Injection (functions.php), hier nur Scroll-Behavior.
       Warum nur Scroll hier: overflow-x/scroll-snap/padding stehen NICHT in der
       Late-Injection (functions.php) — nur diese Properties gehoeren in style.css. */
    .page-id-46 .e-n-accordion .elementor-posts-container.elementor-grid {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;

        overscroll-behavior-x: contain;
        gap: 12px;
        padding: 4px 20px 12px;
        scrollbar-width: none;
    }

    .page-id-46 .e-n-accordion .elementor-posts-container.elementor-grid::-webkit-scrollbar {
        display: none;
    }

    /* ── 4. Cards: feste Breite + Snap ── */
    .page-id-46 .e-n-accordion .elementor-post.elementor-grid-item {
        min-width: 280px;
        max-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* ── 5. Card-Bilder: einheitliche Hoehe ── */
    .page-id-46 .e-n-accordion .elementor-post__thumbnail img {
        height: 160px;
        width: 100%;
        object-fit: cover;
    }

    /* ── 6. Sand-Divider zwischen Sektionen ── */
    .page-id-46 .e-n-accordion-item + .e-n-accordion-item {
        border-top: none;
        padding-top: 0;
        position: relative;
        margin-top: 8px;
    }

    /* ── 7. Workshop-Bilder ── */
    .page-id-46 .e-n-accordion .elementor-widget-image img {
        height: 140px;
        object-fit: cover;
    }

    /* ── 8. Buttons: Touch-Target ── */
    .page-id-46 .e-n-accordion .elementor-button {
        min-height: 44px;
    }

    /* ── 9. Panel 5 (Workshops): statische Inhalte als Strip ── */
    /* Panel 5 hat kein Posts-Widget — die inneren Widgets werden horizontal */
    /* Klasse per Elementor Advanced > CSS Classes gesetzt */
    .page-id-46 .hz-workshops-panel > .e-con > .e-con {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;

        overscroll-behavior-x: contain;
        gap: 12px;
        padding-right: 80px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .page-id-46 .hz-workshops-panel > .e-con > .e-con::-webkit-scrollbar {
        display: none;
    }

    .page-id-46 .hz-workshops-panel > .e-con > .e-con > .e-con {
        min-width: 280px;
        max-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* ── 10. Scroll-Progress-Bar (per JS eingefuegt) ── */
    .page-id-46 .hz-swipe-progress {
        position: relative;
        height: 3px;
        background: var(--hz-line);
        border-radius: 2px;
        margin: 10px 20px 20px;
        overflow: hidden;
    }

    .page-id-46 .hz-swipe-progress__thumb {
        position: absolute;
        top: 0;
        height: 100%;
        background: var(--hz-green);
        border-radius: 2px;
        transition: left 0.15s ease-out, width 0.15s ease-out;
    }

    /* -- 5a2. Gradient-Divider -- */
    .page-id-46 .e-n-accordion-item + .e-n-accordion-item::before {
        content: '';
        display: block;
        height: 4px;
        background: linear-gradient(90deg, transparent 0%, var(--hz-sand) 30%, var(--hz-sand) 70%, transparent 100%);
        margin-bottom: 8px;
    }

    /* -- 5b. Card-Styling: Prototyp-Angleichung -- */
    /* overflow:hidden kommt per Late-CSS (!important), hier nur shadow + flex */
    .page-id-46 .e-n-accordion .elementor-post__card {
        box-shadow: 0 1px 4px rgba(44,44,42,0.08), 0 0 0 1px rgba(44,44,42,0.04);
        display: flex;
        flex-direction: column;
    }

    /* Gruener Overlay ueber Foto (30% Opacity, ::after ueber position:absolute img) */
    .page-id-46 .e-n-accordion .elementor-post__thumbnail {
        position: relative;
    }

    .page-id-46 .e-n-accordion .elementor-post__thumbnail::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--hz-green), var(--hz-green-dark));
        opacity: 0.3;
        z-index: 1;
        border-radius: inherit;
        pointer-events: none;
    }

    .page-id-46 .e-n-accordion .elementor-post__card .elementor-post__text {
        padding: 14px 14px 16px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .page-id-46 .e-n-accordion .elementor-post__title a {
        line-height: 20px;
    }

    /* Mobile: min-height Reset — Cards gestapelt, keine Ausrichtung noetig */
    #hz_services .elementor-post__title {
        min-height: auto;
    }

    .page-id-46 .e-n-accordion .elementor-post__excerpt p {
        line-height: 1.55;
        flex: 1;
        margin-bottom: 14px;
    }

    /* -- 5b2. Kategorie-Badge: per DB gesteuert (cards_show_badge='') -- */

    /* -- 5c. Read-More als CTA-Button -- */
    /* Farbe per DB (cards_read_more_color=#4A7C59), background/padding per Late-CSS */
    .page-id-46 .e-n-accordion .elementor-post__read-more {
        display: inline-block;
        letter-spacing: 0.03em;
        border-radius: 6px;
        min-height: 44px;
        line-height: 1.4;
        text-decoration: none;
        align-self: flex-start;
        transition: background 0.2s;
        margin-top: auto;
    }

    .page-id-46 .e-n-accordion .elementor-post__read-more:hover,
    .page-id-46 .e-n-accordion .elementor-post__read-more:active {
        background: var(--hz-green-dark);
    }

    /* -- 5d. Peek-Fade rechts -- */
    .page-id-46 .e-n-accordion .elementor-widget-posts {
        position: relative;
    }

    .page-id-46 .e-n-accordion .elementor-widget-posts::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 100%;
        background: linear-gradient(to left, var(--hz-bg) 0%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    .page-id-46 .hz-workshops-panel {
        position: relative;
    }

    .page-id-46 .hz-workshops-panel::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 100%;
        background: linear-gradient(to left, var(--hz-bg) 0%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    /* -- 5e. Zebra: abwechselnde Hintergruende (Tabs + Accordion) -- */
    .page-id-46 .e-n-tabs-content > :nth-child(even),
    .page-id-46 .e-n-accordion-item:nth-child(even) {
        background: var(--hz-bg-content);
    }

    .page-id-46 .e-n-tabs-content > :nth-child(even) .elementor-widget-posts::after,
    .page-id-46 .e-n-accordion-item:nth-child(even) .elementor-widget-posts::after {
        background: linear-gradient(to left, var(--hz-bg-content) 0%, transparent 100%);
    }
}

/* ==========================================================================
   6. Post 54: Team nested-tabs + Mobile Swipe
   ========================================================================== */

/* Bilder in Text-Editor-Widgets begrenzen (Joenna, Silvia, Maike) */
.page-id-54 .e-n-tabs .elementor-widget-text-editor img {
    max-height: 160px;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
}

/* Mobile Swipe: horizontaler Scroll mit Snap */
@media (max-width: 768px) {
    .page-id-54 .elementor-element-c11b488 {
        overflow-x: auto;
        scroll-snap-type: x mandatory;

        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .page-id-54 .elementor-element-c11b488::-webkit-scrollbar {
        display: none;
    }

    .page-id-54 .elementor-element-c11b488 > .e-con {
        min-width: 85vw;
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    /* Bilder in Swipe-Cards begrenzen */
    .page-id-54 .elementor-element-c11b488 .elementor-widget-text-editor img {
        max-height: 160px;
        width: auto;
        object-fit: cover;
        border-radius: 4px;
    }

    /* Pfoten-Swipe-Hint */
    .page-id-54 .hz-swipe-hint {
        text-align: center;
        margin-bottom: 4px;
    }

    /* Gap zwischen Hint und Swipe-Container reduzieren */
    .page-id-54 .elementor-element-2ab458d {
        gap: 4px !important;
    }
}

/* Pfoten-Animation (ausserhalb @media, gilt global wenn sichtbar) */
@media (prefers-reduced-motion: no-preference) {
    .page-id-54 .hz-swipe-paw {
        animation: hz-pawswipe 2.5s ease-in-out infinite;
    }

    .page-id-54 .hz-swipe-trail {
        animation: hz-trail 2.5s ease-in-out infinite;
    }
}

@keyframes hz-pawswipe {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.6;
    }
    50% {
        transform: translateX(20px);
        opacity: 1;
    }
}

@keyframes hz-trail {
    0%, 100% {
        opacity: 0;
    }
    30% {
        opacity: 0.3;
    }
    60% {
        opacity: 0;
    }
}

/* ── MEC Single Event Redesign (Stufe 1: CSS-only) ────────────
   Warum CSS:  MEC hat keine Admin-UI fuer Single-Event-Styling.
               Template-Override (Stufe 2) folgt fuer Struktur-Aenderungen.
   Variablen:  --hz-bg-content, --hz-green, --hz-green-dark,
               --hz-text, --hz-text-gray, --hz-white, --hz-line,
               --hz-font-heading, --hz-font-body
   Getestet:   2026-03-21
   ──────────────────────────────────────────────────────────── */

/* 1 · Hauptcontainer (Fallback fuer MEC-eigenes Rendering ohne Template-Override) */
.single-mec-events .mec-wrap {
    background-color: var(--hz-bg-content);
    padding: 40px;
    border-radius: 0;
    max-width: 100%;
    margin-left: 15px;
    margin-right: 15px;
}

/* 2 · Featured Image ─────────────────────────────────────── */
.single-mec-events .mec-events-event-image {
    border-radius: 12px;
    overflow: hidden;
    max-width: 80%;
}

.single-mec-events .mec-events-event-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* 3 · Event-Titel ────────────────────────────────────────── */
.single-mec-events h1.mec-single-title {
    font-family: var(--hz-font-heading);
    color: var(--hz-green-dark);
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

/* 4 · Sidebar-Bloecke → Card-Look ────────────────────────── */
.single-mec-events .mec-event-meta.mec-frontbox > div,
.single-mec-events .mec-event-cost,
.single-mec-events .mec-event-more-info,
.single-mec-events .mec-single-event-category,
.single-mec-events .mec-single-event-organizer,
.single-mec-events .mec-events-meta-group {
    background: var(--hz-white);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Labels (h3) innerhalb der Sidebar-Cards */
.single-mec-events .mec-event-meta.mec-frontbox h3,
.single-mec-events .mec-event-meta.mec-frontbox .mec-events-single-section-title,
.single-mec-events .mec-event-meta.mec-frontbox .mec-cost {
    font-size: 0.6875rem; /* 11px in rem */
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    color: var(--hz-text-gray);
    font-family: var(--hz-font-body);
    font-weight: 700;
    margin-bottom: 6px;
}

/* Werte (dd) innerhalb der Sidebar-Cards */
.single-mec-events .mec-event-meta.mec-frontbox dd {
    font-size: 0.9375rem; /* 15px in rem */
    font-weight: 700;
    color: var(--hz-text);
    font-family: var(--hz-font-body);
}

/* 5 · Veranstalter-Bild ─────────────────────────────────── */
.single-mec-events img.mec-img-organizer {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 2px solid var(--hz-green);
    display: block;
    margin-bottom: 8px;
}

/* 6 · Kategorie als Badge ───────────────────────────────── */
.single-mec-events .mec-single-event-category dd.mec-events-event-categories a {
    display: inline-block;
    background: rgba(74, 107, 76, 0.1);
    color: var(--hz-green);
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-decoration: none;
    font-family: var(--hz-font-body);
}

/* 7 · Event-Navigation (Prev/Next) ──────────────────────── */
.single-mec-events .mec-next-previous-events {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
    border-top: 1px solid var(--hz-line);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}

.single-mec-events .mec-next-previous-events a {
    color: var(--hz-green);
    font-family: var(--hz-font-body);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.single-mec-events .mec-next-previous-events a:hover,
.single-mec-events .mec-next-previous-events a:focus-visible {
    color: var(--hz-green-dark);
}

.single-mec-events .mec-next-previous-events a:focus-visible {
    outline: 2px solid var(--hz-green-dark);
    outline-offset: 2px;
    border-radius: 2px;
}

/* 8 · Breadcrumbs ───────────────────────────────────────── */
.single-mec-events .mec-breadcrumbs {
    font-size: 0.8125rem; /* 13px */
    color: var(--hz-text-gray);
    font-family: var(--hz-font-body);
    margin-bottom: 1rem;
}

/* 9 · "Expired!" Badge ──────────────────────────────────── */
/* Hinweis: #993333 ist bewusst hartcodiert — es gibt keine hz-Fehlerfarb-Variable.
   Akzeptabel da semantische Fehlerfarbe ohne Editor-Picker-Entsprechung. */
.single-mec-events .mec-holding-status-expired {
    display: inline-block;
    background: rgba(200, 50, 50, 0.1);
    color: #993333;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: var(--hz-font-body);
}

/* 10 · Kommentare ausblenden ────────────────────────────── */
.single-mec-events .comments-area {
    display: none;
}

/* 11 · Export-Buttons (Google Calendar / iCal) ──────────── */
.single-mec-events .mec-event-export-module {
    margin-top: 1rem;
}

.single-mec-events .mec-events-button.mec-events-gcal {
    display: inline-block;
    border: 1px solid var(--hz-line);
    border-radius: 4px;
    padding: 6px 14px;
    font-family: var(--hz-font-body);
    font-size: 0.8125rem; /* 13px */
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
    color: var(--hz-green);
}

.single-mec-events .mec-events-button.mec-events-gcal:hover,
.single-mec-events .mec-events-button.mec-events-gcal:focus-visible {
    border-color: var(--hz-green);
    color: var(--hz-green-dark);
}

.single-mec-events .mec-events-button.mec-events-gcal:focus-visible {
    outline: 2px solid var(--hz-green-dark);
    outline-offset: 2px;
}

/* Export-Buttons Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .single-mec-events .mec-events-button.mec-events-gcal,
    .single-mec-events .mec-next-previous-events a {
        transition: none;
    }
}

/* ── MEC Single Event Stufe 2: Template-Layout (komplett eigenes Layout) ─────
   Eigenes Template ohne $MEC->single(). Alle Daten direkt aus Post-Meta.
   Selektoren: .single-mec-events Prefix fuer alle eigenen Klassen.
   Keine !important. Keine hardcoded Hex-Werte — nur var(--hz-*).
   Stand: 2026-03-21 (Stufe 2 komplett)
   ────────────────────────────────────────────────────────────────────────── */

/* ── Page-Wrapper (= .inside-article Ersatz) ─────────────────── */
/* GP .one-container .site-content { padding: 40px } erzeugt den gruenen Rahmen.
   Kein full-width-content → padding bleibt erhalten. Page-Wrap braucht keine
   eigenen Margins, nur internes Padding fuer den Content. */
.single-mec-events .hz-event-page-wrap {
    padding: 20px 40px 40px;
    background-color: var(--hz-bg-content);
}

/* ── Hero-Bereich ─────────────────────────────────────────────── */
.single-mec-events .hz-event-hero {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 32px;
    min-height: 400px;
    max-height: 500px;
    background-color: var(--hz-green-dark);
    display: flex;
    align-items: flex-end;
}

/* Hintergrundbild */
.single-mec-events .hz-event-hero__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

/* Gradient-Overlay: transparent oben → dunkel unten */
.single-mec-events .hz-event-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 25%,
        rgba(0, 0, 0, 0.3) 55%,
        rgba(0, 0, 0, 0.68) 100%
    );
    pointer-events: none;
}

/* Hero-Content: Titel + Breadcrumbs — volle Breite am unteren Rand */
.single-mec-events .hz-event-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 20px 28px 18px;
    background: rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Breadcrumbs im Hero */
.single-mec-events .hz-event-breadcrumbs {
    font-family: var(--hz-font-body);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.single-mec-events .hz-event-breadcrumbs a {
    color: var(--hz-white);
    text-decoration: none;
}

.single-mec-events .hz-event-breadcrumbs a:hover {
    color: var(--hz-white);
    text-decoration: underline;
}

/* H1 im Hero */
.single-mec-events .hz-event-hero__title {
    font-family: var(--hz-font-heading);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    color: var(--hz-white);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    margin: 0;
    line-height: 1.2;
}

/* Fallback ohne Bild */
.single-mec-events .hz-event-hero--no-image {
    background-color: var(--hz-green-dark);
    min-height: 160px;
}

.single-mec-events .hz-event-hero--no-image .hz-event-hero__overlay {
    background: none;
}

.single-mec-events .hz-event-hero--no-image .hz-event-hero__title {
    text-shadow: none;
}

/* ── Meta-Grid ───────────────────────────────────────────────── */
.single-mec-events .hz-event-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

/* Meta-Card */
.single-mec-events .hz-event-meta-card {
    background: var(--hz-white);
    border-radius: 12px;
    border: 1px solid var(--hz-line);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Icon-Kreis */
.single-mec-events .hz-event-meta-card__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--hz-green-hauch);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hz-green);
}

/* Card-Texte */
.single-mec-events .hz-event-meta-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}

.single-mec-events .hz-event-meta-card__label {
    font-family: var(--hz-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hz-text-gray);
}

.single-mec-events .hz-event-meta-card__value {
    font-family: var(--hz-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hz-text);
    line-height: 1.3;
}

.single-mec-events .hz-event-meta-card__sub {
    font-family: var(--hz-font-body);
    font-size: 0.82rem;
    color: var(--hz-text-gray);
    line-height: 1.3;
}

/* Kategorien-Badge */
.single-mec-events .hz-event-meta-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.single-mec-events .hz-event-cat-badge {
    display: inline-block;
    font-family: var(--hz-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hz-green);
    background: var(--hz-green-hauch);
    border: 1px solid var(--hz-green);
    border-radius: 4px;
    padding: 2px 8px;
}

/* ── Body: Beschreibung + Sidebar (Details + Veranstalter) ───── */
.single-mec-events .hz-event-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    margin-bottom: 32px;
    align-items: start;
}

/* Sidebar-Wrapper: Details-Card + CTA + Veranstalter-Card gestapelt */
.single-mec-events .hz-event-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Anmelde-Button in der Sidebar */
.single-mec-events .hz-event-sidebar__cta {
    display: block;
    text-align: center;
    padding: 14px 20px;
    background: var(--hz-green);
    color: var(--hz-white);
    font-family: var(--hz-font-body);
    font-weight: 700;
    font-size: 1em;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.single-mec-events .hz-event-sidebar__cta:hover {
    background: var(--hz-green-dark);
    color: var(--hz-white);
}

/* Beschreibungs-Bereich */
.single-mec-events .hz-event-description {
    font-family: var(--hz-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--hz-text);
}

.single-mec-events .hz-event-description p {
    margin-bottom: 1em;
}

/* Veranstalter-Card */
.single-mec-events .hz-event-organizer-card {
    background: var(--hz-white);
    border-radius: 12px;
    border: 1px solid var(--hz-line);
    padding: 24px 20px;
    text-align: center;
}

.single-mec-events .hz-event-organizer-card__thumb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px;
    display: block;
}

.single-mec-events .hz-event-organizer-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--hz-green-hauch);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hz-green);
    margin: 0 auto 12px;
}

.single-mec-events .hz-event-organizer-card__name {
    font-family: var(--hz-font-heading);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--hz-text);
    margin: 0 0 12px;
}

.single-mec-events .hz-event-organizer-card__contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--hz-font-body);
    font-size: 0.85rem;
    color: var(--hz-text-gray);
    margin: 0 0 8px;
    text-align: left;
}

.single-mec-events .hz-event-organizer-card__contact a {
    color: var(--hz-green);
    text-decoration: none;
    word-break: break-word;
}

.single-mec-events .hz-event-organizer-card__contact a:hover {
    text-decoration: underline;
}

/* ── CTA-Bereich ──────────────────────────────────────────────── */
.single-mec-events .hz-event-cta {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    align-items: center;
}

.single-mec-events .hz-event-cta__primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hz-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--hz-white);
    background: var(--hz-green);
    border: 2px solid var(--hz-green);
    border-radius: 8px;
    padding: 14px 24px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.single-mec-events .hz-event-cta__primary:hover,
.single-mec-events .hz-event-cta__primary:focus-visible {
    background: var(--hz-green-dark);
    border-color: var(--hz-green-dark);
    color: var(--hz-white);
    outline: 3px solid var(--hz-green);
    outline-offset: 2px;
}

.single-mec-events .hz-event-cta__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hz-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--hz-green);
    background: var(--hz-white);
    border: 2px solid var(--hz-green);
    border-radius: 8px;
    padding: 14px 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.single-mec-events .hz-event-cta__secondary:hover,
.single-mec-events .hz-event-cta__secondary:focus-visible {
    background: var(--hz-green-hauch);
    color: var(--hz-green-dark);
    outline: 3px solid var(--hz-green);
    outline-offset: 2px;
}

/* ── Prev/Next Navigation ─────────────────────────────────────── */
.single-mec-events .hz-event-prevnext {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--hz-line);
}

.single-mec-events .hz-event-prevnext__spacer {
    flex: 1;
}

.single-mec-events .hz-event-prevnext__prev,
.single-mec-events .hz-event-prevnext__next {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    font-family: var(--hz-font-body);
    font-size: 0.9rem;
    color: var(--hz-text);
    text-decoration: none;
    padding: 12px 0;
    transition: color 0.2s ease;
}

.single-mec-events .hz-event-prevnext__prev:hover,
.single-mec-events .hz-event-prevnext__next:hover {
    color: var(--hz-green);
}

.single-mec-events .hz-event-prevnext__prev:focus-visible,
.single-mec-events .hz-event-prevnext__next:focus-visible {
    outline: 3px solid var(--hz-green);
    outline-offset: 2px;
    border-radius: 4px;
}

.single-mec-events .hz-event-prevnext__next {
    justify-content: flex-end;
    text-align: right;
}

.single-mec-events .hz-event-prevnext__prev svg,
.single-mec-events .hz-event-prevnext__next svg {
    flex-shrink: 0;
    color: var(--hz-green);
}

.single-mec-events .hz-event-prevnext span {
    display: flex;
    flex-direction: column;
}

.single-mec-events .hz-event-prevnext__hint {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--hz-text-gray);
}

.single-mec-events .hz-event-prevnext__title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hz-text);
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .single-mec-events .hz-event-page-wrap {
        margin-left: 8px;
        margin-right: 8px;
        padding: 20px;
    }

    .single-mec-events .hz-event-hero {
        border-radius: 8px;
        margin-bottom: 20px;
        min-height: 200px;
        max-height: 320px;
    }

    .single-mec-events .hz-event-hero__content {
        padding: 14px 16px 18px;
    }

    .single-mec-events .hz-event-hero__title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .single-mec-events .hz-event-meta-grid {
        grid-template-columns: 1fr;
    }

    .single-mec-events .hz-event-body {
        grid-template-columns: 1fr;
    }

    .single-mec-events .hz-event-cta {
        flex-direction: column;
    }

    .single-mec-events .hz-event-cta__secondary {
        width: 100%;
    }

    .single-mec-events .hz-event-prevnext {
        flex-direction: column;
    }

    .single-mec-events .hz-event-prevnext__spacer {
        display: none;
    }
}

/* ── WhatsApp-Link in Veranstalter-Card ──────────────────────── */
.single-mec-events .hz-event-organizer-card__whatsapp svg {
    color: var(--hz-green);
}

.single-mec-events .hz-event-organizer-card__whatsapp a {
    color: var(--hz-green);
    font-weight: 600;
}

.single-mec-events .hz-event-organizer-card__whatsapp a:hover {
    color: var(--hz-green-dark);
}

/* ── Social-Icons in Veranstalter-Card ────────────────────────── */
.single-mec-events .hz-event-organizer-card__social {
    display: flex;
    gap: 12px;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--hz-line, #D6D0C4);
}

.single-mec-events .hz-event-organizer-card__social a {
    color: var(--hz-text-gray);
    transition: color 0.2s ease;
}

.single-mec-events .hz-event-organizer-card__social a:hover {
    color: var(--hz-green);
}

/* ── Details-Card (Standort, Trainer, Hinweis — unter Veranstalter) ── */
.single-mec-events .hz-event-details-card {
    background: var(--hz-white);
    border-radius: 12px;
    border: 1px solid var(--hz-line);
    padding: 20px;
}

.single-mec-events .hz-event-details-card__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--hz-text);
    font-size: 0.92em;
    line-height: 1.5;
}

.single-mec-events .hz-event-details-card__item + .hz-event-details-card__item {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--hz-line);
}

.single-mec-events .hz-event-details-card__item svg {
    flex-shrink: 0;
    color: var(--hz-green);
    margin-top: 2px;
}

.single-mec-events .hz-event-details-card__sub {
    display: block;
    font-size: 0.9em;
    color: var(--hz-text-gray);
}

.single-mec-events .hz-event-details-card__note {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--hz-line);
    font-size: 0.88em;
    line-height: 1.6;
    color: var(--hz-text-gray);
    font-style: italic;
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .single-mec-events .hz-event-hero__image,
    .single-mec-events .hz-event-hero__overlay,
    .single-mec-events .hz-event-cta__primary,
    .single-mec-events .hz-event-cta__secondary,
    .single-mec-events .hz-event-prevnext__prev,
    .single-mec-events .hz-event-prevnext__next {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MEC Archive-Seite: Template-Layout
   ═══════════════════════════════════════════════════════════════ */

.post-type-archive-mec-events .hz-archive-events-wrap {
    background-color: var(--hz-bg-content, #F5F4F0);
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 2rem;
}

.hz-archive-events__title {
    font-family: var(--hz-font-heading);
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--hz-green-dark);
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--hz-line, #D6D0C4);
}

/* MEC-Kalender-Container innerhalb des Archives */
.hz-archive-events__content .mec-wrap {
    border-radius: 8px;
}

/* ── MEC Labels: Status-Badges (Cards + Single Event) ────────── */
.hz-event-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: var(--hz-font-body);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--hz-green);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.hz-event-card-dates .hz-event-status {
    margin-top: 6px;
}

.hz-event-hero__labels {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hz-event-hero__labels .hz-event-status {
    font-size: 13px;
    padding: 4px 14px;
}

/* ── MEC Cards: Preis im Excerpt ─────────────────────────────── */
.elementor-post__excerpt .hz-event-card-dates__price {
    display: block;
    font-family: var(--hz-font-body);
    font-weight: 600;
    font-size: 0.9em;
    color: var(--hz-green-dark);
    margin-top: 0.25rem;
}

/* ── MEC Cards: Trainer/in unter dem Titel ("mit Peggy") ──────── */
.elementor-post__excerpt .hz-event-card-trainer {
    font-family: var(--hz-font-accent);
    font-style: italic;
    font-size: 0.9em;
    color: var(--hz-text-gray);
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hz-green-hauch);
}

/* ── MEC Cards: Zusatzinfos (Dauer, Teilnehmer, Strecke) ────── */
.elementor-post__excerpt .hz-event-card-dates__extras {
    display: block;
    font-family: var(--hz-font-body);
    font-size: 0.85em;
    color: var(--hz-text-gray);
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .post-type-archive-mec-events .hz-archive-events-wrap {
        padding: 20px;
    }

    .hz-archive-events__title {
        font-size: 1.35rem;
    }
}