/* =============================================================================
   Kajinga Styles — v0.35.0
   Einheitliches Decoration-System für Container/Section: 10 Patterns + 6 Layers.

   Architektur:
   - Decoration läuft komplett über `::before`-Pseudo-Element (über Content,
     unter Widgets via z-index 0).
   - Patterns via `mask-image` (SVG-Mask) + `background-color: var(--ke-deco-color)`
     → Color/Opacity vollständig editor-live, ohne PHP-SVG-Regenerate.
   - Layers via radial-/linear-gradient direkt mit CSS-Variablen.
   - Watermark via `content: var(--ke-deco-text)` + `color: var(--ke-deco-color)`.

   CSS-Variablen (alle via Elementor `selectors` aus Controls):
   --ke-deco-color           Farbe (Hex/RGB)
   --ke-deco-opacity         Deckkraft (0..1)
   --ke-deco-size            Größe (Patterns: Tile, Layers: Durchmesser/Länge)
   --ke-deco-x / --ke-deco-y Position für positional Layers (%)
   --ke-deco-text            Watermark-Text (CSS-String mit Quotes)
   --ke-deco-watermark-size  Watermark-Schriftgröße
   ============================================================================= */

/* ====== Basis-Setup für ALLE Decoration-Typen ======
   `content` als CSS-Variable mit Default '' — für Watermark setzt der
   Helper `--ke-deco-text: "..."` via `selectors`, sodass Text live im
   Editor erscheint. Andere Styles haben den Default-leerstring → der
   sichtbare Decoration-Look kommt allein aus background/mask. */
[class*="ke-deco-type-"]:not(.ke-deco-type-)::before {
    content: var(--ke-deco-text, '');
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--ke-deco-opacity, 0.15);
    z-index: 0;
}

/* Container muss position:relative haben damit ::before-inset:0 greift.
   Container/Section haben in Elementor selbst i.d.R. schon `position: relative`,
   aber sicherheitshalber für unsere Decoration-Klassen explizit setzen. */
[class*="ke-deco-type-"]:not(.ke-deco-type-) {
    position: relative;
}

/* Content/Widgets über die Decoration legen */
[class*="ke-deco-type-"]:not(.ke-deco-type-) > * {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   PATTERNS — mask-image-Architektur (Color via background-color editor-live)
   SVG-Mask: schwarze Form auf transparentem Grund. Browser zeigt nur dort
   `background-color`, wo die Maske schwarz ist.
   ============================================================================ */

/* Pattern-Tile-Defaults */
.ke-deco-type-dots-small::before,
.ke-deco-type-dots-big::before,
.ke-deco-type-lines-horizontal::before,
.ke-deco-type-lines-vertical::before,
.ke-deco-type-lines-diagonal::before,
.ke-deco-type-grid::before,
.ke-deco-type-cross::before,
.ke-deco-type-triangles::before,
.ke-deco-type-wavy::before,
.ke-deco-type-chevrons::before {
    background-color: var(--ke-deco-color, #6366f1);
    mask-size: var(--ke-deco-size, 24px) var(--ke-deco-size, 24px);
    -webkit-mask-size: var(--ke-deco-size, 24px) var(--ke-deco-size, 24px);
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
}

/* Punkte klein */
.ke-deco-type-dots-small::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="1.5" fill="black"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="1.5" fill="black"/></svg>');
}

/* Punkte groß */
.ke-deco-type-dots-big::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="black"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="black"/></svg>');
}

/* Linien horizontal */
.ke-deco-type-lines-horizontal::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="0" y1="12" x2="24" y2="12" stroke="black" stroke-width="1"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="0" y1="12" x2="24" y2="12" stroke="black" stroke-width="1"/></svg>');
}

/* Linien vertikal */
.ke-deco-type-lines-vertical::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="12" y1="0" x2="12" y2="24" stroke="black" stroke-width="1"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="12" y1="0" x2="12" y2="24" stroke="black" stroke-width="1"/></svg>');
}

/* Linien diagonal */
.ke-deco-type-lines-diagonal::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="0" y1="24" x2="24" y2="0" stroke="black" stroke-width="1"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="0" y1="24" x2="24" y2="0" stroke="black" stroke-width="1"/></svg>');
}

/* Gitter */
.ke-deco-type-grid::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="0" y1="12" x2="24" y2="12" stroke="black" stroke-width="1"/><line x1="12" y1="0" x2="12" y2="24" stroke="black" stroke-width="1"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="0" y1="12" x2="24" y2="12" stroke="black" stroke-width="1"/><line x1="12" y1="0" x2="12" y2="24" stroke="black" stroke-width="1"/></svg>');
}

/* Pluszeichen */
.ke-deco-type-cross::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><line x1="16" y1="12" x2="16" y2="20" stroke="black" stroke-width="2"/><line x1="12" y1="16" x2="20" y2="16" stroke="black" stroke-width="2"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><line x1="16" y1="12" x2="16" y2="20" stroke="black" stroke-width="2"/><line x1="12" y1="16" x2="20" y2="16" stroke="black" stroke-width="2"/></svg>');
}

/* Dreiecke */
.ke-deco-type-triangles::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><polygon points="20,0 40,20 0,20" fill="black"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><polygon points="20,0 40,20 0,20" fill="black"/></svg>');
}

/* Wellen */
.ke-deco-type-wavy::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><path d="M0,10 Q10,0 20,10 T40,10" stroke="black" stroke-width="1.5" fill="none"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><path d="M0,10 Q10,0 20,10 T40,10" stroke="black" stroke-width="1.5" fill="none"/></svg>');
}

/* Chevrons */
.ke-deco-type-chevrons::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><polyline points="0,15 20,5 40,15" stroke="black" stroke-width="2" fill="none"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><polyline points="0,15 20,5 40,15" stroke="black" stroke-width="2" fill="none"/></svg>');
}

/* ====== Pattern-Positionen ====== */
.ke-deco-pos-full::before {
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.ke-deco-pos-top::before {
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    mask-position: top center;
    -webkit-mask-position: top center;
}

.ke-deco-pos-bottom::before {
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    mask-position: bottom center;
    -webkit-mask-position: bottom center;
}

.ke-deco-pos-left::before {
    mask-repeat: repeat-y;
    -webkit-mask-repeat: repeat-y;
    mask-position: left center;
    -webkit-mask-position: left center;
}

.ke-deco-pos-right::before {
    mask-repeat: repeat-y;
    -webkit-mask-repeat: repeat-y;
    mask-position: right center;
    -webkit-mask-position: right center;
}

.ke-deco-pos-corner-tl::before {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: top left;
    -webkit-mask-position: top left;
    mask-size: 30% 30%;
    -webkit-mask-size: 30% 30%;
}

.ke-deco-pos-corner-tr::before {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: top right;
    -webkit-mask-position: top right;
    mask-size: 30% 30%;
    -webkit-mask-size: 30% 30%;
}

.ke-deco-pos-corner-bl::before {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: bottom left;
    -webkit-mask-position: bottom left;
    mask-size: 30% 30%;
    -webkit-mask-size: 30% 30%;
}

.ke-deco-pos-corner-br::before {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: bottom right;
    -webkit-mask-position: bottom right;
    mask-size: 30% 30%;
    -webkit-mask-size: 30% 30%;
}

/* ============================================================================
   LAYERS — Blob/Light/Mesh/Aurora/Watermark/Brackets
   ============================================================================ */

/* Blob — SVG-mask, recolorable */
.ke-deco-type-blob::before {
    background-color: var(--ke-deco-color, #6366f1);
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="black" d="M140,60 C150,70 155,85 160,100 C165,115 170,130 165,145 C160,160 145,170 128,175 C110,180 90,178 70,175 C50,170 30,165 22,150 C14,135 18,115 28,95 C38,75 54,60 72,52 C90,44 110,48 125,52 C140,56 130,50 140,60 Z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="black" d="M140,60 C150,70 155,85 160,100 C165,115 170,130 165,145 C160,160 145,170 128,175 C110,180 90,178 70,175 C50,170 30,165 22,150 C14,135 18,115 28,95 C38,75 54,60 72,52 C90,44 110,48 125,52 C140,56 130,50 140,60 Z"/></svg>');
    mask-size: var(--ke-deco-size, 300px) auto;
    -webkit-mask-size: var(--ke-deco-size, 300px) auto;
    mask-position: var(--ke-deco-x, 50%) var(--ke-deco-y, 50%);
    -webkit-mask-position: var(--ke-deco-x, 50%) var(--ke-deco-y, 50%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Light-Spot — radial-gradient */
.ke-deco-type-light::before {
    background-image: radial-gradient(
        circle var(--ke-deco-size, 300px)
        at var(--ke-deco-x, 50%) var(--ke-deco-y, 50%),
        var(--ke-deco-color, #6366f1),
        transparent
    );
}

/* Mesh-Gradient — 3 überlappende radial-gradients in 3 abgeleiteten Farben */
.ke-deco-type-mesh::before {
    background-image:
        radial-gradient(circle 600px at var(--ke-deco-x, 30%) var(--ke-deco-y, 30%), var(--ke-deco-color, #6366f1), transparent 70%),
        radial-gradient(circle 500px at calc(100% - var(--ke-deco-x, 30%)) var(--ke-deco-y, 70%), color-mix(in srgb, var(--ke-deco-color, #6366f1) 70%, #ec4899), transparent 70%),
        radial-gradient(circle var(--ke-deco-size, 400px) at 50% calc(100% - var(--ke-deco-y, 30%)), color-mix(in srgb, var(--ke-deco-color, #6366f1) 50%, #06b6d4), transparent 70%);
}

/* Aurora — animierter linear-gradient mit reduced-motion-Gate */
.ke-deco-type-aurora::before {
    background-image: linear-gradient(
        115deg,
        transparent 20%,
        var(--ke-deco-color, #6366f1) 40%,
        color-mix(in srgb, var(--ke-deco-color, #6366f1) 60%, #8b5cf6) 55%,
        color-mix(in srgb, var(--ke-deco-color, #6366f1) 60%, #06b6d4) 70%,
        transparent 90%
    );
    background-size: 250% var(--ke-deco-size, 300px);
    background-position: var(--ke-deco-x, 0%) var(--ke-deco-y, 50%);
    background-repeat: no-repeat;
    animation: ke-deco-aurora-flow 16s ease-in-out infinite;
}

@keyframes ke-deco-aurora-flow {
    0%, 100% { background-position: 0% var(--ke-deco-y, 50%); }
    50%      { background-position: 100% var(--ke-deco-y, 50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ke-deco-type-aurora::before {
        animation: none;
    }
}

/* Watermark — content kommt aus Basis-Regel via --ke-deco-text */
.ke-deco-type-watermark::before {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ke-deco-color, #6366f1);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    font-size: var(--ke-deco-watermark-size, 20vw);
    line-height: 1;
    letter-spacing: -0.02em;
    overflow: hidden;
}

/* Brackets — 4 L-förmige Eck-Linien via 8 linear-gradient-Layer */
.ke-deco-type-brackets::before {
    background-image:
        linear-gradient(to right, var(--ke-deco-color, #6366f1) 100%, transparent 100%),
        linear-gradient(to bottom, var(--ke-deco-color, #6366f1) 100%, transparent 100%),
        linear-gradient(to left, var(--ke-deco-color, #6366f1) 100%, transparent 100%),
        linear-gradient(to bottom, var(--ke-deco-color, #6366f1) 100%, transparent 100%),
        linear-gradient(to right, var(--ke-deco-color, #6366f1) 100%, transparent 100%),
        linear-gradient(to top, var(--ke-deco-color, #6366f1) 100%, transparent 100%),
        linear-gradient(to left, var(--ke-deco-color, #6366f1) 100%, transparent 100%),
        linear-gradient(to top, var(--ke-deco-color, #6366f1) 100%, transparent 100%);
    background-size:
        var(--ke-deco-size, 60px) 3px,
        3px var(--ke-deco-size, 60px),
        var(--ke-deco-size, 60px) 3px,
        3px var(--ke-deco-size, 60px),
        var(--ke-deco-size, 60px) 3px,
        3px var(--ke-deco-size, 60px),
        var(--ke-deco-size, 60px) 3px,
        3px var(--ke-deco-size, 60px);
    background-position:
        20px 20px, 20px 20px,
        calc(100% - 20px) 20px, calc(100% - 20px) 20px,
        20px calc(100% - 20px), 20px calc(100% - 20px),
        calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) calc(100% - 20px);
    background-repeat: no-repeat;
}