/* Seite: Immobilie verkaufen – Dittrich Design System 2.1 */
.hero--verkauf {
    background-image: url('../img/immobilienverkauf.jpg');
    background-position: center 48%
}

.hero--verkauf .hero-copy {
    max-width: 1120px
}

.hero--verkauf .hero-note {
    margin-top: 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, .8)
}

.hero .btn--text {
    min-height: 50px;
    padding: 0 8px;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-weight: 600
}

.hero .btn--text:hover {
    color: #bfefff
}

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

.quick-grid a:focus-visible {
    outline: 3px solid rgba(0, 174, 239, .28);
    outline-offset: -3px
}

.intro-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 54px;
    border-top: 1px solid var(--line)
}

.intro-point {
    padding-top: 28px
}

.intro-point b {
    display: block;
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--blue);
    margin-bottom: 10px
}

.intro-point strong {
    display: block;
    font-size: 20px;
    line-height: 1.25;
    margin-bottom: 8px
}

.intro-point p {
    font-size: 15px
}

.feature-copy .feature-list {
    list-style: none;
    padding: 0;
    margin: 28px 0
}

.feature-copy .feature-list li {
    position: relative;
    padding: 11px 0 11px 26px;
    /* border-bottom: 1px solid var(--line); */
    color: var(--muted)
}

.feature-copy .feature-list li:before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue)
}

.service-index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.service-index article {
    padding: 34px 28px;
    min-height: 220px
}

.service-index article+article {
    border-left: 1px solid var(--line)
}

.service-index article:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--line)
}

.service-index article:nth-child(n+5) {
    border-top: 1px solid var(--line)
}

.service-index b {
    display: block;
    color: #cbeefa;
    font-size: 42px;
    line-height: 1;
    margin-bottom: 26px
}

.service-index h3 {
    font-size: 22px;
    margin-bottom: 12px
}

.service-index p {
    font-size: 15px
}

.region-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(48px, 8vw, 110px);
    align-items: center
}

.districts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px
}

.districts span {
    padding: 8px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted)
}

.reference-teaser {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(45px, 8vw, 100px);
    align-items: center
}

.reference-image {
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16/10
}

.reference-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.reference-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 28px
}

.reference-meta div {
    padding-top: 14px;
    border-top: 1px solid var(--line)
}

.reference-meta small {
    display: block;
    color: var(--muted)
}

.reviews-placeholder {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(45px, 8vw, 100px);
    align-items: start
}

.review-note {
    padding: 34px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow)
}

.review-note strong {
    display: block;
    font-size: 22px;
    margin-bottom: 10px
}

.review-note .stars {
    color: var(--blue);
    letter-spacing: .15em;
    margin-bottom: 14px
}

.location-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(45px, 8vw, 100px);
    align-items: stretch
}

.location-card {
    padding: 38px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow)
}

.location-card h3 {
    margin-bottom: 14px
}

.location-card a:not(.btn--blue) {
    color: var(--blue);
    font-weight: 650
}

.location-map {
    min-height: 420px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #dfeff6, #f9fbfc)
}

.location-map:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(30deg, rgba(0, 174, 239, .07) 12%, transparent 12.5%, transparent 87%, rgba(0, 174, 239, .07) 87.5%), linear-gradient(150deg, rgba(0, 174, 239, .07) 12%, transparent 12.5%, transparent 87%, rgba(0, 174, 239, .07) 87.5%);
    background-size: 48px 84px
}

.map-pin {
    position: absolute;
    left: 55%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50% 50% 50% 0;
    transform: translate(-50%, -50%) rotate(-45deg);
    background: var(--blue);
    box-shadow: 0 14px 34px rgba(0, 174, 239, .28)
}

.map-pin:after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    left: 24px;
    top: 24px
}

.map-label {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    padding: 12px 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap
}

.contact .contact-data {
    margin-top: 30px
}

.contact .contact-data a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px
}

.contact .contact-data strong {
    font-size: 18px
}

.contact .privacy {
    grid-column: 1/-1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: rgba(255, 255, 255, .85)
}

.contact .privacy input {
    width: 18px;
    height: 18px;
    margin-top: 4px
}

.contact .form select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: #fff;
    color: var(--ink)
}

.footer-brand p {
    max-width: 360px
}

@media(max-width:1024px) {
    .service-index {
        grid-template-columns: repeat(2, 1fr)
    }

    .service-index article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .service-index article:nth-child(4) {
        border-left: 1px solid var(--line)
    }

    .service-index article:nth-child(n+5) {
        border-top: 1px solid var(--line)
    }

    .region-layout,
    .reference-teaser,
    .reviews-placeholder,
    .location-grid {
        grid-template-columns: 1fr
    }

    .intro-points {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:700px) {

    .intro-points,
    .service-index,
    .reference-meta {
        grid-template-columns: 1fr
    }

    .service-index article+article,
    .service-index article:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .hero--verkauf {
        background-position: 62% center
    }

    .quick-grid a {
        min-height: auto
    }

    .location-map {
        min-height: 320px
    }
}

.hero--verkauf .hero-copy h1 {
    max-width: 1080px
}

.hero--verkauf .hero-copy>p:not(.hero-note) {
    max-width: 840px
}

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

.hero--verkauf .btn--white:hover {
    background: #eefaff;
    color: #07577b
}

.feature-copy .feature-list li:before {
    content: '✓';
    top: 10px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--blue);
    font-size: 17px;
    font-weight: 800
}

.feature-copy .feature-list li {
    padding-left: 30px
}

.task-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.task-card {
    position: relative;
    min-height: 255px;
    padding: 36px 34px 42px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 12px 40px rgba(25, 45, 60, .055);
    transition: box-shadow .25s var(--ease), transform .25s var(--ease)
}

.task-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.task-no {
    display: block;
    margin-bottom: 34px;
    color: #c8edf9;
    font-size: 42px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.055em
}

.task-card h3 {
    font-size: 24px;
    margin-bottom: 12px
}

.task-card p {
    font-size: 15px
}

.task-line {
    position: absolute;
    left: 34px;
    bottom: 28px;
    width: 46px;
    height: 2px;
    background: var(--blue);
    border-radius: 2px
}

@media(max-width:1024px) {
    .task-cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:700px) {
    .task-cards {
        grid-template-columns: 1fr
    }
}

.reviews-head {
    margin-inline: auto;
    text-align: center
}

.reviews-head .signature {
    margin-inline: auto
}

.reviews-head .lead {
    margin-inline: auto
}

.review-grid {
    /* display: flex; */
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px
}

.review-card {
    flex: 0 1 calc(33.333% - 16px);
    min-width: 280px;
    max-width: 385px;
    padding: 30px 28px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 12px 38px rgba(25, 45, 60, .06);
    text-align: center
}

.review-card .stars {
    margin-bottom: 18px;
    color: var(--blue);
    letter-spacing: .12em
}

.review-card blockquote {
    margin: 0 0 22px;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.45;
    color: var(--ink)
}

.review-card p {
    margin: 0
}

.review-card p strong,
.review-card p span {
    display: block
}

.review-card p span {
    font-size: 13px;
    color: var(--muted)
}

.reviews-action {
    text-align: center;
    margin-top: 36px
}

@media(max-width:900px) {
    .review-card {
        flex-basis: calc(50% - 12px)
    }
}

@media(max-width:620px) {
    .review-card {
        flex-basis: 100%;
        max-width: none
    }
}

.districts a {
    padding: 8px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

.districts a:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

/* Seite: Immobilie Referenzen Verkauf + Vermietung – Dittrich Design System 2.1 */


.hero--referenzenverkauf,
.hero--referenzenvermietung {
    background-image: url('../img/referenzen/referenzen-verkaufte-immobilien.png');

    background-position: center 48%;
    min-height: clamp(345px, 42vh, 450px);
}




/* Seite: Immobilienverkauf Leistungen page additions on top of Premium 2.2 */
.hero--leistungen {
    /* background-image:linear-gradient(90deg,rgba(4,49,79,.84) 0%,rgba(0,116,174,.56) 34%,rgba(0,174,239,.14) 63%,rgba(0,174,239,0) 82%),url('../img/verkauf/immobilienplanung-im-modernen-zuhause.png'); */
    background-image: url('https://dittrich.immo/wp-content/uploads/Beratung2-1.jpg');

    background-position: center 48%
}

.hero--leistungen .hero-copy {
    max-width: 1120px
}

.hero--leistungen .hero-copy p {
    max-width: 840px
}

.hero--leistungen .hero-note {
    margin-top: 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

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

.service-card {
    background: #fff;
    border-radius: 26px;
    padding: 32px 30px;
    box-shadow: 0 12px 34px rgba(15, 40, 60, .06);
    position: relative;
    overflow: hidden;
    min-height: 265px
}

.service-card .task-no {
    font-size: 15px;
    font-weight: 800;
    color: #00aeef;
    letter-spacing: .08em
}

.service-card h3 {
    margin: 18px 0 12px;
    font-size: 24px
}

.service-card p {
    margin: 0 0 18px
}

.service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px
}

.service-card li {
    position: relative;
    padding-left: 27px;
    color: #52606c
}

.service-card li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #00aeef;
    font-weight: 800
}

.service-card:after {
    content: '';
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #00aeef 0 35%, rgba(0, 174, 239, .08) 35% 100%)
}

.feature-row--compact {
    align-items: center
}

.feature-row--compact .feature-copy {
    max-width: 610px
}

.feature-media--tall {
    aspect-ratio: 5/4
}

.feature-media--tall img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.handover {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(50px, 8vw, 110px);
    align-items: center
}

.handover-list {
    display: grid;
    gap: 0;
    border-top: 1px solid #dfe5e8
}

.handover-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px;
    padding: 24px 0;
    border-bottom: 1px solid #dfe5e8
}

.handover-row b {
    font-size: 14px;
    color: #00aeef;
    letter-spacing: .06em
}

.handover-row strong {
    display: block;
    font-size: 20px;
    margin-bottom: 5px
}

.handover-row p {
    margin: 0
}

.you-we {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 48px
}

.you-we article {
    border-radius: 28px;
    padding: 36px 38px
}

.you-we .you {
    background: #fff;
    border: 1px solid #e7ecef
}

.you-we .we {
    background: #063f61;
    color: #fff
}

.you-we .we h3,
.you-we .we p,
.you-we .we li {
    color: #fff
}

.you-we ul {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    gap: 13px
}

.you-we li {
    position: relative;
    padding-left: 28px
}

.you-we li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #00aeef;
    font-weight: 800
}

.you-we .we li:before {
    color: #8ce6ff
}

.strategy-band {
    padding: clamp(74px, 9vw, 120px) 0;
    background: #f7fbfd
}

.strategy-band .wrap {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(44px, 7vw, 90px);
    align-items: center
}

.strategy-visual {
    background: #fff;
    border-radius: 32px;
    padding: 18px;
    box-shadow: 0 14px 40px rgba(21, 50, 70, .06)
}

.strategy-visual img {
    width: 100%;
    border-radius: 22px
}

.strategy-copy ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 12px
}

.strategy-copy li {
    padding-left: 28px;
    position: relative
}

.strategy-copy li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #00aeef;
    font-weight: 800
}

.mini-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 34px 38px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 40, 60, .06);
    margin-top: 44px
}

.mini-cta p {
    margin: 0
}

.mini-cta strong {
    display: block;
    font-size: 22px;
    color: #172331;
    margin-bottom: 5px
}

@media(max-width:1000px) {
    .service-overview {
        grid-template-columns: repeat(2, 1fr)
    }

    .handover,
    .strategy-band .wrap {
        grid-template-columns: 1fr
    }

    .you-we {
        grid-template-columns: 1fr
    }
}

@media(max-width:680px) {
    .service-overview {
        grid-template-columns: 1fr
    }

    .service-card {
        min-height: auto
    }

    .mini-cta {
        align-items: flex-start;
        flex-direction: column
    }

    .hero--leistungen .hero-copy {
        max-width: none
    }
}

/* Premium refinement: service overview */
.service-card {
    border: 1px solid rgba(18, 68, 96, .06);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    background: linear-gradient(180deg, #fff 0%, #fff 78%, #fbfdfe 100%)
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 52px rgba(15, 40, 60, .10);
    border-color: rgba(0, 174, 239, .18)
}

.service-card:after {
    display: none
}

.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px
}

.service-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(145deg, #eaf8fd, #f8fcfe);
    color: #00aeef;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .11)
}

.service-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.service-card .task-no {
    font-size: 13px;
    letter-spacing: .12em;
    color: #7b8b96
}

.service-card h3 {
    margin-top: 0
}

.service-card--wide {
    grid-column: span 1
}

/* Premium refinement: responsibility board */
.responsibility-section {
    overflow: hidden
}

.responsibility-intro {
    max-width: 860px;
    margin-bottom: 52px
}

.responsibility-board {
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 18px 52px rgba(15, 40, 60, .07);
    overflow: hidden;
    border: 1px solid rgba(18, 68, 96, .06)
}

.responsibility-head {
    display: grid;
    grid-template-columns: 1fr 82px 1fr;
    align-items: stretch;
    background: linear-gradient(110deg, #ffffff 0%, #f8fcfe 48%, #eef9fd 100%);
    border-bottom: 1px solid #e9eef1
}

.responsibility-head>div:not(.responsibility-center) {
    padding: 30px 34px
}

.responsibility-head span {
    display: block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #00aeef;
    font-weight: 800;
    margin-bottom: 7px
}

.responsibility-head strong {
    font-size: 23px;
    color: #172331
}

.responsibility-center {
    position: relative;
    display: grid;
    place-items: center
}

.responsibility-center:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #dbe5ea
}

.responsibility-center span {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00aeef;
    box-shadow: 0 0 0 7px #eaf8fd
}

.responsibility-pairs {
    display: grid
}

.responsibility-pair {
    display: grid;
    grid-template-columns: 1fr 82px 1fr;
    align-items: center;
    min-height: 108px;
    border-bottom: 1px solid #edf1f3
}

.responsibility-pair:last-child {
    border-bottom: 0
}

.responsibility-pair>div:not(.pair-icon) {
    padding: 24px 34px
}

.decision {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: center
}

.decision b {
    font-size: 13px;
    color: #00aeef;
    letter-spacing: .08em
}

.decision span,
.execution span {
    font-size: 17px;
    font-weight: 650;
    color: #263746;
    line-height: 1.45
}

.execution {
    background: linear-gradient(90deg, rgba(234, 248, 253, .35), rgba(234, 248, 253, .72));
    height: 100%;
    display: flex;
    align-items: center
}

.pair-icon {
    display: grid;
    place-items: center;
    align-self: stretch;
    position: relative;
    background: #fff
}

.pair-icon:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #e3eaee
}

.pair-icon svg {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    background: #fff;
    color: #00aeef;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    box-shadow: 0 0 0 7px #f3fbfe
}

.responsibility-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding: 26px 4px
}

.responsibility-cta strong {
    display: block;
    font-size: 22px;
    color: #172331;
    margin-bottom: 4px
}

.responsibility-cta p {
    margin: 0
}

@media(max-width:820px) {
    .responsibility-head {
        grid-template-columns: 1fr 56px 1fr
    }

    .responsibility-pair {
        grid-template-columns: 1fr 56px 1fr
    }

    .responsibility-head>div:not(.responsibility-center),
    .responsibility-pair>div:not(.pair-icon) {
        padding: 22px
    }

    .responsibility-head strong {
        font-size: 19px
    }

    .decision span,
    .execution span {
        font-size: 15px
    }
}

@media(max-width:640px) {
    .responsibility-head {
        grid-template-columns: 1fr 40px 1fr
    }

    .responsibility-head>div:not(.responsibility-center) {
        padding: 18px 14px
    }

    .responsibility-head strong {
        font-size: 16px
    }

    .responsibility-head span {
        font-size: 10px
    }

    .responsibility-pair {
        grid-template-columns: 1fr 40px 1fr;
        min-height: 124px
    }

    .responsibility-pair>div:not(.pair-icon) {
        padding: 18px 14px
    }

    .decision {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .decision span,
    .execution span {
        font-size: 14px
    }

    .responsibility-cta {
        align-items: flex-start;
        flex-direction: column
    }

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

/* Premium 2.4: more editorial rhythm */
.service-overview {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch
}

.service-card {
    grid-column: span 4;
    min-height: 290px;
    padding: 34px 34px 32px;
    background: #fff
}

.service-card--feature {
    grid-column: span 7;
    min-height: 330px
}

.service-card--documents {
    grid-column: span 5;
    background: linear-gradient(145deg, #f8fcfe, #eef9fd)
}

.service-card--presentation {
    grid-column: span 4
}

.service-card--blue {
    grid-column: span 4;
    background: linear-gradient(145deg, #063f61, #006f9f);
    color: #fff;
    border-color: transparent
}

.service-card--people {
    grid-column: span 4;
    background: linear-gradient(180deg, #fff, #f7fbfd)
}

.service-card--negotiation {
    grid-column: span 7;
    background: linear-gradient(135deg, #ffffff 0%, #f5fbfe 62%, #eaf8fd 100%)
}

.service-card--closing {
    grid-column: span 5;
    background: #fff
}

.service-card .service-icon {
    width: 76px;
    height: 76px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    place-items: start;
    color: #00aeef
}

.service-card .service-icon svg {
    width: 52px;
    height: 52px;
    stroke-width: 1.35
}

.service-card--blue .service-icon {
    color: #8ce6ff
}

.service-card--blue .task-no {
    color: #a9dff2
}

.service-card--blue h3,
.service-card--blue p,
.service-card--blue li {
    color: #fff
}

.service-card--blue li:before {
    color: #8ce6ff
}

.service-card--feature h3 {
    font-size: 30px;
    max-width: 420px
}

.service-card--feature p {
    max-width: 560px
}

.service-card-top {
    margin-bottom: 18px
}

.service-card .task-no {
    align-self: flex-start;
    padding-top: 10px
}

.service-card:before {
    content: '';
    position: absolute;
    right: -70px;
    top: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 174, 239, .11), rgba(0, 174, 239, 0) 70%);
    pointer-events: none
}

.service-card--blue:before {
    background: radial-gradient(circle, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%)
}

.visual-break {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    background: #102f42
}

.visual-break-media {
    position: absolute;
    inset: 0
}

.visual-break-media:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 39, 60, .78), rgba(5, 39, 60, .32) 52%, rgba(5, 39, 60, .08))
}

.visual-break-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.visual-break-copy {
    position: relative;
    z-index: 1;
    padding-bottom: 70px
}

.visual-break-copy span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8ce6ff
}

.visual-break-copy h2 {
    max-width: 700px;
    color: #fff;
    margin: 12px 0 14px;
    font-size: clamp(42px, 5vw, 68px)
}

.visual-break-copy p {
    max-width: 650px;
    color: rgba(255, 255, 255, .9);
    font-size: 20px
}

.responsibility-stage {
    padding: clamp(90px, 10vw, 140px) 0;
    background: linear-gradient(180deg, #f7fbfd 0%, #ffffff 100%);
    overflow: hidden
}

.responsibility-stage .responsibility-intro {
    max-width: 860px;
    margin-bottom: 70px
}

.responsibility-flow {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 0
}

.responsibility-flow:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(#d7e7ee, #00aeef 22%, #00aeef 78%, #d7e7ee)
}

.flow-step {
    display: grid;
    grid-template-columns: 1fr 92px 1fr;
    align-items: center;
    min-height: 150px;
    margin: 0 0 20px
}

.flow-side {
    padding: 28px 32px;
    border-radius: 24px;
    position: relative
}

.flow-side small {
    display: block;
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 8px;
    color: #00aeef
}

.flow-side h3 {
    font-size: 24px;
    line-height: 1.25;
    margin: 0;
    color: #172331
}

.flow-side p {
    margin: 0;
    font-size: 17px;
    line-height: 1.55
}

.flow-side--you {
    background: #fff;
    box-shadow: 0 14px 38px rgba(15, 40, 60, .06);
    border: 1px solid rgba(18, 68, 96, .07)
}

.flow-side--us {
    background: linear-gradient(135deg, #eaf8fd, #f8fcfe);
    border: 1px solid rgba(0, 174, 239, .12)
}

.flow-step:nth-child(even) .flow-side--you {
    transform: translateY(15px)
}

.flow-step:nth-child(odd) .flow-side--us {
    transform: translateY(15px)
}

.flow-node {
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2
}

.flow-node span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #00aeef;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 0 0 10px #f4fbfe, 0 8px 20px rgba(0, 174, 239, .18)
}

.flow-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    max-width: 1100px;
    margin: 55px auto 0;
    padding-top: 30px;
    border-top: 1px solid #dce8ed
}

.flow-footer p {
    margin: 0;
    max-width: 700px
}

.flow-footer strong {
    color: #172331
}

@media(max-width:1000px) {

    .service-card,
    .service-card--feature,
    .service-card--documents,
    .service-card--presentation,
    .service-card--blue,
    .service-card--people,
    .service-card--negotiation,
    .service-card--closing {
        grid-column: span 6
    }

    .visual-break {
        min-height: 460px
    }
}

@media(max-width:760px) {
    .service-overview {
        grid-template-columns: 1fr
    }

    .service-card,
    .service-card--feature,
    .service-card--documents,
    .service-card--presentation,
    .service-card--blue,
    .service-card--people,
    .service-card--negotiation,
    .service-card--closing {
        grid-column: 1
    }

    .service-card--feature h3 {
        font-size: 26px
    }

    .flow-step {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 34px
    }

    .responsibility-flow:before {
        left: 25px
    }

    .flow-node {
        grid-row: 1;
        justify-content: start;
        padding-left: 0
    }

    .flow-side {
        margin-left: 62px
    }

    .flow-side--you,
    .flow-side--us,
    .flow-step:nth-child(even) .flow-side--you,
    .flow-step:nth-child(odd) .flow-side--us {
        transform: none
    }

    .flow-side--you {
        grid-row: 2
    }

    .flow-side--us {
        grid-row: 3
    }

    .flow-footer {
        align-items: flex-start;
        flex-direction: column
    }

    .visual-break-copy {
        padding-bottom: 50px
    }

    .visual-break-copy h2 {
        font-size: 42px
    }
}


/* Seite: Immobilienverkauf FAQ page additions on top of Premium 2.2 */
.faqhero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(118deg, #00aeef 0%, #009bd8 48%, #007caf 100%);
    color: #fff;
    padding: clamp(76px, 9vw, 126px) 0 clamp(68px, 8vw, 110px)
}

.faqhero:before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    right: -180px;
    top: -250px;
    background: rgba(255, 255, 255, .08)
}

.faqhero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
    gap: 70px;
    align-items: center
}

.faqhero-copy {
    max-width: 820px
}

.faqhero h1 {
    font-size: clamp(44px, 5.3vw, 76px);
    line-height: 1.02;
    letter-spacing: -.045em;
    margin: 18px 0 24px;
    color: #fff
}

.faqhero h1 strong {
    font-weight: 700
}

.faqhero .hero-lead {
    max-width: 760px;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .91)
}

.signature-line {
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 8px;
    background: #00aeef;
    margin-bottom: 18px
}

.faqhero .signature-line,
.signature-line.light {
    background: #fff
}

.faqhero-art {
    position: relative;
    min-height: 390px
}

.faqhero-mark {
    position: absolute;
    right: 14%;
    top: 1%;
    font-size: 270px;
    line-height: 1;
    font-weight: 750;
    color: rgba(255, 255, 255, .14);
    letter-spacing: -.08em
}

.faqhero-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%
}

.orbit-a {
    width: 320px;
    height: 320px;
    right: 5%;
    top: 24px
}

.orbit-b {
    width: 230px;
    height: 230px;
    right: 18%;
    top: 70px
}

.faqhero-card {
    position: absolute;
    background: rgba(255, 255, 255, .95);
    color: #12202b;
    border-radius: 18px;
    padding: 15px 20px;
    box-shadow: 0 22px 55px rgba(0, 54, 85, .18);
    font-weight: 650;
    min-width: 150px
}

.faqhero-card span {
    display: block;
    color: #00aeef;
    font-size: 12px;
    letter-spacing: .12em;
    margin-bottom: 3px
}

.card-a {
    left: 2%;
    top: 78px
}

.card-b {
    right: 0;
    top: 185px
}

.card-c {
    left: 16%;
    bottom: 34px
}

.faqhero .hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 34px
}

.faqhero .btn {
    border-radius: 999px;
    padding: 13px 24px;
    font-weight: 650;
    text-decoration: none;
    transition: background .2s, color .2s
}

.faqhero .btn-primary {
    background: #073b5b;
    color: #fff
}

.faqhero .btn-primary:hover {
    background: #052f49
}

.faqhero .btn-white {
    background: #fff;
    color: #087fae
}

.faqhero .btn-white:hover {
    background: #f1f9fc
}

.faq-jump {
    background: #fff;
    border-bottom: 1px solid #e8edf0;
    box-shadow: 0 8px 24px rgba(17, 38, 52, .04)
}

.faq-jump-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr)
}

.faq-jump a {
    padding: 22px 18px;
    text-decoration: none;
    color: #26343d;
    border-right: 1px solid #edf1f3;
    font-size: 14px;
    font-weight: 650;
    transition: background .2s, color .2s
}

.faq-jump a:last-child {
    border-right: 0
}

.faq-jump a:hover {
    background: #f4fbfe;
    color: #008fc8
}

.faq-jump a span {
    display: block;
    color: #00aeef;
    font-size: 11px;
    letter-spacing: .12em;
    margin-bottom: 5px
}

.faq-intro {
    padding: 92px 0
}

.faq-intro-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 90px;
    align-items: end
}

.faq-intro h2 {
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -.035em;
    margin: 0
}

.faq-intro p {
    font-size: 18px;
    line-height: 1.75;
    color: #5c6870;
    margin: 0
}

.faq-section {
    padding: 96px 0
}

.faq-soft {
    background: #f4f8fa
}

.faq-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 80px
}

.faq-section-head {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    position: sticky;
    top: 34px;
    align-self: start
}

.faq-num {
    font-size: 14px;
    color: #00aeef;
    font-weight: 750;
    letter-spacing: .08em;
    padding-top: 4px
}

.faq-section-head h2 {
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: -.03em;
    margin: 0 0 10px
}

.faq-section-head p {
    color: #6b767d;
    line-height: 1.6;
    margin: 0
}

.faq-section-head .signature-line {
    width: 36px;
    height: 3px;
    margin-bottom: 16px
}

.faq-accordion {
    border-top: 1px solid #dbe3e7
}

.faq-accordion details {
    border-bottom: 1px solid #dbe3e7
}

.faq-accordion summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    padding: 27px 4px;
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 650;
    color: #1c2931
}

.faq-accordion summary::-webkit-details-marker {
    display: none
}

.faq-accordion summary span {
    width: 26px;
    height: 26px;
    position: relative;
    flex: 0 0 26px
}

.faq-accordion summary span:before,
.faq-accordion summary span:after {
    content: "";
    position: absolute;
    background: #00aeef;
    border-radius: 2px;
    left: 5px;
    right: 5px;
    top: 12px;
    height: 2px
}

.faq-accordion summary span:after {
    transform: rotate(90deg);
    transition: transform .2s
}

.faq-accordion details[open] summary span:after {
    transform: rotate(0)
}

.faq-answer {
    padding: 0 60px 28px 4px;
    color: #5a666e;
    line-height: 1.75;
    font-size: 16px
}

.faq-answer p {
    margin: 0 0 12px
}

.faq-answer a {
    color: #008fc8;
    font-weight: 650;
    text-decoration: none
}

.faq-answer a:hover {
    text-decoration: underline
}

.faq-statement {
    background: #092f48;
    color: #fff;
    padding: 90px 0
}

.faq-statement .wrap {
    max-width: 1050px
}

.faq-statement-kicker {
    color: #7dd9f8;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 12px;
    font-weight: 700
}

.faq-statement h2 {
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.08;
    letter-spacing: -.04em;
    margin: 16px 0 26px;
    color: #fff
}

.faq-statement a {
    color: #fff;
    text-decoration: none;
    font-weight: 650
}

.faq-statement a span {
    color: #58c9f2;
    margin-left: 8px
}

.faq-contact {
    background: #00aeef;
    color: #fff;
    padding: 82px 0
}

.faq-contact-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px
}

.faq-contact h2 {
    font-size: clamp(34px, 4vw, 54px);
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: -.035em
}

.faq-contact p {
    max-width: 690px;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
    margin: 0
}

.faq-contact-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 210px
}

.faq-contact .btn-white {
    display: inline-block;
    background: #fff;
    color: #087fae;
    border-radius: 999px;
    padding: 13px 24px;
    text-decoration: none;
    font-weight: 650
}

.faq-phone {
    color: #fff;
    text-decoration: none;
    font-weight: 650;
    font-size: 18px
}

@media(max-width:900px) {

    .faqhero-grid,
    .faq-intro-grid,
    .faq-layout {
        grid-template-columns: 1fr
    }

    .faqhero-art {
        display: none
    }

    .faq-jump-grid {
        grid-template-columns: 1fr 1fr
    }

    .faq-jump a {
        border-bottom: 1px solid #edf1f3
    }

    .faq-section-head {
        position: static
    }

    .faq-contact-inner {
        align-items: flex-start;
        flex-direction: column
    }

    .faq-layout {
        gap: 42px
    }

    .faq-intro-grid {
        gap: 28px
    }
}

@media(max-width:560px) {
    .faq-jump-grid {
        grid-template-columns: 1fr
    }

    .faqhero {
        padding: 66px 0
    }

    .faq-section,
    .faq-intro {
        padding: 68px 0
    }

    .faq-answer {
        padding-right: 8px
    }

    .faq-accordion summary {
        padding: 22px 2px
    }

    .faq-contact {
        padding: 64px 0
    }
}


/* Kontakt Seite  */
 
  .contact-hero-v2{position:relative;overflow:hidden;background:linear-gradient(116deg,#00aeef 0%,#009ddc 52%,#eaf8fd 52.1%,#f8fcfe 100%);min-height:620px}
.contact-hero-v2-grid{display:grid;grid-template-columns:58% 42%;min-height:620px;align-items:stretch}
.contact-hero-v2-copy{color:#fff;display:flex;flex-direction:column;justify-content:center;padding:78px 70px 72px 0;position:relative;z-index:2}



.contact-hero-v2 h1{font-size:clamp(46px,5.4vw,78px);line-height:1.02;letter-spacing:-.045em;color:#fff;margin:16px 0 24px;max-width:780px}
.contact-hero-v2 h1 strong{font-weight:750}.contact-hero-v2-copy>p{font-size:clamp(18px,1.5vw,21px);line-height:1.65;max-width:720px;color:rgba(255,255,255,.94)}
.contact-hero-v2 .hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.contact-hero-v2 .btn{border-radius:999px;padding:13px 25px;text-decoration:none;font-weight:650;transition:background .2s,color .2s}
.btn-dark{background:#073b5b;color:#fff}.btn-dark:hover{background:#052e47}.contact-hero-v2 .btn-white{background:#fff;color:#0784b7}.contact-hero-v2 .btn-white:hover{background:#f2f9fc}
.hero-person-note{margin-top:48px;padding-top:19px;border-top:1px solid rgba(255,255,255,.3);max-width:300px}.hero-person-note span{display:block;font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.75);margin-bottom:4px}.hero-person-note strong{font-size:17px}
.contact-hero-v2-photo{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.contact-hero-v2-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(234,248,253,.95) 0%,rgba(248,252,254,0) 28%)}
.contact-hero-v2-photo img{position:relative;z-index:1;width:min(92%,520px);height:570px !important;object-fit:cover;object-position:center 18%;border-radius:240px 240px 0 0 !important;box-shadow:0 30px 70px rgba(16,69,95,.14) !important;}
.portrait-halo{position:absolute;width:440px;height:440px;border-radius:50%;background:#d8f2fc;right:-50px;top:70px}
.signature-line{display:block;width:48px;height:4px;border-radius:5px;background:#00aeef}.signature-line.light{background:#fff}



.contact-quick{background:#fff;border-bottom:1px solid #e7edf0}
.contact-quick .quick-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.contact-quick a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:22px 20px;
    text-decoration:none;color:#24323a;border-right:1px solid #e9eef1;transition:background .2s}
.contact-quick a:hover{background:#f4fbfe}.contact-quick a:last-child{border-right:0}
.contact-quick b{display:block;font-size:15px}.contact-quick small{display:block;color:#77838a;margin-top:3px}.contact-quick i{font-style:normal;color:#00aeef}
.contact-direct{padding:96px 0}.contact-heading{max-width:720px;margin-bottom:48px}.contact-heading h2,.contact-form-intro h2,.office-card h2{font-size:clamp(36px,4vw,56px);line-height:1.08;letter-spacing:-.035em;margin:18px 0 14px}.contact-heading p{font-size:18px;color:#66737a}
.contact-methods{border-top:1px solid #dce4e8}.contact-method{display:grid;grid-template-columns:70px 1fr 40px;align-items:center;gap:22px;padding:30px 8px;border-bottom:1px solid #dce4e8;text-decoration:none;color:#1f2c34;transition:padding .2s,background .2s}.contact-method:hover{background:#f7fbfd;padding-left:18px;padding-right:18px}.method-no{font-size:13px;color:#00aeef;font-weight:750}.method-label{display:block;color:#7a858b;font-size:13px;margin-bottom:4px}.contact-method strong{display:block;font-size:clamp(20px,2vw,28px);font-weight:650}.contact-method small{display:block;color:#7a858b;margin-top:5px}.method-arrow{font-size:25px;color:#00aeef}
.contact-form-stage{background:#f2f7f9;padding:100px 0}.contact-form-stage-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}.contact-form-intro{padding-top:28px}.contact-form-intro>p{font-size:18px;line-height:1.75;color:#617078;max-width:520px}.contact-promise{display:flex;flex-direction:column;gap:11px;margin-top:34px}.contact-promise span:before{content:"✓";color:#00aeef;font-weight:750;margin-right:10px}
.contact-form-panel{background:#fff;border-radius:22px;padding:42px;box-shadow:0 24px 65px rgba(29,65,84,.08)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid #dce4e8;border-radius:12px;background:#fff;padding:15px 16px;font:inherit;color:#26343c}.form-grid select,.form-grid textarea,.form-grid .privacy,.form-grid button{grid-column:1/-1}.form-grid textarea{min-height:145px;resize:vertical}.privacy{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;color:#6e7a81;margin:6px 0}.privacy input{width:auto;margin-top:4px}.form-grid .btn-primary{justify-self:start;border:0;background:#00aeef;color:#fff;border-radius:999px;padding:13px 24px;font-weight:650;cursor:pointer}.form-grid .btn-primary:hover{background:#0097cf}
.contact-office{padding:100px 0}.contact-office-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:stretch}.office-card{padding:45px 0}.office-card p{font-size:18px;line-height:1.75;color:#5f6d75}.text-link{display:inline-block;margin-top:18px;color:#008fc8;text-decoration:none;font-weight:650}.text-link span{margin-left:8px}.office-visual{min-height:390px;position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(135deg,#eef8fc,#dff3fb)}
.map-lines{position:absolute;inset:-20%;background:repeating-linear-gradient(25deg,transparent 0 48px,rgba(0,174,239,.10) 49px 51px,transparent 52px 92px),repeating-linear-gradient(115deg,transparent 0 65px,rgba(7,59,91,.07) 66px 68px,transparent 69px 118px);transform:rotate(-4deg)}
.map-pin{position:absolute;left:55%;top:43%;width:54px;height:54px;border-radius:50% 50% 50% 0;background:#00aeef;transform:rotate(-45deg);box-shadow:0 16px 35px rgba(0,126,174,.22)}.map-pin span{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;left:19px;top:19px}
.map-label{position:absolute;left:calc(55% + 46px);top:42%;background:#fff;padding:14px 18px;border-radius:12px;box-shadow:0 14px 36px rgba(22,65,88,.12)}.map-label strong,.map-label small{display:block}.map-label small{color:#77838a;margin-top:3px}
@media(max-width:950px){.contact-hero-v2{background:linear-gradient(145deg,#00aeef 0%,#008fc8 100%)}.contact-hero-v2-grid{grid-template-columns:1fr}.contact-hero-v2-copy{padding:70px 0 45px}.contact-hero-v2-photo{min-height:430px;background:#eef9fd}.contact-hero-v2-photo img{height:420px !important;}.contact-quick .quick-grid{grid-template-columns:1fr 1fr}.contact-form-stage-grid,.contact-office-grid{grid-template-columns:1fr;gap:45px}.contact-methods{margin-top:20px}}
@media(max-width:600px){.contact-quick .quick-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid input{grid-column:1/-1}.contact-method{grid-template-columns:42px 1fr 28px}.contact-form-panel{padding:25px}.contact-direct,.contact-form-stage,.contact-office{padding:70px 0}.map-label{left:20px;top:auto;bottom:20px}.map-pin{left:60%;top:35%}}
 

input.wpcf7-submit.btn.btn--blue:not(:disabled) {
    opacity: 1;
    cursor: pointer;background: var(--blue);
    color: #fff;
}

input.wpcf7-submit.btn.btn--blue:not(:disabled):hover {
    background: #0098d1;
    color: var(--white);
}
.contact-final .signature{margin-bottom:24px}.contact-final-action{display:flex;align-items:center;justify-content:flex-end}

.contact-final {
    position: relative;
    overflow: hidden;
    padding: clamp(90px, 10vw, 150px) 0;
    color: #fff;
    background: linear-gradient(120deg, #07577b, #009ed8 55%, #00aeef)
}

.contact-final:after {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    right: -180px;
    top: -170px
}