/* =========================================================
   BIRKENFELD – PREMIUM REGIONALE LANDINGPAGE
   Hero-Bild als echtes <img>
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero--region {
    position: relative;
    min-height: clamp(680px, 82vh, 880px);
    overflow: hidden;
}


/* Hero-Bild */

.hero--region .hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 48%;

    z-index: 0;
}


/* Blauer Verlauf über dem Bild */

.hero--region::after {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(4, 48, 74, .94) 0%,
        rgba(0, 100, 148, .70) 39%,
        rgba(0, 174, 239, .18) 69%,
        transparent 91%
    );

    pointer-events: none;
}


/* Inhalt über Bild + Verlauf */

.hero--region .hero-copy {
    position: relative;
    z-index: 2;

    max-width: 1120px;
}


/* H1 */

.hero--region .hero-copy h1 {
    max-width: 940px;

    font-size: clamp(42px, 4.8vw, 68px);
    line-height: 1.06;
    letter-spacing: -.035em;
}


/* Hero-Einleitung */

.hero--region .hero-copy > p:not(.hero-note) {
    max-width: 820px;
}


/* Weißer Button */

.hero--region .btn--white {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}


/* Ortsangabe */

.hero-note {
    margin-top: 24px;

    font-size: 14px !important;
    color: rgba(255, 255, 255, .8) !important;
}


/* ---------------------------------------------------------
   QUICK NAVIGATION
   --------------------------------------------------------- */

.quick-grid a {
    min-height: 104px;
}


/* ---------------------------------------------------------
   REGIONALER EINSTIEG
   --------------------------------------------------------- */

.region-intro {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(50px, 8vw, 110px);
    align-items: center;
}

.region-intro-copy {
    max-width: 620px;
}

.region-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    margin-top: 40px;
    padding-top: 28px;

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

.region-facts b {
    display: block;

    margin-bottom: 7px;

    color: var(--blue);

    font-size: 13px;
    letter-spacing: .08em;
}

.region-facts strong {
    display: block;

    font-size: 18px;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   VERKAUFEN / BEWERTEN / VERMIETEN
   --------------------------------------------------------- */

.local-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.local-service {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 360px;

    padding: 36px 34px 40px;

    background: #fff;

    border: 1px solid rgba(18, 68, 96, .07);
    border-radius: 28px;

    box-shadow: 0 12px 38px rgba(20, 50, 70, .055);
}

.local-service--blue {
    background: linear-gradient(
        145deg,
        #063f61,
        #0074a5
    );

    border: 0;

    color: #fff;
}

.local-service--blue h3,
.local-service--blue p {
    color: #fff;
}

.local-service .icon {
    margin-bottom: 30px;
}

.local-service--blue .icon {
    background: rgba(255, 255, 255, .12);
    color: #8ce6ff;
}

.local-service h3 {
    font-size: 26px;
}

.local-service p {
    font-size: 15px;
}

.local-service a {
    margin-top: auto;
    padding-top: 24px;

    color: var(--blue-700);

    font-weight: 700;
}

.local-service--blue a {
    color: #9ce8ff;
}


/* ---------------------------------------------------------
   ORTSPROFIL
   --------------------------------------------------------- */

.local-profile {
    display: grid;
    grid-template-columns: 1.05fr .95fr;

    gap: clamp(50px, 8vw, 100px);

    align-items: center;
}

.local-photo {
    overflow: hidden;

    aspect-ratio: 16 / 10;

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

.local-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.place-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 30px;
}

.place-card {
    padding: 24px;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 20px;
}

.place-card strong {
    display: block;

    margin-bottom: 7px;

    font-size: 19px;
}

.place-card p {
    margin: 0;

    font-size: 14px;
}


/* ---------------------------------------------------------
   WERTFAKTOREN
   --------------------------------------------------------- */

.value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}

.value-card {
    position: relative;

    min-height: 285px;

    padding: 32px 28px 38px;

    background: #fff;

    border-radius: 26px;

    box-shadow: 0 10px 34px rgba(20, 50, 70, .05);
}

.value-no {
    display: block;

    margin-bottom: 25px;

    color: var(--blue);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .09em;
}

.value-card h3 {
    font-size: 22px;
}

.value-card p {
    font-size: 15px;
}

.value-line {
    position: absolute;

    left: 28px;
    bottom: 25px;

    width: 44px;
    height: 2px;

    background: var(--blue);
}


/* ---------------------------------------------------------
   IMMOBILIENBEWERTUNG
   --------------------------------------------------------- */

.valuation-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;

    gap: clamp(48px, 8vw, 105px);

    align-items: center;
}

.valuation-copy {
    max-width: 620px;
}

.valuation-note {
    margin-top: 28px;

    padding: 20px 22px;

    background: #fff;

    border-left: 3px solid var(--blue);

    color: var(--muted);
}


/* ---------------------------------------------------------
   REGIONALE REFERENZ
   --------------------------------------------------------- */

.local-proof {
    padding: clamp(80px, 10vw, 135px) 0;

    background: #083550;

    color: #fff;
}

.local-proof-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;

    gap: 70px;

    align-items: center;
}

.local-proof h2,
.local-proof p {
    color: #fff;
}

.proof-card {
    padding: 36px;

    background: #fff;

    border-radius: 28px;

    color: var(--ink);

    box-shadow: 0 22px 60px rgba(0, 28, 45, .22);
}

.proof-kicker {
    display: block;

    margin-bottom: 12px;

    color: var(--blue);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.proof-card h3 {
    font-size: 28px;
}

.proof-card p {
    color: var(--muted);
}

.proof-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin: 26px 0;
    padding-top: 20px;

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

.proof-meta small {
    display: block;

    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.proof-meta strong {
    display: block;

    margin-top: 4px;

    font-size: 16px;
}


/* ---------------------------------------------------------
   BÜRO / REGIONALE VERBINDUNG
   --------------------------------------------------------- */

.office-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: clamp(50px, 8vw, 105px);

    align-items: center;
}

.office-card {
    padding: 38px;

    background: #fff;

    border-radius: 28px;

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

.office-card h3 {
    font-size: 27px;
}

.office-contact {
    display: grid;

    gap: 12px;

    margin-top: 25px;
}

.office-contact a {
    color: var(--blue-700);

    font-weight: 700;
}


/* schematische Karte */

.map-visual {
    position: relative;

    /* min-height: 420px; */

    overflow: hidden;

    border-radius: var(--radius);

    background: linear-gradient(
        135deg,
        #e9f6fb,
        #f8fbfc
    );
}

.map-route {
    position: absolute;

    left: 18%;
    right: 18%;
    top: 48%;

    height: 4px;

    background: linear-gradient(
        90deg,
        #00aeef,
        #075d82
    );

    border-radius: 999px;

    transform: rotate(-8deg);
}

.map-pin {
    position: absolute;

    width: 26px;
    height: 26px;

    background: #fff;

    border: 7px solid var(--blue);
    border-radius: 50%;

    box-shadow: 0 8px 22px rgba(0, 174, 239, .18);
}

.map-pin--birkenfeld {
    left: 18%;
    top: 55%;
}

.map-pin--pforzheim {
    right: 18%;
    top: 35%;
}

.map-label {
    position: absolute;

    padding: 9px 13px;

    background: #fff;

    border-radius: 999px;

    box-shadow: 0 8px 24px rgba(20, 50, 70, .08);

    font-size: 13px;
    font-weight: 700;
}

.map-label--birkenfeld {
    left: 10%;
    top: 66%;
}

.map-label--pforzheim {
    right: 10%;
    top: 20%;
}


/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */

.local-faq-layout {
    display: grid;
    grid-template-columns: .82fr 1.18fr;

    gap: clamp(50px, 8vw, 100px);

    align-items: start;
}


/* ---------------------------------------------------------
   RÜCKRUF
   --------------------------------------------------------- */

.callback-premium {
    position: relative;

    overflow: hidden;

    padding: clamp(85px, 10vw, 135px) 0;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(75, 207, 255, .20),
            transparent 34%
        ),
        linear-gradient(
            125deg,
            #053650 0%,
            #075d83 48%,
            #008ec5 100%
        );

    color: #fff;
}

.callback-premium-grid {
    position: relative;

    z-index: 1;

    display: grid;
    grid-template-columns: .92fr 1.08fr;

    gap: clamp(60px, 9vw, 120px);

    align-items: center;
}

.callback-premium-info {
    max-width: 580px;
}

.callback-premium h2,
.callback-premium p {
    color: #fff;
}

.callback-premium-lead {
    color: rgba(255, 255, 255, .84) !important;

    font-size: 18px;
    line-height: 1.7;
}

.callback-benefits {
    display: grid;

    gap: 10px;

    margin: 30px 0;
}

.callback-benefits span {
    position: relative;

    padding-left: 29px;

    font-weight: 600;
}

.callback-benefits span::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: #8ce7ff;

    font-weight: 800;
}

.callback-contact {
    margin-top: 25px;
}

.callback-contact a {
    display: block;

    margin: 8px 0;

    color: #fff;

    font-weight: 700;
}

.callback-address {
    margin-top: 24px !important;

    color: rgba(255, 255, 255, .65) !important;

    font-size: 13px;
}


/* Rückruf-Formular */

.callback-card {
    padding: clamp(32px, 4vw, 48px);

    background: #fff;

    border-radius: 28px;

    color: var(--ink);

    box-shadow: 0 25px 70px rgba(0, 30, 48, .22);
}

.callback-card h3 {
    font-size: 30px;
}

.callback-card > p {
    color: var(--muted);
}

.callback-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

.callback-fields .full {
    grid-column: 1 / -1;
}

.callback-fields input[type="text"],
.callback-fields input[type="tel"],
.callback-fields input[type="email"] {
    width: 100%;
    min-height: 56px;

    padding: 0 17px;

    background: #f7fafb;

    border: 1px solid #dce5e9;
    border-radius: 12px;

    color: var(--ink);

    font: inherit;
}

.callback-fields .privacy {
    display: flex;

    gap: 10px;

    align-items: flex-start;

    font-size: 12px;
    line-height: 1.55;

    color: var(--muted);
}

.callback-fields .privacy input {
    width: 17px;
    height: 17px;

    margin-top: 3px;
}

.callback-fields .btn {
    width: 100%;

    border: 0;

    cursor: pointer;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .value-grid {
        grid-template-columns: 1fr 1fr;
    }

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

}


@media (max-width: 850px) {

    .region-intro,
    .local-profile,
    .valuation-grid,
    .local-proof-grid,
    .office-grid,
    .local-faq-layout,
    .callback-premium-grid {
        grid-template-columns: 1fr;
    }

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

}


@media (max-width: 650px) {

    .region-facts,
    .place-cards,
    .value-grid,
    .proof-meta,
    .callback-fields {
        grid-template-columns: 1fr;
    }

    .callback-fields .full {
        grid-column: auto;
    }

    .hero--region .hero-image {
        object-position: 62% center;
    }

    .hero--region .hero-copy h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

}