/* =========================================================
   GRUNDEINSTELLUNGEN
========================================================= */

:root {
    --green-dark: #2f3c31;
    --green: #405241;
    --green-medium: #607060;
    --green-light: #e8ede5;

    --gold-dark: #a77b25;
    --gold: #c39538;
    --gold-light: #dbba72;

    --cream: #f9f6ee;
    --cream-light: #fffdf8;

    --white: #ffffff;

    --text: #30362f;
    --text-light: #687067;

    --shadow:
            0 20px 60px rgba(47, 60, 49, 0.10);

    --radius-large: 32px;
    --radius-medium: 20px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family:
            Georgia,
            "Times New Roman",
            serif;

    background: var(--cream-light);
    color: var(--text);

    line-height: 1.7;

    overflow-x: hidden;
}


img {
    max-width: 100%;
}


a {
    color: inherit;
}


button,
input,
textarea {
    font: inherit;
}


/* =========================================================
   ALLGEMEIN
========================================================= */

.section-container {
    width: min(1180px, 88%);
    margin-inline: auto;
}


.section-container.narrow {
    max-width: 820px;
}


section {
    position: relative;
}


h1,
h2,
h3 {
    font-weight: 400;
}


h2 {
    font-size: clamp(
            2.2rem,
            5vw,
            4rem
    );

    line-height: 1.15;

    color: var(--green-dark);
}


h3 {
    font-size: 1.55rem;
}


p {
    font-size: 1.05rem;
}


.large-text {
    font-size: clamp(
            1.2rem,
            2vw,
            1.45rem
    );

    color: var(--green);
}


.section-label {
    text-transform: uppercase;

    letter-spacing: 0.22em;

    font-size: 0.8rem;

    color: var(--gold-dark);

    margin-bottom: 16px;
}


.section-label.light {
    color: var(--gold-light);
}


.section-intro {
    max-width: 700px;

    margin:
            22px auto
            50px;

    color: var(--text-light);
}


.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding:
            0
            30px;

    border-radius: 100px;

    text-decoration: none;

    letter-spacing: 0.05em;

    font-size: 0.9rem;

    transition:
            transform 0.25s ease,
            box-shadow 0.25s ease,
            background 0.25s ease;

    cursor: pointer;

    border: none;
}


.button:hover {
    transform: translateY(-2px);
}


.button-gold {
    color: white;

    background:
            linear-gradient(
                    135deg,
                    var(--gold-dark),
                    var(--gold-light)
            );

    box-shadow:
            0 12px 30px
            rgba(167, 123, 37, 0.25);
}


.button-outline {
    border:
            1px solid
            var(--gold);

    color: var(--green-dark);

    background:
            rgba(255, 255, 255, 0.55);
}


.button-light {
    background: var(--cream-light);

    color: var(--green-dark);
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
            rgba(255, 253, 248, 0.93);

    backdrop-filter:
            blur(14px);

    border-bottom:
            1px solid
            rgba(195, 149, 56, 0.17);
}


.nav-container {
    width: min(1180px, 90%);

    min-height: 82px;

    margin-inline: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.brand {
    text-decoration: none;

    font-size:
            clamp(
                    1.45rem,
                    3vw,
                    2rem
            );

    letter-spacing: 0.12em;

    color: var(--green-dark);
}


.brand span {
    color: var(--gold-dark);
}


.navigation {
    display: flex;

    gap: 32px;
}


.navigation a {
    text-decoration: none;

    color: var(--green);

    font-size: 0.95rem;

    transition: color 0.2s ease;
}


.navigation a:hover {
    color: var(--gold-dark);
}


.menu-button {
    display: none;

    width: 42px;
    height: 42px;

    border: none;

    background: transparent;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    cursor: pointer;
}


.menu-button span {
    display: block;

    width: 25px;
    height: 2px;

    background: var(--gold-dark);
}


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

.hero {
    min-height: 100svh;

    padding:
            150px
            6%
            90px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    background:
            radial-gradient(
                    circle at 50% 25%,
                    rgba(219, 186, 114, 0.17),
                    transparent 28%
            ),
            linear-gradient(
                    180deg,
                    #fffdf8,
                    #f8f5ec
            );

    overflow: hidden;
}


.hero-content {
    position: relative;

    z-index: 2;

    width: min(850px, 100%);
}


.hero-logo {
    width:
            clamp(
                    240px,
                    25vw,
                    330px
            );

    margin-bottom: 28px;
}


.eyebrow {
    text-transform: uppercase;

    letter-spacing: 0.18em;

    color: var(--gold-dark);

    font-size: 0.8rem;

    margin-bottom: 22px;
}


.hero h1 {
    color: var(--green-dark);

    font-size:
            clamp(
                    3rem,
                    7vw,
                    5rem
            );

    line-height: 1.05;
}


.hero-text {
    max-width: 670px;

    margin:
            28px auto
            0;

    color: var(--green-medium);

    font-size:
            clamp(
                    1.08rem,
                    2vw,
                    1.35rem
            );
}


.hero-buttons {
    margin-top: 38px;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}


.hero-decoration {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    opacity: 0.13;

    filter: blur(1px);
}


.hero-decoration-left {
    left: -200px;
    bottom: -100px;

    background:
            radial-gradient(
                    circle,
                    var(--green-medium),
                    transparent 65%
            );
}


.hero-decoration-right {
    right: -220px;
    top: 120px;

    background:
            radial-gradient(
                    circle,
                    var(--gold-light),
                    transparent 65%
            );
}


.scroll-indicator {
    position: absolute;

    bottom: 25px;

    color: var(--gold-dark);

    text-decoration: none;

    font-size: 1.5rem;

    animation:
            bounce 2s infinite;
}


@keyframes bounce {

    0%,
    100% {
        transform:
                translateY(0);
    }

    50% {
        transform:
                translateY(8px);
    }

}


/* =========================================================
   INTRO
========================================================= */

.intro-section {
    padding:
            110px
            0;

    text-align: center;

    background:
            var(--cream-light);
}


.gold-symbol {
    color: var(--gold);

    margin-bottom: 22px;
}


.intro-section h2 {
    margin-bottom: 28px;
}


.intro-section p {
    margin-top: 20px;
}


/* =========================================================
   SERVICES
========================================================= */

.services-section {
    padding:
            110px
            0;

    background:
            var(--green-light);

    text-align: center;
}


.services-grid {
    display: grid;

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

    gap: 26px;
}


.service-card {
    padding:
            45px
            34px;

    border-radius:
            var(--radius-large);

    background:
            rgba(255, 255, 255, 0.75);

    border:
            1px solid
            rgba(195, 149, 56, 0.18);

    box-shadow:
            var(--shadow);

    text-align: left;

    transition:
            transform 0.3s ease;
}


.service-card:hover {
    transform:
            translateY(-6px);
}


.service-card.featured {
    background:
            var(--green-dark);

    color:
            var(--cream-light);
}


.service-card.featured h3 {
    color:
            var(--gold-light);
}


.service-icon {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
            1px solid
            var(--gold-light);

    color:
            var(--gold-dark);

    margin-bottom: 28px;
}


.featured .service-icon {
    color:
            var(--gold-light);
}


.service-card h3 {
    color:
            var(--gold-dark);

    margin-bottom: 18px;
}


.service-card p {
    margin-top: 15px;
}


/* =========================================================
   QUOTE
========================================================= */

.quote-section {
    padding:
            90px
            20px;

    background:
            var(--cream-light);
}


.quote-container {
    max-width: 850px;

    margin-inline: auto;

    text-align: center;
}


blockquote {
    font-size:
            clamp(
                    1.6rem,
                    3vw,
                    2.5rem
            );

    line-height: 1.45;

    color:
            var(--green-dark);

    font-style: italic;

    margin:
            30px
            0;
}


.quote-line {
    width: 80px;

    height: 1px;

    background:
            var(--gold);

    margin-inline: auto;
}


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

.about-section {
    padding:
            120px
            0;

    background:
            #f4f1e8;
}


.about-grid {
    display: grid;

    grid-template-columns:
    0.9fr
    1.1fr;

    gap: 90px;

    align-items: center;
}


.about-image {
    position: relative;
}


.image-placeholder {
    aspect-ratio:
            4 / 5;

    border-radius:
            160px
            160px
            30px
            30px;

    background:
            linear-gradient(
                    135deg,
                    #dfe5da,
                    #f6f3eb
            );

    display: flex;

    align-items: center;
    justify-content: center;

    color:
            var(--green-medium);

    position: relative;

    z-index: 2;
    overflow: hidden;
}


.gold-frame {
    border:
            1px solid
            var(--gold);

    border-radius:
            160px
            160px
            30px
            30px;

    top: 8%;
    left: 12%;
}


.about-content h2 {
    margin-bottom: 28px;
}


.about-content p {
    margin-top: 18px;
}


.text-link {
    display: inline-block;

    margin-top: 30px;

    color:
            var(--gold-dark);

    text-decoration: none;

    border-bottom:
            1px solid
            var(--gold-light);
}


/* =========================================================
   PROCESS
========================================================= */

.process-section {
    padding:
            110px
            0;

    background:
            var(--cream-light);

    text-align: center;
}


.process-grid {
    margin-top: 60px;

    display: grid;

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

    gap: 60px;
}


.process-number {
    width: 70px;
    height: 70px;

    margin:
            0 auto
            25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border:
            1px solid
            var(--gold);

    color:
            var(--gold-dark);

    font-size:
            1.4rem;
}


.process-item h3 {
    color:
            var(--green-dark);

    margin-bottom:
            14px;
}


.process-item p {
    color:
            var(--text-light);
}


/* =========================================================
   CTA
========================================================= */

.cta-section {
    padding:
            110px
            20px;

    background:
            linear-gradient(
                    135deg,
                    #2c3a30,
                    #445645
            );

    text-align: center;

    color:
            var(--cream-light);
}


.cta-content {
    width:
            min(
                    800px,
                    100%
            );

    margin-inline:
            auto;
}


.cta-section h2 {
    color:
            var(--cream-light);

    margin-bottom:
            24px;
}


.cta-section p {
    margin-bottom:
            30px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    padding:
            120px
            0;

    background:
            #f6f3eb;
}


.contact-grid {
    display: grid;

    grid-template-columns:
    0.9fr
    1.1fr;

    gap:
            80px;
}


.contact-info h2 {
    margin-bottom:
            25px;
}


.contact-details {
    margin-top:
            45px;

    display: grid;

    gap:
            25px;
}


.contact-details span {
    display: block;

    color:
            var(--gold-dark);

    text-transform:
            uppercase;

    letter-spacing:
            0.15em;

    font-size:
            0.75rem;

    margin-bottom:
            4px;
}


.contact-details a {
    text-decoration: none;

    color:
            var(--green-dark);
}


.contact-form {
    padding:
            40px;

    background:
            white;

    border-radius:
            var(--radius-large);

    box-shadow:
            var(--shadow);
}


.form-group {
    margin-bottom:
            24px;
}


.form-group label {
    display: block;

    margin-bottom:
            8px;

    color:
            var(--green-dark);
}


.form-group input,
.form-group textarea {
    width: 100%;

    border:
            1px solid
            #d7d9d2;

    border-radius:
            12px;

    padding:
            14px
            16px;

    background:
            #fdfcf8;

    outline:
            none;

    color:
            var(--text);
}


.form-group input:focus,
.form-group textarea:focus {
    border-color:
            var(--gold);
}


textarea {
    resize:
            vertical;
}


.privacy-check {
    display: flex;

    gap: 12px;

    font-size:
            0.85rem;

    color:
            var(--text-light);

    margin-bottom:
            25px;
}


.privacy-check input {
    margin-top:
            5px;
}


.form-button {
    width: 100%;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    background:
            #263229;

    color:
            #dfe5dc;
}


.footer-container {
    width:
            min(
                    1180px,
                    90%
            );

    margin-inline:
            auto;

    padding:
            60px
            0
            40px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap:
            40px;
}


.footer-brand {
    font-size:
            1.8rem;

    letter-spacing:
            0.1em;

    color:
            white;
}


.footer-brand span {
    color:
            var(--gold-light);
}


.footer-container p {
    margin-top:
            10px;

    color:
            #abb5aa;
}


.footer-links {
    display:
            flex;

    gap:
            25px;
}


.footer-links a {
    color:
            #dfe5dc;

    text-decoration:
            none;
}


.footer-bottom {
    border-top:
            1px solid
            rgba(255, 255, 255, 0.1);

    text-align:
            center;

    padding:
            22px;

    color:
            #8f998f;

    font-size:
            0.85rem;
}


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

@media (max-width: 950px) {

    .navigation {
        position: absolute;

        top: 82px;
        left: 0;

        width: 100%;

        padding:
                25px
                5%;

        background:
                var(--cream-light);

        flex-direction:
                column;

        gap:
                20px;

        display:
                none;

        border-bottom:
                1px solid
                rgba(195, 149, 56, 0.2);
    }


    .navigation.active {
        display:
                flex;
    }


    .menu-button {
        display:
                flex;
    }


    .services-grid,
    .process-grid {
        grid-template-columns:
      1fr;
    }


    .services-grid {
        max-width:
                650px;

        margin-inline:
                auto;
    }


    .about-grid,
    .contact-grid {
        grid-template-columns:
      1fr;

        gap:
                60px;
    }


    .about-image {
        max-width:
                480px;

        margin-inline:
                auto;
    }


    .contact-info {
        text-align:
                center;
    }


    .contact-details {
        justify-items:
                center;
    }

}


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

@media (max-width: 600px) {

    .nav-container {
        min-height:
                72px;
    }


    .navigation {
        top:
                72px;
    }


    .brand {
        font-size:
                1.35rem;
    }


    .hero {
        padding:
                125px
                6%
                75px;
    }


    .hero h1 {
        font-size:
                clamp(
                        2.7rem,
                        9vw,
                        4rem
                );
    }


    .hero-buttons {
        flex-direction:
                column;

        align-items:
                stretch;
    }


    .button {
        width: 100%;
    }


    .intro-section,
    .services-section,
    .about-section,
    .process-section,
    .contact-section {
        padding:
                80px
                0;
    }


    .service-card {
        padding:
                35px
                25px;
    }


    .contact-form {
        padding:
                28px
                20px;
    }


    .footer-container {
        flex-direction:
                column;

        align-items:
                flex-start;
    }


    .footer-links {
        flex-direction:
                column;

        gap:
                10px;
    }

}

/* =========================================================
   PREISE
========================================================= */

.prices-section {
    padding: 120px 0;

    background:
            radial-gradient(
                    circle at 50% 0%,
                    rgba(195, 149, 56, 0.10),
                    transparent 35%
            ),
            linear-gradient(
                    180deg,
                    #f9f6ee,
                    #eef1e9
            );

    text-align: center;
}


.price-grid {
    display: grid;

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

    gap: 25px;

    margin-top: 55px;

    align-items: stretch;
}


.price-card {
    position: relative;

    padding:
            45px
            32px
            38px;

    border-radius:
            30px;

    background:
            rgba(255, 253, 248, 0.92);

    border:
            1px solid
            rgba(195, 149, 56, 0.28);

    box-shadow:
            0 20px 50px
            rgba(47, 60, 49, 0.08);

    display: flex;

    flex-direction: column;

    align-items: center;

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
}


.price-card:hover {
    transform:
            translateY(-7px);

    box-shadow:
            0 25px 60px
            rgba(47, 60, 49, 0.14);
}


/* Mittlere Karte */

.price-card-featured {
    background:
            linear-gradient(
                    160deg,
                    #405241,
                    #2f3c31
            );

    color:
            #fffdf8;

    transform:
            translateY(-12px);
}


.price-card-featured:hover {
    transform:
            translateY(-18px);
}


.price-badge {
    position: absolute;

    top: -15px;

    padding:
            7px
            22px;

    border-radius:
            50px;

    background:
            linear-gradient(
                    135deg,
                    #a77b25,
                    #dbba72
            );

    color:
            white;

    font-size:
            0.75rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.14em;
}


/* Icon */

.price-icon {
    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border:
            1px solid
            var(--gold);

    color:
            var(--gold-dark);

    font-size:
            1.8rem;

    margin-bottom:
            25px;

    background:
            rgba(195, 149, 56, 0.06);
}


.price-card-featured .price-icon {
    color:
            var(--gold-light);

    border-color:
            var(--gold-light);
}


/* Überschrift */

.price-card h3 {
    color:
            var(--green-dark);

    font-size:
            1.55rem;

    line-height:
            1.25;

    min-height:
            60px;
}


.price-card-featured h3 {
    color:
            var(--cream-light);
}


.price-location {
    margin-top:
            8px;

    color:
            var(--text-light);

    font-style:
            italic;
}


.price-card-featured .price-location {
    color:
            #d8ded5;
}


/* Goldene Trennlinie */

.price-divider {
    width:
            100%;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    gap:
            12px;

    margin:
            25px 0;
}


.price-divider span {
    width:
            55px;

    height:
            1px;

    background:
            var(--gold-light);
}


.price-divider b {
    color:
            var(--gold);

    font-weight:
            400;
}


/* Preis */

.price {
    font-size:
            3.2rem;

    line-height:
            1;

    color:
            var(--green-dark);
}


.price-card-featured .price {
    color:
            var(--gold-light);
}


.price-duration {
    margin-top:
            8px;

    color:
            var(--gold-dark);
}


.price-card-featured .price-duration {
    color:
            var(--gold-light);
}


.price-description {
    margin:
            25px 0;

    color:
            var(--text-light);

    flex-grow: 1;
}


.price-card-featured .price-description {
    color:
            #e2e7df;
}


/* Preis-Button */

.price-button {
    width:
            100%;

    padding:
            13px
            20px;

    border-radius:
            100px;

    border:
            1px solid
            var(--gold);

    color:
            var(--gold-dark);

    text-decoration:
            none;

    transition:
            all 0.25s ease;
}


.price-button:hover {
    background:
            var(--gold);

    color:
            white;
}


.price-card-featured .price-button {
    background:
            var(--gold);

    color:
            white;
}


/* =========================================================
   KOSTENLOSES ERSTGESPRÄCH
========================================================= */

.first-talk {
    max-width:
            920px;

    margin:
            65px auto
            0;

    padding:
            28px
            35px;

    border-radius:
            28px;

    background:
            var(--green-dark);

    color:
            white;

    display:
            grid;

    grid-template-columns:
    auto 1fr auto;

    gap:
            25px;

    align-items:
            center;

    text-align:
            left;

    box-shadow:
            0 20px 50px
            rgba(47, 60, 49, 0.15);
}


.first-talk-heart {
    width:
            65px;

    height:
            65px;

    display:
            flex;

    align-items:
            center;
    justify-content:
            center;

    border:
            1px solid
            var(--gold-light);

    border-radius:
            50%;

    color:
            var(--gold-light);

    font-size:
            1.8rem;
}


.first-talk span {
    display:
            block;

    color:
            var(--gold-light);

    text-transform:
            uppercase;

    letter-spacing:
            0.12em;

    font-size:
            0.7rem;

    margin-bottom:
            3px;
}


.first-talk h3 {
    color:
            white;

    font-size:
            1.55rem;
}


.first-talk p {
    color:
            #d5ddd4;
}


.price-note {
    margin-top:
            45px;

    text-transform:
            uppercase;

    letter-spacing:
            0.2em;

    font-size:
            0.75rem;

    color:
            var(--green-medium);
}


/* =========================================================
   PREISE – SMARTPHONE
========================================================= */

@media (max-width: 900px) {

    .price-grid {
        grid-template-columns:
      1fr;

        max-width:
                600px;

        margin:
                50px auto 0;
    }


    .price-card-featured {
        transform:
                none;
    }


    .price-card-featured:hover {
        transform:
                translateY(-7px);
    }


    .first-talk {
        grid-template-columns:
      1fr;

        text-align:
                center;

        justify-items:
                center;

        max-width:
                600px;
    }

}


@media (max-width: 600px) {

    .prices-section {
        padding:
                80px 0;
    }


    .price-card {
        padding:
                38px 24px
                30px;
    }


    .price {
        font-size:
                2.8rem;
    }


    .first-talk {
        padding:
                30px 22px;
    }


    .first-talk .button {
        width:
                100%;
    }


    .price-note {
        line-height:
                1.8;
    }

}

/* =========================================================
   IMPRESSUM IM FOOTER
========================================================= */

.footer-legal {
    padding: 80px 0;

    background:
            linear-gradient(
                    180deg,
                    #314035,
                    #29362d
            );

    border-bottom:
            1px solid
            rgba(219, 186, 114, 0.18);
}


.footer-legal-container {
    width: min(1000px, 88%);
    margin-inline: auto;
}


.footer-legal h2 {
    color: var(--gold-light);

    font-size: clamp(
            2rem,
            4vw,
            3rem
    );

    margin-bottom: 40px;
}


.legal-grid {
    display: grid;

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

    gap: 50px;

    padding-bottom: 40px;

    margin-bottom: 40px;

    border-bottom:
            1px solid
            rgba(219, 186, 114, 0.18);
}


.footer-legal h3 {
    color: var(--gold-light);

    font-size: 1.15rem;

    margin-bottom: 12px;
}


.footer-legal p {
    color: #d9dfd8;

    font-size: 0.95rem;

    line-height: 1.8;
}


.footer-legal a {
    color: #f2e3bb;

    text-decoration: none;
}


.footer-legal a:hover {
    text-decoration: underline;
}


.legal-text {
    max-width: 850px;
}


.legal-text h3 {
    margin-top: 30px;
}


.legal-text h3:first-child {
    margin-top: 0;
}


/* SMARTPHONE */

@media (max-width: 700px) {

    .footer-legal {
        padding: 60px 0;
    }


    .legal-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

}