/* ==========================================================================
   KREAGENCY (KA) BLUEPRINT FRAMEWORK V2.2
   ==========================================================================
   Author:  Marco Blindenbacher / Kreagency
   Basis:   Kreagency V3.0 + ATF
   Logic:   Attribute-Based Styling (ABS)
   Stack:   WordPress + Bricks 2.3 + Advanced Themer Framework 3.3.14

   ÄNDERUNGEN V2.2
   ─────────────────────────────────────────────────────────────────────────
   • Vollständige Umstellung auf CSS Logical Properties
   • Theme System neu gruppiert (Tokens + Semantik pro Theme)
   • Light-Theme ergänzt (war in V2.0 entfernt worden)
   • --ka-nav-bg-scrolled nun auch als dark-Variante via Token
   • [data-ka-nav="transparent"] Startfarbe korrigiert (war transparent,
     jetzt korrekt transparent ohne nav-bg Fallback)
   • [data-ka-nav] + * Offset auf margin-block-start korrigiert
   • Flip-Mechanismus: "true"/"false" statt "Wahr" (ACF gibt Englisch zurück)
   • data-ka-media img: height: auto ergänzt (verhindert Streckung)
   • data-ka-stagger Selektor vereinheitlicht
   • [data-ka-reveal="blur"] filter-Transition in Basis-Regel integriert
   • Overlay z-index von -1 → 0 (mit isoliertem Stacking-Context)
   • Nav: --ka-nav-bg-scrolled dark-Variante ergänzt
   • Alle margin/padding/inset/border → Logical Properties
   ─────────────────────────────────────────────────────────────────────────

   INDEX
   ─────────────────────────────────────────────────────────────────────────
   00. DESIGN TOKENS         (Root Variables)
   01. THEME SYSTEM          (data-ka-theme)
       └── Base              (gemeinsame Deklaration)
       └── ultralight        (Hell – Standard)
       └── light             (Grau – Subtil)
       └── dark              (Dunkel)
       └── ultradark         (Tiefschwarz)
   02. TYPOGRAPHY            (automatische Kontext-Logik)
   03. LAYOUT                (data-ka-split, data-ka-grid, data-ka-flip, data-ka-container)
   04. SURFACES              (data-ka-surface, data-ka-variant)
   05. BUTTONS & FORMS       (data-ka-btn, data-ka-form)
   06. NAVIGATION            (data-ka-nav)
   07. CARDS & MEDIA         (data-ka-card, data-ka-media)
   08. SPACING CONTROL       (data-ka-spacing)
   09. OVERLAY SYSTEM        (data-ka-overlay)
   10. ANIMATION & MOTION    (data-ka-animate, data-ka-reveal)
   11. DARK MODE             (prefers-color-scheme + data-ka-mode)
   12. UTILITY LAYER         (data-ka-align, data-ka-text, data-ka-gap)
   ─────────────────────────────────────────────────────────────────────────
========================================================================== */

/* ==========================================================================
   00. DESIGN TOKENS
   ========================================================================== */

:root {
    /* ── Transitions ─────────────────────────────────── */
    --ka-transition-base: 0.3s ease;
    --ka-transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ka-transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --ka-transition-slow: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ── Section Spacing ─────────────────────────────── */
    --ka-section-spacing: clamp(2.5rem, 8vw, 7.5rem);
    --ka-section-spacing-compact: clamp(1.5rem, 4vw, 3rem);
    --ka-section-spacing-wide: clamp(4rem, 12vw, 10rem);

    /* ── Component Defaults ──────────────────────────── */
    --ka-card-radius: var(--at-radius--s);
    --ka-image-radius: var(--at-radius--s);
    --ka-btn-radius: var(--at-radius--s);
    --ka-btn-border-width: 2px;
    --ka-btn-padding-x: clamp(1.25rem, 3vw, 2rem);
    --ka-btn-padding-y: clamp(0.6rem, 1.5vw, 0.875rem);
    --ka-icon-size: 48px;

    /* ── Pattern Defaults ──────────────────────────── */
    --at-svg-pattern: url("https://dev.kreagency.ch/wp-content/uploads/bg-pattern.svg");
    --pattern-size: 250px;

    /* ── Nav ─────────────────────────────────────────── */
    --ka-nav-height: clamp(60px, 8vh, 80px);
    --ka-nav-bg: var(--at-white);
    --ka-nav-bg-scrolled: rgba(255, 255, 255, 0.92);
    --ka-nav-bg-scrolled-dark: rgba(9, 16, 27, 0.92);
    --ka-nav-blur: 12px;

    /* ── Animation Defaults ──────────────────────────── */
    --ka-reveal-duration: 1.4s;
    --ka-reveal-delay: 0.15s;
    --ka-reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --ka-stagger: 0.22s;

    /* ── Shadows ─────────────────────────────────────── */
    --ka-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ka-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.09);
    --ka-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --ka-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16);
}

/* ==========================================================================
   01. THEME SYSTEM  (data-ka-theme)
   ========================================================================== */

/*
   AUFBAU PRO THEME
   ────────────────────────────────────────────────────────
   Jedes Theme definiert dieselben semantischen Tokens:

   Hintergründe    --background, --card-bg
   Rahmen          --card-border
   Typografie      --text-color, --heading-color, --span-color
   Links           --link-color, --link-color-hover
   Buttons         --btn-bg, --btn-text
   Icons           --icon-color, --icon-wrap-bg,
                   --icon-wrap-bg-hover, --icon-wrap-color-hover
   Formulare       --input-bg, --input-border
   Navigation      --nav-bg (überschreibt --ka-nav-bg lokal)
   ────────────────────────────────────────────────────────
*/

/* ── Base: gemeinsame Deklaration ────────────────────── */
[data-ka-theme] {
    position: relative;
    background-color: var(--background);
    color: var(--text-color);
    padding-block: var(--ka-section-spacing);
    transition:
        background-color var(--ka-transition-base),
        color var(--ka-transition-base);
    z-index: 1;
}

/* ────────────────────────────────────────────────────── */
/* ── Theme: Ultralight (Ultra Hell – Standard) ─────────────────── */
/* ────────────────────────────────────────────────────── */
[data-ka-theme="ultralight"] {
    /* Hintergründe */
    --background: var(--at-primary-l-6);
    --card-bg: var(--at-primary-l-5);
    --card-border: var(--at-primary);

    /* Typografie */
    --text-color: var(--at-primary-d-4);
    --heading-color: var(--at-primary-d-5);
    --span-color: var(--at-accent);

    /* Links */
    --link-color: var(--at-primary-d-4);
    --link-color-hover: var(--at-accent);

    /* Buttons */
    --btn-bg: var(--at-primary);
    --btn-text: var(--at-primary-l-6);
    --btn-icon: var(--at-primary-l-6);

    /* Icons */
    --icon-color: var(--at-primary);
    --icon-wrap-bg: var(--at-primary-l-6);
    --icon-wrap-bg-hover: var(--at-accent);
    --icon-wrap-color-hover: var(--at-accent-l-6);

    /* Formulare */
    --input-bg: var(--at-white);
    --input-border: var(--at-primary-l-1);

    /* Navigation */
    --nav-bg: var(--at-white);
}

/* ────────────────────────────────────────────────────── */
/* ── Theme: Light (Hell) ─────────────────── */
/* ────────────────────────────────────────────────────── */
[data-ka-theme="light"] {
    /* Hintergründe */
    --background: var(--at-primary-l-5);
    --card-bg: var(--at-primary-l-6);
    --card-border: var(--at-primary-l-1);

    /* Typografie */
    --text-color: var(--at-primary-d-5);
    --heading-color: var(--at-primary-d-6);
    --span-color: var(--at-accent-l-1);

    /* Links */
    --link-color: var(--at-primary-d-2);
    --link-color-hover: var(--at-accent-d-2);

    /* Buttons */
    --btn-bg: var(--at-primary);
    --btn-text: var(--at-white);
    --btn-icon: var(--at-white);

    /* Icons */
    --icon-color: var(--at-primary);
    --icon-wrap-bg: var(--at-primary-t-5);
    --icon-wrap-bg-hover: var(--at-accent);
    --icon-wrap-color-hover: var(--at-accent-l-6);

    /* Formulare */
    --input-bg: var(--at-white);
    --input-border: var(--at-primary);

    /* Navigation */
    --nav-bg: var(--at-primary-l-5);
}

/* ────────────────────────────────────────────────────── */
/* ── Theme: Dark (Dunkel) ────────────────────────────── */
/* ────────────────────────────────────────────────────── */
[data-ka-theme="dark"] {
    /* Hintergründe */
    --background: var(--at-accent-d-5);
    --card-bg: var(--at-accent-d-6);
    --card-border: var(--at-accent-d-1);

    /* Typografie */
    --text-color: var(--at-primary-l-6);
    --heading-color: var(--at-white);
    --span-color: var(--at-accent);

    /* Links */
    --link-color: var(--primary-l-6);
    --link-color-hover: var(--at-accent);

    /* Buttons */
    --btn-bg: var(--at-accent-d-1);
    --btn-text: var(--at-accent-l-6);
    --btn-icon: var(--at-accent-l-6);

    /* Icons */
    --icon-color: var(--at-accent);
    --icon-wrap-bg: var(--at-accent-t-6);
    --icon-wrap-bg-hover: var(--at-accent-t-4);
    --icon-wrap-color-hover: var(--at-accent-l-6);

    /* Formulare */
    --input-bg: var(--at-white);
    --input-border: var(--at-secondary-l-3);

    /* Navigation */
    --nav-bg: var(--at-secondary-l-5);
}

/* ────────────────────────────────────────────────────── */
/* ── Theme: Ultradark (Ultradunkel) ──────────────────── */
/* ────────────────────────────────────────────────────── */
[data-ka-theme="ultradark"] {
    /* Hintergründe */
    --background: var(--at-accent-d-6);
    --card-bg: var(--at-secondary);
    --card-border: rgba(255, 255, 255, 0.08);

    /* Typografie */
    --text-color: var(--at-accent-l-6);
    --heading-color: var(--at-white);
    --span-color: var(--at-accent);

    /* Links */
    --link-color: var(--at-accent-l-6);
    --link-color-hover: var(--at-accent);

    /* Buttons */
    --btn-bg: var(--at-accent-d-2);
    --btn-text: var(--at-accent-l-6);
    --btn-icon: var(--at-accent-l-6);

    /* Icons */
    --icon-color: var(--at-accent);
    --icon-wrap-bg: var(--at-accent-t-6);
    --icon-wrap-bg-hover: var(--at-accent-t-4);
    --icon-wrap-color-hover: var(--at-accent-l-6);

    /* Formulare */
    --input-bg: var(--at-accent-d-5);
    --input-border: rgba(255, 255, 255, 0.12);

    /* Navigation */
    --nav-bg: var(--at-primary);
}

/* ==========================================================================
   02. TYPOGRAPHY  (automatische Kontext-Logik)
   ========================================================================== */

/* Basis-Vererbung */
[data-ka-theme] {
    color: var(--text-color);
}

/* Überschriften */
[data-ka-theme] :is(h1, h2, h3, h4, h5, h6) {
    color: var(--heading-color);
    transition: color var(--ka-transition-base);
}

/* Akzent-Span in Headlines */
[data-ka-theme] :is(h1, h2, h3, h4, h5, h6) span,
[data-ka-theme] :is(h1, h2, h3, h4, h5, h6) em {
    color: var(--span-color);
    font-style: normal;
}

/* Link-Automatik */
[data-ka-theme] a:not([class*="button"]):not([data-ka-btn]) {
    color: var(--link-color, inherit);
    text-decoration-color: rgba(0, 0, 0, 0.1);
    transition: all var(--ka-transition-base);
}
[data-ka-theme] a:not([class*="button"]):not([data-ka-btn]):hover {
    color: var(--link-color-hover);
    text-decoration-color: var(--link-color-hover);
}

/* Fließtext-Elemente */
[data-ka-theme] p,
[data-ka-theme] li,
[data-ka-theme] blockquote {
    color: var(--text-color);
}

/* Blockquote */
[data-ka-theme] blockquote {
    border-inline-start: 3px solid var(--span-color);
    padding-inline-start: var(--at-space--m, 1.5rem);
    opacity: 0.85;
}

/* =============================================================================
   03. LAYOUT  (data-ka-split / data-ka-grid / data-ka-flip / data-ka-container)
   ============================================================================= */

/* ── Split: 2-Spalten-Layout ─────────────────────────── */
[data-ka-split] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: var(--at-space--xl, 3rem);
    align-items: center;
}

[data-ka-split="60-40"] {
    grid-template-columns: 3fr 2fr;
}
[data-ka-split="40-60"] {
    grid-template-columns: 2fr 3fr;
}
[data-ka-split="70-30"] {
    grid-template-columns: 7fr 3fr;
}

[data-ka-split="30-70"] {
    grid-template-columns: 3fr 7fr;
}

/* Flip  — "true" (ACF Englisch) und "Wahr" (ACF Deutsch) */
[data-ka-split][data-ka-flip="true"] > *:first-child,
[data-ka-split][data-ka-flip="Wahr"] > *:first-child { order: 2; }
 
[data-ka-split][data-ka-flip="true"] > *:last-child,
[data-ka-split][data-ka-flip="Wahr"] > *:last-child  { order: 1; }

/* ── Grid: Multi-Column ──────────────────────────────── */
[data-ka-grid] {
    display: grid;
    gap: var(--at-space--m, 1.5rem);
}
[data-ka-grid="2"] {
    grid-template-columns: repeat(2, 1fr);
}
[data-ka-grid="3"] {
    grid-template-columns: repeat(3, 1fr);
}
[data-ka-grid="4"] {
    grid-template-columns: repeat(4, 1fr);
}
[data-ka-grid="auto-sm"] {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
[data-ka-grid="auto-md"] {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
[data-ka-grid="auto-lg"] {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}
/* ── Container ──────────────────────────── */

[data-ka-container] {
    max-inline-size: var(--at-content-width, 1300px);
    margin-inline: auto;
    padding-inline: var(--at-space--m, 1.5rem);
}
[data-ka-container="sm"]   { max-inline-size: 768px; }
[data-ka-container="md"]   { max-inline-size: 960px; }
[data-ka-container="lg"]   { max-inline-size: 1300px; }
[data-ka-container="xl"]   { max-inline-size: 1440px; }
[data-ka-container="full"] { max-inline-size: 100%; }

/* ── Responsive Breakpoints ──────────────────────────── */

@media (max-width: 1023px) {
    [data-ka-grid="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
   /* [data-ka-split="60-40"],
    [data-ka-split="40-60"],
    [data-ka-split="70-30"] {
        grid-template-columns: 1fr;
    }*/
}

@media (max-width: 767px) {
    [data-ka-split] {
        display: flex;
        flex-direction: column;
    }
    [data-ka-split] [class*="media"] {
        order: -1 !important;
    }
    [data-ka-grid="2"],
    [data-ka-grid="3"]
        {
        grid-template-columns: 1fr;
    }
    [data-ka-split="60-40"],
    [data-ka-split="40-60"],
    [data-ka-split="70-30"] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   04. SURFACES & VARIANTS  (data-ka-surface / data-ka-variant)
   ========================================================================== */

/* ── Glassmorphismus ─────────────────────────────────── */
[data-ka-variant="glass"] {
    background-color: rgba(9, 16, 27, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(9, 16, 27, 0.15);
}

[data-ka-theme="light"] [data-ka-variant="glass"] {
    background-color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ── Raised ──────────────────────────────────────────── */
[data-ka-surface="raised"] {
    box-shadow: var(--ka-shadow-lg);
    translate: 0 -2px;
    transition:
        translate var(--ka-transition-smooth),
        box-shadow var(--ka-transition-smooth);
}

/* ── Hover-Lift ──────────────────────────────────────── */
[data-ka-surface="hover-lift"] {
    transition:
        translate var(--ka-transition-smooth),
        box-shadow var(--ka-transition-smooth);
}
[data-ka-surface="hover-lift"]:hover {
    translate: 0 -4px;
    box-shadow: var(--ka-shadow-xl);
}

/* ── Bordered ────────────────────────────────────────── */
[data-ka-surface="bordered"] {
    border: var(--ka-btn-border-width) solid
        var(--card-border, var(--at-primary-l-4));
}

/* ── Gradient Mesh (Dekorativ) ───────────────────────── */
[data-ka-variant="mesh"] {
    background-image:
        radial-gradient(
            at 20% 30%,
            var(--at-accent-l-4, hsla(220, 80%, 80%, 0.3)) 0px,
            transparent 50%
        ),
        radial-gradient(
            at 80% 70%,
            var(--at-primary-l-4, hsla(260, 60%, 85%, 0.2)) 0px,
            transparent 50%
        );
}

/* Nur Sektionen mit diesem Attribut erhalten das Pattern-Element */
[data-ka-variant="pattern"] {
    position: relative;
    /* Verhindert, dass das animierte Pattern über den Rand der Sektion hinausragt */
    overflow: hidden; 
    isolation: isolate;
}

[data-ka-variant="pattern"]::before {
    content: "";
    position: absolute;
    /* Das Pattern muss etwas größer sein als die Sektion, 
       damit beim Animieren keine leeren Ränder entstehen */
    inset: calc(var(--pattern-size, 250px) * -1); 
    
    background-image: var(--at-svg-pattern);
    background-repeat: repeat;
    background-size: var(--pattern-size, 250px);
    opacity: var(--pattern-opacity, 0.08);
    
    /* Logical Property: Startet oben links */
    background-position: inline-start block-start;
    
    /* Die Animation für das "Fließen" */
    animation: patternFloat 25s linear infinite;
    
    /* Wichtig: Hinter den Content, aber vor den Sektions-Hintergrund */
    z-index: -1; 
    pointer-events: none;
    will-change: transform;
}

@keyframes patternFloat {
    from {
        transform: translate(0, 0);
    }
    to {
        /* Animation passend zur Pattern-Größe für nahtlosen Übergang */
        transform: translate(var(--pattern-size, 250px), var(--pattern-size, 250px));
    }
}

/* ==========================================================================
   05. BUTTONS & FORMS  (data-ka-btn / data-ka-form)
   ========================================================================== */

/* ── Button Base ─────────────────────────────────────── */
[data-ka-btn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding-block: var(--ka-btn-padding-y);
    padding-inline: var(--ka-btn-padding-x);
    border-radius: var(--ka-btn-radius);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    border: var(--ka-btn-border-width) solid transparent;
    transition:
        background-color var(--ka-transition-base),
        color var(--ka-transition-base),
        border-color var(--ka-transition-base),
        translate var(--ka-transition-bounce),
        box-shadow var(--ka-transition-base);
}

[data-ka-btn]:active {
    scale: 0.97;
}

/* ── Primary ─────────────────────────────────────────── */
[data-ka-btn="primary"] {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border-color: var(--btn-bg);
}
[data-ka-btn="primary"]:hover {
    filter: brightness(1.1);
    box-shadow: var(--ka-shadow-md);
    translate: 0 -1px;
}

/* ── Ghost (kein Border) ─────────────────────────────── */
[data-ka-btn="ghost"] {
    background-color: transparent;
    color: var(--heading-color);
    border-color: transparent;
    padding-inline: 0.25em;
}
[data-ka-btn="ghost"]:hover {
    color: var(--span-color);
}

/* ── Accent ──────────────────────────────────────────── */
[data-ka-btn="accent"] {
    background-color: var(--at-accent);
    color: var(--at-white);
    border-color: var(--at-accent);
}
[data-ka-btn="accent"]:hover {
    filter: brightness(1.08);
    box-shadow: var(--ka-shadow-md);
    translate: 0 -1px;
}
/* ── Outline ──────────────────────────────────────────── */
[data-ka-btn="outline"] {
    background-color: transparent;
    color: var(--btn-bg);
    border-color: var(--btn-bg);
}
[data-ka-btn="outline"]:hover {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    translate: 0 -1px;
    box-shadow: var(--ka-shadow-md);
}

/* ── Sizes ───────────────────────────────────────────── */
[data-ka-btn][data-ka-size="sm"] {
    padding-block: 0.5em;
    padding-inline: 1em;
    font-size: 0.875em;
}
[data-ka-btn][data-ka-size="lg"] {
    padding-block: 0.875em;
    padding-inline: 2.25em;
    font-size: 1.0625em;
}
[data-ka-btn][data-ka-size="xl"] {
    padding-block: 1.1em;
    padding-inline: 3em;
    font-size: 1.125em;
}

/* ── Full Width ──────────────────────────────────────── */
[data-ka-btn][data-ka-full="true"] {
    inline-size: 100%;
}

/* ── Pill Shape ──────────────────────────────────────── */
[data-ka-btn][data-ka-shape="pill"] {
    border-radius: var(--at-radius-full);
}

/* ── Form Container ──────────────────────────────────── */
[data-ka-form] {
    display: flex;
    flex-direction: column;
    gap: var(--at-space--m, 1.25rem);
}

[data-ka-form="row"] {
    flex-direction: row;
    flex-wrap: wrap;
}

/* ── Form Felder ─────────────────────────────────────── */
[data-ka-form]
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-ka-form] select,
[data-ka-form] textarea {
    inline-size: 100%;
    padding-block: 0.75em;
    padding-inline: 1em;
    border-radius: var(--ka-card-radius);
    border: 1px solid var(--input-border, var(--at-primary-l-3));
    background-color: var(--input-bg, var(--at-white));
    color: var(--text-color);
    font-size: 1rem;
    outline: none;
    transition:
        border-color var(--ka-transition-base),
        box-shadow var(--ka-transition-base);
}

[data-ka-form] input:focus,
[data-ka-form] select:focus,
[data-ka-form] textarea:focus {
    border-color: var(--span-color, var(--at-accent));
    box-shadow: 0 0 0 3px rgba(var(--at-accent-rgb, 0, 0, 0), 0.12);
}

[data-ka-form] label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--heading-color);
    display: block;
    margin-block-end: 0.3em;
}

/* ==========================================================================
   06. NAVIGATION  (data-ka-nav)
   ========================================================================== */

/* ── Nav Wrapper ─────────────────────────────────────── */
[data-ka-nav] {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    block-size: var(--ka-nav-height);
    background-color: var(--nav-bg, var(--ka-nav-bg));
    transition:
        background-color var(--ka-transition-smooth),
        box-shadow var(--ka-transition-smooth),
        backdrop-filter var(--ka-transition-smooth);
}

/* ── Scrolled State ──────────────────────────────────── */
[data-ka-nav].is-scrolled {
    background-color: var(--ka-nav-bg-scrolled);
    backdrop-filter: blur(var(--ka-nav-blur));
    -webkit-backdrop-filter: blur(var(--ka-nav-blur));
    box-shadow: var(--ka-shadow-sm);
}

/* ── Transparent (startet ohne Hintergrund) ──────────── */
[data-ka-nav="transparent"] {
    background-color: transparent;
}
[data-ka-nav="transparent"].is-scrolled {
    background-color: var(--ka-nav-bg-scrolled);
    backdrop-filter: blur(var(--ka-nav-blur));
    -webkit-backdrop-filter: blur(var(--ka-nav-blur));
}

/* ── Transparent Dark (über dunklem Hero) ────────────── */
[data-ka-nav="transparent-dark"].is-scrolled {
    background-color: var(--ka-nav-bg-scrolled-dark);
    backdrop-filter: blur(var(--ka-nav-blur));
    -webkit-backdrop-filter: blur(var(--ka-nav-blur));
}

/* ── Nav Inner Layout ────────────────────────────────── */
[data-ka-nav-inner] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 100%;
    max-inline-size: var(--at-content-width, 1300px);
    margin-inline: auto;
    padding-inline: var(--at-space--l, 2rem);
}

/* ── Nav Links ───────────────────────────────────────── */
[data-ka-nav-links] {
    display: flex;
    align-items: center;
    gap: var(--at-space--m, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-ka-nav-links] a {
    font-weight: 500;
    text-decoration: none;
    color: var(--text-color, inherit);
    position: relative;
    transition: color var(--ka-transition-base);
}

/* Underline-Effekt */
[data-ka-nav-links] a::after {
    content: "";
    position: absolute;
    inset-block-end: -3px;
    inset-inline: 0;
    block-size: 2px;
    background-color: var(--span-color, var(--at-accent));
    scale: 1 1;
    transform-origin: right;
    transition: transform var(--ka-transition-smooth);
    /* Logical-Properties-konform via transform */
    transform: scaleX(0);
}

[data-ka-nav-links] a:hover,
[data-ka-nav-links] a.is-active {
    color: var(--span-color, var(--at-accent));
}

[data-ka-nav-links] a:hover::after,
[data-ka-nav-links] a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ── Nächstes Element bekommt Offset ─────────────────── */
[data-ka-nav] + * {
    margin-block-start: var(--ka-nav-height);
}

/* ==========================================================================
   07. CARDS & MEDIA  (data-ka-card / data-ka-media)
   ========================================================================== */

/* ── Card Base ───────────────────────────────────────── */
[data-ka-card] {
    padding: var(--at-space--s, 1.2rem);
    border-radius: var(--ka-card-radius);
    background-color: var(--card-bg);
    border: 1px solid var(--card-border, var(--at-primary-l-4));
    transition:
        translate var(--ka-transition-smooth),
        box-shadow var(--ka-transition-smooth);
}

[data-ka-card="true"] {
    padding: var(--at-space--m);
}
[data-ka-card="flat"] {
    box-shadow: none;
}
[data-ka-card="raised"] {
    box-shadow: var(--ka-shadow-md);
}

[data-ka-card="hover"] {
    cursor: pointer;
}
[data-ka-card="hover"]:hover {
    translate: 0 -4px;
    box-shadow: var(--ka-shadow-lg);
}

/* ── Icon Wrapper Hover (via Card-Kontext) ───────────── */
[data-ka-card] .icon-wrapper,
[data-ka-card] .contact__icon-wrapper{
    background-color: var(--icon-wrap-bg);
    transition: background-color var(--ka-transition-smooth);
}
[data-ka-card]:hover .icon-wrapper,
[data-ka-card]:hover .contact__icon-wrapper{
    background-color: var(--icon-wrap-bg-hover);
}
[data-ka-card]:hover .icon-wrapper [data-ka-icon],
[data-ka-card]:hover .icon-wrapper i,
[data-ka-card]:hover .icon-wrapper svg,
[data-ka-card]:hover .contact__icon-wrapper [data-ka-icon],
[data-ka-card]:hover .contact__icon-wrapper i,
[data-ka-card]:hover .contact__icon-wrapper svg{
    color: var(--icon-wrap-color-hover);
}

/* ── Media / Image Wrapper ───────────────────────────── */
[data-ka-media] {
    overflow: hidden;
    border-radius: var(--ka-image-radius);
    position: relative;
}

[data-ka-media] figure {
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
}

[data-ka-media] figure img,
[data-ka-media] img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--ka-transition-slow);
}

[data-ka-media="zoom"]:hover img {
    transform: scale(1.05);
}

/* ── Aspect Ratios ───────────────────────────────────── */
/*
   ACF Wert       Label               Ratio
   ──────────────────────────────────────────
   landscape    → Landschaft        → 4 / 3
   square       → Rechteckig        → 1 / 1
   portrait     → Portrait          → 3 / 4
   widescreen   → Weiter Bildschirm → 16 / 9
   cinema       → Kino              → 21 / 9
*/
[data-ka-ratio] {
    inline-size: 100%;
    block-size: auto;
}
[data-ka-ratio="square"] {
    aspect-ratio: 1 / 1;
}
[data-ka-ratio="landscape"] {
    aspect-ratio: 4 / 3;
}
[data-ka-ratio="portrait"] {
    aspect-ratio: 3 / 4;
}
[data-ka-ratio="widescreen"] {
    aspect-ratio: 16 / 9;
}
[data-ka-ratio="cinema"] {
    aspect-ratio: 21 / 9;
}

/* ── Image Position / Fokuspunkt  (ACF: image_position) ─
   Steuert object-position und verhindert ungewollten
   Zuschnitt bei object-fit: cover.
   ACF Wert    Label
   ──────────────────────────────
   left      → Bild Links
   right     → Bild Rechts
   Bricks: data-ka-image-position="{acf_image_position}"
   ──────────────────────────────────────────────────────── */
[data-ka-media][data-ka-image-position="center"] figure img,
[data-ka-media][data-ka-image-position="center"] img {
    object-position: center center;
}

[data-ka-media][data-ka-image-position="left"] figure img,
[data-ka-media][data-ka-image-position="left"] img {
    object-position: left center;
}

[data-ka-media][data-ka-image-position="right"] figure img,
[data-ka-media][data-ka-image-position="right"] img {
    object-position: right center;
}

[data-ka-media][data-ka-image-position="top"] figure img,
[data-ka-media][data-ka-image-position="top"] img {
    object-position: center top;
}

[data-ka-media][data-ka-image-position="bottom"] figure img,
[data-ka-media][data-ka-image-position="bottom"] img {
    object-position: center bottom;
}

/* ── Icon ────────────────────────────────────────────── */
/* -- Icon Align (data-ka-icon-align) --------------------
   Steuert die Ausrichtung von Icon + Text innerhalb
   eines Wrappers (z.B. feature-stack-card__wrapper)
   top    -> Icon ueber Text   (column)
   left   -> Icon links        (row)
   right  -> Icon rechts       (row-reverse)
   center -> Icon zentriert    (column + center)
------------------------------------------------------- */
[data-ka-icon-align] {
    display: flex;
    gap: var(--at-space--s, 0.75rem);
}
[data-ka-icon-align="top"] {
    flex-direction: column;
    align-items: flex-start;
}
[data-ka-icon-align="left"] {
    flex-direction: row;
    align-items: flex-start;
}
[data-ka-icon-align="right"] {
    flex-direction: row-reverse;
    align-items: flex-start;
}
[data-ka-icon-align="center"] {
    flex-direction: column;
    align-items: center;
}

[data-ka-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    color: var(--icon-color);
    flex-shrink: 0;
    background-color: var(--icon-wrap-bg);
    border-radius: 50%;
    inline-size: var(--ka-icon-size);
    block-size: var(--ka-icon-size);
    transition:
        background-color var(--ka-transition-smooth),
        color var(--ka-transition-smooth);
}

[data-ka-icon-size="sm"] {
    inline-size: 2.25rem;
    block-size: 2.25rem;
}
[data-ka-icon-size="md"] {
    inline-size: 3rem;
    block-size: 3rem;
}
[data-ka-icon-size="lg"] {
    inline-size: 3.75rem;
    block-size: 3.75rem;
}
[data-ka-icon-size="xl"] {
    inline-size: 5rem;
    block-size: 5rem;
}



/* ==========================================================================
   08. SPACING CONTROL  (data-ka-spacing)
   ========================================================================== */

[data-ka-spacing="compact"] {
    padding-block: var(--ka-section-spacing-compact);
}
[data-ka-spacing="wide"] {
    padding-block: var(--ka-section-spacing-wide);
}
[data-ka-spacing="none"] {
    padding-block: 0;
}
[data-ka-spacing="top"] {
    padding-block-start: var(--ka-section-spacing);
    padding-block-end: 0;
}
[data-ka-spacing="bottom"] {
    padding-block-start: 0;
    padding-block-end: var(--ka-section-spacing);
}

/* ==========================================================================
   09. OVERLAY SYSTEM  (data-ka-overlay)
   ========================================================================== */

[data-ka-overlay] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/*
   Stacking-Context: Das Theme-Element braucht isolation: isolate
   damit Overlays korrekt hinter dem Inhalt liegen.
   In Bricks: Section → Style → isolation: isolate
*/
[data-ka-overlay="light"] {
    background: var(--at-white-t-5);
}
[data-ka-overlay="light-soft"] {
    background: var(--at-white-t-6);
}
[data-ka-overlay="dark"] {
    background: var(--at-black-t-4);
}
[data-ka-overlay="dark-soft"] {
    background: var(--at-black-t-6);
}
[data-ka-overlay="gradient-light"] {
    background: linear-gradient(
        to bottom,
        var(--at-white-t-6) 0%,
        var(--at-white-t-1) 100%
    );
}
[data-ka-overlay="gradient-dark"] {
    background: linear-gradient(
        to bottom,
        var(--at-black-t-6) 0%,
        var(--at-black-t-1) 100%
    );
}

/* ==========================================================================
   10. ANIMATION & MOTION  (data-ka-animate / data-ka-reveal)
   ========================================================================== */

/*
   JS-Snippet (Fluent Snippets / wp_footer):
   ─────────────────────────────────────────────────────────────────────────
   document.addEventListener('DOMContentLoaded', () => {

     // Nav Scrolled-State
     const nav = document.querySelector('[data-ka-nav]');
     if (nav) {
       const onScroll = () => {
         nav.classList.toggle('is-scrolled', window.scrollY > 50);
       };
       window.addEventListener('scroll', onScroll, { passive: true });
       onScroll();
     }

     // Reveal & Stagger
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           entry.target.classList.add('is-visible');
           observer.unobserve(entry.target);
         }
       });
     }, { threshold: 0.1 });

     document.querySelectorAll('[data-ka-reveal]:not([data-ka-reveal="none"]), [data-ka-stagger]')
       .forEach(el => observer.observe(el));
   });
   ─────────────────────────────────────────────────────────────────────────
*/

/* ── Reveal: Basis ───────────────────────────────────── */
[data-ka-reveal]:not([data-ka-reveal="none"]) {
    opacity: 0;
    transition:
        opacity var(--ka-reveal-duration) var(--ka-reveal-easing),
        transform var(--ka-reveal-duration) var(--ka-reveal-easing),
        filter var(--ka-reveal-duration) var(--ka-reveal-easing);
}

[data-ka-reveal]:not([data-ka-reveal="none"]).is-visible {
    opacity: 1;
    transform: none !important;
    filter: none !important;
}

/* Reveal-Richtungen */
[data-ka-reveal="fade"] {
    opacity: 0;
}
[data-ka-reveal="up"] {
    transform: translateY(50px);
}
[data-ka-reveal="down"] {
    transform: translateY(-50px);
}
[data-ka-reveal="left"] {
    transform: translateX(50px);
}
[data-ka-reveal="right"] {
    transform: translateX(-50px);
}
[data-ka-reveal="scale"] {
    transform: scale(0.88);
}
[data-ka-reveal="scale-up"] {
    transform: scale(0.80);
}
[data-ka-reveal="blur"] {
    filter: blur(8px);
    opacity: 0;
}

/* ── Stagger ─────────────────────────────────────────── */
[data-ka-stagger]:not([data-ka-stagger="0"]) > * {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity var(--ka-reveal-duration) var(--ka-reveal-easing),
        transform var(--ka-reveal-duration) var(--ka-reveal-easing);
}

[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > * {
    opacity: 1;
    transform: none;
}

[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > *:nth-child(1) {
    transition-delay: calc(var(--ka-stagger) * 0);
}
[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > *:nth-child(2) {
    transition-delay: calc(var(--ka-stagger) * 1);
}
[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > *:nth-child(3) {
    transition-delay: calc(var(--ka-stagger) * 2);
}
[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > *:nth-child(4) {
    transition-delay: calc(var(--ka-stagger) * 3);
}
[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > *:nth-child(5) {
    transition-delay: calc(var(--ka-stagger) * 4);
}
[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > *:nth-child(6) {
    transition-delay: calc(var(--ka-stagger) * 5);
}
[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > *:nth-child(7) {
    transition-delay: calc(var(--ka-stagger) * 6);
}
[data-ka-stagger]:not([data-ka-stagger="0"]).is-visible > *:nth-child(8) {
    transition-delay: calc(var(--ka-stagger) * 7);
}

/* ── Hover-Animationen ───────────────────────────────── */
[data-ka-animate="pulse"]:hover {
    animation: ka-pulse 0.4s ease;
}
[data-ka-animate="shake"]:hover {
    animation: ka-shake 0.4s ease;
}
[data-ka-animate="float"] {
    animation: ka-float 3s ease-in-out infinite;
}
[data-ka-animate="spin"] {
    animation: ka-spin 1.5s linear infinite;
}

@keyframes ka-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}
@keyframes ka-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(4px);
    }
}
@keyframes ka-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}
@keyframes ka-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Bewegungspräferenzen */
@media (prefers-reduced-motion: reduce) {
    [data-ka-reveal],
    [data-ka-stagger] > *,
    [data-ka-animate] {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ==========================================================================
   11. DARK MODE  (prefers-color-scheme + data-ka-mode)
   ========================================================================== */

/*
   Strategie:
   • data-ka-theme = primäre Wahrheit (bleibt fix)
   • data-ka-mode="auto" reagiert auf System-Einstellung
   • <html data-ka-mode="dark"> = manueller Toggle per JS
*/

@media (prefers-color-scheme: dark) {
    [data-ka-mode="auto"] {
        --background: var(--at-primary-l-1);
        --text-color: var(--at-primary-l-5);
        --heading-color: var(--at-white);
        --span-color: var(--at-accent);
        --link-color: var(--at-accent);
        --link-color-hover: var(--at-accent-d-1);
        --btn-bg: var(--at-accent);
        --btn-text: var(--at-accent-l-6);
        --card-bg: var(--at-primary);
        --card-border: rgba(255, 255, 255, 0.08);
        --icon-color: var(--at-accent);
        --input-bg: var(--at-primary-l-1);
        --input-border: rgba(255, 255, 255, 0.12);
    }
}

[data-ka-mode="dark"] [data-ka-theme="light"] {
    --background: var(--at-primary-l-1);
    --text-color: var(--at-primary-l-5);
    --heading-color: var(--at-white);
    --span-color: var(--at-accent);
    --link-color: var(--at-accent);
    --link-color-hover: var(--at-accent-d-1);
    --btn-bg: var(--at-accent);
    --btn-text: var(--at-accent-l-6);
    --card-bg: var(--at-primary);
    --card-border: rgba(255, 255, 255, 0.08);
    --input-bg: var(--at-primary-l-1);
    --input-border: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   12. UTILITY LAYER  (data-ka-align / data-ka-text / data-ka-gap / data-ka-flex)
   ========================================================================== */

/* ── Text Alignment ──────────────────────────────────── */
[data-ka-text="left"] {
    text-align: start;
}
[data-ka-text="center"] {
    text-align: center;
}
[data-ka-text="right"] {
    text-align: end;
}
[data-ka-text="balance"] {
    text-wrap: balance;
}

/* ── Flex Align ──────────────────────────────────────── */
[data-ka-align="center"] {
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-ka-align="left"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
[data-ka-align="right"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
[data-ka-align="between"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
[data-ka-align="start"] {
    display: flex;
    align-items: flex-start;
}
[data-ka-align="end"] {
    display: flex;
    align-items: flex-end;
}

/* ── Flex Stack ──────────────────────────────────────── */
[data-ka-flex="column"] {
    display: flex;
    flex-direction: column;
}
[data-ka-flex="row"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
[data-ka-flex="row-nowrap"] {
    display: flex;
    flex-direction: row;
}

/* ── Gap ─────────────────────────────────────────────── */
[data-ka-gap="xs"] {
    gap: var(--at-space--xs, 0.5rem);
}
[data-ka-gap="sm"] {
    gap: var(--at-space--s, 0.75rem);
}
[data-ka-gap="md"] {
    gap: var(--at-space--m, 1.25rem);
}
[data-ka-gap="lg"] {
    gap: var(--at-space--l, 2rem);
}
[data-ka-gap="xl"] {
    gap: var(--at-space--xl, 3rem);
}
[data-ka-gap="2xl"] {
    gap: var(--at-space--2xl, 4rem);
}

/* ── Visibility ──────────────────────────────────────── */
@media (max-width: 767px) {
    [data-ka-hide="mobile"] {
        display: none !important;
    }
}
@media (min-width: 768px) {
    [data-ka-hide="desktop"] {
        display: none !important;
    }
}

/* ── Container ───────────────────────────────────────── */
[data-ka-container] {
    max-inline-size: var(--at-site-box-max-width, 1300px);
    margin-inline: auto;
    padding-inline: var(--at-space--l, 2rem);
}
[data-ka-container="sm"] {
    max-inline-size: 768px;
    margin-inline: auto;
}
[data-ka-container="md"] {
    max-inline-size: 960px;
    margin-inline: auto;
}
[data-ka-container="lg"] {
    max-inline-size: 1300px;
    margin-inline: auto;
}
[data-ka-container="xl"] {
    max-inline-size: 1440px;
    margin-inline: auto;
}
[data-ka-container="full"] {
    max-inline-size: 100%;
}

/* ── Divider ─────────────────────────────────────────── */
[data-ka-divider] {
    border: none;
    border-block-start: 1px solid var(--card-border, var(--at-primary-l-4));
    margin-block: var(--at-space--l, 2rem);
}