/* ============================================
   Background Images & Patterns
   ============================================ */

/* Section Backgrounds mit Overlays */
.enigmania-section {
    position: relative;
}

.enigmania-section--with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-image: var(--enigmania-bg-overlay-top);
    background-repeat: repeat-x;
    background-position: top;
    z-index: 1;
    pointer-events: none;
}

.enigmania-section--with-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-image: var(--enigmania-bg-overlay-bottom);
    background-repeat: repeat-x;
    background-position: bottom;
    z-index: 1;
    pointer-events: none;
}

/* Bottom Background Varianten */
.enigmania-section--bg-blue::after {
    background-image: var(--enigmania-bg-bottom-blue);
}

.enigmania-section--bg-orange::after {
    background-image: var(--enigmania-bg-bottom-orange);
}

.enigmania-section--bg-grey::after {
    background-image: var(--enigmania-bg-bottom-grey);
}

.enigmania-section--bg-yellow::after {
    background-image: var(--enigmania-bg-bottom-yellow);
}

.enigmania-section--bg-white::after {
    background-image: var(--enigmania-bg-bottom-white);
}

/* Gutter Pattern */
.enigmania-gutter {
    position: relative;
}

.enigmania-gutter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-image: var(--enigmania-bg-gutter);
    background-repeat: repeat-x;
    background-position: top;
    z-index: 1;
    pointer-events: none;
}

/* Blue Repeatable Background */
.enigmania-bg-blue {
    background-image: var(--enigmania-bg-blue-repeatable);
    background-repeat: repeat;
}

/* Divider zwischen Sections */
.enigmania-divider {
    width: 100%;
    height: 50px;
    background-image: var(--enigmania-divider);
    background-repeat: repeat-x;
    background-position: center;
    margin: var(--enigmania-spacing-md) 0;
}

.enigmania-divider--yellow {
    background-image: var(--enigmania-divider-yellow);
}

.enigmania-divider--white {
    background-image: var(--enigmania-divider-white);
}

/* Section mit Overlay */
.enigmania-section-overlay {
    position: relative;
}

.enigmania-section-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-image: var(--enigmania-bg-overlay-top);
    background-repeat: repeat-x;
    background-position: top;
    z-index: 1;
    pointer-events: none;
}

.enigmania-section-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-image: var(--enigmania-bg-overlay-bottom);
    background-repeat: repeat-x;
    background-position: bottom;
    z-index: 1;
    pointer-events: none;
}