/* =========================================================
   STARTSEITE – HERO
   Neuer Aufbau nach der finalen Vorlage
========================================================= */


/* =========================================================
   HERO – ANPASSBARE GRUNDWERTE
   Alle wichtigen Werte des Hero-Bereichs
   können hier zentral geändert werden.
========================================================= */

:root {


    /* =====================================================
       GESAMTHÖHE
    ====================================================== */

    /* Höhe des kompletten Hero-Bereichs */
    --hero-height: 1100px;


    /* =====================================================
       LINKER BEREICH
    ====================================================== */

    /* Breite des linken Branding-Bereichs */
    --hero-brand-width: 43%;


    /* Innenabstand links */
    --hero-brand-padding-left: 50px;

    /* Innenabstand rechts */
    --hero-brand-padding-right: 50px;


    /* =====================================================
       LOGO
    ====================================================== */

    /* Breite des großen Logos */
    --hero-logo-width: 930px;


    /* =====================================================
       SOCIAL MEDIA
    ====================================================== */

    /* Größe der Social-Buttons */
    --hero-social-size: 62px;

    /* Abstand zwischen Social-Buttons */
    --hero-social-gap: 12px;

    /* Abstand oberhalb der Social Icons */
    --hero-social-margin-top: 35px;


    /* =====================================================
       BUTTON
    ====================================================== */

    /* Abstand oberhalb des Buttons */
    --hero-button-margin-top: 30px;

    /* Größe des Button-Textes */
    --hero-button-size: 2.2rem;


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

    /* Abstand zum oberen Rand */
    --hero-image-top: 90px;

    /* Abstand zum rechten Rand */
    --hero-image-right: 0px;

    /* Abstand zum unteren Rand */
    --hero-image-bottom: 0px;

    /* Radius der Bildrundungen */
    --hero-image-radius: 0px;


    /* =====================================================
       HERZ / DIVIDER
    ====================================================== */

    /* Höhe der dekorativen Linie */
    --hero-bottom-line-height: 2px;

    /* Breite der Linien */
    --hero-bottom-line-width: 380px;

    /* Größe des Herzens */
    --hero-bottom-heart-size: 27px;


}


/* =========================================================
   HERO – GESAMTBEREICH
========================================================= */

.start-hero {

    /* Grundlage für alle absoluten Elemente */
    position: relative;

    /* Höhe */
    height: var(--hero-height);

    /* Überstände ausblenden */
    overflow: hidden;

    /* Hintergrundfarbe */
    background: #f8f2ed;

    /* Zwei Spalten */
    display: grid;

    grid-template-columns:
        var(--hero-brand-width)
        1fr;

}


/* =========================================================
   HERO – HINTERGRUND
   Dezente helle Marmor-/Papieroptik
========================================================= */

.start-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    /* Sehr heller Verlauf */
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(249,241,235,.72)
        ),

        url("../img/start/hero-bg.jpg");

    /* Hintergrund skalieren */
    background-size: cover;

    /* Bild zentrieren */
    background-position: center;

    /* Leichte Unschärfe */
    filter: blur(1px);

    /* Verhindert sichtbare Blur-Ränder */
    transform: scale(1.03);

    /* Hinter alle Inhalte */
    z-index: 0;

}


/* =========================================================
   HERO – LINKER BRANDING-BEREICH
========================================================= */

.start-hero-brand {

    /* Positionierung */
    position: relative;

    /* Über den Hintergrund */
    z-index: 3;

    /* Inhalte vertikal zentrieren */
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    /* Seitenabstände */
    padding-left:
        var(--hero-brand-padding-left);

    padding-right:
        var(--hero-brand-padding-right);

}


/* =========================================================
   HERO – LOGO
========================================================= */

.start-hero-logo {

    /* Logo-Breite */
    width:
        var(--hero-logo-width);

    /* Höhe automatisch */
    height: auto;

    /* Als Block */
    display: block;

    /* Keine unerwünschte Verzerrung */
    max-width: 100%;

    /* Dezenter Schatten */
    filter:
        drop-shadow(
            0 10px 22px
            rgba(190,140,95,.18)
        );

}


/* =========================================================
   HERO – SOCIAL MEDIA
========================================================= */

.start-hero-social {

    /* Flexbox */
    display: flex;

    /* Zentrieren */
    justify-content: center;

    /* Abstand zwischen den Buttons */
    gap:
        var(--hero-social-gap);

    /* Abstand zum Logo */
    margin-top:
        var(--hero-social-margin-top);

}


/* =========================================================
   HERO – SOCIAL BUTTON
========================================================= */

.start-hero-social a {

    /* Breite */
    width:
        var(--hero-social-size);

    /* Höhe */
    height:
        var(--hero-social-size);

    /* Kreis */
    border-radius: 50%;

    /* Icon zentrieren */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Kein Unterstrich */
    text-decoration: none;

    /* Gold */
    color: #bd8c62;

    /* Dezenter Rahmen */
    border:
        1px solid rgba(189,140,98,.40);

    /* Sehr heller Hintergrund */
    background:
        rgba(255,255,255,.52);

    /* Sanfte Animation */
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


/* =========================================================
   HERO – SOCIAL ICON
========================================================= */

.start-hero-social i {

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

}


/* =========================================================
   HERO – SOCIAL HOVER
========================================================= */

.start-hero-social a:hover {

    /* Leicht nach oben */
    transform:
        translateY(-3px);

    /* Goldener Hintergrund */
    background: #c89a70;

    /* Weiße Icons */
    color: #ffffff;

}


/* =========================================================
   HERO – CTA BUTTON
========================================================= */

.start-hero-button {

    /* Kein Unterstrich */
    text-decoration: none;

    /* Abstand zu Social */
    margin-top:
        var(--hero-button-margin-top);

    /* Textfarbe */
    color: #ad7650;

    /* Zentrierung */
    text-align: center;

}


/* =========================================================
   HERO – CTA TEXT
========================================================= */

.start-hero-button-text {

    /* Handschriftliche Schrift */
    font-family:
        "Parisienne",
        cursive;

    /* Größe */
    font-size:
        var(--hero-button-size);

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

    /* Zentrieren */
    text-align: center;

    /* Sanfter Übergang */
    transition:
        color .3s ease,
        transform .3s ease;

}


/* =========================================================
   HERO – CTA HOVER
========================================================= */

.start-hero-button:hover
.start-hero-button-text {

    /* Etwas heller */
    color: #c39168;

}


/* =========================================================
   HERO – RECHTES BILD
========================================================= */

.start-hero-image {

    /* Über den Hintergrund */
    position: relative;

    /* Oberhalb der Hintergrundfläche */
    z-index: 2;

    /* Abstand vom oberen Rand */
    margin-top:
        var(--hero-image-top);

    /* Abstand vom rechten Rand */
    margin-right:
        var(--hero-image-right);

    /* Abstand vom unteren Rand */
    margin-bottom:
        var(--hero-image-bottom);

    /* Bild soll rechts sitzen */
    display: flex;

    justify-content: flex-end;

    overflow: hidden;

    /* Rundung der linken Bildseite */
    border-radius:   
        500px
        500px
        500px
        500px
}     


/* =========================================================
   HERO – BILD
========================================================= */

.start-hero-image img {

    /* Komplette Höhe */
    width: 100%;

    height: 100%;

    /* Bild proportional zuschneiden */
    object-fit: none;

    /* Mittelpunkt */
    object-position: center;

    /* Als Block */
    display: block;

}


/* =========================================================
   HERO – UNTERE DEKORATION
   Herz + goldene Linien
========================================================= */

.start-hero-bottom-decoration {

    /* Absolut am unteren Rand */
    position: absolute;

    left: 0;

    right: 0;

    bottom: 1px;

    /* Ganz vorne */
    z-index: 5;

    /* Flexbox */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Abstand zwischen Elementen */
    gap: 12px;

}


/* =========================================================
   HERO – DEKORATIVE LINIE
========================================================= */

.start-hero-bottom-decoration span {

    /* Breite */
    width:
        var(--hero-bottom-line-width);

    /* Höhe */
    height:
        var(--hero-bottom-line-height);

    /* Goldener Verlauf */
    background:
        linear-gradient(
            to right,
            transparent,
            #c79a5e,
            transparent
        );

}


/* =========================================================
   HERO – HERZ
========================================================= */

.start-hero-bottom-decoration i {

    /* Größe */
    font-size:
        var(--hero-bottom-heart-size);

    /* Farbe */
    color: #c79a5e;

    /* Kreisförmige Ruhefläche */
    width: 24px;

    height: 24px;

    /* Herz zentrieren */
    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   HERO – TABLET
========================================================= */

@media (max-width: 900px) {

    :root {

        /* Hero etwas niedriger */
        --hero-height: 620px;

        /* Linke Spalte breiter */
        --hero-brand-width: 46%;

        /* Logo kleiner */
        --hero-logo-width: 270px;

    }


    .start-hero {

        grid-template-columns:
            var(--hero-brand-width)
            1fr;

    }


    .start-hero-image {

        --hero-image-radius:
            120px;

    }

}


/* =========================================================
   HERO – SMARTPHONE
========================================================= */

@media (max-width: 650px) {

    :root {

        /* Herohöhe */
        --hero-height: auto;

        /* Logo */
        --hero-logo-width: 220px;

    }


    .start-hero {

        /* Eine Spalte */
        grid-template-columns: 1fr;

        /* Inhalte untereinander */
        min-height: auto;

    }


    .start-hero-brand {

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

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

    }


    .start-hero-image {

        /* Bild unter dem Branding */
        height: 420px;

        margin-top: 0;

        margin-bottom: 0;

        /* Rundung nur oben */
        border-radius:
            100px
            100px
            0
            0;

    }


    .start-hero-bottom-decoration {

        /* Nicht zwischen zwei Spalten,
           sondern unter dem Bild */
        bottom: 0;

    }


    .start-hero-bottom-decoration span {

        /* Kürzere Linien */
        width: 90px;

    }

}

/* =========================================================
   STARTSEITE – WILLKOMMEN
   Bild links / Text rechts
========================================================= */


/* =========================================================
   ANPASSBARE GRUNDWERTE
   Hier kannst du die wichtigsten Einstellungen
   des gesamten Willkommen-Bereichs ändern.
========================================================= */

:root {

    /* -----------------------------------------------------
       GESAMTBREITE DES WILLKOMMEN-BEREICHS
       ----------------------------------------------------- */

    /* Maximale Breite des gesamten Inhalts */
    --welcome-width: 1700px;


    /* -----------------------------------------------------
       BILD – BREITE
       ----------------------------------------------------- */

    /* Breite des Bildes */
    --welcome-image-width: 720px;


    /* -----------------------------------------------------
       BILD – HÖHE
       ----------------------------------------------------- */

    /* Höhe des Bildes */
    --welcome-image-height: 610px;


    /* -----------------------------------------------------
       BILD – ECKEN
       ----------------------------------------------------- */

    /* Rundung der Bildecken */
    --welcome-image-radius: 48px;


    /* -----------------------------------------------------
       ABSTAND ZWISCHEN BILD UND TEXT
       ----------------------------------------------------- */

    /* Abstand zwischen linkem Bild
       und rechtem Textbereich */
    --welcome-gap: 150px;


    /* -----------------------------------------------------
       TEXTBEREICH – BREITE
       ----------------------------------------------------- */

    /* Maximale Breite des Textbereichs */
    --welcome-content-width: 1000px;

    /* -----------------------------------------------------
       HAUPTÜBERSCHRIFT
       ----------------------------------------------------- */

    /* Größe von:
       "Willkommen bei Secret Allure" */
    --welcome-title-size: 4rem;


    /* -----------------------------------------------------
       FLIESSTEXT
       ----------------------------------------------------- */

    /* Schriftgröße des Beschreibungstextes */
    --welcome-text-size: 1.5rem;

    /* Zeilenabstand des Beschreibungstextes */
    --welcome-text-line-height: 1.8;


    /* -----------------------------------------------------
       ABSTAND DES GESAMTEN BEREICHS
       ----------------------------------------------------- */

    /* Abstand oberhalb des Bereichs */
    --welcome-padding-top: 25px;

    /* Abstand unterhalb des Bereichs */
    --welcome-padding-bottom: 25px;


    /* -----------------------------------------------------
       DEKORATIVES ELEMENT
       ----------------------------------------------------- */

    /* Größe des kleinen goldenen Symbols */
    --welcome-decoration-size: 38px;

}


/* =========================================================
   WILLKOMMEN – GESAMTER BEREICH
========================================================= */

.start-welcome {

    /* Grundlage für spätere Positionierungen */
    position: relative;

    /* Breite über die gesamte Seite */
    width: 100%;

    /* Abstand oberhalb */
    padding-top:
        var(--welcome-padding-top);

    /* Abstand unterhalb */
    padding-bottom:
        var(--welcome-padding-bottom);

    /* Hintergrundfarbe */
    background: #fbf5f0;

}


/* =========================================================
   WILLKOMMEN – INHALTS-CONTAINER
========================================================= */

.start-welcome-container {

    /* Maximale Breite */
    width:
        min(
            var(--welcome-width),
            calc(100% - 80px)
        );

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

    /* Zweispaltiges Layout */
    display: grid;

    /* Linke Spalte = Bild
       Rechte Spalte = Text */
    grid-template-columns:
        var(--welcome-image-width)
        minmax(0, 1fr);

    /* Abstand zwischen den beiden Spalten */
    gap: var(--welcome-gap);

    /* Bild und Text vertikal ausrichten */
    align-items: center;

}


/* =========================================================
   WILLKOMMEN – LINKES BILD
========================================================= */

.start-welcome-image {

    /* Bildbreite */
    width:
        var(--welcome-image-width);

    /* Bildhöhe */
    height:
        var(--welcome-image-height);

    /* Alles außerhalb des Rahmens ausblenden */
    overflow: hidden;

    /* Abgerundete Ecken */
    border-radius:
        var(--welcome-image-radius);

}


/* =========================================================
   WILLKOMMEN – BILDDATEI
========================================================= */

.start-welcome-image img {

    /* Bild nimmt gesamte Breite ein */
    width: 100%;

    /* Bild nimmt gesamte Höhe ein */
    height: 100%;

    /* Keine unerwünschten Inline-Abstände */
    display: block;

    /* Bild proportional zuschneiden */
    object-fit: cover;

    /* Mittelpunkt des Bildausschnitts */
    object-position: center;

}


/* =========================================================
   WILLKOMMEN – RECHTER TEXTBEREICH
========================================================= */

.start-welcome-content {

    /* Maximale Breite */
    width: 100%;

    max-width:
        var(--welcome-content-width);

}

/* =========================================================
   WILLKOMMEN – HAUPTÜBERSCHRIFT
   "Willkommen bei Secret Allure"
========================================================= */

.start-welcome-content h2 {

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

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

    /* Schriftgröße */
    font-size:
        var(--welcome-title-size);

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

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

    /* Schriftfarbe */
    color: #c39168;

}

/* =========================================================
   WILLKOMMEN – BESCHREIBUNGSTEXT
========================================================= */

.start-welcome-content p {

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

    /* Abstand rechts */
    margin-right: 0;

    /* Abstand unten */
    margin-bottom: 0;

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

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

    /* Schriftgröße */
    font-size:
        var(--welcome-text-size);

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

    /* Zeilenhöhe */
    line-height:
        var(--welcome-text-line-height);

    /* Schriftfarbe */
    color: #555555;

}


/* =========================================================
   WILLKOMMEN – ZWEITER TEXTABSATZ
========================================================= */

.start-welcome-content p + p {

    /* Etwas zusätzlicher Abstand
       zwischen den beiden Absätzen */
    margin-top: 8px;

}


/* =========================================================
   WILLKOMMEN – DEKORATIVES SYMBOL
   Kleiner goldener Stern unter dem Text
========================================================= */

.start-welcome-decoration {

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

    /* Größe des Symbols */
    font-size:
        var(--welcome-decoration-size);

    /* Goldfarbe */
    color: #c79a5e;

}


/* =========================================================
   WILLKOMMEN – TABLET
   Ab 900px wird aus zwei Spalten eine Spalte.
========================================================= */

@media (max-width: 900px) {

    /* ---------------------------------------------
       CONTAINER
    --------------------------------------------- */

    .start-welcome-container {

        /* Bild und Text untereinander */
        grid-template-columns: 1fr;

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

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

    }


    /* ---------------------------------------------
       BILD
    --------------------------------------------- */

    .start-welcome-image {

        /* Bild horizontal zentrieren */
        margin-left: auto;

        margin-right: auto;

    }


    /* ---------------------------------------------
       TEXT
    --------------------------------------------- */

    .start-welcome-content {

        /* Textbereich zentrieren */
        margin-left: auto;

        margin-right: auto;

    }


}


/* =========================================================
   WILLKOMMEN – SMARTPHONE
   Für schmale Bildschirme
========================================================= */

@media (max-width: 600px) {

    :root {

        /* Bild nimmt fast die komplette Breite ein */
        --welcome-image-width: 100%;

        /* Bild auf kleineren Bildschirmen niedriger */
        --welcome-image-height: 280px;

        /* Kleinere Überschrift */
        --welcome-title-size: 2.4rem;

        /* Kleinere Textgröße */
        --welcome-text-size: .95rem;

    }


    /* ---------------------------------------------
       CONTAINER
    --------------------------------------------- */

    .start-welcome-container {

        /* Seitlicher Abstand */
        width:
            calc(100% - 30px);

    }

}

/* =========================================================
   STARTSEITE – WAS DICH ERWARTET
   Sechs Angebote ohne zusätzliche Fotos
========================================================= */


/* =========================================================
   ANPASSBARE GRUNDWERTE
   Alle wichtigen Werte dieses Bereichs
   findest du hier zentral.
========================================================= */

:root {


    /* =====================================================
       GESAMTFLÄCHE
    ====================================================== */

    /* Maximale Breite des gesamten Inhalts */
    --expect-width: 1500px;

    /* Abstand oben */
    --expect-padding-top: 70px;

    /* Abstand unten */
    --expect-padding-bottom: 65px;


    /* =====================================================
       ÜBERSCHRIFT
    ====================================================== */

    /* Kleine Überschrift */
    --expect-label-size: 4rem;

    /* Abstand der Buchstaben */
    --expect-label-spacing: 5px;

    /* Hauptüberschrift */
    --expect-title-size: 2.8rem;

    /* Unterzeile */
    --expect-subtitle-size: 1.5rem;


    /* =====================================================
       KARTEN
    ====================================================== */

    /* Abstand zwischen den Karten */
    --expect-card-gap: 25px;

    /* Kartenhöhe */
    --expect-card-height: 155px;

    /* Kartenradius */
    --expect-card-radius: 30px;

    /* Rahmenfarbe */
    --expect-card-border:
        rgba(199,154,94,.30);


    /* =====================================================
       ICON
    ====================================================== */

    /* Größe der eigenen Symbole */
    --expect-icon-size: 200px;

    /* Abstand zwischen Symbol und Titel */
    --expect-icon-title-gap: 14px;


    /* =====================================================
       TITEL DER KARTEN
    ====================================================== */

    /* Schriftgröße */
    --expect-card-title-size: 2rem;

    /* Zeilenhöhe */
    --expect-card-title-line-height: 1.25;


    /* =====================================================
       BUTTON
    ====================================================== */

    /* Button-Breite */
    --expect-button-width: 345px;

    /* Button-Höhe */
    --expect-button-height: 72px;

    /* Button-Radius */
    --expect-button-radius: 30px;

    /* Button-Schriftgröße */
    --expect-button-size: 2rem;

}


/* =========================================================
   GESAMTER BEREICH
========================================================= */

.start-expect {

    /* Eigene Positionsebene */
    position: relative;

    /* Breite */
    width: 100%;

    /* Hintergrund */
    background: #fbf5f0;

    /* Abstand oben */
    padding-top:
        var(--expect-padding-top);

    /* Abstand unten */
    padding-bottom:
        var(--expect-padding-bottom);

}


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

.start-expect-container {

    /* Maximale Breite */
    width:
        min(
            var(--expect-width),
            calc(100% - 70px)
        );

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

}


/* =========================================================
   ÜBERSCHRIFT – BEREICH
========================================================= */

.start-expect-heading {

    /* Zentrieren */
    text-align: center;

    /* Abstand nach unten */
    margin-bottom: 34px;

}


/* =========================================================
   KLEINES LABEL
   "WAS DICH ERWARTET"
========================================================= */

.start-expect-label {

    /* Eigene Zeile */
    display: block;

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

    /* Schriftgröße */
    font-size:
        var(--expect-label-size);

    /* Buchstabenabstand */
    letter-spacing:
        var(--expect-label-spacing);

    /* Farbe */
    color: #c79a5e;

    /* Abstand nach unten */
    margin-bottom: 10px;

}


/* =========================================================
   HAUPTÜBERSCHRIFT
========================================================= */

.start-expect-heading h2 {

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

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

    /* Größe */
    font-size:
        var(--expect-title-size);

    /* Gewicht */
    font-weight: 400;

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

    /* Farbe */
    color: #292929;

}


/* =========================================================
   UNTERZEILE
========================================================= */

.start-expect-heading p {

    /* Abstand oben */
    margin: 8px 0 0;

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

    /* Schriftgröße */
    font-size:
        var(--expect-subtitle-size);

    /* Farbe */
    color: #737373;

}


/* =========================================================
   KARTEN-RASTER
========================================================= */

.start-expect-grid {

    /* Sechs Karten nebeneinander */
    display: grid;

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

    /* Abstand zwischen den Karten */
    gap:
        var(--expect-card-gap);

}


/* =========================================================
   EINZELNE KARTE
========================================================= */

.start-expect-card {

    /* Höhe */
    min-height:
        var(--expect-card-height);

    /* Box-Modell */
    box-sizing: border-box;

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

    /* Rahmen */
    border:
        1px solid
        var(--expect-card-border);

    /* Eckrundung */
    border-radius:
        var(--expect-card-radius);

    /* Sehr heller Hintergrund */
    background:
        rgba(255,255,255,.28);

    /* Inhalt zentrieren */
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    /* Sanfter Übergang */
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


/* =========================================================
   KARTE – HOVER
========================================================= */

.start-expect-card:hover {

    /* Karte leicht nach oben */
    transform:
        translateY(-4px);

    /* Hellerer Hintergrund */
    background:
        rgba(255,255,255,.62);

    /* Dezenter Schatten */
    box-shadow:
        0 14px 30px
        rgba(180,135,95,.10);

}


/* =========================================================
   KARTEN – ICON CONTAINER
========================================================= */

.start-expect-icon {

    /* Einheitliche Breite */
    width:
        var(--expect-icon-size);

    /* Einheitliche Höhe */
    height:
        var(--expect-icon-size);

    /* Icon zentrieren */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Abstand zum Titel */
    margin-bottom:
        var(--expect-icon-title-gap);

}


/* =========================================================
   KARTEN – EIGENES ICON
========================================================= */

.start-expect-icon img {

    /* Volle Breite */
    width: 100%;

    /* Volle Höhe */
    height: 100%;

    /* Nicht verzerren */
    object-fit: contain;

    /* Als Block */
    display: block;

}


/* =========================================================
   KARTEN – TITEL
========================================================= */

.start-expect-card h3 {

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

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

    /* Größe */
    font-size:
        var(--expect-card-title-size);

    /* Gewicht */
    font-weight: 500;

    /* Zeilenhöhe */
    line-height:
        var(--expect-card-title-line-height);

    /* Zentriert */
    text-align: center;

    /* Farbe */
    color: #363636;

}


/* =========================================================
   BUTTON – CONTAINER
========================================================= */

.start-expect-action {

    /* Zentrieren */
    display: flex;

    justify-content: center;

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

}


/* =========================================================
   BUTTON – MEHR ENTDECKEN
========================================================= */

.start-expect-button {

    /* Feste Breite */
    width:
        var(--expect-button-width);

    /* Feste Höhe */
    height:
        var(--expect-button-height);

    /* Box-Modell */
    box-sizing: border-box;

    /* Flexbox */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Runde Form */
    border-radius:
        var(--expect-button-radius);

    /* Hintergrund */
    background: #c28f61;

    /* Schriftfarbe */
    color: #ffffff;

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

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

    /* Schriftgröße */
    font-size:
        var(--expect-button-size);

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

    /* Übergang */
    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


/* =========================================================
   BUTTON – HOVER
========================================================= */

.start-expect-button:hover {

    /* Dunkleres Gold */
    background: #ae784e;

    /* Leicht nach oben */
    transform:
        translateY(-2px);

    /* Schatten */
    box-shadow:
        0 10px 25px
        rgba(174,120,78,.20);

}


/* =========================================================
   RESPONSIVE – TABLET
========================================================= */

@media (max-width: 1050px) {

    .start-expect-grid {

        /* Drei Karten pro Reihe */
        grid-template-columns:
            repeat(3, 1fr);

    }

}


/* =========================================================
   RESPONSIVE – SMARTPHONE
========================================================= */

@media (max-width: 650px) {

    :root {

        /* Kleinere Karten */
        --expect-card-height: 135px;

        /* Kleinere Überschrift */
        --expect-title-size: 1.9rem;

    }


    .start-expect-container {

        /* Seitenabstand */
        width:
            calc(100% - 30px);

    }


    .start-expect-grid {

        /* Zwei Karten pro Reihe */
        grid-template-columns:
            repeat(2, 1fr);

    }

}

/* =========================================================
   STARTSEITE – MEHR ALS NUR SCHÖNE BILDER
   Bild links / Text Mitte / Eigenschaften rechts
========================================================= */


/* =========================================================
   ANPASSBARE GRUNDWERTE
   Alle wichtigen Einstellungen befinden sich hier.
========================================================= */

:root {


    /* =====================================================
       GESAMTBEREICH
    ====================================================== */

    /* Maximale Breite */
    --about-start-width: 1500px;

    /* Abstand oben */
    --about-start-padding-top: 70px;

    /* Abstand unten */
    --about-start-padding-bottom: 70px;


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

    /* Breite des Bildes */
    --about-start-image-width: 500px;

    /* Höhe des Bildes */
    --about-start-image-height: 700px;

    /* Rundung des Bildes */
    --about-start-image-radius: 74px;


    /* =====================================================
       ABSTAND ZUM TEXT
    ====================================================== */

    /* Abstand zwischen Bild und mittlerem Text */
    --about-start-content-gap: 45px;


    /* =====================================================
       MITTLERER TEXT
    ====================================================== */

    /* Maximale Textbreite */
    --about-start-text-width: 340px;

    /* Labelgröße */
    --about-start-label-size: 4rem;

    /* Buchstabenabstand des Labels */
    --about-start-label-spacing: 4px;

    /* Hauptüberschrift */
    --about-start-title-size: 2.8rem;

    /* Fließtext */
    --about-start-text-size: 1.5rem;

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


    /* =====================================================
       SIGNATUR
    ====================================================== */

    /* Schriftgröße der Signatur */
    --about-start-signature-size: 2.5rem;


    /* =====================================================
       EIGENSCHAFTEN
    ====================================================== */

    /* Abstand zwischen den vier Eigenschaften */
    --about-start-values-gap: 28px;

    /* Icongröße */
    --about-start-value-icon-size: 150px;

    /* Titelgröße */
    --about-start-value-title-size: 1.7rem;

    /* Beschreibung */
    --about-start-value-text-size: 1.7rem;

    /* Zeilenhöhe der Beschreibung */
    --about-start-value-line-height: 1.55;

}


/* =========================================================
   GESAMTER BEREICH
========================================================= */

.start-about {

    /* Grundlage für Positionierungen */
    position: relative;

    /* Breite */
    width: 100%;

    /* Heller Hintergrund */
    background: #fbf5f0;

    /* Innenabstand oben */
    padding-top:
        var(--about-start-padding-top);

    /* Innenabstand unten */
    padding-bottom:
        var(--about-start-padding-bottom);

}


/* =========================================================
   INHALTS-CONTAINER
========================================================= */

.start-about-container {

    /* Maximale Breite */
    width:
        min(
            var(--about-start-width),
            calc(100% - 70px)
        );

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

    /* Drei Spalten */
    display: grid;

    grid-template-columns:
        var(--about-start-image-width)
        minmax(280px, 1fr)
        minmax(300px, 1fr);

    /* Abstand zwischen den Spalten */
    gap: var(--about-start-content-gap);

    /* Vertikale Ausrichtung */
    align-items: center;

}


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

.start-about-image {

    /* Breite */
    width:
        var(--about-start-image-width);

    /* Höhe */
    height:
        var(--about-start-image-height);

    /* Überstehende Bildteile ausblenden */
    overflow: hidden;

    /* Runde Ecken */
    border-radius:
        var(--about-start-image-radius);

}


/* =========================================================
   BILDDATEI
========================================================= */

.start-about-image img {

    /* Volle Breite */
    width: 100%;

    /* Volle Höhe */
    height: 100%;

    /* Blockelement */
    display: block;

    /* Bild zuschneiden */
    object-fit: cover;

    /* Bildposition */
    object-position: center;

}


/* =========================================================
   MITTLERER TEXTBEREICH
========================================================= */

.start-about-content {

    /* Maximale Breite */
    width: 100%;

    max-width:
        var(--about-start-text-width);

}


/* =========================================================
   KLEINES LABEL
========================================================= */

.start-about-label {

    /* Eigene Zeile */
    display: block;

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

    /* Schriftgröße */
    font-size:
        var(--about-start-label-size);

    /* Buchstabenabstand */
    letter-spacing:
        var(--about-start-label-spacing);

    /* Farbe */
    color: #c79a5e;

    /* Abstand */
    margin-bottom: 10px;

}


/* =========================================================
   HAUPTÜBERSCHRIFT
========================================================= */

.start-about-content h2 {

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

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

    /* Schriftgröße */
    font-size:
        var(--about-start-title-size);

    /* Schriftgewicht */
    font-weight: 400;

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

    /* Farbe */
    color: #292929;

}


/* =========================================================
   FLIESSTEXT
========================================================= */

.start-about-content p {

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

    /* Abstand unten */
    margin-bottom: 0;

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

    /* Schriftgröße */
    font-size:
        var(--about-start-text-size);

    /* Zeilenhöhe */
    line-height:
        var(--about-start-line-height);

    /* Farbe */
    color: #555555;

}


/* =========================================================
   SIGNATUR
========================================================= */

.start-about-signature {

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

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

    /* Größe */
    font-size:
        var(--about-start-signature-size);

    /* Farbe */
    color: #c28f61;

}


/* =========================================================
   RECHTER BEREICH
========================================================= */

.start-about-values {

    /* Zwei Spalten */
    display: grid;

    grid-template-columns:
        1fr 1fr;

    /* Abstand */
    gap:
        var(--about-start-values-gap);

}


/* =========================================================
   EINZELNE EIGENSCHAFT
========================================================= */

.start-about-value {

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

}


/* =========================================================
   ICON
========================================================= */

.start-about-value-icon {

    /* Größe */
    width:
        var(--about-start-value-icon-size);

    height:
        var(--about-start-value-icon-size);

    /* Kreis */
    border-radius: 50%;

    /* Zentrieren */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Rahmen */
    border:
        1px solid rgba(194,143,97,.45);

    /* Farbe */
    color: #c28f61;

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

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

}


/* =========================================================
   ICON-ZEICHEN
========================================================= */

.start-about-value-icon span {

    /* Schriftgröße */
    font-size: 90px;

    /* Farbe */
    color: #c28f61;

}


/* =========================================================
   EIGENSCHAFT – TITEL
========================================================= */

.start-about-value h3 {

    /* Standardabstände */
    margin: 0;

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

    /* Schriftgröße */
    font-size:
        var(--about-start-value-title-size);

    /* Gewicht */
    font-weight: 500;

    /* Farbe */
    color: #363636;

}


/* =========================================================
   EIGENSCHAFT – BESCHREIBUNG
========================================================= */

.start-about-value p {

    /* Abstand */
    margin: 7px 0 0;

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

    /* Schriftgröße */
    font-size:
        var(--about-start-value-text-size);

    /* Zeilenhöhe */
    line-height:
        var(--about-start-value-line-height);

    /* Farbe */
    color: #666666;

}


/* =========================================================
   RESPONSIVE – TABLET
========================================================= */

@media (max-width: 1050px) {

    .start-about-container {

        /* Bild und Text etwas kleiner */
        grid-template-columns:
            320px
            minmax(250px, 1fr)
            minmax(260px, 1fr);

        /* Weniger Abstand */
        gap: 30px;

    }


    :root {

        /* Bildbreite */
        --about-start-image-width: 320px;

        /* Bildhöhe */
        --about-start-image-height: 350px;

        /* Überschrift */
        --about-start-title-size: 2.3rem;

    }

}


/* =========================================================
   RESPONSIVE – KLEINER TABLET-BEREICH
========================================================= */

@media (max-width: 850px) {

    .start-about-container {

        /* Zwei Spalten */
        grid-template-columns:
            1fr 1fr;

    }


    .start-about-image {

        /* Bild über die erste Zeile */
        grid-row: span 2;

    }


    .start-about-values {

        /* Eigenschaften normal daneben */
        grid-column: 2;

    }

}


/* =========================================================
   RESPONSIVE – SMARTPHONE
========================================================= */

@media (max-width: 650px) {

    :root {

        /* Bild */
        --about-start-image-width: 100%;

        --about-start-image-height: 360px;

        /* Überschrift */
        --about-start-title-size: 2.1rem;

    }


    .start-about-container {

        /* Alles untereinander */
        grid-template-columns: 1fr;

        /* Abstand */
        gap: 40px;

        /* Seitenabstand */
        width:
            calc(100% - 30px);

    }


    .start-about-image {

        /* Keine Grid-Sonderposition */
        grid-row: auto;

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

    }


    .start-about-content {

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

        margin-left: auto;
        margin-right: auto;

    }


    .start-about-values {

        /* Eigenschaften unter den Text */
        grid-column: auto;

        /* Abstand */
        gap: 25px 15px;

    }

}