/* =========================================================
   ABOUT PAGE
   Secret Allure
========================================================= */


/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {

    /* Positionierung */
    position: relative;

    /* Höhe des Hero-Bereichs */
    min-height: 1400px;

    /* Alles außerhalb des Hero-Bereichs abschneiden */
    overflow: hidden;

}


/* =========================================================
   HERO - HINTERGRUNDBILD
========================================================= */

.about-hero::before {

    /* Pseudo-Element aktivieren */
    content: "SA";

    /* Das Bild über den gesamten Hero legen */
    position: absolute;

    /* Abstand oben */
    top: 0;

    /* Abstand rechts */
    right: 0;

    /* Abstand unten */
    bottom: 0;

    /* Abstand links */
    left: 0;

    /* Hintergrundbild */
    background-image: url("../img/about/about-hero.png");

    /* Bild soll den gesamten Bereich ausfüllen */
    background-size: cover;

    /* Position des Bildes */
    background-position: center 0%;

    /* Keine Wiederholung */
    background-repeat: no-repeat;

    /* Hinter dem Inhalt */
    z-index: -2;

}


/* =========================================================
   HERO - WEISSER VERLAUF
========================================================= */

.about-hero::after {

    /* Pseudo-Element aktivieren */
    content: "";

    /* Verlauf über den gesamten Hero */
    position: absolute;

    /* Oben */
    top: 0;

    /* Rechts */
    right: 0;

    /* Unten */
    bottom: 0;

    /* Links */
    left: 0;

    /* Weißer Verlauf von links nach rechts */
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.95) 18%,
        rgba(255, 255, 255, 0.82) 34%,
        rgba(255, 255, 255, 0.45) 48%,
        rgba(255, 255, 255, 0.10) 58%,
        rgba(255, 255, 255, 0) 66%
    );

    /* Über dem Bild */
    z-index: 0;

}


/* =========================================================
   HERO - INNERER BEREICH
========================================================= */

.about-hero-overlay {

    /* Position */
    position: relative;

    /* Über dem Hintergrund */
    z-index: 5;

    /* Flexbox */
    display: flex;

    /* Vertikal zentrieren */
    align-items: center;

    /* Inhalt links beginnen lassen */
    justify-content: flex-start;

    /* Höhe */
    min-height: 1200px;

}


/* =========================================================
   HERO - CONTAINER
========================================================= */

.about-hero .container {

    /* Maximale Breite */
    width: min(1400px, 92%);

    /* Automatische Zentrierung */
    margin-left: auto;
    margin-right: auto;

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

    /* Flexbox */
    display: flex;

    /* Vertikal zentrieren */
    align-items: center;

}


/* =========================================================
   HERO - INHALT
========================================================= */

.about-hero-content {

    /* Breite des Textbereichs */
    width: 520px;

    /* Abstand links */
    margin-left: 0;

    /* Innenabstand links */
    padding-left: 60px;

    /* Text zentrieren */
    text-align: center;

    /* Vertikale Position */
    transform: translateY(-40px);

}


/* =========================================================
   HERO - KRONE
========================================================= */

.hero-crown {

    /* Größe der Krone */
    font-size: 58px;

    /* Farbe */
    color: #b88a50;

    /* Abstand unterhalb */
    margin-bottom: 20px;

}


/* =========================================================
   HERO - ÜBER
========================================================= */

.about-hero h1 {

    /* Außenabstand entfernen */
    margin: 0;

    /* Schriftart */
    font-family: "Lucida Handwriting", cursive;

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

    /* Schriftstärke */
    font-weight: 400;

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

    /* Buchstabenabstand */
    letter-spacing: 6px;

    /* Schriftfarbe */
    color: #242424;

}


/* =========================================================
   HERO - MICH
========================================================= */

.about-hero h1 span {

    /* Eigene Zeile */
    display: block;

    /* Abstand nach oben */
    margin-top: 8px;

    /* Schriftart */
    font-family: "Lucida Handwriting", cursive;

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

    /* Schriftstärke */
    font-weight: 400;

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

    /* Buchstabenabstand */
    letter-spacing: 1px;

    /* Goldene Farbe */
    color: #b88a50;

}


/* =========================================================
   HERO - DIVIDER
========================================================= */

.hero-divider {

    /* Flexbox */
    display: flex;

    /* Vertikal ausrichten */
    align-items: center;

    /* Horizontal zentrieren */
    justify-content: center;

    /* Breite */
    width: 100%;

    /* Abstand zwischen Linien und Herz */
    gap: 18px;

    /* Abstand oben */
    margin-top: 30px;

    /* Abstand unten */
    margin-bottom: 30px;

}


/* =========================================================
   HERO - DIVIDER LINIEN
========================================================= */

.hero-divider span {

    /* Länge der Linie */
    width: 140px;

    /* Höhe der Linie */
    height: 2px;

    /* Verhindert Schrumpfen */
    flex-shrink: 0;

    /* Farbe */
    background: #c79a5e;

}


/* =========================================================
   HERO - DIVIDER HERZ
========================================================= */

.hero-divider i {

    /* Flexbox */
    display: flex;

    /* Vertikal zentrieren */
    align-items: center;

    /* Horizontal zentrieren */
    justify-content: center;

    /* Farbe */
    color: #c79a5e;

    /* Größe */
    font-size: 33px;

}


/* =========================================================
   HERO - VIKTORIA
========================================================= */

.about-hero h3 {

    /* Schriftart */
    font-family: "Great Vibes", cursive;

    /* Buchstabenabstand */
    letter-spacing: 6px;

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

    /* Schriftstärke */
    font-weight: 400;

    /* Farbe */
    color: #b88a50;

    /* Abstand unten */
    margin-bottom: 30px;

}


/* =========================================================
   HERO - BESCHREIBUNGSTEXT
========================================================= */

.about-hero p {

    /* Maximale Breite */
    max-width: 440px;

    /* Zentrieren */
    margin-left: auto;
    margin-right: auto;

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

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

    /* Schriftstärke */
    font-weight: 400;

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

    /* Buchstabenabstand */
    letter-spacing: 0.3px;

    /* Farbe */
    color: #202020;

}


/* =========================================================
   MEINE GESCHICHTE
========================================================= */

.about-story {

    /* Positionierung */
    position: relative;

    /* Abstand oben */
    padding-top: 10px;

    /* Abstand unten */
    padding-bottom: 30px;

    /* Hintergrund */
    background: #ffffff;

    /* Ebene */
    z-index: 2;

    /* Elemente dürfen über den Bereich hinausragen */
    overflow: visible;

}


/* =========================================================
   STORY - CONTAINER
========================================================= */

.about-story .container {

    /* Breite */
    width: min(1400px, calc(100% - 120px));

    /* Zentrieren */
    margin-left: auto;
    margin-right: auto;

    /* Position */
    position: relative;

    /* Über dem SA */
    z-index: 2;

}


/* =========================================================
   STORY - GRID
========================================================= */

.about-story-grid {

    /* Grid aktivieren */
    display: grid;

    /* Zwei gleich große Spalten */
    grid-template-columns: 1fr 1fr;

    /* Abstand zwischen den Spalten */
    gap: 90px;

    /* Vertikal ausrichten */
    align-items: center;

}


/* =========================================================
   MEINE GESCHICHTE – LINKER BEREICH
   Bild + Text
========================================================= */

.story-left {

    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 45px;

    align-items: center;

}


/* =========================================================
   PERSÖNLICHES BILD
   Alle Werte hier einfach anpassbar
========================================================= */

:root {

    /* Bildbreite */
    --story-image-width: 500px;

    /* Bildhöhe */
    --story-image-height: 600px;

    /* Bildposition horizontal */
    --story-image-x: -400px;

    /* Bildposition vertikal */
    --story-image-y: -100px;

    /* Ecken */
    --story-image-radius: 20px;

    /* Schatten */
    --story-image-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10);

}


/* =========================================================
   BILD CONTAINER
========================================================= */

.story-image {

    width: var(--story-image-width);

    height: var(--story-image-height);

    transform:
        translate(
            var(--story-image-x),
            var(--story-image-y)
        );

    overflow: hidden;

    border-radius: var(--story-image-radius);

    box-shadow: var(--story-image-shadow);

}


/* =========================================================
   BILD
========================================================= */

.story-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .story-left {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .story-image {

        width: min(
            var(--story-image-width),
            100%
        );

        height: var(--story-image-height);

        margin: 0 auto;

    }

}


/* =========================================================
   STORY - ÜBERSCHRIFT
========================================================= */

.story-label {

    /* Blockelement */
    display: block;

    /* Schriftart */
    font-family: "Great Vibes", cursive;

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

    /* Schriftstärke */
    font-weight: 400;

    /* Buchstabenabstand */
    letter-spacing: 5px;

    /* Farbe */
    color: #292929;

}


/* =========================================================
   STORY - GOLDENE LINIE
========================================================= */

.story-line {

    /* Breite */
    width: 47px;

    /* Höhe */
    height: 1px;

    /* Abstand oben */
    margin-top: 15px;

    /* Abstand unten */
    margin-bottom: 35px;

    /* Farbe */
    background: #c79a5e;

}


/* =========================================================
   STORY - TEXT
========================================================= */

.story-content p {

    /* Abstand unten */
    margin-bottom: 25px;

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

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

    /* Farbe */
    color: #4d4d4d;

}


/* =========================================================
   FAKTENKARTE
========================================================= */

.facts-card {

    /* Breite */
    width: 110%;

    /* Padding wird in die Gesamtbreite eingerechnet */
    box-sizing: border-box;

    /* Innenabstand oben */
    padding-top: 38px;

    /* Innenabstand rechts */
    padding-right: 45px;

    /* Innenabstand unten */
    padding-bottom: 38px;

    /* Innenabstand links */
    padding-left: 45px;

    /* Hintergrund */
    background: #fffafa;

    /* Rahmen */
    border: 1px solid rgba(199, 154, 94, 0.12);

    /* Runde Ecken */
    border-radius: 8px;

    /* Schatten */
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.08);

    /* Positionierung */
    position: relative;
    right: -80px;

    /* Über anderen Elementen */
    z-index: 5;

    /* Überlappung */
    transform: translateY(-80px);

}


/* =========================================================
   FAKTENKARTE - ÜBERSCHRIFT
========================================================= */

.facts-card h2 {

    /* Außenabstand entfernen */
    margin: 0;

    /* Zentrierung */
    text-align: center;

    /* Schriftart */
    font-family: "Great Vibes", cursive;

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

    /* Schriftstärke */
    font-weight: 400;

    /* Buchstabenabstand */
    letter-spacing: 7px;

    /* Farbe */
    color: #292929;

}


/* =========================================================
   FAKTENKARTE - TRENNLINIE
========================================================= */

.facts-divider {

    /* Breite */
    width: 40px;

    /* Höhe */
    height: 1.5px;

    /* Zentrieren */
    margin-top: 18px;

    /* Abstand unten */
    margin-bottom: 22px;

    /* Horizontal zentrieren */
    margin-left: auto;
    margin-right: auto;

    /* Farbe */
    background: #c79a5e;

}


/* =========================================================
   EINZELNER FAKT
========================================================= */

.fact {

    /* Grid */
    display: grid;

    /* Icon | Name | Wert */
    grid-template-columns: 35px 1fr auto;

    /* Vertikal zentrieren */
    align-items: center;

    /* Mindesthöhe */
    min-height: 52px;

    /* Trennlinie */
    border-bottom: 1px solid #eeeeee;

}


/* Letzter Fakt ohne Linie */

.fact:last-child {

    border-bottom: none;

}


/* =========================================================
   FAKT - ICON
========================================================= */

.fact-icon {

    /* Farbe */
    color: #c79a5e;

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

}


/* =========================================================
   FAKT - BEZEICHNUNG
========================================================= */

.fact-name {

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

    /* Farbe */
    color: #444444;

}


/* =========================================================
   FAKT - WERT
========================================================= */

.fact-value {

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

    /* Farbe */
    color: #333333;

    /* Rechtsbündig */
    text-align: right;

}


/* =========================================================
   DEZENTES "SA" IM HINTERGRUND
========================================================= */

.about-story::before {

    /* Text */
    content: "SA";

    /* Position */
    position: absolute;

    /* Abstand links */
    left: 180px;

    /* Abstand unten */
    bottom: 20px;

    /* Schriftart */
    font-family: "Great Vibes", cursive;

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

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

    /* Farbe */
    color: rgba(199, 154, 94, 0.055);

    /* Keine Mausinteraktion */
    pointer-events: none;

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

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    /* Story Abstand */
    .about-story {

        padding-top: 90px;

        padding-bottom: 130px;

    }


    /* Container */
    .about-story .container {

        width: calc(100% - 40px);

    }


    /* Eine Spalte */
    .about-story-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    /* Story volle Breite */
    .story-content {

        max-width: none;

    }


    /* Faktenkarte */
    .facts-card {

        padding-top: 35px;

        padding-right: 30px;

        padding-bottom: 35px;

        padding-left: 30px;

    }

}


/* =========================================================
   RESPONSIVE - SMARTPHONE
========================================================= */

@media (max-width: 500px) {

    /* Story Container */
    .about-story .container {

        width: calc(100% - 30px);

    }


    /* Faktenüberschrift */
    .facts-card h2 {

        font-size: 1.45rem;

        letter-spacing: 4px;

    }


    /* Fakt */
    .fact {

        grid-template-columns: 30px 1fr auto;

    }


    /* Fakt Text */
    .fact-name,
    .fact-value {

        font-size: 0.85rem;

    }


    /* SA */
    .about-story::before {

        left: 20px;

        font-size: 9rem;

    }

}