/* ============================================================
   31-home-zones.css
   Startseite: 3 Inhaltszonen mit progressiv dunkleren Grautönen
   und zentrierten goldenen Gradient-Trennlinien.
   Design-Variante: „Vertiefung nach unten"
   ============================================================ */

/* ── Zone-Wrapper: Hintergrundfarben ── */
.home-zone {
    position: relative;
}

/* Zone 1: Mittleres Dunkelgrau – Einstieg */
.home-zone--1 {
    background-color: #2c2c2c;
}

/* Zone 2: Dunkles Anthrazit */
.home-zone--2 {
    background-color: #1c1c1c;
}

/* Zone 3: Fast Schwarz – tiefste Zone */
.home-zone--3 {
    background-color: #111111;
}

/* ── Sektionen innerhalb der Zonen: Hintergrund transparent ──
   Damit die Zone-Farbe durchscheint */
.home-zone .store-value-section {
    background-color: transparent;
}

/* ── Radial-Overlay der Sektionen: Anpassung für dunkle Zonen ──
   Dezentes Gold-Glühen bleibt erhalten, aber subtiler */
.home-zone .store-value-section::before {
    background: radial-gradient(
        circle at center,
        rgba(196, 161, 105, 0.04) 0%,
        transparent 70%
    );
}

/* ── Textfarben für dunkle Zonen ──
   Alle Texte werden hell, da die Hintergründe dunkel sind */
.home-zone .legal-title {
    color: var(--ivory, #f5f0e8);
}

.home-zone .store-highlight-statement {
    color: var(--ivory, #f5f0e8);
    border-left-color: var(--gold, #c4a169);
}

.home-zone .news-body-text {
    color: rgba(245, 240, 232, 0.75);
}

/* ── Buttons in dunklen Zonen: Invertiert ── */
.home-zone .btn-primary.btn-sharp {
    background-color: transparent;
    color: var(--gold, #c4a169);
    border-color: var(--gold, #c4a169);
}

.home-zone .btn-primary.btn-sharp:hover {
    background-color: var(--gold, #c4a169);
    color: #111111;
}

/* ── Button-Sektion: Exakt symmetrisch zentriert zwischen Video und Zonenende ── */
.home-zone .store-value-section:last-child {
    padding: 0;
}

.home-zone .store-value-section:last-child .product-action {
    margin: 0;
    padding: clamp(2.5rem, 6vw, 4rem) 0;
    justify-content: center;
    display: flex;
    align-items: center;
}

/* ── Goldene Gradient-Trennlinie ──
   ~60% Breite, zentriert, mit Fade-In/Fade-Out an beiden Enden */
.home-zone-divider {
    position: relative;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 20%,
        rgba(196, 161, 105, 0.6) 40%,
        #c4a169 50%,
        rgba(196, 161, 105, 0.6) 60%,
        transparent 80%
    );
}

/* ── Interlude-Videos: Overlay-Farbe an Zone anpassen ── */
.home-zone--1 .interlude-video__overlay {
    background: linear-gradient(
        to bottom,
        rgba(44, 44, 44, 0.15) 0%,
        transparent 30%,
        transparent 70%,
        rgba(44, 44, 44, 0.15) 100%
    );
}

.home-zone--2 .interlude-video__overlay {
    background: linear-gradient(
        to bottom,
        rgba(28, 28, 28, 0.15) 0%,
        transparent 30%,
        transparent 70%,
        rgba(28, 28, 28, 0.15) 100%
    );
}

.home-zone--3 .interlude-video__overlay {
    background: linear-gradient(
        to bottom,
        rgba(17, 17, 17, 0.15) 0%,
        transparent 30%,
        transparent 70%,
        rgba(17, 17, 17, 0.15) 100%
    );
}

/* ── HiDPI: Schärfere Trennlinie ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .home-zone-divider {
        height: 0.5px;
    }
}