/**
 * KW Lobby — Shared Components
 * Wiederverwendbare UI-Komponenten via Data-Attribute.
 * Geladen VOR den Widget-CSS-Dateien → Widget-Overrides haben Vorrang.
 *
 * Spezifität-Strategie: Verdoppelte Attribut-Selektoren [data-kwl-btn="x"][data-kwl-btn]
 * ergeben (0,2,0) und schlagen Elementor V4 `.elementor-widget a` (0,1,1).
 *
 * Komponenten:
 *   [data-kwl-btn="gradient"]   — Premium-Button (Gradient + Shimmer)
 *   [data-kwl-btn="outline"]    — Sekundärer Button (Rahmen + Füllung bei Hover)
 *   [data-kwl-btn="inverted"]   — Dezent-Button (Tonal Gold-Tint, subtile Präsenz)
 *   [data-kwl-link]             — Architekturweiter Link-Reset gegen V4 Pink-Leak (einzel-Link)
 *   [data-kwl-link-scope]       — Content-Scope: alle inneren <a> ohne data-kwl-btn
 *   [data-kwl-card]             — Card-Basis (Border, Shadow, Hover-Lift)
 *   [data-kwl-icon-circle]      — Glassmorphism Icon-Kreis
 *   [data-kwl-separator="gold"]        — Gold-Gradient-Linie (links-ausfadend)
 *   [data-kwl-separator="gold-center"] — Gold-Gradient-Linie (symmetrisch zentriert)
 */

/* =========================================================
   BUTTON: Gemeinsame Basis (alle Varianten)
   ========================================================= */

[data-kwl-btn][data-kwl-btn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
    font-family: var(--kwl-font-body);
    font-weight: var(--kwl-fw-semibold);
    font-size: inherit;
    line-height: var(--kwl-lh-heading);
    letter-spacing: var(--kwl-ls-wide);
    border-radius: var(--kwl-btn-radius, var(--kwl-radius-md, 8px));
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Focus-Visible (BFSG, alle Varianten) */
[data-kwl-btn][data-kwl-btn]:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    [data-kwl-btn][data-kwl-btn]:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }
}

/* :focus Reset — verhindert Elementor V4 Pink-Leak nach Mausklick.
   Browser setzt :focus nach Klick (sticky), aber NICHT :focus-visible (nur Tastatur).
   :not(:hover) sorgt dafür, dass Hover-Effekte nicht überschrieben werden. */
[data-kwl-btn="gradient"][data-kwl-btn]:focus:not(:hover) {
    color: var(--kwl-btn-color, var(--kwl-btn-text, #ffffff));
}

[data-kwl-btn="outline"][data-kwl-btn]:focus:not(:hover) {
    color: var(--kwl-btn-color, var(--kwl-accent, #BD9B5C));
    background: transparent;
    border-color: var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C));
}

[data-kwl-btn="inverted"][data-kwl-btn]:focus:not(:hover) {
    color: var(--kwl-btn-color, var(--kwl-primary, #00315d));
}

@media (prefers-color-scheme: dark) {
    .elementor-widget [data-kwl-btn="outline"][data-kwl-btn][data-kwl-btn]:focus:not(:hover) {
        color: var(--kwl-focus, #c9a84c);
        border-color: var(--kwl-focus, #c9a84c);
    }

    .elementor-widget [data-kwl-btn="inverted"][data-kwl-btn][data-kwl-btn]:focus:not(:hover) {
        color: var(--kwl-focus, #c9a84c);
    }
}

/* Reduced Motion (alle Varianten) */
@media (prefers-reduced-motion: reduce) {
    [data-kwl-btn][data-kwl-btn] {
        transition: none;
    }

    [data-kwl-btn][data-kwl-btn]:hover,
    [data-kwl-btn][data-kwl-btn]:active {
        transform: none;
    }
}

/* =========================================================
   BUTTON: Gradient (Premium — gefüllt + Shimmer)
   ========================================================= */

[data-kwl-btn="gradient"][data-kwl-btn] {
    color: var(--kwl-btn-color, var(--kwl-btn-text, #ffffff));
    background: linear-gradient(
        175deg,
        color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 95%, white) 0%,
        var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 40%,
        color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 92%, black) 100%
    );
    border: 1px solid color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 70%, white);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 6px color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 250ms var(--kwl-ease-material),
        box-shadow 250ms var(--kwl-ease-material),
        filter 250ms var(--kwl-ease-material);
}

/* Shimmer-Sweep */
[data-kwl-btn="gradient"][data-kwl-btn]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255, 255, 255, 0.05) 35%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.12) 55%,
        rgba(255, 255, 255, 0.05) 65%,
        transparent 75%
    );
    transform: translateX(-100%);
    transition: transform 800ms var(--kwl-ease-material);
    pointer-events: none;
}

/* Gradient: Active / Press */
[data-kwl-btn="gradient"][data-kwl-btn]:active {
    filter: brightness(0.92);
    transform: translateY(1px) scale(0.97);
    box-shadow:
        0 1px 3px color-mix(in srgb, var(--kwl-text, #1a202c) 15%, transparent),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Gradient: Hover */
@media (hover: hover) {
    [data-kwl-btn="gradient"][data-kwl-btn]:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 30%, transparent),
            0 4px 12px color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 35%, transparent),
            0 8px 24px color-mix(in srgb, var(--kwl-text, #1a202c) 10%, transparent);
    }

    [data-kwl-btn="gradient"][data-kwl-btn]:hover::after {
        transform: translateX(100%);
    }
}

/* Gradient: Dark Mode — .elementor-widget Prefix (0,4,0) gegen Elementor-Blau */
@media (prefers-color-scheme: dark) {
    .elementor-widget [data-kwl-btn="gradient"][data-kwl-btn][data-kwl-btn] {
        color: var(--kwl-btn-color, var(--kwl-btn-text, #ffffff));
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

/* Gradient: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    [data-kwl-btn="gradient"][data-kwl-btn]::after {
        display: none;
    }
}

/* =========================================================
   BUTTON: Outline (Rahmen + Füllung bei Hover)
   ========================================================= */

[data-kwl-btn="outline"][data-kwl-btn] {
    color: var(--kwl-btn-color, var(--kwl-accent, #BD9B5C));
    background: transparent;
    border: 2px solid var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C));
    transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease, transform 250ms ease;
}

/* Outline: Active / Press */
[data-kwl-btn="outline"][data-kwl-btn]:active {
    transform: translateY(1px) scale(0.97);
}

/* Outline: Hover — füllt sich mit Akzentfarbe */
@media (hover: hover) {
    [data-kwl-btn="outline"][data-kwl-btn]:hover {
        background: var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C));
        color: var(--kwl-btn-hover-color, var(--kwl-accent-contrast, #00315d));
        border-color: var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C));
        text-decoration: none;
        transform: translateY(-1px);
    }
}

/* Outline: Dark Mode — helleres Gold (#c9a84c, 6.56:1 auf #1a202c)
   .elementor-widget Prefix + Dreifach-Attribut = (0,4,0) — schlägt jeden Elementor-Selektor */
@media (prefers-color-scheme: dark) {
    .elementor-widget [data-kwl-btn="outline"][data-kwl-btn][data-kwl-btn] {
        color: var(--kwl-focus, #c9a84c);
        border-color: var(--kwl-focus, #c9a84c);
    }

    /* Fallback für Nicht-Elementor-Kontext (Footer, Navigation) */
    [data-kwl-btn="outline"][data-kwl-btn][data-kwl-btn] {
        color: var(--kwl-btn-color, var(--kwl-focus, #c9a84c));
        border-color: var(--kwl-btn-bg, var(--kwl-focus, #c9a84c));
    }

    @media (hover: hover) {
        .elementor-widget [data-kwl-btn="outline"][data-kwl-btn][data-kwl-btn]:hover,
        [data-kwl-btn="outline"][data-kwl-btn][data-kwl-btn]:hover {
            background: var(--kwl-focus, #c9a84c);
            color: var(--kwl-btn-hover-color, var(--kwl-accent-contrast, #00315d));
            border-color: var(--kwl-focus, #c9a84c);
        }
    }
}

/* =========================================================
   BUTTON: Inverted / Dezent (Tonal Gold-Tint, solide)
   Mischt mit var(--kwl-bg) statt transparent → opaker, sichtbarer Tint.
   Light: Warmes Creme (18% Gold auf Weiss) + Navy-Text
   Dark:  Warmer Dunkleton (18% Gold auf Navy) + Gold-Text
   Hierarchie: Gradient (voll) > Dezent (getönt) > Outline (leer)
   Kontrast: Light Navy/#F3EDE2 ≈ 11:1 | Dark #c9a84c/#373635 ≈ 5.3:1
   ========================================================= */

[data-kwl-btn="inverted"][data-kwl-btn] {
    color: var(--kwl-btn-color, var(--kwl-primary, #00315d));
    background: color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 18%, var(--kwl-bg, #ffffff));
    border: 1px solid color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 35%, var(--kwl-bg, #ffffff));
    transition: border-color 250ms var(--kwl-ease-material),
        transform 250ms var(--kwl-ease-material),
        box-shadow 250ms var(--kwl-ease-material);
}

/* Inverted: Active / Press */
[data-kwl-btn="inverted"][data-kwl-btn]:active {
    transform: translateY(1px) scale(0.97);
}

/* Inverted: Hover — Border verdichtet sich, Lift + Schatten.
   BG bleibt konstant (18%) → kein Kontrastverlust im Dark Mode. */
@media (hover: hover) {
    [data-kwl-btn="inverted"][data-kwl-btn]:hover {
        border-color: color-mix(in srgb, var(--kwl-btn-bg, var(--kwl-accent, #BD9B5C)) 55%, var(--kwl-bg, #ffffff));
        transform: translateY(-1px);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent);
    }
}

/* Inverted: Dark Mode — nur Textfarbe anpassen (BG/Border via --kwl-bg automatisch)
   .elementor-widget Prefix + Dreifach-Attribut = (0,4,0) */
@media (prefers-color-scheme: dark) {
    .elementor-widget [data-kwl-btn="inverted"][data-kwl-btn][data-kwl-btn] {
        color: var(--kwl-focus, #c9a84c);
    }

    /* Fallback fuer Nicht-Elementor-Kontext (Footer, Navigation) */
    [data-kwl-btn="inverted"][data-kwl-btn][data-kwl-btn] {
        color: var(--kwl-btn-color, var(--kwl-focus, #c9a84c));
    }

    @media (hover: hover) {
        .elementor-widget [data-kwl-btn="inverted"][data-kwl-btn][data-kwl-btn]:hover {
            box-shadow: 0 2px 8px rgba(201, 168, 76, 0.2);
        }
    }
}

/* =========================================================
   LINK: Architekturweiter V4-Pink-Reset
   =========================================================

   Ersetzt 30+ widget-lokale V4-Resets durch eine einzige Quelle.

   Spezifitäts-Strategie:
   - Base-Regel via :where() → Spezifität (0,0,0). Widget-eigene
     Regeln (z.B. transition: color, opacity) gewinnen automatisch.
   - Hover/Active/Focus über [data-kwl-link][data-kwl-link] → (0,3,0),
     schlägt Elementor V4 `.elementor-kit-X a:hover` (0,1,1).

   Funktioniert überall: Widgets, Single-Templates, Footer, Navigation, Sidebar.

   Bridge-Tokens (Widgets/Container setzen diese lokal):
     --kwl-link-color        Normal-Farbe       (default: currentColor)
     --kwl-link-hover-color  Hover/Active-Farbe (default: var(--kwl-accent))
     --kwl-link-underline    Unterstreichung    (default: none)

   :focus:not(:hover) verhindert Pink-Leak nach Mausklick (sticky :focus).
   :focus-visible liefert BFSG-Outline für Tastatur-Nutzer. */

/* Default-Color via a[data-kwl-link] (0,1,1) statt :where() (0,0,0):
   schlaegt Elementor V4 .elementor-kit-X a (0,1,1) durch DOM-Order
   (shared-components.css wird nach Elementor-Kit geladen).
   Widgets mit eigenem .kw-xx a { color } (0,1,1) gewinnen weiterhin
   durch DOM-Order (Widget-CSS wird nach shared-components geladen). */
a[data-kwl-link] {
    color: var(--kwl-link-color, currentColor);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration-color: currentColor;
}

:where([data-kwl-link]) {
    text-decoration: var(--kwl-link-underline, none);
    transition: color 200ms ease, text-decoration-color 200ms ease;
}

[data-kwl-link][data-kwl-link]:hover,
[data-kwl-link][data-kwl-link]:active {
    color: var(--kwl-link-hover-color, var(--kwl-accent, #BD9B5C));
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration-color: currentColor;
}

[data-kwl-link][data-kwl-link]:focus:not(:hover) {
    color: var(--kwl-link-color, currentColor);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration-color: currentColor;
}

[data-kwl-link][data-kwl-link]:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
    border-radius: var(--kwl-radius-sm, 4px);
}

@media (prefers-color-scheme: dark) {
    [data-kwl-link][data-kwl-link]:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }
}

@media (prefers-reduced-motion: reduce) {
    :where([data-kwl-link]) {
        transition: none;
    }
}

/* =========================================================
   LINK-SCOPE: V4-Reset für alle <a> innerhalb eines Containers
   =========================================================

   Für Content-Bereiche wo einzelne Links nicht per Template markierbar
   sind (user-generated content, PHP-post-processed HTML, Leaflet-Popups).

   [data-kwl-link-scope] auf den Container → alle <a> innen bekommen
   den V4-Reset. data-kwl-btn-Buttons bleiben durch :not() ausgeschlossen.

   Spezifität (0,4,1) schlägt Elementor V4 `.elementor-kit-X a:hover` (0,1,1).

   Bridge-Tokens (optional, am Scope-Element setzen):
     --kwl-link-hover-color  Hover/Active-Farbe (default: var(--kwl-accent))
     --kwl-link-color        Normal-Farbe für :focus:not(:hover) Reset */

/* Default-State: Farbe + V4-Pink-Reset (Border/Outline/Shadow/Background/Decoration).
   V4-Kit faerbt text-decoration-color mit Pink — currentColor zwingt den Unterstrich
   zurueck auf die (ebenfalls resettete) Text-Farbe. Spezifitaet (0,3,1) schlaegt
   V4 `.elementor-kit-X a` (0,1,1). */
[data-kwl-link-scope][data-kwl-link-scope] a:not([data-kwl-btn]) {
    color: var(--kwl-link-color, currentColor);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration: var(--kwl-link-underline, underline);
    text-decoration-color: currentColor;
    transition: color 200ms ease, text-decoration-color 200ms ease;
}

[data-kwl-link-scope][data-kwl-link-scope] a:not([data-kwl-btn]):hover,
[data-kwl-link-scope][data-kwl-link-scope] a:not([data-kwl-btn]):active {
    color: var(--kwl-link-hover-color, var(--kwl-accent, #BD9B5C));
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration-color: var(--kwl-accent, #BD9B5C);
}

[data-kwl-link-scope][data-kwl-link-scope] a:not([data-kwl-btn]):focus:not(:hover) {
    color: var(--kwl-link-color, currentColor);
    outline: none;
}

[data-kwl-link-scope][data-kwl-link-scope] a:not([data-kwl-btn]):focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
    border-radius: var(--kwl-radius-sm, 4px);
}

/* Transparente Action-Buttons im Scope (z.B. Lightbox-Trigger um ein Bild):
   nacktes <button> ohne data-kwl-btn bekäme sonst Elementor V4 Pink-Border + Hover/Focus.
   Spezifität (0,4,1) schlägt Elementor V4 `.elementor-kit-X button` (0,1,1) in allen States. */
[data-kwl-link-scope][data-kwl-link-scope] button:not([data-kwl-btn]),
[data-kwl-link-scope][data-kwl-link-scope] button:not([data-kwl-btn]):hover,
[data-kwl-link-scope][data-kwl-link-scope] button:not([data-kwl-btn]):active,
[data-kwl-link-scope][data-kwl-link-scope] button:not([data-kwl-btn]):focus:not(:hover) {
    background: none;
    border-color: transparent;
    outline: none;
    box-shadow: none;
    color: inherit;
}

/* V4 setzt auch auf <img>/<figure> Kit-Pink-Borders (insbesondere bei Hover
   innerhalb eines Button-Containers). Im Scope sind Bilder dekorativ —
   kein Border, kein Outline, kein Box-Shadow. */
[data-kwl-link-scope][data-kwl-link-scope] figure,
[data-kwl-link-scope][data-kwl-link-scope] figure:hover,
[data-kwl-link-scope][data-kwl-link-scope] img,
[data-kwl-link-scope][data-kwl-link-scope] img:hover {
    border-color: transparent;
    outline: none;
    box-shadow: none;
}

/* =========================================================
   CARD: Basis (Border, Shadow, Hover-Lift)
   ========================================================= */

[data-kwl-card] {
    background: var(--kwl-card-bg, var(--kwl-bg, #ffffff));
    border: 1px solid var(--kwl-card-border, var(--kwl-border, #e2e8f0));
    border-top: 3px solid var(--kwl-card-accent, var(--kwl-accent, #BD9B5C));
    border-radius: var(--kwl-card-radius, var(--kwl-radius-lg, 12px));
    box-shadow: var(--kwl-shadow-md);
    transition: box-shadow var(--kwl-transition, 200ms ease),
                transform var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
    [data-kwl-card]:hover {
        box-shadow: var(--kwl-shadow-hover);
        transform: translateY(var(--kwl-card-lift, -3px));
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kwl-card] {
        transition: none;
    }

    @media (hover: hover) {
        [data-kwl-card]:hover {
            transform: none;
        }
    }
}

/* =========================================================
   ICON-KREIS: Glassmorphism-Tint
   ========================================================= */

[data-kwl-icon-circle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--kwl-icon-size, 36px);
    height: var(--kwl-icon-size, 36px);
    color: var(--kwl-icon-color, var(--kwl-accent, #BD9B5C));
    background: color-mix(in srgb, var(--kwl-icon-color, var(--kwl-accent, #BD9B5C)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--kwl-icon-color, var(--kwl-accent, #BD9B5C)) 20%, transparent);
    border-radius: var(--kwl-radius-full, 9999px);
}

[data-kwl-icon-circle] svg {
    display: block;
    width: var(--kwl-icon-svg-size, 55%);
    height: var(--kwl-icon-svg-size, 55%);
}

@media (prefers-color-scheme: dark) {
    [data-kwl-icon-circle] {
        background: color-mix(in srgb, var(--kwl-icon-color, var(--kwl-accent, #BD9B5C)) 20%, transparent);
        border-color: color-mix(in srgb, var(--kwl-icon-color, var(--kwl-accent, #BD9B5C)) 30%, transparent);
    }
}

/* =========================================================
   SEPARATOR: Gold-Gradient-Linie
   ========================================================= */

[data-kwl-separator="gold"] {
    position: relative;
}

[data-kwl-separator="gold"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--kwl-separator-height, 2px);
    background: linear-gradient(to right,
        var(--kwl-accent, #BD9B5C),
        color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent),
        transparent
    );
    border-radius: 1px;
}

/* Zentrierter Gold-Separator: Symmetrischer Gradient */
[data-kwl-separator="gold-center"] {
    position: relative;
}

[data-kwl-separator="gold-center"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--kwl-separator-max-width, 120px);
    height: var(--kwl-separator-height, 2px);
    background: linear-gradient(to right,
        transparent,
        color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent) 20%,
        var(--kwl-accent, #BD9B5C) 50%,
        color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent) 80%,
        transparent
    );
    border-radius: 1px;
}

/* =========================================================
   HEADING DESIGN: Shared heading styles (7 Stile)
   Gesteuert über data-kwl-heading-style + data-kwl-heading-align
   auf dem Widget-Wrapper. Heading-Element bekommt .kwl-heading.
   ========================================================= */

[data-kwl-heading-style] {
    --kwl-heading-accent-color: var(--kwl-accent, #BD9B5C);
    --kwl-heading-separator-color: var(--kwl-accent, #BD9B5C);
    --kwl-heading-separator-height: 2px;
}

.kwl-heading-text {
    display: contents;
}

.kwl-heading-accent {
    color: var(--kwl-heading-accent-color);
}

/* ── Alignment ──────────────────────────────────────── */

[data-kwl-heading-align="center"] .kwl-heading {
    text-align: center;
}

[data-kwl-heading-align="right"] .kwl-heading {
    text-align: right;
}

/* ── Heading Deco (Separator unter Überschrift) ─────── */

.kwl-heading-deco {
    width: 100%;
    max-width: 80px;
    height: var(--kwl-heading-separator-height);
    border-radius: 1px;
    margin: var(--kwl-space-xs, 0.25rem) 0 var(--kwl-space-sm, 0.5rem);
    background: linear-gradient(
        to right,
        var(--kwl-heading-separator-color),
        color-mix(in srgb, var(--kwl-heading-separator-color) 40%, transparent),
        transparent
    );
}

[data-kwl-heading-align="center"] .kwl-heading-deco {
    max-width: 120px;
    align-self: center;
    margin-inline: auto;
    background: linear-gradient(to right, transparent, var(--kwl-heading-separator-color), transparent);
}

[data-kwl-heading-align="right"] .kwl-heading-deco {
    align-self: flex-end;
    margin-left: auto;
    background: linear-gradient(
        to left,
        var(--kwl-heading-separator-color),
        color-mix(in srgb, var(--kwl-heading-separator-color) 40%, transparent),
        transparent
    );
}

/* ── Ornamental ─────────────────────────────────────── */

.kwl-heading-ornament {
    display: block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    background: var(--kwl-heading-separator-color);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

[data-kwl-heading-style="ornamental"] .kwl-heading-deco {
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: var(--kwl-space-sm, 0.5rem);
    background: none;
    height: auto;
}

[data-kwl-heading-style="ornamental"] .kwl-heading-deco::before,
[data-kwl-heading-style="ornamental"] .kwl-heading-deco::after {
    content: '';
    flex: 1;
    height: 1px;
}

[data-kwl-heading-style="ornamental"] .kwl-heading-deco::before {
    background: linear-gradient(to right, transparent, var(--kwl-heading-separator-color));
}

[data-kwl-heading-style="ornamental"] .kwl-heading-deco::after {
    background: linear-gradient(to left, transparent, var(--kwl-heading-separator-color));
}

/* ── Split-Color ────────────────────────────────────── */

[data-kwl-heading-style="split-color"] .kwl-heading-deco {
    max-width: 100%;
    height: 1px;
    background: var(--kwl-border, #e2e8f0);
}

[data-kwl-heading-style="split-color"][data-kwl-heading-align="center"] .kwl-heading-deco,
[data-kwl-heading-style="split-color"][data-kwl-heading-align="right"] .kwl-heading-deco {
    background: var(--kwl-border, #e2e8f0);
}

/* ── Shimmer ────────────────────────────────────────── */

[data-kwl-heading-style="shimmer"] .kwl-heading {
    color: var(--kwl-heading-accent-color);
}

@supports (background-clip: text) {
    [data-kwl-heading-style="shimmer"] .kwl-heading {
        background: linear-gradient(
            105deg,
            var(--kwl-heading-accent-color) 0%,
            var(--kwl-heading-accent-color) 20%,
            color-mix(in srgb, var(--kwl-heading-accent-color) 40%, #fff) 40%,
            color-mix(in srgb, var(--kwl-heading-accent-color) 30%, #fff) 50%,
            color-mix(in srgb, var(--kwl-heading-accent-color) 40%, #fff) 60%,
            var(--kwl-heading-accent-color) 80%,
            var(--kwl-heading-accent-color) 100%
        );
        background-size: 100% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    [data-kwl-heading-style="shimmer"] .kwl-heading-accent {
        color: transparent;
    }
}

/* ── Outline ────────────────────────────────────────── */

[data-kwl-heading-style="outline"] .kwl-heading {
    color: var(--kwl-primary, #00315d);
}

@supports (-webkit-text-stroke: 1px black) {
    [data-kwl-heading-style="outline"] .kwl-heading {
        -webkit-text-stroke: 2px var(--kwl-primary, #00315d);
        color: transparent;
    }

    [data-kwl-heading-style="outline"] .kwl-heading-accent {
        -webkit-text-stroke-color: var(--kwl-heading-accent-color);
        color: transparent;
    }
}

/* ── Depth (Prägung) ────────────────────────────────── */

[data-kwl-heading-style="depth"] .kwl-heading {
    text-shadow:
        0 -1px 0 color-mix(in srgb, #fff 35%, transparent),
        0 1px 1px color-mix(in srgb, var(--kwl-primary, #00315d) 25%, transparent),
        0 3px 6px color-mix(in srgb, var(--kwl-primary, #00315d) 20%, transparent),
        0 8px 16px color-mix(in srgb, var(--kwl-primary, #00315d) 10%, transparent);
}

/* ── Seitenlinien (--lined) ─────────────────────────── */

@media (min-width: 600px) {
    .kwl-heading--lined {
        align-self: stretch;
        display: flex;
        align-items: center;
        gap: var(--kwl-space-md, 1rem);
    }

    .kwl-heading--lined .kwl-heading-text {
        display: inline;
        flex-shrink: 0;
    }

    .kwl-heading--lined::before,
    .kwl-heading--lined::after {
        content: '';
        flex: 1;
        height: 1px;
        min-width: 24px;
    }

    .kwl-heading--lined::before {
        background: linear-gradient(to right, transparent, var(--kwl-heading-lines-color, var(--kwl-heading-separator-color)));
    }

    .kwl-heading--lined::after {
        background: linear-gradient(to left, transparent, var(--kwl-heading-lines-color, var(--kwl-heading-separator-color)));
    }

    [data-kwl-heading-align="left"] .kwl-heading--lined::before {
        display: none;
    }

    [data-kwl-heading-align="right"] .kwl-heading--lined::after {
        display: none;
    }
}

/* ── Heading Subtitle ──────────────────────────────── */

.kwl-heading-subtitle {
    margin: 0;
    font-family: var(--kwl-font-body);
    font-size: var(--kwl-fsize-body);
    font-style: italic;
    font-weight: var(--kwl-fw-light);
    color: var(--kwl-text-muted, #64748b);
    line-height: var(--kwl-lh-body, 1.5);
    max-width: 60ch;
    text-wrap: pretty;
}

[data-kwl-heading-align="center"] .kwl-heading-subtitle {
    text-align: center;
    margin-inline: auto;
}

[data-kwl-heading-align="right"] .kwl-heading-subtitle {
    text-align: right;
    margin-left: auto;
}

.elementor-widget .kwl-heading-subtitle {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Heading Dark Mode ──────────────────────────────── */

@media (prefers-color-scheme: dark) {
    [data-kwl-heading-style="depth"] .kwl-heading {
        text-shadow:
            0 0 8px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 45%, transparent),
            0 0 24px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent),
            0 0 48px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 12%, transparent);
    }

    [data-kwl-heading-style="split-color"] .kwl-heading-deco {
        background: var(--kwl-border, #4a5568);
    }
}

@media (prefers-color-scheme: dark) {
    @supports (background-clip: text) {
        [data-kwl-heading-style="shimmer"] .kwl-heading {
            background-image: linear-gradient(
                105deg,
                var(--kwl-heading-accent-color) 0%,
                var(--kwl-heading-accent-color) 20%,
                color-mix(in srgb, var(--kwl-heading-accent-color) 50%, #e8d5a8) 40%,
                color-mix(in srgb, var(--kwl-heading-accent-color) 35%, #e8d5a8) 50%,
                color-mix(in srgb, var(--kwl-heading-accent-color) 50%, #e8d5a8) 60%,
                var(--kwl-heading-accent-color) 80%,
                var(--kwl-heading-accent-color) 100%
            );
        }
    }
}

@media (prefers-color-scheme: dark) {
    @supports (-webkit-text-stroke: 1px black) {
        [data-kwl-heading-style="outline"] .kwl-heading {
            -webkit-text-stroke: 2px var(--kwl-primary, #63b3ed);
        }
    }
}

/* ── Heading Reduced Motion ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-kwl-heading-style="shimmer"] .kwl-heading {
        animation: none;
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
        color: var(--kwl-heading-accent-color);
    }

    [data-kwl-heading-style="shimmer"] .kwl-heading-accent {
        color: var(--kwl-heading-accent-color);
    }
}

/* ── V4 Margin-Reset ────────────────────────────────── */

.elementor-widget .kwl-heading-deco {
    margin: var(--kwl-space-xs, 0.25rem) 0 var(--kwl-space-sm, 0.5rem);
}