:root {

    --color-primary: rgba(59, 158, 184, 1);
    --color-secondary: rgba(38, 103, 120, 1);
    --color-black: rgba(20, 19, 19, 1);
    --color-white: rgba(255, 255, 255, 1);
    --color-off-white: #F0F4F8;
    --color-header-bg: #3b9eb8;
    --color-header-bg-grad: linear-gradient(90deg, #3b9eb8 55%, #fff 100%);
    --color-section-bg: #fff;
    --color-section-bg-grad: linear-gradient(90deg, #fff 60%, rgba(38, 103, 120, .6) 100%);
    --cta-accent: #e39a2c;

    /* ============================================
       Font Families
       ============================================ */
    --ff-jost: Jost, sans-serif;
    --ff-poppins: Poppins, sans-serif;

    /* ============================================
    Fluid Typography Tokens
    Min viewport: 375px | Max viewport: 1280px
    ============================================ */

    --fs-h1: clamp(1.8rem, 0.9176rem + 2.3529vw, 2.8rem);
    --fs-h2-h3: clamp(1.4rem, 1.0471rem + 0.9412vw, 1.8rem);
    --fs-h4: clamp(1.2rem, 1.0235rem + 0.4706vw, 1.4rem);
    --fs-h5-h6: clamp(1.05rem, 0.9176rem + 0.3529vw, 1.2rem);
    --fs-body-fluid: clamp(0.875rem, 0.7647rem + 0.2941vw, 1rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;

}

/* Header and Navigation */
.header-logo {
    color: #ffffff;
}

.header-logo a {
    display: block;
    line-height: 0;
    height: 45px;
    width: 152px;
}

.header-logo a svg {
    display: block;
    height: 45px;
    width: 152px;
}

@media (max-width: 1024px) {
    .header-logo a,
    .header-logo a svg {
        height: 35px;
        width: 118px;
    }
}

/* Base footer logo color (Soft Off-White) */
.footer-logo,
.footer-logo a {
    color: #FFFFFF !important;
    display: inline-block;
    transition: color 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

/* Hover state color (Brand Accent/Teal) */
.footer-logo a:hover {
    color: #F0F4F8 !important;
    opacity: 1;
}

.footer-logo a {
    display: block;
    line-height: 0;
    height: 70px;
    width: 236px;
}

.footer-logo a svg {
    display: block;
    height: 70px;
    width: 236px;
}

@media (max-width: 1024px) {
    .footer-logo a,
    .footer-logo a svg {
        height: 47x;
        width: 160px;
    }
}


/* Startseite css */
.startseite-hero-section {
    padding-block: 4rem;
    background-image: var(--color-section-bg-grad);
    background-origin: border-box;
}

.startseite-inner-wrapper {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 2.4rem;
    align-items: center;
}

.media-content .w-video {
    aspect-ratio: 9 / 16;
    width: 100%;
    overflow: hidden;
}

.media-content .w-video-h,
.media-content video {
    width: 100%;
    height: 100%;
}

.media-content video {
    display: block;
    object-fit: cover;
    object-position: center 20%;
}

@media (max-width: 1024px) {

    .startseite-inner-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .media-content {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
}

.startseite-hero-intro {
    font-size: var(--fs-h5-h6);
    line-height: 1.4;
    font-family: var(--ff-poppins);
    color: var(--color-black);
}

.startseite-hero-intro ul {
    list-style-type: disc;
    margin-inline-start: 1.4rem;
}

.startseite-service-section {
    padding-block: 2rem;
    background-image: var(--color-section-bg-grad);
    background-origin: border-box;
}

.startseite-service-title {
    font-family: var(--ff-jost);
    font-weight: 700;
    font-size: var(--fs-h2-h3);
    color: var(--color-black);
    margin-bottom: 1rem;
}

.startseite-service-intro {
    font-family: var(--ff-poppins);
    width: 100%;
    font-weight: 400;
    font-size: var(--fs-h4);
    color: var(--color-black);
}

@media (min-width: 1025px) {
    .startseite-service-intro {
        width: 80%;
}
}

/* Card container: 12px Eckenrundung + Basis-Format 4:3 (Desktop > 1024px) */
.startseite-service-grid .service-card-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3; /* 1280x960 Landscape nur auf Desktop */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Tablet & Smartphone (<= 1024px): Wechsel auf Portrait (960x1280 = 3:4) */
@media (max-width: 1024px) {
    .startseite-service-grid .service-card-item {
        aspect-ratio: 3 / 4;
    }
}

/* Beide Bild-Container füllen die abgerundete Karte exakt aus */
.startseite-service-grid .post_image.stretched,
.startseite-service-grid .w-image.usg_image_1 {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Bilder füllen den Raum ohne Verzerrung */
.startseite-service-grid .w-image.usg_image_1 .w-image-h,
.startseite-service-grid .post_image.stretched img,
.startseite-service-grid .w-image.usg_image_1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text-/CTA-Wrapper: Erhöhtes Padding & sanfter Verlauf */
.startseite-service-grid .service-card-lower-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.95) 0%,
        rgba(15, 23, 42, 0.75) 60%,
        transparent 100%
    );
}

/* Erhöhtes oberes Padding für Portrait-Modus (Tablet & Phone) */
@media (max-width: 1024px) {
    .startseite-service-grid .service-card-lower-wrapper {
        padding: 3rem 1.25rem 1.5rem 1.25rem;
    }
}

/* Typografie & Lesbarkeit */
.startseite-service-grid .service-card-title {
    color: var(--color-section-bg, #fff);
    font-size: var(--fs-h5-h6);
    line-height: 1.2;
    font-weight: 500;
    font-family: var(--ff-poppins);
    padding: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.startseite-service-grid .service-card-tagline {
    color: var(--color-section-bg, #fff);
    font-size: var(--fs-h4);
    line-height: 1.25;
    width: 100%;
    font-weight: 700;
    font-family: var(--ff-jost);
    padding: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1025px) {
    .startseite-service-grid .service-card-tagline {
        width: 85%;
    }
}

.startseite-service-grid .service-card-cta {
    display: inline-block;
    margin-top: 0.25rem;
}

/* Icon + Titel Wrapper */
.startseite-service-grid .service-card-icon-text-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Icon Badge */
.startseite-service-grid .service-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background-color: var(--color-secondary, rgba(38, 103, 120, 1));
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* SVG Icon */
.startseite-service-grid .service-card-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: #ffffff;
    margin-inline-end: 0;
}

/* Service CSS */
.service-hero-section {
    padding-top: 4rem;
    padding-bottom: 2rem;
    background: var(--color-section-bg-grad);
}

/* ==========================================================================
   DEFAULT / DESKTOP STYLES (Keeps all original borders & styles)
   ========================================================================== */
.hero-service-wrapper {
    display: flex;
    gap: 1.2rem;
    border-color: var(--color-primary);
    border-style: solid;
    border-width: 2px;
    border-radius: 21px;
    padding: 2.4rem;
}

.hero-service-wrapper .tagline {
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--color-black);
}

.hero-service-wrapper .hero-inner-service-wrapper h1 {
    padding: 0;
    margin: 0;
}


/* ==========================================================================
   TABLET & MOBILE STYLES (1024px and below)
   Icon + Title on top | Tagline spans 100% width below both
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-service-wrapper {
        flex-wrap: wrap; /* Allows tagline to drop underneath */
        align-items: flex-start;
        padding: 1.8rem;
        gap: 0.8rem 1rem;
    }

    /* Icon stays on top-left */
    .hero-service-wrapper .service-card-icon {
        flex: 0 0 auto;
    }

    /* Title container fills top-right next to icon */
    .hero-service-wrapper .hero-inner-service-wrapper {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Tagline breaks out of right column to take 100% full width below icon + title */
    .hero-service-wrapper .tagline {
        width: 100%;
        flex: 0 0 100%;
        margin-top: 0.4rem; /* Breathing room between top row and tagline */
    }
}

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

.service-cta-section {
    padding-block: 2rem;
    background: var(--color-section-bg-grad);
    --cta-border: rgba(38, 103, 120, 1);
    --cta-panel-bg: rgba(38, 103, 120, 1);
    --cta-text: #141313;
    --cta-radius: 21px;
}

/* Outer box ---------------------------------------------------------------- */

/* .w-hwrapper.valign_top forces align-items:flex-start, so match its
   specificity here or the right column won't stretch to full height. */
.w-hwrapper.service-cta-wrapper {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 0;
    align-items: stretch;
    border: 2px solid var(--color-primary);
    border-radius: var(--cta-radius);
    overflow: hidden;
    /* Teal underneath so a sub-pixel clipping gap never shows white */
    background: var(--color-primary);
}

/* Left panel --------------------------------------------------------------- */

.service-cta-inner-wrapper-left {
    background: #ffffff;
    padding: 2.4rem;
    border-radius: 0;
}

.service-cta-inner-wrapper-left .w-text-value {
    display: block;
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--cta-text);
    margin-bottom: 0.8rem;
}

.service_features_list {
    color: var(--cta-text);
    font-size: 1.125rem;
    line-height: 1.5;
    width: 80%;
}

.service_features_list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.service_features_list li {
    position: relative;
    padding-left: 2rem;
}

.service_features_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e39a2c'/%3E%3Cpath d='M5 10l4 4 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Fallback while the field is still a paragraph with • and <br> */
.service_features_list p {
    margin: 0;
}

/* Right panel -------------------------------------------------------------- */

.w-hwrapper.service-cta-wrapper > .service-cta-inner-wrapper-right {
    background: var(--color-primary);
    padding: 2.4rem;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.25rem;
    /* Belt and braces: fill the row even if a theme rule resets align-items */
    align-self: stretch;
    height: 100%;
}

.service-cta-inner-wrapper-right .price-tag {
    display: block;
    line-height: 1;
    color: var(--cta-accent);
    font-family: var(--h1-font-family);
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
}

.service-cta-inner-wrapper-right .follow-up-price {
    width: 75%;
    text-align: center;
    margin-inline: auto;
    font-size: var(--fs-h5-h6);
    line-height: 1.3;
    color: var(--color-white);

}

.service-cta-inner-wrapper-right .service-cta-price-note {
    color: #ffffff;
    font-size: 1.125rem;
    margin-top: 0.25rem;
}

.service-cta-inner-wrapper-right .service-cta-price-note--muted {
    color: #eaf3f6;
}

/* Location badge (element still to be added to the markup) */
.service-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #ffffff;
    color: var(--cta-panel-bg);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Buttons (elements still to be added to the markup) */
.service-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.service-cta-buttons .w-btn,
.service-cta-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 8px;
    font-family: Poppins, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
}

.service-cta-buttons .w-btn.us-btn-style_1,
.service-cta-buttons a:first-child {
    background: #ffffff;
    color: var(--cta-panel-bg);
    border: none;
}

.service-cta-buttons .w-btn.us-btn-style_2,
.service-cta-buttons a:last-child {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1024px) {
    .w-hwrapper.service-cta-wrapper {
        grid-template-columns: 1fr;
    }

    /* Price panel first, feature list below */
    .w-hwrapper.service-cta-wrapper > .service-cta-inner-wrapper-right {
        order: 1;
    }

    .w-hwrapper.service-cta-wrapper > .service-cta-inner-wrapper-left {
        order: 2;
    }

    .service-cta-inner-wrapper-left,
    .w-hwrapper.service-cta-wrapper > .service-cta-inner-wrapper-right {
        padding: 1.6rem;
    }

    .service-cta-inner-wrapper-right .follow-up-price {
        font-size: var(--fs-h5-h6);
        width: 96%;
    }

    .service_features_list {
        width: 100%;
    }
}

.hero-service-wrapper .service-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    background-color: var(--color-secondary);
    border-radius: 50%;
}

.hero-service-wrapper .service-card-icon svg {
    display: block;
    width: 38px;
    height: 38px;
    fill: #fff;
    margin-inline-end: 0;
}

.service-main-section {
    padding-top: 2rem;
    padding-bottom: 4rem;
    background: var(--color-section-bg-grad);
}

/* Card container */
.main-service-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

@media (min-width: 1025px) {
    .main-service-wrapper {
        grid-template-columns: 38fr 62fr;
        gap: 3rem;
        padding: 2.5rem;
        align-items: center;
    }
}

/* Image container */
.detail-service-media {
    width: 100%;
    height: 100%;
}

.detail-service-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 0.85rem;
}

/* Content wrapper & typography styling */
.detail-service-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service_intro_short {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

.service_detail_text p {
    margin-bottom: 1rem;
    line-height: 1.65;
    color: #4a4a4a;
}

/* Highlight / CTA Note Box */
.service_highlight_note {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.03);
    border-left: 4px solid var(--color-primary, #0073aa);
    border-radius: 0 0.5rem 0.5rem 0;
    font-weight: 500;
}

/* Video Section CSS */
.startseite-video-inner-wrapper {
    height: 480px;
}


/* Footer CSS */
.main-footer-section {
    padding-block: 4rem;
    background: var(--color-primary);
}

.main-footer-section .vc_column-inner>.wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}

@media (min-width: 1025px) {
    .main-footer-section .vc_column-inner>.wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 2.5rem;
    }
}

.bottom-footer-section {
    padding-block: 0.6rem;
    background: var(--color-white);
}

.senioren-einsteiger-section {
    padding-block: 4rem;
    background: var(--color-section-bg-grad);
}

.senioren-einsteiger-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    border-color: var(--color-primary);
    border-style: solid;
    border-width: 2px;
    border-radius: 21px;
    padding: 1.2rem;
}

.senioren-einsteiger-section-content {
    width: 100%;
}

@media (min-width: 1025px) {
    .senioren-einsteiger-section-content {
        width: 80%;
    }
}

.ablauf-section {
    padding-block: 4rem;
    background: var(--color-section-bg-grad);
}

.legal-section {
    padding-block: 4rem;
    background: var(--color-section-bg-grad);
}

/* Simple 2-column layout using your existing container */
.datenschutz-container .wpb_wrapper {
    column-count: 2;
    column-gap: 2rem;
}

/* Make sure headings don't split awkwardly across columns */
.datenschutz-container h2 {
    break-after: avoid;
    break-inside: avoid;
}

/* Make sure paragraphs stay together */
.datenschutz-container p {
    break-inside: avoid;
}

/* Mobile & Tablet: Stack back to 1 column */
@media (max-width: 1024px) {
    .datenschutz-container .wpb_wrapper {
        column-count: 1;
    }
}

.main-overview-service-section {
    padding-block: 4rem;
    background: var(--color-section-bg-grad);
}

.main-overview-service-title,
.main-overview-service-intro {
    width: 100%
}

@media (min-width: 1025px) {
    .main-overview-service-title,
    .main-overview-service-intro {
        width: 80%
    }
}

.main-footer-section p,
.main-footer-section h2,
.main-footer-section h3,
.main-footer-section h4,
.main-footer-section h5,
.main-footer-section h6 {
    color: var(--color-white);
}

/* Ensure the address text is white */
.main-footer-section address.contact-info {
  color: #ffffff;
  font-style: normal;
  line-height: 1.6;
}

/* Force links and hover states to NEVER underline */
.main-footer-section address.contact-info a,
.main-footer-section address.contact-info a:hover,
.main-footer-section address.contact-info a:focus {
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.2s ease;
}

/* Icons stay white, no decoration */
.main-footer-section address.contact-info i {
  color: #ffffff !important;
  width: 1.2rem;
  text-align: center;
  text-decoration: none !important;
}

/* Spacing between lines */
.main-footer-section address.contact-info .contact-methods {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Clean hover effect without underline */
.main-footer-section address.contact-info a:hover {
  opacity: 0.8;
}

.faq-service-section {
    padding-block: 4rem;
    background: var(--color-section-bg-grad);
}

.service-faq-wrapper {
    padding: 2.5rem;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border-radius: 1.25rem;
}

.service-faq-content {
    width: 100%;
}

@media (min-width: 1025px) {
    .service-faq-content {
        width: 80%;
        margin-inline: auto;
    }
}

.main-faq-section {
    padding-block: 4rem;
    background: var(--color-section-bg-grad);
}

.main-faq-section-title {

}

.main-faq-section-content {
    
}

.main-faq-section-content {
    width: 100%;
}

@media (min-width: 1025px) {
    .main-faq-section-content {
        width: 80%;
    }
}

.main-faq-note {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.03);
    border-left: 4px solid var(--color-primary, #0073aa);
    border-radius: 0 0.5rem 0.5rem 0;
    font-weight: 500;
}

.faq-main-inner-wrapper {
    padding: 2.5rem;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border-radius: 1.25rem;
    margin-bottom: 3rem;
}

.main-contact-section {
    padding-block: 4rem;
    background: var(--color-section-bg-grad);
}

.contact-title {
    margin-bottom: 0.8rem;
}
.contact-tagline {
    font-family: var(--h2-font-family);
    font-weight: var(--h2-font-weight);
    font-size: var(--h2-font-size, inherit);
    line-height: var(--h2-line-height, 1.4);
    margin-bottom: 0.8rem;
}

.contact-intro {
    width: 100%
}

@media (min-width: 1025px) {
    .contact-intro {
        width: 80%
    }
}

.inner-contact-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 1025px) {
    .inner-contact-wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 2.5rem;
    }
}

.grecaptcha-badge { visibility: hidden; }

/* ==========================================================================
   Visimedia Infoboxen (Öffnungszeiten & Adresse)
   ========================================================================== */

/* Gemeinsame Karten-Basis (harmonisch mit den Vorteil-Cards) */
.opening-hours-card,
.contact-address {
  background-color: var(--color-white, #ffffff);
  border: 2px solid var(--color-primary, rgba(59, 158, 184, 1));
  border-radius: 12px;
  padding: 20px 22px;
  max-width: 320px;
  box-shadow: 0 4px 14px rgba(20, 19, 19, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.opening-hours-card:hover,
.contact-address:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 19, 19, 0.08);
}

/* Titel beider Karten */
.opening-hours-title,
.contact-address .contact-company {
  margin: 0 0 14px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-secondary, rgba(38, 103, 120, 1));
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Öffnungszeiten Card
   -------------------------------------------------------------------------- */
.opening-hours-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opening-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(59, 158, 184, 0.25);
  font-size: 0.95rem;
}

.opening-hours-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.opening-hours-row .day {
  font-weight: 600;
  color: var(--color-black, rgba(20, 19, 19, 1));
}

.opening-hours-row .time {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary, rgba(38, 103, 120, 1));
  font-weight: 500;
}

.opening-hours-row.is-closed .time {
  color: rgba(20, 19, 19, 0.45);
  font-style: italic;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Kontakt & Adress Card
   -------------------------------------------------------------------------- */
.contact-address address.contact-info {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-black, rgba(20, 19, 19, 1));
  margin: 0;
}

.contact-address .street-address,
.contact-address .postal-city,
.contact-address .country {
  color: var(--color-black, rgba(20, 19, 19, 1));
}

.contact-address .contact-methods {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(59, 158, 184, 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-address .contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

/* Icons in Primärfarbe */
.contact-address .contact-line i {
  width: 18px;
  text-align: center;
  color: var(--color-primary, rgba(59, 158, 184, 1));
  font-size: 1rem;
  flex-shrink: 0;
}

/* WhatsApp Icon im Marken-Grün belassen */
.contact-address .contact-line i.fa-whatsapp {
  color: #25d366;
}

/* Verlinkungen mit Hover auf Primärfarbe */
.contact-address .contact-line a {
  color: var(--color-black, rgba(20, 19, 19, 1));
  text-decoration: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease;
}

.contact-address .contact-line a:hover {
  color: var(--color-primary, rgba(59, 158, 184, 1));
  text-decoration: underline;
}

/* ==========================================================================
   Gravity Forms Checkbox & Rechtstexte Links
   ========================================================================== */

/* Label-Ausrichtung & Textfarbe */
.contact-form_wrapper #field_1_10 .gchoice_1_10_1 label,
.contact-form_wrapper .gfield--type-checkbox label {
  color: var(--color-black, rgba(20, 19, 19, 1));
  font-size: 0.88rem;
  line-height: 1.5;
  cursor: pointer;
}

/* Links (AGB, Datenschutz, Google reCAPTCHA) */
.contact-form_wrapper #field_1_10 .gchoice_1_10_1 label a,
.contact-form_wrapper .gfield--type-checkbox label a {
  color: var(--color-secondary, rgba(38, 103, 120, 1));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Hover & Focus State */
.contact-form_wrapper #field_1_10 .gchoice_1_10_1 label a:hover,
.contact-form_wrapper #field_1_10 .gchoice_1_10_1 label a:focus,
.contact-form_wrapper .gfield--type-checkbox label a:hover,
.contact-form_wrapper .gfield--type-checkbox label a:focus {
  color: var(--color-primary, rgba(59, 158, 184, 1));
  text-decoration-thickness: 2px;
}

/* Checkbox-Fokusfarbe (Akzent passend zum Farbschema) */
.contact-form_wrapper #field_1_10 input[type="checkbox"]:focus {
  outline-color: var(--color-primary, rgba(59, 158, 184, 1));
  box-shadow: 0 0 0 2px rgba(59, 158, 184, 0.25);
}

/* ==========================================================================
   Gravity Forms Bestätigungsmeldung (Onsite Confirmation)
   ========================================================================== */

.gform_confirmation_wrapper.contact-form {
  margin-top: 0;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.gform_confirmation_wrapper .gform_confirmation_message {
  background-color: var(--color-white, #ffffff);
  border: 2px solid var(--color-primary, rgba(59, 158, 184, 1));
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 4px 14px rgba(20, 19, 19, 0.05);
  color: var(--color-black, rgba(20, 19, 19, 1));
  font-size: 1rem;
  line-height: 1.6;
}

/* Haupt-Titel: "Vielen Dank für Ihre Nachricht!" */
.gform_confirmation_wrapper .gform_confirmation_message h3 {
  color: var(--color-secondary, rgba(38, 103, 120, 1));
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

/* Sub-Box / Hinweis: "Dringendes Anliegen?" */
.gform_confirmation_wrapper .gform_confirmation_message h4 {
  color: var(--color-secondary, rgba(38, 103, 120, 1));
  font-size: 1.05rem;
  font-weight: 700;
  margin: 20px 0 6px 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(59, 158, 184, 0.3);
}

/* Telefonlink */
.gform_confirmation_wrapper .gform_confirmation_message a {
  color: var(--color-secondary, rgba(38, 103, 120, 1));
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.gform_confirmation_wrapper .gform_confirmation_message a:hover,
.gform_confirmation_wrapper .gform_confirmation_message a:focus {
  color: var(--color-primary, rgba(59, 158, 184, 1));
  text-decoration-thickness: 2px;
}