/* =========================================================
   NICHT ALLES IST ÖFFENTLICH
   ---------------------------------------------------------
   Gestaltung des privaten Mitgliederbereichs auf der
   Startseite.
========================================================= */


/* =========================================================
   1. BEREICH / SECTION
========================================================= */

.private-section{

    /* Abstand innerhalb des gesamten Abschnitts */
    padding:150px 0;

    /* Heller, warmer Hintergrund */
    background:#fcf1e8;

}


/* =========================================================
   2. HAUPT-LAYOUT
   ---------------------------------------------------------
   Linke Seite  → Text
   Rechte Seite → Bild
========================================================= */

.private-grid{

    /* Maximale Breite des Inhalts */
    width:min(1200px,90%);

    /* Zentriert den gesamten Bereich */
    margin:0 auto;

    /* Zwei Spalten erzeugen */
    display:grid;

    /* Text etwas schmaler als das Bild */
    grid-template-columns:
        1fr
        1.15fr;

    /* Abstand zwischen Text und Bild */
    gap:90px;

    /* Beide Bereiche vertikal ausrichten */
    align-items:center;

}


/* =========================================================
   3. TEXTBEREICH
========================================================= */

.private-content{

    /* Begrenzung der Textbreite */
    max-width:560px;

}


/* =========================================================
   4. KLEINE ÜBERSCHRIFT
   ---------------------------------------------------------
   "NICHT ALLES IST ÖFFENTLICH"
========================================================= */

.private-eyebrow{

    /* Als eigener Block darstellen */
    display:block;

    /* Abstand zur großen Überschrift */
    margin-bottom:20px;

    /* Kleine, elegante Schrift */
    font-size:4rem;

    /* Elegante Serifenschrift */
    font-family:"Great Vibes", serif;

    /* Größerer Buchstabenabstand */
    letter-spacing:5px;

    /* Rose-Gold / Beige */
    color:#c9ab8a;

}


/* =========================================================
   5. HAUPTÜBERSCHRIFT
   ---------------------------------------------------------
   "Nicht alles ist für jeden bestimmt."
========================================================= */

.private-content h2{

    /* Elegante Serifenschrift */
    font-family:"Cormorant Garamond", serif;

    /* Größe der Überschrift */
    font-size:2.8rem;

    /* Zeilenhöhe */
    line-height:1.05;

    /* Leichte Schrift */
    font-weight:300;

    /* Dunkle Textfarbe */
    color:#2d2d2d;

    /* Abstand nach unten */
    margin:0 0 30px;

}


/* =========================================================
   6. BESCHREIBUNGSTEXT
========================================================= */

.private-content p{

    /* Maximale Breite des Textes */
    max-width:520px;

    /* Abstand zur Liste */
    margin:0 0 35px;

    /* Helles Grau */
    color:#6a6a6a;

    /* Luftige Zeilenhöhe */
    line-height:1.9;

    /* Schriftgröße */
    font-size:1.5rem;

}


/* =========================================================
   7. LISTE DER EXKLUSIVEN INHALTE
========================================================= */

.private-list{

    /* Standard-Aufzählung entfernen */
    list-style:none;

    /* Standard-Abstände entfernen */
    padding:0;

    /* Abstand nach unten */
    margin:0 0 40px;

}


/* =========================================================
   8. EINZELNE LISTENPUNKTE
========================================================= */

.private-list li{

    /* Platz für das Stern-Symbol schaffen */
    position:relative;

    padding-left:28px;

    /* Abstand zwischen den Punkten */
    margin-bottom:14px;

    /* Textfarbe */
    color:#444;

    /* Schriftgröße */
    font-size:1rem;

}


/* =========================================================
   9. DEKORATIVER STERN VOR DER LISTE
========================================================= */

.private-list li::before{

    /* Rose-Gold Stern */
    content:"✦";

    /* Position des Sterns */
    position:absolute;

    left:0;
    top:0;

    /* Farbe */
    color:#c79b79;

    /* Größe */
    font-size:1.1rem;

}


/* =========================================================
   10. BUTTON
   ---------------------------------------------------------
   "Zur privaten Welt"
========================================================= */

.private-button{

    /* Button als Inline-Element */
    display:inline-block;

    /* Innenabstand */
    padding:16px 34px;

    /* Runde Form */
    border-radius:50px;

    /* Hintergrund */
    background:#bd895f;

    /* Weiße Schrift */
    color:#fff;

    /* Unterstreichung entfernen */
    text-decoration:none;

    /* Elegante Serifenschrift */
    font-family:"Great Vibes", serif;

    /* Schriftgröße */
    font-size:2rem;

    /* Leichter Buchstabenabstand */
    letter-spacing:.3px;

    /* Schatten */
    box-shadow:
        0 15px 35px rgba(184,132,96,.18);

    /* Sanfte Animation */
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}


/* =========================================================
   11. BUTTON HOVER
========================================================= */

.private-button:hover{

    /* Button hebt sich leicht an */
    transform:translateY(-4px);

    /* Etwas dunkler beim Hover */
    background:#b47d55;

    /* Stärkerer Schatten */
    box-shadow:
        0 22px 45px rgba(184,132,96,.25);

}


/* =========================================================
   12. BILDBEREICH
========================================================= */

.private-image{

    /* Grundlage für den dekorativen Hintergrund */
    position:relative;

}


/* =========================================================
   13. HAUPTBILD
========================================================= */

.private-image img{

    /* Verhindert unerwünschte Lücken */
    display:block;

    /* Bild nimmt die komplette Spaltenbreite ein */
    width:150%;

    /* Feste Höhe */
    height:900px;

    /* Bild füllt den Bereich aus */
    object-fit:cover;

    /* Abgerundete Ecken */
    border-radius:72px;

    /* Weicher Schatten */
    box-shadow:
        0 30px 65px rgba(0,0,0,.13);

    /* Sanfte Hover-Animation */
    transition:
        transform .5s ease,
        box-shadow .5s ease;

}


/* =========================================================
   14. BILD HOVER
========================================================= */

.private-image img:hover{

    /* Bild hebt sich leicht */
    transform:translateY(-6px);

    /* Schatten wird stärker */
    box-shadow:
        0 40px 80px rgba(0,0,0,.17);

}


/* =========================================================
   15. DEKORATIVER LICHTEFFEKT HINTER DEM BILD
========================================================= */

.private-image::before{

    /* Leeres Element für den Effekt */
    content:"";

    /* Größe des Lichtkreises */
    width:360px;
    height:360px;

    /* Warmer, transparenter Farbverlauf */
    background:
        radial-gradient(
            circle,
            rgba(223,185,150,.25),
            transparent 70%
        );

    /* Absolut hinter dem Bild positionieren */
    position:absolute;

    /* Vertikal zentrieren */
    top:50%;

    /* Horizontal zentrieren */
    left:50%;

    /* Mittelpunkt exakt ausrichten */
    transform:
        translate(-50%,-50%);

    /* Hinter dem Bild */
    z-index:0;

    /* Der Effekt darf keine Klicks blockieren */
    pointer-events:none;

}


/* =========================================================
   16. BILD ÜBER DEM LICHTEFFEKT
========================================================= */

.private-image img{

    /* Positionierung aktivieren */
    position:relative;

    /* Über dem dekorativen Licht */
    z-index:1;

}


/* =========================================================
   17. TABLET / MOBILE
   ---------------------------------------------------------
   Ab 900px wird aus den zwei Spalten eine Spalte.
========================================================= */

@media (max-width:900px){

    .private-grid{

        /* Nur noch eine Spalte */
        grid-template-columns:1fr;

        /* Abstand zwischen Text und Bild */
        gap:60px;

    }


    /* ---------------------------------------------
       Text auf kleinen Bildschirmen zentrieren
    --------------------------------------------- */

    .private-content{

        max-width:700px;

        text-align:center;

        margin:0 auto;

    }


    /* ---------------------------------------------
       Beschreibungstext zentrieren
    --------------------------------------------- */

    .private-content p{

        margin-left:auto;

        margin-right:auto;

    }


    /* ---------------------------------------------
       Liste linksbündig lassen
    --------------------------------------------- */

    .private-list{

        display:inline-block;

        text-align:left;

    }


    /* ---------------------------------------------
       Bild zentrieren
    --------------------------------------------- */

    .private-image{

        max-width:650px;

        width:100%;

        margin:0 auto;

    }

}


/* =========================================================
   18. KLEINE SMARTPHONE-DISPLAYS
   ---------------------------------------------------------
   Zusätzliche Anpassungen für Smartphones.
========================================================= */

@media (max-width:600px){

    /* Weniger Abstand oben und unten */
    .private-section{

        padding:100px 0;

    }


    /* Überschrift verkleinern */
    .private-content h2{

        font-size:2.8rem;

    }


    /* Bild an kleinere Displays anpassen */
    .private-image img{

        height:430px;

        border-radius:30px;

    }

}

/* =========================================================
   WARUM SECRET ALLURE?
   ---------------------------------------------------------
   Ruhiger Abschlussbereich mit den drei zentralen Werten.
   Dieser Bereich verwendet bewusst kein großes Bild.
========================================================= */


/* =========================================================
   19. WHY SECTION
========================================================= */

.why-section{

    /* Innenabstand oben und unten */
    padding:120px 0 130px;

    /* Sehr heller Hintergrund */
    background:#fffaf7;

}


/* =========================================================
   20. ÜBERSCHRIFTENBEREICH
========================================================= */

.why-title{

    /* Zentrierte Überschrift */
    text-align:center;

    /* Abstand zur Dreier-Aufteilung */
    margin-bottom:70px;

}


/* =========================================================
   21. KLEINE ÜBERSCHRIFT
   ---------------------------------------------------------
   "WARUM SECRET ALLURE?"
========================================================= */

.why-title span{

    /* Eigene Zeile */
    display:block;

    /* Kleine Schrift */
    font-size:4rem;

    /* Elegante Serifenschrift */
    font-family:"Great Vibes", serif;

    /* Eleganter Buchstabenabstand */
    letter-spacing:4px;

    /* Rose-Gold */
    color:#c9ab8a;

    /* Abstand zur Hauptüberschrift */
    margin-bottom:18px;

}


/* =========================================================
   22. HAUPTÜBERSCHRIFT
========================================================= */

.why-title h2{

    /* Elegante Serifenschrift */
    font-family:"Cormorant Garamond", serif;

    /* Größe */
    font-size:2.8rem;

    /* Leichte Schrift */
    font-weight:300;

    /* Zeilenhöhe */
    line-height:1.1;

    /* Dunkle Schrift */
    color:#2d2d2d;

    /* Keine Standardabstände */
    margin:0;

}


/* =========================================================
   23. DREI SPALTEN
========================================================= */

.why-grid{

    /* Drei gleich große Bereiche */
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    /* Abstand zwischen den Bereichen */
    gap:0;

}


/* =========================================================
   24. EINZELNER WHY-BEREICH
========================================================= */

.why-item{

    /* Innenabstand */
    padding:10px 55px;

    /* Zentrierter Inhalt */
    text-align:center;

    /* Positionierung für eventuelle Dekoration */
    position:relative;

}


/* =========================================================
   25. TRENNLINIEN
   ---------------------------------------------------------
   Nur zwischen den drei Bereichen.
========================================================= */

.why-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:30px;

    width:2px;

    height:150px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #d8bca5,
            transparent
        );

}


/* =========================================================
   26. ICON
========================================================= */

.why-icon{

    /* Größe des Symbols */
    width:150px;
    height:150px;

    /* Zentrieren */
    margin:0 auto 25px;

    /* Rose-Gold */
    color:#c58f69;

    /* Abstand zum Titel */
    margin-bottom:100px;

    /* Sanfte Darstellung */
    line-height:1;

}


/* =========================================================
   27. TITEL
========================================================= */

.why-item h3{

    /* Serifenschrift */
    font-family:"Great Vibes", serif;

    /* Größe */
    font-size:2.8rem;

    /* Leichte Schrift */
    font-weight:400;

    /* Farbe */
    color:#3a3430;

    /* Abstand zum Text */
    margin:0 0 15px;

}


/* =========================================================
   28. BESCHREIBUNG
========================================================= */

.why-item p{

    /* Maximale Textbreite */
    max-width:280px;

    /* Zentrieren */
    margin:0 auto;

    /* Lesbare Zeilenhöhe */
    line-height:1.8;

    /* Dezente Textfarbe */
    color:#6d6662;

    /* Schriftgröße */
    font-size:1.2rem;

}


/* =========================================================
   29. TABLET
========================================================= */

@media (max-width:900px){

    .why-section{

        padding:100px 0;

    }


    .why-title{

        margin-bottom:55px;

    }


    .why-title h2{

        font-size:2.8rem;

    }


    .why-item{

        padding:10px 25px;

    }

}


/* =========================================================
   30. SMARTPHONE
========================================================= */

@media (max-width:650px){

    .why-section{

        padding:80px 0;

    }


    .why-title h2{

        font-size:2.4rem;

    }


    .why-grid{

        grid-template-columns:1fr;

        gap:45px;

    }


    /* Trennlinien auf Mobilgeräten entfernen */

    .why-item:not(:last-child)::after{

        display:none;

    }


    .why-item{

        padding:0 25px;

    }


    .why-icon{

        font-size:2.6rem;

    }

}