/* =========================================================
   DAS ERWARTET DICH
   Grundaufbau des Angebotsbereichs
========================================================= */


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

.about-offers {

    /* Hintergrundfarbe */
    background: #f8f3f3;

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

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

    /* Positionierung */
    position: relative;

    /* Ebene */
    z-index: 2;

}


/* =========================================================
   CONTAINER
   Hier kannst du die gesamte Breite verändern
========================================================= */

.about-offers .container {

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

    /* Zentrierung */
    margin: 0 auto;

}


/* =========================================================
   TITELBEREICH
========================================================= */

.offers-title {

    /* Zentrierung */
    text-align: center;

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

}


/* =========================================================
   TITEL
========================================================= */

.offers-title h2 {

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

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

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

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

    /* Farbe */
    color: #292929;

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

    /* Abstand */
    margin: 0;

}


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

.offers-divider {

    /* Flexbox */
    display: flex;

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

    /* Horizontale Zentrierung */
    justify-content: center;

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

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

}


/* =========================================================
   DIVIDER LINIEN
========================================================= */

.offers-divider span {

    /* Breite der Linie */
    width: 100px;

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

    /* Farbe */
    background: #c79a5e;

}


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

.offers-divider i {

    /* Farbe */
    color: #c79a5e;

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

}


/* =========================================================
   KARTEN-GRID
========================================================= */

.offers-grid {

    /* Grid aktivieren */
    display: grid;

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

    /* Abstand horizontal + vertikal */
    gap: 22px;

}


/* =========================================================
   ANGEBOTSKARTE
========================================================= */

.offer-card {

    /* Positionierung */
    position: relative;

    /* Höhe der Karten */
    height: 300px;

    /* Verhindert Überlauf */
    overflow: hidden;

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

    /* Link ohne Standard-Unterstreichung */
    text-decoration: none;

    /* Blockelement */
    display: block;

}


/* =========================================================
   KARTENBILD
========================================================= */

.offer-card img {

    /* Volle Breite */
    width: 100%;

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

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

    /* Bildposition */
    object-position: center;

    /* Übergang für späteren Hover */
    transition: transform .6s ease;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    /* Zwei Karten pro Reihe */

    .offers-grid {

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

    }

}


@media (max-width: 600px) {

    /* Container schmaler */

    .about-offers .container {

        width: calc(100% - 30px);

    }


    /* Eine Karte pro Reihe */

    .offers-grid {

        grid-template-columns: 1fr;

    }


    /* Karten etwas niedriger */

    .offer-card {

        height: 260px;

    }


    /* Titel kleiner */

    .offers-title h2 {

        font-size: 1.8rem;

        letter-spacing: 4px;

    }

}

/* =========================================================
   WERDE TEIL MEINER WELT
   Abschlussbereich der Über-mich-Seite
========================================================= */


/* =========================================================
   EINSTELLUNGEN
   Alle wichtigen Werte zentral anpassbar
========================================================= */

:root {

    /* -----------------------------------------------------
       BREITE DES BEREICHS
    ----------------------------------------------------- */

    --membership-width: 1200px;


    /* -----------------------------------------------------
       HÖHE DES BEREICHS
    ----------------------------------------------------- */

    --membership-height: 260px;


    /* -----------------------------------------------------
       ABSTAND NACH OBEN
    ----------------------------------------------------- */

    --membership-margin-top: 35px;


    /* -----------------------------------------------------
       ABSTAND NACH UNTEN
    ----------------------------------------------------- */

    --membership-margin-bottom: 70px;


    /* -----------------------------------------------------
       INNENABSTAND OBEN
    ----------------------------------------------------- */

    --membership-padding-top: 35px;


    /* -----------------------------------------------------
       INNENABSTAND UNTEN
    ----------------------------------------------------- */

    --membership-padding-bottom: 35px;


    /* -----------------------------------------------------
       HINTERGRUNDFARBE
    ----------------------------------------------------- */

    --membership-background: #f8f3f3;


    /* -----------------------------------------------------
       RAHMENFARBE
    ----------------------------------------------------- */

    --membership-border-color:
        rgba(199, 154, 94, 0.18);


    /* -----------------------------------------------------
       RAHMENSTÄRKE
    ----------------------------------------------------- */

    --membership-border-width: 1.5px;


    /* -----------------------------------------------------
       ECKENRADIUS
    ----------------------------------------------------- */

    --membership-border-radius: 7px;


    /* -----------------------------------------------------
       GOLD-FARBE
    ----------------------------------------------------- */

    --membership-gold: #c79a5e;


    /* -----------------------------------------------------
       SCHRIFTGRÖSSE DER ÜBERSCHRIFT
    ----------------------------------------------------- */

    --membership-title-size: 2.2rem;


    /* -----------------------------------------------------
       BUCHSTABENABSTAND
    ----------------------------------------------------- */

    --membership-title-spacing: 7px;


    /* -----------------------------------------------------
       SCHRIFTGRÖSSE DES BESCHREIBUNGSTEXTES
    ----------------------------------------------------- */

    --membership-text-size: 1.4rem;


    /* -----------------------------------------------------
       ZEILENHÖHE DES BESCHREIBUNGSTEXTES
    ----------------------------------------------------- */

    --membership-text-line-height: 1.7;


    /* -----------------------------------------------------
       BREITE DES BUTTONS
    ----------------------------------------------------- */

    --membership-button-width: 290px;


    /* -----------------------------------------------------
       HÖHE DES BUTTONS
    ----------------------------------------------------- */

    --membership-button-height: 47px;

}


/* =========================================================
   ÄUSSERER BEREICH
========================================================= */

.about-membership {

    /* Positionierung */
    position: relative;

    /* Volle Breite */
    width: 100%;

    /* Abstand oben */
    margin-top: var(--membership-margin-top);

    /* Abstand unten */
    margin-bottom: var(--membership-margin-bottom);

    /* Seitlicher Abstand */
    padding-left: 20px;
    padding-right: 20px;

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

}


/* =========================================================
   HAUPTCONTAINER
========================================================= */

.about-membership-container {

    /* Positionierung */
    position: relative;

    /* Maximale Breite */
    width: min(
        var(--membership-width),
        100%
    );

    /* Mindesthöhe */
    min-height: var(--membership-height);

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

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

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

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

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

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

    /* Hintergrund */
    background: var(--membership-background);

    /* Rahmen */
    border:
        var(--membership-border-width)
        solid
        var(--membership-border-color);

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

    /* Überlauf */
    overflow: hidden;

}


/* =========================================================
   INHALT
========================================================= */

.about-membership-content {

    /* Positionierung */
    position: relative;

    /* Ebene */
    z-index: 2;

    /* Flexbox */
    display: flex;

    /* Elemente untereinander */
    flex-direction: column;

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

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

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

    /* Volle Breite */
    width: 100%;

}


/* =========================================================
   KRONE
========================================================= */

.membership-crown {

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

    /* Farbe */
    color: var(--membership-gold);

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

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

}


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

.about-membership h2 {

    /* Außenabstände */
    margin-top: 0;

    margin-right: 0;

    margin-bottom: 12px;

    margin-left: 0;

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

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

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

    /* Buchstabenabstand */
    letter-spacing: var(--membership-title-spacing);

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

    /* Farbe */
    color: #292929;

    /* Zentrierung */
    text-align: center;

}


/* =========================================================
   BESCHREIBUNG
========================================================= */

.about-membership p {

    /* Außenabstand oben */
    margin-top: 0;

    /* Außenabstand rechts */
    margin-right: 0;

    /* Außenabstand unten */
    margin-bottom: 18px;

    /* Außenabstand links */
    margin-left: 0;

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

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

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

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

    /* Farbe */
    color: #444444;

    /* Zentrierung */
    text-align: center;

}


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

.membership-button {

    /* Breite */
    width: var(--membership-button-width);

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

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

    /* Flexbox */
    display: flex;

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

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

    /* Hintergrund */
    background: var(--membership-gold);

    /* Schriftfarbe */
    color: #ffffff;

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

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

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

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

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

    /* Übergang */
    transition:
        background 0.25s ease,
        transform 0.25s ease;

}


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

.membership-button:hover {

    /* Etwas dunkleres Gold */
    background: #b5854d;

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

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .about-membership {

        padding-left: 20px;

        padding-right: 20px;

    }


    .about-membership-container {

        min-height: 250px;

    }


    .about-membership h2 {

        font-size: 1.5rem;

        letter-spacing: 6px;

    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    .about-membership {

        padding-left: 15px;

        padding-right: 15px;

    }


    .about-membership-container {

        min-height: 270px;

        padding-left: 20px;

        padding-right: 20px;

    }


    .about-membership h2 {

        font-size: 1.25rem;

        letter-spacing: 4px;

    }


    .about-membership p {

        font-size: 0.95rem;

    }


    .membership-button {

        width: 240px;

        height: 42px;

    }

}