/* ============================================
   Deko Elements – Watercolor decorative CSS
   ============================================
   Replaces SVG placeholders E1–E7 with pure CSS.
   Requires: tokens.css (colors, blob radii, blur values)
   ============================================ */

/* ============================================
   2a – Aquarell-Kleckse (.klecks)
   Organic watercolor blobs using layered
   pseudo-elements with blob border-radii.
   ============================================ */

.klecks {
    position: relative;
    width: 300px;
    height: 300px;
    filter: blur(var(--blur-klecks));
    opacity: 0.35;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.klecks,
.klecks::before,
.klecks::after {
    display: block;
}

.klecks::before,
.klecks::after {
    content: "";
    position: absolute;
    inset: 5%;
}

/* Layer shapes */
.klecks {
    border-radius: var(--radius-blob-1);
}

.klecks::before {
    border-radius: var(--radius-blob-2);
}

.klecks::after {
    border-radius: var(--radius-blob-3);
    inset: 10%;
}

/* Color variants */
.klecks--gelb {
    background: var(--color-sun-yellow);
}
.klecks--gelb::before {
    background: var(--color-sun-yellow);
    opacity: 0.7;
}
.klecks--gelb::after {
    background: var(--color-sun-yellow);
    opacity: 0.5;
}

.klecks--gruen {
    background: var(--color-otto-green);
}
.klecks--gruen::before {
    background: var(--color-otto-green);
    opacity: 0.7;
}
.klecks--gruen::after {
    background: var(--color-otto-green);
    opacity: 0.5;
}

.klecks--blau {
    background: var(--color-map-blue);
}
.klecks--blau::before {
    background: var(--color-map-blue);
    opacity: 0.7;
}
.klecks--blau::after {
    background: var(--color-map-blue);
    opacity: 0.5;
}

/* Size variants */
.klecks--sm {
    width: 150px;
    height: 150px;
}

.klecks--lg {
    width: 450px;
    height: 450px;
}

/* Absolute positioning for background decoration */
.klecks--absolute {
    position: absolute;
    z-index: -1;
}


/* ============================================
   2b – Aquarell-Wash (.aquarell-wash)
   Full-width watercolor background wash using
   layered radial gradients.
   ============================================ */

.aquarell-wash {
    position: relative;
    overflow: hidden;
}

.aquarell-wash::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    filter: blur(var(--blur-wash));
    opacity: 0.6;
    background:
        radial-gradient(ellipse 40% 50% at 15% 30%, var(--color-otto-green-20), transparent),
        radial-gradient(ellipse 35% 45% at 75% 20%, var(--color-sun-yellow-20), transparent),
        radial-gradient(ellipse 30% 40% at 50% 70%, var(--color-map-blue-20), transparent),
        radial-gradient(ellipse 25% 35% at 85% 75%, var(--color-papa-rust-20), transparent);
}


/* ============================================
   2c – Washi-Tape extensions (.tape--)
   Additional modifiers for the base .tape class
   defined in base.css (lines 50–63).
   ============================================ */

/* Textured tape with fiber lines */
.tape--textured {
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.3) 3px,
            rgba(255, 255, 255, 0.3) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 6px,
            rgba(0, 0, 0, 0.03) 6px,
            rgba(0, 0, 0, 0.03) 7px
        );
    background-color: var(--color-tape);
}

/* Color variants */
.tape--gelb {
    background-color: var(--color-sun-yellow-40);
    border-left-color: var(--color-sun-yellow-30);
    border-right-color: var(--color-sun-yellow-30);
}

.tape--gruen {
    background-color: var(--color-otto-green-30);
    border-left-color: var(--color-otto-green-20);
    border-right-color: var(--color-otto-green-20);
}

.tape--blau {
    background-color: var(--color-map-blue-30);
    border-left-color: var(--color-map-blue-20);
    border-right-color: var(--color-map-blue-20);
}

/* Wide variant */
.tape--wide {
    width: 140px;
    height: 28px;
}

/* Torn edges via clip-path */
.tape--torn {
    clip-path: polygon(
        2% 0%, 8% 3%, 15% 0%, 22% 2%, 30% 0%,
        38% 3%, 45% 0%, 52% 2%, 60% 0%, 68% 3%,
        75% 0%, 82% 2%, 90% 0%, 95% 3%, 100% 0%,
        100% 100%, 97% 97%, 92% 100%, 85% 97%,
        78% 100%, 70% 97%, 62% 100%, 55% 97%,
        48% 100%, 40% 97%, 32% 100%, 25% 97%,
        18% 100%, 10% 97%, 5% 100%, 0% 97%
    );
}


/* ============================================
   2d – Papier-Textur (.papier-textur)
   Subtle paper texture overlay with tiny dots
   and fiber lines via pseudo-element.
   Note: child elements need position: relative;
   z-index: 2 to appear above the texture.
   ============================================ */

.papier-textur {
    position: relative;
}

.papier-textur::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.4;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
    background-image:
        /* Small dots (paper fibers) */
        radial-gradient(circle 1px at 20% 30%, var(--color-ink-10), transparent 2px),
        radial-gradient(circle 1px at 60% 70%, var(--color-ink-10), transparent 2px),
        radial-gradient(circle 1px at 40% 50%, var(--color-ink-10), transparent 2px),
        radial-gradient(circle 1px at 80% 20%, var(--color-ink-10), transparent 2px),
        radial-gradient(circle 1px at 10% 80%, var(--color-ink-10), transparent 2px),
        /* Subtle horizontal fiber lines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 11px,
            var(--color-ink-10) 11px,
            var(--color-ink-10) 12px
        );
    background-size:
        100px 100px,
        80px 80px,
        120px 120px,
        90px 90px,
        110px 110px,
        100% 100%;
}


/* ============================================
   2e – Seitenecke (.seitenecke)
   Dog-ear page corner effect using CSS triangle
   and shadow via pseudo-elements.
   ============================================ */

.seitenecke {
    position: relative;
    overflow: hidden;
}

/* Folded triangle */
.seitenecke::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 60px 60px 0;
    border-color: transparent var(--color-paper) transparent transparent;
    z-index: 3;
}

/* Shadow underneath the fold */
.seitenecke::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(
        225deg,
        transparent 50%,
        var(--color-ink-20) 50%,
        var(--color-ink-10) 100%
    );
    z-index: 2;
}

/* Position variants */
.seitenecke--links::before {
    right: auto;
    left: 0;
    border-width: 60px 60px 0 0;
    border-color: var(--color-paper) transparent transparent transparent;
}

.seitenecke--links::after {
    right: auto;
    left: 0;
    background: linear-gradient(
        315deg,
        transparent 50%,
        var(--color-ink-20) 50%,
        var(--color-ink-10) 100%
    );
}

.seitenecke--unten::before {
    top: auto;
    bottom: 0;
    border-width: 0 0 60px 60px;
    border-color: transparent transparent var(--color-paper) transparent;
}

.seitenecke--unten::after {
    top: auto;
    bottom: 0;
    background: linear-gradient(
        135deg,
        transparent 50%,
        var(--color-ink-20) 50%,
        var(--color-ink-10) 100%
    );
}

/* Size: small */
.seitenecke--sm::before {
    border-width: 0 35px 35px 0;
}
.seitenecke--sm::after {
    width: 35px;
    height: 35px;
}
.seitenecke--sm.seitenecke--links::before {
    border-width: 35px 35px 0 0;
}
.seitenecke--sm.seitenecke--unten::before {
    border-width: 0 0 35px 35px;
}

/* Size: large */
.seitenecke--lg::before {
    border-width: 0 80px 80px 0;
}
.seitenecke--lg::after {
    width: 80px;
    height: 80px;
}
.seitenecke--lg.seitenecke--links::before {
    border-width: 80px 80px 0 0;
}
.seitenecke--lg.seitenecke--unten::before {
    border-width: 0 0 80px 80px;
}

/* Standalone element variant for containers
   that already use their pseudo-elements.
   Parent container needs overflow: hidden. */
.seitenecke-elem {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 3;
}

/* Shadow layer (behind the fold) */
.seitenecke-elem::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(
        225deg,
        transparent 50%,
        var(--color-ink-20) 50%,
        var(--color-ink-10) 100%
    );
}

/* Folded triangle (on top) */
.seitenecke-elem::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 60px 60px 0;
    border-color: transparent var(--color-paper) transparent transparent;
}