/* =====================================================
   IMMOBILIENCONCEPTS
   STYLE.CSS – TEIL 1
   Grundlayout · Typografie · Header
===================================================== */


/* =====================================================
   GRUNDWERTE
===================================================== */

:root {

    --green: #2e7d32;
    --green-dark: #256b2a;
    --green-soft: #f0f7f1;
    --green-bg: #f6faf7;

    --text: #18231c;
    --text-soft: #5f6b63;
    --muted: #758078;

    --line: #dfe8e1;

    --white: #ffffff;

}


/* =====================================================
   BASIS
===================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: #ffffff;
    color: var(--text);

    font-family: "Inter", Arial, sans-serif;
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}


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

.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.narrow {
    max-width: 850px;
}


/* =====================================================
   ALLGEMEINE TYPOGRAFIE
===================================================== */

h1,
h2,
h3,
h4 {
    color: var(--text);
}

h1,
h2,
h3 {
    font-family: "Poppins", "Inter", Arial, sans-serif;
}

p {
    margin-top: 0;
}

strong {
    color: #26332b;
}


/* =====================================================
   SECTION TAG
===================================================== */

.section-tag {
    display: inline-block;

    color: var(--green);

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.095em;

    text-transform: uppercase;
}


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

.section-header {
    max-width: 800px;
    margin: 0 auto 48px;

    text-align: center;
}

.section-header h2 {
    margin: 12px 0 15px;

    font-size: clamp(2rem, 3.8vw, 3.05rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.section-header p {
    margin: 0;

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


/* =====================================================
   BUTTONS – GRUNDFORM
===================================================== */

.btn-primary,
.btn-secondary,
.person-contact {

    display: inline-flex;

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

    gap: 9px;

    min-height: 48px;

    padding: 13px 21px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.btn-primary,
.person-contact {

    background: var(--green);
    color: #ffffff;

}

.btn-primary:hover,
.person-contact:hover {

    background: var(--green-dark);

    transform: translateY(-1px);

}

.btn-secondary {

    background: #ffffff;

    color: var(--green);

    border: 1px solid #cbdace;

}

.btn-secondary:hover {

    border-color: var(--green);

    background: var(--green-soft);

}


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

#header {

    position: sticky;

    top: 0;

    z-index: 2000;

    background: rgba(245, 248, 246, 0.96);

    border-bottom: 1px solid #e5ece7;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

}


#header .container {

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

}


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

.logo {

    color: #1c2630;

    font-size: 1.65rem;

    font-weight: 800;

    letter-spacing: -0.045em;

    text-decoration: none;

}

.logo span {
    color: var(--green);
}


/* =====================================================
   DESKTOP NAVIGATION
===================================================== */

#header nav ul {

    display: flex;

    align-items: center;

    gap: 28px;

    margin: 0;
    padding: 0;

    list-style: none;

}

#header nav a {

    color: #24302a;

    font-size: 0.92rem;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.2s ease;

}

#header nav a:hover {
    color: var(--green);
}


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

.button-nav {

    display: inline-flex;

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

    padding: 11px 21px;

    background: var(--green);

    color: #ffffff !important;

    border-radius: 999px;

}

.button-nav:hover {

    background: var(--green-dark) !important;

}


/* =====================================================
   MOBILE MENU – GRUNDFORM
===================================================== */

.mobile-menu {

    display: none;

    border: 0;

    background: transparent;

    color: #24302a;

    font-size: 1.2rem;

    cursor: pointer;

}


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

@media (max-width: 980px) {

    #header nav {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

}


/* =====================================================
   FOOTER – GRUNDFORM
===================================================== */

.site-footer {

    padding: 30px 0;

    background: #ffffff;

    border-top: 1px solid #e7ece8;

}

.footer-grid {

    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr
        auto;

    gap: 28px;

    align-items: start;

}

.site-footer strong {
    font-size: 0.9rem;
}

.site-footer p {

    margin: 5px 0 0;

    color: #7a847d;

    font-size: 0.8rem;

}

.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.footer-contact a,
.site-footer nav a {

    color: #69756d;

    font-size: 0.8rem;

    text-decoration: none;

}

.site-footer nav {

    display: flex;

    gap: 18px;

}


/* =====================================================
   RESPONSIVE – GRUNDLAYOUT
===================================================== */

@media (max-width: 700px) {

    .container {
        width: min(100% - 36px, 1180px);
    }

    .section-header {
        margin-bottom: 38px;
    }

    .section-header h2 {
        font-size: 2rem;
    }

}


@media (max-width: 520px) {

    .section-header h2 {
        font-size: 1.8rem;
    }

    .site-footer .container {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .footer-contact,
    .site-footer nav {

        align-items: center;

        justify-content: center;

    }

}
/* =====================================================
   STYLE.CSS – TEIL 2
   HERO + HEROKARTE
===================================================== */


/* =====================================================
   HERO – GRUNDBEREICH
===================================================== */

.hero {
    position: relative;

    padding: 58px 0 72px;

    background: #ffffff;

    overflow: hidden;
}


/* dezente Hintergrundfläche */

.hero::after {

    content: "";

    position: absolute;

    top: -240px;
    right: -240px;

    width: 520px;
    height: 520px;

    background: #eef7f0;

    border-radius: 50%;

    pointer-events: none;

}


.hero .container {

    position: relative;

    z-index: 1;

}


/* =====================================================
   HERO – FESTE DESKTOP-SPALTEN
===================================================== */

/*
   Ganz bewusst eine feste linke und rechte Spalte.

   Links:
   maximal 650 px

   Rechts:
   440 px

   Dadurch kann die Überschrift niemals
   unter die Herocard laufen.
*/

.hero-grid {

    display: grid;

    grid-template-columns:
        650px
        440px;

    gap: 48px;

    align-items: center;

    justify-content: space-between;

}


/* =====================================================
   HERO – LINKER BEREICH
===================================================== */

.hero-content {

    width: 650px;

    max-width: 650px;

    min-width: 0;

}


.hero-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

    color: var(--green);

    font-size: 0.77rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

}


/* =====================================================
   HERO – H1
===================================================== */

.hero-title {

    width: 650px;

    max-width: 650px;

    margin: 0 0 25px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size: 48px;

    line-height: 1.055;

    font-weight: 700;

    letter-spacing: -0.043em;

}


/*
   Jede Zeile bleibt eine eigene Zeile.

   white-space verhindert,
   dass die lange Überschrift
   unkontrolliert in die rechte Spalte läuft.
*/

.hero-title-line {

    display: block;

    width: 100%;

    max-width: 100%;

}


.hero-title-line.accent {

    color: var(--green);

}


/* =====================================================
   HERO – BESCHREIBUNG
===================================================== */

.hero-description {

    max-width: 610px;

    margin: 0 0 13px;

    color: var(--text-soft);

    font-size: 1.03rem;

    line-height: 1.72;

}


.hero-description strong {

    color: #26332b;

}


/* =====================================================
   HERO – BUTTONS
===================================================== */

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

}


/* =====================================================
   HERO – TRUST-ZEILE
===================================================== */

.hero-trust {

    display: flex;

    flex-wrap: wrap;

    gap: 16px 22px;

    margin-top: 24px;

}


.hero-trust span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #69756d;

    font-size: 0.8rem;

}





/* =====================================================
   HERO – PERSONENKARTE
===================================================== */

.hero-person {

    width: 440px;

    max-width: 440px;

    justify-self: end;

    padding: 30px;

    background: var(--white);

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

    border-radius: 25px;

    box-shadow:
        0 26px 70px rgba(25, 55, 35, 0.11);

    text-align: center;

}


/* =====================================================
   HERO – FOTO
===================================================== */

.person-image-wrap {

    width: 220px;

    height: 220px;

    margin: 0 auto 22px;

    overflow: hidden;

    border: 4px solid #ffffff;

    border-radius: 50%;

    box-shadow:
        0 10px 30px rgba(30, 70, 40, 0.17);

}


.person-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 25%;

}


/* =====================================================
   HERO – PERSONENINFO
===================================================== */

.person-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: var(--green);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.065em;

    text-transform: uppercase;

}


.person-info h2 {

    margin: 10px 0 4px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size: 1.75rem;

    line-height: 1.15;

}


.person-company {

    margin: 0 0 17px;

    color: var(--muted);

    font-size: 0.86rem;

}


.person-location {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-bottom: 16px;

    color: var(--green);

    font-size: 0.9rem;

    font-weight: 700;

}


/* =====================================================
   HERO – USP
===================================================== */

.hero-usp {

    margin: 18px 0;

    padding: 15px 17px;

    background: var(--green-soft);

    border-left: 4px solid var(--green);

    border-radius: 10px;

    text-align: left;

}


.hero-usp strong {

    display: block;

    color: var(--green);

    font-size: 1.18rem;

    line-height: 1.2;

    font-weight: 800;

}


.hero-usp span {

    display: block;

    margin-top: 4px;

    color: #56635a;

    font-size: 0.83rem;

}


/* =====================================================
   HERO – REGIONEN
===================================================== */

.person-regional {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 19px;

}


.person-regional span {

    padding: 6px 9px;

    background: #f1f8f2;

    border-radius: 999px;

    color: #35633b;

    font-size: 0.68rem;

    font-weight: 600;

}


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

.person-contact {

    width: 100%;

}


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

@media (max-width: 1160px) {

    .hero-grid {

        grid-template-columns:
            minmax(0, 1fr)
            400px;

        gap: 34px;

    }


    .hero-content {

        width: auto;

        max-width: 100%;

    }


    .hero-title {

        width: auto;

        max-width: 100%;

        font-size: 44px;

    }


    .hero-person {

        width: 400px;

        max-width: 400px;

    }

}


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

@media (max-width: 900px) {

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 44px;

    }


    .hero-content {

        width: 100%;

        max-width: 760px;

        margin: 0 auto;

        text-align: center;

    }


    .hero-title {

        width: 100%;

        max-width: 760px;

        margin-left: auto;

        margin-right: auto;

        font-size: 46px;

    }


    .hero-title-line {

        max-width: 100%;

        white-space: normal;

    }


    .hero-description {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-actions,
    .hero-trust {

        justify-content: center;

    }


    .hero-person {

        width: 100%;

        max-width: 440px;

        margin: 0 auto;

    }

}


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

@media (max-width: 700px) {

    .hero {

        padding: 65px 0 72px;

    }


    .hero-grid {

        gap: 42px;

    }


    .hero-title {

        font-size: 42px;

        line-height: 1.07;

        letter-spacing: -0.035em;

    }


    .hero-description {

        font-size: 0.96rem;

    }


    .person-image-wrap {

        width: 200px;

        height: 200px;

    }


    .hero-person {

        padding: 28px 22px;

    }

}


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

@media (max-width: 520px) {

    .hero-title {

        font-size: 34px;

        line-height: 1.08;

    }


    .person-image-wrap {

        width: 180px;

        height: 180px;

    }


    .hero-person {

        padding: 26px 20px;

    }

}
/* =====================================================
   STYLE.CSS – TEIL 3
   Regionale Leiste · Leistungen · USP
===================================================== */


/* =====================================================
   REGIONALE LEISTE
===================================================== */

.trust-bar {

    background: var(--green-bg);

    border-top: 1px solid #e9f0eb;
    border-bottom: 1px solid #e9f0eb;

}


.trust-bar .container {

    display: grid;

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

}


.trust-bar .container > div {

    display: flex;

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

    gap: 8px;

    min-height: 68px;

    color: #56635a;

    font-size: 0.82rem;
    font-weight: 600;

}


.trust-bar i {

    color: var(--green);

}


/* =====================================================
   LEISTUNGEN
===================================================== */

.services {

    padding: 88px 0;

    background: #ffffff;

}


.service-grid {

    display: grid;

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

    gap: 20px;

}


/* Leistungskarte */

.service-card {

    padding: 28px;

    background: #ffffff;

    border: 1px solid #e3ebe5;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(25, 55, 35, 0.045);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

}


.service-card:hover {

    transform: translateY(-3px);

    border-color: #d4e2d7;

    box-shadow:
        0 15px 35px rgba(25, 55, 35, 0.07);

}


/* Icon */

.service-card .icon {

    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 17px;

    background: var(--green-soft);

    color: var(--green);

    border-radius: 12px;

    font-size: 1.05rem;

}


.service-card h3 {

    margin: 0 0 9px;

    color: var(--text);

    font-size: 1.02rem;

}


.service-card p {

    margin: 0;

    color: var(--text-soft);

    font-size: 0.9rem;

    line-height: 1.6;

}


/* =====================================================
   AB 1 WOHNEINHEIT
===================================================== */

.about {

    padding: 88px 0;

    background: #ffffff;

}


.about-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.92fr);

    gap: 65px;

    align-items: center;

}


.about-content {

    max-width: 700px;

}


.about-content h2 {

    margin: 12px 0 20px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size:
        clamp(2.05rem, 3.7vw, 2.95rem);

    line-height: 1.11;

    letter-spacing: -0.04em;

}


.about-content p {

    margin: 0 0 13px;

    color: var(--text-soft);

    line-height: 1.7;

}


.about-content strong {

    color: #26332b;

}


/* =====================================================
   VORTEILSLISTE
===================================================== */

.about-list {

    margin: 23px 0 0;

    padding: 0;

    list-style: none;

}


.about-list li {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-bottom: 10px;

    color: #445148;

    font-size: 0.9rem;

}


.about-list i {

    flex-shrink: 0;

    margin-top: 3px;

    color: var(--green);

}


/* =====================================================
   RECHTE USP-KARTE
===================================================== */

.about-image {

    display: flex;

    justify-content: flex-end;

}


.about-image .hero-card {

    width: min(460px, 100%);

}


/* =====================================================
   USP-KARTE
===================================================== */

.hero-card {

    width: min(460px, 100%);

    padding: 30px;

    background: #f7faf8;

    border: 1px solid #e0e9e2;

    border-radius: 22px;

}


.hero-card h3 {

    margin: 0 0 10px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size: 1.55rem;

    line-height: 1.18;

}


.hero-card > p {

    margin: 0;

    color: var(--text-soft);

    line-height: 1.65;

}


/* =====================================================
   OBJEKTGRÖSSEN-BOX
===================================================== */

.price-box {

    margin-top: 23px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e1e9e3;

    border-radius: 15px;

}


.object-size-box {

    box-shadow:
        0 8px 22px rgba(25, 55, 35, 0.04);

}


.object-size-label {

    display: block;

    color: #6b776e;

    font-size: 0.71rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.object-size-number {

    display: block;

    margin-top: 5px;

    color: var(--green);

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size: 2.6rem;

    line-height: 1;

}


.object-size-unit {

    display: block;

    margin-top: 4px;

    color: #354239;

    font-weight: 600;

}


.object-size-note {

    display: block;

    margin-top: 13px;

    padding-top: 13px;

    border-top: 1px solid #e8eee9;

    color: #68746c;

    font-size: 0.8rem;

    line-height: 1.5;

}


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

@media (max-width: 980px) {

    .trust-bar .container {

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

    }


    .service-grid {

        grid-template-columns: 1fr;

    }


    .about-grid {

        grid-template-columns: 1fr;

        gap: 42px;

    }


    .about-content {

        max-width: 780px;

    }


    .about-image {

        justify-content: center;

    }

}


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

@media (max-width: 700px) {

    .trust-bar .container {

        grid-template-columns: 1fr;

    }


    .trust-bar .container > div {

        min-height: 54px;

    }


    .services,
    .about {

        padding: 70px 0;

    }


    .service-card {

        padding: 24px;

    }


    .about-content h2 {

        font-size: 2.1rem;

    }


    .hero-card {

        padding: 26px 22px;

        border-radius: 20px;

    }

}


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

@media (max-width: 520px) {

    .about-content h2 {

        font-size: 1.9rem;

    }


    .object-size-number {

        font-size: 2.4rem;

    }

}
/* =====================================================
   STYLE.CSS – TEIL 4
   Vita · Staffelpreise
===================================================== */


/* =====================================================
   VITA / VERTRAUEN
===================================================== */

.experience {

    padding: 78px 0;

    background: var(--green-bg);

}


.experience-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.92fr);

    gap: 56px;

    align-items: center;

}


.experience-content {

    max-width: 720px;

}


.experience-content h2 {

    margin: 12px 0 20px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size:
        clamp(2rem, 3.3vw, 2.75rem);

    line-height: 1.12;

    letter-spacing: -0.035em;

}


.experience-content p {

    margin: 0 0 12px;

    color: var(--text-soft);

    font-size: 0.98rem;

    line-height: 1.68;

}


.experience-content strong {

    color: #26332b;

}


/* =====================================================
   VITA – KENNZAHLEN
===================================================== */

.experience-highlights {

    display: grid;

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

    gap: 12px;

}


.experience-highlight {

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e1e9e3;

    border-radius: 15px;

    box-shadow:
        0 8px 22px rgba(25, 55, 35, 0.04);

}


.experience-highlight-wide {

    grid-column: 1 / -1;

}


.experience-highlight strong {

    display: block;

    margin-bottom: 4px;

    color: var(--green);

    font-size: 1.12rem;

    line-height: 1.2;

}


.experience-highlight span {

    color: #68746c;

    font-size: 0.8rem;

    line-height: 1.45;

}


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

.pricing {

    padding: 90px 0;

    background: #ffffff;

}


.pricing-grid {

    display: grid;

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

    gap: 20px;

}


/* =====================================================
   PREIS-KARTEN
===================================================== */

.pricing-card {

    position: relative;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e0e8e2;

    border-radius: 20px;

    box-shadow:
        0 8px 24px rgba(25, 55, 35, 0.025);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

}


.pricing-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 16px 34px rgba(25, 55, 35, 0.07);

}


/* =====================================================
   HIGHLIGHTED PREISKARTE
===================================================== */

.pricing-card.featured {

    border: 2px solid var(--green);

    box-shadow:
        0 18px 45px rgba(35, 85, 45, 0.09);

}


/* =====================================================
   BELIEBTE STAFFEL
===================================================== */

.popular-badge {

    position: absolute;

    top: 17px;
    right: 17px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--green);

    font-size: 0.7rem;

    font-weight: 800;

}


.popular-badge i {

    font-size: 0.67rem;

}


/* =====================================================
   PREISBEREICH
===================================================== */

.pricing-range {

    display: block;

    color: var(--green);

    font-size: 0.82rem;

    font-weight: 800;

}


/* =====================================================
   PREIS
===================================================== */

.pricing-card h3 {

    margin: 14px 0 0;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    color: var(--text);

    font-size: 2.9rem;

    line-height: 1;

    letter-spacing: -0.045em;

}


.price-unit {

    margin-top: 5px;

    color: #77827b;

    font-size: 0.82rem;

}


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

.pricing-card > p {

    min-height: 70px;

    margin: 17px 0 0;

    color: var(--text-soft);

    font-size: 0.88rem;

    line-height: 1.6;

}


/* =====================================================
   PREIS-LEISTUNGEN
===================================================== */

.pricing-card ul {

    margin: 22px 0;

    padding: 0;

    list-style: none;

}


.pricing-card li {

    display: flex;

    gap: 8px;

    margin-bottom: 9px;

    color: #4f5b53;

    font-size: 0.85rem;

    line-height: 1.45;

}


.pricing-card li i {

    flex-shrink: 0;

    margin-top: 3px;

    color: var(--green);

}


/* =====================================================
   PREIS-BUTTON
===================================================== */

.pricing-card .btn-primary {

    width: 100%;

}


/* =====================================================
   PREISBEISPIEL
===================================================== */

.pricing-note {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-top: 25px;

    padding: 22px 24px;

    background: var(--green-bg);

    border: 1px solid #e0e9e2;

    border-radius: 16px;

}


.pricing-note > i {

    flex-shrink: 0;

    margin-top: 3px;

    color: var(--green);

}


.pricing-note strong {

    color: #26332b;

}


.pricing-note p {

    margin: 5px 0 0;

    color: #667269;

    font-size: 0.88rem;

    line-height: 1.55;

}


/* =====================================================
   GRÖSSERE OBJEKTE
===================================================== */

.pricing-extra {

    margin-top: 25px;

    padding: 28px 24px;

    background: #f8fbf8;

    border: 1px solid #e0e9e2;

    border-radius: 16px;

    text-align: center;

}


.pricing-extra h3 {

    margin: 9px 0 0;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size: 1.35rem;

}


.pricing-extra p {

    max-width: 680px;

    margin: 8px auto 0;

    color: #667269;

    font-size: 0.88rem;

    line-height: 1.6;

}


.pricing-extra .btn-primary {

    margin-top: 17px;

}


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

@media (max-width: 980px) {

    .experience-grid {

        grid-template-columns: 1fr;

        gap: 38px;

    }


    .experience-content {

        max-width: 780px;

    }


    .pricing-grid {

        grid-template-columns: 1fr;

    }


    .pricing-card > p {

        min-height: 0;

    }

}


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

@media (max-width: 700px) {

    .experience {

        padding: 70px 0;

    }


    .pricing {

        padding: 70px 0;

    }


    .experience-highlights {

        grid-template-columns: 1fr;

    }


    .experience-highlight-wide {

        grid-column: auto;

    }


    .pricing-card {

        padding: 26px 22px;

    }


    .pricing-card h3 {

        font-size: 2.65rem;

    }


    .pricing-note {

        padding: 19px;

    }


    .pricing-extra {

        padding: 23px 19px;

    }

}
/* =====================================================
   STYLE.CSS – TEIL 5
   Ablauf · Region · FAQ
===================================================== */


/* =====================================================
   ABLAUF
===================================================== */

.process {

    padding: 82px 0;

    background: var(--green-bg);

}


.timeline {

    max-width: 800px;

    margin: 0 auto;

}


/* einzelner Schritt */

.timeline-item {

    display: grid;

    grid-template-columns: 44px 1fr;

    gap: 16px;

    margin-bottom: 24px;

}


.timeline-number {

    width: 40px;
    height: 40px;

    display: flex;

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

    background: var(--green);

    color: #ffffff;

    border-radius: 50%;

    font-size: 0.9rem;

    font-weight: 800;

}


/* Inhalt */

.timeline-content h3 {

    margin: 5px 0 4px;

    color: var(--text);

    font-size: 1rem;

}


.timeline-content p {

    margin: 0;

    color: var(--text-soft);

    font-size: 0.88rem;

    line-height: 1.6;

}


/* =====================================================
   REGION
===================================================== */

.compact-region {

    padding: 72px 0;

    background: #ffffff;

}


.compact-region .section-header {

    max-width: 820px;

}


.compact-region .section-header p {

    max-width: 760px;

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

    line-height: 1.7;

}


.compact-region .btn-secondary {

    margin-top: 22px;

}


/* =====================================================
   FAQ
===================================================== */

.faq {

    padding: 78px 0;

    background: var(--green-bg);

}


.faq-list {

    max-width: 850px;

    margin: 0 auto;

}


/* einzelne Frage */

.faq-list details {

    background: #ffffff;

    border: 1px solid #e0e8e2;

    border-radius: 14px;

}


.faq-list details + details {

    margin-top: 10px;

}


/* Frage */

.faq-list summary {

    position: relative;

    padding: 18px 48px 18px 20px;

    cursor: pointer;

    color: #26332b;

    font-size: 0.95rem;

    font-weight: 700;

    list-style: none;

}


/* Standard-Pfeil entfernen */

.faq-list summary::-webkit-details-marker {

    display: none;

}


/* eigener Pfeil */

.faq-list summary::after {

    content: "+";

    position: absolute;

    top: 50%;
    right: 20px;

    transform: translateY(-50%);

    color: var(--green);

    font-size: 1.2rem;

    font-weight: 500;

}


/* geöffnete Frage */

.faq-list details[open] summary::after {

    content: "–";

}


/* Antwort */

.faq-list p {

    margin: 0;

    padding: 0 20px 19px;

    color: var(--text-soft);

    font-size: 0.9rem;

    line-height: 1.65;

}


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

@media (max-width: 700px) {

    .process {

        padding: 70px 0;

    }


    .compact-region {

        padding: 62px 0;

    }


    .faq {

        padding: 65px 0;

    }


    .timeline-item {

        grid-template-columns: 38px 1fr;

        gap: 12px;

        margin-bottom: 20px;

    }


    .timeline-number {

        width: 36px;
        height: 36px;

        font-size: 0.82rem;

    }


    .timeline-content h3 {

        margin-top: 3px;

    }


    .faq-list summary {

        padding:
            16px 44px 16px 17px;

        font-size: 0.9rem;

    }


    .faq-list p {

        padding:
            0 17px 17px;

        font-size: 0.86rem;

    }

}
/* =====================================================
   STYLE.CSS – TEIL 6
   Premium-Anfrage · Footer · finale Responsive-Regeln
===================================================== */


/* =====================================================
   PREMIUM ANFRAGEBEREICH
===================================================== */

.contact-section {

    position: relative;

    padding: 105px 0 115px;

    background: #f5f9f6;

    overflow: hidden;

}


/* =====================================================
   ANFRAGE – ZWEI KLARE SPALTEN
===================================================== */

.contact-grid {

    display: grid;

    grid-template-columns:
        610px
        500px;

    gap: 50px;

    align-items: center;

    justify-content: space-between;

}


.contact-content {

    width: 610px;

    max-width: 610px;

    min-width: 0;

}


/* =====================================================
   LINKE SEITE
===================================================== */

.contact-content h2 {

    width: 560px;

    max-width: 560px;

    margin: 12px 0 24px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size: 46px;

    line-height: 1.08;

    letter-spacing: -0.04em;

}


.contact-content h2 span {

    color: var(--green);

}


.contact-lead {

    max-width: 575px;

    margin: 0 0 17px;

    color: var(--green) !important;

    font-size: 1.12rem;

    font-weight: 700;

    line-height: 1.6;

}


.contact-copy {

    max-width: 570px;

    margin: 0;

    color: var(--text-soft);

    font-size: 1rem;

    line-height: 1.7;

}


/* =====================================================
   KONTAKT-VORTEILE
===================================================== */

.contact-points {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 27px;

}


.contact-points div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #425047;

    font-size: 0.9rem;

}


.contact-points i {

    flex-shrink: 0;

    color: var(--green);

}


/* =====================================================
   KONTAKT – REGION
===================================================== */

.contact-region {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    max-width: 590px;

    margin-top: 27px;

    padding: 16px 18px;

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

    border: 1px solid #dfe8e1;

    border-radius: 13px;

    color: #68746c;

    font-size: 0.84rem;

    line-height: 1.5;

}


.contact-region i {

    flex-shrink: 0;

    margin-top: 3px;

    color: var(--green);

}


/* =====================================================
   PREMIUM ANFRAGEKARTE
===================================================== */

.premium-contact-card {

    position: relative;

    width: 500px;

    max-width: 500px;

    padding: 58px 34px 30px;

    background: #ffffff;

    border: 1px solid #dfe8e1;

    border-radius: 26px;

    box-shadow:
        0 28px 75px rgba(25, 55, 35, 0.11);

}


/* =====================================================
   ICON ÜBER DER KARTE
===================================================== */

.contact-card-icon {

    position: absolute;

    top: -26px;

    left: 50%;

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateX(-50%);

    background: var(--green);

    color: #ffffff;

    border: 5px solid #f5f9f6;

    border-radius: 50%;

    box-shadow:
        0 8px 22px rgba(46, 125, 50, 0.18);

}


/* =====================================================
   KARTENKOPF
===================================================== */

.contact-card-top {

    padding-bottom: 21px;

    border-bottom: 1px solid #e5ece7;

    text-align: center;

}


.contact-card-top > span {

    display: block;

    margin-bottom: 5px;

    color: var(--green);

    font-size: 0.74rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

}


.contact-card-top h3 {

    margin: 0;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    color: var(--text);

    font-size: 1.85rem;

    line-height: 1.15;

}


.contact-card-top p {

    margin: 7px 0 0;

    color: #68746c;

    font-size: 0.88rem;

}


/* =====================================================
   FORMULAR
===================================================== */

#request-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 24px;

}


/* einzelne Eingabegruppe */

.premium-form-group {

    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr);

    gap: 13px;

    align-items: start;

}


/* Icon */

.form-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--green-soft);

    color: var(--green);

    border-radius: 13px;

    font-size: 1rem;

}


/* Feldbereich */

.form-field {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.form-field label {

    color: #243129;

    font-size: 0.84rem;

    font-weight: 700;

}


.form-field label span {

    color: #8a948d;

    font-weight: 500;

}


/* Eingaben */

.form-field select,
.form-field input,
.form-field textarea {

    width: 100%;

    padding: 13px 14px;

    background: #ffffff;

    border: 1px solid #d4dfd7;

    border-radius: 10px;

    color: #26332b;

    font-size: 0.9rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.form-field select,
.form-field input {

    min-height: 50px;

}


.form-field textarea {

    min-height: 112px;

    resize: vertical;

}


/* Fokus */

.form-field select:focus,
.form-field input:focus,
.form-field textarea:focus {

    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(46, 125, 50, 0.10);

}


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

.premium-submit {

    display: grid;

    grid-template-columns:
        22px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 11px;

    width: 100%;

    min-height: 60px;

    margin-top: 1px;

    padding: 15px 17px;

    background: var(--green);

    color: #ffffff;

    border: 0;

    border-radius: 11px;

    font-size: 0.94rem;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 28px rgba(46, 125, 50, 0.18);

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

}


.premium-submit:hover {

    background: var(--green-dark);

    transform: translateY(-1px);

    box-shadow:
        0 16px 32px rgba(46, 125, 50, 0.23);

}


.premium-submit span {

    text-align: left;

}


/* =====================================================
   VERTRAUENSHINWEIS
===================================================== */

.premium-assurance {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 13px;

    padding: 13px 15px;

    background: #f5f9f6;

    border-radius: 11px;

    color: #68746c;

    font-size: 0.73rem;

    line-height: 1.45;

}


.premium-assurance i {

    flex-shrink: 0;

    margin-top: 2px;

    color: var(--green);

}


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

.site-footer {

    padding: 30px 0;

    background: #ffffff;

    border-top: 1px solid #e7ece8;

}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr
        auto;

    gap: 28px;

    align-items: start;

}


.site-footer strong {

    font-size: 0.9rem;

}


.site-footer p {

    margin: 5px 0 0;

    color: #7a847d;

    font-size: 0.8rem;

}


.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.footer-contact a,
.site-footer nav a {

    color: #69756d;

    font-size: 0.8rem;

    text-decoration: none;

}


.footer-contact a:hover,
.site-footer nav a:hover {

    color: var(--green);

}


.site-footer nav {

    display: flex;

    gap: 18px;

}


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

@media (max-width: 1160px) {

    .contact-grid {

        grid-template-columns:
            minmax(0, 1fr)
            460px;

        gap: 34px;

    }


    .contact-content {

        width: auto;

        max-width: 560px;

    }


    .contact-content h2 {

        width: auto;

        max-width: 520px;

        font-size: 42px;

    }


    .premium-contact-card {

        width: 460px;

        max-width: 460px;

    }

}


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

@media (max-width: 980px) {

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .contact-content {

        width: 100%;

        max-width: 760px;

    }


    .contact-content h2 {

        width: auto;

        max-width: 760px;

    }


    .premium-contact-card {

        width: 100%;

        max-width: 560px;

        margin: 0 auto;

    }


    .footer-grid {

        grid-template-columns:
            1fr
            1fr;

    }

}


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

@media (max-width: 700px) {

    .contact-section {

        padding: 75px 0 85px;

    }


    .contact-content h2 {

        font-size: 38px;

    }


    .premium-contact-card {

        padding: 52px 22px 24px;

        border-radius: 21px;

    }


    .premium-form-group {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .form-icon {

        width: 44px;

        height: 44px;

    }


    .premium-submit {

        min-height: 56px;

        font-size: 0.9rem;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .footer-contact,
    .site-footer nav {

        align-items: center;

        justify-content: center;

    }

}


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

@media (max-width: 520px) {

    .contact-content h2 {

        font-size: 32px;

    }


    .premium-contact-card {

        padding:
            50px
            20px
            22px;

    }


    .premium-submit {

        grid-template-columns:
            20px
            minmax(0, 1fr)
            16px;

        gap: 9px;

    }

}
@media (max-width: 980px) {

    #header nav.is-open {
        display: block;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        z-index: 1000;

        padding: 18px 20px;

        background: #ffffff;
        border-bottom: 1px solid #e5ece7;
        box-shadow: 0 12px 30px rgba(25, 55, 35, 0.08);
    }

    #header nav.is-open ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    #header nav.is-open a {
        display: block;
        padding: 10px 4px;
    }

    #header nav.is-open .button-nav {
        text-align: center;
    }

}
/* =====================================================
   NAVIGATION – AKTUELLE SEITE
===================================================== */

#header nav a.is-active:not(.button-nav) {
    color: var(--green);
    font-weight: 800;
}

#header nav a.is-active:not(.button-nav)::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    margin: 5px auto 0;
    background: var(--green);
    border-radius: 999px;
}


/* Aktive Anfrage */

#header nav a.button-nav.is-active {
    background: var(--green-dark);
    box-shadow:
        0 7px 18px rgba(46, 125, 50, 0.18);
}


/* Mobile Navigation */

@media (max-width: 980px) {

    #header nav.is-open {
        display: block;
        position: absolute;

        top: 72px;
        left: 0;
        right: 0;

        z-index: 1000;

        padding: 18px 20px;

        background: #ffffff;

        border-bottom: 1px solid #e5ece7;

        box-shadow:
            0 12px 30px rgba(25, 55, 35, 0.08);
    }


    #header nav.is-open ul {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 6px;

    }


    #header nav.is-open a {

        display: block;

        padding: 11px 6px;

    }


    #header nav.is-open a.is-active:not(.button-nav) {

        padding-left: 10px;

        background: var(--green-soft);

        border-radius: 8px;

    }


    #header nav.is-open a.is-active:not(.button-nav)::after {

        display: none;

    }


    #header nav.is-open .button-nav {

        margin-top: 5px;

        text-align: center;

    }

}
/* =====================================================
   ANKER-ABSTAND BEI DER NAVIGATION
===================================================== */

section[id] {

    scroll-margin-top: 90px;

}
/* =====================================================
   BENÖTIGTE UNTERLAGEN
===================================================== */

.documents-section {
    background: #ffffff;
}

.documents-section .two-column {
    align-items: center;
}

.documents-section .highlight-card {
    width: 100%;
    max-width: 520px;
    justify-self: end;
    background: var(--green-bg);
}

.documents-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e2ebe4;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.55;
}

@media (max-width: 980px) {

    .documents-section .highlight-card {
        max-width: 100%;
        justify-self: stretch;
    }

}
/* =====================================================
   STYLE.CSS – TEIL 7
   Unterseiten · Inhalte · Karten · CTA
===================================================== */


/* =====================================================
   SEITEN-HEADER
===================================================== */

.page-hero {

    padding: 62px 0 58px;

    background: var(--green-bg);

    border-bottom: 1px solid #e7eee9;

}


.page-hero h1 {

    margin: 12px 0 16px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size:
        clamp(2.3rem, 4.2vw, 3.65rem);

    line-height: 1.07;

    letter-spacing: -0.045em;

}


.page-hero p {

    max-width: 720px;

    margin: 0 0 26px;

    color: var(--text-soft);

    font-size: 1.06rem;

    line-height: 1.7;

}


/* =====================================================
   ALLGEMEINE INHALTSBEREICHE
===================================================== */

.content-section {

    padding: 82px 0;

    background: #ffffff;

}


.content-section.light {

    background: var(--green-bg);

}


/* =====================================================
   ZWEI-SPALTEN-LAYOUT
===================================================== */

.two-column {

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.92fr);

    gap: 60px;

    align-items: center;

}


.two-column > div {

    min-width: 0;

}


/* Überschriften */

.content-section h2 {

    margin: 12px 0 20px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    font-size:
        clamp(2rem, 3.3vw, 2.75rem);

    line-height: 1.12;

    letter-spacing: -0.035em;

}


.content-section p {

    color: var(--text-soft);

    line-height: 1.7;

}


.content-section h2 + p {

    margin-top: 0;

}


/* =====================================================
   HIGHLIGHT-KARTE
===================================================== */

.highlight-card {

    width: 100%;

    padding: 28px;

    background: #f8fbf8;

    border: 1px solid #e0e9e2;

    border-radius: 20px;

    box-shadow:
        0 12px 30px rgba(25, 55, 35, 0.045);

}


.highlight-card > strong {

    display: block;

    margin-bottom: 17px;

    color: var(--text);

    font-size: 1.05rem;

}


.highlight-card .about-list {

    margin-top: 0;

}


/* =====================================================
   DREI / FÜNF KARTEN
===================================================== */

.simple-grid {

    display: grid;

    gap: 18px;

}


.simple-grid.three {

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

}


.simple-grid.five {

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

}


/* =====================================================
   MINI-KARTEN
===================================================== */

.mini-card {

    padding: 26px;

    background: #ffffff;

    border: 1px solid #e1e9e3;

    border-radius: 17px;

    box-shadow:
        0 8px 24px rgba(25, 55, 35, 0.035);

}


.mini-card strong {

    display: block;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.03em;

}


.mini-card h3 {

    margin: 0 0 8px;

    font-size: 1.05rem;

}


.mini-card p {

    margin: 0;

    color: var(--text-soft);

    font-size: 0.88rem;

    line-height: 1.6;

}


/* =====================================================
   REGION-KARTEN
===================================================== */

.location-card {

    min-height: 96px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e1e9e3;

    border-radius: 16px;

    color: #2e3a32;

    font-size: 0.88rem;

    font-weight: 700;

    text-align: center;

    box-shadow:
        0 7px 20px rgba(25, 55, 35, 0.03);

}


/* =====================================================
   PROFILFOTO
===================================================== */

.profile-layout {

    align-items: center;

}


.profile-photo {

    width: min(520px, 100%);

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 24px;

    box-shadow:
        0 20px 50px rgba(25, 55, 35, 0.10);

}


/* =====================================================
   CTA-BEREICH
===================================================== */

.cta-section {

    padding: 0 0 88px;

}


.cta {

    padding: 58px 30px;

    background: var(--green-bg);

    border: 1px solid #e0e9e2;

    border-radius: 24px;

    text-align: center;

}


.cta h2 {

    margin: 10px auto 14px;

    max-width: 780px;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

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

    line-height: 1.1;

    letter-spacing: -0.04em;

}


.cta p {

    max-width: 650px;

    margin: 0 auto 22px;

    color: var(--text-soft);

}


/* =====================================================
   TEXTSEITEN
===================================================== */

.text-page {

    max-width: 820px;

}


.text-page h2 {

    margin-top: 34px;

}


.text-page h2:first-child {

    margin-top: 0;

}


.text-page a {

    color: var(--green);

    font-weight: 600;

    text-decoration: none;

}


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

@media (max-width: 980px) {

    .two-column {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .simple-grid.three {

        grid-template-columns: 1fr;

    }


    .simple-grid.five {

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

    }


    .highlight-card {

        max-width: none;

    }

}


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

@media (max-width: 700px) {

    .page-hero {

        padding: 62px 0 55px;

    }


    .page-hero h1 {

        font-size: 2.15rem;

    }


    .page-hero p {

        font-size: 0.96rem;

    }


    .content-section {

        padding: 68px 0;

    }


    .content-section h2 {

        font-size: 2rem;

    }


    .simple-grid.five {

        grid-template-columns: 1fr;

    }


    .mini-card {

        padding: 23px;

    }


    .highlight-card {

        padding: 24px;

    }


    .profile-photo {

        max-width: 420px;

        margin-inline: auto;

    }


    .cta-section {

        padding-bottom: 70px;

    }


    .cta {

        padding: 45px 22px;

        border-radius: 20px;

    }

}
/* =====================================================
   VERTRAUENSEINSTIEG
===================================================== */

.trust-intro {
    max-width: 720px;
    margin: 0 0 14px;

    color: #39463e;

    font-size: 1rem;
    line-height: 1.7;
}

.trust-intro strong {
    color: var(--text);
}
/* =====================================================
   PREMIUM-ANFRAGE – FINALER LOOK
===================================================== */


/* =====================================================
   LINKER TEXTBEREICH
===================================================== */

.contact-content h2 {

    max-width: 620px;

    margin: 12px 0 25px;

    font-size: clamp(2.45rem, 4vw, 3.35rem);

    line-height: 1.08;

    letter-spacing: -0.045em;

}


.contact-content h2 span {

    color: var(--green);

}


.contact-lead {

    max-width: 560px;

    color: #36433b !important;

    font-size: 1.05rem;

    line-height: 1.65;

}


.contact-lead strong {

    display: inline;

    color: var(--text);

}


/* =====================================================
   VERTRAUENSPUNKTE
===================================================== */

.contact-points {

    margin-top: 30px;

    gap: 16px;

}


.contact-points div {

    align-items: center;

    gap: 12px;

    font-size: 0.95rem;

    color: #36433b;

}


.contact-points i {

    width: 27px;
    height: 27px;

    display: flex;

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

    flex-shrink: 0;

    background: #e8f3e9;

    color: var(--green);

    border-radius: 50%;

    font-size: 0.76rem;

}


/* =====================================================
   REGIONALE BOX
===================================================== */

.contact-region {

    max-width: 560px;

    margin-top: 30px;

    padding: 18px 20px;

    background: #edf7ee;

    border: 1px solid #d9e9db;

    border-radius: 17px;

}


.contact-region i {

    width: 36px;
    height: 36px;

    display: flex;

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

    margin-top: 0;

    background: var(--green);

    color: #ffffff;

    border-radius: 50%;

}


.contact-region > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.contact-region strong {

    color: var(--text);

    font-size: 0.88rem;

}


.contact-region span {

    color: #536158;

    font-size: 0.82rem;

    line-height: 1.55;

}


.contact-nationwide {

    margin: 13px 0 0;

    color: #4f5c54;

    font-size: 0.88rem;

}


/* =====================================================
   PREMIUM-KARTE
===================================================== */

.premium-contact-card {

    width: 500px;

    max-width: 500px;

    padding: 48px 34px 30px;

    border-radius: 25px;

    background: #ffffff;

    border: 1px solid #dfe8e1;

    box-shadow:
        0 28px 75px rgba(25, 55, 35, 0.11);

}


/* =====================================================
   ICON ÜBER DER KARTE
===================================================== */

.contact-card-icon {

    width: 54px;
    height: 54px;

    background: var(--green);

    border: 5px solid #f5f9f6;

    box-shadow:
        0 8px 22px rgba(46, 125, 50, 0.18);

}


/* =====================================================
   KARTENKOPF
===================================================== */

.contact-card-top {

    padding-bottom: 24px;

}


.contact-card-top h3 {

    max-width: 410px;

    margin-inline: auto;

    font-size: 1.8rem;

    line-height: 1.18;

    letter-spacing: -0.025em;

}


/* =====================================================
   FORMULAR ABSTÄNDE
===================================================== */

#request-form {

    gap: 21px;

}


.premium-form-group {

    grid-template-columns: 54px minmax(0, 1fr);

    gap: 13px;

}


/* =====================================================
   INPUTS
===================================================== */

.form-field select,
.form-field input,
.form-field textarea {

    background: #ffffff;

    border-color: #ccd8cf;

}


.form-field select:hover,
.form-field input:hover,
.form-field textarea:hover {

    border-color: #afc3b4;

}


/* =====================================================
   CTA-BUTTON
===================================================== */

.premium-submit {

    min-height: 61px;

    border-radius: 11px;

    font-size: 0.95rem;

}


/* =====================================================
   VERTRAUENSHINWEIS
===================================================== */

.premium-assurance {

    margin-top: 10px;

    padding: 14px 15px;

    background: #f3f8f4;

    border-radius: 12px;

    color: #66736a;

    font-size: 0.74rem;

}


.premium-assurance i {

    color: var(--green);

}


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

@media (max-width: 700px) {

    .contact-section {

        padding: 75px 0 85px;

    }


    .contact-content h2 {

        max-width: 100%;

        font-size: 2.2rem;

        line-height: 1.1;

    }


    .contact-lead {

        font-size: 0.98rem;

    }


    .contact-region {

        max-width: 100%;

    }


    .premium-contact-card {

        width: 100%;

        max-width: 100%;

        padding: 50px 21px 24px;

    }


    .contact-card-top h3 {

        font-size: 1.55rem;

    }


    .premium-form-group {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .form-icon {

        width: 44px;

        height: 44px;

    }


    .form-field select,
    .form-field input,
    .form-field textarea {

        font-size: 16px;

    }

}
/* =====================================================
   HERO – VERTRAUENSPUNKTE
===================================================== */

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 24px;
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #66736a;

    font-size: 0.8rem;
    line-height: 1.4;
}

.trust-check {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;

    color: var(--green);
}


/* Smartphone */

@media (max-width: 700px) {

    .hero {
        padding: 48px 0 62px;
    }

    .hero-trust {
        justify-content: center;
        gap: 13px 20px;
    }

}
/* =====================================================
   FINALER FIX – HERO TRUST + REGIONALE LEISTE
===================================================== */


/* Kleine Vertrauens-Häkchen */

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #66736a;
    font-size: 0.8rem;
    line-height: 1.4;
}

.hero-trust .trust-check {
    display: block;

    width: 17px !important;
    height: 17px !important;

    min-width: 17px;
    max-width: 17px;

    flex: 0 0 17px;

    color: var(--green);
}


/* Regionale Leiste wieder sauber darstellen */

.trust-bar {
    display: block;

    background: var(--green-bg);

    border-top: 1px solid #e9f0eb;
    border-bottom: 1px solid #e9f0eb;
}

.trust-bar .container {
    display: grid;

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

    align-items: stretch;
}

.trust-bar .container > div {
    display: flex;

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

    gap: 8px;

    min-height: 68px;

    color: #56635a;

    font-size: 0.82rem;
    font-weight: 600;

    text-align: center;
}

.trust-bar i {
    color: var(--green);

    flex-shrink: 0;
}


/* Tablet */

@media (max-width: 980px) {

    .trust-bar .container {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* Smartphone */

@media (max-width: 700px) {

    .trust-bar .container {
        grid-template-columns: 1fr;
    }

    .trust-bar .container > div {
        min-height: 54px;
    }

}
.pricing-vat {
    margin: 14px 0 0;
    text-align: center;
    color: #6b776e;
    font-size: 0.78rem;
    line-height: 1.5;
}
/* =====================================================
   PREISKARTEN – AUSWAHL
===================================================== */

.pricing-grid .pricing-card {
    border: 1px solid #e0e7e2;
    background: #ffffff;
    cursor: pointer;

    transition:
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.pricing-grid .pricing-card.is-selected {
    border: 1px solid #e0e7e2;
    background: #f8fbf8;

    box-shadow:
        0 0 0 2px var(--green),
        0 18px 45px rgba(35, 85, 45, 0.09);

    transform: translateY(-1px);
}
/* =====================================================
   HERO – REGIONEN KORRIGIEREN
===================================================== */

.hero-person .person-regional {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}

.hero-person .person-regional span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    flex: 0 0 auto !important;
    align-self: center !important;

    padding: 6px 9px !important;

    background: #f1f8f2 !important;
    border: 0 !important;
    border-radius: 999px !important;

    color: #35633b !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
/* =====================================================
   HERO – REGIONEN NEU
===================================================== */

.hero-person .hero-regions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hero-person .hero-regions span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    flex: 0 0 auto !important;

    padding: 6px 10px !important;

    background: #f1f8f2 !important;
    border: 0 !important;
    border-radius: 999px !important;

    color: #35633b !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Anfrage-Button bleibt unter den Regionen */
.hero-person .person-contact {
    display: flex !important;
    width: 100% !important;
    margin-top: 0 !important;
}
/* =====================================================
   HINWEIS HAUSVERWALTUNG
===================================================== */

.service-note {
    padding: 75px 0;
    background: #ffffff;
}

.service-note-inner {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 24px;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
    padding: 38px 42px;
    background: #f5f9f6;
    border: 1px solid #e3eee5;
    border-radius: 22px;
}

.service-note-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf4eb;
    border-radius: 50%;
    color: var(--green);
    font-size: 1.3rem;
}

.service-note-content h2 {
    margin: 10px 0 18px;
    color: var(--text);
    font-family: "Poppins", "Inter", Arial, sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.service-note-content p {
    max-width: 720px;
    margin: 0 0 12px;
    color: var(--text-soft);
    line-height: 1.7;
}

.service-note-content .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 700px) {

    .service-note {
        padding: 55px 0;
    }

    .service-note-inner {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 24px;
    }

    .service-note-icon {
        width: 50px;
        height: 50px;
    }
}

/* =====================================================
   MOBILE – SAUBERE ÜBERSCHRIFTEN OHNE WORTTRENNUNG
===================================================== */

@media (max-width: 700px) {

    /* -------------------------------------------------
       GRUNDREGEL
    ------------------------------------------------- */

    h1,
    h2,
    h3,
    .hero-title,
    .hero-title .accent,
    .service-note-content h2,
    .about-content h2,
    .contact-content h2,
    .inquiry-section h2,
    .request-section h2,
    .pricing-section h2,
    .prices-section h2,
    .benefit-section h2,
    .benefits-section h2,
    .section-header h2 {

        hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;

        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* -------------------------------------------------
       HERO
       Lange Wörter bleiben vollständig.
    ------------------------------------------------- */

    .hero-title {
        font-size: 1.85rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.03em !important;
    }

    


    /* -------------------------------------------------
       BESONDERER VORTEIL
    ------------------------------------------------- */

    .about-content h2,
    .benefit-section h2,
    .benefits-section h2 {
        font-size: 1.42rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.025em !important;
    }


    /* -------------------------------------------------
       HAUSVERWALTUNG
    ------------------------------------------------- */

    .service-note-inner,
    .service-note-content {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .service-note-content h2 {
        font-size: 1.42rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.025em !important;
    }


    /* -------------------------------------------------
       ANFRAGE
    ------------------------------------------------- */

    .contact-content h2,
    .inquiry-section h2,
    .request-section h2 {
        font-size: 1.42rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.025em !important;
    }


    /* -------------------------------------------------
       PREISE / LEISTUNGEN
    ------------------------------------------------- */

    .pricing-section h2,
    .prices-section h2,
    .section-header h2 {
        font-size: 1.55rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
    }
}
/* =====================================================
   LOGO – GMBH DEZENT ERGÄNZEN
===================================================== */

.logo small {
    font-size: 0.52em;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #657169;
    margin-left: 4px;
    vertical-align: middle;
}

/* Mobil etwas kompakter */
@media (max-width: 700px) {

    .logo {
        font-size: 1.35rem;
    }

    .logo small {
        font-size: 0.5em;
        margin-left: 3px;
    }

    /* Zentrale Leistungsbezeichnung etwas größer */
    .hero-title .accent {
        font-size: 1.45rem !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        letter-spacing: -0.02em !important;
    }
}
/* =====================================================
   MOBILE HERO – NEBENKOSTENABRECHNUNG GRÖSSER
===================================================== */

@media (max-width: 700px) {

    .hero-title .accent {
        display: inline-block !important;

        /* Wort bleibt vollständig in einer Zeile */
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        /* Größer, aber passend für den mobilen Bereich */
        font-size: 1.35rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;

        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* =====================================================
   MOBILE HERO – NEBENKOSTENABRECHNUNG OPTIMAL AUSNUTZEN
===================================================== */

@media (max-width: 700px) {

    .hero-title .accent {
        display: block !important;
        width: 100% !important;
        max-width: none !important;

        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        text-align: center !important;

        /* deutlich größer als aktuell,
           passt sich aber an die Handybreite an */
        font-size: clamp(1.05rem, 6vw, 1.35rem) !important;

        line-height: 1.05 !important;
        letter-spacing: -0.035em !important;
    }
}
/* =====================================================
   MOBILE – NEBENKOSTENABRECHNUNG DEUTLICHER
===================================================== */

@media (max-width: 700px) {

    h1.hero-title span.hero-title-line.accent {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        color: var(--green) !important;

        font-size: 1.30rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.025em !important;
        font-weight: 700 !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        text-align: center !important;
    }
}
/* =====================================================
   MOBILE HERO – NEBENKOSTENABRECHNUNG GRÖSSER
===================================================== */

@media (max-width: 700px) {

    h1.hero-title > span.hero-title-line.accent {
        display: block !important;
        width: 100% !important;

        color: var(--green) !important;

        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        letter-spacing: -0.055em !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        text-align: center !important;

        transform: scaleX(0.96);
        transform-origin: center;
    }
}
/* =====================================================
   MOBILE HERO – NEBENKOSTENABRECHNUNG GRÖSSER
===================================================== */

@media (max-width: 700px) {

    h1.hero-title .hero-title-line.accent {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        color: var(--green) !important;

        font-size: 50px !important;
        font-weight: 700 !important;
        line-height: 1.0 !important;
        letter-spacing: -0.065em !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        text-align: center !important;

        transform: none !important;
    }
}/* =====================================================
   MOBILE MENÜ – SICHTBAR UND STICKY
===================================================== */

@media (max-width: 980px) {

    #header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    #header .container {
        position: relative;
    }

    /* Menü standardmäßig geschlossen */
    #header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        background: #ffffff;
        border-top: 1px solid #e5ece7;
        border-bottom: 1px solid #e5ece7;
        box-shadow: 0 12px 30px rgba(25, 55, 35, 0.10);
    }

    /* Menü geöffnet */
    #header nav.is-open {
        display: block;
    }

    #header nav ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 8px 0;
    }

    #header nav li {
        width: 100%;
    }

    #header nav a {
        display: block;
        width: 100%;
        padding: 15px 22px;
        color: #24302a;
        text-align: left;
    }

    #header nav a:hover {
        background: #f1f8f2;
        color: var(--green);
    }

    #header nav .button-nav {
        margin: 8px 18px;
        width: auto;
        text-align: center;
    }

    .mobile-menu {
        position: relative;
        z-index: 1001;
        display: block;
        cursor: pointer;
    }
}
/* =====================================================
   MOBILE UNTERSEITEN – LANGE WÖRTER NICHT TRENNEN
===================================================== */

@media (max-width: 700px) {

    .page-hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.035em !important;

        hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }
}

@media (max-width:700px) {
    .page-hero h1 {
        font-size:1.50rem !important;
        line-height:1.10 !important;
        letter-spacing:-0.025em !important;
        hyphens:none !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        white-space:normal !important;
    }
}

@media (max-width:520px) {
    .page-hero h1 {
        font-size:1.38rem !important;
        line-height:1.10 !important;
        letter-spacing:-0.02em !important;
    }
}