/* Gemeinsames DSV-Mietshop-Design */
:root {
    --dsv-blue: #1688e8;
    --dsv-blue-light: #36a5ff;
    --dsv-blue-dark: #075aa5;
    --dsv-bg: #03070c;
    --dsv-card: rgba(9, 20, 32, .78);
    --dsv-border: rgba(255, 255, 255, .10);
    --dsv-text: #fff;
    --dsv-muted: #9eacba;
}

html {
    min-height: 100%;
    background: #03070c !important;
}

/*
 * Gemeinsames Hintergrundbild für alle Shop-Seiten.
 * dsv-theme.css liegt im Shop-Hauptverzeichnis; daher ist der Pfad
 * assets/images/background.png relativ zu dieser Datei korrekt.
 */
body {
    min-height: 100vh;
    background:
        linear-gradient(
            180deg,
            rgba(3, 10, 20, .38) 0%,
            rgba(3, 10, 20, .66) 100%
        ),
        url("assets/images/background.png") center top / cover fixed no-repeat,
        radial-gradient(
            circle at 80% 0%,
            rgba(22, 136, 232, .12),
            transparent 35%
        ),
        #03070c !important;
    color: var(--dsv-text) !important;
}

header {
    background: rgba(3, 7, 12, .78) !important;
    border-bottom: 1px solid var(--dsv-border) !important;
    backdrop-filter: blur(18px);
}

.card,
.product,
.order,
.product-image-panel,
.product-details,
.summary,
.cart-item,
.info-box,
.availability-box {
    background: var(--dsv-card) !important;
    border: 1px solid var(--dsv-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

a {
    color: #78baff;
}

.button,
.submit,
.rent-button,
.nav-button,
button[type="submit"] {
    background: linear-gradient(135deg, #1688e8, #075aa5) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(22, 136, 232, .22);
    transition: .2s ease;
}

.button:hover,
.submit:hover,
.rent-button:hover,
.nav-button:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(22, 136, 232, .35);
}

input,
select,
textarea {
    background: rgba(2, 10, 18, .72) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 10px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #1688e8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(22, 136, 232, .15) !important;
}


/* Mobiles Hintergrundbild: kein background-attachment:fixed verwenden,
   da iOS Safari und diverse Android-Browser dies nicht zuverlässig rendern. */
@media screen and (max-width: 820px), screen and (hover: none) and (pointer: coarse) {
    html {
        background: #03070c !important;
    }

    body {
        position: relative;
        isolation: isolate;
        background: transparent !important;
        background-image: none !important;
        background-attachment: scroll !important;
    }

    body::before {
        content: "";
        display: block;
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(3, 10, 20, .42) 0%, rgba(3, 10, 20, .72) 100%),
            url("assets/images/background.png") center center / cover no-repeat,
            #03070c;
        background-attachment: scroll;
    }
}


/* ============================================================
   DSV HOMEPAGE – PERFORMANCE OPTIMIZATION
   Scoped to the homepage so product/checkout/admin pages stay unchanged.
   ============================================================ */
body.shop-home {
    /* The fixed pseudo-element below is the single homepage backdrop. */
    background: #03070c !important;
    isolation: isolate;
}

body.shop-home::before {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

body.shop-home::before {
    /* The pseudo-element itself is fixed; the image does not need
       background-attachment: fixed, which can trigger extra repaints. */
    background:
        linear-gradient(
            180deg,
            rgba(3, 10, 20, .50) 0%,
            rgba(3, 10, 20, .72) 100%
        ),
        url("assets/images/background.png") center / cover no-repeat,
        radial-gradient(
            circle at 10% 20%,
            rgba(22, 136, 232, .14),
            transparent 30%
        ) !important;
}

/* Avoid drawing the same large background image a second time in the hero. */
body.shop-home .hero {
    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 16, .70) 0%,
            rgba(2, 8, 16, .48) 48%,
            rgba(2, 8, 16, .28) 100%
        ) !important;
}

/* Repeated backdrop-filter layers are costly while scrolling a product grid.
   The card gradients remain, preserving the dark glass appearance. */
body.shop-home .site-header,
body.shop-home .hero-info,
body.shop-home .product,
body.shop-home .process-card,
body.shop-home .product-category,
body.shop-home .category,
body.shop-home .trust-bar,
body.shop-home footer,
body.shop-home .button-secondary {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.shop-home .site-header {
    background: rgba(3, 7, 12, .94) !important;
}

body.shop-home .hero-info,
body.shop-home .process-card {
    background:
        radial-gradient(circle at top right, rgba(78, 161, 255, .08), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, .86), rgba(8, 15, 30, .84)) !important;
}

body.shop-home .product {
    background:
        radial-gradient(circle at top right, rgba(78, 161, 255, .06), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(8, 15, 30, .82)) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25) !important;
    transition: transform .18s ease, border-color .18s ease !important;
}

body.shop-home .product:hover,
body.shop-home .hero-info:hover,
body.shop-home .process-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .30) !important;
}

body.shop-home .category {
    background: rgba(15, 23, 42, .82) !important;
}

body.shop-home .trust-bar {
    background: rgba(3, 10, 18, .88) !important;
}

body.shop-home footer {
    background: rgba(2, 7, 12, .94) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.shop-home .product,
    body.shop-home .hero-info,
    body.shop-home .process-card {
        transition: none !important;
    }
}