/* =========================================
   Carousel Fix - Flaches, responsives Hero Carousel
   Einheitliches Seitenverhältnis auf allen Geräten
   + besser lesbarer Text (leichter Overlay)
   + Fix für Dots
   + Hytale/Produkt-Kacheln kleiner & dynamisch
   + Blauer Header-Balken (Products-Header) entschärft/weg
   ========================================= */

/* =========================
   CAROUSEL / HERO
   ========================= */

section#Carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#radeSlider {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 40px; /* Abstand zu Dots/Content */
}

/* Carousel Wrapper */
#radeSlider .carousel-inner {
    position: relative;
    width: 100%;
    height: auto;
}

/* Carousel Items mit flacherem Seitenverhältnis */
#radeSlider .carousel-item {
    position: relative;
    width: 100%;

    /* FLACHER = ~33% weniger Höhe (wie du wolltest) */
    aspect-ratio: 36 / 10;

    height: auto;
    min-height: 0;
    max-height: none;

    padding: 0;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
}

/* Inhalt volle Höhe für sauberes Vertikal-Alignment */
#Carousel .carousel-item .container,
#Carousel .carousel-item .row {
    height: 100%;
}

/* Rechte Produktbilder sauber skalieren */
#Carousel .carousel-image {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Carousel .carousel-image img {
    max-height: 75%;
    width: auto;
    object-fit: contain;
}

/* =========================
   OVERLAY FÜR TEXT-LESBARKEIT (leichter als vorher)
   ========================= */

#radeSlider .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;

    /* Etwas schwächer abgedunkelt */
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.45) 0%,     /* Links: Textzone */
        rgba(0, 0, 0, 0.32) 30%,
        rgba(0, 0, 0, 0.16) 55%,
        rgba(0, 0, 0, 0.04) 75%,
        rgba(0, 0, 0, 0.00) 100%
    );
    z-index: 1;
}

/* Inhalt über Overlay */
#radeSlider .carousel-item > * {
    position: relative;
    z-index: 2;
}

/* Text hervorheben */
#Carousel .carousel-content h1,
#Carousel .carousel-content p {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* Buttons besser sichtbar */
#Carousel .btn {
    box-shadow: 0 4px 12px rgba(0,0,0,0.30);
}

/* =========================
   FIX: Dots/Indicators nicht überlagern
   ========================= */

.radeSlider-indicators {
    position: relative;
    z-index: 5;
    margin-top: 30px;
}

/* falls der Slider irgendwo “drüber hängt” */
#radeSlider {
    isolation: isolate;
}

/* =========================
   RESPONSIVE FEINTUNING
   ========================= */

/* Tablet */
@media (max-width: 992px) {
    #radeSlider .carousel-item {
        aspect-ratio: 20 / 9;
    }

    #Carousel .carousel-image img {
        max-height: 65%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Mobile Overlay gleichmäßiger & etwas leichter */
    #radeSlider .carousel-item::before {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.24) 55%,
            rgba(0, 0, 0, 0.18) 100%
        );
    }
}

@media (max-width: 576px) {
    #radeSlider .carousel-item {
        aspect-ratio: 18 / 9;
    }

    #Carousel .carousel-image img {
        max-height: 55%;
    }
}

/* =========================
   PRODUKTSEITEN: HEADER-BALKEN (z.B. hytale.php) “weg”
   ========================= */

/* Der “blaue Sternenhimmel”-Header kommt bei dir über .products-header + Game-spezifische Klasse.
   Für hytale.php ist es: <div class="products-header hytale-h ..."> */
.products-header.hytale-h {
    /* Hintergrund wirklich entfernen */
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;

    /* weniger “Balken”-Höhe */
    padding: 2.5rem 0 !important;

    /* sauberer Abstand */
    margin-bottom: 2rem !important;
}

/* Wenn dein Pageheader.tpl evtl. noch eigenes Spacing setzt */
.products-header.hytale-h .page-header,
.products-header.hytale-h .pageheader,
.products-header.hytale-h .page-header-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* =========================
   PRODUKT-KACHELN (hytale.php): kleiner & dynamisch
   ========================= */

/* Deine Kacheln sind aktuell einfach Bootstrap-Cards im direkten .row nach dem Header.
   Wir zielen bewusst eng, damit nicht alles sitewide “kaputt” geht. */
.products-header.hytale-h + .row .card {
    margin-bottom: 1.25rem !important;
}

.products-header.hytale-h + .row .card .card-body {
    padding: clamp(0.9rem, 1.4vw, 1.25rem) !important;
}

/* Logo oben kleiner */
.products-header.hytale-h + .row .card .card-body img.img-fluid {
    max-width: clamp(130px, 14vw, 190px);
    height: auto;
}

/* RAM/GB Heading */
.products-header.hytale-h + .row .card .card-body h1 {
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    line-height: 1.05;
    margin-bottom: 0.35rem;
}

/* Preis */
.products-header.hytale-h + .row .card .card-body h2 {
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.15;
    margin-bottom: 0.6rem;
}

/* Liste kompakter */
.products-header.hytale-h + .row .card .card-body ul {
    padding: 0 !important;
    margin: 0.6rem 0 0.9rem 0 !important;
}

.products-header.hytale-h + .row .card .card-body ul li {
    font-size: clamp(0.85rem, 1.05vw, 1rem);
    line-height: 1.35;
    margin: 0.25rem 0;
}

/* Button kleiner */
.products-header.hytale-h + .row .card .card-body .btn {
    font-size: 0.9rem;
    padding: 0.55rem 0.9rem;
}

/* Auf sehr kleinen Geräten: etwas mehr Luft nach unten */
@media (max-width: 576px) {
    .products-header.hytale-h + .row .col-sm-6 {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}