/* =================================================================================
   
   ZELIC CONSULTING - COMPLETE CSS SYSTEM
   Version: 2.1 (Quick-Fixes angewendet)
   
   =================================================================================
   
   CHANGELOG v2.1:
   - Font-Inkonsistenz behoben: Alle Elemente nutzen jetzt var(--zelic-font-body)
   - Hardcoded Farben durch CSS-Variablen ersetzt
   - Hardcoded Font-Deklarationen durch Variablen ersetzt
   - Dark-Farb-Variablen von 9 auf 6 konsolidiert
   - Neue Variable --zelic-success hinzugefuegt
   - Neue Variable --zelic-text-light-warm hinzugefuegt
   
   =================================================================================
   
   INHALTSVERZEICHNIS:
   
   1. CSS-VARIABLEN (Design Tokens)
   2. GLOBALE STYLES UND HEADER
   3. BUTTON SYSTEM
   4. WOOCOMMERCE - EINZELPRODUKT (Kurs-Detailseite)
   5. WOOCOMMERCE - KURS-UEBERSICHT (Shop/Archiv)
   6. NEWSLETTER SECTION
   7. FEATURES SECTION (zelic-feat-v1)
   8. HERO SECTION
   9. PAIN POINTS
   10. DARK BOX GLOW
   11. LEISTUNGEN SECTION (Homepage)
   12. CARD HOVER EFFECT
   13. ICON BOX LIME STYLE
   14. EXPERTEN MARQUEE
   15. PILL BADGES
   16. HERO META SECTION
   17. SECTION GRADIENT
   18. RESULTS CARD
   19. PHASE CAROUSEL LIGHT
   20. KLASSEN-REFERENZ
   
   =================================================================================
   
   FARBEN (KONSOLIDIERT v2.1):
   - Primary Accent: #D4ED6D (Lime-Green)
   - Dark (6 Stufen): #0a0a0a / #141414 / #1e1e1e / #2a2a2a / #3a3a3a / #4d4d4d
   - Gray Scale: #737373, #525252, #a0a0a0
   - Light BG: #fafafa, #f5f5f5, #F8F8F6
   - Borders: #e5e5e5, #d4d4d4, #EFEFEF
   
   FONTS:
   - Einheitlich: Inter (var(--zelic-font-body))
   
   RESPONSIVE BREAKPOINTS:
   - Tablet: 1024px
   - Tablet Small: 768px
   - Mobile: 480px
   

    /* INNERE Container behalten ihr Padding (ueberschreibt nichts) */
/*
/* =================================================================================
   1. CSS-VARIABLEN (DESIGN TOKENS)
   Was: Zentrale Design-Werte fuer konsistentes Styling
   Wo: Global verfuegbar in allen Komponenten
   
   UPDATE v2.1: 
   - Dark-Farben konsolidiert (9 → 6)
   - --zelic-success hinzugefuegt
   - --zelic-text-light-warm hinzugefuegt
   ================================================================================= */
/* ============================================
   ZELIC – Sticky Header Force Fix
   Erzwingt position: fixed unabhängig von 
   Astra Pro JS und overflow-Konflikten
   ============================================ */
/* --- Spectra Video-Controls & Play-Button ausblenden --- */
/* Astra Footer — Ränder & Schwarzton-Fix */
#colophon,
.site-footer,
footer.site-footer {
    padding: 0 !important;
    margin: 0 !important;
    background: #0C0B09 !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Footer-Widget-Bereiche nullen */
.ast-footer-overlay,
.footer-widget-area,
.ast-footer-copyright,
#footer-widgets {
    padding: 0 !important;
    margin: 0 !important;
    background: #0C0B09 !important;
}

/* Body/Page-Wrapper Overflow fix */
body,
#page,
.hfeed,
.ast-page-builder-template {
    overflow-x: clip;
}

.zelic-hero-overlay1 .uagb-video__play-icon,
.zelic-hero-overlay1 .uagb-video__outer-wrap,
.zelic-hero-overlay1 [class*="video__play"] {
  display: none !important;
}

.zelic-hero-overlay1 video::-webkit-media-controls,
.zelic-hero-overlay1 video::-webkit-media-controls-enclosure,
.zelic-hero-overlay1 video::-webkit-media-controls-panel,
.zelic-hero-overlay1 video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}

.zelic-hero-overlay1 video {
  pointer-events: none !important;
}

#masthead,
.site-header,
.ast-main-header-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
}

/* Verhindert dass overflow auf Body/Page den Header killt */
html, body, #page, .hfeed {
  overflow-x: clip !important;
}
:root {
    /* Primaerfarbe - Zelic Lime */
    --zelic-primary: #D4ED6D;
    --zelic-primary-hover: #c5e050;
    --zelic-primary-light: #e5f590;
    --zelic-primary-dark: #b8d45a;
    
    /* Glow-Effekte */
    --zelic-glow-sm: 0 0 12px rgba(212, 237, 109, 0.3);
    --zelic-glow-md: 0 0 20px rgba(212, 237, 109, 0.4);
    --zelic-glow-lg: 0 0 30px rgba(212, 237, 109, 0.6);
    --zelic-glow-btn: 0 4px 14px rgba(212, 237, 109, 0.3);
    --zelic-glow-btn-hover: 0 12px 32px rgba(212, 237, 109, 0.4);
    --zelic-glow-pill: 0 4px 16px rgba(212, 237, 109, 0.35);
    
    /* =========================================================================
       HINTERGRUENDE - DUNKEL (KONSOLIDIERT v2.1)
       6 Stufen statt 9 - von dunkel zu hell
       ========================================================================= */
    --zelic-bg-dark: #0a0a0a;              /* Stufe 1: Dunkelster (Hero-BG, Footer) */
    --zelic-bg-dark-medium: #141414;       /* Stufe 2: Standard Dark (Sections) */
    --zelic-bg-card-dark: #1e1e1e;         /* Stufe 3: Cards auf dunklem BG */
    --zelic-bg-element-dark: #2a2a2a;      /* Stufe 4: Elemente, Inputs */
    --zelic-bg-element-dark-hover: #3a3a3a;/* Stufe 5: Hover-States */
    --zelic-bg-button-dark: #4d4d4d;       /* Stufe 6: Buttons auf dunklem BG */
    
    /* Hintergruende - Hell */
    --zelic-bg-white: #ffffff;
    --zelic-bg-light: #fafafa;
    --zelic-bg-light-alt: #f5f5f5;
    --zelic-bg-light-warm: #F8F8F6;
    
    /* Textfarben */
    --zelic-text-white: #ffffff;
    --zelic-text-dark: #0a0a0a;
    --zelic-text-dark-alt: #141414;
    --zelic-text-dark-heading: #1A1D21;
    --zelic-text-muted: #737373;
    --zelic-text-muted-light: #a0a0a0;
    --zelic-text-muted-dark: #525252;
    --zelic-text-subtle: #6B7280;
    --zelic-text-light-warm: #E8E8E2;      /* NEU v2.1 */
    
    /* Status-Farben (NEU v2.1) */
    --zelic-success: #00b300;
    
    /* Border-Farben */
    --zelic-border-light: #e5e5e5;
    --zelic-border-medium: #d4d4d4;
    --zelic-border-subtle: #EFEFEF;
    --zelic-border-dark: #2a2a2a;
    --zelic-border-dark-medium: #3a3a3a;
    --zelic-border-dark-light: #4a4a4a;
    
    /* Spacing-System (8px Basis) */
    --zelic-space-xs: 4px;
    --zelic-space-sm: 8px;
    --zelic-space-md: 12px;
    --zelic-space-base: 16px;
    --zelic-space-lg: 20px;
    --zelic-space-xl: 24px;
    --zelic-space-2xl: 32px;
    --zelic-space-3xl: 48px;
    --zelic-space-4xl: 64px;
    --zelic-space-5xl: 80px;
    --zelic-space-6xl: 100px;
    
    /* Border-Radius */
    --zelic-radius-sm: 4px;
    --zelic-radius-md: 8px;
    --zelic-radius-base: 10px;
    --zelic-radius-lg: 12px;
    --zelic-radius-xl: 16px;
    --zelic-radius-2xl: 20px;
    --zelic-radius-3xl: 24px;
    --zelic-radius-pill: 50px;
    --zelic-radius-circle: 50%;
    
    /* Typografie - Font Family (EINHEITLICH v2.1) */
    --zelic-font-body: 'Inter', sans-serif;
    
    /* Typografie - Font Sizes */
    --zelic-font-xs: 0.75rem;
    --zelic-font-sm: 0.8125rem;
    --zelic-font-base: 0.875rem;
    --zelic-font-md: 0.9375rem;
    --zelic-font-lg: 1rem;
    --zelic-font-xl: 1.0625rem;
    --zelic-font-2xl: 1.125rem;
    
    /* Transitions */
    --zelic-transition: all 0.2s ease;
    --zelic-transition-medium: all 0.3s ease;
    --zelic-transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --zelic-transition-carousel: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    
    /* Shadows */
    --zelic-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --zelic-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --zelic-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
    --zelic-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.08);
}


/* =================================================================================
   2. GLOBALE STYLES UND HEADER
   Was: Grundlegende Styles die seitenuebergreifend gelten
   Wo: Alle Seiten
   ================================================================================= */

/* Gruener Akzent-Strich unter dem Header (Masthead) */
#masthead {
    border-bottom: 3px solid var(--zelic-primary) !important;
}

/* Dashicons im Frontend laden */
@import url('/wp-includes/css/dashicons.min.css');

/* Horizontale Trennlinien - einheitlich duenn und dezent */
hr.wp-block-separator,
.wp-block-separator,
.woocommerce hr,
.entry-content hr,
.product hr {
    border: none !important;
    border-top: 0.5px solid var(--zelic-border-light) !important;
    height: 0.5px !important;
    background: transparent !important;
    opacity: 1 !important;
}


/* =================================================================================
   3. BUTTON SYSTEM
   Was: Wiederverwendbare Button-Klassen fuer Spectra und native WP-Buttons
   Wo: CTAs, Formulare, Hero-Sections, Cards
   
   VERWENDUNG IN GUTENBERG:
   Spectra Button: Erweitert > CSS-Klassen > btn-primary (etc.)
   Native Button: Erweitert > Zusaetzliche CSS-Klassen > btn-primary
   
   VARIANTEN:
   - btn-primary        = Gruener Haupt-CTA
   - btn-primary-glow   = Gruen mit Glow-Effekt (fuer Hero-Sections)
   - btn-secondary      = Outline auf hellem Hintergrund
   - btn-secondary-dark = Outline auf dunklem Hintergrund
   - btn-dark           = Schwarzer Button
   - btn-light          = Weisser Button (fuer dunkle BGs)
   - btn-outline-light  = Outline weiss (fuer dunkle BGs)
   ================================================================================= */

/* --- Primary Button (Gruen) --- */
.wp-block-uagb-buttons-child.btn-primary .uagb-buttons-repeater,
.wp-block-button.btn-primary .wp-block-button__link,
a.btn-primary,
button.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--zelic-primary) !important;
    color: var(--zelic-text-dark) !important;
    border: none !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 250px !important;
    min-height: 52px !important;
    transition: var(--zelic-transition) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-primary .uagb-buttons-repeater:hover,
.wp-block-button.btn-primary .wp-block-button__link:hover,
a.btn-primary:hover,
button.btn-primary:hover {
    background: var(--zelic-primary-hover) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-primary .uagb-buttons-repeater:focus,
.wp-block-button.btn-primary .wp-block-button__link:focus,
a.btn-primary:focus,
button.btn-primary:focus {
    outline: 2px solid var(--zelic-text-dark) !important;
    outline-offset: 2px !important;
}

/* --- Primary Button mit Glow-Effekt --- */
.wp-block-uagb-buttons-child.btn-primary-glow .uagb-buttons-repeater,
.wp-block-button.btn-primary-glow .wp-block-button__link,
a.btn-primary-glow,
button.btn-primary-glow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--zelic-primary) !important;
    color: var(--zelic-text-dark) !important;
    border: none !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 250px !important;
    min-height: 52px !important;
    transition: var(--zelic-transition-medium) !important;
    text-decoration: none !important;
    box-shadow: var(--zelic-glow-btn) !important;
}

.wp-block-uagb-buttons-child.btn-primary-glow .uagb-buttons-repeater:hover,
.wp-block-button.btn-primary-glow .wp-block-button__link:hover,
a.btn-primary-glow:hover,
button.btn-primary-glow:hover {
    background: var(--zelic-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--zelic-glow-btn-hover) !important;
    color: var(--zelic-text-dark) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-primary-glow .uagb-buttons-repeater:focus,
.wp-block-button.btn-primary-glow .wp-block-button__link:focus,
a.btn-primary-glow:focus,
button.btn-primary-glow:focus {
    outline: 2px solid var(--zelic-text-white) !important;
    outline-offset: 2px !important;
}

/* --- Secondary Button (Outline Hell) --- */
.wp-block-uagb-buttons-child.btn-secondary .uagb-buttons-repeater,
.wp-block-button.btn-secondary .wp-block-button__link,
a.btn-secondary,
button.btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--zelic-text-dark) !important;
    border: 2px solid var(--zelic-border-medium) !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 250px !important;
    min-height: 52px !important;
    transition: var(--zelic-transition) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-secondary .uagb-buttons-repeater:hover,
.wp-block-button.btn-secondary .wp-block-button__link:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    border-color: var(--zelic-text-dark) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-secondary .uagb-buttons-repeater:focus,
.wp-block-button.btn-secondary .wp-block-button__link:focus,
a.btn-secondary:focus,
button.btn-secondary:focus {
    outline: 2px solid var(--zelic-primary) !important;
    outline-offset: 2px !important;
}

/* --- Secondary Button fuer dunkle Hintergruende --- */
.wp-block-uagb-buttons-child.btn-secondary-dark .uagb-buttons-repeater,
.wp-block-button.btn-secondary-dark .wp-block-button__link,
a.btn-secondary-dark,
button.btn-secondary-dark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--zelic-text-white) !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 250px !important;
    min-height: 52px !important;
    transition: var(--zelic-transition) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-secondary-dark .uagb-buttons-repeater:hover,
.wp-block-button.btn-secondary-dark .wp-block-button__link:hover,
a.btn-secondary-dark:hover,
button.btn-secondary-dark:hover {
    border-color: rgba(255,255,255,0.6) !important;
    background: rgba(255,255,255,0.05) !important;
    transform: translateY(-2px) !important;
    color: var(--zelic-text-white) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-secondary-dark .uagb-buttons-repeater:focus,
.wp-block-button.btn-secondary-dark .wp-block-button__link:focus,
a.btn-secondary-dark:focus,
button.btn-secondary-dark:focus {
    outline: 2px solid var(--zelic-primary) !important;
    outline-offset: 2px !important;
}

/* --- Dark Button (Schwarz) --- */
.wp-block-uagb-buttons-child.btn-dark .uagb-buttons-repeater,
.wp-block-button.btn-dark .wp-block-button__link,
a.btn-dark,
button.btn-dark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--zelic-bg-dark) !important;
    color: var(--zelic-text-white) !important;
    border: none !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 250px !important;
    min-height: 52px !important;
    transition: var(--zelic-transition) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-dark .uagb-buttons-repeater:hover,
.wp-block-button.btn-dark .wp-block-button__link:hover,
a.btn-dark:hover,
button.btn-dark:hover {
    background: var(--zelic-bg-element-dark) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-dark .uagb-buttons-repeater:focus,
.wp-block-button.btn-dark .wp-block-button__link:focus,
a.btn-dark:focus,
button.btn-dark:focus {
    outline: 2px solid var(--zelic-primary) !important;
    outline-offset: 2px !important;
}

/* --- Light Button (Weiss) --- */
.wp-block-uagb-buttons-child.btn-light .uagb-buttons-repeater,
.wp-block-button.btn-light .wp-block-button__link,
a.btn-light,
button.btn-light {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--zelic-bg-white) !important;
    color: var(--zelic-text-dark) !important;
    border: none !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 250px !important;
    min-height: 52px !important;
    transition: var(--zelic-transition) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-light .uagb-buttons-repeater:hover,
.wp-block-button.btn-light .wp-block-button__link:hover,
a.btn-light:hover,
button.btn-light:hover {
    background: var(--zelic-bg-light-alt) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-light .uagb-buttons-repeater:focus,
.wp-block-button.btn-light .wp-block-button__link:focus,
a.btn-light:focus,
button.btn-light:focus {
    outline: 2px solid var(--zelic-text-dark) !important;
    outline-offset: 2px !important;
}

/* --- Outline Light (Weiss Outline) --- */
.wp-block-uagb-buttons-child.btn-outline-light .uagb-buttons-repeater,
.wp-block-button.btn-outline-light .wp-block-button__link,
a.btn-outline-light,
button.btn-outline-light {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--zelic-text-white) !important;
    border: 2px solid var(--zelic-border-dark-light) !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 250px !important;
    min-height: 52px !important;
    transition: var(--zelic-transition) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-outline-light .uagb-buttons-repeater:hover,
.wp-block-button.btn-outline-light .wp-block-button__link:hover,
a.btn-outline-light:hover,
button.btn-outline-light:hover {
    border-color: var(--zelic-text-white) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.wp-block-uagb-buttons-child.btn-outline-light .uagb-buttons-repeater:focus,
.wp-block-button.btn-outline-light .wp-block-button__link:focus,
a.btn-outline-light:focus,
button.btn-outline-light:focus {
    outline: 2px solid var(--zelic-primary) !important;
    outline-offset: 2px !important;
}



/* [A7] Abschnitt "5. WOOCOMMERCE - KURS-UEBERSICHT (Shop/Archiv)" liegt seit 18.08.2026 im Seitenblock von /kurse/ */
/* =================================================================================
   6. NEWSLETTER SECTION
   Was: Styles fuer Newsletter-Anmeldung
   Wo: Footer oder eigener Block, dunkler Hintergrund
   
   UPDATE v2.1: font-family auf var(--zelic-font-body) geaendert
   ================================================================================= */

/* --- Newsletter Badge --- */
.newsletter-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background: rgba(212, 237, 109, 0.15) !important;
    border-radius: var(--zelic-radius-pill) !important;
    font-size: var(--zelic-font-base) !important;
    font-weight: 600 !important;
    color: var(--zelic-primary) !important;
    width: fit-content !important;
    cursor: default !important;
    pointer-events: none !important;
}

.newsletter-badge li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--zelic-primary) !important;
}

.newsletter-badge svg {
    fill: var(--zelic-primary) !important;
    stroke: var(--zelic-primary) !important;
}

/* --- Newsletter Formular --- */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.newsletter-form label {
    display: none !important;
}

/* Input Felder - dunkler Style */
.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
    width: 100% !important;
    padding: 0.875rem 1.25rem !important;
    background: var(--zelic-bg-element-dark) !important;
    border: 1px solid var(--zelic-border-dark-light) !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    color: var(--zelic-text-white) !important;
    transition: var(--zelic-transition) !important;
}

.newsletter-form input[type="text"]::placeholder,
.newsletter-form input[type="email"]::placeholder {
    color: var(--zelic-text-muted) !important;
}

/* Focus-State mit gruenem Glow */
.newsletter-form input[type="text"]:focus,
.newsletter-form input[type="email"]:focus {
    outline: none !important;
    border-color: var(--zelic-primary) !important;
    box-shadow: 0 0 0 3px rgba(212, 237, 109, 0.15) !important;
}

/* Submit Button - Gruen */
.newsletter-form button[type="submit"],
.newsletter-form input[type="submit"] {
    width: 100% !important;
    padding: 0.875rem 1.75rem !important;
    background: var(--zelic-primary) !important;
    border: none !important;
    border-radius: var(--zelic-radius-base) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: var(--zelic-font-md) !important;
    font-weight: 600 !important;
    color: var(--zelic-text-dark) !important;
    cursor: pointer !important;
    transition: var(--zelic-transition) !important;
}

.newsletter-form button[type="submit"]:hover,
.newsletter-form input[type="submit"]:hover {
    background: var(--zelic-primary-hover) !important;
    transform: translateY(-2px) !important;
}

.newsletter-form button[type="submit"]:focus,
.newsletter-form input[type="submit"]:focus {
    outline: 2px solid var(--zelic-text-white) !important;
    outline-offset: 2px !important;
}

/* Required-Stern ausblenden */
.newsletter-form .required,
.newsletter-form abbr {
    display: none !important;
}

/* --- Newsletter Responsive: Mobile --- */
@media (max-width: 768px) {
    .newsletter-form input[type="text"],
    .newsletter-form input[type="email"] {
        padding: 0.75rem 1rem !important;
        font-size: var(--zelic-font-base) !important;
    }
    
    .newsletter-form button[type="submit"],
    .newsletter-form input[type="submit"] {
        padding: 0.75rem 1.5rem !important;
        font-size: var(--zelic-font-base) !important;
    }
}



/* [A7] Abschnitt "7. FEATURES SECTION (zelic-feat-v1)" liegt seit 18.08.2026 im Seitenblock von /kurse/ */
/* =================================================================================
   8. HERO SECTION
   Was: Styles fuer die Homepage Hero Section mit asymmetrischem Layout
   Wo: Homepage oben
   Klassen: hero-section, hero-textblock
   ================================================================================= */

/* --- Innerer Container (hero-textblock) --- */
.hero-textblock {
    margin-left: 100px;
    margin-right: auto;
}

/* --- Hero Responsive: Tablet --- */
@media (max-width: 1024px) {
    .hero-textblock {
        margin-left: 60px;
    }
}

/* --- Hero Responsive: Mobile --- */
@media (max-width: 767px) {
    /* Aeusserer Container */
    .hero-section {
        padding: 100px 0 60px 0 !important;  /* Mehr Bottom Padding */
        min-height: auto !important;
        height: auto !important;  /* Wichtig: Auto Height */
        overflow: visible !important;  /* Kein Overflow-Clipping */
    }
    
    /* Hintergrundbild-Position Mobile */
    .hero-section > .uagb-container__shape,
    .hero-section {
        background-position: 65% center !important;
    }
    
    /* Innerer Container */
    .hero-textblock {
        margin-left: 20px !important;
        margin-right: 20px !important;
        padding: 0 0 20px 0 !important;  /* Extra Bottom Padding */
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Headline */
    .hero-textblock .uagb-heading-text,
    .hero-textblock h1,
    .hero-textblock h2 {
        font-size: 28px !important;
        line-height: 1.15 !important;
        word-break: keep-all !important;
    }
    
    /* Buttons Container */
    .hero-textblock .wp-block-uagb-buttons,
    .hero-textblock .uagb-buttons__wrap {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 20px 0 0 0 !important;  /* Top Margin für Abstand */
    }
    
    /* Button Child Container */
    .hero-textblock .wp-block-uagb-buttons-child {
        width: auto !important;
        max-width: 280px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    
    /* Alle Button-Varianten */
    .hero-textblock .uagb-buttons-repeater,
    .hero-textblock .uagb-button__link,
    .hero-textblock [class*="btn-primary"] .uagb-buttons-repeater,
    .hero-textblock [class*="btn-secondary"] .uagb-buttons-repeater {
        min-width: 0 !important;
        max-width: 280px !important;
        width: auto !important;
        padding: 0.75rem 1.25rem !important;
        font-size: var(--zelic-font-base) !important;
    }
	/* Falls Spectra Container eine feste Hoehe hat */
@media (max-width: 767px) {
    .hero-section .uagb-container__inner,
    .hero-section .wp-block-uagb-container {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
}
	/* --- Hero Responsive: Mobile --- */
@media (max-width: 767px) {
    
    /* Absatz-Text im Hero */
    .hero-textblock p,
    .hero-textblock .uagb-desc-text {
        margin-right: 20px !important;  /* Rechter Abstand zum Bildrand */
        max-width: calc(100% - 20px) !important;  /* Platz für rechten Rand */
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    
    /* Falls ein Parent overflow clippt */
    .hero-section,
    .hero-section .uagb-container__inner,
    .hero-section .wp-block-uagb-container,
    .hero-textblock {
        overflow: visible !important;
        overflow-x: visible !important;
    }
    
    /* Sicherstellen dass der gesamte Content-Bereich sichtbar ist */
    .hero-textblock > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}
}


/* =================================================================================
   9. PAIN POINTS
   Was: Grosse Zahlen-Statistiken auf der Homepage
   Wo: Homepage Pain Points Section
   ================================================================================= */

.zc-home-pain-point-number {
    display: inline-block;
    width: 140px;
    text-align: right;
    font-family: var(--zelic-font-body) !important;
    font-size: 7.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--zelic-primary);
}

/* --- Pain Points Responsive: Tablet --- */
@media (max-width: 1024px) {
    .zc-home-pain-point-number {
        width: 100px;
        font-size: 5rem;
    }
}

/* --- Pain Points Responsive: Mobile --- */
@media (max-width: 768px) {
    .zc-home-pain-point-number {
        width: auto;
        text-align: left;
        font-size: 4rem;
    }
}


/* =================================================================================
   10. DARK BOX GLOW
   Was: Dunkle Box mit animiertem Lime-Glow-Effekt
   Wo: Spezielle Highlight-Sections
   Klasse: zelic-dark-box-glow
   ================================================================================= */

.zelic-dark-box-glow {
    position: relative;
    overflow: hidden;
    background: var(--zelic-bg-dark-medium);
    border-radius: var(--zelic-radius-3xl);
    border: 1px solid rgba(212, 237, 109, 0.25);
    box-shadow: 
        0 0 60px rgba(212, 237, 109, 0.15),
        0 0 100px rgba(212, 237, 109, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Animierter Hintergrund-Glow */
.zelic-dark-box-glow::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(
        ellipse at center, 
        rgba(212, 237, 109, 0.20) 0%,
        rgba(212, 237, 109, 0.08) 30%,
        transparent 60%
    );
    animation: zelicGlowPulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Content ueber dem Glow */
.zelic-dark-box-glow > *,
.zelic-dark-box-glow > * > *,
.zelic-dark-box-glow > * > * > *,
.zelic-dark-box-glow p,
.zelic-dark-box-glow h1,
.zelic-dark-box-glow h2,
.zelic-dark-box-glow h3,
.zelic-dark-box-glow h4,
.zelic-dark-box-glow span,
.zelic-dark-box-glow a,
.zelic-dark-box-glow button,
.zelic-dark-box-glow ul,
.zelic-dark-box-glow li,
.zelic-dark-box-glow .wp-block-button,
.zelic-dark-box-glow .wp-block-button__link,
.zelic-dark-box-glow .wp-block-buttons,
.zelic-dark-box-glow .wp-block-group,
.zelic-dark-box-glow .wp-block-group__inner-container {
    position: relative;
    z-index: 2;
}

@keyframes zelicGlowPulse {
    0%, 100% { 
        opacity: 0.6; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.08); 
    }
}

/* --- Dark Box Glow Responsive --- */
@media (max-width: 1024px) {
    .zelic-dark-box-glow {
        border-radius: var(--zelic-radius-2xl);
    }
}

@media (max-width: 768px) {
    .zelic-dark-box-glow {
        border-radius: 18px;
    }
}

@media (max-width: 480px) {
    .zelic-dark-box-glow {
        border-radius: var(--zelic-radius-xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zelic-dark-box-glow::before {
        animation: none;
        opacity: 0.8;
    }
}


/* =================================================================================
   11. LEISTUNGEN SECTION (Homepage)
   Was: Service-Karussell mit Featured Card und Service Cards
   Wo: Homepage Leistungen-Bereich
   Prefix: zelic-leistungen-, zelic-featured-, zelic-service-, zelic-carousel-
   ================================================================================= */

/* --- Section Container --- */
.zelic-leistungen-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--zelic-space-5xl) var(--zelic-space-xl);
    font-family: var(--zelic-font-body);
    color: var(--zelic-text-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- Section Header --- */
.zelic-leistungen-header {
    text-align: center;
    margin-bottom: var(--zelic-space-4xl);
}

.zelic-leistungen-label {
    display: inline-block;
    color: var(--zelic-text-dark);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--zelic-space-base);
    background: var(--zelic-primary);
    padding: 6px 16px;
    border-radius: var(--zelic-radius-pill);
}

.zelic-leistungen-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    margin-bottom: var(--zelic-space-base);
    line-height: 1.2;
    color: var(--zelic-text-white);
}

.zelic-leistungen-subtitle {
    font-size: clamp(15px, 2vw, 18px);
    color: var(--zelic-text-muted-light);
    max-width: 600px;
    margin: 0 auto;
}

/* --- Featured Card (Erfolgsschmiede) --- */
.zelic-featured-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    background: var(--zelic-bg-card-dark);
    border-radius: var(--zelic-radius-2xl);
    overflow: hidden;
    margin-bottom: var(--zelic-space-3xl);
    align-items: stretch;
    box-shadow: 0 0 50px rgba(212, 237, 109, 0.12);
}

/* Video Container */
.zelic-featured-video {
    position: relative;
    background: var(--zelic-bg-card-dark);
    min-height: 400px;
}

.zelic-featured-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--zelic-bg-card-dark);
}

.zelic-featured-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    background: var(--zelic-bg-card-dark);
}

/* Video Thumbnail Overlay */
.zelic-video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    overflow: hidden;
}

.zelic-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-size: 0;
    color: transparent;
}

/* Play Button */
.zelic-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(212, 237, 109, 0.95);
    border: none;
    border-radius: var(--zelic-radius-circle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--zelic-transition-medium);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.zelic-play-button svg {
    width: 32px;
    height: 32px;
    color: var(--zelic-text-dark);
    margin-left: 4px;
}

.zelic-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 32px rgba(212, 237, 109, 0.4);
}

.zelic-play-button:focus {
    outline: 2px solid var(--zelic-text-white);
    outline-offset: 4px;
}

/* Featured Content Area */
.zelic-featured-content {
    padding: var(--zelic-space-3xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--zelic-text-white);
}

.zelic-featured-label {
    color: var(--zelic-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--zelic-space-md);
}

.zelic-featured-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--zelic-space-sm);
    line-height: 1.2;
    color: var(--zelic-text-white);
}

.zelic-featured-tagline {
    font-size: 18px;
    font-weight: 600;
    color: var(--zelic-text-white);
    margin-bottom: var(--zelic-space-base);
}

.zelic-featured-description {
    color: var(--zelic-text-muted-light);
    margin-bottom: var(--zelic-space-xl);
    font-size: 15px;
}

/* Feature List in Featured Card */
.zelic-feature-list {
    list-style: none;
    margin: 0 0 var(--zelic-space-2xl) 0;
    padding: 0;
}

.zelic-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--zelic-space-md);
    margin-bottom: var(--zelic-space-md);
    font-size: 15px;
}

.zelic-feature-list li:last-child {
    margin-bottom: 0;
}

.zelic-feature-list li span strong {
    color: var(--zelic-text-white);
}

.zelic-feature-list li span {
    color: var(--zelic-text-muted-light);
}

/* Check Icon (wiederverwendbar) */
.zelic-check-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--zelic-primary);
    margin-top: 2px;
}

/* Leistungen Buttons */
.zelic-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--zelic-space-sm);
    background: var(--zelic-bg-button-dark);
    color: var(--zelic-text-white);
    padding: 14px 28px;
    border-radius: var(--zelic-radius-pill);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: var(--zelic-transition-medium);
    align-self: flex-start;
}

.zelic-btn-primary:hover {
    background: var(--zelic-bg-element-dark-hover);
    color: var(--zelic-text-white);
    text-decoration: none !important;
}

.zelic-btn-primary:focus {
    outline: 2px solid var(--zelic-primary);
    outline-offset: 2px;
}

.zelic-btn-primary-glow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--zelic-primary);
    color: var(--zelic-text-dark);
    padding: 14px 28px;
    border-radius: var(--zelic-radius-pill);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: var(--zelic-transition-medium);
    align-self: center;
    box-shadow: var(--zelic-glow-md);
}

.zelic-btn-primary-glow svg {
    width: 18px;
    height: 18px;
    stroke: var(--zelic-text-dark);
}

.zelic-btn-primary-glow:hover {
    background: var(--zelic-primary-light);
    color: var(--zelic-text-dark);
    text-decoration: none !important;
    box-shadow: var(--zelic-glow-lg);
    transform: translateY(-2px);
}

.zelic-btn-primary-glow:focus {
    outline: 2px solid var(--zelic-text-white);
    outline-offset: 2px;
}

/* --- Carousel Container --- */
.zelic-carousel-wrapper {
    position: relative;
}

.zelic-carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--zelic-space-xl);
}

.zelic-carousel-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--zelic-text-white);
    margin: 0;
}

/* Carousel Navigation Buttons */
.zelic-carousel-nav {
    display: flex;
    gap: var(--zelic-space-md);
}

.zelic-carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--zelic-radius-circle);
    background: var(--zelic-bg-element-dark);
    border: 1px solid var(--zelic-border-dark-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--zelic-transition-medium);
    padding: 0;
}

.zelic-carousel-btn:hover {
    background: var(--zelic-bg-element-dark-hover);
    border-color: var(--zelic-border-dark-light);
}

.zelic-carousel-btn:focus {
    outline: 2px solid var(--zelic-primary);
    outline-offset: 2px;
}

.zelic-carousel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.zelic-carousel-btn svg {
    width: 24px;
    height: 24px;
    color: var(--zelic-text-white);
}

/* Carousel Track */
.zelic-carousel-track-container {
    overflow: hidden;
    border-radius: var(--zelic-radius-2xl);
}

.zelic-carousel-track {
    display: flex;
    gap: var(--zelic-space-xl);
    transition: var(--zelic-transition-carousel);
}

/* --- Service Cards --- */
.zelic-service-card {
    flex: 0 0 calc(50% - 12px);
    background: var(--zelic-bg-card-dark);
    border-radius: var(--zelic-radius-2xl);
    padding: var(--zelic-space-2xl);
    transition: var(--zelic-transition-medium);
    display: flex;
    flex-direction: column;
    min-height: 380px;
    position: relative;
}

.zelic-service-card.has-pill {
    margin-top: 20px;
}

.zelic-service-card:hover {
    background: var(--zelic-bg-element-dark);
    transform: translateY(-4px);
}

.zelic-service-card:focus-within {
    outline: 2px solid var(--zelic-primary);
    outline-offset: 2px;
}

/* --- Recommended Pill Badge --- */
.zelic-recommended-pill {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--zelic-primary);
    color: var(--zelic-text-dark);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--zelic-radius-pill);
    display: flex;
    align-items: center;
    gap: var(--zelic-space-sm);
    white-space: nowrap;
    box-shadow: var(--zelic-glow-pill);
    z-index: 10;
    text-decoration: none !important;
}

.zelic-recommended-pill svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* --- Card Header --- */
.zelic-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--zelic-space-base);
    margin-bottom: var(--zelic-space-lg);
}

.zelic-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--zelic-primary) 0%, var(--zelic-primary-dark) 100%);
    border-radius: var(--zelic-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zelic-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--zelic-text-dark);
}

.zelic-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--zelic-space-xs);
}

.zelic-card-label {
    color: var(--zelic-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zelic-card-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zelic-text-white);
    margin: 0;
}

.zelic-card-description {
    color: var(--zelic-text-muted-light);
    font-size: 15px;
    margin-bottom: 14px;
}

/* --- Card Features List --- */
.zelic-card-features {
    list-style: none;
    margin: 0 0 var(--zelic-space-lg) 0;
    padding: 0;
    flex-grow: 1;
}

.zelic-card-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--zelic-text-muted-light);
}

.zelic-card-features li:last-child {
    margin-bottom: 0;
}

.zelic-card-features .zelic-check-icon {
    width: 18px;
    height: 18px;
}

/* --- Card Footer --- */
.zelic-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--zelic-space-lg);
    border-top: 1px solid var(--zelic-border-dark);
    gap: var(--zelic-space-md);
    flex-wrap: wrap;
}

.zelic-tags {
    display: flex;
    gap: var(--zelic-space-sm);
}

.zelic-tag {
    background: var(--zelic-bg-element-dark);
    color: var(--zelic-text-muted-light);
    padding: 6px 12px;
    border-radius: var(--zelic-radius-pill);
    font-size: 12px;
    font-weight: 500;
}

.zelic-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--zelic-space-sm);
    background: var(--zelic-primary);
    color: var(--zelic-text-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 10px 20px;
    border-radius: var(--zelic-radius-pill);
    transition: var(--zelic-transition-medium);
    box-shadow: var(--zelic-glow-sm);
}

.zelic-card-link:hover {
    background: var(--zelic-primary-light);
    color: var(--zelic-text-dark);
    text-decoration: none !important;
    box-shadow: var(--zelic-glow-md);
    transform: translateY(-2px);
}

.zelic-card-link:focus {
    outline: 2px solid var(--zelic-text-white);
    outline-offset: 2px;
}

.zelic-card-link svg {
    width: 16px;
    height: 16px;
    stroke: var(--zelic-text-dark);
    fill: none;
    transition: transform 0.3s ease;
}

.zelic-card-link:hover svg {
    transform: translateX(3px);
}

/* --- Carousel Indicators --- */
.zelic-carousel-indicators {
    display: flex;
    justify-content: center;
    gap: var(--zelic-space-sm);
    margin-top: var(--zelic-space-2xl);
}

.zelic-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--zelic-radius-circle);
    background: var(--zelic-border-dark-medium);
    border: none;
    cursor: pointer;
    transition: var(--zelic-transition-medium);
    padding: 0;
}

.zelic-indicator.active {
    background: var(--zelic-primary);
    width: 32px;
    border-radius: var(--zelic-radius-sm);
}

.zelic-indicator:hover:not(.active) {
    background: var(--zelic-bg-button-dark);
}

.zelic-indicator:focus {
    outline: 2px solid var(--zelic-primary);
    outline-offset: 2px;
}

/* --- Mobile Elements (Hidden on Desktop) --- */
.zelic-scroll-hint {
    display: none;
}

/* Fix für gleiche Card-Höhen im Carousel (Mobile) */
@media (max-width: 768px) {
    /* Alle Carousel-Karten gleicher margin-top */
    .zelic-carousel-track .zelic-service-card {
        min-height: 420px;
        display: flex;
        flex-direction: column;
        margin-top: var(--zelic-space-base); /* Alle gleich */
    }
    
    .zelic-carousel-track .zelic-card-features {
        flex-grow: 1;
    }
    /* Featured Card Mobile Fix */
    @media (max-width: 768px) {
    .zelic-featured-card {
        grid-template-columns: 1fr; /* Eine Spalte statt zwei */
        margin-bottom: var(--zelic-space-2xl);
    }
}
    
    .zelic-carousel-track .zelic-card-footer {
        margin-top: auto;
    }
}

@media (max-width: 480px) {
    .zelic-carousel-track .zelic-service-card {
        min-height: 400px;
    }
}

/* --- Leistungen Responsive: Mobile (768px) --- */
@media (max-width: 768px) {
    /* Section Container */
    .zelic-leistungen-section {
        padding: var(--zelic-space-3xl) var(--zelic-space-base);
    }

    /* Section Header */
    .zelic-leistungen-header {
        margin-bottom: var(--zelic-space-2xl);
    }

    .zelic-leistungen-label {
        font-size: 12px;
        padding: 5px 12px;
    }

    /* Featured Card */
    .zelic-featured-card {
        margin-bottom: var(--zelic-space-2xl);
    }

    .zelic-featured-video {
        aspect-ratio: 16 / 9;
        min-height: 200px;
    }

    .zelic-play-button {
        width: 64px;
        height: 64px;
    }

    .zelic-play-button svg {
        width: 26px;
        height: 26px;
        margin-left: 3px;
    }

    .zelic-featured-content {
        padding: 24px 20px;
    }

    .zelic-featured-label {
        font-size: 11px;
        margin-bottom: var(--zelic-space-sm);
    }

    .zelic-featured-title {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .zelic-featured-tagline {
        font-size: 14px;
        margin-bottom: var(--zelic-space-md);
    }

    .zelic-featured-description {
        font-size: 14px;
        margin-bottom: var(--zelic-space-base);
    }

    /* Feature List - Mobile */
    .zelic-feature-list {
        margin-bottom: var(--zelic-space-lg);
    }

    .zelic-feature-list li {
        font-size: 13px;
        gap: 10px;
        margin-bottom: 10px;
    }

    .zelic-check-icon {
        width: 18px;
        height: 18px;
    }

    /* Buttons - Mobile (volle Breite) */
    .zelic-btn-primary {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 14px;
    }

    .zelic-btn-primary-glow {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 14px;
        box-sizing: border-box;
    }

    /* Carousel Header - Mobile */
    .zelic-carousel-header {
        margin-bottom: var(--zelic-space-base);
    }

    .zelic-carousel-title {
        font-size: 16px;
    }

    .zelic-carousel-nav {
        display: none;
    }

    /* Scroll Hint - Mobile */
    .zelic-scroll-hint {
        display: flex;
        align-items: center;
        gap: var(--zelic-space-xs);
        font-size: 12px;
        color: var(--zelic-text-muted-light);
    }

    .zelic-scroll-hint svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        animation: zelicSwipe 1.5s ease-in-out infinite;
    }

    @keyframes zelicSwipe {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(4px); }
    }

    /* Carousel Track - Mobile Swipe */
    .zelic-carousel-track-container {
        overflow: visible;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .zelic-carousel-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 20px 16px 16px 16px;
        gap: var(--zelic-space-md);
        transition: none;
    }

    .zelic-carousel-track::-webkit-scrollbar {
        display: none;
    }

    /* Service Cards - Mobile */
    .zelic-service-card {
        flex: 0 0 280px;
        min-height: auto;
        padding: var(--zelic-space-xl);
        scroll-snap-align: start;
    }

    .zelic-service-card.has-pill {
        margin-top: var(--zelic-space-base);
    }

    .zelic-service-card:hover {
        transform: none;
    }

    /* Recommended Pill - Mobile */
    .zelic-recommended-pill {
        font-size: 11px;
        padding: 6px 14px;
        gap: 5px;
        top: -14px;
    }

    .zelic-recommended-pill svg {
        width: 12px;
        height: 12px;
    }

    /* Card Header - Mobile */
    .zelic-card-header {
        flex-direction: column;
        gap: var(--zelic-space-md);
        margin-bottom: var(--zelic-space-base);
    }

    .zelic-card-icon {
        width: 40px;
        height: 40px;
    }

    .zelic-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .zelic-card-label {
        font-size: 11px;
    }

    .zelic-card-title {
        font-size: 18px;
    }

    .zelic-card-description {
        font-size: 13px;
        margin-bottom: var(--zelic-space-base);
    }

    /* Card Features - Mobile */
    .zelic-card-features li {
        font-size: 12px;
        gap: var(--zelic-space-sm);
        margin-bottom: 6px;
    }

    .zelic-card-features .zelic-check-icon {
        width: 14px;
        height: 14px;
    }

    /* Card Footer - Mobile */
    .zelic-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--zelic-space-md);
        padding-top: var(--zelic-space-base);
    }

    .zelic-card-footer .zelic-tags {
        order: 2;
        justify-content: center;
    }

    .zelic-tag {
        font-size: 11px;
        padding: 5px 10px;
    }

    .zelic-card-link {
        font-size: 12px;
        padding: 10px 20px;
        justify-content: center;
        order: 1;
    }

    /* Carousel Indicators - Mobile */
    .zelic-carousel-indicators {
        margin-top: var(--zelic-space-lg);
        gap: 6px;
    }

    .zelic-indicator {
        width: 6px;
        height: 6px;
    }

    .zelic-indicator.active {
        width: 24px;
        border-radius: 3px;
    }
}

/* --- Leistungen Responsive: Small Mobile (480px) --- */
@media (max-width: 480px) {
    .zelic-leistungen-section {
        padding: 40px 12px;
    }

    .zelic-service-card {
        flex: 0 0 260px;
        padding: var(--zelic-space-lg);
    }

    .zelic-carousel-track {
        padding: 20px 12px 12px 12px;
    }

    .zelic-carousel-track-container {
        margin: 0 -12px;
        padding: 0 12px;
    }
}


/* =================================================================================
   12. CARD HOVER EFFECT
   Was: Wiederverwendbarer Hover-Effekt fuer Spectra Info Boxes
   Wo: Beliebige Cards die einen gruenen Strich + Hover bekommen sollen
   Klasse: zelic-card-hover
   
   VERWENDUNG:
   Spectra Info Box > Erweitert > CSS-Klassen > zelic-card-hover
   ================================================================================= */

/* Base: Transition + Position fuer ::before */
.zelic-card-hover {
    position: relative !important;
    overflow: hidden !important;
    background: var(--zelic-bg-white) !important;
    border: 2px solid transparent !important;
    box-shadow: 0 4px 16px rgba(26, 29, 33, 0.18) !important;
    transition: var(--zelic-transition-smooth) !important;
}

/* Gruener Strich oben - versteckt by default */
.zelic-card-hover::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: var(--zelic-primary) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.35s ease !important;
    z-index: 10 !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Hover State */
.zelic-card-hover:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(26, 29, 33, 0.18) !important;
    border-color: var(--zelic-primary) !important;
}

.zelic-card-hover:hover::before {
    transform: scaleX(1) !important;
}

/* Icon Scale bei Hover */
.zelic-card-hover:hover .uagb-ifb-icon,
.zelic-card-hover:hover .uagb-infobox-icon-wrap {
    transform: scale(1.05) !important;
    transition: transform 0.35s ease !important;
}

/* --- Card Hover Responsive: Mobile --- */
@media (max-width: 480px) {
    /* Kein Hover-Transform auf Mobile */
    .zelic-card-hover:hover {
        transform: none !important;
    }
    /* Touch-State stattdessen */
    .zelic-card-hover:active {
        transform: scale(0.98) !important;
        border-color: var(--zelic-primary) !important;
    }
    .zelic-card-hover:active::before {
        transform: scaleX(1) !important;
    }
}

/* --- Card Hover: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .zelic-card-hover,
    .zelic-card-hover::before,
    .zelic-card-hover .uagb-ifb-icon {
        transition: none !important;
    }
}


/* =================================================================================
   13. ICON BOX LIME STYLE
   Was: Lime-farbige Icon-Box fuer Spectra Info Boxes
   Wo: Feature-Cards, Info-Boxes mit gruenen Icons
   Klasse: zelic-icon-lime
   
   VERWENDUNG:
   Spectra Info Box > Erweitert > CSS-Klassen > zelic-icon-lime
   ================================================================================= */

/* Wrapper reset */
.zelic-icon-lime .uagb-ifb-icon,
.zelic-icon-lime .uagb-infobox-icon-wrap,
.zelic-icon-lime .uagb-ifb-icon-wrap {
    background: transparent !important;
}

/* Der SPAN der das SVG enthaelt */
.zelic-icon-lime .uagb-ifb-icon span,
.zelic-icon-lime .uagb-ifb-icon-wrap span,
.zelic-icon-lime .uagb-infobox-icon-wrap span {
    background: var(--zelic-primary) !important;
    border-radius: var(--zelic-radius-base) !important;
    padding: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.35s ease !important;
}

/* Icon selbst (SVG) - dunkel */
.zelic-icon-lime .uagb-ifb-icon svg,
.zelic-icon-lime .uagb-infobox-icon-wrap svg,
.zelic-icon-lime .uagb-ifb-icon-wrap svg {
    stroke: var(--zelic-text-dark-heading) !important;
    fill: none !important;
    color: var(--zelic-text-dark-heading) !important;
}

/* Hover: leichtes Scale */
.zelic-icon-lime:hover .uagb-ifb-icon span,
.zelic-icon-lime:hover .uagb-infobox-icon-wrap span,
.zelic-icon-lime:hover .uagb-ifb-icon-wrap span {
    transform: scale(1.05) !important;
}

/* Alternative: Icon-Wrap Container bekommt den Style */
.zelic-icon-lime .uagb-ifb-icon-wrap {
    background: var(--zelic-primary) !important;
    border-radius: var(--zelic-radius-base) !important;
    padding: 12px !important;
    width: fit-content !important;
    height: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.35s ease !important;
}

/* Icon (SVG) */
.zelic-icon-lime .uagb-ifb-icon-wrap svg {
    stroke: var(--zelic-text-dark-alt) !important;
    fill: var(--zelic-text-dark-alt) !important;
    color: var(--zelic-text-dark-alt) !important;
    display: block !important;
}

/* Falls das Icon Pfade hat */
.zelic-icon-lime .uagb-ifb-icon-wrap svg path {
    stroke: var(--zelic-text-dark-alt) !important;
    fill: var(--zelic-text-dark-alt) !important;
}

/* Hover: leichtes Scale */
.zelic-icon-lime:hover .uagb-ifb-icon-wrap {
    transform: scale(1.05) !important;
}


/* =================================================================================
   14. EXPERTEN MARQUEE
   Was: Auto-Scroll Karussell fuer Experten-Avatare
   Wo: Startseite, Experten-Section
   Wie: HTML-Block mit experten-marquee-wrapper
   Effekt: CSS Mask fuer sanftes Ausblenden an den Raendern
   
   UPDATE v2.1: Hardcoded fonts durch var(--zelic-font-body) ersetzt
   ================================================================================= */

/* Container mit CSS Mask Fade */
.experten-marquee-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
}

/* Track Animation */
.experten-marquee-track {
    display: flex;
    animation: expertenMarquee 60s linear infinite;
    width: fit-content;
}

.experten-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes expertenMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Experte Item */
.experte-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 72px;
    flex-shrink: 0;
    cursor: default;
    transition: transform 0.3s ease;
}

.experte-item:hover {
    transform: translateY(-8px);
}

/* Avatar */
.experte-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--zelic-bg-white);
    border: 4px solid rgba(10, 10, 10, 0.08);
    margin-bottom: 28px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.experte-item:hover .experte-avatar {
    border-color: var(--zelic-primary-dark);
    box-shadow: 0 12px 40px rgba(184, 212, 74, 0.35);
}

.experte-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Name */
.experte-name {
    font-family: var(--zelic-font-body);
    font-size: 26px;
    font-weight: 600;
    color: var(--zelic-text-dark);
    margin-bottom: 14px;
    white-space: nowrap;
}

/* Fachgebiet Badge */
.experte-fachgebiet {
    display: inline-block;
    font-family: var(--zelic-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--zelic-text-dark);
    background: var(--zelic-primary);
    padding: 8px 20px;
    border-radius: 100px;
    white-space: nowrap;
    text-decoration: none;
}

/* --- Experten Marquee Responsive --- */
@media (max-width: 1024px) {
    .experte-item {
        padding: 36px 56px;
    }

    .experte-avatar {
        width: 170px;
        height: 170px;
    }

    .experte-name {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .experten-marquee-wrapper {
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%
        );
    }

    .experte-item {
        padding: 28px 44px;
    }

    .experte-avatar {
        width: 140px;
        height: 140px;
    }

    .experte-name {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .experte-fachgebiet {
        font-size: 13px;
        padding: 6px 14px;
    }
}

@media (max-width: 480px) {
    .experte-item {
        padding: 24px 32px;
    }

    .experte-avatar {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }

    .experte-name {
        font-size: 18px;
    }

    .experte-fachgebiet {
        font-size: 12px;
        padding: 5px 12px;
    }
}



/* [A7] Abschnitt "15. PILL BADGES" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */

/* [A7] Abschnitt "16. HERO META SECTION" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */
/* =================================================================================
   17. SECTION GRADIENT
   Was: Dunkler Gradient-Hintergrund fuer Sections
   Wo: Dark Sections mit subtiler Tiefe
   ================================================================================= */

.zelic-section-gradient {
    background: 
        radial-gradient(ellipse 100% 50% at 50% 0%, rgba(255,255,255,0.02) 0%, transparent 50%),
        linear-gradient(180deg, var(--zelic-bg-card-dark) 0%, var(--zelic-bg-dark-medium) 100%) !important;
}


/* =================================================================================
   18. RESULTS CARD
   Was: Ergebnis-Card mit Icon-Liste fuer Dark Sections
   Wo: Landingpages, Solution-Sections
   Verwendet: .zelic-card-icon (bestehend) + --dark Modifier
   ================================================================================= */

/* --- Results Card Container --- */
.zelic-results-card {
    background: var(--zelic-bg-card-dark);
    border-radius: var(--zelic-radius-2xl);
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: var(--zelic-transition-medium);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.zelic-results-card::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(212, 237, 109, 0.12) 0%, rgba(212, 237, 109, 0.05) 30%, rgba(212, 237, 109, 0.02) 50%, transparent 70%);
    filter: blur(40px);
    opacity: 0.8;
    pointer-events: none;
}

.zelic-results-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
}

/* --- Results Title --- */
.zelic-results-title {
    font-family: var(--zelic-font-body);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 32px;
    position: relative;
    color: var(--zelic-text-white);
}

/* --- Result List --- */
.zelic-result-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

/* --- Result Item --- */
.zelic-result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--zelic-transition);
}

.zelic-result-item:hover {
    transform: translateX(6px);
}

/* --- Result Content --- */
.zelic-result-content {
    flex: 1;
}

/* --- Result Text --- */
.zelic-result-text {
    font-family: var(--zelic-font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--zelic-text-muted-light);
    margin: 0;
}

.zelic-result-text strong {
    color: var(--zelic-text-white);
    font-weight: 600;
}

/* --- Card Icon Dark Modifier --- */
.zelic-card-icon--dark {
    background: linear-gradient(135deg, var(--zelic-bg-dark) 0%, var(--zelic-bg-element-dark) 100%) !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--zelic-radius-md);
    align-self: center;
}

.zelic-card-icon--dark svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    stroke: none;
    fill: var(--zelic-primary);
}

/* Hover: Icon invertiert */
.zelic-result-item:hover .zelic-card-icon--dark {
    background: linear-gradient(135deg, var(--zelic-primary) 0%, var(--zelic-primary) 100%) !important;
    box-shadow: var(--zelic-glow-md);
}

.zelic-result-item:hover .zelic-card-icon--dark svg {
    fill: var(--zelic-bg-dark);
}

/* --- Results Card Responsive --- */
@media (max-width: 1024px) {
    .zelic-results-card { padding: 32px; }
    .zelic-results-card:hover { transform: none; }
    .zelic-results-title { font-size: 20px; margin-bottom: 28px; text-align: center; }
    .zelic-result-list { gap: 20px; }
    .zelic-result-item { gap: 14px; }
    .zelic-result-item:hover { transform: none; }
    .zelic-card-icon--dark { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
    .zelic-card-icon--dark svg { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }
    .zelic-result-text { font-size: 14px; }
}

@media (max-width: 768px) {
    .zelic-results-card { padding: 28px 24px; border-radius: var(--zelic-radius-xl); }
    .zelic-results-card::before { width: 250px; height: 250px; top: -100px; right: -100px; }
    .zelic-results-title { font-size: 18px; margin-bottom: 24px; }
    .zelic-result-list { gap: 18px; }
    .zelic-result-item { gap: 12px; }
    .zelic-card-icon--dark { width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: var(--zelic-radius-base); }
    .zelic-card-icon--dark svg { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }
}

@media (max-width: 480px) {
    .zelic-results-card { padding: 24px 20px; border-radius: var(--zelic-radius-lg); }
    .zelic-results-title { font-size: 17px; margin-bottom: 20px; }
    .zelic-result-list { gap: 16px; }
    .zelic-result-item { gap: 12px; }
    .zelic-card-icon--dark { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
    .zelic-card-icon--dark svg { width: 16px; height: 16px; min-width: 16px; min-height: 16px; }
    .zelic-result-text { font-size: 13px; }
    
    /* Touch activation */
    .zelic-result-item:active .zelic-card-icon--dark {
        background: linear-gradient(135deg, var(--zelic-primary) 0%, var(--zelic-primary) 100%) !important;
        box-shadow: var(--zelic-glow-md);
    }
    .zelic-result-item:active .zelic-card-icon--dark svg {
        fill: var(--zelic-bg-dark);
    }
}
/* =================================================================================
   19. PHASE CAROUSEL LIGHT (zelic-pcl-)
   Version: 1.0
   
   Verwendung: 4-Karten-Carousel mit Segmented Control
   Prefix: zelic-pcl-
   ================================================================================= */

/* WRAPPER */
.zelic-pcl-wrapper {
    font-family: var(--zelic-font-body) !important;
    background: var(--zelic-bg-white) !important;
    color: var(--zelic-text-dark) !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
    padding: 70px 0 90px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.zelic-pcl-wrapper *,
.zelic-pcl-wrapper *::before,
.zelic-pcl-wrapper *::after {
    box-sizing: border-box !important;
}

/* --- Segmented Control (Tabs) --- */
.zelic-pcl-segmented {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 50px !important;
    padding: 0 20px !important;
}

.zelic-pcl-segmented-inner {
    display: inline-flex !important;
    background: var(--zelic-bg-light) !important;
    border-radius: 50px !important;
    padding: 6px !important;
    position: relative !important;
    box-shadow: none !important;
    border: 1px solid var(--zelic-border-light) !important;
    gap: 4px !important;
}

.zelic-pcl-segmented-slider {
    display: none !important;
}

.zelic-pcl-segmented-btn {
    position: relative !important;
    z-index: 1 !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 50px !important;
    background: transparent !important;
    font-family: var(--zelic-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--zelic-text-muted) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    outline: none !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

.zelic-pcl-segmented-btn:last-child {
    border-right: none !important;
}

.zelic-pcl-segmented-btn.active {
    color: var(--zelic-text-dark) !important;
    background: var(--zelic-primary) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.zelic-pcl-segmented-btn:hover:not(.active) {
    color: var(--zelic-text-dark) !important;
    background: rgba(0,0,0,0.03) !important;
}

.zelic-pcl-segmented-btn:focus-visible {
    outline: 2px solid var(--zelic-primary) !important;
    outline-offset: 2px !important;
}

/* --- Carousel --- */
.zelic-pcl-carousel {
    position: relative !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 80px !important;
}

.zelic-pcl-carousel-viewport {
    overflow: visible !important;
    padding: 16px 0 !important;
    width: 100% !important;
}

.zelic-pcl-carousel-track {
    display: flex !important;
    gap: 24px !important;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
}

/* --- Phase Card --- */
.zelic-pcl-card {
    flex: 0 0 780px !important;
    background: var(--zelic-bg-white) !important;
    border-radius: var(--zelic-radius-3xl) !important;
    padding: 36px 40px 0 40px !important;
    box-shadow: var(--zelic-shadow-md) !important;
    border: 1px solid var(--zelic-border-light) !important;
    transition: var(--zelic-transition-smooth) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 440px !important;
    opacity: 0.4 !important;
}

.zelic-pcl-card.active {
    opacity: 1 !important;
    box-shadow: var(--zelic-shadow-xl) !important;
    border-color: var(--zelic-primary) !important;
}

.zelic-pcl-card:hover {
    transform: translateY(-4px) !important;
}

.zelic-pcl-card.active:hover {
    transform: translateY(-6px) !important;
}

/* Card Header */
.zelic-pcl-card-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.zelic-pcl-card-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    background: linear-gradient(135deg, var(--zelic-primary) 0%, var(--zelic-primary-dark) 100%) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--zelic-transition-smooth) !important;
}

.zelic-pcl-card:hover .zelic-pcl-card-icon {
    background: linear-gradient(135deg, var(--zelic-bg-dark-medium) 0%, var(--zelic-bg-element-dark) 100%) !important;
}

.zelic-pcl-card-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: var(--zelic-text-dark) !important;
    transition: var(--zelic-transition-smooth) !important;
}

.zelic-pcl-card:hover .zelic-pcl-card-icon svg {
    fill: var(--zelic-primary) !important;
}

.zelic-pcl-card-header-text {
    flex: 1 !important;
    padding-top: 4px !important;
}

.zelic-pcl-card-title {
    font-family: var(--zelic-font-body) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--zelic-text-dark) !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    border: none !important;
}

.zelic-pcl-card-subtitle {
    font-family: var(--zelic-font-body) !important;
    font-size: 15px !important;
    font-style: italic !important;
    color: var(--zelic-text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Card Body */
.zelic-pcl-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.zelic-pcl-card-description {
    font-family: var(--zelic-font-body) !important;
    font-size: 15px !important;
    color: var(--zelic-text-muted) !important;
    line-height: 1.7 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

/* Two Column Layout */
.zelic-pcl-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    flex: 1 !important;
}

.zelic-pcl-column-title {
    font-family: var(--zelic-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--zelic-text-muted) !important;
    margin: 0 0 14px 0 !important;
    padding: 0 0 10px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--zelic-border-light) !important;
}

.zelic-pcl-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.zelic-pcl-list-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 7px 0 !important;
    font-family: var(--zelic-font-body) !important;
    font-size: 14px !important;
    color: var(--zelic-text-muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.zelic-pcl-list-item svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* Transformation Liste - Chevron (stroke) */
.zelic-pcl-column-transform .zelic-pcl-list-item svg {
    fill: none !important;
    stroke: var(--zelic-text-muted) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 0.5 !important;
}

/* Ergebnisse Liste - Check (fill) */
.zelic-pcl-column-results .zelic-pcl-list-item svg {
    fill: var(--zelic-primary-dark) !important;
    stroke: none !important;
    opacity: 1 !important;
}

/* Card Footer */
.zelic-pcl-card-footer {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: linear-gradient(135deg, var(--zelic-primary), var(--zelic-primary-hover)) !important;
    margin: 20px -40px 0 -40px !important;
    padding: 18px 40px !important;
    border-radius: 0 0 var(--zelic-radius-3xl) var(--zelic-radius-3xl) !important;
    border: none !important;
}

.zelic-pcl-footer-icon {
    width: 38px !important;
    height: 38px !important;
    background: rgba(0,0,0,0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.zelic-pcl-footer-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--zelic-text-dark) !important;
}

.zelic-pcl-footer-text {
    font-family: var(--zelic-font-body) !important;
    font-size: 14px !important;
    color: var(--zelic-text-dark) !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.zelic-pcl-footer-text strong {
    font-weight: 700 !important;
}

/* --- Navigation Arrows --- */
.zelic-pcl-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--zelic-transition-smooth) !important;
    z-index: 10 !important;
    padding: 0 !important;
    outline: none !important;
}

.zelic-pcl-nav:hover {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.zelic-pcl-nav:hover svg {
    stroke: var(--zelic-text-dark) !important;
    transform: scale(1.1) !important;
}

.zelic-pcl-nav svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--zelic-text-muted) !important;
    stroke-width: 2 !important;
    fill: none !important;
    background: none !important;
    transition: var(--zelic-transition-smooth) !important;
}

.zelic-pcl-nav-prev { 
    left: 20px !important; 
}

.zelic-pcl-nav-next { 
    right: 20px !important; 
}

.zelic-pcl-nav:disabled {
    opacity: 0.2 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.zelic-pcl-nav:focus-visible {
    outline: 2px solid var(--zelic-primary) !important;
    outline-offset: 2px !important;
}

/* --- Dots Navigation --- */
.zelic-pcl-dots {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 32px !important;
    padding: 0 !important;
}

.zelic-pcl-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--zelic-border-medium) !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--zelic-transition-smooth) !important;
    padding: 0 !important;
    outline: none !important;
}

.zelic-pcl-dot.active {
    width: 32px !important;
    border-radius: 4px !important;
    background: var(--zelic-primary) !important;
}

.zelic-pcl-dot:hover:not(.active) {
    background: var(--zelic-text-muted) !important;
}

/* --- Phase Carousel Responsive --- */
@media (max-width: 1200px) {
    .zelic-pcl-card {
        flex: 0 0 680px !important;
    }
}

@media (max-width: 900px) {
    .zelic-pcl-wrapper {
        padding: 50px 0 70px !important;
    }

    .zelic-pcl-segmented-inner {
        flex-wrap: wrap !important;
        max-width: 400px !important;
        gap: 4px !important;
        border-radius: 20px !important;
        padding: 6px !important;
    }

    .zelic-pcl-segmented-btn {
        flex: 1 1 45% !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
        text-align: center !important;
        border-radius: 30px !important;
    }

    .zelic-pcl-segmented-btn.active {
        background: var(--zelic-primary) !important;
    }

    .zelic-pcl-card {
        flex: 0 0 480px !important;
        padding: 28px 32px 0 32px !important;
        min-height: auto !important;
    }

    .zelic-pcl-columns {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .zelic-pcl-card-footer {
        margin: 20px -32px 0 -32px !important;
        padding: 16px 32px !important;
    }

    .zelic-pcl-carousel {
        padding: 0 50px !important;
    }
}

@media (max-width: 600px) {
    .zelic-pcl-carousel {
        padding: 0 16px !important;
    }

    .zelic-pcl-card {
        flex: 0 0 calc(100vw - 32px) !important;
        padding: 24px 24px 0 24px !important;
    }

    .zelic-pcl-card-footer {
        margin: 18px -24px 0 -24px !important;
        padding: 16px 24px !important;
    }

    .zelic-pcl-nav {
        display: none !important;
    }

    .zelic-pcl-card-title {
        font-size: 20px !important;
    }

    .zelic-pcl-card-description {
        font-size: 14px !important;
    }

    .zelic-pcl-list-item {
        font-size: 13px !important;
    }
}


/* [A7] Abschnitt "BOTTOM NAVIGATION - Pfeile + Dots unten zentriert" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */
/* =================================================================================
   ZELIC TESTIMONIALS SECTION - COMPLETE CSS
   Version: 2.0 (Expanded Cards - Kein Modal)
   
   CHANGELOG:
   - v1.1: CSS-Variablen integriert
   - v1.2: Modal-Fix mit !important
   - v1.3: Spacing-Fix + Company-Badge-Fix + Featured-Left Spacing
   - v1.4: overflow: hidden für runde Bilder (Featured, Cards, Modal)
   - v2.0: Expanded Cards mit sichtbaren Zitaten, Modal entfernt
   ================================================================================= */

/* =================================================================================
   SECTION CONTAINER
   ================================================================================= */
.zelic-testimonials-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--zelic-space-2xl) var(--zelic-space-xl) var(--zelic-space-3xl);
    font-family: var(--zelic-font-body);
}

.zelic-testimonials-section .section-label {
    font-family: var(--zelic-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zelic-text-muted);
    text-align: center;
    margin-bottom: var(--zelic-space-base);
}

.zelic-testimonials-section .section-title {
    font-family: var(--zelic-font-body);
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--zelic-space-4xl);
    letter-spacing: -0.02em;
    color: var(--zelic-text-dark-alt);
}

/* =================================================================================
   FEATURED TESTIMONIAL (Hauptzitat oben)
   ================================================================================= */
.zelic-featured-testimonial {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto var(--zelic-space-3xl);
    padding: var(--zelic-space-3xl);
    background: var(--zelic-bg-white);
    border-radius: var(--zelic-radius-3xl);
    border: 1px solid var(--zelic-border-light);
    box-shadow: var(--zelic-shadow-md);
}

/* Featured: Linke Seite (Bild + Info) */
.zelic-featured-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
}

.zelic-featured-image {
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
    background: #D4ED6D !important;
    border: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.zelic-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Featured Info Container - kompakte Abstände */
.zelic-featured-left > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.zelic-featured-name {
    font-family: var(--zelic-font-body) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--zelic-text-dark-alt) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.zelic-featured-role {
    font-family: var(--zelic-font-body) !important;
    font-size: 14px !important;
    color: var(--zelic-text-muted) !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.zelic-company-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--zelic-bg-light-alt) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    margin: 6px 0 0 0 !important;
    font-family: var(--zelic-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--zelic-text-dark-alt) !important;
}

.zelic-company-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Featured: Rechte Seite (Zitat) */
.zelic-featured-right {
    position: relative;
    text-align: center;
}

.zelic-featured-quote {
    font-family: var(--zelic-font-body);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--zelic-text-dark-alt);
    margin: 0;
    padding: 0;
}

/* =================================================================================
   WEITERE STIMMEN GRID
   ================================================================================= */
.zelic-more-testimonials {
    max-width: 1000px;
    margin: 0 auto;
}

.zelic-more-title {
    font-family: var(--zelic-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--zelic-text-muted);
    margin-bottom: var(--zelic-space-2xl);
    display: flex;
    align-items: center;
    gap: var(--zelic-space-base);
}

.zelic-more-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--zelic-border-light);
}

.zelic-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--zelic-space-lg);
}

/* =================================================================================
   EXPANDED TESTIMONIAL CARDS (mit sichtbarem Zitat)
   ================================================================================= */
.zelic-testimonial-card-expanded {
    background: var(--zelic-bg-white);
    border-radius: var(--zelic-radius-xl);
    padding: var(--zelic-space-xl);
    border: 1px solid var(--zelic-border-light);
    box-shadow: var(--zelic-shadow-md);
    transition: var(--zelic-transition-smooth);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Grüner Balken oben - versteckt by default */
.zelic-testimonial-card-expanded::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--zelic-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
    z-index: 10;
    border-radius: var(--zelic-radius-xl) var(--zelic-radius-xl) 0 0;
}

/* Hover State */
.zelic-testimonial-card-expanded:hover {
    transform: translateY(-4px);
    box-shadow: var(--zelic-shadow-xl);
    border-color: var(--zelic-primary);
}

.zelic-testimonial-card-expanded:hover::before {
    transform: scaleX(1);
}

/* Card Header (Bild + Info) */
.zelic-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 0 var(--zelic-space-lg) 0 !important;
    padding: 0 !important;
}

.zelic-card-image {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 50% !important;
    background: #D4ED6D !important;
    border: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wenn Bild vorhanden, andere Styles */
.zelic-card-image:has(img) {
    background: var(--zelic-bg-white) !important;
    border: 3px solid var(--zelic-border-light) !important;
    box-shadow: var(--zelic-shadow-sm) !important;
}

.zelic-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.zelic-testimonial-card-expanded:hover .zelic-card-image:has(img) {
    border-color: var(--zelic-primary-dark) !important;
    box-shadow: 0 6px 20px rgba(184, 212, 74, 0.25) !important;
}

.zelic-card-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.zelic-card-name {
    font-family: var(--zelic-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--zelic-text-dark-alt) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.zelic-card-role {
    font-family: var(--zelic-font-body) !important;
    font-size: 13px !important;
    color: var(--zelic-text-muted) !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Card Company Badge - Pill Style */
.zelic-card-company {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #F5F5F5 !important;
    padding: 4px 10px !important;
    border-radius: 14px !important;
    margin: 6px 0 0 0 !important;
    font-family: var(--zelic-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #141414 !important;
}

.zelic-card-company svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}

/* Card Quote - Sichtbares Zitat */
.zelic-card-quote {
    font-family: var(--zelic-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: var(--zelic-text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important; /* Füllt den verfügbaren Platz */
}

/* =================================================================================
   INITIALEN FALLBACK (wenn kein Bild vorhanden)
   ================================================================================= */
.zelic-initials-circle {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--zelic-font-body) !important;
    font-weight: 700 !important;
    color: #141414 !important;
    background: transparent !important;
}

/* Featured Initialen */
.zelic-featured-image .zelic-initials-circle {
    font-size: 52px !important;
}

/* Card Initialen */
.zelic-card-image .zelic-initials-circle {
    font-size: 24px !important;
}

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

/* Tablet (unter 900px) */
@media (max-width: 900px) {
    .zelic-featured-testimonial {
        grid-template-columns: 1fr;
        gap: var(--zelic-space-2xl);
        text-align: center;
        padding: var(--zelic-space-2xl);
    }
    .zelic-featured-left {
        flex-direction: row !important;
        gap: var(--zelic-space-lg) !important;
        text-align: left !important;
    }
    .zelic-featured-image {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 0 !important;
    }
    .zelic-featured-quote {
        font-size: 18px;
    }
    
    /* Grid wird 2-spaltig */
    .zelic-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (unter 768px) */
@media (max-width: 768px) {
    .zelic-testimonials-section {
        padding: 40px var(--zelic-space-lg) var(--zelic-space-2xl);
    }
    .zelic-testimonials-section .section-title {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    /* Grid wird 1-spaltig */
    .zelic-testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--zelic-space-md);
    }
    
    .zelic-testimonial-card-expanded {
        padding: var(--zelic-space-lg);
    }
    
    /* Card Header zentriert auf Mobile */
    .zelic-card-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }
    
    .zelic-card-info {
        align-items: center !important;
        text-align: center !important;
    }
    
    .zelic-card-quote {
        font-size: 14px !important;
        text-align: center !important;
    }
}

/* Small Mobile (unter 480px) */
@media (max-width: 480px) {
    .zelic-testimonial-card-expanded:hover {
        transform: none;
    }
    .zelic-testimonial-card-expanded:active {
        transform: scale(0.98);
        border-color: var(--zelic-primary);
    }
    .zelic-testimonial-card-expanded:active::before {
        transform: scaleX(1);
    }
    
    .zelic-card-header {
        gap: 12px !important;
    }
    
    .zelic-card-image {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }
    
    .zelic-card-name {
        font-size: 15px !important;
    }
    
    .zelic-card-role {
        font-size: 12px !important;
    }
    
    .zelic-card-quote {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .zelic-testimonial-card-expanded,
    .zelic-testimonial-card-expanded::before,
    .zelic-card-image {
        transition: none !important;
    }
}

/* --- Container --- */
.zelic-section-header-dark,
.zelic-section-header-dark.uagb-infobox-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 0 var(--section-header-padding-bottom, 20px) 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* --- Icon Badge mit Glow --- */
.zelic-section-header-dark .uagb-ifb-icon-wrap,
.zelic-section-header-dark .uagb-infobox-icon-wrap {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    background: var(--zelic-primary) !important;
    border-radius: var(--zelic-radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 0 24px rgba(212, 237, 109, 0.25),
        0 0 48px rgba(212, 237, 109, 0.15) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.zelic-section-header-dark .uagb-ifb-icon-wrap svg,
.zelic-section-header-dark .uagb-infobox-icon-wrap svg {
    width: 32px !important;
    height: 32px !important;
    fill: var(--zelic-text-dark) !important;
    stroke: var(--zelic-text-dark) !important;
    color: var(--zelic-text-dark) !important;
}

/* --- Content Wrapper --- */
.zelic-section-header-dark .uagb-ifb-content,
.zelic-section-header-dark .uagb-infobox-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Titel --- */
.zelic-section-header-dark .uagb-ifb-title,
.zelic-section-header-dark .uagb-infobox-title {
    font-family: var(--zelic-font-body) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--zelic-text-white) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Untertitel/Beschreibung --- */
.zelic-section-header-dark .uagb-ifb-desc,
.zelic-section-header-dark .uagb-infobox-description,
.zelic-section-header-dark p {
    font-family: var(--zelic-font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--zelic-text-muted-light) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Separator/CTA/Prefix ausblenden --- */
.zelic-section-header-dark .uagb-ifb-separator,
.zelic-section-header-dark .uagb-ifb-cta,
.zelic-section-header-dark .uagb-ifb-title-prefix {
    display: none !important;
}

/* --- Responsive: Tablet --- */
@media (max-width: 1024px) {
    .zelic-section-header-dark .uagb-ifb-icon-wrap,
    .zelic-section-header-dark .uagb-infobox-icon-wrap {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
    }
    
    .zelic-section-header-dark .uagb-ifb-icon-wrap svg,
    .zelic-section-header-dark .uagb-infobox-icon-wrap svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .zelic-section-header-dark .uagb-ifb-title,
    .zelic-section-header-dark .uagb-infobox-title {
        font-size: 20px !important;
    }
}

/* --- Responsive: Mobile --- */
@media (max-width: 768px) {
    .zelic-section-header-dark,
    .zelic-section-header-dark.uagb-infobox-wrap {
        gap: 16px !important;
        padding: 0 0 var(--section-header-padding-bottom, 16px) 0 !important;
    }
    
    .zelic-section-header-dark .uagb-ifb-icon-wrap,
    .zelic-section-header-dark .uagb-infobox-icon-wrap {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        border-radius: var(--zelic-radius-base) !important;
    }
    
    .zelic-section-header-dark .uagb-ifb-icon-wrap svg,
    .zelic-section-header-dark .uagb-infobox-icon-wrap svg {
        width: 26px !important;
        height: 26px !important;
    }
    
    .zelic-section-header-dark .uagb-ifb-title,
    .zelic-section-header-dark .uagb-infobox-title {
        font-size: 18px !important;
    }
    
    .zelic-section-header-dark .uagb-ifb-desc,
    .zelic-section-header-dark .uagb-infobox-description {
        font-size: 14px !important;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .zelic-section-header-dark .uagb-ifb-icon-wrap,
    .zelic-section-header-dark .uagb-infobox-icon-wrap {
        box-shadow: none !important;
    }
}
/* ============================================
   VALUE STACK CSS - SLIM VERSION
   Nutzt bestehende Zelic CSS Klassen
   Prefix: vs- (nur für neue Elemente)
============================================ */

/* ============================================
   SECTION WRAPPER
   (Nutzt --zelic-* Variablen)
============================================ */
.vs-section {
    padding: 0 0 var(--zelic-space-6xl) 0;
    background: var(--zelic-bg-dark-medium);
}

.vs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--zelic-space-xl);
}


/* [A7] Abschnitt "CATEGORY SPACING" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */
/* ============================================
   FEATURE GRID (NEU)
============================================ */
.vs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--zelic-space-xl);
    align-items: start;
    margin-top: var(--zelic-space-2xl);
}


/* [A7] Abschnitt "ACCORDION BLOCK (NEU)" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */

/* [A7] Abschnitt "BLOCK HEADER" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */

/* [A7] Abschnitt "BLOCK CONTENT (Expandable)" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */
/* ============================================
   ICON HOVER STATES
   (Erweitert zelic-card-icon für vs-block)
============================================ */
.vs-block:hover .zelic-card-icon,
.vs-block.vs-active .zelic-card-icon {
    background: var(--zelic-primary) !important;
    box-shadow: var(--zelic-glow-sm);
}

.vs-block:hover .zelic-card-icon svg,
.vs-block.vs-active .zelic-card-icon svg {
    fill: var(--zelic-bg-dark) !important;
}


/* [A7] Abschnitt "CHECK-LISTE (Einfach, kompakt)" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */

/* [A7] Abschnitt "RESPONSIVE" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */

/* [A7] Abschnitt "CARD HOVER VARIANTS - Green & Red" liegt seit 18.08.2026 im Seitenblock von /ertragreiche-mietstation/ */
/* =================================================================================
   ICON LIST UTILITY (Spectra Icon List)
   Was: Lime Icon-Box für Spectra Icon Lists
   Wo: Beliebige Spectra Icon Lists
   Klasse: zelic-icon-list auf Container setzen
   
   VERWENDUNG:
   Spectra Icon List > Erweitert > CSS-Klassen > zelic-icon-list
   ================================================================================= */

/* Icon Box Styling */
.zelic-icon-list .uagb-icon-list__source-wrap {
    background: var(--zelic-primary) !important;
    border-radius: var(--zelic-radius-md) !important;
    padding: 10px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
}

/* Icon selbst */
.zelic-icon-list .uagb-icon-list__source-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--zelic-text-dark) !important;
    stroke: var(--zelic-text-dark) !important;
}

/* Hover: leichtes Scale */
.zelic-icon-list .wp-block-uagb-icon-list-child:hover .uagb-icon-list__source-wrap {
    transform: scale(1.05) !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .zelic-icon-list .uagb-icon-list__source-wrap {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 8px !important;
    }
    
    .zelic-icon-list .uagb-icon-list__source-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .zelic-icon-list .uagb-icon-list__source-wrap {
        transition: none !important;
    }
}
/* =================================================================================
   ICON LIST CENTERED (auf Container anwenden)
   Was: Icon List Items im Container zentrieren
   Wo: Spectra Container / Group mit Icon List darin
   Klasse: zelic-icon-list-centered
   
   VERWENDUNG:
   Spectra Container > Erweitert > CSS-Klassen > zelic-icon-list-centered
   ================================================================================= */

.zelic-icon-list-centered .uagb-icon-list__wrap {
    align-items: center !important;
}

.zelic-icon-list-centered .wp-block-uagb-icon-list-child {
    width: fit-content !important;
}
/* ===========================================
   MIETSTATION PRICING SECTION v6
   Basierend auf funktionierendem Original
   =========================================== */

.ms-pricing-section {
  --ms-primary: #D4ED6D;
  --ms-primary-rgb: 212, 237, 109;
  --ms-primary-glow: rgba(var(--ms-primary-rgb), .15);
  --ms-bg-dark: #1A1D21;
  --ms-bg-section: #ffffff;
  --ms-card-bg: #ffffff;
  --ms-text: #1A1D21;
  --ms-text-muted: #6B6E75;
  --ms-border: rgba(26,29,33,.08);
  --ms-shadow: 0 4px 16px rgba(26, 29, 33, 0.18);
  --ms-shadow-hover: 0 12px 40px rgba(26, 29, 33, 0.18);
  --ms-radius: 24px;
  --ms-glow-pill: 0 4px 16px rgba(212, 237, 109, 0.35);

  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ms-bg-section);
  color: var(--ms-text);
  line-height: 1.6;
  padding: 100px 0;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.ms-pricing-section *,
.ms-pricing-section *::before,
.ms-pricing-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ms-pricing-section::before {
  display: none;
}

.ms-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

.ms-header {
  text-align: center;
  margin-bottom: 50px;
}

.ms-subheadline {
  font-size: 14px;
  font-weight: 500;
  color: var(--ms-text-muted);
  margin-bottom: 16px;
}

.ms-headline {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ms-text);
}

.ms-headline .ms-highlight {
  color: var(--ms-primary);
  font-style: italic;
}

.ms-toggle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 50px;
}

.ms-toggle-label {
  font-size: 20px;
  font-weight: 500;
  color: var(--ms-text-muted);
  transition: color 0.25s ease;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
}

.ms-toggle-label.ms-active {
  color: var(--ms-text);
  font-weight: 600;
}

.ms-pill-switch {
  position: relative;
  width: 56px;
  height: 30px;
  background: var(--ms-primary);
  border-radius: 30px;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.1);
  transition: background 0.25s ease;
  border: none;
  outline: none;
}

.ms-pill-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.ms-pill-switch.ms-monthly::before {
  transform: translateX(26px);
}

.ms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* === CARD === */
.ms-card {
  background: var(--ms-card-bg);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
  border: 2px solid transparent;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s cubic-bezier(.4,0,.2,1), border-color 0.35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  opacity: 0;
  animation: ms-fadeInUp 0.5s ease-out forwards;
}

.ms-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ms-shadow-hover);
  border-color: var(--ms-primary);
}

.ms-card:nth-child(1) { animation-delay: 0.1s; }
.ms-card:nth-child(2) { animation-delay: 0.2s; }
.ms-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes ms-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === CARD INNER - Feste Höhe mit relative für absoluten Footer === */
.ms-card-inner {
  padding: 40px 28px 120px;
  display: flex;
  flex-direction: column;
  height: 920px;
  position: relative;
  overflow: hidden;
}

.ms-badge-recommended {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ms-primary);
  color: var(--ms-bg-dark);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: var(--ms-glow-pill);
  z-index: 10;
  text-decoration: none !important;
}

.ms-badge-recommended svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.ms-card-header {
  text-align: center;
  margin-bottom: 24px;
}

.ms-card-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--ms-text);
  border: none;
  background: none;
  padding: 0;
}

.ms-card-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--ms-text-muted);
  line-height: 1.35;
  margin: 0;
}

.ms-pricing-display {
  text-align: center;
  margin-bottom: 20px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.ms-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.ms-price-amount {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ms-text);
}

.ms-price-currency {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--ms-text);
}

.ms-price-period {
  font-size: 18px;
  font-weight: 500;
  color: var(--ms-text-muted);
  margin-left: 2px;
  line-height: 1;
}

.ms-price-details {
  font-size: 13px;
  color: var(--ms-text-muted);
  margin-top: 8px;
  line-height: 1.35;
}

.ms-price-savings {
  color: var(--ms-primary);
  font-weight: 600;
}

.ms-price-anfrage {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ms-text);
  white-space: nowrap;
}

.ms-price-option {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.ms-price-option.ms-hidden {
  display: none !important;
}

.ms-price-breakdown {
  font-size: 12px;
  color: var(--ms-text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

.ms-access-badge-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-bottom: 24px;
}

.ms-access-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F5F5F5;
  border: 1px solid var(--ms-border);
  border-radius: 30px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--ms-text);
}

.ms-access-badge svg {
  width: 18px;
  height: 18px;
  color: var(--ms-primary);
  flex-shrink: 0;
}

.ms-includes-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--ms-text-muted);
  text-align: center;
  margin-bottom: 16px;
  font-style: italic;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-includes-note.ms-spacer {
  visibility: hidden;
}

.ms-card-content {
  display: flex;
  flex-direction: column;
}

.ms-feature-list {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
}

.ms-feature-item {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ms-text);
}

.ms-feature-item:last-child {
  border-bottom: none;
}

.ms-feature-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ms-primary);
}

.ms-feature-item strong {
  font-weight: 600;
}

.ms-feature-item span {
  flex: 1;
}

/* === CARD FOOTER - Absolut am unteren Rand von card-inner === */
.ms-card-footer {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ms-cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  background: var(--ms-primary);
  color: var(--ms-bg-dark);
  border-color: var(--ms-primary);
}

.ms-cta-button:link,
.ms-cta-button:visited,
.ms-cta-button:active {
  text-decoration: none !important;
}

.ms-cta-button svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.ms-cta-button:hover {
  background: var(--ms-bg-dark);
  color: #fff;
  border-color: var(--ms-bg-dark);
  text-decoration: none !important;
}

.ms-cta-button:hover svg {
  transform: translateX(4px);
}

.ms-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 12px;
  margin-top: 12px;
  background: transparent;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ms-text-muted);
  cursor: pointer;
  transition: none;
  text-decoration: none !important;
}

.ms-expand-toggle:hover,
.ms-expand-toggle:focus,
.ms-expand-toggle:active {
  color: var(--ms-text-muted);
  background: transparent !important;
  text-decoration: none !important;
  outline: none;
  box-shadow: none;
}

.ms-expand-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.ms-expand-toggle.ms-expanded svg {
  transform: rotate(180deg);
}

/* Unsichtbarer Platzhalter für Button-Alignment - gleiche Höhe wie echter Toggle */
.ms-expand-toggle.ms-placeholder {
  visibility: hidden;
  pointer-events: none;
  height: 45px;
  min-height: 45px;
}

/* === EXPANDABLE - Erscheint UNTER dem Inner === */
.ms-expandable-features {
  display: none;
  border-top: 1px dashed var(--ms-border);
  padding: 20px 28px 28px;
}

.ms-expandable-features.ms-expanded {
  display: block;
}

.ms-bonus-label {
  display: inline;
  background: var(--ms-primary);
  color: var(--ms-bg-dark);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
  line-height: 1;
}

.ms-details-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ms-text-muted);
  margin: 10px 0 8px;
}

.ms-details-kicker:first-child {
  margin-top: 0;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .ms-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
    gap: 32px;
  }

  .ms-container {
    padding: 0 24px;
  }

  .ms-pricing-section {
    padding: 70px 0;
  }

  .ms-headline {
    font-size: 28px;
  }

  .ms-includes-note.ms-spacer {
    display: none;
  }
  
  .ms-expand-toggle.ms-placeholder {
    display: none;
  }
  
  .ms-card-inner {
    height: auto;
    min-height: auto;
    padding: 40px 28px 32px;
    position: static;
    overflow: visible;
  }
  
  .ms-card-footer {
    position: static;
    margin-top: auto;
  }
}

@media (max-width: 600px) {
  .ms-pricing-section {
    padding: 50px 0;
  }

  .ms-container {
    padding: 0 16px;
  }

  .ms-header {
    margin-bottom: 32px;
  }

  .ms-subheadline {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .ms-headline {
    font-size: 20px;
    line-height: 1.35;
  }

  .ms-headline br {
    display: none;
  }

  .ms-toggle-wrapper {
    margin-bottom: 32px;
    gap: 10px;
  }

  .ms-toggle-label {
    font-size: 12px;
  }

  .ms-pill-switch {
    width: 48px;
    height: 26px;
  }

  .ms-pill-switch::before {
    width: 20px;
    height: 20px;
  }

  .ms-pill-switch.ms-monthly::before {
    transform: translateX(22px);
  }

  .ms-grid {
    max-width: 100%;
    gap: 24px;
  }

  .ms-card-inner {
    padding: 28px 20px 24px;
    position: static;
    height: auto;
    overflow: visible;
  }
  
  .ms-card-footer {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .ms-card {
    border-radius: 20px;
  }

  .ms-badge-recommended {
    font-size: 12px;
    padding: 8px 18px;
    top: -14px;
    gap: 6px;
  }
  
  .ms-badge-recommended svg {
    width: 14px;
    height: 14px;
  }

  .ms-card-header {
    margin-bottom: 20px;
  }

  .ms-card-title {
    font-size: 20px;
  }

  .ms-card-subtitle {
    font-size: 13px;
  }

  .ms-pricing-display {
    margin-bottom: 16px;
    height: 100px;
  }

  .ms-price-amount,
  .ms-price-anfrage {
    font-size: 36px;
  }

  .ms-price-currency {
    font-size: 20px;
  }

  .ms-price-period {
    font-size: 14px;
  }

  .ms-price-details {
    font-size: 12px;
  }

  .ms-price-breakdown {
    font-size: 11px;
  }

  .ms-access-badge {
    padding: 8px 14px;
    font-size: 12px;
  }

  .ms-access-badge-wrapper {
    margin-bottom: 20px;
  }

  .ms-access-badge svg {
    width: 16px;
    height: 16px;
  }

  .ms-includes-note {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .ms-feature-item {
    font-size: 13px;
    padding: 8px 0;
    gap: 10px;
  }

  .ms-feature-item svg {
    width: 16px;
    height: 16px;
  }

  .ms-expand-toggle {
    font-size: 12px;
    padding: 12px 10px;
    margin-top: 10px;
  }

  .ms-expandable-features {
    padding: 16px 20px 20px;
  }

  .ms-details-kicker {
    font-size: 10px;
    margin: 8px 0 6px;
  }

  .ms-bonus-label {
    font-size: 9px;
    padding: 2px 5px;
  }

  .ms-cta-button {
    padding: 14px 20px;
    font-size: 14px;
    border-radius: 40px;
  }

  .ms-cta-button svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 380px) {
  .ms-headline {
    font-size: 18px;
  }

  .ms-price-amount,
  .ms-price-anfrage {
    font-size: 32px;
  }

  .ms-card-inner {
    padding: 24px 16px 20px;
  }

  .ms-feature-item {
    font-size: 12px;
  }
}
/* =================================================================================
   PILL BADGE V3 (Hero, Light BG, Linksbuendig)
   Was: Label-Pill mit animiertem Dot fuer Hero Sections
   Wo: Hero Sections auf hellem Hintergrund
   Klasse: zelic-pill-v3
   
   VERWENDUNG:
   HTML Block mit Klasse zelic-pill-v3, darin span mit Klasse zelic-pill-dot
   ================================================================================= */

.zelic-pill-v3 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(212, 237, 109, 0.15) !important;
    border: 1px solid rgba(212, 237, 109, 0.35) !important;
    padding: 10px 20px !important;
    border-radius: var(--zelic-radius-pill) !important;
    font-family: var(--zelic-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--zelic-text-dark) !important;
    width: fit-content !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    margin-right: auto !important;
}

.zelic-pill-dot {
    width: 8px;
    height: 8px;
    background: var(--zelic-primary);
    border-radius: 50%;
    animation: zelicPillDotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes zelicPillDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

@media (max-width: 768px) {
    .zelic-pill-v3 {
        font-size: 13px !important;
        padding: 8px 16px !important;
        gap: 8px !important;
    }
    
    .zelic-pill-dot {
        width: 7px;
        height: 7px;
    }
}


/* =================================================================================
   VIDEO FRAME (Hero)
   Was: Stilvoller Rahmen fuer eingebettete Videos
   Wo: Hero Sections, Landingpages
   Klasse: zelic-video-frame
   
   VERWENDUNG:
   Spectra Container um Video mit Klasse zelic-video-frame
   ================================================================================= */

.zelic-video-frame {
    border-radius: var(--zelic-radius-2xl) !important;
    overflow: hidden !important;
    box-shadow: var(--zelic-shadow-xl) !important;
    border: 1px solid var(--zelic-border-light) !important;
    background: var(--zelic-bg-light) !important;
}

.zelic-video-frame iframe,
.zelic-video-frame video,
.zelic-video-frame .wp-block-embed,
.zelic-video-frame .wp-block-embed__wrapper {
    border-radius: var(--zelic-radius-2xl) !important;
    display: block !important;
}

.zelic-video-frame:hover {
    box-shadow: var(--zelic-shadow-xl), 0 0 0 2px rgba(212, 237, 109, 0.3) !important;
    transform: translateY(-4px);
    transition: var(--zelic-transition-smooth);
}

@media (max-width: 768px) {
    .zelic-video-frame {
        border-radius: var(--zelic-radius-xl) !important;
    }
    
    .zelic-video-frame iframe,
    .zelic-video-frame video,
    .zelic-video-frame .wp-block-embed,
    .zelic-video-frame .wp-block-embed__wrapper {
        border-radius: var(--zelic-radius-xl) !important;
    }
    
    .zelic-video-frame:hover {
        transform: none;
    }
}
/* =================================================================================
   HERO HEADING UTILITY (Spectra)
   Was: Mobile-optimierte Hero Headlines mit Subheading
   Wo: Hero Sections, Landingpages
   Klasse: zelic-hero-heading
   
   VERWENDUNG:
   Spectra Heading Block > Erweitert > CSS-Klassen > zelic-hero-heading
   ================================================================================= */

/* --- Main Heading --- */
.zelic-hero-heading .uagb-heading-text,
.zelic-hero-heading h1,
.zelic-hero-heading h2 {
    font-family: var(--zelic-font-body) !important;
    font-size: clamp(32px, 5vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
}

/* --- Subheading (Description) --- */
.zelic-hero-heading .uagb-desc-text,
.zelic-hero-heading p {
    font-family: var(--zelic-font-body) !important;
    font-size: clamp(16px, 2vw, 20px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    opacity: 0.9;
}

/* --- Responsive: Tablet --- */
@media (max-width: 1024px) {
    .zelic-hero-heading .uagb-heading-text,
    .zelic-hero-heading h1,
    .zelic-hero-heading h2 {
        font-size: 40px !important;
        line-height: 1.15 !important;
        margin-bottom: 14px !important;
    }
    
    .zelic-hero-heading .uagb-desc-text,
    .zelic-hero-heading p {
        font-size: 18px !important;
    }
}

/* --- Responsive: Mobile --- */
@media (max-width: 768px) {
    .zelic-hero-heading .uagb-heading-text,
    .zelic-hero-heading h1,
    .zelic-hero-heading h2 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    
    .zelic-hero-heading .uagb-desc-text,
    .zelic-hero-heading p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}

/* --- Responsive: Small Mobile --- */
@media (max-width: 480px) {
    .zelic-hero-heading .uagb-heading-text,
    .zelic-hero-heading h1,
    .zelic-hero-heading h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }
    
    .zelic-hero-heading .uagb-desc-text,
    .zelic-hero-heading p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* --- Extra Small Mobile --- */
@media (max-width: 380px) {
    .zelic-hero-heading .uagb-heading-text,
    .zelic-hero-heading h1,
    .zelic-hero-heading h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .zelic-hero-heading .uagb-desc-text,
    .zelic-hero-heading p {
        font-size: 14px !important;
    }
}
/* =================================================================================
   ZELIC PARTNER LOGOS - CSS
   Version: 2.0 (Logos im Hero)
   
   Partner-Logos oberhalb der Hero-Headline mit 50% Opacity
   ================================================================================= */

/* ========== CONTAINER ========== */
.zelic-partner-logos {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
    margin-left: 2% !important;
    opacity: 0.5 !important;
}

/* ========== LABEL ========== */
.zelic-partner-label {
    font-family: var(--zelic-font-body, 'Inter', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.5) !important;
    white-space: nowrap !important;
    margin: 0 !important;
}


/* [A7] Abschnitt ".zelic-partner-logo" liegt seit 18.08.2026 im Seitenblock von /startseite/ */
/* ========== DIVIDER ========== */
.zelic-logo-divider {
    width: 1px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.2) !important;
}


/* [A7] Abschnitt "RESPONSIVE - TABLET (unter 900px)" liegt seit 18.08.2026 im Seitenblock von /startseite/ */

/* [A7] Abschnitt "RESPONSIVE - MOBILE (unter 768px)" liegt seit 18.08.2026 im Seitenblock von /startseite/ */

/* [A7] Abschnitt "RESPONSIVE - SMALL MOBILE (unter 480px)" liegt seit 18.08.2026 im Seitenblock von /startseite/ */

/* [A7] Abschnitt "ZELIC PHONE MOCKUP + FLOATING CARDS" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */

/* [A7] Abschnitt "RESPONSIVE" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */

/* [A7] Abschnitt "PROCESS TIMELINE (Light BG) - HTML Block Version" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */

/* [A7] Abschnitt "ZELIC GLOW BORDER v3" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */
/* ========================================
   VARIANTEN
   ======================================== */

/* Kleinerer Radius */
.zelic-glow-border--sm {
    border-radius: 16px;
}
.zelic-glow-border--sm::before {
    padding: 2px;
}
.zelic-glow-border--sm::after {
    border-radius: calc(16px + 8px);
}

/* Dünnerer Border */
.zelic-glow-border--thin::before {
    padding: 2px;
}

/* Ohne Glow */
.zelic-glow-border--no-glow::after {
    display: none;
}

/* Subtilerer Glow */
.zelic-glow-border--subtle::after {
    opacity: 0.3;
    filter: blur(15px);
}

/* [A7] Abschnitt "ZELIC TYPEWRITER HERO - CSS" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */
/* ===========================================
   ZELIC KONFIGURATOR WIZARD - CSS
   Für Astra Pro Customizer
   Version: 2.1 (Sichere Fixes)
   =========================================== */

/* Konfigurator-spezifische Variablen */
.zelic-modal-overlay,
.zelic-wizard,
.zelic-konfig-trigger {
  --zk-primary: #D4ED6D;
  --zk-primary-hover: #c5e050;
  --zk-primary-dark: #b8d45a;
  --zk-bg-dark: #0a0a0a;
  --zk-bg-dark-medium: #141414;
  --zk-bg-card-dark: #1e1e1e;
  --zk-bg-element-dark: #2a2a2a;
  --zk-bg-element-dark-hover: #3a3a3a;
  --zk-text-white: #ffffff;
  --zk-text-muted: #737373;
  --zk-text-muted-light: #a0a0a0;
  --zk-border-dark: #2a2a2a;
  --zk-border-dark-medium: #3a3a3a;
  --zk-border-dark-light: #4a4a4a;
  --zk-success: #00b300;
  --zk-glow-sm: 0 0 12px rgba(212, 237, 109, 0.3);
  --zk-glow-btn: 0 4px 14px rgba(212, 237, 109, 0.3);
  --zk-glow-btn-hover: 0 12px 32px rgba(212, 237, 109, 0.4);
  --zk-radius-sm: 4px;
  --zk-radius-md: 8px;
  --zk-radius-base: 10px;
  --zk-radius-lg: 12px;
  --zk-radius-xl: 16px;
  --zk-radius-2xl: 20px;
  --zk-radius-pill: 50px;
  --zk-space-xs: 4px;
  --zk-space-sm: 8px;
  --zk-space-md: 12px;
  --zk-space-base: 16px;
  --zk-space-lg: 20px;
  --zk-space-xl: 24px;
  --zk-space-2xl: 32px;
  --zk-space-3xl: 48px;
  --zk-transition: all 0.2s ease;
  --zk-transition-medium: all 0.3s ease;
  --zk-transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* [A7] Abschnitt "TRIGGER BUTTON" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */
/* ===========================================
   MODAL OVERLAY
   =========================================== */

.zelic-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--zk-space-lg);
  box-sizing: border-box;
  margin: 0;
}

.zelic-modal-overlay.active {
  display: flex;
}


/* [A7] Abschnitt "WIZARD CONTAINER" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */

/* [A7] Abschnitt "WIZARD HEADER" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */
/* ===========================================
   STEPPER
   =========================================== */

.zelic-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}

.zelic-step {
  display: flex;
  align-items: center;
  gap: var(--zk-space-sm);
  position: relative;
}

.zelic-step-line {
  width: 40px;
  height: 2px;
  background: var(--zk-border-dark);
  margin: 0 var(--zk-space-sm);
  transition: var(--zk-transition-medium);
  flex-shrink: 0;
}

.zelic-step.completed + .zelic-step-line,
.zelic-step.completed .zelic-step-line,
.zelic-step-line.completed {
  background: var(--zk-primary);
}

.zelic-step-indicator {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--zk-bg-element-dark);
  border: 2px solid var(--zk-border-dark-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--zk-text-muted);
  transition: var(--zk-transition-medium);
  cursor: pointer;
}

.zelic-step-indicator:hover {
  border-color: var(--zk-border-dark-light);
}

.zelic-step.active .zelic-step-indicator {
  background: var(--zk-primary);
  border-color: var(--zk-primary);
  color: var(--zk-bg-dark);
  box-shadow: var(--zk-glow-sm);
}

.zelic-step.completed .zelic-step-indicator {
  background: var(--zk-primary);
  border-color: var(--zk-primary);
  color: var(--zk-bg-dark);
}

.zelic-step.completed .zelic-step-indicator svg {
  width: 16px;
  height: 16px;
}

.zelic-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--zk-text-muted);
  transition: var(--zk-transition);
  white-space: nowrap;
}

.zelic-step.active .zelic-step-label,
.zelic-step.completed .zelic-step-label {
  color: var(--zk-text-white);
}


/* [A7] Abschnitt "WIZARD BODY" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */
/* ===========================================
   WIZARD STEP CONTENT
   =========================================== */

.zelic-wizard-step {
  display: none;
  animation: stepFadeIn 0.3s ease;
}

.zelic-wizard-step.active {
  display: block;
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.zelic-step-intro {
  margin-bottom: var(--zk-space-xl);
}

.zelic-step-intro h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--zk-space-sm);
  color: var(--zk-text-white);
}

.zelic-step-intro p {
  font-size: 1rem;
  color: var(--zk-text-muted-light);
  line-height: 1.5;
  margin: 0;
}

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

.zelic-konfig-section {
  margin-bottom: var(--zk-space-2xl);
}

.zelic-konfig-section:last-child {
  margin-bottom: 0;
}

.zelic-section-header {
  display: flex;
  align-items: center;
  gap: var(--zk-space-base);
  margin-bottom: var(--zk-space-base);
}

.zelic-section-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 237, 109, 0.08);
  border: 1px solid rgba(212, 237, 109, 0.2);
  border-radius: var(--zk-radius-lg);
  color: var(--zk-primary);
}

.zelic-section-icon svg {
  width: 22px;
  height: 22px;
}

.zelic-section-info h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--zk-text-white);
}

.zelic-section-info p {
  font-size: 0.8125rem;
  color: var(--zk-text-muted-light);
  margin: 0;
}

.zelic-section-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(115, 115, 115, 0.15);
  color: var(--zk-text-muted-light);
  padding: 5px 10px;
  border-radius: var(--zk-radius-pill);
  font-size: 11px;
  font-weight: 500;
  margin-top: var(--zk-space-sm);
}

.zelic-section-hint svg {
  width: 12px;
  height: 12px;
}

.zelic-section-hint.highlight {
  background: rgba(212, 237, 109, 0.1);
  color: var(--zk-primary);
}

.zelic-calculation-info {
  margin-top: var(--zk-space-base);
  padding: var(--zk-space-md);
  min-height: 50px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--zk-radius-md);
  display: flex;
  align-items: center;
  gap: var(--zk-space-sm);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, border 0.2s ease;
}

.zelic-calculation-info.active {
  background: rgba(212, 237, 109, 0.08);
  border: 1px solid rgba(212, 237, 109, 0.2);
  opacity: 1;
}

/* ===========================================
   OPTION CARDS
   =========================================== */

.zelic-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--zk-space-md);
}

.zelic-options-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.zelic-option-card {
  position: relative;
  background: var(--zk-bg-card-dark);
  border: 2px solid var(--zk-border-dark);
  border-radius: var(--zk-radius-lg);
  padding: var(--zk-space-base);
  cursor: pointer;
  transition: var(--zk-transition-smooth);
  display: flex;
  flex-direction: column;
  min-height: 120px;
  height: 100%;
}

.zelic-option-card:hover {
  background: var(--zk-bg-element-dark);
  border-color: var(--zk-border-dark-medium);
  transform: translateY(-2px);
}

.zelic-option-card.selected {
  border-color: var(--zk-primary);
  background: rgba(212, 237, 109, 0.05);
  box-shadow: var(--zk-glow-sm);
}

.zelic-option-card.included {
  border-color: var(--zk-success);
  background: rgba(0, 179, 0, 0.05);
  cursor: default;
}

.zelic-option-card.included:hover {
  transform: none;
}

.zelic-option-check {
  position: absolute;
  top: var(--zk-space-sm);
  right: var(--zk-space-sm);
  width: 22px;
  height: 22px;
  border: 2px solid var(--zk-border-dark-medium);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--zk-transition);
}

.zelic-option-card.selected .zelic-option-check,
.zelic-option-card.included .zelic-option-check {
  background: var(--zk-primary);
  border-color: var(--zk-primary);
}

.zelic-option-card.included .zelic-option-check {
  background: var(--zk-success);
  border-color: var(--zk-success);
}

.zelic-option-check svg {
  width: 12px;
  height: 12px;
  color: var(--zk-bg-dark);
  opacity: 0;
  transition: var(--zk-transition);
}

.zelic-option-card.selected .zelic-option-check svg,
.zelic-option-card.included .zelic-option-check svg {
  opacity: 1;
}

.zelic-option-name {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 4px;
  padding-right: 28px;
  color: var(--zk-text-white);
}

.zelic-option-desc {
  font-size: 0.75rem;
  color: var(--zk-text-muted-light);
  margin-bottom: var(--zk-space-sm);
  line-height: 1.4;
  flex: 1;
}

.zelic-option-price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--zk-primary);
  margin-top: auto;
}

.zelic-option-price.included {
  color: var(--zk-success);
}

/* ===========================================
   TOGGLE MODULES
   =========================================== */

.zelic-toggle-module {
  background: var(--zk-bg-card-dark);
  border: 1px solid var(--zk-border-dark);
  border-radius: var(--zk-radius-xl);
  margin-bottom: var(--zk-space-lg);
  overflow: hidden;
  transition: var(--zk-transition-medium);
}

.zelic-toggle-module.active {
  border-color: var(--zk-primary);
  box-shadow: var(--zk-glow-sm);
}

.zelic-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--zk-space-lg);
  cursor: pointer;
  transition: var(--zk-transition);
}

.zelic-toggle-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.zelic-toggle-left {
  display: flex;
  align-items: center;
  gap: var(--zk-space-base);
}

.zelic-toggle-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zk-bg-element-dark);
  border: 1px solid var(--zk-border-dark-medium);
  border-radius: var(--zk-radius-lg);
  color: var(--zk-text-muted);
  transition: var(--zk-transition-medium);
}

.zelic-toggle-module.active .zelic-toggle-icon {
  background: rgba(212, 237, 109, 0.1);
  border-color: rgba(212, 237, 109, 0.3);
  color: var(--zk-primary);
}

.zelic-toggle-icon svg {
  width: 24px;
  height: 24px;
}

.zelic-toggle-info h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--zk-text-white);
}

.zelic-toggle-info p {
  font-size: 0.8125rem;
  color: var(--zk-text-muted-light);
  line-height: 1.4;
  margin: 0;
}

.zelic-toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  background: var(--zk-bg-element-dark);
  border: 1px solid var(--zk-border-dark-medium);
  border-radius: 14px;
  transition: var(--zk-transition-medium);
  flex-shrink: 0;
}

.zelic-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--zk-text-muted);
  border-radius: 50%;
  transition: var(--zk-transition-medium);
}

.zelic-toggle-module.active .zelic-toggle-switch {
  background: var(--zk-primary);
  border-color: var(--zk-primary);
}

.zelic-toggle-module.active .zelic-toggle-switch::after {
  left: 27px;
  background: var(--zk-bg-dark);
}

.zelic-toggle-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 var(--zk-space-lg);
}

.zelic-toggle-module.active .zelic-toggle-content {
  max-height: 600px;
  padding: 0 var(--zk-space-lg) var(--zk-space-lg);
}

.zelic-toggle-divider {
  height: 1px;
  background: var(--zk-border-dark);
  margin-bottom: var(--zk-space-lg);
}

.zelic-toggle-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zk-text-muted);
  margin-bottom: var(--zk-space-sm);
}

/* ===========================================
   SUMMARY
   =========================================== */

.zelic-summary-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--zk-space-xl);
}

.zelic-summary-selections {
  background: var(--zk-bg-card-dark);
  border: 1px solid var(--zk-border-dark);
  border-radius: var(--zk-radius-lg);
  padding: var(--zk-space-lg);
}

.zelic-summary-selections h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: var(--zk-space-base);
  display: flex;
  align-items: center;
  gap: var(--zk-space-sm);
  color: var(--zk-text-white);
}

.zelic-summary-selections h4 svg {
  width: 18px;
  height: 18px;
  color: var(--zk-primary);
}

.zelic-summary-group {
  margin-bottom: var(--zk-space-base);
}

.zelic-summary-group:last-child {
  margin-bottom: 0;
}

.zelic-summary-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--zk-text-muted);
  margin-bottom: var(--zk-space-xs);
  padding-bottom: var(--zk-space-xs);
  border-bottom: 1px solid var(--zk-border-dark);
}

.zelic-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--zk-space-sm) 0;
  font-size: 0.8125rem;
}

.zelic-summary-item-name {
  color: var(--zk-text-muted-light);
}

.zelic-summary-item-price {
  font-weight: 500;
  color: var(--zk-text-white);
}

/* ===========================================
   PRICE CARD
   =========================================== */

.zelic-price-card {
  background: var(--zk-bg-card-dark);
  border: 1px solid var(--zk-border-dark);
  border-radius: var(--zk-radius-lg);
  padding: var(--zk-space-lg);
}

.zelic-price-card h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: var(--zk-space-lg);
  color: var(--zk-text-white);
}

.zelic-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--zk-space-sm);
  font-size: 0.875rem;
}

.zelic-price-label {
  color: var(--zk-text-muted-light);
}

.zelic-price-value {
  font-weight: 500;
  color: var(--zk-text-white);
}

.zelic-price-row.discount .zelic-price-value {
  color: var(--zk-primary);
}

.zelic-price-row.total {
  padding-top: var(--zk-space-base);
  margin-top: var(--zk-space-base);
  border-top: 1px solid var(--zk-border-dark);
}

.zelic-price-row.total .zelic-price-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--zk-text-white);
}

.zelic-price-row.total .zelic-price-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--zk-primary);
}

.zelic-price-row.setup {
  padding-top: var(--zk-space-sm);
  border-top: 1px dashed var(--zk-border-dark);
  margin-top: var(--zk-space-sm);
}

.zelic-price-row.setup .zelic-price-label {
  font-size: 0.75rem;
}

.zelic-discount-badge {
  background: rgba(212, 237, 109, 0.1);
  border: 1px solid rgba(212, 237, 109, 0.25);
  border-radius: var(--zk-radius-md);
  padding: var(--zk-space-md);
  margin-bottom: var(--zk-space-lg);
  display: none;
}

.zelic-discount-badge.active {
  display: block;
}

.zelic-discount-badge-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--zk-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: var(--zk-space-sm);
}

.zelic-discount-badge-title svg {
  width: 16px;
  height: 16px;
}

.zelic-discount-badge-text {
  font-size: 0.75rem;
  color: var(--zk-text-muted-light);
}

/* ===========================================
   CONTACT SECTION
   =========================================== */

.zelic-contact-section {
  margin-top: var(--zk-space-xl);
  padding-top: var(--zk-space-xl);
  border-top: 1px solid var(--zk-border-dark);
}

.zelic-contact-section h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--zk-space-base);
  color: var(--zk-text-white);
}

/* CF7 Form Styling */
.zelic-contact-section .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--zk-space-md);
}

.zelic-contact-section .wpcf7-form p {
  margin: 0;
}

.zelic-contact-section .wpcf7-form input[type="text"],
.zelic-contact-section .wpcf7-form input[type="email"],
.zelic-contact-section .wpcf7-form input[type="tel"],
.zelic-contact-section .wpcf7-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--zk-bg-element-dark);
  border: 1px solid var(--zk-border-dark-medium);
  border-radius: var(--zk-radius-md);
  color: var(--zk-text-white);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  transition: var(--zk-transition);
}

.zelic-contact-section .wpcf7-form input:focus,
.zelic-contact-section .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--zk-primary);
  box-shadow: 0 0 0 3px rgba(212, 237, 109, 0.12);
}

.zelic-contact-section .wpcf7-form input::placeholder,
.zelic-contact-section .wpcf7-form textarea::placeholder {
  color: var(--zk-text-muted);
}

.zelic-contact-section .wpcf7-form textarea {
  min-height: 80px;
  resize: vertical;
}

.zelic-contact-section .wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zk-space-sm);
  padding: 0.75rem 2rem;
  background: var(--zk-primary);
  color: var(--zk-bg-dark);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--zk-radius-base);
  cursor: pointer;
  transition: var(--zk-transition-medium);
  box-shadow: var(--zk-glow-btn);
  width: auto;
  margin-top: var(--zk-space-sm);
}

.zelic-contact-section .wpcf7-form input[type="submit"]:hover {
  background: var(--zk-primary-hover);
  box-shadow: var(--zk-glow-btn-hover);
  transform: translateY(-1px);
}

.zelic-contact-section .wpcf7-not-valid-tip {
  color: #ff6b6b;
  font-size: 0.75rem;
  margin-top: 4px;
}

.zelic-contact-section .wpcf7-response-output {
  margin: var(--zk-space-base) 0 0 0;
  padding: var(--zk-space-md);
  border-radius: var(--zk-radius-md);
  font-size: 0.875rem;
}

/* ===========================================
   WIZARD FOOTER
   =========================================== */

.zelic-wizard-footer {
  padding: var(--zk-space-lg) var(--zk-space-xl);
  border-top: 1px solid var(--zk-border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zk-space-base);
  flex-shrink: 0;
  background: var(--zk-bg-dark-medium);
}

.zelic-footer-left {
  display: flex;
  align-items: center;
  gap: var(--zk-space-xl);
  flex: 1;
}

.zelic-footer-price {
  text-align: left;
  flex-shrink: 0;
}

.zelic-footer-price-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zk-text-muted);
  margin-bottom: 2px;
}

.zelic-footer-price-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--zk-primary);
}

.zelic-footer-price-vat {
  font-size: 10px;
  color: var(--zk-text-muted);
  margin-top: 2px;
}

.zelic-footer-xp {
  flex: 1;
  max-width: 280px;
  margin: 0 auto;
}

.zelic-footer-xp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.zelic-footer-xp-level {
  display: flex;
  align-items: center;
  gap: var(--zk-space-sm);
}

.zelic-footer-xp-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 237, 109, 0.1);
  border: 1px solid rgba(212, 237, 109, 0.25);
  border-radius: var(--zk-radius-md);
  transition: var(--zk-transition-medium);
}

.zelic-footer-xp-icon svg {
  width: 14px;
  height: 14px;
  color: var(--zk-primary);
}

.zelic-footer-xp-icon.active {
  background: var(--zk-primary);
  border-color: var(--zk-primary);
  box-shadow: var(--zk-glow-sm);
}

.zelic-footer-xp-icon.active svg {
  color: var(--zk-bg-dark);
}

.zelic-footer-xp-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--zk-text-white);
}

.zelic-footer-xp-bar {
  height: 6px;
  background: var(--zk-bg-dark);
  border-radius: var(--zk-radius-sm);
  overflow: hidden;
}

.zelic-footer-xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--zk-primary-dark), var(--zk-primary));
  border-radius: var(--zk-radius-sm);
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(212, 237, 109, 0.4);
}

.zelic-footer-buttons {
  display: flex;
  gap: var(--zk-space-sm);
}

.zelic-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--zk-space-sm);
  padding: 0.75rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--zk-radius-base);
  cursor: pointer;
  transition: var(--zk-transition-medium);
  text-decoration: none !important;
  border: none;
}

.zelic-btn svg {
  width: 16px;
  height: 16px;
}

.zelic-btn-back {
  background: transparent;
  color: var(--zk-text-muted-light);
  border: 1px solid var(--zk-border-dark-medium);
}

.zelic-btn-back:hover {
  background: var(--zk-bg-element-dark);
  color: var(--zk-text-white);
  border-color: var(--zk-border-dark-light);
}

.zelic-btn-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.zelic-btn-next {
  background: var(--zk-primary);
  color: var(--zk-bg-dark);
  box-shadow: var(--zk-glow-btn);
}

.zelic-btn-next:hover {
  background: var(--zk-primary-hover);
  box-shadow: var(--zk-glow-btn-hover);
  transform: translateY(-1px);
}

/* ===========================================
   SUCCESS STATE
   =========================================== */

.zelic-success-state {
  text-align: center;
  padding: var(--zk-space-3xl) var(--zk-space-xl);
  display: none;
}

.zelic-success-state.active {
  display: block;
}

.zelic-success-icon {
  width: 72px;
  height: 72px;
  background: rgba(0, 179, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--zk-space-xl);
  animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.zelic-success-icon svg {
  width: 36px;
  height: 36px;
  color: var(--zk-success);
}

.zelic-success-state h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--zk-space-sm);
  color: var(--zk-text-white);
}

.zelic-success-state p {
  font-size: 1rem;
  color: var(--zk-text-muted-light);
  max-width: 400px;
  margin: 0 auto;
}


/* [A7] Abschnitt "RESPONSIVE - TABLET" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */

/* [A7] Abschnitt "RESPONSIVE - MOBILE" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */

/* [A7] Abschnitt "RESPONSIVE - SEHR KLEINE GERÄTE" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */

/* [A7] Abschnitt "RESPONSIVE - SEHR KLEINE GERÄTE" liegt seit 18.08.2026 im Seitenblock von /social-media-management/ */
/* ============================================
   MOBILE SAFE AREA FIX - Safari/iOS
   Am Ende der CSS hinzufügen
   ============================================ */

/* iOS Safe Area Support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .zelic-wizard-footer {
    padding-bottom: calc(var(--zk-space-lg) + env(safe-area-inset-bottom)) !important;
  }
  
  @media (max-width: 768px) {
    .zelic-wizard-footer {
      padding-bottom: calc(var(--zk-space-md) + env(safe-area-inset-bottom) + 20px) !important;
    }
    
    .zelic-wizard {
      max-height: calc(100vh - 40px) !important;
      max-height: calc(100dvh - 40px) !important;
    }
    
    .zelic-wizard-body {
      max-height: calc(100vh - 300px - env(safe-area-inset-bottom)) !important;
      max-height: calc(100dvh - 300px - env(safe-area-inset-bottom)) !important;
    }
  }
  
  @media (max-width: 480px) {
    .zelic-wizard-footer {
      padding-bottom: calc(var(--zk-space-sm) + env(safe-area-inset-bottom) + 24px) !important;
    }
    
    .zelic-wizard {
      max-height: calc(100vh - 50px) !important;
      max-height: calc(100dvh - 50px) !important;
    }
    
    .zelic-wizard-body {
      max-height: calc(100vh - 280px - env(safe-area-inset-bottom)) !important;
      max-height: calc(100dvh - 280px - env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Fallback für ältere Browser */
@media (max-width: 768px) {
  .zelic-wizard-footer {
    padding-bottom: calc(var(--zk-space-md) + 30px) !important;
  }
}

@media (max-width: 480px) {
  .zelic-wizard-footer {
    padding-bottom: calc(var(--zk-space-sm) + 40px) !important;
  }
}
/* Social Media Pricing Cards */

.sm-pricing-card {
  max-height: 540px;
}

.sm-pricing-grid {
  align-items: start;
}

/* Headline zentrieren */
.sm-pricing-header {
  text-align: center;
}

/* Größere Abstände */
.sm-pricing-card .ms-card-subtitle {
  margin-bottom: 24px;
}

.sm-pricing-card .ms-price-row {
  margin-bottom: 32px;
}

.sm-pricing-card .ms-feature-list {
  gap: 16px;
  margin-bottom: 32px;
}

/* Rotes X für disabled Features */
.ms-feature-disabled svg {
  color: #E22F2F !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
   FEATURE PILLS - Dezente Pills für Hero/Feature Sections
   ══════════════════════════════════════════════════════════════════════════════
   
   Verwendung in Spectra:
   → Buttons Block (Container) → Erweitert → CSS-Klassen → zelic-feature-pills
   → Jeder Button einzeln → Erweitert → CSS-Klassen → zelic-feature-pill
   → Icon links aktivieren, Text eingeben
   
   Hinweis: Kein responsive Layout-Override - Spectra's eigene Mobile-Einstellungen 
   werden verwendet. Layout (Stack, Gap, etc.) im Block selbst einstellen.
   
   ────────────────────────────────────────────────────────────────────────────── */

/* --- Container für Feature Pills --- */
.zelic-feature-pills {
    justify-content: center !important;
}

/* --- Einzelne Feature Pill --- */
.zelic-feature-pill .uagb-buttons-repeater,
.zelic-feature-pill.wp-block-uagb-buttons-child .uagb-buttons-repeater {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 100px !important;
    font-family: var(--zelic-font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    transition: var(--zelic-transition-smooth) !important;
    cursor: default !important;
}

/* Hover State */
.zelic-feature-pill .uagb-buttons-repeater:hover,
.zelic-feature-pill.wp-block-uagb-buttons-child .uagb-buttons-repeater:hover {
    background: rgba(212, 237, 109, 0.1) !important;
    border-color: rgba(212, 237, 109, 0.25) !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Focus State */
.zelic-feature-pill .uagb-buttons-repeater:focus,
.zelic-feature-pill.wp-block-uagb-buttons-child .uagb-buttons-repeater:focus {
    outline: 2px solid var(--zelic-primary) !important;
    outline-offset: 2px !important;
}

/* Icon Styling */
.zelic-feature-pill .uagb-button__icon,
.zelic-feature-pill .uagb-button__icon svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--zelic-primary) !important;
    fill: var(--zelic-primary) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Icon Container Reset */
.zelic-feature-pill .uagb-button__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Text Styling */
.zelic-feature-pill .uagb-button__link,
.zelic-feature-pill .uagb-buttons-repeater .uagb-button__link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}
/* =================================================================================
   RESPONSIVE OVERFLOW FIX - FINAL
   ================================================================================= */

/* Achsen-Hinweis 26.08.2026: overflow als Shorthand lassen (beide Achsen clip).
   Astra setzt body{overflow:hidden}; clip auf nur einer Achse wird neben hidden
   auf der anderen Achse zu hidden koerziert, hidden macht den Body zum
   Scroll-Container und killt jedes position:sticky der Site (Subnav, TOC). */
body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: clip !important;
}

.wp-site-blocks,
.entry-content > .wp-block-uagb-container {
    max-width: 100vw;
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
}
/* Header über Hero-Elementen */
.site-header,
#masthead,
.ast-primary-header,
header.site-header {
    z-index: 999 !important;
    position: relative;
}
/* --- Astra Hero Container --- */
.zelic-hero-overlay1 {
  position: relative !important;
  min-height: 100vh !important;
}

/* --- Overlay über dem Video --- */
.zelic-hero-overlay1::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    225deg,
    rgba(12, 12, 12, 0.9) 0%,
    rgba(12, 12, 12, 0.7) 50%,
    rgba(12, 12, 12, 0.85) 100%
  );
  pointer-events: none;
}

/* --- Spectra Inner Wrapper als Fullscreen-Layout --- */
.zelic-hero-overlay1 > .uagb-container-inner-blocks-wrap {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: 100vh !important;
  padding-left: 16% !important;
  padding-right: 8% !important;
}

/* --- Content links --- */
.zelic-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: left;
  contain: layout style paint;
}

/* --- Marquee Container --- */
.zelic-hero-marquee {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  z-index: 2;
  padding: 20px 0;
  overflow: hidden;
  display: flex;
}

/* --- Durchgehende Linie über volle Breite --- */
.zelic-hero-marquee::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Beide Tracks --- */
.zelic-marquee-track {
  display: flex;
  gap: 64px;
  padding-right: 64px;
  flex-shrink: 0;
  min-width: 100vw;
  animation: zelic-marquee 30s linear infinite;
  will-change: transform;
}

.zelic-marquee-item {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 24px;
}

.zelic-marquee-item::after {
  content: '—';
  color: rgba(255, 255, 255, 0.2);
}

@keyframes zelic-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* [A7] Abschnitt "ZELIC HERO SECTION" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */
/* ============================================
   MARQUEE
   ============================================ */

/* --- Marquee Container --- */
.zelic-hero-marquee {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  z-index: 2;
  padding: 20px 0;
  overflow: hidden;
  display: flex;
}

/* --- Durchgehende Linie über volle Breite --- */
.zelic-hero-marquee::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Track --- */
.zelic-marquee-track {
  display: flex;
  gap: 64px;
  flex-shrink: 0;
  animation: zelic-marquee 40s linear infinite;
  will-change: transform;
}

.zelic-marquee-item {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 24px;
}

.zelic-marquee-item::after {
  content: '—';
  color: rgba(255, 255, 255, 0.2);
}

@keyframes zelic-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* [A7] Abschnitt "RESPONSIVE" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */

/* [A7] Abschnitt "ACCESSIBILITY: Reduced Motion" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */
/* =================================================================================
   BERATUNGSFELDER SECTION (bf-)
   Was: Service-Accordion mit Sticky-Header und Editorial-Layout
   Wo: Homepage oder Unterseite "Beratungsfelder"
   Prefix: bf- fuer Namespace-Isolation
   
   VERWENDUNG IN WORDPRESS:
   → Custom HTML Block mit der HTML-Struktur
   → CSS in Customizer > Zusaetzliches CSS oder eigenes Stylesheet
   → JS wird via Code Snippets (PHP) eingebunden
   
   NUTZT BESTEHENDE ZELIC-VARIABLEN:
   --zelic-primary, --zelic-bg-dark, --zelic-text-muted-light,
   --zelic-font-body, --zelic-transition-medium, --zelic-space-*
   ================================================================================= */


/* [A7] Abschnitt "SECTION WRAPPER" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */
/* ============================================
   CONTAINER
============================================ */
.bf-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* ============================================
   GRID LAYOUT (Sticky Left + Accordion Right)
============================================ */
.bf-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
}


/* [A7] Abschnitt "LEFT COLUMN - STICKY HEADER" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */

/* [A7] Abschnitt "RIGHT COLUMN - SERVICE ROWS (Accordion)" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */

/* [A7] Abschnitt "TOGGLE ICON (+/- via Pseudo-Elements)" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */

/* [A7] Abschnitt "EXPANDABLE CONTENT" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */
/* ============================================
   DECORATIVE ELEMENT
============================================ */
.bf-deco {
    position: absolute;
    bottom: 60px;
    left: 60px;
    font-size: 180px;
    font-weight: 900;
    color: rgba(255,255,255,0.015);
    line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none;
}


/* [A7] Abschnitt "RESPONSIVE: TABLET (1024px)" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */

/* [A7] Abschnitt "REDUCED MOTION" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */

/* [A7] Abschnitt "EXPERTEN BENTO GRID v2 — Light Premium" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */

/* [A7] Abschnitt "PROZESS SECTION — Diagonal Cards" liegt seit 18.08.2026 im Seitenblock von /unternehmensberatung/ */
/* =================================================================================
   20. KLASSEN-REFERENZ
   =================================================================================
   
   GLOBALE BUTTONS (Spectra/WP)
   .btn-primary              - Gruener Haupt-CTA Button
   .btn-primary-glow         - Gruen mit Glow-Effekt (Hero)
   .btn-secondary            - Outline auf hellem BG
   .btn-secondary-dark       - Outline auf dunklem BG
   .btn-dark                 - Schwarzer Button
   .btn-light                - Weisser Button
   .btn-outline-light        - Weisse Outline auf dunklem BG
   
   WOOCOMMERCE
   .single_add_to_cart_button - Warenkorb-Button Produktseite
   .brochure-download        - PDF-Download Button
   .kurs-uebersicht          - Shop-Grid Container
   .kurs-cart-icon           - Warenkorb-Icon in Grid
   .course-details           - Kurs-Details Container
   .detail-row               - Einzelne Detail-Zeile
   
   NEWSLETTER
   .newsletter-badge         - Badge oberhalb Formular
   .newsletter-form          - Formular Container
   
   FEATURES (zelic-feat-v1)
   .zelic-feat-v1-section    - Section Container
   .zelic-feat-v1-container  - Max-Width Container
   .zelic-feat-v1-grid       - 3-Spalten Grid
   .zelic-feat-v1-card       - Feature Card
   .zelic-feat-v1-icon       - Icon Badge
   .zelic-feat-v1-title      - Card Titel
   .zelic-feat-v1-desc       - Card Beschreibung
   
   HERO
   .hero-section             - Aeusserer Container
   .hero-textblock           - Innerer Text-Container
   
   HERO META
   .zelic-hero-meta-wrapper  - Meta Container
   .zelic-hero-meta          - Flex Container
   .zelic-hero-meta-item     - Einzelnes Item
   .zelic-hero-meta-icon     - Icon
   .zelic-hero-meta-label    - Label
   .zelic-hero-meta-value    - Wert
   
   PAIN POINTS
   .zc-home-pain-point-number - Grosse Statistik-Zahlen
   
   DARK BOX
   .zelic-dark-box-glow      - Dunkle Box mit Glow-Animation
   
   SECTION GRADIENT
   .zelic-section-gradient   - Dunkler Gradient-Hintergrund
   
   LEISTUNGEN SECTION
   .zelic-leistungen-section - Haupt-Container
   .zelic-leistungen-header  - Section Header
   .zelic-leistungen-label   - Pill Label
   .zelic-leistungen-title   - Grosse Ueberschrift
   .zelic-leistungen-subtitle - Untertitel
   .zelic-featured-card      - Erfolgsschmiede Card
   .zelic-featured-video     - Video Container
   .zelic-video-thumbnail    - Video Thumbnail
   .zelic-play-button        - Play Button
   .zelic-featured-content   - Content Bereich
   .zelic-featured-label     - Label in Featured Card
   .zelic-featured-title     - Titel Featured Card
   .zelic-featured-tagline   - Tagline Featured Card
   .zelic-featured-description - Beschreibung
   .zelic-feature-list       - Check-Liste Featured
   .zelic-check-icon         - Gruenes Haken-Icon
   .zelic-carousel-wrapper   - Karussell Container
   .zelic-carousel-header    - Karussell Header
   .zelic-carousel-title     - Karussell Titel
   .zelic-carousel-nav       - Nav Button Container
   .zelic-carousel-btn       - Prev/Next Buttons
   .zelic-carousel-track-container - Track Wrapper
   .zelic-carousel-track     - Flex Track
   .zelic-service-card       - Service Card
   .zelic-service-card.has-pill - Card mit Pill Badge
   .zelic-recommended-pill   - Empfehlungs-Badge (absolut)
   .zelic-recommended-pill-v2 - Empfehlungs-Badge (inline)
   .zelic-card-header        - Card Header
   .zelic-card-icon          - Icon Box in Card
   .zelic-card-icon--dark    - Dunkle Icon Box (Modifier)
   .zelic-card-meta          - Label + Titel Container
   .zelic-card-label         - Kleines Label
   .zelic-card-title         - Card Titel
   .zelic-card-description   - Card Beschreibung
   .zelic-card-features      - Feature Liste in Card
   .zelic-card-footer        - Card Footer
   .zelic-tags               - Tags Container
   .zelic-tag                - Einzelner Tag
   .zelic-card-link          - CTA Link in Card
   .zelic-carousel-indicators - Dot Navigation
   .zelic-indicator          - Einzelner Dot
   .zelic-indicator.active   - Aktiver Dot
   .zelic-scroll-hint        - Mobile Swipe Hint
   
   RESULTS CARD
   .zelic-results-card       - Ergebnis-Card Container
   .zelic-results-title      - Titel
   .zelic-result-list        - Liste
   .zelic-result-item        - Item
   .zelic-result-content     - Content
   .zelic-result-text        - Text
   
   EXPERTEN MARQUEE
   .experten-marquee-wrapper - Container mit Mask
   .experten-marquee-track   - Animierter Track
   .experte-item             - Einzelner Experte
   .experte-avatar           - Avatar
   .experte-name             - Name
   .experte-fachgebiet       - Fachgebiet Badge
   
   PHASE CAROUSEL LIGHT
   .zelic-pcl-wrapper        - Haupt-Container
   .zelic-pcl-segmented      - Tab-Container
   .zelic-pcl-segmented-btn  - Tab-Button
   .zelic-pcl-carousel       - Carousel Container
   .zelic-pcl-card           - Phase Card
   .zelic-pcl-card-icon      - Card Icon
   .zelic-pcl-card-title     - Card Titel
   .zelic-pcl-card-footer    - Gruener Footer
   .zelic-pcl-nav            - Navigation Arrows
   .zelic-pcl-dots           - Dot Navigation
   
   UTILITY KLASSEN
   .zelic-card-hover         - Hover-Effekt fuer Spectra Cards
   .zelic-icon-lime          - Lime Icon-Box Style
   
   ================================================================================= */


/* =================================================================================
   ENDE DES CSS FILES
   =================================================================================
   
   Letzte Aktualisierung: Januar 2025
   Version: 2.1
   
   AENDERUNGEN v2.1:
   - Font-Inkonsistenz behoben (alles auf Inter)
   - Hardcoded Farben durch Variablen ersetzt
   - Dark-Farben konsolidiert (9 → 6)
   - Neue Variablen: --zelic-success, --zelic-text-light-warm
   - Newsletter Mobile-Responsive hinzugefuegt
   
   HINWEISE ZUR WARTUNG:
   - Neue Styles immer in die passende Sektion einfuegen
   - Prefix fuer neue Components nutzen (z.B. zelic-xyz-)
   - !important nur wenn noetig (Astra Pro Override)
   - Responsive Breakpoints: 1024px, 768px, 480px
   - Bei neuen Sections IMMER Mobile-Responsive mitdenken!
   - CSS-Variablen aus :root nutzen statt hardcoded Werte
   - Focus-States fuer alle interaktiven Elemente
   - Reduced Motion Support wo Animation verwendet wird
   
   ================================================================================= */

/* ============ Footer V10 (Widget block-10, ausgelagert 26.08.2026) ============ */
.zc10 *, .zc10 *::before, .zc10 *::after, .zc10-band * { margin:0; padding:0; box-sizing:border-box; }

.zc10 {
    /* Token-Werte des Designsystems: Dark #141414, Lime #D4ED6D,
       helle Stufen aus Light Grey #E8E8E2 abgeleitet, Weiss fuer t100 */
    --bg:     #141414;
    --t100:   #FFFFFF;
    --t72:    rgba(232,232,226,0.72);
    --t58:    rgba(232,232,226,0.58);
    --t45:    rgba(232,232,226,0.45);
    --lime:   #D4ED6D;
    --lime-press: #B8D04C;
    --line:   rgba(232,232,226,0.08);
    --line2:  rgba(232,232,226,0.14);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ── Faktor-7-Band (temporaer, s. Einbau-Hinweis 4) ─────────── */
.zc10-band {
    background: #D4ED6D;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.zc10-band-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 12px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}
.zc10-band-text { font-size: 13.5px; font-weight: 700; color: #141414; letter-spacing: -0.01em; }
.zc10-band-text span { font-weight: 500; }
.zc10-band a {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: #141414;
    text-decoration: none;
    border: 1.5px solid rgba(20,20,20,0.8);
    border-radius: 999px;
    padding: 5px 14px;
    transition: background .2s, color .2s;
}
.zc10-band a:hover { background: #141414; color: #D4ED6D; }
.zc10-band a svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Top lime line (solide, kein Verlauf) */
.zc10-rule { height: 1px; background: var(--lime); opacity: 0.4; }

/* ── Main grid ──────────────────────────────────────────────── */
.zc10-main {
    max-width: 1360px;
    margin: 0 auto;
    padding: 64px 56px;
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 1fr;
    gap: 56px;
    align-items: start;
}

/* Brand */
.zc10-logo { display: block; margin-bottom: 18px; text-decoration: none; }
.zc10-logo svg { height: 46px; width: auto; display: block; }

.zc10-claim {
    font-size: 13.5px;
    line-height: 1.78;
    color: var(--t58);
    max-width: 300px;
    margin-bottom: 22px;
}

.zc10-kontakt { display: flex; flex-direction: column; gap: 7px; margin-bottom: 24px; }
.zc10-kontakt a, .zc10-kontakt span {
    font-size: 13px;
    color: var(--t58);
    text-decoration: none;
    transition: color .15s;
}
.zc10-kontakt a:hover { color: var(--t100); }

.zc10-social { display: flex; gap: 8px; }
.zc10-social a {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--line2);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s;
}
.zc10-social a:hover { background: rgba(232,232,226,0.08); border-color: rgba(232,232,226,0.24); transform: translateY(-2px); }
.zc10-social svg { width: 15px; height: 15px; fill: var(--t45); transition: fill .2s; }
.zc10-social a:hover svg { fill: var(--t100); }

/* Nav columns */
.zc10-nav-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t100);
    letter-spacing: 0.3px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    position: relative;
}
.zc10-nav-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 22px; height: 2px;
    background: var(--lime);
    border-radius: 2px;
}

.zc10-nav-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.zc10-nav-list a {
    position: relative;
    display: inline-block;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--t58);
    text-decoration: none;
    transition: color .18s, padding-left .18s;
}
/* Lime-Strich wandert beim Hover vor den Link */
.zc10-nav-list a::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 12px; height: 2px;
    margin-top: -1px;
    background: var(--lime);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s;
}
.zc10-nav-list a:hover { color: var(--t100); padding-left: 19px; }
.zc10-nav-list a:hover::before { transform: scaleX(1); }

/* CTA col */
.zc10-cta-headline {
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0 0 26px;
    text-align: center;
}
.zc10-cta-line1 { display: block; font-weight: 400; color: var(--t58); white-space: nowrap; }
.zc10-cta-line2 { display: block; font-weight: 800; color: var(--t100); white-space: nowrap; }

.zc10-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    background: var(--lime);
    color: #141414;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: background .2s, transform .2s;
    margin-bottom: 11px;
}
.zc10-cta-btn:hover { background: var(--lime-press); transform: translateY(-1px); }
.zc10-cta-btn svg { width: 14px; height: 14px; stroke: #141414; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.zc10-cta-btn:hover svg { transform: translateX(3px); }

.zc10-cta-note { font-size: 11.5px; color: var(--t45); text-align: center; }

/* ── Beleg-Leiste ───────────────────────────────────────────── */
.zc10-belege {
    border-top: 1px solid var(--line);
}
.zc10-belege-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 16px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 8px;
    font-family: ui-monospace, 'SF Mono', 'Menlo', 'Cascadia Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--t45);
}
.zc10-belege a {
    color: var(--t58);
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
}
.zc10-belege a:hover { color: var(--t100); }
.zc10-belege .dot { color: var(--t45); }

/* ── Below ──────────────────────────────────────────────────── */
.zc10-below { border-top: 1px solid var(--line); }
.zc10-below-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 17px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.zc10-wordmark {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--t100);
    text-decoration: none;
}
.zc10-wordmark span { font-weight: 500; }
.zc10-copy { font-weight: 400; font-size: 13px; color: var(--t58); letter-spacing: 0; margin-left: 10px; }

.zc10-below-links { display: flex; }
.zc10-below-links a {
    font-size: 13.5px;
    color: var(--t58);
    text-decoration: none;
    padding: 6px 16px;
    border-right: 1px solid var(--line2);
    transition: color .15s;
}
.zc10-below-links a:last-child { border-right: none; padding-right: 0; }
.zc10-below-links a:first-child { padding-left: 0; }
.zc10-below-links a:hover { color: var(--t100); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .zc10-main { grid-template-columns: 1fr 1fr; gap: 40px 48px; padding: 56px 36px; }
    .zc10-below-inner, .zc10-belege-inner { padding-left: 36px; padding-right: 36px; }
    .zc10-band-inner { padding: 12px 36px; }
}

@media (max-width: 768px) {
    .zc10-main { grid-template-columns: 1fr 1fr; gap: 36px 32px; padding: 48px 24px; }
    .zc10-main > div:first-child { grid-column: 1 / -1; }
    .zc10-main > div:last-child { grid-column: 1 / -1; }
    .zc10-cta-btn { max-width: 320px; }
    .zc10-claim { max-width: 100%; }
    .zc10-nav-list a { font-size: 15px; padding: 4px 0; }
    .zc10-nav-list a:hover { padding-left: 19px; }
    .zc10-belege-inner { padding: 14px 24px; }
    .zc10-below-inner { padding: 18px 24px; flex-direction: column; align-items: flex-start; gap: 14px; }
    .zc10-below-links { flex-wrap: wrap; gap: 0; }
}

@media (max-width: 480px) {
    .zc10-main { grid-template-columns: 1fr; gap: 36px; padding: 40px 20px; }
    .zc10-main > div:first-child { grid-column: auto; }
    .zc10-main > div:last-child { grid-column: auto; }
    .zc10-cta-btn { max-width: 100%; }
    .zc10-social a { width: 42px; height: 42px; }
    .zc10-band-inner { padding: 12px 20px; gap: 10px; }
    .zc10-belege-inner { padding: 14px 20px; }
    .zc10-below-inner { padding: 16px 20px; }
    .zc10-below-links a { padding: 8px 14px; font-size: 13px; }
    .zc10-below-links a:first-child { padding-left: 0; }
}

/* Footer V10: Astra-Container um das Footer-Widget auf volle Breite.
   Nullungen mit !important, weil Astra eigene responsive Paddings setzt.
   Gescoped auf #colophon, wirkt nur im Footer. (26.08.2026) */
#colophon .site-above-footer-wrap { padding: 0 !important; }
#colophon .site-above-footer-inner-wrap { padding: 0 !important; }
#colophon .ast-builder-footer-grid-columns { gap: 0 !important; }
#colophon .site-footer-above-section-1 { padding: 0 !important; margin: 0 !important; }
#colophon .footer-widget-area.widget-area { margin: 0 !important; padding: 0 !important; }
#colophon .footer-widget-area .widget_block { margin: 0 !important; }