/* ========================================================================
   1. VARIABLEN
   ======================================================================== */
:root {
    /* Farben */
    --color-white: #ffffff;
    --color-black: #333333;
    --color-gray: #f5f5f5;
    --color-border: #ddd;
    --color-shadow: rgba(133, 127, 127, 0.1);
    --color-shadow-hover: rgba(0, 0, 0, 0.3);
    --color-button-bg: rgba(255, 255, 255, 0.9);
    --color-button-bg-hover: rgba(255, 255, 255, 1);

    /* Größen */
    --border-radius: 8px;
    --button-size: 40px;
    --button-size-mobile: 30px;
    --gap-normal: 20px;
    --gap-mobile: 15px;
    --padding-standard: 1.5rem;
    --padding-standard-mobile: 1rem;

    /* Schatten */
    --box-shadow-normal: 0 4px 6px var(--color-shadow);
    --box-shadow-hover: 0 4px 8px var(--color-shadow-hover);
}

/* ========================================================================
   2. GEMEINSAME KOMPONENTEN FÜR ALLE TEMPLATES (Grundstruktur)
   ======================================================================== */

/* Content-Padding für Templates */
.utopia-themenblock-content {
    padding: 20px;
}

/* Gemeinsame Item-Stile für Grid und Slider */
.utopia-themenblock-grid-item,
.utopia-themenblock-slider-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-normal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#main_content .utopia-themenblock-grid-item figcaption,
#main_content .utopia-themenblock-slider-item figcaption {
    padding: 8px 20px 0 20px;
}

/* ========================================================================
   3. NAVIGATION FÜR GRID UND SLIDER
   ======================================================================== */

/* Gemeinsame Navigation-Stile */
.utopia-themenbloecke-slider-nav,
.utopia-themenbloecke-mobile-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 10;
}

.utopia-themenbloecke-slider-nav button,
.utopia-themenbloecke-mobile-nav button {
    background-color: var(--color-button-bg);
    border: none;
    width: var(--button-size);
    height: var(--button-size);
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: var(--box-shadow-normal);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.utopia-themenbloecke-slider-nav button:hover,
.utopia-themenbloecke-mobile-nav button:hover {
    background-color: var(--color-button-bg-hover);
    box-shadow: var(--box-shadow-hover);
}

.utopia-themenbloecke-slider-nav button.disabled,
.utopia-themenbloecke-mobile-nav button.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.utopia-themenbloecke-slider-nav .slider-prev,
.utopia-themenbloecke-mobile-nav .slider-prev {
    left: -20px;
}

.utopia-themenbloecke-slider-nav .slider-next,
.utopia-themenbloecke-mobile-nav .slider-next {
    right: -20px;
}

.utopia-themenbloecke-slider-nav button svg,
.utopia-themenbloecke-mobile-nav button svg {
    width: 24px;
    height: 24px;
    fill: var(--color-black);
}

/* ========================================================================
   4. GRID-SPEZIFISCHE STYLES
   ======================================================================== */

.utopia-themenbloecke-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-normal);
    margin: 1rem 0;
}

/* Mobile Navigation für Grid-Template */
.utopia-themenbloecke-mobile-nav {
    display: none;
}

/* ========================================================================
   5. SLIDER-SPEZIFISCHE STYLES
   ======================================================================== */

.utopia-themenbloecke-slider-wrapper {
    position: relative;
    padding: 0 10px;
    margin: 2rem 0;
}

.utopia-themenbloecke-slider-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--gap-normal);
    padding: 15px 0;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.utopia-themenbloecke-slider-container::-webkit-scrollbar {
    display: none;
}

.utopia-themenblock-slider-item {
    flex: 0 0 300px;
    min-width: 300px;
    max-width: 300px;
    scroll-snap-align: start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto;
}

/* Ausblenden der alten Controls, die nicht funktionieren */
.utopia-themenbloecke-slider-controls {
    display: none !important;
}

/* Responsive Anpassungen basierend auf der Anzahl der Elemente pro Zeile */
[data-items-per-row="1"] .utopia-themenblock-slider-item {
    flex: 0 0 calc(100% - var(--gap-normal));
    min-width: calc(100% - var(--gap-normal));
    max-width: calc(100% - var(--gap-normal));
}

[data-items-per-row="2"] .utopia-themenblock-slider-item {
    flex: 0 0 calc(50% - var(--gap-normal));
    min-width: calc(50% - var(--gap-normal));
    max-width: calc(50% - var(--gap-normal));
}

[data-items-per-row="3"] .utopia-themenblock-slider-item {
    flex: 0 0 calc(33.333% - var(--gap-normal));
    min-width: calc(33.333% - var(--gap-normal));
    max-width: calc(33.333% - var(--gap-normal));
}

[data-items-per-row="4"] .utopia-themenblock-slider-item {
    flex: 0 0 calc(25% - var(--gap-normal));
    min-width: calc(25% - var(--gap-normal));
    max-width: calc(25% - var(--gap-normal));
}

/* ========================================================================
   6. MOBILE ANPASSUNGEN
   ======================================================================== */

@media (max-width: 768px) {
    .utopia-themenbloecke-slider-wrapper{
        padding: 0;
    }

        /* Gemeinsame mobile Stile */
    .utopia-themenbloecke-slider-nav button,
    .utopia-themenbloecke-mobile-nav button {
        width: var(--button-size-mobile);
        height: var(--button-size-mobile);
    }

    .utopia-themenbloecke-slider-nav .slider-prev,
    .utopia-themenbloecke-mobile-nav .slider-prev {
        left: -20px;
    }

    .utopia-themenbloecke-slider-nav .slider-next,
    .utopia-themenbloecke-mobile-nav .slider-next {
        right: -20px;
    }

    /* Grid mobile Anpassungen */
    .utopia-themenblock-grid {
        position: relative;
    }

    .utopia-themenbloecke-grid-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--gap-mobile);
        padding: 15px 15px 5px;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .utopia-themenbloecke-grid-wrapper::-webkit-scrollbar {
        display: none;
    }

    .utopia-themenblock-grid-item {
        flex: 0 0 85%;
        min-width: 280px;
        scroll-snap-align: center;
        white-space: normal;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    .utopia-themenbloecke-mobile-nav {
        display: flex;
        justify-content: space-between;
    }

    /* Slider mobile Anpassungen */

    .utopia-themenblock-slider .utopia-themenblock-slider-item {
        flex: 0 0 85% !important;
        min-width: 85% !important;
        max-width: 85% !important;
    }
}