/* ============================
   MEGA-MENÜ
   ============================ */

.va-mega-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 999;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.va-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.va-mega-menu__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}

.va-mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.va-mega-menu__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--color-card);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-base), transform var(--transition-fast);
}

.va-mega-menu__card:hover {
    background: var(--color-white);
    color: var(--color-text);
    transform: translateY(-2px);
}

.va-mega-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--color-bg);
    border-radius: 50%;
    color: var(--color-apricot);
}

.va-mega-menu__text {
    display: flex;
    flex-direction: column;
}

.va-mega-menu__text strong {
    font-family: var(--font-headline) !important;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.va-mega-menu__text span {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .va-mega-menu__grid {
        grid-template-columns: 1fr;
    }

    .va-mega-menu {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .ct-menu-items .sub-menu,
    .menu-item-has-children > .sub-menu {
        display: none !important;
    }
}

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

.va-footer {
    background-color: #4A6070 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 80px 0 30px !important;
    margin: 0 !important;
}

.va-footer * {
    color: rgba(255, 255, 255, 0.85);
}

.va-footer__inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

.va-footer__columns {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 60px !important;
    margin-bottom: 60px !important;
}

.va-footer__col--about {
    max-width: 350px;
}

.va-footer__heading {
    font-family: var(--font-headline) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 24px 0 !important;
    text-transform: none !important;
}

.va-footer__subheading {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 0 16px 0 !important;
}

.va-footer__text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 0 24px 0 !important;
}

.va-footer__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.va-footer__list li {
    margin-bottom: 12px !important;
    list-style: none !important;
}

.va-footer__list li::before {
    display: none !important;
}

.va-footer__list a {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.va-footer__list a:hover {
    color: #c07858 !important;
}

.va-footer__list--contact li {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.va-footer__address {
    line-height: 1.6 !important;
}

.va-footer__socials {
    display: flex !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.va-footer__socials a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}

.va-footer__socials a:hover {
    background: #c07858 !important;
    color: #ffffff !important;
}

.va-footer__bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 13px !important;
}

.va-footer__copyright {
    color: rgba(255, 255, 255, 0.5) !important;
}

.va-footer__legal {
    display: flex !important;
    gap: 24px !important;
}

.va-footer__legal a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    cursor: pointer;
}

.va-footer__legal a:hover {
    color: #c07858 !important;
}

@media (max-width: 768px) {
    .va-footer__columns {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .va-footer__bottom {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
}

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

.va-footer--minimal {
    padding: 40px 0 24px !important;
}

.va-footer-minimal__row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 24px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.va-footer-minimal__brand {
    display: flex !important;
    flex-direction: column !important;
}

.va-footer-minimal__brand-name {
    font-family: var(--font-headline) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.va-footer-minimal__brand-subtitle {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.va-footer-minimal__contact {
    display: flex !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

.va-footer-minimal__contact a {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.va-footer-minimal__contact a:hover {
    color: #c07858 !important;
}

.va-footer-minimal__legal {
    display: flex !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

.va-footer-minimal__legal a {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    cursor: pointer;
}

.va-footer-minimal__legal a:hover {
    color: #c07858 !important;
}

.va-footer-minimal__copyright {
    text-align: center !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

@media (max-width: 768px) {
    .va-footer-minimal__row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .va-footer-minimal__contact {
        gap: 12px !important;
    }

    .va-footer-minimal__legal {
        gap: 16px !important;
    }
}

/* ============================
   CTA-BLOCK (Navy, drei Action-Buttons)
   ============================ */

.va-cta-gespraech {
    background: var(--color-navy);
    padding: 64px 24px;
    color: #ffffff;
    text-align: center;
}

.va-cta-gespraech__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.va-cta-gespraech__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.va-cta-gespraech__sub {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 32px 0;
}

.va-cta-gespraech__buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Basis-Button-Stil */
.va-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

/* Soft-Buttons (Telefon / Email) - dezent hell auf Navy */
.va-cta-btn--soft {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.va-cta-btn--soft:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: translateY(-1px);
}

.va-cta-btn--soft svg {
    color: rgba(255, 255, 255, 0.7);
}

/* Primary-Button (Termin) - Apricot */
.va-cta-btn--primary {
    background: var(--color-apricot);
    color: #ffffff;
}

.va-cta-btn--primary:hover {
    background: var(--color-apricot-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 768px) {
    .va-cta-gespraech {
        padding: 48px 20px;
    }
    .va-cta-gespraech__headline {
        font-size: var(--fs-xl);
    }
    .va-cta-gespraech__buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .va-cta-btn {
        justify-content: center;
    }
}
/* ============================
   SERVICE-SLIDER
   ============================ */

.va-service-slider {
    background: var(--color-bg);
    padding: 80px 0;
}

.va-service-slider__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-service-slider__header {
    text-align: center;
    margin-bottom: 48px;
}

.va-service-slider__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-3xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 16px 0 0 0;
    line-height: 1.2;
}

.va-splide .splide__pagination {
    bottom: -40px;
}

.va-splide .splide__pagination__page {
    background: var(--color-border);
    opacity: 1;
    width: 8px;
    height: 8px;
    margin: 4px;
    transition: all 0.3s ease;
}

.va-splide .splide__pagination__page.is-active {
    background: var(--color-apricot);
    transform: scale(1.3);
}

.va-splide .splide__arrow {
    background: var(--color-card);
    width: 44px;
    height: 44px;
    opacity: 1;
    transition: background-color 0.2s ease;
}

.va-splide .splide__arrow:hover {
    background: var(--color-apricot);
}

.va-splide .splide__arrow svg {
    fill: var(--color-text);
    width: 16px;
    height: 16px;
}

.va-splide .splide__arrow:hover svg {
    fill: #ffffff;
}

.va-splide .splide__arrow--prev {
    left: -22px;
}

.va-splide .splide__arrow--next {
    right: -22px;
}

.va-service-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.va-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.va-service-card--dunkel {
    background: var(--color-navy);
    color: #ffffff;
}

.va-service-card--dunkel .va-service-card__title,
.va-service-card--dunkel .va-service-card__text,
.va-service-card--dunkel .va-service-card__nummer,
.va-service-card--dunkel .va-service-card__link {
    color: #ffffff;
}

.va-service-card__nummer {
    font-family: var(--font-headline);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-apricot);
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.va-service-card__title {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.va-service-card__text {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 32px 0;
    flex-grow: 1;
}

.va-service-card--dunkel .va-service-card__text {
    color: rgba(255, 255, 255, 0.75);
}

.va-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
    margin-top: auto;
}

.va-service-card__link:hover {
    gap: 12px;
    color: var(--color-apricot);
}

.va-service-card--dunkel .va-service-card__link:hover {
    color: var(--color-apricot);
}

@media (max-width: 768px) {
    .va-service-slider {
        padding: 60px 0;
    }

    .va-service-slider__headline {
        font-size: var(--fs-2xl);
    }

    .va-service-card {
        padding: 32px 24px;
    }

    .va-splide .splide__arrow {
        display: none;
    }
}

/* ============================
   FLUENT FORMS BASIC
   ============================ */

.fluentform {
    max-width: 700px;
    margin: 0 auto;
    font-family: var(--font-body);
}

.fluentform .ff-el-group {
    margin-bottom: 24px;
}

.fluentform label,
.fluentform .ff-el-input--label label {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-bottom: 8px !important;
    display: block;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform select,
.fluentform textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    color: var(--color-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none !important;
}

.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform select:focus,
.fluentform textarea:focus {
    border-color: var(--color-apricot) !important;
    box-shadow: 0 0 0 3px rgba(192, 120, 88, 0.1) !important;
    outline: none !important;
}

.fluentform textarea {
    min-height: 140px;
    resize: vertical;
}

.fluentform ::placeholder {
    color: var(--color-text-light) !important;
    opacity: 1;
}

.fluentform select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322272f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    padding-right: 48px !important;
}

.fluentform .ff-el-form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fluentform input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
    accent-color: var(--color-apricot);
    flex-shrink: 0;
}

.fluentform .ff-el-form-check-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--color-text-muted) !important;
    line-height: 1.5 !important;
    cursor: pointer;
}

.fluentform .ff-el-form-check-label a {
    color: var(--color-apricot) !important;
    text-decoration: underline;
}

.fluentform button[type="submit"],
.fluentform .ff-btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 32px !important;
    background-color: var(--color-apricot) !important;
    color: var(--color-white) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: var(--radius-pill) !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    box-shadow: none !important;
    margin-top: 8px;
}

.fluentform button[type="submit"]:hover,
.fluentform .ff-btn-submit:hover {
    background-color: var(--color-apricot-hover) !important;
    transform: translateY(-1px);
}

.fluentform .error,
.fluentform .ff-el-is-error {
    color: #d04545 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select {
    border-color: #d04545 !important;
}

.ff-message-success {
    background: var(--color-card) !important;
    border: 2px solid var(--color-apricot) !important;
    border-radius: var(--radius-lg) !important;
    padding: 32px !important;
    text-align: center !important;
    font-family: var(--font-body) !important;
    color: var(--color-text) !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    .fluentform input[type="text"],
    .fluentform input[type="email"],
    .fluentform input[type="tel"],
    .fluentform select,
    .fluentform textarea {
        font-size: 16px !important;
    }
}

/* ============================
   KONTAKT-SECTION
   ============================ */

.va-kontakt-section {
    background: var(--color-bg);
    padding: 80px 0;
}

.va-kontakt-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-kontakt-section__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: stretch;
}

.va-kontakt-section__info {
    padding-top: 0;
    display: flex;
    flex-direction: column;
}

.va-kontakt-section__info .va-section-label {
    margin-top: 0;
}

.va-kontakt-section__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-3xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 16px 0 24px 0;
    line-height: 1.2;
}

.va-kontakt-section__intro {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 32px 0;
}

/* Portrait-Bild auf der Kontakt-Seite */
.va-kontakt-section__portrait {
    margin: 0 0 32px 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.va-kontakt-section__portrait-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Spacer füllt den Raum, damit die Spalten gleich hoch bleiben */
.va-kontakt-section__spacer {
    flex: 1 1 auto;
    min-height: 0;
}

.va-kontakt-section__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.va-kontakt-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--color-card);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.va-kontakt-card:hover {
    background: var(--color-white);
    color: var(--color-text);
    transform: translateY(-2px);
}

.va-kontakt-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--color-bg);
    border-radius: 50%;
    color: var(--color-apricot);
}

.va-kontakt-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.va-kontakt-card__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.va-kontakt-card__text strong {
    font-family: var(--font-headline) !important;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.va-kontakt-section__socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.va-kontakt-section__socials-label {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-right: 8px;
}

.va-kontakt-section__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-card);
    color: var(--color-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.va-kontakt-section__socials a:hover {
    background: var(--color-apricot);
    color: #ffffff;
}

.va-kontakt-section__form {
    background: var(--color-card);
    padding: 48px 40px;
    border-radius: var(--radius-lg);
}

.va-kontakt-section__form-headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 32px 0;
}

.va-kontakt-section__form .fluentform input[type="text"],
.va-kontakt-section__form .fluentform input[type="email"],
.va-kontakt-section__form .fluentform input[type="tel"],
.va-kontakt-section__form .fluentform select,
.va-kontakt-section__form .fluentform textarea {
    background: var(--color-bg) !important;
}

@media (max-width: 1024px) {
    .va-kontakt-section__grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .va-kontakt-section__info {
        padding-top: 0;
    }

    .va-kontakt-section__spacer {
        display: none;
    }
}

@media (max-width: 768px) {
    .va-kontakt-section {
        padding: 60px 0;
    }

    .va-kontakt-section__headline {
        font-size: var(--fs-2xl);
    }

    .va-kontakt-section__form {
        padding: 32px 24px;
    }
}

/* ============================
   KONTAKT ALS BUTTON IM MENÜ (nur Mobile)
   ============================ */

/* Auf Desktop ausblenden — dort gibt es schon den Customizer-Button */
@media (min-width: 1000px) {
    .menu-button-kontakt {
        display: none !important;
    }
}

/* Auf Mobile: Kontakt-Menüpunkt als Apricot-Button */
@media (max-width: 999px) {
    /* Menüliste als Flex-Spalte über volle Höhe */
    ul[id^="menu-hauptmenue"] {
        display: flex !important;
        flex-direction: column !important;
        min-height: 70vh !important;
    }

    /* Kontakt-Button ans untere Ende drücken */
    .menu-button-kontakt {
        margin-top: auto !important;
        padding-top: 24px !important;
    }

    .menu-button-kontakt > a,
    .menu-button-kontakt > .ct-menu-link {
        background-color: var(--color-apricot) !important;
        color: #ffffff !important;
        border-radius: var(--radius-pill) !important;
        padding: 10px 24px !important;
        display: inline-block !important;
        text-align: center !important;
        transition: background-color 0.2s ease !important;
    }

    .menu-button-kontakt > a:hover,
    .menu-button-kontakt > .ct-menu-link:hover {
        background-color: var(--color-apricot-hover) !important;
        color: #ffffff !important;
    }
}

/* ============================
   STARTSEITE - HERO
   ============================ */

.va-hero {
    background: var(--color-bg);
    padding: 80px 0 100px;
}

.va-hero__inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

.va-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: stretch;
}

.va-hero__content {
    display: flex;
    flex-direction: column;
}

.va-hero__content .va-section-label {
    margin-top: 0;
}

.va-hero__buttons {
    margin-top: auto;
}

.va-hero__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-5xl);
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.1;
    margin: 16px 0 24px 0;
}

.va-hero__subline {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 32px 0;
    max-width: 480px;
}

.va-hero__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.va-hero__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    align-self: start;
    margin-top: 56px;
}

.va-hero__img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .va-hero__grid {
        gap: 40px;
    }
    .va-hero__headline {
        font-size: var(--fs-4xl);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .va-hero {
        padding: 48px 0 64px;
    }
    .va-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .va-hero__media {
        order: -1;
        max-width: 100%;
        margin-top: 0;
    }
    .va-hero__buttons .va-button {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ============================
   STARTSEITE - BILDGALERIE
   ============================ */

.va-galerie {
    background: var(--color-bg);
    padding: 80px 0;
}

.va-galerie__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-galerie__header {
    text-align: center;
    margin-bottom: 48px;
}

.va-galerie__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-3xl);
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.2;
    margin: 16px 0 0 0;
}

.va-galerie__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.va-galerie__item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.va-galerie__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s ease;
}

.va-galerie__item:hover .va-galerie__img {
    transform: scale(1.04);
}

/* Bild 1 (Hochformat) oben ausrichten, damit Gesicht sichtbar */
.va-galerie__grid .va-galerie__item:first-child .va-galerie__img {
    object-position: center 25% !important;
}

@media (max-width: 768px) {
    .va-galerie {
        padding: 60px 0;
    }
    .va-galerie__headline {
        font-size: var(--fs-2xl);
    }
    .va-galerie__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================
   STARTSEITE - PRIVAT & FIRMA
   ============================ */

.va-privat-firma {
    background: var(--color-bg);
    padding: 80px 0;
}

.va-privat-firma__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-privat-firma__header {
    text-align: center;
    margin-bottom: 56px;
}

.va-privat-firma__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-3xl);
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.2;
    margin: 16px 0 0 0;
}

.va-privat-firma__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.va-pf-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.va-pf-card--firma {
    background: var(--color-navy);
    color: #ffffff;
}

.va-pf-card__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.va-pf-card__tag {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-apricot);
}

.va-pf-card__title {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
}

.va-pf-card--firma .va-pf-card__title {
    color: #ffffff;
}

.va-pf-card__subtitle {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.va-pf-card--firma .va-pf-card__subtitle {
    color: rgba(255, 255, 255, 0.75);
}

.va-pf-card__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.va-pf-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--color-text);
    margin: 0 !important;
}

.va-pf-card__list li::before {
    display: none !important;
}

.va-pf-card__list li svg {
    flex-shrink: 0;
    color: var(--color-apricot);
    margin-top: 2px;
}

.va-pf-card--firma .va-pf-card__list li {
    color: rgba(255, 255, 255, 0.9);
}

.va-pf-card .va-button {
    margin-top: auto;
    align-self: flex-start;
}

/* Mobile */
@media (max-width: 768px) {
    .va-privat-firma {
        padding: 60px 0;
    }
    .va-privat-firma__headline {
        font-size: var(--fs-2xl);
    }
    .va-privat-firma__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .va-pf-card {
        padding: 36px 28px;
    }
    .va-pf-card .va-button {
        align-self: stretch;
        justify-content: center;
    }
}

/* ============================
   STARTSEITE - ÜBER MICH
   ============================ */

.va-uebermich {
    background: var(--color-card);
    padding: 100px 0;
}

.va-uebermich__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-uebermich__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: center;
}

.va-uebermich__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    width: 100%;
}

.va-uebermich__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.va-uebermich__content {
    display: flex;
    flex-direction: column;
}

.va-uebermich__content .va-section-label {
    margin-top: 0;
}

.va-uebermich__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-3xl);
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.2;
    margin: 16px 0 24px 0;
}

.va-uebermich__text {
    color: var(--color-text-muted);
    line-height: 1.7;
    font-size: var(--fs-base);
    margin-bottom: 24px;
}

.va-uebermich__text p {
    margin: 0 0 14px 0;
}

.va-uebermich__zitat {
    margin: 0 0 28px 0;
    padding: 24px 28px;
    background: var(--color-bg);
    border-left: 4px solid var(--color-apricot);
    border-radius: var(--radius-md);
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-family: var(--font-headline);
    font-size: var(--fs-lg);
    font-style: italic;
    color: var(--color-text);
    line-height: 1.4;
}

.va-uebermich__zitat svg {
    color: var(--color-apricot);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Tablet */
@media (max-width: 1024px) {
    .va-uebermich__grid {
        gap: 40px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .va-uebermich {
        padding: 60px 0;
    }
    .va-uebermich__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .va-uebermich__media {
        aspect-ratio: 3 / 4;
        max-width: 100%;
        width: 100%;
    }
    .va-uebermich__headline {
        font-size: var(--fs-2xl);
    }
    .va-uebermich__zitat {
        padding: 20px 22px;
        font-size: var(--fs-base);
    }
}

/* ============================
   KONTAKT-SECTION - HOME-VARIANTE
   (Navy-linke-Spalte, kein Portrait)
   ============================ */

.va-kontakt-section--home {
    background: var(--color-bg);
    padding: 80px 0;
}

/* Linke Spalte: Navy-Karte */
.va-kontakt-section--home .va-kontakt-section__info {
    background: var(--color-navy);
    padding: 48px 40px;
    border-radius: var(--radius-lg);
    color: #ffffff;
}

/* Pille auf dunkel: heller Hintergrund, dezentere Optik */
.va-kontakt-section--home .va-kontakt-section__info .va-section-label {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

.va-kontakt-section--home .va-kontakt-section__headline {
    color: #ffffff;
}

.va-kontakt-section--home .va-kontakt-section__intro {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 32px;
}

/* Kontakt-Karten auf Navy: dezenter heller Hintergrund */
.va-kontakt-section--home .va-kontakt-card {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.va-kontakt-section--home .va-kontakt-card:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateY(-2px);
}

.va-kontakt-section--home .va-kontakt-card__icon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-apricot);
}

.va-kontakt-section--home .va-kontakt-card__label {
    color: rgba(255, 255, 255, 0.55);
}

.va-kontakt-section--home .va-kontakt-card__text strong {
    color: #ffffff;
}

/* Socials auf Navy */
.va-kontakt-section--home .va-kontakt-section__socials-label {
    color: rgba(255, 255, 255, 0.6);
}

.va-kontakt-section--home .va-kontakt-section__socials a {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.va-kontakt-section--home .va-kontakt-section__socials a:hover {
    background: var(--color-apricot);
    color: #ffffff;
}

/* Rechte Form-Box behält Card-Farbe (beige) */
/* Mobile */
@media (max-width: 1024px) {
    .va-kontakt-section--home .va-kontakt-section__info {
        padding: 36px 28px;
    }
}

/* ============================
   STARTSEITE - TRENNLINIEN
   ============================ */

/* Trennlinie unten an jeder Startseiten-Sektion */
.va-home .va-hero,
.va-home .va-service-slider,
.va-home .va-galerie,
.va-home .va-privat-firma,
.va-home .va-uebermich,
.va-home .va-kontakt-section {
    position: relative;
}

.va-home .va-hero::after,
.va-home .va-service-slider::after,
.va-home .va-galerie::after,
.va-home .va-privat-firma::after,
.va-home .va-uebermich::after {
    content: "";
    display: block;
    width: calc(100% - 48px);
    max-width: 1152px;
    height: 1px;
    background: var(--color-border);
    margin: 60px auto 0;
    position: relative;
}

/* Die Über-mich-Sektion hat einen anderen Hintergrund (Card),
   die Linie muss heller/dezenter sein */
.va-home .va-uebermich::after {
    background: rgba(0, 0, 0, 0.08);
}

/* Mobile: kleiner Innenabstand */
@media (max-width: 768px) {
    .va-home .va-hero::after,
    .va-home .va-service-slider::after,
    .va-home .va-galerie::after,
    .va-home .va-privat-firma::after,
    .va-home .va-uebermich::after {
        width: calc(100% - 32px);
        margin-top: 40px;
    }
}

/* ============================
   KONTAKT-SECTION — HOME-VARIANTE
   (Navy linke Spalte als Rechteck, läuft links + unten raus)
   (nur Startseite, Kontakt-Seite bleibt unverändert)
   ============================ */

/* Sektion auf Startseite: kein unteres Padding, Inhalt darf rauslaufen */
.va-kontakt-section--home {
    padding-bottom: 0 !important;
    overflow: visible;
    position: relative;
}

.va-kontakt-section--home .va-kontakt-section__inner {
    overflow: visible;
}

/* Linke Spalte: Navy-Rechteck, ohne Rundungen */
.va-kontakt-section--home .va-kontakt-section__info {
    background: var(--color-navy);
    padding: 64px 40px 64px 40px;
    color: #ffffff;
    border-radius: 0;
    position: relative;
}

/* Pseudo-Element verlängert Navy nach LINKS bis zum Bildschirmrand */
.va-kontakt-section--home .va-kontakt-section__info::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    background: var(--color-navy);
}

/* Trennlinie der Kontakt-Section auf Startseite ausblenden */
.va-home .va-kontakt-section::after {
    display: none !important;
}

/* Pille auf Navy: dezent hell */
.va-kontakt-section--home .va-kontakt-section__info .va-section-label {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

/* Headline weiß */
.va-kontakt-section--home .va-kontakt-section__headline {
    color: #ffffff;
}

/* Intro-Text gedämpftes Weiß */
.va-kontakt-section--home .va-kontakt-section__intro {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 32px;
}

/* Kontakt-Karten auf Navy: glasiger Effekt */
.va-kontakt-section--home .va-kontakt-card {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.va-kontakt-section--home .va-kontakt-card:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateY(-2px);
}

.va-kontakt-section--home .va-kontakt-card__icon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-apricot);
}

.va-kontakt-section--home .va-kontakt-card__label {
    color: rgba(255, 255, 255, 0.55);
}

.va-kontakt-section--home .va-kontakt-card__text strong {
    color: #ffffff;
}

/* Socials auf Navy */
.va-kontakt-section--home .va-kontakt-section__socials-label {
    color: rgba(255, 255, 255, 0.6);
}

.va-kontakt-section--home .va-kontakt-section__socials a {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.va-kontakt-section--home .va-kontakt-section__socials a:hover {
    background: var(--color-apricot);
    color: #ffffff;
}

/* ============================
   KONTAKT-SECTION HOME — Rechte Spalte ohne Kasten
   ============================ */

/* Rechte Spalte: kein Kasten/Hintergrund auf Startseite */
.va-kontakt-section--home .va-kontakt-section__form {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Form-Felder bekommen helleren Hintergrund (Card-Farbe) */
.va-kontakt-section--home .va-kontakt-section__form .fluentform input[type="text"],
.va-kontakt-section--home .va-kontakt-section__form .fluentform input[type="email"],
.va-kontakt-section--home .va-kontakt-section__form .fluentform input[type="tel"],
.va-kontakt-section--home .va-kontakt-section__form .fluentform select,
.va-kontakt-section--home .va-kontakt-section__form .fluentform textarea {
    background: var(--color-card) !important;
}

/* ============================
   KONTAKT-SECTION HOME — Mobile
   ============================ */

@media (max-width: 1024px) {
    .va-kontakt-section--home .va-kontakt-section__info {
        padding: 48px 28px;
    }
}

@media (max-width: 768px) {
    /* Auf Mobile: Navy-Block füllt die ganze Breite */
    .va-kontakt-section--home .va-kontakt-section__info {
        padding: 40px 24px;
    }
}

/* ============================
   BERATUNG ABSICHERUNG
   ============================ */

/* Label/Pille zentriert oben */
.va-beratung__label-wrap {
    text-align: center;
    padding: 48px 24px 0;
}

/* HERO BLOCK */
.va-abs-hero {
    padding: 32px 0 0;
    background: var(--color-bg);
}

.va-abs-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-abs-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
}

/* Hero-Card (links, Navy) */
.va-abs-hero__card {
    background: var(--color-navy);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.va-abs-hero__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-3xl);
    font-weight: 300;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.va-abs-hero__text {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 0 24px 0;
    font-size: var(--fs-base);
}

.va-abs-hero__card .va-button {
    align-self: flex-start;
}

/* Hero-Bild (rechts) */
.va-abs-hero__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.va-abs-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* DREI KARTEN */
.va-abs-cards {
    padding: 32px 0 64px;
    background: var(--color-bg);
}

.va-abs-cards__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

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

.va-abs-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.va-abs-card--dunkel {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #ffffff;
}

.va-abs-card__title {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    margin: 0;
}

.va-abs-card--dunkel .va-abs-card__title {
    color: #ffffff;
}

.va-abs-card__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

.va-abs-card--dunkel .va-abs-card__text {
    color: rgba(255, 255, 255, 0.78);
}

.va-abs-card__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px !important;
}

.va-abs-card--dunkel .va-abs-card__list {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.va-abs-card__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text);
    margin: 0 !important;
    line-height: 1.4;
}

.va-abs-card__list li::before {
    display: none !important;
}

.va-abs-card--dunkel .va-abs-card__list li {
    color: rgba(255, 255, 255, 0.9);
}

.va-abs-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-apricot);
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 1024px) {
    .va-abs-cards__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .va-abs-hero__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .va-abs-hero__card {
        padding: 36px 28px;
    }
    .va-abs-hero__headline {
        font-size: var(--fs-2xl);
    }
    .va-abs-card {
        padding: 28px 24px;
    }
    .va-beratung__label-wrap {
        padding-top: 32px;
    }
}

/* ============================
   BERATUNG BAUFINANZIERUNG
   ============================ */

/* Headline-Block (zentriert) */
.va-bf-headline {
    text-align: center;
    padding: 24px 24px 48px;
    background: var(--color-bg);
}

.va-bf-headline h1 {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-4xl);
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.2;
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
}

/* Karten-Sektion */
.va-bf-cards {
    background: var(--color-bg);
    padding: 0 0 64px;
}

.va-bf-cards__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.va-bf-cards__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Karten-Basis */
.va-bf-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
}

.va-bf-card--dunkel {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #ffffff;
}

/* Apricot-Akzent-Linie oben */
.va-bf-card__accent {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--color-apricot);
    border-radius: 2px;
    margin-bottom: 16px;
}

/* Titel */
.va-bf-card__title {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 14px 0;
}

.va-bf-card__sub {
    display: block;
    font-weight: 300;
    color: var(--color-text-muted);
}

.va-bf-card--dunkel .va-bf-card__title {
    color: #ffffff;
}

.va-bf-card--dunkel .va-bf-card__sub {
    color: rgba(255, 255, 255, 0.7);
}

/* Text */
.va-bf-card__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

.va-bf-card--dunkel .va-bf-card__text {
    color: rgba(255, 255, 255, 0.78);
}

/* Breite Karte mit Pills */
.va-bf-card--wide {
    padding: 28px 32px;
}

.va-bf-card__wide-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
}

.va-bf-card__wide-content .va-bf-card__title {
    font-size: var(--fs-lg);
    margin-bottom: 6px;
}

.va-bf-card__wide-content .va-bf-card__text {
    margin-top: 4px;
}

.va-bf-card__pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.va-bf-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--color-card-blue);
    color: var(--color-text);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

/* Mobile */
@media (max-width: 1024px) {
    .va-bf-headline h1 {
        font-size: var(--fs-3xl);
    }
    .va-bf-cards__row {
        grid-template-columns: 1fr;
    }
    .va-bf-card__wide-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .va-bf-headline {
        padding: 16px 20px 40px;
    }
    .va-bf-headline h1 {
        font-size: var(--fs-2xl);
    }
    .va-bf-card {
        padding: 28px 24px;
    }
    .va-bf-card--wide {
        padding: 24px;
    }
    .va-bf-card__pills {
        grid-template-columns: 1fr;
    }
}

/* Baufinanzierung: Highlight in eigener Zeile */
.va-bf-card__highlight-block {
    display: block;
}

/* ============================
   BERATUNG GELDANLAGE
   ============================ */

/* Headline-Block (zentriert) */
.va-gel-headline {
    text-align: center;
    padding: 24px 24px 56px;
    background: var(--color-bg);
}

.va-gel-headline h1 {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-4xl);
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.2;
    margin: 0 auto 24px;
    max-width: 800px;
}

.va-gel-headline__highlight {
    display: block;
}

.va-gel-headline__sub {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* 2x2 Karten-Grid */
.va-gel-cards {
    background: var(--color-bg);
    padding: 0 0 64px;
}

.va-gel-cards__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-gel-cards__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.va-gel-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.va-gel-card--dunkel {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #ffffff;
}

.va-gel-card__title {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 14px 0;
    line-height: 1.2;
}

.va-gel-card--dunkel .va-gel-card__title {
    color: #ffffff;
}

.va-gel-card__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

.va-gel-card--dunkel .va-gel-card__text {
    color: rgba(255, 255, 255, 0.78);
}

/* 3 Schritte + Bild */
.va-gel-steps {
    background: var(--color-bg);
    padding: 64px 0;
}

.va-gel-steps__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-gel-steps__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 48px 0;
    line-height: 1.3;
}

.va-gel-steps__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.va-gel-steps__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.va-gel-step {
    list-style: none;
    margin: 0 !important;
    padding: 0;
}

.va-gel-step::before {
    display: none !important;
}

.va-gel-step__nummer {
    display: block;
    font-family: var(--font-headline);
    font-size: 36px;
    font-weight: 300;
    color: var(--color-apricot);
    line-height: 1;
    margin-bottom: 8px;
}

.va-gel-step__titel {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.va-gel-step__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/* Bild rechts */
.va-gel-steps__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.va-gel-steps__img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Mobile */
@media (max-width: 1024px) {
    .va-gel-headline h1 {
        font-size: var(--fs-3xl);
    }
    .va-gel-steps__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .va-gel-steps__media {
        position: static;
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .va-gel-headline {
        padding: 16px 20px 40px;
    }
    .va-gel-headline h1 {
        font-size: var(--fs-2xl);
    }
    .va-gel-cards__grid {
        grid-template-columns: 1fr;
    }
    .va-gel-card {
        padding: 28px 24px;
        min-height: 0;
    }
    .va-gel-steps {
        padding: 48px 0;
    }
    .va-gel-steps__list {
        gap: 28px;
    }
    .va-gel-step__nummer {
        font-size: 28px;
    }
}

/* ============================
   BERATUNG FIRMEN (durchgehend Navy mit Logo-Tausch + beigem Footer)
   ============================ */

/* Body-Hintergrund auf der Firmen-Seite navy */
body:has(.va-beratung--firmen) {
    background: var(--color-navy);
}

/* Header-Wrap auf der Firmen-Seite navy */
body:has(.va-beratung--firmen) header,
body:has(.va-beratung--firmen) .ct-sticky-container,
body:has(.va-beratung--firmen) [data-row="middle"],
body:has(.va-beratung--firmen) [data-row="top"],
body:has(.va-beratung--firmen) [data-row="bottom"] {
    background: var(--color-navy) !important;
    border-bottom: none !important;
}

/* Menü-Links + Logo-Text hell auf Navy */
body:has(.va-beratung--firmen) .ct-menu-link,
body:has(.va-beratung--firmen) .site-title,
body:has(.va-beratung--firmen) .ct-header-text,
body:has(.va-beratung--firmen) .site-title a {
    color: #ffffff !important;
}

/* === LOGO WEISS auf Firmen-Seite (SVG umfärben) === */
body:has(.va-beratung--firmen) .site-logo-container svg .cls-1,
body:has(.va-beratung--firmen) .default-logo .cls-1 {
    fill: #ffffff !important;
}

/* Main-Bereich mit Navy-Hintergrund */
.va-beratung--firmen {
    background: var(--color-navy);
    color: #ffffff;
}

/* Label/Pille hellere Variante */
.va-firmen__label-wrap {
    padding-top: 48px;
}

.va-section-label--light {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

/* Headline */
.va-firmen-headline {
    text-align: center;
    padding: 24px 24px 56px;
    background: var(--color-navy);
}

.va-firmen-headline h1 {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-4xl);
    font-weight: 300;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 800px;
}

.va-firmen-headline__highlight {
    display: block;
}

/* Karten-Sektion */
.va-firmen-cards {
    background: var(--color-navy);
    padding: 0 0 64px;
}

.va-firmen-cards__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.va-firmen-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 32px;
    align-items: center;
}

.va-firmen-card__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.va-firmen-card__tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--color-text-muted);
}

.va-firmen-card__tag {
    display: inline-block;
}

.va-firmen-card__tag-sep {
    color: var(--color-apricot);
    font-weight: 600;
}

.va-firmen-card__head::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--color-apricot);
    border-radius: 2px;
    margin-bottom: 4px;
}

.va-firmen-card__title {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
}

.va-firmen-card__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/* CTA-Block: kein zusätzliches oberes Padding, fließt nahtlos */
.va-beratung--firmen .va-cta-gespraech {
    padding-top: 32px;
}

/* === FOOTER auf Firmen-Seite: beige/sandig === */
body:has(.va-beratung--firmen) .va-footer {
    background-color: #c0b8a8 !important;
    color: var(--color-text) !important;
}

body:has(.va-beratung--firmen) .va-footer *,
body:has(.va-beratung--firmen) .va-footer-minimal__brand-name,
body:has(.va-beratung--firmen) .va-footer-minimal__brand-subtitle,
body:has(.va-beratung--firmen) .va-footer-minimal__contact a,
body:has(.va-beratung--firmen) .va-footer-minimal__legal a,
body:has(.va-beratung--firmen) .va-footer-minimal__copyright {
    color: var(--color-text) !important;
}

body:has(.va-beratung--firmen) .va-footer-minimal__row {
    border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

body:has(.va-beratung--firmen) .va-footer-minimal__contact a:hover,
body:has(.va-beratung--firmen) .va-footer-minimal__legal a:hover {
    color: var(--color-apricot) !important;
}

/* Mobile */
@media (max-width: 1024px) {
    .va-firmen-headline h1 {
        font-size: var(--fs-3xl);
    }
    .va-firmen-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 28px;
    }
}

@media (max-width: 768px) {
    .va-firmen-headline {
        padding: 16px 20px 40px;
    }
    .va-firmen-headline h1 {
        font-size: var(--fs-2xl);
    }
    .va-firmen-card {
        padding: 20px 24px;
    }
}

/* ============================
   PHILOSOPHIE-SEITE
   ============================ */

/* Hero mit Hintergrundbild */
.va-phi-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: visible;
    margin-top: -1px;
    margin-bottom: -260px;
    padding-bottom: 260px;
}

.va-phi-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.va-phi-hero__bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Dezentes Overlay rechts für Text-Lesbarkeit */
.va-phi-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(20, 32, 48, 0.55) 0%, rgba(20, 32, 48, 0.25) 50%, rgba(20, 32, 48, 0) 100%);
    z-index: 2;
}

.va-phi-hero__inner {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px 100px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.va-phi-hero__content {
    max-width: 480px;
    text-align: right;
    color: #ffffff;
}

.va-phi-hero__headline {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-4xl);
    font-weight: 300;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 24px 0;
}

.va-phi-hero__line1,
.va-phi-hero__line2 {
    display: block;
}

.va-phi-hero__headline strong {
    font-weight: 600;
}

.va-phi-hero__subline {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    margin: 0;
}

/* Werte-Sektion zieht in das Hero-Bild rein (Karten überlappen) */
.va-phi-werte {
    background: transparent;
    padding: 0 0 80px;
    position: relative;
    z-index: 4;
}

/* Pille + Subtitle mitten im Hero-Bild */
.va-phi-werte__label-wrap {
    text-align: center;
    margin: 0 auto 32px;
    padding-top: 0;
    position: relative;
    z-index: 5;
}

.va-phi-werte__subtitle {
    font-family: var(--font-headline);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.9);
    margin: 12px 0 0 0;
    font-weight: 400;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.va-phi-werte__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-phi-werte__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Werte-Karte */
.va-phi-wert {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
}

.va-phi-wert__nummer {
    display: block;
    font-family: var(--font-headline);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-apricot);
    margin-bottom: 12px;
}

.va-phi-wert__titel {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.va-phi-wert__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/* === HEADER auf Philosophie-Seite: transparent über Hero === */
body:has(.va-philosophie) .ct-sticky-container,
body:has(.va-philosophie) header,
body:has(.va-philosophie) [data-row="middle"],
body:has(.va-philosophie) [data-row="top"],
body:has(.va-philosophie) [data-row="bottom"] {
    background: transparent !important;
    border-bottom: none !important;
}

/* Menü-Links weiß für Lesbarkeit auf Bild */
body:has(.va-philosophie) .ct-menu-link {
    color: #ffffff !important;
}

/* Logo auf Philosophie-Seite ausblenden (im Figma nicht vorhanden) */
body:has(.va-philosophie) .site-branding,
body:has(.va-philosophie) .site-logo-container,
body:has(.va-philosophie) .default-logo {
    display: none !important;
}

/* Header über das Hero-Bild legen */
body:has(.va-philosophie) .ct-sticky-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

body:has(.va-philosophie) {
    position: relative;
}

body:has(.va-philosophie) .va-main {
    background: var(--color-bg);
}

/* === FOOTER auf Philosophie-Seite: beige === */
body:has(.va-philosophie) .va-footer {
    background-color: #c0b8a8 !important;
    color: var(--color-text) !important;
}

body:has(.va-philosophie) .va-footer *,
body:has(.va-philosophie) .va-footer-minimal__brand-name,
body:has(.va-philosophie) .va-footer-minimal__brand-subtitle,
body:has(.va-philosophie) .va-footer-minimal__contact a,
body:has(.va-philosophie) .va-footer-minimal__legal a,
body:has(.va-philosophie) .va-footer-minimal__copyright {
    color: var(--color-text) !important;
}

body:has(.va-philosophie) .va-footer-minimal__row {
    border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

body:has(.va-philosophie) .va-footer-minimal__contact a:hover,
body:has(.va-philosophie) .va-footer-minimal__legal a:hover {
    color: var(--color-apricot) !important;
}

/* Mobile */
@media (max-width: 1024px) {
    .va-phi-hero {
        min-height: 600px;
    }
    .va-phi-hero__headline {
        font-size: var(--fs-3xl);
    }
    .va-phi-werte {
        margin-top: -180px;
    }
}

@media (max-width: 768px) {
    .va-phi-hero {
        min-height: 520px;
    }
    .va-phi-hero__inner {
        padding: 100px 20px 60px;
        justify-content: flex-start;
    }
    .va-phi-hero__content {
        text-align: left;
        max-width: 100%;
    }
    .va-phi-hero__headline {
        font-size: var(--fs-2xl);
    }
    .va-phi-werte {
        margin-top: -120px;
        padding-bottom: 60px;
    }
    .va-phi-werte__grid {
        grid-template-columns: 1fr;
    }
    .va-phi-wert {
        padding: 28px 24px;
    }
}

/* ============================
   PHILOSOPHIE - Fixes für Überlapp + Trennlinie weg
   ============================ */

/* Trennlinie unter Header auf Philosophie-Seite weg */
body:has(.va-philosophie) .ct-header-wrapper,
body:has(.va-philosophie) header,
body:has(.va-philosophie) .ct-sticky-container,
body:has(.va-philosophie) [data-row="middle"] {
    border: none !important;
    box-shadow: none !important;
}

/* Sicherstellen, dass main keine Default-Margins blockt */
body:has(.va-philosophie) .va-main,
body:has(.va-philosophie) .va-philosophie {
    overflow: visible !important;
}

/* Werte-Sektion mit höherem z-index und nochmal überschriebenem margin */


/* Pille muss sichtbar hoch */
.va-philosophie .va-phi-werte__label-wrap {
    margin: 0 auto 40px !important;
    position: relative;
    z-index: 11;
}

/* ============================
   PHILOSOPHIE - Finale Fixes
   ============================ */

/* 1. Trennlinie unter Header komplett weg (auch wp-Body-Border) */
body:has(.va-philosophie) .ct-header-wrapper,
body:has(.va-philosophie) header,
body:has(.va-philosophie) .ct-sticky-container,
body:has(.va-philosophie) [data-row="middle"],
body:has(.va-philosophie) [data-row="middle"]::after,
body:has(.va-philosophie) .ct-container::after {
    border: none !important;
    box-shadow: none !important;
}

body:has(.va-philosophie) header::after,
body:has(.va-philosophie) header::before {
    display: none !important;
}

/* 2. Menü-Schriftfarbe Navy (statt weiß) */
body:has(.va-philosophie) .ct-menu-link {
    color: var(--color-navy) !important;
}

body:has(.va-philosophie) .ct-menu-link:hover {
    color: var(--color-apricot) !important;
}

/* 3. Pille "Meine Werte" breiter */
.va-philosophie .va-phi-werte__label-wrap .va-section-label {
    padding: 8px 32px !important;
    font-size: 13px;
    letter-spacing: 0.15em;
}

/* 4. Highlight "verstehen" in Apricot */
.va-phi-hero__headline strong {
    color: var(--color-apricot);
    font-weight: 600;
}

/* 5. Karten: kleiner Akzent-Strich oben + dunklerer Hintergrund + Hover */
.va-phi-wert {
    background: #e7e3dc;  /* etwas dunkler als var(--color-card) */
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: default;
}

/* Apricot-Strich oben links auf jeder Karte */
.va-phi-wert::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: var(--color-apricot);
    border-radius: 2px;
    margin-bottom: 18px;
}

.va-phi-wert__nummer {
    margin-bottom: 12px;
}

/* Hover-Interaktion: Karte hebt sich, etwas heller, Akzent-Strich wird länger */
.va-phi-wert:hover {
    transform: translateY(-4px);
    background: #efebe4;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.va-phi-wert::before {
    transition: width 0.3s ease;
}

.va-phi-wert:hover::before {
    width: 52px;
}

/* Nummer wird beim Hover heller (Akzent) */
.va-phi-wert__nummer {
    transition: color 0.3s ease;
}

.va-phi-wert:hover .va-phi-wert__nummer {
    color: var(--color-apricot-hover);
}

/* ============================
   PHILOSOPHIE - Trennlinie definitiv weg
   ============================ */

body:has(.va-philosophie) header,
body:has(.va-philosophie) header *,
body:has(.va-philosophie) .ct-header-wrapper,
body:has(.va-philosophie) [class*="ct-header"],
body:has(.va-philosophie) [class*="ct-sticky"],
body:has(.va-philosophie) [data-row],
body:has(.va-philosophie) .ct-container {
    border-bottom: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

body:has(.va-philosophie) header::after,
body:has(.va-philosophie) header::before,
body:has(.va-philosophie) .ct-sticky-container::after,
body:has(.va-philosophie) .ct-sticky-container::before,
body:has(.va-philosophie) [data-row]::after,
body:has(.va-philosophie) [data-row]::before {
    display: none !important;
    border: 0 !important;
}

/* ============================
   PHILOSOPHIE - Stagger-Einrück-Animation der Karten
   ============================ */

@keyframes va-phi-cardin {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.va-phi-wert {
    opacity: 0;
    animation: va-phi-cardin 0.7s ease forwards;
}

/* Reihenfolge: jede Karte etwas später */
.va-phi-wert:nth-child(1) {
    animation-delay: 0.1s;
}
.va-phi-wert:nth-child(2) {
    animation-delay: 0.3s;
}
.va-phi-wert:nth-child(3) {
    animation-delay: 0.5s;
}
.va-phi-wert:nth-child(4) {
    animation-delay: 0.7s;
}

/* Hover-Verhalten muss nach Animation noch funktionieren */
.va-phi-wert:hover {
    animation-play-state: paused;
}

/* Falls Nutzer Animationen reduziert haben möchte, alles abschalten */
@media (prefers-reduced-motion: reduce) {
    .va-phi-wert {
        opacity: 1;
        animation: none;
    }
}

/* ============================
   ÜBER MICH SEITE
   ============================ */

/* Body & Main bekommen Card-Hintergrund (sandig) wie im Figma */
body:has(.va-ueber-mich) {
    background: var(--color-card);
}

body:has(.va-ueber-mich) .va-main {
    background: var(--color-card);
}

/* Header-Hintergrund auf Card-Farbe */
body:has(.va-ueber-mich) header,
body:has(.va-ueber-mich) .ct-sticky-container,
body:has(.va-ueber-mich) [data-row="middle"] {
    background: var(--color-card) !important;
    border: none !important;
    box-shadow: none !important;
}

body:has(.va-ueber-mich) header::after,
body:has(.va-ueber-mich) .ct-sticky-container::after,
body:has(.va-ueber-mich) [data-row]::after {
    display: none !important;
}

/* HERO */
.va-um-hero {
    padding: 24px 0 48px;
}

.va-um-hero__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-um-hero__grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 32px;
}

.va-um-hero__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    align-self: start;
    width: 100%;
}

.va-um-hero__img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.va-um-hero__content {
    padding-top: 8px;
}

.va-um-hero__name {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 16px 0 4px 0;
    line-height: 1.2;
}

.va-um-hero__subtitle {
    font-family: var(--font-headline) !important;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 16px 0;
    line-height: 1.2;
    position: relative;
    padding-bottom: 12px;
}

/* Apricot-Akzentstrich unter Subtitle */
.va-um-hero__subtitle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--color-apricot);
    border-radius: 2px;
}

.va-um-hero__bio {
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--color-text);
}

.va-um-hero__bio p {
    margin: 0 0 14px 0;
}

.va-um-hero__bio p:last-child {
    margin-bottom: 0;
}

/* Pills-Reihe unter Hero — verteilt über die volle Container-Breite */
.va-um-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 0 0 24px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.va-um-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1;
}

/* WERDEGANG TIMELINE */
.va-um-werdegang {
    padding: 48px 0;
    background: var(--color-card);
}

.va-um-werdegang__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-um-werdegang__label {
    display: inline-block;
    font-family: var(--font-headline);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    padding-left: 8px;
}

.va-um-timeline {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

/* Vertikale Linie links */
.va-um-timeline::before {
    content: "";
    position: absolute;
    left: 92px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: rgba(0, 0, 0, 0.12);
}

.va-um-timeline__item {
    display: grid;
    grid-template-columns: 80px 24px 1fr;
    align-items: center;
    gap: 0;
    list-style: none !important;
    margin: 0 !important;
    position: relative;
}

.va-um-timeline__item::before {
    display: none !important;
}

.va-um-timeline__jahr {
    font-family: var(--font-headline);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.va-um-timeline__dot {
    display: block;
    width: 12px;
    height: 12px;
    background: var(--color-apricot);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.va-um-timeline__card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    margin-left: 16px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.va-um-timeline__card:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Apricot-Punkt wird beim Hover größer */
.va-um-timeline__dot {
    transition: transform 0.3s ease;
}

.va-um-timeline__item:hover .va-um-timeline__dot {
    transform: scale(1.4);
}

.va-um-timeline__titel {
    font-family: var(--font-headline) !important;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.va-um-timeline__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

/* GROSSES BILD UNTEN */
.va-um-bild {
    padding: 24px 0 64px;
    background: var(--color-card);
}

.va-um-bild__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.va-um-bild__img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* === FOOTER auf Über-mich-Seite: beige === */
body:has(.va-ueber-mich) .va-footer {
    background-color: #c0b8a8 !important;
    color: var(--color-text) !important;
}

body:has(.va-ueber-mich) .va-footer *,
body:has(.va-ueber-mich) .va-footer-minimal__brand-name,
body:has(.va-ueber-mich) .va-footer-minimal__brand-subtitle,
body:has(.va-ueber-mich) .va-footer-minimal__contact a,
body:has(.va-ueber-mich) .va-footer-minimal__legal a,
body:has(.va-ueber-mich) .va-footer-minimal__copyright {
    color: var(--color-text) !important;
}

body:has(.va-ueber-mich) .va-footer-minimal__row {
    border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

body:has(.va-ueber-mich) .va-footer-minimal__contact a:hover,
body:has(.va-ueber-mich) .va-footer-minimal__legal a:hover {
    color: var(--color-apricot) !important;
}

/* Mobile */
@media (max-width: 1024px) {
    .va-um-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .va-um-hero__media {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .va-um-hero {
        padding: 16px 0 32px;
    }
    .va-um-pills {
        gap: 8px;
    }
    .va-um-pill {
        font-size: 12px;
        padding: 6px 14px;
    }
    .va-um-werdegang {
        padding: 40px 0;
    }
    .va-um-timeline::before {
        left: 70px;
    }
    .va-um-timeline__item {
        grid-template-columns: 60px 20px 1fr;
    }
    .va-um-timeline__jahr {
        font-size: 12px;
    }
    .va-um-timeline__card {
        padding: 14px 18px;
        margin-left: 12px;
    }
    .va-um-timeline__titel {
        font-size: 14px;
    }
    .va-um-bild {
        padding: 16px 0 48px;
    }
}

/* ============================
   EINHEITLICHE ABSTÄNDE ZU TRENNLINIEN
   60px Desktop / 40px Mobile — überall
   ============================ */

/* Trennlinie unter dem Header */
header,
.ct-sticky-container,
[data-row="middle"] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Der Logo-Header bekommt unten 60px Abstand zur Linie */
header .ct-container,
.ct-sticky-container .ct-container,
[data-row="middle"] .ct-container {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/* Section unter dem Header bekommt 60px Padding-Top */
.va-main > section:first-child,
.va-main > .va-beratung__label-wrap:first-child {
    padding-top: 60px !important;
}

/* Über mich: Pills-Trennlinie - gleicher Abstand */
.va-um-pills {
    margin-top: 60px !important;
    padding-top: 0 !important;
    padding-bottom: 60px !important;
}

/* Trennlinien-Abstand bei Startseiten-Sektionen ist bereits 60/40px ✓ */

/* Mobile: alle Abstände auf 40px */
@media (max-width: 768px) {
    .va-main > section:first-child,
    .va-main > .va-beratung__label-wrap:first-child {
        padding-top: 40px !important;
    }
    
    .va-um-pills {
        margin-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    header .ct-container,
    .ct-sticky-container .ct-container,
    [data-row="middle"] .ct-container {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

/* ============================
   EINHEITLICHE TRENNLINIEN-ABSTÄNDE
   80px Desktop / 50px Mobile — oben und unten an jeder Linie
   ============================ */

/* Startseiten-Trennlinien: 80px Abstand vom darüber liegenden Inhalt */
.va-home .va-hero::after,
.va-home .va-service-slider::after,
.va-home .va-galerie::after,
.va-home .va-privat-firma::after,
.va-home .va-uebermich::after {
    margin-top: 80px !important;
}

/* Padding der NÄCHSTEN Sektion oben = 80px, damit auch unten an Trennlinie gleich Abstand */
.va-home .va-service-slider,
.va-home .va-galerie,
.va-home .va-privat-firma,
.va-home .va-uebermich,
.va-home .va-kontakt-section {
    padding-top: 80px !important;
}

/* Über-mich-Seite Pills: 80px oben UND 80px unten zur Trennlinie */
.va-um-pills {
    margin-top: 80px !important;
    padding-top: 0 !important;
    padding-bottom: 80px !important;
}

/* Werdegang-Sektion danach: 80px Padding-Top */
.va-um-werdegang {
    padding-top: 80px !important;
}

/* === HEADER-TRENNLINIE: 80px Abstand zum nächsten Inhalt === */
/* Erste Sektion unter dem Header bekommt 80px Padding-Top */
.va-main > section:first-child,
.va-main > .va-beratung__label-wrap:first-of-type {
    padding-top: 80px !important;
}

/* === MOBILE: alles auf 50px === */
@media (max-width: 768px) {
    .va-home .va-hero::after,
    .va-home .va-service-slider::after,
    .va-home .va-galerie::after,
    .va-home .va-privat-firma::after,
    .va-home .va-uebermich::after {
        margin-top: 50px !important;
    }
    
    .va-home .va-service-slider,
    .va-home .va-galerie,
    .va-home .va-privat-firma,
    .va-home .va-uebermich,
    .va-home .va-kontakt-section {
        padding-top: 50px !important;
    }
    
    .va-um-pills {
        margin-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    .va-um-werdegang {
        padding-top: 50px !important;
    }
    
    .va-main > section:first-child,
    .va-main > .va-beratung__label-wrap:first-of-type {
        padding-top: 50px !important;
    }
}

/* ============================
   FINALE TRENNLINIEN-LÖSUNG
   80px Desktop / 50px Mobile — einheitlich überall
   ============================ */

/* === STARTSEITE: Trennlinien zwischen den Sektionen === */

/* Trennlinie wird absolut platziert direkt am unteren Sektions-Rand */
.va-home .va-hero::after,
.va-home .va-service-slider::after,
.va-home .va-galerie::after,
.va-home .va-privat-firma::after,
.va-home .va-uebermich::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 48px) !important;
    max-width: 1152px !important;
    height: 1px !important;
    margin: 0 !important;
    background: var(--color-border) !important;
}

.va-home .va-uebermich::after {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Alle Startseiten-Sektionen mit Trennlinie: 80px oben + unten */
.va-home .va-hero,
.va-home .va-service-slider,
.va-home .va-galerie,
.va-home .va-privat-firma,
.va-home .va-uebermich {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Kontakt-Section auf Startseite: 80px oben (unten bleibt 0 wegen Navy-Box) */
.va-home .va-kontakt-section {
    padding-top: 80px !important;
}

/* === ÜBER MICH: Pills-Trennlinie === */

.va-um-pills {
    margin-top: 80px !important;
    padding-top: 0 !important;
    padding-bottom: 80px !important;
}

.va-um-werdegang {
    padding-top: 80px !important;
}

/* === BERATUNGS-SEITEN: Erste Pille unter Header === */

.va-beratung__label-wrap {
    padding-top: 80px !important;
}

/* === MOBILE: alles auf 50px === */
@media (max-width: 768px) {
    .va-home .va-hero,
    .va-home .va-service-slider,
    .va-home .va-galerie,
    .va-home .va-privat-firma,
    .va-home .va-uebermich {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    .va-home .va-kontakt-section {
        padding-top: 50px !important;
    }
    
    .va-um-pills {
        margin-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    .va-um-werdegang {
        padding-top: 50px !important;
    }
    
    .va-beratung__label-wrap {
        padding-top: 50px !important;
    }
}

/* ============================
   GLOBAL UNIFORME SEKTIONS-ABSTÄNDE
   80px Desktop / 50px Mobile — alle Seiten
   ============================ */

/* === BERATUNG ABSICHERUNG === */
.va-abs-hero {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.va-abs-cards {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* === BERATUNG BAUFINANZIERUNG === */
.va-bf-headline {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.va-bf-cards {
    padding-top: 0 !important;
    padding-bottom: 80px !important;
}

/* === BERATUNG GELDANLAGE === */
.va-gel-headline {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.va-gel-cards {
    padding-top: 0 !important;
    padding-bottom: 80px !important;
}

.va-gel-steps {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* === BERATUNG FIRMEN === */
.va-firmen-headline {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.va-firmen-cards {
    padding-top: 0 !important;
    padding-bottom: 80px !important;
}

/* === ÜBER MICH === */
.va-um-hero {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.va-um-bild {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* === PHILOSOPHIE === */
.va-phi-werte {
    padding-bottom: 80px !important;
}

/* === CTA-BLOCK (auf allen Seiten) === */
.va-cta-gespraech {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* === MOBILE: alles auf 50px === */
@media (max-width: 768px) {
    .va-abs-hero,
    .va-abs-cards,
    .va-bf-headline,
    .va-gel-headline,
    .va-gel-steps,
    .va-firmen-headline,
    .va-um-hero,
    .va-um-bild,
    .va-cta-gespraech {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    .va-bf-cards,
    .va-gel-cards,
    .va-firmen-cards {
        padding-bottom: 50px !important;
    }
    
    .va-phi-werte {
        padding-bottom: 50px !important;
    }
}

/* ============================
   FINALER FIX: Pille-Abstand exakt 80px zur Trennlinie
   ============================ */

/* Main-Element keine Margins */
.va-main,
main.va-main,
.va-home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero: Pille sitzt EXAKT am Sektions-Top + 80px Padding */
.va-home .va-hero {
    padding-top: 80px !important;
}

.va-home .va-hero__content {
    justify-content: flex-start !important;
}

.va-home .va-hero__content .va-section-label {
    margin: 0 !important;
    align-self: flex-start;
}

/* Service-Slider: Pille EXAKT am Sektions-Top + 80px Padding */
.va-home .va-service-slider {
    padding-top: 80px !important;
}

.va-home .va-service-slider__header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.va-home .va-service-slider__header .va-section-label {
    margin: 0 !important;
}

/* Galerie + Privat-Firma + Über mich: gleicher Trick */
.va-home .va-galerie__header,
.va-home .va-privat-firma__header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.va-home .va-galerie__header .va-section-label,
.va-home .va-privat-firma__header .va-section-label,
.va-home .va-uebermich__content .va-section-label {
    margin: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
    .va-home .va-hero,
    .va-home .va-service-slider {
        padding-top: 50px !important;
    }
}

/* ============================
   HEADER FIXE HÖHE + GLEICHER ABSTAND ZUR ERSTEN SEKTION
   ============================ */

/* Header-Container immer gleiche Höhe egal welche Seite */
header .ct-container,
.ct-sticky-container .ct-container,
[data-row="middle"] .ct-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    min-height: 80px !important;
    box-sizing: border-box !important;
}

/* Logo-Container: feste Höhe damit Header nicht durch unterschiedliches Logo wackelt */
.site-branding,
.site-logo-container {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

.site-branding svg,
.site-logo-container svg,
.default-logo {
    max-height: 40px !important;
    width: auto !important;
}

/* Pille-Position: immer 80px unter Header-Trennlinie (egal auf welcher Seite) */
.va-main {
    padding-top: 0 !important;
}

/* Erste Sektion mit Inhalt überall 80px Padding-Top, garantiert */
.va-main > section:first-child,
.va-main > .va-beratung__label-wrap:first-child,
.va-main > div:first-child {
    padding-top: 80px !important;
}

/* Mobile: 50px */
@media (max-width: 768px) {
    header .ct-container,
    .ct-sticky-container .ct-container,
    [data-row="middle"] .ct-container {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        min-height: 60px !important;
    }
    
    .site-branding,
    .site-logo-container {
        height: 32px !important;
    }
    
    .site-branding svg,
    .site-logo-container svg,
    .default-logo {
        max-height: 32px !important;
    }
    
    .va-main > section:first-child,
    .va-main > .va-beratung__label-wrap:first-child,
    .va-main > div:first-child {
        padding-top: 50px !important;
    }
}

/* Ausnahme: Philosophie-Seite (Header schwebt über Hero, kein Logo) */
body:has(.va-philosophie) .va-main > section:first-child {
    padding-top: 0 !important;
}

/* ============================
   LAYOUT-SHIFT VERHINDERN
   nur für Seiten OHNE Hero-Hintergrundbild
   (Philosophie ausgenommen — die hatte das Problem nicht)
   ============================ */

/* Header: feste min-height, aber NUR wo nicht transparent (also nicht Philosophie) */
body:not(:has(.va-philosophie)) header,
body:not(:has(.va-philosophie)) .ct-sticky-container,
body:not(:has(.va-philosophie)) [data-row="middle"] {
    min-height: 80px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    body:not(:has(.va-philosophie)) header,
    body:not(:has(.va-philosophie)) .ct-sticky-container,
    body:not(:has(.va-philosophie)) [data-row="middle"] {
        min-height: 60px;
    }
}

/* Bild-Container mit Hintergrundfarbe, damit Bild-Ladevorgang nichts mehr springen lässt
   (Philosophie-Hero-Bild ausgenommen) */
.va-hero__media,
.va-galerie__item,
.va-uebermich__media,
.va-um-hero__media,
.va-abs-hero__media,
.va-gel-steps__media,
.va-um-bild {
    background: var(--color-card);
}

/* Webfont swap (überall ok, schadet Philosophie nicht) */
@font-face {
    font-display: swap;
}

/* ============================
   PHILOSOPHIE: Header schwebt über dem Hero-Foto
   ============================ */

/* Header auf Philosophie-Seite absolut positionieren */
body:has(.va-philosophie) .ct-sticky-container,
body:has(.va-philosophie) header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: transparent !important;
}

/* Body relative damit absolute Header funktioniert */
body:has(.va-philosophie) {
    position: relative;
}

/* Hero startet bei 0, Foto läuft bis ganz oben */
body:has(.va-philosophie) .va-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body:has(.va-philosophie) .va-phi-hero {
    margin-top: 0 !important;
}

/* ============================
   EINHEITLICHE ABSTÄNDE (außer Philosophie)
   ============================ */

/* === PILLE → HEADLINE: 12px Abstand === */
body:not(:has(.va-philosophie)) .va-section-label {
    margin-bottom: 0 !important;
}

body:not(:has(.va-philosophie)) .va-section-label + h1,
body:not(:has(.va-philosophie)) .va-section-label + h2,
body:not(:has(.va-philosophie)) .va-section-label + h3,
body:not(:has(.va-philosophie)) .va-hero__headline,
body:not(:has(.va-philosophie)) .va-galerie__headline,
body:not(:has(.va-philosophie)) .va-privat-firma__headline,
body:not(:has(.va-philosophie)) .va-uebermich__headline,
body:not(:has(.va-philosophie)) .va-abs-hero__headline,
body:not(:has(.va-philosophie)) .va-bf-headline h1,
body:not(:has(.va-philosophie)) .va-gel-headline h1,
body:not(:has(.va-philosophie)) .va-firmen-headline h1,
body:not(:has(.va-philosophie)) .va-service-slider__headline,
body:not(:has(.va-philosophie)) .va-um-hero__name {
    margin-top: 12px !important;
}

/* === HEADLINE → SUBTITEL/SUBLINE/TEXT: 20px === */
body:not(:has(.va-philosophie)) .va-hero__subline,
body:not(:has(.va-philosophie)) .va-uebermich__text,
body:not(:has(.va-philosophie)) .va-abs-hero__text,
body:not(:has(.va-philosophie)) .va-gel-headline__sub,
body:not(:has(.va-philosophie)) .va-um-hero__subtitle,
body:not(:has(.va-philosophie)) .va-pf-card__subtitle,
body:not(:has(.va-philosophie)) .va-service-slider__sub {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

/* === SUBLINE → BUTTONS: 28px === */
body:not(:has(.va-philosophie)) .va-hero__buttons,
body:not(:has(.va-philosophie)) .va-abs-hero__card .va-button,
body:not(:has(.va-philosophie)) .va-uebermich__content .va-button {
    margin-top: 28px !important;
}

/* === KARTE ZU KARTE: 20px Grid-Gap === */
body:not(:has(.va-philosophie)) .va-service-slider .splide__slide,
body:not(:has(.va-philosophie)) .va-galerie__grid,
body:not(:has(.va-philosophie)) .va-privat-firma__grid,
body:not(:has(.va-philosophie)) .va-abs-cards__grid,
body:not(:has(.va-philosophie)) .va-bf-cards__row,
body:not(:has(.va-philosophie)) .va-bf-cards__inner,
body:not(:has(.va-philosophie)) .va-gel-cards__grid,
body:not(:has(.va-philosophie)) .va-firmen-cards__inner {
    gap: 20px !important;
}

/* === PILLE → TRENNLINIE: 80px (oben+unten) ===
   Bereits durch frühere Blöcke gesetzt, hier nochmal explizit */
body:not(:has(.va-philosophie)) .va-home .va-hero,
body:not(:has(.va-philosophie)) .va-home .va-service-slider,
body:not(:has(.va-philosophie)) .va-home .va-galerie,
body:not(:has(.va-philosophie)) .va-home .va-privat-firma,
body:not(:has(.va-philosophie)) .va-home .va-uebermich,
body:not(:has(.va-philosophie)) .va-home .va-kontakt-section,
body:not(:has(.va-philosophie)) .va-abs-hero,
body:not(:has(.va-philosophie)) .va-abs-cards,
body:not(:has(.va-philosophie)) .va-bf-headline,
body:not(:has(.va-philosophie)) .va-gel-headline,
body:not(:has(.va-philosophie)) .va-gel-steps,
body:not(:has(.va-philosophie)) .va-firmen-headline,
body:not(:has(.va-philosophie)) .va-um-hero,
body:not(:has(.va-philosophie)) .va-um-bild,
body:not(:has(.va-philosophie)) .va-cta-gespraech {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* === MOBILE === */
@media (max-width: 768px) {
    body:not(:has(.va-philosophie)) .va-section-label + h1,
    body:not(:has(.va-philosophie)) .va-section-label + h2,
    body:not(:has(.va-philosophie)) .va-section-label + h3,
    body:not(:has(.va-philosophie)) .va-hero__headline,
    body:not(:has(.va-philosophie)) .va-galerie__headline,
    body:not(:has(.va-philosophie)) .va-privat-firma__headline,
    body:not(:has(.va-philosophie)) .va-uebermich__headline,
    body:not(:has(.va-philosophie)) .va-abs-hero__headline,
    body:not(:has(.va-philosophie)) .va-bf-headline h1,
    body:not(:has(.va-philosophie)) .va-gel-headline h1,
    body:not(:has(.va-philosophie)) .va-firmen-headline h1,
    body:not(:has(.va-philosophie)) .va-service-slider__headline,
    body:not(:has(.va-philosophie)) .va-um-hero__name {
        margin-top: 10px !important;
    }
    
    body:not(:has(.va-philosophie)) .va-hero__subline,
    body:not(:has(.va-philosophie)) .va-uebermich__text,
    body:not(:has(.va-philosophie)) .va-abs-hero__text,
    body:not(:has(.va-philosophie)) .va-gel-headline__sub,
    body:not(:has(.va-philosophie)) .va-um-hero__subtitle,
    body:not(:has(.va-philosophie)) .va-pf-card__subtitle,
    body:not(:has(.va-philosophie)) .va-service-slider__sub {
        margin-top: 16px !important;
    }
    
    body:not(:has(.va-philosophie)) .va-hero__buttons,
    body:not(:has(.va-philosophie)) .va-abs-hero__card .va-button,
    body:not(:has(.va-philosophie)) .va-uebermich__content .va-button {
        margin-top: 24px !important;
    }
    
    body:not(:has(.va-philosophie)) .va-service-slider .splide__slide,
    body:not(:has(.va-philosophie)) .va-galerie__grid,
    body:not(:has(.va-philosophie)) .va-privat-firma__grid,
    body:not(:has(.va-philosophie)) .va-abs-cards__grid,
    body:not(:has(.va-philosophie)) .va-bf-cards__row,
    body:not(:has(.va-philosophie)) .va-bf-cards__inner,
    body:not(:has(.va-philosophie)) .va-gel-cards__grid,
    body:not(:has(.va-philosophie)) .va-firmen-cards__inner {
        gap: 16px !important;
    }
    
    body:not(:has(.va-philosophie)) .va-home .va-hero,
    body:not(:has(.va-philosophie)) .va-home .va-service-slider,
    body:not(:has(.va-philosophie)) .va-home .va-galerie,
    body:not(:has(.va-philosophie)) .va-home .va-privat-firma,
    body:not(:has(.va-philosophie)) .va-home .va-uebermich,
    body:not(:has(.va-philosophie)) .va-home .va-kontakt-section,
    body:not(:has(.va-philosophie)) .va-abs-hero,
    body:not(:has(.va-philosophie)) .va-abs-cards,
    body:not(:has(.va-philosophie)) .va-bf-headline,
    body:not(:has(.va-philosophie)) .va-gel-headline,
    body:not(:has(.va-philosophie)) .va-gel-steps,
    body:not(:has(.va-philosophie)) .va-firmen-headline,
    body:not(:has(.va-philosophie)) .va-um-hero,
    body:not(:has(.va-philosophie)) .va-um-bild,
    body:not(:has(.va-philosophie)) .va-cta-gespraech {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* ============================
   ÜBER MICH: Werdegang näher an Trennlinie
   ============================ */

.va-um-werdegang {
    padding-top: 80px !important;
}

/* Label "Mein Werdegang" direkt am oberen Sektions-Rand */
.va-um-werdegang__label {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 24px !important;
}

@media (max-width: 768px) {
    .va-um-werdegang {
        padding-top: 50px !important;
    }
    .va-um-werdegang__label {
        margin-bottom: 20px !important;
    }
}

/* ============================
   ÜBER MICH - FINALE FIXES
   ============================ */

/* 1. Werdegang-Abstand fixen: va-um-hero hat zu viel padding-bottom */
.va-um-hero {
    padding-bottom: 0 !important;
}

/* Pills schließen den Hero-Bereich ab */
.va-um-pills {
    margin-top: 80px !important;
    margin-bottom: 0 !important;
    padding-bottom: 80px !important;
}

/* Werdegang startet direkt nach Trennlinie mit 80px Abstand */
.va-um-werdegang {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.va-um-werdegang__label {
    margin-top: 0 !important;
}

/* 2. Foto Über mich: Platzhalter-Höhe damit kein "Springen" + eager loading */
.va-um-hero__media {
    aspect-ratio: 3 / 4;
    background: var(--color-bg);
    min-height: 400px;
}

.va-um-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}

/* Mobile */
@media (max-width: 768px) {
    .va-um-werdegang {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    .va-um-pills {
        margin-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    .va-um-hero__media {
        min-height: 300px;
        max-width: 380px;
        margin: 0 auto;
    }
}