/* ============================================================
   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;
}

/* Alle Zonen: Einheitliches edles Schiefergrau (#333333) analog dem ersten Bereich */
.home-zone--1,
.home-zone--2,
.home-zone--3 {
    background-color: #333333;
}



/* ── Sektionen innerhalb der Zonen: Hintergrund transparent und symmetrische Abstände ──
   Damit die Zone-Farbe durchscheint und der vertikale Clean-Luxury-Rhythmus gewahrt bleibt.
   Der Abstand oben soll exakt so hoch sein wie auf der Wirkung-Seite (ow-hero). ── */
.home-zone .store-value-section {
    background-color: transparent;
    padding: clamp(3.5rem, 7vw, 5rem) 0 0 0;
}

.home-zone .news-intro {
    margin-bottom: 0;
}

/* ── Radial-Overlay entfernt: Homogener Hintergrund ── */
.home-zone .store-value-section::before {
    display: none;
}

/* ── Textfarben für verfeinerte dunkle Zonen ──
   Alle Texte werden in edlem Ivory gehalten für makellose Lesbarkeit und sanften Kontrast */
.home-zone .legal-title {
    color: #ffffff;
}

.home-zone h1.legal-title {
    font-size: calc(var(--fs-display) * 1.29375);
}

@media (max-width: 47.99rem) {
    .home-zone h1.legal-title {
        font-size: calc(var(--fs-display) * 1.035);
    }
}

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

.home-zone .news-body-text {
    font-family: var(--font-accent) !important;
    font-size: clamp(1.22rem, 2.7vw, 1.35rem) !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    margin-bottom: clamp(1.725rem, 3.45vw, 2.875rem) !important;
    text-align: left !important;
    padding: 0 clamp(1rem, 4vw, 2rem) !important;
}

/* ── Buttons in dunklen Zonen: Golden gefüllt, Hover → Outline ── */
.home-zone .btn-primary.btn-sharp {
    background-color: var(--gold, #c4a169);
    color: #000000;
    border-color: var(--gold, #c4a169);
    border-radius: 0;
}

.home-zone .btn-primary.btn-sharp:hover {
    background-color: var(--gold-dark);
    color: var(--white);
    border-color: var(--gold-dark);
    box-shadow: 0 4px 15px rgba(196, 161, 105, 0.15);
    letter-spacing: 0.3em;
    padding-left: calc(clamp(1.5rem, 5vw, 2.5rem) + 0.3em);
}
/* ── Trennlinien ausgeblendet für einen nahtlosen, edlen Fluss ── */
.home-zone-divider {
    display: none;
}

/* ── Statisches Paracelsus-Zitat in Zone 1 ── */
.home-static-quote {
    padding: clamp(5rem, 9vw, 7rem) var(--container-padding);
    text-align: center;
    position: relative;
    z-index: 2;
}

.home-static-quote .quote-text {
    font-family: var(--font-editorial);
    font-style: normal;
    font-weight: 300;
    font-size: clamp(1.45rem, 3.3vw, 1.91rem);
    line-height: 1.6;
    color: #ffffff;
    opacity: 1;
    letter-spacing: 0.05em;
    text-transform: none;
    text-shadow: none;
}

.home-static-quote .quote-author {
    font-size: clamp(0.75rem, 1.5vw, 0.85rem);
    color: var(--gold, #c4a169);
    letter-spacing: 0.35em;
    margin-top: 0.8rem;
    font-weight: 100;
    text-transform: uppercase;
    display: block;
}

.home-static-quote .quote-line {
    width: clamp(12rem, 35vw, 25rem);
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--gold, #c4a169) 30%,
            var(--gold, #c4a169) 70%,
            transparent 100%);
    margin: 1.8rem auto 0;
    opacity: 1;
}

/* ─── Styles für den kopierten CTA-Button (ZUR ANWENDUNG) ─── */
.ritual-gold-cta {
    padding: clamp(3rem, 8vw, 5rem) 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #333333;
}

.ritual-gold-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 5%,
            rgba(196, 161, 105, 0.3) 25%,
            rgba(196, 161, 105, 0.5) 50%,
            rgba(196, 161, 105, 0.3) 75%,
            transparent 95%);
}

.ritual-gold-cta__btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.8rem;
    font-family: var(--font-accent);
    font-size: var(--fs-button);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--gold);
    color: var(--black);
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(196, 161, 105, 0.15);
    white-space: nowrap;
    transition:
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 47.99rem) {
    .ritual-gold-cta__btn {
        height: 3.5rem;
    }
}

.ritual-gold-cta__btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.15) 45%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.15) 55%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg) translate3d(0, 0, 0);
    animation: sovereign-liquid-sweep 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 1;
    pointer-events: none;
}

.ritual-gold-cta__btn:hover {
    background: var(--gold-dark);
    color: var(--white);
    letter-spacing: 0.3em;
    box-shadow: 0 4px 15px rgba(196, 161, 105, 0.15);
    transform: none;
}

.ritual-gold-cta__btn:active {
    transform: scale(0.98) translateZ(0);
}

@keyframes sovereign-liquid-sweep {
    0% {
        transform: translateX(-100%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    45% {
        opacity: 1;
    }
    60% {
        transform: translateX(150%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translateX(150%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }
}