/* --- _accordion.css --- */
/* =============================================
   making the grey of the accordion dropdown
   equal to the standard text color
   ============================================= */

.vc_tta.vc_tta-color-grey .vc_tta-panels-container .vc_tta-panels .vc_tta-panel .vc_tta-panel-title > a {
    color: var(--text-color);
}

/* =============================================
   FAQ-specific styles
   ============================================= */

.vc_tta.vc_tta-accordion.faq-accordion .vc_tta-panel-title > a {
    display: flex;
    justify-content: space-between;
}

.vc_tta.vc_tta-accordion.faq-accordion .vc_tta-panel-title > a .vc_tta-title-text {
    font-size: 1.250rem;
    font-weight: 300;
    line-height: 120%;
}

.vc_tta.vc_tta-accordion.faq-accordion .vc_tta-panel-title > a i {
    transform: rotate(-45deg);
    position: relative;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container.faq-accordion.black-border.big-gap {
    padding: 0;
}

.faq-accordion.light .faq-accordion-child {
    background-color: var(--white-color);
}

.faq-accordion.dark .faq-accordion-child {
    background-color: var(--light-bg-color);
}

.faq-accordion.black-border .faq-accordion-child {
    background-color: var(--white-color);
    border: 0.09375rem solid var(--black-color);
}

.faq-accordion.big-gap .faq-accordion-child {
    margin: 2rem 0;
}

.faq-accordion.small-gap .faq-accordion-child {
    margin: 1rem 0;
}

.faq-accordion .faq-accordion-child.open .accordion-child-container {
    grid-template-rows: 1fr;
}

.faq-accordion .acc-headline-container {
    padding: 1.25rem 0.0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.faq-accordion .acc-headline-container .ctablock__btn-icon {
    flex-shrink: 0;
    transition: var(--transition);
}

.faq-accordion .faq-accordion-child.open .acc-headline-container .ctablock__btn-icon {
    transform: scaleY(-1);
}

.faq-accordion .accordion-child-headline {
    margin: 0;
}

.faq-accordion .accordion-child-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: var(--transition);
}

.faq-accordion .accordion-child-container > .accordion-child-content {
    overflow: hidden;
    min-height: 0;
    padding: 0 25px;
}

/* =============================================
   FAQ Accordion Buttons
   ============================================= */

.faq-accordion-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.faq-acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 35%;
    padding: 1.25rem 1.5rem;
    background-color: var(--light-bg-color, #EDEDED);
    color: var(--text-color, #000);
    text-decoration: none;
    transition: var(--transition);
}

.faq-acc-btn:hover {
    text-decoration: none;
    color: var(--text-color, #000);
    opacity: 0.85;
}

.faq-acc-btn__label {
    font-size: 1.250rem;
    font-weight: 300;
    line-height: 120%;
    margin-right: 4rem;
}

.faq-acc-btn__icon {
    flex-shrink: 0;
}


.faq-accordion-child__divider {
    margin: 0 0;
}

.faq-accordion-child__divider {
    margin: 0 0;
}

/* =============================================
   FAQ Accordion Search Bar
   ============================================= */

.faq-accordion__search-wrap {
    margin-bottom: 2rem;
}

.faq-accordion__search {
    width: 260px;
    padding: 0.5rem 1.2rem 0.5rem 1.2rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    background-color: var(--color-container-low);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cmask id='m' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M13.0667 14L8.86667 9.8C8.53333 10.0667 8.15 10.2778 7.71667 10.4333C7.28333 10.5889 6.82222 10.6667 6.33333 10.6667C5.12222 10.6667 4.09722 10.2472 3.25833 9.40833C2.41944 8.56944 2 7.54444 2 6.33333C2 5.12222 2.41944 4.09722 3.25833 3.25833C4.09722 2.41944 5.12222 2 6.33333 2C7.54444 2 8.56944 2.41944 9.40833 3.25833C10.2472 4.09722 10.6667 5.12222 10.6667 6.33333C10.6667 6.82222 10.5889 7.28333 10.4333 7.71667C10.2778 8.15 10.0667 8.53333 9.8 8.86667L14 13.0667L13.0667 14ZM6.33333 9.33333C7.16667 9.33333 7.875 9.04167 8.45833 8.45833C9.04167 7.875 9.33333 7.16667 9.33333 6.33333C9.33333 5.5 9.04167 4.79167 8.45833 4.20833C7.875 3.625 7.16667 3.33333 6.33333 3.33333C5.5 3.33333 4.79167 3.625 4.20833 4.20833C3.625 4.79167 3.33333 5.5 3.33333 6.33333C3.33333 7.16667 3.625 7.875 4.20833 8.45833C4.79167 9.04167 5.5 9.33333 6.33333 9.33333Z' fill='%23929199'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 16px;
    border-color: transparent;
    border-radius: 1000px;
    color: inherit;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--transition);
    box-sizing: border-box;
}

.faq-accordion__search:hover {
    outline: 1px solid var(--color-outline);
}

.faq-accordion__search:focus {
    outline: 1px solid var(--color-primary);
}

.faq-accordion__search::placeholder {
    opacity: 0.45;
}

/* hide the browser's built-in ✕ in search inputs */
.faq-accordion__search::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.faq-accordion__search-no-results {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.6;
}

@media (max-width: 968px) {
    .container.faq-accordion {
        max-width: 100%;
    }

    .faq-accordion__search {
        width: 100%;
    }
}

/* --- _buttons.css --- */
/* =============================================================
   BUTTONS — Hywin custom vc_btn styles
   ============================================================= */

.vc_btn3.vc_btn3-style-btn-hywin-light,
.vc_btn3.vc_btn3-style-btn-hywin-dark {
    border-radius: var(--border-radius-xl) !important;
    font-size: var(--font-size-body-md) !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 14px 24px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
}

/* Light button — surface container on light bg */
.vc_btn3.vc_btn3-style-btn-hywin-light {
    background-color: var(--color-on-surface) !important;
    color: var(--color-surface) !important;
}

.vc_btn3.vc_btn3-style-btn-hywin-light:hover,
.vc_btn3.vc_btn3-style-btn-hywin-light:focus {
    background-color: var(--color-on-surface-variant) !important;
    color: var(--color-surface) !important;
}

/* Dark button — on-surface bg, surface text */
.vc_btn3.vc_btn3-style-btn-hywin-dark {
    background-color: var(--color-container-high) !important;
    color: var(--color-on-surface) !important;
}

.vc_btn3.vc_btn3-style-btn-hywin-dark:hover,
.vc_btn3.vc_btn3-style-btn-hywin-dark:focus {
    background-color: var(--color-container-highest) !important;
    color: var(--color-on-surface) !important;
}

/* --- _cardslider.css --- */
/* =============================================
   Card Slider
   ============================================= */

/* -----------------------------------------------
   .card-slider-wrap — äußerer Flex-Container
   Enthält Nav (oben) + Breakout-Slider (unten).
   ----------------------------------------------- */
.card-slider-wrap {
    display: flex;
    flex-direction: column;
}

/* -----------------------------------------------
   .card-slider — 100vw-Breakout für den Track
   ----------------------------------------------- */
.card-slider {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* -----------------------------------------------
   Card-Slide — Basis-Layout & Padding
   Desktop (≥ 900px): feste 41.75rem via variableWidth
   Mobil   (< 900px): Slick-gesteuert
   ----------------------------------------------- */
.card-slide {
    display: flex;
    width: 41.75rem;           /* 668px */
    padding: 4.5rem 5rem;      /* 72px 80px */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;             /* 10px */
    background: var(--color-container-low);  /* #1B1B20 */
    border-radius: var(--border-radius-lg, 2rem);
    box-sizing: border-box;
}

@media (max-width: 899px) {
    .card-slide {
        width: auto;
        padding: 1.25rem;      /* 20px */
    }
}

/* -----------------------------------------------
   Slide-Gap
   Desktop: 1.5rem gesamt (0.75rem je Seite)
   Mobil:   0.75rem gesamt (0.375rem je Seite)
   ----------------------------------------------- */
.card-slider .card-slide {
    margin: 0 0.75rem;         /* 12px */
}

@media (max-width: 899px) {
    .card-slider .card-slide {
        margin: 0 0.375rem;    /* 6px */
    }
}

/* -----------------------------------------------
   Card-Slide — Überschrift
   Automatische Silbentrennung, damit lange Wörter
   bei schmalen Cards nicht überlaufen.
   hyphens: none ist global in _variables.css gesetzt
   und wird hier gezielt überschrieben.
   ----------------------------------------------- */
.card-slide__heading {
    -webkit-hyphens: auto;
    -ms-hyphens:     auto;
    hyphens:         auto;
    overflow-wrap:   break-word; /* Fallback für Browser ohne hyphens-Unterstützung */
}

/* -----------------------------------------------
   Card-Slide — Button-Zeile
   ----------------------------------------------- */
.card-slide__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;               /* 24px */
    margin-top: 2.5rem;        /* 40px */
}

.card-slide__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;  /* 14px 24px */
    border-radius: var(--border-radius-xl, 62.5rem);
    font-size: var(--font-size-body-md);
    font-family: inherit;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.card-slide__btn--primary {
    background: var(--color-on-surface);
    color: var(--color-surface);
}
.card-slide__btn--primary:hover,
.card-slide__btn--primary:focus-visible {
    background: var(--color-on-surface-variant);
    color: var(--color-surface);
    outline: none;
}

.card-slide__btn--secondary {
    background: transparent;
    color: var(--color-on-surface);
    box-shadow: inset 0 0 0 1.5px var(--color-outline); /* 1.5px: Sub-Pixel, bleibt px */
}
.card-slide__btn--secondary:hover,
.card-slide__btn--secondary:focus-visible {
    background: var(--color-container-high);
    outline: none;
}

.card-slide__btn--text {
    background: var(--color-container);    /* #1F2028 */
    color: var(--color-on-surface-variant);
}
.card-slide__btn--text:hover,
.card-slide__btn--text:focus-visible {
    background: var(--color-container-high);
    color: var(--color-on-surface);
    outline: none;
}

/* -----------------------------------------------
   Nicht-fokussierte Cards — nur Desktop (≥ 900px)
   Skalierung via transform:scale(), kein Layout-Eingriff.
   Blur-Richtung von Bildschirmmitte nach außen
   (JS setzt .is-left-of-current / .is-right-of-current)
   ----------------------------------------------- */
@media (min-width: 900px) {
    .card-slider-wrap--has-nav .slick-slide {
        transition: var(--transition);
    }

    /* Nicht-fokussierte Slides */
    .card-slider-wrap--has-nav .slick-slide:not(.slick-current) {
        position: relative;
        border-radius: 1.125rem;   /* 18px */
        opacity: 0.7;
        background: var(--color-container-low);
        transform: scale(0.88);
        transform-origin: center center;
        overflow: hidden;
    }

    /* ── Gerichteter Gradient-Blur via ::after ──────────────────
       backdrop-filter: blur() verschwimmt den Inhalt hinter
       dem Overlay. Die mask-image-Richtung bestimmt wo der
       Blur sichtbar ist:
         Linke Card:  innen (rechts) scharf → außen (links) unscharf
         Rechte Card: innen (links)  scharf → außen (rechts) unscharf
       blur()-Wert bleibt in px (Filter-Eigenschaft).
    ──────────────────────────────────────────────────────────── */
    .card-slider-wrap--has-nav .slick-slide:not(.slick-current)::after {
        content: '';
        position: absolute;
        inset: 0;
        backdrop-filter: blur(4px);          /* px: Filter-Wert */
        -webkit-backdrop-filter: blur(4px);
        border-radius: 1.125rem;              /* 18px */
        pointer-events: none;
        z-index: 1;
        mask-image: none;
        -webkit-mask-image: none;
    }

    /* Linke Card: links unscharf (außen), rechts scharf (innen) */
    .card-slider-wrap--has-nav .slick-slide.is-left-of-current::after {
        mask-image: linear-gradient(
                to right,
                black               0%,
                black               45%,
                rgba(0, 0, 0, 0.9)  55%,
                rgba(0, 0, 0, 0.8)  65%,
                rgba(0, 0, 0, 0.7)  75%,
                rgba(0, 0, 0, 0.6)  85%,
                rgba(0, 0, 0, 0.5)  95%,
                rgba(0, 0, 0, 0.3)  100%
        );
        -webkit-mask-image: linear-gradient(
                to right,
                black               0%,
                black               45%,
                rgba(0, 0, 0, 0.9)  55%,
                rgba(0, 0, 0, 0.8)  65%,
                rgba(0, 0, 0, 0.7)  75%,
                rgba(0, 0, 0, 0.6)  85%,
                rgba(0, 0, 0, 0.5)  95%,
                rgba(0, 0, 0, 0.3)  100%
        );
    }

    /* Rechte Card: rechts unscharf (außen), links scharf (innen) */
    .card-slider-wrap--has-nav .slick-slide.is-right-of-current::after {
        mask-image: linear-gradient(
                to left,
                black               0%,
                black               45%,
                rgba(0, 0, 0, 0.9)  55%,
                rgba(0, 0, 0, 0.8)  65%,
                rgba(0, 0, 0, 0.7)  75%,
                rgba(0, 0, 0, 0.6)  85%,
                rgba(0, 0, 0, 0.5)  95%,
                rgba(0, 0, 0, 0.3)  100%
        );
        -webkit-mask-image: linear-gradient(
                to left,
                black               0%,
                black               45%,
                rgba(0, 0, 0, 0.9)  55%,
                rgba(0, 0, 0, 0.8)  65%,
                rgba(0, 0, 0, 0.7)  75%,
                rgba(0, 0, 0, 0.6)  85%,
                rgba(0, 0, 0, 0.5)  95%,
                rgba(0, 0, 0, 0.3)  100%
        );
    }

    /* Fokus-Card — kein Blur, volle Darstellung */
    .card-slider-wrap--has-nav .slick-slide.slick-current {
        opacity: 1;
        transform: scale(1);
        overflow: visible;
        border-radius: var(--border-radius-lg, 2rem);
    }
    .card-slider-wrap--has-nav .slick-slide.slick-current::after {
        display: none;
    }
}

/* -----------------------------------------------
   Pfeil-Navigation — OBERHALB des Sliders
   Rechts ausgerichtet, Breite der Fokus-Card (41.75rem)
   ----------------------------------------------- */
.card-slider__nav {
    display: none;
    align-self: center;
    width: 41.75rem;           /* 668px = Breite der Fokus-Card */
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;                 /* 16px */
    margin-bottom: 1.25rem;    /* 20px */
}

@media (max-width: 899px) {
    .card-slider__nav {
        width: calc(100vw - 2.5rem); /* 100vw − 2 × centerPadding (20px) */
        max-width: 100%;
        align-self: center;
        justify-content: flex-end;
        margin-bottom: 0.75rem;      /* 12px */
    }
}

.card-slider-wrap--has-nav .card-slider__nav {
    display: flex;
}

/* -----------------------------------------------
   Arrow Buttons — Enabled
   ----------------------------------------------- */
.card-slider__arrow {
    display: flex;
    height: 2.5rem;            /* 40px */
    padding: 0.5rem 1.1875rem; /* 8px 19px */
    justify-content: center;
    align-items: center;
    gap: 0.625rem;             /* 10px */
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--color-on-surface, #e2e1e9);
    background: var(--color-container, #1f2028);
    border-radius: var(--border-radius-xl, 62.5rem);
    opacity: 1;
    transition: var(--transition);
}

/* -----------------------------------------------
   Arrow Buttons — Hover
   ----------------------------------------------- */
.card-slider__arrow:not(.is-disabled):hover,
.card-slider__arrow:not(.is-disabled):focus-visible {
    background: var(--color-container-high);
    color: var(--color-on-surface);
    outline: none;
}

/* -----------------------------------------------
   Arrow Buttons — Disabled
   JS setzt .is-disabled
   ----------------------------------------------- */
.card-slider__arrow.is-disabled {
    color: #3c3b41;      /* kein CSS-Variable-Pendant vorhanden */
    background: #15151a; /* kein CSS-Variable-Pendant vorhanden */
    cursor: not-allowed;
    pointer-events: none;
}

/* --- _comparisontable.css --- */
/* =============================================
   Comparison Table
   Zweispaltiger Vergleichsblock:
   – Desktop: Tabellenoptik mit senkrechter Mittellinie
   – Mobil:   Linke Spalte vollständig, dann rechte Spalte
   ============================================= */

/* ---- CSS-Variable Fallback ---- */

.comparison-table {
    --ct-border-color: #48484E;
    border: none;
    width: 100%;
}

/* ---- Desktop: Zeilen-Layout + horizontale Trennlinie ---- */

.comparison-table__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--ct-border-color);
}

/* Desktop: letzte Zeile ohne untere Trennlinie */
.comparison-table__row:last-child {
    border-bottom: none;
}

/* ---- Zellen-Grundstil ---- */

.comparison-table__col {
    padding-top:    1.25rem;  /* 20px */
    padding-bottom: 1.25rem;  /* 20px */
}

/* Erste/letzte Elemente ohne Außenabstand */
.comparison-table__col > *:first-child { margin-top: 0; }
.comparison-table__col > *:last-child  { margin-bottom: 0; }

/* ---- Linke Spalte ---- */

.comparison-table__col--left {
    padding-right: 5rem;  /* 80px */
    text-align: right;
}

/* ---- Rechte Spalte mit senkrechter Mittellinie ---- */

.comparison-table__col--right {
    padding-left: 5rem;  /* 80px */
    border-left: 1px solid var(--ct-border-color);
}

/* ---- Kopfzeile ---- */

.comparison-table__row--header .comparison-table__col {
    font-size:   var(--font-size-h3);
    font-weight: 500;
    line-height: 1.2;
}

.comparison-table__row--header .comparison-table__col--left {
    color: var(--color-on-surface-variant);
}



/* =============================================
   Mobil (≤ 768 px)
   Technik: display:contents auf Zeilen + CSS order
   Reihenfolge: Linker Header → Alle linken Zellen
                → Rechter Header → Alle rechten Zellen
   ============================================= */

@media (max-width: 768px) {

    .comparison-table {
        display:        flex;
        flex-direction: column;
    }

    /* Zeilen werden "unsichtbar" – ihre Kinder werden
       direkte Kinder des Flex-Containers */
    .comparison-table__row {
        display: contents;
    }

    /* Reihenfolge via CSS order */
    .comparison-table__row--header .comparison-table__col--left { order: 0;  }
    .comparison-table__col--left                                { order: 10; }
    .comparison-table__row--header .comparison-table__col--right { order: 20; }
    .comparison-table__col--right                               { order: 30; }

    /* Mobil: kleinere Abstände, Desktop-Seitenabstände zurücksetzen */
    .comparison-table__col {
        padding-top:    0.75rem;  /* 12px */
        padding-bottom: 0.75rem;  /* 12px */
        padding-left:   0;
        padding-right:  0;
        text-align:     left;
    }

    /* Desktop-Mittellinie entfernen */
    .comparison-table__col--right {
        border-left: none;
    }

    /* Mobil: Kopfzeile etwas mehr Luft nach oben */
    .comparison-table__row--header .comparison-table__col {
        padding-top:    0;
        padding-bottom: 0.75rem;  /* 12px */
    }

    /* Mobil: Linke Überschrift der Tabelle bekommt weniger Abstand nach oben,
       damit der visuelle Abstand zur eigentlichen Überschrift ~40px beträgt */
    .comparison-table__row--header .comparison-table__col--left {
        margin-top: -1.25rem;  /* -20px */
    }

    /* Mobil: Rechte Überschrift bekommt mehr Abstand nach oben,
       damit der visuelle Abstand zur linken Sektion ~40px beträgt */
    .comparison-table__row--header .comparison-table__col--right {
        padding-top: 1.75rem;  /* 28px */
    }

    /* ---- Horizontale Linie auf Mobilgeräten ----
       Da display:contents die Zeilenbox auflöst,
       wird border-bottom direkt auf den Zellen gesetzt. */

    .comparison-table__col {
        border-bottom: 1px solid var(--ct-border-color);
    }

    /* ---- Leere Zellen ausblenden ---- */
    .comparison-table__col.ct-cell--empty {
        display: none;
    }

    /* ---- Letzte sichtbare Zelle pro Spaltengruppe: keine Unterlinie ---- */
    .comparison-table__col.ct-cell--last {
        border-bottom: none;
    }
}
/* --- _contactform.css --- */
/* =============================================
   Contact Form 7 — Hywin Styling
   ============================================= */

/* --- Heading ---
   Inherits from global h2: line-height 120%, letter-spacing 0, margin-bottom 40px
   Inherits from body:      font-family "Inter", color --text-color*/

.hywin-contact-heading {
    font-weight: 300;
}

/* --- Form grid --- */
.hywin-contact-form .form-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.hywin-contact-form .form-row .form-col {
    flex: 1 1 0;
    position: relative;
    color: var(--color-outline);
}

.hywin-contact-form .form-row .form-col-full {
    flex: 1 1 100%;
}

/*!* --- Arrow SVG icon — vertically centered inside each field ---*/
/*   Same path as ctablock.php: M0.75 0.75L12 12M12 12V3.5625M12 12H3.5625 *!*/
/*.hywin-contact-form .form-col::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    right: 1rem;*/
/*    top: 40%;*/
/*    transform: translateY(-50%);*/
/*    width: 0.8125rem;*/
/*    height: 0.8125rem;*/
/*    background: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75L12 12M12 12V3.5625M12 12H3.5625' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;*/
/*    pointer-events: none;*/
/*    z-index: 1;*/
/*}*/

/* Textarea column: arrow top-right instead of vertically centered */
.hywin-contact-form .form-col-full::after {
    top: 1.125rem;
    transform: none;
}

/* --- CF7 wraps each field in a span — make it block --- */
.hywin-contact-form .wpcf7-form-control-wrap {
    display: block;
}

/* --- Acceptance / checkbox — inline layout --- */
.hywin-contact-form .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.hywin-contact-form .wpcf7-acceptance label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
}

.hywin-contact-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--color-on-surface);
    border-radius: 3px;
    accent-color: var(--color-primary);
}

.hywin-contact-form .wpcf7-acceptance input[type="checkbox"]:checked {
    border-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L6.5 11.5L13 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hywin-contact-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0 0 0;
}

.hywin-contact-form .wpcf7-acceptance .wpcf7-list-item-label {
    line-height: 1.4;
}

.hywin-contact-form .wpcf7-acceptance .wpcf7-list-item-label a {
    text-decoration: underline;
}

/* --- Inputs & Textarea ---
   font: inherit pulls font-family "Inter" + font-weight 300 from body */

.hywin-contact-form input[type="text"],
.hywin-contact-form input[type="email"],
.hywin-contact-form input[type="tel"],
.hywin-contact-form textarea {
    font: inherit;
    color: inherit;
    /* line-height: 120%; */
    height: 44px;
    width: 100%;
    padding: 1rem 2.75rem 1rem 1.125rem;
    background: var(--color-surface);
    border-radius: 6px;
    border: 1px solid var(--color-outline-variant);
    outline: none;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    caret-color: var(--color-white);
}

.hywin-contact-form input[type="text"]::placeholder,
.hywin-contact-form input[type="email"]::placeholder,
.hywin-contact-form input[type="tel"]::placeholder,
.hywin-contact-form textarea::placeholder {
    color: var(--neutral-color);
    opacity: 1;
}

.hywin-contact-form input[type="text"]:focus,
.hywin-contact-form input[type="email"]:focus,
.hywin-contact-form input[type="tel"]:focus,
.hywin-contact-form textarea:focus {
    border-radius: 6px;
    border-color: var(--color-primary);
}

.hywin-contact-form input[type="text"]:hover,
.hywin-contact-form input[type="email"]:hover,
.hywin-contact-form input[type="tel"]:hover,
.hywin-contact-form textarea:hover {
    border: 3px solid var(--color-outline-variant);
}

.hywin-contact-form textarea {
    min-height: 9.375rem;
    resize: vertical;
}

/* --- Submit ---
   Arrow baked into the button as background-image (no wrapper needed).
   Button right-edge flushes with the fields above via margin-left: auto. */
.hywin-contact-form input[type="submit"] {
    display: inline-flex;
    height: 40px;
    padding: 8px 19px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 1000px;
    border: none !important;
    box-shadow: none !important;
    background: var(--color-on-surface);
    cursor: pointer;
    font: inherit;
    color: var(--color-surface);
    -webkit-appearance: none;
    appearance: none;
}

.hywin-contact-form input[type="submit"]:hover {
    background-color: var(--color-on-surface-variant);
}

.hywin-contact-form input[type="submit"]:focus {
    background-color: var(--color-on-surface-variant);
    outline: var(--color-primary) auto 1px;
}

/* --- Validation --- */
.hywin-contact-form input.wpcf7-not-valid,
.hywin-contact-form textarea.wpcf7-not-valid {
    border-color: var(--color-error);
}

.hywin-contact-form input.wpcf7-not-valid:hover,
.hywin-contact-form textarea.wpcf7-not-valid:hover {
    border-color: var(--color-error);
}

.hywin-contact-form .wpcf7-not-valid-tip {
    color: var(--color-error);
    font-size: var(--font-size-body-md);
    margin-top: 0.25rem;
}

.hywin-contact-form .wpcf7-response-output {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--neutral-color);
    font-size: var(--font-size-body-md);
}

/* --- Responsive --- */
@media (max-width: 769px) and (max-width: 1000px) {
    .hywin-contact-form .form-row {
        flex-direction: column;
        gap: 1rem;
    }

    .hywin-contact-form input[type="submit"] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hywin-contact-form {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 400px) {
    .hywin-contact-form input[type="text"],
    .hywin-contact-form input[type="email"],
    .hywin-contact-form input[type="tel"],
    .hywin-contact-form textarea {
        padding: 0.75rem 1rem 0.75rem 0.875rem;
    }

    .hywin-contact-form .form-row {
        gap: 0.75rem;
    }

    .hywin-contact-form .form-col p,
    .hywin-contact-form .form-col-full p {
        margin: 0;
        padding: 0;
    }

    .hywin-contact-form .form-col label,
    .hywin-contact-form .form-col-full label {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        width: 100%;
    }
}
/* --- _ctablock.css --- */
/* ============================================================
   CTA Block — [vc_cta_block]
   Single card. Light / dark variants.
   Card internals: tag | text | arrow (3 columns).
   ============================================================ */

/* ── Wrapper ───────────────────────────────────────────────── */
.cta-block {
    width: 100%;
}


/* ── Card (div) — 3 internal columns ──────────────────────── */
.cta-block .cta-block__card {
    position: relative;        /* Anker für den Stretched-Link */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 24px;
    padding: 28px 32px;
    min-height: 296px;
    transition: background-color 0.2s;
    border: none;
    border-radius: var(--border-radius-md);
}

/* ── Light variant ─────────────────────────────────────────── */
.cta-block--light .cta-block__card {
    background-color: var(--color-white) !important;
}
@media (min-width: 768px) {
    .cta-block--light .cta-block__card:has(.cta-block__footer:hover) {
        background-color: var(--color-on-surface) !important;
    }
}

/* ── Dark variant ──────────────────────────────────────────── */
.cta-block--dark .cta-block__card {
    background-color: var(--color-container-low) !important;
}
@media (min-width: 768px) {
    .cta-block--dark .cta-block__card:has(.cta-block__footer:hover) {
        background-color: var(--color-container, #292932) !important;
    }
}

/* ── Black variant ─────────────────────────────────────────── */
.cta-block--black .cta-block__card {
    background-color: var(--color-black) !important;
}
@media (min-width: 768px) {
    .cta-block--black .cta-block__card:has(.cta-block__footer:hover) {
        background-color: #0b0b0b !important;
    }
}
.cta-block--black .cta-block__tag {
    background-color: var(--color-white);
    color: var(--color-black);
}
.cta-block--black .cta-block__label {
    color: var(--color-white);
}
.cta-block--black .cta-block__label p {
    color: var(--color-white);
}
.cta-block--black .cta-block__arrow {
    color: var(--color-white);
}

/* ── Tag (col 1) ───────────────────────────────────────────── */
.cta-block__tag {
    display: inline-block;
    font-size: var(--font-size-body-md);
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    min-width: 40px; /* reserve space even when empty */
}

/* Hide pill styling when tag has no text */
.cta-block__tag:empty {
    background: none !important;
    padding: 0;
}

.cta-block__tag {
    justify-self: start;
}

.cta-block--light .cta-block__tag {
    background-color: var(--color-black, #E8E7F0);
    color: var(--color-white, #1a1a1a);
}
.cta-block--dark .cta-block__tag {
    background-color: var(--color-white, #34343D);
    color: var(--color-black);
}

/* Tag — primary colour */
.cta-block__tag--primary {
    background-color: var(--color-primary) !important;
    color: var(--color-container, #fff) !important;
}

/* ── Text group (col 2) ────────────────────────────────────── */
.cta-block__text {
    align-self: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* ── Label ─────────────────────────────────────────────────── */
.cta-block__label {
    font-size: var(--font-size-h1);
    font-weight: 500;
    line-height: 1.4;
}

.cta-block__label p {
    margin: 0 0 0.5em;
}
.cta-block__label p:last-child {
    margin-bottom: 0;
}

/* Strip margins from headings — card handles vertical centring */
.cta-block__label h1,
.cta-block__label h2,
.cta-block__label h3,
.cta-block__label h4,
.cta-block__label h5,
.cta-block__label h6 {
    margin-bottom: 20px;
}
.cta-block__label h1:last-child,
.cta-block__label h2:last-child,
.cta-block__label h3:last-child,
.cta-block__label h4:last-child,
.cta-block__label h5:last-child,
.cta-block__label h6:last-child {
    margin-bottom: 0;
}

/* Ensure inline elements inherit heading size */
.cta-block__label h1 span,
.cta-block__label h2 span,
.cta-block__label h3 span,
.cta-block__label h4 span,
.cta-block__label h5 span,
.cta-block__label h6 span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.cta-block--light .cta-block__label {
    color: var(--color-black, #1a1a1a);
}
.cta-block--dark .cta-block__label {
    color: var(--color-white, #E2E1E9);
}


/* ── Footer / Arrow (col 3) ────────────────────────────────── */
.cta-block__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 40px; /* matches tag min-width to keep text centred */
    /* Als <a>: keine Link-Dekoration */
    text-decoration: none !important;
    color: inherit !important;
}

/* Desktop: Stretched-Link — footer-<a> deckt die gesamte Karte ab */
@media (min-width: 768px) {
    .cta-block__footer::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--border-radius-md);
        z-index: 1;
    }
}

.cta-block__arrow {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.cta-block--light .cta-block__arrow {
    color: var(--color-black, #1a1a1a);
}
.cta-block--dark .cta-block__arrow {
    color: var(--color-white, #e4e3eb);
}

/* Arrow-Animation beim Hover — footer ist der <a>, daher :hover hier */
.cta-block__footer:hover .cta-block__arrow {
    transform: translate(3px, -3px);
}

/* ── Link text (mobile only) ────────────────────────────────── */
.cta-block__link-text {
    display: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Tag auf Mobil ausblenden */
    .cta-block__tag {
        display: none;
    }


    /* Equal height when two blocks sit side by side in a flex/grid row.
       WPBakery nests: .wpb_column (flex-item, stretches) → .vc_column-inner
       → .wpb_wrapper → .cta-block → .cta-block__card
       Each intermediate container needs height:100% so the chain isn't broken.
       In a single-column layout the .wpb_column has no imposed height → auto. */
    .vc_column-inner:has(> .wpb_wrapper > .cta-block),
    .wpb_wrapper:has(> .cta-block) {
        height: 100%;
    }

    .cta-block {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .cta-block .cta-block__card {
        flex: 1;
        min-height: 0;
    }

    .cta-block--light .cta-block__card {
        background-color: var(--color-container-low) !important;
    }
    .cta-block--light .cta-block__card:hover {
        background-color: var(--color-container, #292932) !important;
    }

    .cta-block .cta-block__card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 0;
        padding: 20px;
    }

    /* Text takes left column, arrow takes right */
    .cta-block__text {
        grid-column: 1;
        grid-row: 2;
    }

    .cta-block--light .cta-block__label {
        color: var(--color-on-surface, #1a1a1a);
        padding-bottom: 40px;
    }
    .cta-block--dark .cta-block__label {
        color: var(--color-on-surface);
        padding-bottom: 40px;
    }

    .cta-block__label > *:first-child {
        font-size: 1.5rem;
    }

    .cta-block__footer {
        grid-column: 1 / -1;
        grid-row: 3;
        align-self: flex-end;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: var(--border-radius-xl);
        width: 100%;
        height: 46px;
    }

    .cta-block--light .cta-block__footer {
        background-color: var(--color-white);
        color: var(--color-surface);
    }
    .cta-block--dark .cta-block__footer,
    .cta-block--black .cta-block__footer {
        background-color: var(--color-container-high);
    }

    .cta-block__link-text {
        display: inline;
        font-size: var(--font-size-body-md);
        font-weight: 380;
        white-space: nowrap;
    }

    .cta-block--light .cta-block__link-text {
        color: var(--color-surface);
    }
    .cta-block--dark .cta-block__link-text,
    .cta-block--black .cta-block__link-text {
        color: var(--color-on-surface);
    }

    .cta-block__arrow {
        width: 16px;
        height: 16px;
    }

    /* Arrow color flips to contrast with the pill background */
    .cta-block--light .cta-block__footer .cta-block__arrow {
        color: var(--color-surface);
    }
    .cta-block--dark .cta-block__footer .cta-block__arrow,
    .cta-block--black .cta-block__footer .cta-block__arrow {
        color: var(--color-on-surface);
    }

    /* ── Single block: force light-theme styling on mobile ──────
       Ein einzelner Block sitzt stets in einer vc_col-sm-12-Spalte.
       Zwei nebeneinander sitzen in vc_col-sm-6.
       Dieser Selektor ist stabil auch nach WPBakery-DOM-Transform. */
    .vc_col-sm-12 .cta-block--dark .cta-block__card,
    .vc_col-sm-12 .cta-block--black .cta-block__card {
        background-color: var(--color-container-low) !important;
    }

    .vc_col-sm-12 .cta-block--dark .cta-block__label,
    .vc_col-sm-12 .cta-block--black .cta-block__label {
        color: var(--color-on-surface, #1a1a1a);
    }

    .vc_col-sm-12 .cta-block--dark .cta-block__footer,
    .vc_col-sm-12 .cta-block--black .cta-block__footer {
        background-color: var(--color-white);
        color: var(--color-surface);
    }

    .vc_col-sm-12 .cta-block--dark .cta-block__link-text,
    .vc_col-sm-12 .cta-block--black .cta-block__link-text {
        color: var(--color-surface);
    }

    .vc_col-sm-12 .cta-block--dark .cta-block__footer .cta-block__arrow,
    .vc_col-sm-12 .cta-block--black .cta-block__footer .cta-block__arrow {
        color: var(--color-surface);
    }
}

/* ── Color scheme inversion resistance ─────────────────────── */
/* .cta-block always uses the opposite palette of its parent row scheme. */

.row-scheme-light .cta-block__card {
    --color-surface:                    #121217;
    --color-surface-passthrough:        rgba(18, 18, 23, 0.7);
    --color-container-lowest:           #0D0D12;
    --color-container-low:              #22232A;
    --color-container:                  #292932;
    --color-container-high:             #34343D;
    --color-container-high-passthrough: rgba(52, 52, 61, 0.7);
    --color-container-highest:          #3E3D47;
    --color-on-surface:                 #E2E1E9;
    --color-on-surface-variant:         #C7C6D0;
    --color-outline:                    #929199;
    --color-outline-variant:            #48484E;
    --color-error:                      #CA343E;
    --color-on-error:                   #FFDDDB;
    color-scheme: dark;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
}

.row-scheme-dark .cta-block__card {
    --color-surface:                    #F9F8FF;
    --color-surface-passthrough:        rgba(249, 248, 255, 0.7);
    --color-container-lowest:           #FFFFFF;
    --color-container-low:              #F4F3FB;
    --color-container:                  #F0EEF8;
    --color-container-high:             #E8E7F0;
    --color-container-high-passthrough: rgba(232, 231, 240, 0.7);
    --color-container-highest:          #E4E3EB;
    --color-on-surface:                 #1B1B20;
    --color-on-surface-variant:         #48484E;
    --color-outline:                    #929199;
    --color-outline-variant:            #C7C6D0;
    --color-error:                      #B62832;
    --color-on-error:                   #FFDDDB;
    color-scheme: light;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
}

/* --- _docgrid.css --- */
/* ============================================================
   Doc Grid — [vc_doc_grid]
   Cards reuse .aapg-card / .aapg-card__* from hywin-post-grid.
   Only doc-specific additions live here.
   ============================================================ */

.doc-grid {
    width: 100%;
}

.doc-grid .aapg-card__body {
    margin-top: 1.25rem;
}

.doc-grid .aapg-card__title {
    height: auto;
    margin-bottom: 1.25rem;
}

/* ── Section heading ────────────────────────────────────────── */
.doc-grid__heading {
    margin-bottom: 32px;
}

/* ── Grid row ───────────────────────────────────────────────── */
.doc-grid__items {
    row-gap: 81px;
    margin-top: 5rem;
}

/* Suppress the large bottom margin aapg-grid__item adds */
.doc-grid__items .aapg-grid__item {
    margin-bottom: 0;
}

/* ── File-type badge (shown in card body) ───────────────────── */
.doc-card__ext {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 1000px;
    background-color: var(--color-container-high);
    color: var(--color-on-surface);
    white-space: nowrap;
    margin-left: 8px;
}

/* ── Load more ──────────────────────────────────────────────── */
.doc-grid__load-more-wrap {
    margin-top: 60px;
    text-align: center;
    padding: 32px 0 0;
}

.doc-grid__load-more {
    padding: 8px 19px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 575px) {
    .doc-grid__items .doc-grid__col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .doc-grid__items {
        row-gap: 2.5rem;
    }
}

/* ── Search Bar ──────────────────────────────────────────────── */

.doc-grid__search-wrap {
    margin-bottom: 2rem;
}

.doc-grid__search {
    width: 260px;
    padding: 0.5rem 2.5rem 0.5rem 1.2rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    background-color: var(--color-container-low);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cmask id='m' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M13.0667 14L8.86667 9.8C8.53333 10.0667 8.15 10.2778 7.71667 10.4333C7.28333 10.5889 6.82222 10.6667 6.33333 10.6667C5.12222 10.6667 4.09722 10.2472 3.25833 9.40833C2.41944 8.56944 2 7.54444 2 6.33333C2 5.12222 2.41944 4.09722 3.25833 3.25833C4.09722 2.41944 5.12222 2 6.33333 2C7.54444 2 8.56944 2.41944 9.40833 3.25833C10.2472 4.09722 10.6667 5.12222 10.6667 6.33333C10.6667 6.82222 10.5889 7.28333 10.4333 7.71667C10.2778 8.15 10.0667 8.53333 9.8 8.86667L14 13.0667L13.0667 14ZM6.33333 9.33333C7.16667 9.33333 7.875 9.04167 8.45833 8.45833C9.04167 7.875 9.33333 7.16667 9.33333 6.33333C9.33333 5.5 9.04167 4.79167 8.45833 4.20833C7.875 3.625 7.16667 3.33333 6.33333 3.33333C5.5 3.33333 4.79167 3.625 4.20833 4.20833C3.625 4.79167 3.33333 5.5 3.33333 6.33333C3.33333 7.16667 3.625 7.875 4.20833 8.45833C4.79167 9.04167 5.5 9.33333 6.33333 9.33333Z' fill='%23929199'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 16px;
    border-color: transparent;
    border-radius: 1000px;
    color: inherit;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--transition);
    box-sizing: border-box;
}

.doc-grid__search:hover {
    outline: 1px solid var(--color-outline);
}

.doc-grid__search:focus {
    outline: 1px solid var(--color-primary);
}

.doc-grid__search::placeholder {
    opacity: 0.45;
}

.doc-grid__search::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.doc-grid__search-no-results {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.6;
}

@media (max-width: 968px) {
    .doc-grid__search {
        width: 100%;
    }

    .doc-grid__items {
        margin-top: 3.75rem;
    }
}


/* --- _downloadaccordion.css --- */
/* =============================================
   Download Accordion
   Kategorien als Accordion, Downloads als Karten-Grid
   ============================================= */

/* ---- Wrapper ---- */
.downloadaccordion {
    width: 100%;
}

.downloadaccordion__inner {
    width: 100%;
}

/* ---- Gruppe (eine Kategorie) ---- */
.downloadaccordion__group {
    border-bottom: 1px solid var(--color-outline-variant);
}

.downloadaccordion__group:first-child {
    border-top: 1px solid var(--color-outline-variant);
}

/* ---- Accordion-Trigger (Kategorietitel) ---- */
.downloadaccordion__trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0 2.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--color-on-surface);                /* #E2E1E9 */
}

.downloadaccordion__trigger-label {
    font-size: var(--font-size-body-md);           /* clamp → 1rem */
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    color: var(--color-on-surface);                /* #E2E1E9 */
}

/* Pfeil-Icon */
.downloadaccordion__arrow {
    flex-shrink: 0;
    width: 0.6875rem;
    height: 0.6875rem;
    color: var(--color-on-surface);                /* #E2E1E9 */
    transition: var(--transition);
}

/* Pfeil spiegelt sich vertikal wenn geöffnet (identisch zum FAQ-Accordion) */
.downloadaccordion__group.is-open .downloadaccordion__arrow {
    transform: scaleY(-1);
}

/* ---- Accordion-Panel ---- */
.downloadaccordion__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-bottom: 1.875rem;
    align-self: stretch;
}

.downloadaccordion__panel[hidden] {
    display: none;
}

/* ---- Download-Karten-Grid (3 Spalten) ---- */
.downloadaccordion__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    min-width: 0;       /* Flex-Item darf unter seine Inhaltsbreite schrumpfen */
}

/* ---- Einzelne Karte ---- */
.downloadaccordion__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 16.25rem;
    min-width: 0;       /* Grid-Item darf unter seine Inhaltsbreite schrumpfen */
    padding: 1.75rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--color-container);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}

.downloadaccordion__card:hover,
.downloadaccordion__card:focus {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%), var(--color-container-low);
    color: inherit;
}

/* Hover: nur Default-Icon + Dateigröße aufhellen, nicht Complete/Failed-Icons */
.downloadaccordion__card:hover .downloadaccordion__icon--default,
.downloadaccordion__card:focus .downloadaccordion__icon--default {
    color: var(--color-on-surface);                /* #E2E1E9 */
}

.downloadaccordion__card:hover .downloadaccordion__card-size,
.downloadaccordion__card:focus .downloadaccordion__card-size {
    color: var(--color-on-surface);                /* #E2E1E9 */
}

/* ---- Download State Icons — Sichtbarkeit ---- */

/* Default: nur default-Icon + default-Status sichtbar */
.downloadaccordion__icon--complete,
.downloadaccordion__icon--failed,
.downloadaccordion__status--complete,
.downloadaccordion__status--failed {
    display: none;
}

/* Complete + Failed: Default-Elemente ausblenden */
.downloadaccordion__card.is-complete .downloadaccordion__icon--default,
.downloadaccordion__card.is-complete .downloadaccordion__status--default,
.downloadaccordion__card.is-failed .downloadaccordion__icon--default,
.downloadaccordion__card.is-failed .downloadaccordion__status--default {
    display: none;
}

/* Complete state */
.downloadaccordion__card.is-complete .downloadaccordion__icon--complete {
    display: inline-block;
    color: var(--color-primary);                   /* #EE7F00 */
}
.downloadaccordion__card.is-complete .downloadaccordion__status--complete {
    display: inline;
    font-size: var(--font-size-h4);
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary);                   /* #EE7F00 */
}

/* Failed state */
.downloadaccordion__card.is-failed .downloadaccordion__icon--failed {
    display: inline-block;
    color: var(--color-error);                     /* #CA343E */
}
.downloadaccordion__card.is-failed .downloadaccordion__status--failed {
    display: inline;
    font-size: var(--font-size-h4);
    font-weight: 400;
    line-height: 1;
    color: var(--color-error);                     /* #CA343E */
}

.downloadaccordion__card--no-file {
    opacity: 0.5;
    cursor: default;
}

/* Oberer Bereich: Titel + Endung */
.downloadaccordion__card-top {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.downloadaccordion__card-title {
    color: var(--color-on-surface);                /* #E2E1E9 */
    font-size: var(--font-size-h4);                /* clamp → 2rem */
    font-style: normal;
    font-weight: 450;
    line-height: 120%;
    letter-spacing: -0.045rem;
    margin: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.downloadaccordion__card-ext {
    color: var(--color-on-surface);                /* #E2E1E9 */
    font-size: var(--font-size-h4);
    font-style: normal;
    font-weight: 450;
    line-height: 120%;
    letter-spacing: -0.045rem;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Unterer Bereich: Icon + Dateigröße */
.downloadaccordion__card-bottom {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    line-height: 1;
}

.downloadaccordion__card-dl-icon {
    flex-shrink: 0;
    vertical-align: middle;     /* unterdrückt den SVG-Inline-Descender-Abstand */
    width: var(--font-size-body-md);
    height: var(--font-size-body-md);
    color: var(--color-outline);                   /* #929199 */
}

.downloadaccordion__card-size {
    font-size: var(--font-size-h4);
    font-weight: 400;
    line-height: 1;
    color: var(--color-outline);                   /* #929199 */
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 61.9375rem) {
    .downloadaccordion__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .downloadaccordion__card {
        min-height: 11.25rem;
    }
}

@media (max-width: 35.9375rem) {
    .downloadaccordion__grid {
        grid-template-columns: 1fr;
    }

    .downloadaccordion__card {
        min-height: 11.25rem;
    }
}

/* --- _gridblock.css --- */
/* ============================================================
   Grid Block — [vc_grid_block]
   Two text areas: top and bottom, both left-aligned.
   ============================================================ */

.grid-block {
    display: flex;
    padding: 28px;
    flex-direction: column;
    border-radius: 32px;
    justify-content: space-between;
    background-color: var(--color-container-low);
    /*
     * Bleed-Logik: vc_column-inner hat 24px Padding links + rechts.
     * Zwischen zwei Spalten liegt zusätzlich ein 24px Gap.
     * Visueller Abstand ohne Bleed = 24 + 24 + 24 = 72px → zu viel.
     * Gewünscht: 24px zwischen Blöcken, 24px zum Rand.
     * Lösung: Block blendet 24px in das Padding (beidseitig).
     *   → (24−24) + 24px Gap + (24−24) = 24px Abstand ✓
     * Erste/letzte Spalte: nur einseitig bleeden → Rand bleibt 24px ✓
     */
    width: calc(100% + 48px); /* 24px bleed each side */
    margin-left: -24px;
    margin-right: -24px;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
}

.grid-block--normal { min-height: 240px; }
.grid-block--lg     { min-height: 334px; }

/* First column — flush with row left edge: only bleed right */
.vc_column_container:first-child .grid-block {
    margin-left: 0;
    margin-right: -24px;
    width: calc(100% + 24px);
}

/* Last column — flush with row right edge: only bleed left */
.vc_column_container:last-child .grid-block {
    margin-left: -24px;
    margin-right: 0;
    width: calc(100% + 24px);
}

/* Single column (first AND last) — no bleed */
.vc_column_container:first-child:last-child .grid-block {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* ── Top text ───────────────────────────────────────────────── */
.grid-block__top {
    align-self: flex-start;
    width: 100%;
}

.grid-block__top p,
.grid-block__top-text,
.grid-block__top h1,
.grid-block__top h2,
.grid-block__top h3,
.grid-block__top h4,
.grid-block__top h5,
.grid-block__top h6 {
    text-align: left;
    color: var(--gb-top-color, var(--color-outline-variant));
    margin: 0;
}

.grid-block__top p:last-child {
    margin-bottom: 0;
}

/* ── Bottom text ────────────────────────────────────────────── */
.grid-block__bottom {
    align-self: flex-end;
    width: 100%;
    margin-top: 16px;
    word-break: break-word;
}

.grid-block__bottom p,
.grid-block__bottom-text,
.grid-block__bottom h1,
.grid-block__bottom h2,
.grid-block__bottom h3,
.grid-block__bottom h4,
.grid-block__bottom h5,
.grid-block__bottom h6 {
    text-align: left;
    color: var(--gb-bottom-color, var(--color-on-surface));
    margin: 0;
}

/* Standardgröße für Bottom-Text — via :where() auf Spezifität 0 gesenkt,
   damit .text-xl / .text-lg / .text-md / .text-sm immer gewinnen. */
:where(
    .grid-block__bottom p,
    .grid-block__bottom-text,
    .grid-block__bottom h1,
    .grid-block__bottom h2,
    .grid-block__bottom h3,
    .grid-block__bottom h4,
    .grid-block__bottom h5,
    .grid-block__bottom h6
) {
    font-size: var(--font-size-body-xl); /* Standard, überschreibbar durch Klasse */
}

.grid-block__bottom p:last-child {
    margin-bottom: 0;
}

/* ── Responsive ───────────────────────────────────────────── */

/*
 * Ab 1444px (90.25rem) setzt _wpbakery.css das vc_column-inner Padding
 * auf 0 → kein Padding mehr zum Bleeden. Alle Offsets zurücksetzen,
 * damit der Gap allein den Abstand steuert.
 */
@media (min-width: 90.25rem) {
    .grid-block,
    .vc_column_container:first-child .grid-block,
    .vc_column_container:last-child .grid-block,
    .vc_column_container:first-child:last-child .grid-block {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}

@media (max-width: 767px) {
    /* Row umbrechen lassen */
    .vc_row:has(.grid-block) {
        flex-wrap: wrap !important;
    }

    /* Spalten auf 1-spaltig zwingen */
    .vc_row:has(.grid-block) > .vc_column_container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Kein Bleed mehr nötig */
    .grid-block,
    .vc_column_container:first-child .grid-block,
    .vc_column_container:last-child .grid-block,
    .vc_column_container:first-child:last-child .grid-block {
        margin-left:      0;
        margin-right:     0;
        width:            100%;
        justify-content:  flex-start; /* kein space-between mehr */
        min-height:       0;          /* keine Mindesthöhe auf Mobil */
        gap:              2.5rem;     /* 40px fester Abstand Top → Bottom */
    }

    /* margin-top auf .grid-block__bottom entfällt – gap übernimmt den Abstand */
    .grid-block__bottom {
        margin-top: 0;
    }

    /* min-height-Varianten auf Mobil deaktivieren */
    .grid-block--normal,
    .grid-block--lg {
        min-height: 0;
    }
}
/* --- _iconbulletpoint.css --- */
.contact-features p img {
    height: 18px;
    width: auto;
    padding-bottom: 3px;
    padding-right: 8px;
}
/* --- _imagecard.css --- */
/* ============================================================
   Image Card — [vc_image_card]
   Image on top, TinyMCE text below.
   ============================================================ */

/*
 * Bleed-Logik (identisch zu grid-block):
 * vc_column-inner hat 24 px Padding links + rechts.
 * Zwischen zwei Spalten liegt ein 24 px Gap.
 * Ohne Bleed wäre der visuelle Rand 72 px → zu viel.
 * Mit Bleed: Block überlappt das Padding beidseitig um 24 px
 * → visueller Abstand zwischen Karten = 24 px Spalten-Gap ✓
 *    visueller Abstand zum Zeilenrand = 24 px ✓
 */
.image-card {
    display:          flex;
    flex-direction:   column;
    padding:          1.75rem;     /* 28px */
    gap:              3.375rem;    /* 54px */
    border-radius:    2rem;        /* 32px */
    background-color: var(--color-container-low); /* #1B1B20 (dark) / #F4F3FB (light) */

    width:        calc(100% + 3rem); /* 1.5rem bleed each side = 48px */
    margin-left:  -1.5rem;           /* 24px */
    margin-right: -1.5rem;           /* 24px */
    margin-top:    0.75rem;          /* 12px */
    margin-bottom: 0.75rem;          /* 12px */
}

/* First column — only bleed right */
.vc_column_container:first-child .image-card {
    margin-left:  0;
    margin-right: -1.5rem;
    width:        calc(100% + 1.5rem);
}

/* Last column — only bleed left */
.vc_column_container:last-child .image-card {
    margin-left:  -1.5rem;
    margin-right: 0;
    width:        calc(100% + 1.5rem);
}

/* Single column — no bleed */
.vc_column_container:first-child:last-child .image-card {
    margin-left:  0;
    margin-right: 0;
    width:        100%;
}

/* ── Border Radius Modifier ──────────────────────────────── */
.image-card--radius-md   { border-radius: var(--border-radius-md); } /* 20px */
.image-card--radius-none { border-radius: 0; }

/* ── Image ───────────────────────────────────────────────── */
.image-card__image {
    width:         100%;
    flex:          0 0 auto;
    overflow:      hidden;
    border-radius: 1rem;        /* 16px */
    /* SVG-Dateien mit currentColor erben diesen Farbwert:
       --color-outline-variant = #48484E (dark) / #C7C6D0 (light) */
    color: var(--color-outline-variant);
}

.image-card__img {
    display:    block;
    width:      100%;
    height:     auto;
    object-fit: cover;
}

/* ── Text ────────────────────────────────────────────────── */
.image-card__text {
    flex:       1 1 auto;
    word-break: break-word;
}

.image-card__text p,
.image-card__text h1,
.image-card__text h2,
.image-card__text h3,
.image-card__text h4,
.image-card__text h5,
.image-card__text h6 {
    color:  var(--color-on-surface);
    margin: 0;
}

.image-card__text * + * {
    margin-top: 0.75em;
}

.image-card__text *:first-child {
    margin-top: 0;
}

/* ── Equal-height: Spalten-Kette strecken ─────────────────
 *
 * WPBakery-Rows nutzen bereits display:flex.
 * Damit jede Image Card exakt so hoch wird wie die höchste
 * in der Zeile, muss height:100 % durch alle Container-Ebenen
 * weitergegeben werden:
 *   vc_column_container  →  vc_column-inner  →  wpb_wrapper
 *   → .image-card wächst mit flex:1 auf volle Höhe.
 */
.vc_row:has(.image-card) > .vc_column_container {
    display:        flex;
    flex-direction: column;
    align-self:     stretch;
}

.vc_row:has(.image-card) .vc_column-inner,
.vc_row:has(.image-card) .wpb_wrapper {
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto;
    height:         100%;
}

/* Image Card selbst füllt die gesamte Höhe der Spalte */
.vc_row:has(.image-card) .image-card {
    flex:          1 1 auto;
    margin-top:    0;
    margin-bottom: 0;
}

/* ── Large viewport — kein Bleed ab 1444 px ──────────────────
 * Ab 90.25rem setzt _wpbakery.css das vc_column-inner Padding auf 0.
 * Bleed-Offsets müssen zurückgesetzt werden.
 */
@media (min-width: 90.25rem) {
    .image-card,
    .vc_column_container:first-child .image-card,
    .vc_column_container:last-child .image-card,
    .vc_column_container:first-child:last-child .image-card {
        margin-left:  0;
        margin-right: 0;
        width:        100%;
    }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Eine Spalte pro Zeile */
    .vc_row:has(.image-card) {
        flex-wrap: wrap !important;
    }

    .vc_row:has(.image-card) > .vc_column_container {
        width:     100% !important;
        flex:      0 0 100% !important;
        max-width: 100% !important;
    }

    /* Kein Bleed auf Mobile */
    .image-card,
    .vc_column_container:first-child .image-card,
    .vc_column_container:last-child .image-card,
    .vc_column_container:first-child:last-child .image-card {
        margin-left:  0;
        margin-right: 0;
        width:        100%;
    }

    /* Abstand zwischen Bild und Text etwas kompakter */
    .image-card {
        gap: 1.25rem; /* 20px */
    }
}

/* --- _postslider.css --- */
/* =============================================
   Post Slider
   ============================================= */

.postslider {

    /* Geometrie-Tokens (px → rem, Basis 16 px) */
    --ps-radius:       2rem;     /* 32px   */
    --ps-radius-card:  1.75rem;  /* 28px   */
    --ps-radius-wrap:  1.25rem;  /* 20px   */
    --ps-pad-edge:     1.75rem;  /* 28px — Abstand Progress-Wrap zum Slider-Rand (ohne Preview)  */
    --ps-pad-edge-sm:  0.75rem;  /* 12px — Abstand Progress-Wrap-Container zum Slider-Rand       */
    --ps-pad-bottom:   3.5rem;   /* 56px   */
    --ps-gap:          1.5rem;   /* 24px   */

    position: relative;
    height: auto;
    border-radius: var(--ps-radius);
    overflow: hidden;
}

/* Inner container — relativ, damit er zur Höhe beiträgt */
.postslider__inner {
    position: relative;
    width: 100%;
}

/* ---- Progress-Wrap ---- */
.postslider__progress-wrap {
    position: absolute;
    top:   var(--ps-pad-edge);
    left:  var(--ps-pad-edge);
    right: var(--ps-pad-edge);
    z-index: 3;
}

/* Mit Preview-Headlines: Backdrop-Blur-Pill */
.postslider--has-preview .postslider__progress-wrap {
    top:   var(--ps-pad-edge-sm);
    left:  var(--ps-pad-edge-sm);
    right: var(--ps-pad-edge-sm);
    padding: 1rem;
    border-radius: var(--ps-radius-wrap);
    background: rgba(18, 18, 23, 0.40);
    backdrop-filter: blur(2.5rem);
    -webkit-backdrop-filter: blur(2.5rem);
}

/* ---- Progress bar ---- */
.postslider__progress {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    width: 100%;
    align-items: flex-start;
}

.postslider__progress-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Hairlines bleiben px — sub-pixel rendering */
.postslider__progress-segment {
    position: relative;
    width: 100%;
    height: 1px;
    border-radius: 1rem;
    background-color: var(--color-outline);
}

.postslider__progress-segment.is-active::after,
.postslider__progress-segment.is-partial::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--color-on-surface);
    border-radius: 1rem;
}

.postslider__progress-segment.is-active::after {
    width: 100%;
}

.postslider__progress-segment.is-partial::after {
    width: var(--fill, 0%);
}

/* ---- Label ---- */
.postslider__progress-label {
    display: block;
    margin-top: 1.25rem; /* 20px */
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--color-outline);
    font-size: var(--font-size-body-md);
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    width: 100%;
}

.postslider__progress-label.is-active {
    color: var(--color-on-surface);
}

/* ---- Track ---- */
/* !important nötig: WPBakery überschreibt flex-Eigenschaften */
.postslider__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    position: relative !important; /* relative statt absolut — Höhe folgt dem Inhalt */
    height: auto !important;
    width: 100%;
    gap: var(--ps-gap);
    background-color: var(--color-surface);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 1;
}

.postslider__track::-webkit-scrollbar { display: none; }

.postslider__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- Card ---- */
.postslider__card {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    border-radius: var(--ps-radius-card);
    overflow: hidden;
    background-color: var(--color-container-lowest);
    padding-top:    8.25rem;
    padding-bottom: 1.75rem;
    gap:            clamp(1.75rem, 5vw, 7.875rem); /* 28–126px — schrumpft mit der Viewport-Breite */
}

/* Bild — Flex-Item rechts unten, feste 700 × 466 px */
.postslider__card-image {
    position: relative;
    flex-shrink: 0;
    align-self: flex-end;
    width: min(43.75rem, 52%);
    aspect-ratio: 700 / 466;
    height: auto;
    margin: 0 1.75rem 0 0; /* rechts: 28px vom Kartenrand — gap auf der Karte übernimmt den Abstand zum Text */
    border-radius: 0.75rem;
    overflow: hidden;
    z-index: 2;
}

.postslider__card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
    pointer-events: none;
}

/* Top-Gradient entfernt — Bild ist nicht mehr Vollflächenhintergrund */

/* Text-Body — nimmt die restliche Breite links vom Bild ein */
.postslider__card-body {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top:    0;
    padding-right:  0;
    padding-bottom: clamp(1.25rem, 4%, var(--ps-pad-bottom));
    padding-left:   var(--ps-pad-edge);
    background: none;
    gap: 0;
    z-index: 2;
}

.postslider__card-supertitle {
    color: var(--color-outline-variant);
    font-size: var(--font-size-h2);
    font-weight: 450;
    line-height: 1.2;
    letter-spacing: -0.0625rem; /* -1px */
    margin: 0;
}

.postslider__card-title {
    color: var(--color-on-surface);
    font-size: var(--font-size-h2);
    font-weight: 450;
    line-height: 1.2;
    letter-spacing: -0.0625rem; /* -1px */
    margin: 0;
}

.postslider__card-subtitle {
    color: var(--color-on-surface-variant);
    font-size: var(--font-size-body-md);
    font-weight: 380;
    line-height: 1.7;
    margin: 1.25rem 0 0; /* 20px Abstand zur Überschrift */
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 48rem) {

    /* Preview-Darstellung auf Mobile deaktivieren */
    .postslider--has-preview .postslider__progress-wrap {
        top:              var(--ps-pad-edge);
        left:             var(--ps-pad-edge);
        right:            var(--ps-pad-edge);
        padding:          0;
        border-radius:    0;
        background:       none;
        backdrop-filter:  none;
        -webkit-backdrop-filter: none;
    }

    .postslider__progress-label {
        display: none;
    }

    /* ── Karte ────────────────────────────────────────────────────────────────
       Flex-Spalte statt Flex-Row.
       Desktop-padding-top reset: Nav-Abstand kommt auf Mobile vom Image-margin-top.
       ────────────────────────────────────────────────────────────────────────── */
    .postslider__card {
        display:        flex;
        flex-direction: column;
        height:         auto;
        padding-top:    0;    /* reset: desktop nutzt 8.25rem, mobil übernimmt Image-margin */
        padding-bottom: 0;    /* reset */
        gap:            7.875rem; /* 126px — Abstand zwischen Bild (oben) und Text (unten) */
    }

    /* ── Bild ─────────────────────────────────────────────────────────────────
       Im Flex-Fluss, aspect-ratio skaliert Höhe mit der Breite.
       margin-bottom: 0 — fixer Gap wird über padding-top des Body gesteuert.
       ────────────────────────────────────────────────────────────────────────── */
    .postslider__card-image {
        position:    relative;
        top: auto; right: auto; bottom: auto; left: auto;
        align-self:  auto;
        margin:      3.25rem 1.25rem 0; /* 52px Nav-Abstand, je 20px seitlich */
        width:       auto;
        height:      auto;
        aspect-ratio: 700 / 466;
        flex-shrink: 0;
    }

    /* ── Text-Body ────────────────────────────────────────────────────────────
       padding-top: 7.875rem = 126px fixer Abstand zwischen Bild und Text.
       Bei sehr langem Text wächst die Karte, der Abstand bleibt garantiert.
       ────────────────────────────────────────────────────────────────────────── */
    .postslider__card-body {
        position:    relative;
        inset:       unset;
        flex-shrink: 0;
        width:       100%;
        box-sizing:  border-box;
        padding:     0 1.25rem 1.25rem;
    }

    /* Subtitle-Abstand auf Mobile: 10px */
    .postslider__card-subtitle {
        margin-top: 0.625rem;
    }
}


/* --- _projectgrid.css --- */
/* ============================================================
   Project Grid — [hywin_project_grid]
   Cards reuse .aapg-card / .aapg-card__* from hywin-post-grid.
   Only project-grid-specific additions live here.
   ============================================================ */

.project-grid {
    width: 100%;
}

/* ── Section heading ────────────────────────────────────────── */
.project-grid__heading {
    margin-bottom: 32px;
}

/* ── Grid row gaps ──────────────────────────────────────────── */
.project-grid .aapg-grid {
    row-gap: 0;
    margin-bottom: 0;
}

.project-grid .aapg-grid__item {
    margin-bottom: 5rem;
}

/* ── Featured card (first item, full-width) ─────────────────── */
/* Uses the same featured-card pattern as hywin-post-grid.css */
.project-grid .aapg-grid__item--featured {
    width: 100%;
    margin-bottom: 7.5rem;
}

.project-grid .aapg-grid__item--featured .aapg-card {
    flex-direction: column;
}

.project-grid .aapg-grid__item--featured .aapg-card__image {
    width: 100%;
    aspect-ratio: 16 / 6;
    max-width: 100%;
    flex: none;
}

.project-grid .aapg-grid__item--featured .aapg-card__title {
    font-size: var(--font-size-body-xl);
    height: auto !important;
}

/* ── Regular (non-featured) card titles ────────────────────── */
.project-grid .aapg-grid__item:not(.aapg-grid__item--featured) .aapg-card__title {
    margin-bottom: 0.5rem;
}

/* ── Card body spacing ──────────────────────────────────────── */
.project-grid .aapg-card__body {
    margin-top: 1.25rem;
}

/* ── Meta labels (date, category, client, location) ────────── */
.project-grid .aapg-card__date,
.project-grid .aapg-card__category,
.project-grid .aapg-card__client,
.project-grid .aapg-card__location,
.project-grid .aapg-card__link-title {
    display: block;
    font-size: var(--font-size-body-sm, 0.8125rem);
    color: var(--color-outline);
    margin-top: 4px;
}

.project-grid .aapg-card__date {
    display: block;
    font-size: var(--font-size-body-sm, 0.8125rem);
    color: var(--color-outline);
    margin-top: 1.25rem;
}

.project-grid .aapg-card__category {
    font-weight: 500;
    color: var(--color-outline-variant);
}

/* ── Load more ──────────────────────────────────────────────── */
.project-grid__load-more-wrap {
    margin-top: 2.5rem;
    text-align: center;
    padding: 0 0;
}

.project-grid__load-more {
    padding: 0.5rem 2.5rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    .project-grid .aapg-grid__item--featured .aapg-card__image {
        aspect-ratio: 16 / 10;
    }

    .project-grid .aapg-grid__item {
        margin-bottom: 2.5rem;
    }

    .project-grid .aapg-grid__item--featured {
        margin-bottom: 2.5rem;
    }

    .project-grid .aapg-card__date {
        margin-top: 0.625rem;
    }
}

@media (max-width: 575px) {
    .project-grid .aapg-grid .col-md-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* --- _relatedposts.css --- */
/* ============================================================
   Related Posts — [vc_related_posts]
   Card styling is inherited from hywin-post-grid.css (.aapg-card).
   Only wrapper- and heading-specific overrides live here.
   ============================================================ */

.related-posts {
    width: 100%;
}

/* ── Section heading ────────────────────────────────────────── */
.related-posts__heading {
    margin-bottom: 32px;
}

.related-posts .aapg-card__body {
    padding-top: 20px;
}

.related-posts .aapg-card__title {
    font-size: var(--font-size-h3) !important;
    font-weight: var(--aapg-font-weight-normal) !important;
    line-height: 120%;
    margin: 0 0 20px !important;
}

.related-posts .aapg-card__category {
    margin-right: 40px;
}

/* ── Suppress the top padding that .aapg-wrapper adds ──────── */
.related-posts .aapg-grid {
    margin-bottom: 0;
    padding-top: 40px;
}

.related-posts .aapg-grid__item {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .related-posts.row-space-lg--bottom {
        padding-bottom: 60px !important;
    }

    .related-posts .aapg-grid__item:not(:last-child) {
        margin-bottom: 40px;
    }

    .related-posts .aapg-card__body {
        padding-top: 10px;
    }

    .related-posts .aapg-card__title {
        margin-bottom: 10px !important;
    }

    .related-posts .aapg-card__category {
        margin-right: 10px;
    }

    .related-posts .aapg-grid {
        padding-top: 20px;
    }
}

/* --- _specstable.css --- */
/* =============================================
   Specs Table
   Mehrspaltiger Spezifikations-Block:
   – Desktop: 1–4-spaltiges Grid, horizontale Trennlinie durch alle Sektionen
   – Mobil:   Sektionen einzeln untereinander (Überschrift → Inhalt → …)
   ============================================= */

/* ---- CSS-Variable Fallback ---- */

.specs-table {
    --st-border-color: #48484E;
    border: none;
    width: 100%;
}

/* ---- Zeilengruppe: CSS Grid ---- */

.specs-table__row {
    display: grid;
    /* Spaltenanzahl via expliziter Modifier-Klasse (CSS-Custom-Properties
       funktionieren in repeat() nicht zuverlässig in allen Browsern) */
    grid-template-columns: repeat(3, 1fr); /* Fallback: 3 Spalten */
    column-gap: clamp(2.5rem, 8.18vw - 1.425rem, 5.9375rem); /* fluid: 40px @ 768px → 95px @ 1440px */
    row-gap:    0;
    margin-bottom: 5rem; /* Abstand zur nächsten Zeilengruppe */
}

.specs-table__row--cols-1 { grid-template-columns: 1fr; }
.specs-table__row--cols-2 { grid-template-columns: repeat(2, 1fr); }
.specs-table__row--cols-3 { grid-template-columns: repeat(3, 1fr); }
.specs-table__row--cols-4 { grid-template-columns: repeat(4, 1fr); }

.specs-table__row:last-child {
    margin-bottom: 0;
}

/* ---- Sektions-Überschrift (Grid-Zeile 1, auto-platziert) ---- */

.specs-section__heading {
    font-weight:    500;
    padding-bottom: 1.25rem; /* 20px – Abstand zur Trennlinie (Desktop) */
    margin:         0;
}

/* ---- Trennlinie: echte durchgehende Linie über alle Spalten ----
   grid-column: 1 / -1 lässt das Element den gesamten Grid-Breite einnehmen,
   also auch über die column-gaps hinweg → nahtlose horizontale Linie.    */

.specs-row__divider {
    grid-column:   1 / -1;
    height:        0;
    border-bottom: 1px solid var(--st-border-color, var(--color-outline-variant));
    margin-bottom: 1.25rem; /* 20px – Abstand zum ersten Wertepaar (Desktop) */
}

/* ---- Sektions-Inhalt (Grid-Zeile 3, auto-platziert) ---- */

.specs-section__content {
    min-width: 0; /* verhindert Grid-Overflow bei langen Wörtern */
}

.specs-section__content > *:first-child { margin-top:    0; }
.specs-section__content > *:last-child  { margin-bottom: 0; }

/* ---- Specs Item: zweispaltige Schlüssel-Wert-Zeile ---- */

.specs-item {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             1rem;
    padding:         0;
    margin-bottom:   0.5rem; /* 8px – Abstand zwischen den Wertepaaren */
}

.specs-item:last-child {
    margin-bottom: 0;
}

.specs-item--full {
    display:       block;
    padding:       0;
    margin-bottom: 0.5rem; /* 8px */
}

.specs-item--full:last-child {
    margin-bottom: 0;
}

.specs-item__label {
    flex-shrink: 0;
}

/* TinyMCE umhüllt Inhalte ggf. mit <p> – Abstände entfernen */
.specs-section__heading p,
.specs-item__label p,
.specs-item__value p {
    margin:  0;
    padding: 0;
}

/* Sicherheitsnetz: leere <p>-Tags (z. B. durch wpautop) ausblenden */
.specs-section__heading p:empty,
.specs-item__label p:empty,
.specs-item__value p:empty {
    display: none;
}

.specs-item__value {
    text-align: right;
}

.specs-item--full .specs-item__value {
    text-align: left;
}


/* =============================================
   Mobil (≤ 768 px)
   Technik: Flex-Column auf der Row + CSS order (inline gesetzt via PHP).
   Reihenfolge:  Überschrift 1 (order:0) → Inhalt 1 (order:1)
                → Überschrift 2 (order:2) → Inhalt 2 (order:3) …
   ============================================= */

@media (max-width: 768px) {

    .specs-table__row {
        display:        flex;
        flex-direction: column;
        margin-bottom:  0; /* Abstände durch Heading-Margin-Top geregelt */
    }

    /* Mobil: Divider nur dann ausblenden, wenn die Row eine eigene Überschrift hat */
    .specs-row__divider {
        display: block;
    }

    .specs-table__row:has(.specs-section__heading) .specs-row__divider {
        display: none;
    }

    /* Mobile order: CSS-Custom-Property --mob-order wird hier aktiviert.
       Auf Desktop wird diese Property bewusst NICHT als order: verwendet,
       damit CSS Grid die Elemente in korrekter DOM-Reihenfolge platziert. */
    .specs-section__heading,
    .specs-section__content {
        order: var(--mob-order, 0);
    }

    /* Sektions-Überschrift: mit Trennlinie darunter */
    .specs-section__heading {
        border-bottom:  1px solid var(--st-border-color, var(--color-outline-variant));
        padding-bottom: 0.75rem; /* 12px – Abstand zur Trennlinie (Mobil) */
        margin-top:     2.5rem;  /* 40px – Abstand zur vorherigen Sektion (Mobil) */
        margin-bottom:  0;
    }

    /* Erste Überschrift in der ersten Zeilengruppe: kein Top-Abstand */
    .specs-table .specs-table__row:first-child .specs-section__heading:first-child {
        margin-top: 0;
    }

    /* Inhalt nach Überschrift */
    .specs-section__content {
        display:         grid;
        grid-template-columns: min(var(--specs-mobile-label-width, 12rem), 50%) minmax(0, 1fr);
        column-gap:      0.5rem;
        row-gap:         0.5rem;
        padding-top:    0.75rem; /* 12px – Abstand vom Divider zum ersten Wertepaar (Mobil) */
        padding-bottom: 0.5rem;
    }

    /* Items auf Mobil: gleicher Abstand wie Desktop */
    .specs-item {
        display: contents;
        padding: 0;
    }

    .specs-item--full {
        display: block;
        grid-column: 1 / -1;
    }

    .specs-item__label,
    .specs-item__value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .specs-item__label {
        grid-column: 1;
        text-align: left;
    }

    .specs-item__value {
        grid-column: 2;
        text-align: right;
    }

    .specs-item--full .specs-item__value {
        text-align: left;
    }
}

/* --- _tab-section.css --- */
/* =============================================================
   HYWIN TAB SECTION
   Seitliches Tab-Menü — nutzt Theme CSS-Variablen aus _variables.css
   Light & Dark Mode werden automatisch über prefers-color-scheme abgedeckt.
   ============================================================= */

.hywin-tab-section {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

/* ── Linke Navigation ─────────────────────────────────────── */

.hywin-tab-section__nav {
    display: flex;
    flex-direction: column;
    width: 12.5rem;        /* 200px */
    min-width: 12.5rem;
    padding: 1rem 0.5rem;  /* 16px 8px */
    gap: 0.25rem;          /* 4px */
    flex-shrink: 0;
    /* position: absolute is applied only on desktop (see breakpoint below) */
}

.hywin-tab-section__nav-btn {
    display: flex;
    width: 100%;
    padding: 0.625rem 0.75rem; /* 10px 12px */
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: none;
    border-radius: calc(var(--border-radius-md) - 0.375rem);
    cursor: pointer;
    transition: var(--transition);
    color: var(--color-outline);
    text-align: left;
    font-family: inherit;
    font-size: var(--font-size-body-md);
    font-weight: 500;
    line-height: 170%;
}

.nav-btn__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-on-surface);
    transition: var(--transition);
}

/* Pfeil-Icon: nur bei Hover auf inaktiven Button sichtbar */
.nav-btn__icon--default {
    opacity: 0;
}

.hywin-tab-section__nav-btn:not(.is-active):hover .nav-btn__icon--default {
    opacity: 1;
}

.hywin-tab-section__nav-btn:not(.is-active):hover {
    color: var(--color-on-surface);
    background: var(--color-container-high);
}

/* Aktiver Button */
.hywin-tab-section__nav-btn.is-active {
    color: var(--color-on-surface);
    background: var(--color-container);
}

/* ── Toggle-Button im Header (nur Desktop) ────────────────── */

.tab-section-toggle {
    display: none;
}

@media (min-width: 769px) {
    .has-tab-section .tab-section-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* x: tab-section padding-left (1.5rem) + nav (12.5rem) - nav-padding-right (0.5rem) - icon (1rem) = 12.5rem */
        left: calc(max(0px, (100vw - var(--container-size-full-hd, 100vw)) / 2) + 11.5625rem);
        background: transparent;
        border: none;
        padding: 0.25rem;
        cursor: pointer;
        color: var(--color-outline);
        transition: var(--transition);
    }

    .has-tab-section .tab-section-toggle:hover {
        color: var(--color-on-surface);
    }

    .tab-section-toggle svg {
        display: block;
        transition: transform var(--transition);
    }

    /* Collapsed → Pfeil dreht 180° (zeigt nach rechts = wieder öffnen) */
    .has-tab-section.tab-section-collapsed .tab-section-toggle svg {
        transform: rotate(180deg);
    }

    /* Collapsed: Nav unsichtbar, Platz bleibt erhalten → kein Layout-Shift */
    .hywin-tab-section.is-collapsed .hywin-tab-section__nav {
        visibility: hidden;
    }
}

/* ── Rechter Content-Bereich ──────────────────────────────── */

.hywin-tab-section__content {
    flex: 1;
    min-width: 0;
    padding: 2.5rem 3rem; /* 40px 48px */
}

/* ── Tab Panels: alle versteckt, nur .is-active sichtbar ──── */

.hywin-tab-panel {
    display: none !important;
}

.hywin-tab-panel.is-active {
    display: block !important;
}

/* ── Desktop Breakout ─────────────────────────────────────── */

@media (min-width: 769px) {
    .hywin-tab-section {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        max-width: var(--container-size-full-hd);
        box-sizing: border-box;
        padding-inline: 0;
    }

    /* __content is now the positioning context for __nav */
    .hywin-tab-section__content {
        position: relative;
    }

    /* Pull nav out to the left, absolutely positioned within __content */
    /* Scoped to --desktop only so .doc-page-nav (which shares hywin-tab-section__nav) is unaffected */
    .hywin-tab-section__nav--desktop {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }

    /* Mobile nav copies inside panels are not needed on desktop */
    .hywin-tab-section__nav--mobile {
        display: none !important;
    }
}

/* ── Responsive: Mobile ───────────────────────────────────── */

@media (max-width: 768px) {
    .hywin-tab-section {
        flex-direction: column;
        background: transparent;
        border-radius: 0;
        overflow: visible;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        box-sizing: border-box;
    }

    .hywin-tab-section__nav {
        flex-direction: row;
        /* Break out of __content's 1.5rem padding so nav spans full viewport */
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        width: calc(100% + 3rem);
        min-width: 0;
        overflow-x: auto;
        background: transparent;
        padding: 1.5rem 1.5rem 2rem; /* top matches content padding, bottom provides gap before grid */
        gap: 2.5rem;                 /* 40px */
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-sizing: border-box;
    }

    .hywin-tab-section__nav::-webkit-scrollbar {
        display: none;
    }

    .hywin-tab-section__nav-btn {
        white-space: nowrap;
        padding: 0;
        background: transparent !important;
        border: none !important;
        border-radius: 0;
        flex-shrink: 0;
        width: fit-content;
    }

    .hywin-tab-section__nav-btn .nav-btn__icon {
        display: none !important;
    }

    .hywin-tab-section__content {
        align-self: stretch;
        box-sizing: border-box;
        padding: 1.5rem;
        background: transparent;
    }

    /* Desktop nav (absolute, left side) is not needed on mobile */
    .hywin-tab-section__nav--desktop {
        display: none;
    }

    .hywin-tab-section__nav--mobile {
        position: relative;
        justify-content: center;
    }
}

/* ── Doc Page Nav — category tabs on single doc pages ────────── */
.doc-page-nav {
    position: absolute;
    top: 0;
    left: 0;
    display: none; /* flex, falls es wieder aktiv werden sollte */
    flex-direction: column;
    width: 12.5rem;
    min-width: 12.5rem;
    padding: 1rem 0.5rem;
    margin-left: 1.5rem;
    gap: 0.25rem;
}

@media (max-width: 768px) {
    .doc-page-nav {
        display: none;
    }
}

/* ── Nav Bar mode — horizontal bar on desktop too ────────────── */

@media (min-width: 769px) {
    .hywin-tab-section--nav-bar {
        flex-direction: column;
        max-width: var(--container-size-inner);
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding-inline: 0;
    }

    /* Override the absolute side-nav so it flows as a full-width bar */
    .hywin-tab-section--nav-bar .hywin-tab-section__nav--desktop {
        position: static;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        overflow-x: auto;
        padding: 1.5rem 1.5rem 0;
        gap: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hywin-tab-section--nav-bar .hywin-tab-section__nav--desktop::-webkit-scrollbar {
        display: none;
    }

    /* Nav-bar buttons use the same flat style as mobile */
    .hywin-tab-section--nav-bar .hywin-tab-section__nav-btn {
        white-space: nowrap;
        padding: 0;
        background: transparent !important;
        border: none !important;
        border-radius: 0;
        flex-shrink: 0;
        width: fit-content;
    }

    .hywin-tab-section--nav-bar .hywin-tab-section__nav-btn .nav-btn__icon {
        display: none !important;
    }

    /* Active indicator — no underline in bar mode */
    .hywin-tab-section--nav-bar .hywin-tab-section__nav-btn.is-active {
        background: transparent !important;
        border-bottom: none !important;
        border-radius: 0;
    }

    .hywin-tab-section--nav-bar .hywin-tab-section__content {
        padding: 0;
    }

    .hywin-tab-section--nav-bar .hywin-tab-section__nav--desktop {
        padding: 0;
        margin-bottom: 5rem;
    }

    .hywin-tab-section--nav-bar .container.faq-accordion {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    /* Remove bottom margin from search bars so nav sits flush below them */
    .hywin-tab-section--nav-bar .faq-accordion__search-wrap,
    .hywin-tab-section--nav-bar .doc-grid__search-wrap {
        margin-bottom: 2.5rem;
    }

    /* Wide CTA mode: if a tab contains a CTA block, the tab section becomes
       the wide 1396px stage. Regular panel content stays on the inner width. */
    .hywin-tab-section--nav-bar:has(.cta-block) {
        width: min(100vw, var(--container-size));
        max-width: var(--container-size);
        overflow: visible;
    }

    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-section__content,
    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-panel {
        width: 100%;
        min-width: 0;
    }

    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-panel > .vc_row:not(:has(.cta-block)),
    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-panel > .wpb_content_element:not(:has(.cta-block)) {
        width: 100%;
        max-width: var(--container-size-inner) !important;
        margin-left: auto;
        margin-right: auto;
    }

    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-panel > .vc_row:has(.cta-block) {
        width: 100%;
        max-width: var(--container-size);
        flex: 0 0 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-panel > .vc_row:has(.cta-block) > .vc_column_container,
    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-panel > .vc_row:has(.cta-block) > .vc_column_container > .vc_column-inner,
    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-panel > .vc_row:has(.cta-block) > .vc_column_container > .vc_column-inner > .wpb_wrapper,
    .hywin-tab-section--nav-bar:has(.cta-block) .hywin-tab-panel > .vc_row:has(.cta-block) .cta-block {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        min-width: 0;
    }
}

/* In nav-bar mode the nav is injected inside the panel — keep it visible on mobile too */
@media (max-width: 768px) {
    .hywin-tab-section--nav-bar .hywin-tab-section__nav--desktop {
        display: flex;
        flex-direction: row;
        position: static;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        padding: 0;
        gap: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin: 0;
        box-sizing: border-box;
    }

    .hywin-tab-section--nav-bar .hywin-tab-section__nav--desktop::-webkit-scrollbar {
        display: none;
    }
}

/* --- _textscroller.css --- */
/* =============================================
   Text Scroller
   ============================================= */

/* -----------------------------------------------
   Äußerer Container — Höhe wird per JS gesetzt.
   ----------------------------------------------- */
.text-scroller-outer {
    position: relative;
}

/* -----------------------------------------------
   Sticky-Rahmen — wird per JS als position:absolute
   simuliert (kompatibel mit CSS-Transforms in
   WPBakery Full-Width-Rows, die position:sticky
   und position:fixed brechen würden).
   ----------------------------------------------- */
.text-scroller-sticky {
    position: absolute;
    top: 0;
    width: 100%;
    height: 22.375rem;              /* 358px */
}

/* -----------------------------------------------
   Sichtbares Fenster — Overflow + Maske.
   ----------------------------------------------- */
.text-scroller__window {
    width: 100%;
    height: 100%;                   /* füllt sticky */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 22%,
        black 78%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 22%,
        black 78%,
        transparent 100%
    );
}

/* -----------------------------------------------
   Track — JS-animiert (will-change: GPU-Layer-Hint)
   ----------------------------------------------- */
.text-scroller__track {
    text-align: center;
    will-change: transform;
}

/* -----------------------------------------------
   Einzelne Scroll-Items
   ----------------------------------------------- */
.text-scroller__item {
    padding: 0.875rem 2rem;
    font-size: var(--font-size-h3);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color: var(--color-outline);
    transition:
        color      var(--transition),
        transform  var(--transition);
}

/* Alle Kind-Elemente (h1–h6, p etc.) erben Farbe + Margin-Reset */
.text-scroller__item * {
    color: inherit;
    margin: 0;
}

.text-scroller__item.is-active {
    color: var(--color-on-surface);
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

/* -----------------------------------------------
   Überschrift direkt über dem Text-Scroller:
   kein margin-bottom
   ----------------------------------------------- */
.vc_row:has(+ .vc_row .text-scroller-outer) :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0 !important;
}

/* -----------------------------------------------
   Mobile (≤ 899px)
   ----------------------------------------------- */
@media (max-width: 899px) {

    .text-scroller-sticky {
        height: 14.5rem;            /* 232px — top wird per JS gesetzt */
    }

    .text-scroller__item {
        font-size: var(--font-size-h4);
        padding: 0.625rem 1.25rem;
    }
}

/* --- _textslider.css --- */
/* =============================================
   Text Slider
   ============================================= */

/* -----------------------------------------------
   Überschrift direkt über dem Text-Slider:
   kein margin-bottom — optischer Abstand kommt
   ausschließlich vom Abstand zwischen den Rows.
   .vc_row:has(+ .vc_row .text-slider-wrap) =
   "die Row, unmittelbar gefolgt von einer Row
   mit einem Text-Slider"
   ----------------------------------------------- */
.vc_row:has(+ .vc_row .text-slider-wrap) :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0 !important;
}

/* -----------------------------------------------
   .text-slider-wrap — äußerer Flex-Container
   Enthält Nav (oben) + Breakout-Slider (unten).
   ----------------------------------------------- */
.text-slider-wrap {
    display: flex;
    flex-direction: column;
}

/* -----------------------------------------------
   .text-slider — 100vw-Breakout für den Track
   ----------------------------------------------- */
.text-slider {
    width: 100dvw;
    position: relative;
    left: 0;
    margin-left: calc(50% - 50dvw);
    overflow-x: clip;
    overflow-y: visible;
}

@supports not (width: 100dvw) {
    .text-slider {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
}

@supports not (overflow: clip) {
    .text-slider {
        overflow-x: hidden;
    }
}

/* -----------------------------------------------
   Text-Slide — Basis-Layout & Padding
   Desktop (≥ 900px): feste 28.125rem via variableWidth
   Mobil   (< 900px): Slick-gesteuert
   ----------------------------------------------- */
.text-slide {
    display: flex;
    width: 28.125rem;          /* 450px */
    padding: 1.75rem;          /* 28px */
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-container-low);  /* #1B1B20 */
    border-radius: var(--border-radius-lg, 2rem);
    box-sizing: border-box;
}

@media (max-width: 899px) {
    .text-slide {
        width: auto;
        padding: 1.25rem;      /* 20px */
    }
}

/* -----------------------------------------------
   Slide-Gap
   Desktop: 1.5rem gesamt (0.75rem je Seite)
   Mobil:   0.75rem gesamt (0.375rem je Seite)
   ----------------------------------------------- */
.text-slider .text-slide {
    margin: 0 0.75rem;         /* 12px × 2 = 24px */
}

@media (max-width: 899px) {
    .text-slider .text-slide {
        margin: 0 0.375rem;    /* 6px */
    }
}

/* -----------------------------------------------
   Pfeil-Navigation — OBERHALB des Sliders
   Rechts ausgerichtet, Breite der Fokus-Card (28.125rem)
   ----------------------------------------------- */
.text-slider__nav {
    display: none;
    width: 100%;                   /* volle Container-Breite → Pfeile am rechten Rand */
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;                     /* 16px */
    margin-bottom: 1.25rem;        /* 20px */
}

@media (max-width: 899px) {
    .text-slider__nav {
        width: 100%;
        justify-content: flex-end;
        margin-bottom: 0.75rem;      /* 12px */
    }
}

.text-slider-wrap--has-nav .text-slider__nav {
    display: flex;
}

/* Slick-List auf Desktop sichtbar lassen, damit Karten rechts herausragen */
@media (min-width: 900px) {
    .text-slider .slick-list {
        overflow: visible !important;
    }
}

/* -----------------------------------------------
   Arrow Buttons — Enabled
   ----------------------------------------------- */
.text-slider__arrow {
    display: flex;
    height: 2.5rem;            /* 40px */
    padding: 0.5rem 1.1875rem; /* 8px 19px */
    justify-content: center;
    align-items: center;
    gap: 0.625rem;             /* 10px */
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--color-on-surface, #e2e1e9);
    background: var(--color-container, #1f2028);
    border-radius: var(--border-radius-xl, 62.5rem);
    opacity: 1;
    transition: var(--transition);
}

/* -----------------------------------------------
   Arrow Buttons — Hover
   ----------------------------------------------- */
.text-slider__arrow:not(.is-disabled):hover,
.text-slider__arrow:not(.is-disabled):focus-visible {
    background: var(--color-container-high);
    color: var(--color-on-surface);
    outline: none;
}

/* -----------------------------------------------
   Arrow Buttons — Disabled
   JS setzt .is-disabled
   ----------------------------------------------- */
.text-slider__arrow.is-disabled {
    color: #3c3b41;      /* kein CSS-Variable-Pendant vorhanden */
    background: #15151a; /* kein CSS-Variable-Pendant vorhanden */
    cursor: not-allowed;
    pointer-events: none;
}

/* --- _timeline-entry.css --- */
/* =============================================================
   Timeline Entry
   Shortcode: [vc_timeline_entry]
   ============================================================= */

/*
   Design-Tokens auf .timeline-group UND .timeline-entry definiert,
   damit .timeline-preview-shared (Geschwister von .timeline-group__entries)
   ebenfalls Zugriff hat.
*/
.timeline-group,
.timeline-entry {
    --te-thumb-w:          2rem;        /* 32px */
    --te-thumb-h:          2rem;        /* 32px – quadratisch */
    --te-thumb-gap:        0.5rem;      /* 8px */
    --te-thumb-radius:     0.375rem;    /* 6px */
    --te-thumb-sel-pad:    0.1875rem;   /* 3px */
    --te-thumb-sel-radius: 0.5625rem;   /* 9px */

    /*
       Thumb-Spalte: 5 × (1px border + 3px pad + 32px + 3px pad + 1px border)
                   + 4 × 8px gap = 5×40 + 32 = 232px = 14.5rem
    */
    --te-thumbs-col-w:     14.5rem;

    --te-preview-w:        16.25rem;    /* 260px */
    --te-preview-h:        20.3125rem;  /* 325px */
    --te-preview-gap:      7.5rem;       /* 120px – max. Abstand Text-Spalte → Preview */

    --te-year-w:           clamp(3.75rem, 9vw, 7.375rem);       /* 60px → 118px */
    --te-year-w-mobile:    3.0625rem;                            /* 49px */
    --te-text-w:           clamp(21.875rem, 40vw, 34rem);        /* 350px → 544px */
    --te-col-gap:          1.5rem;      /* 24px */
    --te-col-gap-mobile:   0.75rem;     /* 12px */
}

/* ── Timeline-Gruppe ────────────────────────────────────────── */
/*
   Desktop: Flex-Row
   Spalte 1: Entries gestapelt (Breite durch Grid-Inhalt bestimmt)
   Spalte 2: ein gemeinsamer sticky Preview (260px), 160px Abstand
*/
@media (min-width: 901px) {
    .timeline-group {
        display: flex;
        align-items: flex-start;
    }
    .timeline-group__entries {
        /*
           flex: 1 1 auto  → darf schrumpfen und wachsen
           max-width       → nie breiter als thumb(14.5rem)+year-max(7.375rem)+text-max(34rem)+2×gap(3rem) = 58.875rem
        */
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(var(--te-thumbs-col-w) + 7.375rem + var(--te-text-w) + 4 * var(--te-col-gap));
    }
    .timeline-preview-shared {
        flex: 0 0 var(--te-preview-w);
        width: var(--te-preview-w);
        flex-shrink: 0;
        /*
           Formel: verfügbarer Platz = 100% (group) – Entries-Min – Preview (16.25rem)
           Entries-Min = thumbs(14.5rem) + year-min(3.75rem) + text-min(21.875rem) + 2×gap(3rem) = 43.125rem
           min: 1.5rem = garantierter Mindestabstand zwischen Text-Spalte und Preview
        */
        margin-left: 1.5rem;
        position: sticky;
        top: 4rem;
        align-self: start;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }
}
@media (max-width: 900px) {
    .timeline-preview-shared {
        display: none !important;
    }
}

/* ── Desktop Layout ─────────────────────────────────────────── */
@media (min-width: 901px) {
    .timeline-entry {
        display: grid;
        /*
           Year: clamp(2.25rem, 15%, 7.375rem)
           Text: 1fr – nimmt restlichen Platz; max-width 34rem als Deckel
        */
        grid-template-columns: var(--te-thumbs-col-w) clamp(2.25rem, 15%, 7.375rem) minmax(0, var(--te-text-w));
        column-gap: clamp(0.5rem, 3%, 1.5rem);
        align-items: first baseline;
        margin-left: 1.875rem;  /* 30px */
    }
}

/* ── Mobile Layout ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .timeline-entry {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 1.875rem;    /* 30px */
    }
    .timeline-entry__media {
        order: -1;
    }
    .timeline-entry__preview {
        display: none !important;
    }
}

/* ── Media-Bereich ──────────────────────────────────────────── */
.timeline-entry__media {
    position: relative;
}

/*
   Mobil: 2-Spalten-Grid
   Spalte 1 (3.0625rem): X-Button
   Spalte 2 (1fr):       Vorschaubilder
*/
@media (max-width: 900px) {
    .timeline-entry__media {
        display: grid;
        grid-template-columns: var(--te-year-w-mobile) 1fr;
        column-gap: var(--te-col-gap-mobile);
        align-items: start;
        margin-bottom: 0.375rem;    /* 6px */
    }
}

/* ── Schließen-Button ───────────────────────────────────────── */
.timeline-entry__close {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-on-surface);
    padding: 0;
    line-height: 0;
    visibility: hidden;
}

@media (min-width: 901px) {
    .timeline-entry__close {
        display: none;
    }
}

@media (max-width: 900px) {
    .timeline-entry__close {
        grid-column: 1;
        grid-row: 1;
    }
    .timeline-entry.is-expanded .timeline-entry__close {
        visibility: visible;
    }
}

/* ── Thumbnails-Leiste ──────────────────────────────────────── */
.timeline-entry__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--te-thumb-gap);
    align-items: flex-start;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .timeline-entry__thumbs {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
        /*
           -4px = -(padding 3px + border 1px) des thumb-btn
           → erstes Bild fluchtet visuell mit dem Textbeginn darunter
        */
        margin-left: calc(-1 * (var(--te-thumb-sel-pad) + 1px));
    }
    .timeline-entry.is-expanded .timeline-entry__thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;    /* 4px */
        gap: 1.3125rem;             /* 21px */
    }
    .timeline-entry.is-expanded .timeline-entry__thumbs::-webkit-scrollbar {
        display: none;
    }
}

/* ── Thumbnail-Button ───────────────────────────────────────── */
.timeline-entry__thumb-btn {
    display: inline-flex;
    align-items: center;
    position: relative;
    background: none;
    border: 1px solid transparent;
    padding: var(--te-thumb-sel-pad);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--te-thumb-sel-radius);
    transition: border-color 160ms ease-out;
    line-height: 0;
    touch-action: manipulation;
}

/* ── Thumbnail-Bild ─────────────────────────────────────────── */
.timeline-entry__thumb-img {
    display: block;
    width: var(--te-thumb-w);
    height: var(--te-thumb-h);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: var(--te-thumb-radius);
}

@media (max-width: 900px) {
    .timeline-entry.is-expanded .timeline-entry__thumb-img {
        width: 12rem;               /* 192px */
        height: 18rem;              /* 288px */
        aspect-ratio: 2 / 3;
        border-radius: var(--te-thumb-radius);
    }
}

/* ── Desktop: Dimm-Effekt bei Selektion ─────────────────────── */
@media (min-width: 901px) {
    .timeline-entry.has-selection .timeline-entry__thumb-btn:not(.is-active) .timeline-entry__thumb-img {
        opacity: 0.3;
    }
    .timeline-entry.has-selection .timeline-entry__thumb-btn:not(.is-active)::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--te-thumb-radius);
        background: var(--color-container-highest);
        opacity: 0.3;
        pointer-events: none;
    }
    .timeline-entry.has-foreign-selection .timeline-entry__thumb-btn .timeline-entry__thumb-img {
        opacity: 0.3;
    }
    .timeline-entry.has-foreign-selection .timeline-entry__thumb-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--te-thumb-radius);
        background: var(--color-container-highest);
        opacity: 0.3;
        pointer-events: none;
    }
    .timeline-entry__thumb-btn.is-active {
        border-color: var(--color-primary);
    }
}

/* ── Inhalt (Jahr + Text) ────────────────────────────────────── */
.timeline-entry__content {
    display: contents;
}

@media (max-width: 900px) {
    .timeline-entry__content {
        display: flex;
        flex-direction: row;
        gap: var(--te-col-gap-mobile);
        align-items: first baseline;
        margin-top: 0.375rem;       /* 6px */
    }
}

.timeline-entry__year {
    display: block;
    width: 100%;
    max-width: 7.375rem;            /* 118px */
    color: var(--color-outline);
    font-size: var(--font-size-body-md);
    font-weight: 380;
    line-height: 140%;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .timeline-entry__year {
        width: var(--te-year-w-mobile);
    }
}

.timeline-entry__text {
    color: var(--color-on-surface);
    font-size: var(--font-size-body-md);
    font-weight: 380;
    line-height: 170%;
    margin: 0;
}

/* ── Desktop: Großes Vorschaubild (shared, rechts sticky) ───────── */
/*
   Das Bild ist IMMER 260×325px groß – opacity:0 wenn kein Bild
   gewählt, opacity:1 wenn gewählt. Dadurch kein Layout-Shift.
*/
.timeline-entry__preview-img {
    display: block;
    width: var(--te-preview-w);    /* 260px – via .timeline-group geerbt */
    height: var(--te-preview-h);   /* 325px */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: var(--border-radius-lg);
    background: var(--color-container-highest);
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.timeline-preview-shared.has-selection .timeline-entry__preview-img {
    opacity: 1;
}

/* --- _updatedat.css --- */
/* ===========================================
   WPBakery Element — Updated At
   Shortcode: [vc_updated_at]
   =========================================== */

.vc_updated_at {
    color: var(--color-outline);
    text-align: center;
}

.vc_updated_at__label {
    margin-right: 0.25em;
}

/* --- _vc-tabs.css --- */
/**
 * WPBakery Tabs — Separate button-style override
 *
 * Completely strips WPBakery's tab chrome so tabs look like
 * standalone filter buttons with zero surrounding wrapper styling.
 */

/* ============================================================
   1. Strip ALL wrapper / container chrome
   ============================================================ */
.vc_tta.vc_tta-tabs,
.vc_tta.vc_tta-tabs.vc_tta-style-classic,
.vc_tta.vc_tta-tabs.vc_tta-style-modern,
.vc_tta.vc_tta-tabs.vc_tta-style-flat,
.vc_tta.vc_tta-tabs.vc_tta-style-outline {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Container that wraps everything (vc_tta-container) */
.vc_tta-container {
    margin-bottom: 0;
}

/* ============================================================
   2. Tabs container (the bar above the content)
   ============================================================ */
.vc_tta.vc_tta-tabs .vc_tta-tabs-container {
    margin: 0 0 20px 0 !important;
    border: none !important;
    background: none !important;
}

/* ============================================================
   3. Tab list — flex row of buttons
   ============================================================ */
.vc_tta.vc_tta-tabs .vc_tta-tabs-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    margin-bottom: 128px !important;
}

/* ============================================================
   4. Individual tab — reset WPBakery spacing / negative margins
   ============================================================ */
.vc_tta.vc_tta-tabs .vc_tta-tab {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    float: none !important;
    display: inline-block !important;
}

/* ---- Button link (default state) ---- */
.vc_tta.vc_tta-tabs .vc_tta-tab > a,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-tab > a {
    display: inline-block !important;
    padding: 7px 16px !important;
    font-size: 16px !important;
    line-height: 120% !important;
    font-weight: 300 !important;
    font-family: "Inter", sans-serif !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--color-outline) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ---- Hover ---- */
.vc_tta.vc_tta-tabs .vc_tta-tab > a:hover,
.vc_tta.vc_tta-tabs .vc_tta-tab > a:focus,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-tab > a:hover,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-tab > a:focus {
    color: var(--color-outline-variant, #000) !important;
    background: transparent !important;
    background-image: none !important;
}

/* ---- Active ---- */
.vc_tta.vc_tta-tabs .vc_tta-tab.vc_active > a,
.vc_tta.vc_tta-tabs .vc_tta-tab.vc_active > a:hover,
.vc_tta.vc_tta-tabs .vc_tta-tab.vc_active > a:focus,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-tab.vc_active > a,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-tab.vc_active > a:hover,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-tab.vc_active > a:focus {
    background-image: none !important;
    color: var(--color-on-surface) !important;
    border: none !important;
    color: #fff !important;
}

/* Kill the ::before / ::after pseudo-elements WPBakery uses for corner "joiners" */
.vc_tta.vc_tta-tabs .vc_tta-tab.vc_active > a::before,
.vc_tta.vc_tta-tabs .vc_tta-tab.vc_active > a::after {
    display: none !important;
}

/* ============================================================
   5. Panels — fully transparent, no border, no background
      Override every color-variant selector WPBakery ships.
   ============================================================ */
.vc_tta.vc_tta-tabs .vc_tta-panels-container,
.vc_tta.vc_tta-tabs .vc_tta-panels,
.vc_tta.vc_tta-tabs .vc_tta-panel,
.vc_tta.vc_tta-tabs .vc_tta-panel-body,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-panels-container,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-panels,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-panel,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-panel .vc_tta-panel-body,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"][class*="vc_tta-style-"].vc_tta-tabs .vc_tta-panels,
.vc_tta.vc_tta-tabs[class*="vc_tta-color-"][class*="vc_tta-style-"] .vc_tta-panels .vc_tta-panel-body {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: none !important;
}

/* Also nuke pseudo-element decorations on panel body */
.vc_tta.vc_tta-tabs .vc_tta-panel-body::before,
.vc_tta.vc_tta-tabs .vc_tta-panel-body::after {
    display: none !important;
}

/* ============================================================
   6. Hide accordion headings inside panels (desktop only)
   ============================================================ */
.vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading {
    display: none !important;
}

/* ============================================================
   7. Responsive
   ============================================================ */
@media (max-width: 767px) {
    /* Hide the tabs list on mobile (WPBakery uses accordion instead) */
    .vc_tta.vc_tta-tabs .vc_tta-tabs-container {
        display: none !important;
    }

    /* Show accordion headings on mobile */
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading {
        display: block !important;
        border: none !important;
        background: none !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* Style accordion heading links as buttons */
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading .vc_tta-panel-title > a,
    .vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-panel .vc_tta-panel-heading .vc_tta-panel-title > a {
        display: block !important;
        padding: 12px 16px !important;
        padding-right: 40px !important;
        font-size: 14px !important;
        line-height: 120% !important;
        font-weight: 300 !important;
        font-family: "Inter", sans-serif !important;
        border: 1px solid #EDEDED !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-image: none !important;
        color: rgba(26, 26, 26, 0.8) !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transition: var(--transition) !important;
        position: relative !important;
    }

    /* Add chevron icon to indicate expandable */
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading .vc_tta-panel-title > a::after {
        content: '' !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) rotate(0deg) !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transition: transform 0.2s ease !important;
    }

    /* Rotate chevron when active */
    .vc_tta.vc_tta-tabs .vc_tta-panel.vc_active .vc_tta-panel-heading .vc_tta-panel-title > a::after {
        transform: translateY(-50%) rotate(45deg) !important;
    }

    /* Collapsed state - rotate chevron down */
    .vc_tta.vc_tta-tabs .vc_tta-panel:not(.vc_active) .vc_tta-panel-heading .vc_tta-panel-title > a::after {
        transform: translateY(-70%) rotate(45deg) !important;
    }

    /* Hide the default accordion icon/indicator */
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading .vc_tta-controls-icon,
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading .vc_tta-controls-icon-position-left,
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading .vc_tta-controls-icon-position-right {
        display: none !important;
    }

    /* Accordion heading hover state */
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading .vc_tta-panel-title > a:hover,
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-heading .vc_tta-panel-title > a:focus,
    .vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-panel .vc_tta-panel-heading .vc_tta-panel-title > a:hover,
    .vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-panel .vc_tta-panel-heading .vc_tta-panel-title > a:focus {
        border-color: var(--secondary-color, #000) !important;
        color: var(--secondary-color, #000) !important;
        background: transparent !important;
    }

    /* Accordion active state */
    .vc_tta.vc_tta-tabs .vc_tta-panel.vc_active .vc_tta-panel-heading .vc_tta-panel-title > a,
    .vc_tta.vc_tta-tabs[class*="vc_tta-color-"] .vc_tta-panel.vc_active .vc_tta-panel-heading .vc_tta-panel-title > a {
        background: var(--secondary-color, #000) !important;
        border-color: var(--secondary-color, #000) !important;
        color: #fff !important;
    }

    /* Panel body spacing on mobile */
    .vc_tta.vc_tta-tabs .vc_tta-panel .vc_tta-panel-body {
        padding: 16px 0 !important;
    }

    /* Add "more sections" visual hint - style inactive panels to stand out */
    .vc_tta.vc_tta-tabs .vc_tta-panel:not(.vc_active) .vc_tta-panel-heading .vc_tta-panel-title > a {
        background: rgba(0, 0, 0, 0.02) !important;
    }

    /* Subtle pulse animation on first inactive panel after active one */
    .vc_tta.vc_tta-tabs .vc_tta-panel.vc_active + .vc_tta-panel .vc_tta-panel-heading .vc_tta-panel-title > a {
        animation: subtle-pulse 2s ease-in-out 1 !important;
    }

    @keyframes subtle-pulse {
        0%, 100% {
            box-shadow: none;
        }
        50% {
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
        }
    }

    /* Reset the large margin on tabs list (not visible but affects layout) */
    .vc_tta.vc_tta-tabs .vc_tta-tabs-list {
        margin-bottom: 0 !important;
    }
}



/* --- _vcard.css --- */
/* ============================================================
   vCard – Standalone-Kontaktseite
   ============================================================ */

/* ── Booton-Schrift (aus dem Hywin-Theme) ─────────────────── */
@font-face {
    font-family: "Booton";
    src: url("../../webfonts/Booton-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Booton";
    src: url("../../webfonts/Booton-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ── Font-Size-Variablen (gespiegelt aus _variables.css) ──── */
:root {
    --font-size-body-xl: clamp(1rem, 1.5vw, 1.375rem);
    --font-size-body-md: clamp(0.875rem, 1vw, 1rem);
    --font-size-body-sm: 0.875rem;
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.vc-page {
    font-family: "Booton", serif;
    background: #121217;
    color: #1B1B20;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* ── Card-Wrapper ─────────────────────────────────────────── */
.vc-wrap {
    /* Hintergrundfarbe = Header-Farbe, damit an den abgerundeten Ecken
       kein weißer Anti-Aliasing-Saum entsteht. Weiß wird nur noch
       explizit auf .vc-body und .vc-buttons gesetzt. */
    background: #1b1b20;
    border-radius: 1.25rem;
    width: 100%;
    max-width: 570px;
    overflow: hidden;
    box-shadow: 0 12px 60px rgba(0, 0, 0, .5);
}

/* ── Header ───────────────────────────────────────────────── */
.vc-header {
    background: #1b1b20;
    padding: 2.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
}

.vc-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.vc-avatar--placeholder {
    background: #2d2d35;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-avatar--placeholder svg {
    width: 3rem;
    height: 3rem;
    fill: #55555f;
}

.vc-name {
    font-size: var(--font-size-body-xl);
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
}

.vc-job {
    font-size: var(--font-size-body-md);
    color: rgba(255, 255, 255, .6);
    font-weight: 400;
}

/* ── Quick-Action-Bar ─────────────────────────────────────── */
.vc-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #1b1b20;
    border-top: 1px solid #E2E1E9;
}

.vc-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-decoration: none;
    color: rgba(255, 255, 255, .75);
    font-size: var(--font-size-body-sm);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    background: none;
    border: none;
    padding: 1rem .5rem 1.1rem;
    transition: background .2s, color .2s;
    position: relative;
    font-family: "Booton", serif;
}

.vc-action + .vc-action::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #E2E1E9;
}

.vc-action:hover {
    background: rgba(255, 255, 255, .05);
    color: #ffffff;
}

.vc-action__icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-action__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

/* ── Body / Kontaktzeilen ─────────────────────────────────── */
.vc-body {
    background: #ffffff;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
}

.vc-row {
    display: flex;
    align-items: center;   /* Icons standardmäßig vertikal zentriert */
    gap: 1rem;
    padding: .875rem 0;
    border-bottom: 1px solid #f0f0f2;
}
.vc-row:last-child { border-bottom: none; }

/* Adresszeile: Icon oben ausrichten (mehrere Textzeilen + Map-Link)
   Funktioniert auch ohne die PHP-Klasse vc-row--address via :has() */
.vc-row--address,
.vc-row:has(.vc-map-link) {
    align-items: flex-start;
}
.vc-row--address .vc-row__icon,
.vc-row:has(.vc-map-link) .vc-row__icon {
    padding-top: .15rem;   /* optische Ausrichtung zur ersten Textzeile */
}

.vc-row__icon {
    width: 1.375rem;       /* 22px */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #929199;
}
.vc-row__icon svg {
    width: 1.375rem;       /* 22px */
    height: 1.375rem;
    fill: currentColor;
    stroke: currentColor; /* für outline-style SVGs (z. B. Globus) */
}

/* Outline-SVGs sollen fill=none behalten */
.vc-row__icon svg[fill="none"] {
    fill: none;
}

.vc-row__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/* Einzel-Eintrag innerhalb einer Gruppe */
.vc-row__entry {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .15rem 0;
}
.vc-row__entry + .vc-row__entry {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #f0f0f2;
}

.vc-row__value {
    font-size: var(--font-size-body-md);
    color: #1B1B20;
    text-decoration: none;
    word-break: break-word;
    line-height: 1.3;
}
a.vc-row__value:hover { color: #EE7F00; }

.vc-row__label {
    font-size: var(--font-size-body-sm);
    color: #929199;
    letter-spacing: .01em;
    line-height: 1.3;
}

/* SHOW ON MAP */
.vc-map-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;  /* verhindert Streckung auf volle Zeilenbreite */
    gap: .375rem;
    font-size: var(--font-size-body-md);
    font-weight: 600;
    color: #EE7F00;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 1.25rem 0 0.55rem -.625rem; /* neg. margin-left gleicht padding-left aus → Text bleibt bündig */
    background: none;
    border: none;
    border-radius: .5rem;
    padding: .5rem .875rem .5rem .625rem; /* links Padding für Hover-Hintergrund */
    cursor: pointer;
    text-decoration: none;
    font-family: "Booton", serif;
    transition: color .18s, background .18s;
}
.vc-map-link:hover {
    background: rgba(0, 0, 0, .08);
}
.vc-map-link svg {
    width: .875rem;
    height: .875rem;
    fill: currentColor;
}

/* ── Buttons ──────────────────────────────────────────────── */
.vc-buttons {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem 1.5rem 1.75rem;
    border-top: 1px solid #f0f0f2;
}

.vc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .9rem 1.25rem;
    border-radius: .75rem;
    font-size: var(--font-size-body-md);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: "Booton", serif;
    transition: background .2s, color .2s, border-color .2s;
}
.vc-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
    flex-shrink: 0;
}

.vc-btn--primary {
    background: #EE7F00;
    color: #ffffff;
}
.vc-btn--primary:hover { background: #d47100; }

.vc-btn--secondary {
    background: transparent;
    color: #1B1B20;
    border: 1px solid #d8d8dc;
}
.vc-btn--secondary:hover {
    background: #f4f4f6;
    border-color: #b0b0b8;
}

/* ── Dialog / Modal ───────────────────────────────────────── */
.vc-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.vc-dialog-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.vc-dialog {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem 1.5rem 1.5rem;
    width: 100%;
    max-width: 22rem;
    text-align: center;
    box-shadow: 0 16px 60px rgba(0, 0, 0, .2);
    transform: translateY(12px);
    transition: transform .2s;
}
.vc-dialog-backdrop.is-visible .vc-dialog { transform: translateY(0); }

.vc-dialog__icon {
    width: 3.25rem;
    height: 3.25rem;
    background: #fff4e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.vc-dialog__icon svg {
    width: 1.625rem;
    height: 1.625rem;
    fill: #EE7F00;
}

.vc-dialog__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #1B1B20;
    margin-bottom: .5rem;
}
.vc-dialog__text {
    font-size: .9rem;
    color: #55555f;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.vc-dialog__actions {
    display: flex;
    gap: .75rem;
}
.vc-dialog__actions .vc-btn { flex: 1; }

/* ── Toast ────────────────────────────────────────────────── */
.vc-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: #1B1B20;
    color: #ffffff;
    font-size: .875rem;
    font-weight: 500;
    padding: .625rem 1.25rem;
    border-radius: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    white-space: nowrap;
    z-index: 10000;
}

.vc-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* --- _videoembed.css --- */
/* =============================================
   Global WordPress Video Embeds
   Round the MediaElement / wp-video wrapper so
   native MP4 embeds match the theme radius.
   ============================================= */

body .wp-video,
body .wpb_video_wrapper,
body .mejs-container {
    border-radius: 32px !important;
    overflow: hidden;
}

body .wp-video,
body .wpb_video_wrapper {
    display: block;
}

body .wp-video-shortcode,
body .mejs-container video,
body .mejs-mediaelement video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

body .mejs-inner,
body .mejs-mediaelement,
body .mejs-layers,
body .mejs-poster,
body .mejs-overlay,
body .mejs-controls {
    border-radius: inherit;
}

body .mejs-container-fullscreen,
body .mejs-container:fullscreen,
body .mejs-container:-webkit-full-screen,
body .mejs-container:-moz-full-screen {
    border-radius: 0 !important;
    overflow: visible;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

html.mejs-fullscreen body .wp-video,
html.mejs-fullscreen body .wpb_video_wrapper,
html.mejs-fullscreen body .mejs-container,
html.mejs-fullscreen body .mejs-container-fullscreen {
    border-radius: 0 !important;
    overflow: visible !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

body .mejs-container-fullscreen .mejs-inner,
body .mejs-container-fullscreen .mejs-mediaelement,
body .mejs-container-fullscreen .mejs-mediaelement video,
body .mejs-container-fullscreen .mejs-layers,
body .mejs-container-fullscreen .mejs-poster,
body .mejs-container-fullscreen .mejs-overlay,
body .mejs-container-fullscreen .mejs-controls,
body .mejs-container:fullscreen .mejs-inner,
body .mejs-container:fullscreen .mejs-mediaelement,
body .mejs-container:fullscreen .mejs-mediaelement video,
body .mejs-container:fullscreen .mejs-layers,
body .mejs-container:fullscreen .mejs-poster,
body .mejs-container:fullscreen .mejs-overlay,
body .mejs-container:fullscreen .mejs-controls,
body .mejs-container:-webkit-full-screen .mejs-inner,
body .mejs-container:-webkit-full-screen .mejs-mediaelement,
body .mejs-container:-webkit-full-screen .mejs-mediaelement video,
body .mejs-container:-webkit-full-screen .mejs-layers,
body .mejs-container:-webkit-full-screen .mejs-poster,
body .mejs-container:-webkit-full-screen .mejs-overlay,
body .mejs-container:-webkit-full-screen .mejs-controls,
body .mejs-container:-moz-full-screen .mejs-inner,
body .mejs-container:-moz-full-screen .mejs-mediaelement,
body .mejs-container:-moz-full-screen .mejs-mediaelement video,
body .mejs-container:-moz-full-screen .mejs-layers,
body .mejs-container:-moz-full-screen .mejs-poster,
body .mejs-container:-moz-full-screen .mejs-overlay,
body .mejs-container:-moz-full-screen .mejs-controls {
    border-radius: 0 !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

body .mejs-currenttime,
body .mejs-duration {
    position: relative;
    top: -8px;
    display: inline-block;
}

@media (max-width: 767px) {
    body .wp-video-shortcode,
    body .mejs-container video,
    body .mejs-mediaelement video {
        -webkit-clip-path: inset(0 round 32px);
        clip-path: inset(0 round 32px);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='100' height='100' rx='0' ry='0' fill='white'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='100' height='100' rx='0' ry='0' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }
}
/* --- _videoscroller.css --- */
/* =============================================
   Video Scroller
   Desktop:  Sticky Video + Karten-Einblendung per Scroll.
   Mobil:    16:9-Video + Slick-Slider mit Pfeil-Navigation darunter.
   ============================================= */

/* -----------------------------------------------
   Äußerer Container — Standard: Containerbreite.
   Höhe wird per JS gesetzt (Desktop).
   Kein overflow:hidden hier — das würde position:sticky
   des inneren Wrappers brechen.
   Modifier --full-width: 100vw Breakout ohne transform
   (transform auf einem Vorfahren bricht position:sticky).
   ----------------------------------------------- */
.video-scroller-outer {
    position: relative;
}

.video-scroller-outer--full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* -----------------------------------------------
   Sticky-Wrapper — Desktop: echtes position:sticky.
   overflow:hidden hier (nicht am Outer) damit
   position:sticky der Kinder funktioniert.
   top + height werden per JS gesetzt (Desktop).
   ----------------------------------------------- */
.video-scroller-sticky {
    top: 0;
    width: 100%;
    overflow: hidden;
    background: #000; /* Fallback wenn Video noch lädt */
}

/* -----------------------------------------------
   Video-Rahmen — füllt die gesamte Sticky-Fläche
   ----------------------------------------------- */
.video-scroller__frame {
    position: absolute;
    inset: 0;
}

.video-scroller__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------
   Panel — Overlay-Bereich für die Karten.
   Standard: links. Modifier --panel-right: rechts.
   ----------------------------------------------- */
.video-scroller__panel {
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 42%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem 2rem 2.5rem;
    pointer-events: none;
}

.video-scroller-outer--panel-right .video-scroller__panel {
    left: auto;
    right: 0;
    padding: 2rem 2.5rem 2rem 1.5rem;
}

/* -----------------------------------------------
   Pfeil-Navigation — nur mobil sichtbar (CSS)
   ----------------------------------------------- */
.video-scroller__nav {
    display: none;
}

/* -----------------------------------------------
   Karten-Track — CSS-Grid: alle Karten übereinander
   (Desktop), Slick übernimmt auf Mobil (block).
   ----------------------------------------------- */
.video-scroller__track {
    width: 100%;
}

/* -----------------------------------------------
   Einzelne Karte — gemeinsame visuelle Basis
   (identisch zu .text-slide)
   ----------------------------------------------- */
.vs-slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.75rem;
    background: var(--color-container-low);
    border-radius: var(--border-radius-lg, 2rem);
    box-sizing: border-box;
}

.vs-slide__body > * {
    color: var(--color-on-surface);
    margin: 0;
}

.vs-slide__body > * + * {
    margin-top: 0.75em;
}

/* -----------------------------------------------
   Desktop (≥ 900 px)
   ----------------------------------------------- */
@media (min-width: 900px) {

    /* Echtes CSS-sticky — kein JS-Positoning mehr nötig.
       Voraussetzung: kein overflow:hidden und kein transform
       auf einem Vorfahren (beides vermieden, s.o.). */
    .video-scroller-sticky {
        position: sticky;
    }

    /* Karten-Track: alle Karten in einer Grid-Zelle übereinander */
    .video-scroller__track {
        display: grid;
    }

    .vs-slide {
        grid-area: 1 / 1;       /* alle Karten in derselben Zelle */
        opacity: 0;             /* Startzustand — JS übernimmt ab Init */
        transform: translateY(10px);
        pointer-events: none;
        will-change: opacity, transform;
        /* Kein CSS-transition auf Desktop: JS steuert opacity direkt
           (scroll-synchron, kein künstlicher Verzug erwünscht) */
    }

    /* .is-active: nur noch für pointer-events nötig,
       opacity + transform werden direkt per style gesetzt */
    .vs-slide.is-active {
        pointer-events: auto;
    }
}

/* -----------------------------------------------
   Mobil (≤ 899 px) — Layout-Override + Navigation
   ----------------------------------------------- */
@media (max-width: 899px) {

    /* Pfeil-Navigation einblenden wenn ≥ 2 Karten */
    .video-scroller-outer--has-nav .video-scroller__nav {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.75rem;
        pointer-events: all;
    }
    
    /* Äußerer Container: normale Höhe (kein sticky);
       overflow-x:hidden verhindert, dass Slick die Seitenbreite erhöht. */
    .video-scroller-outer {
        height: auto !important;
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Sticky → normaler Fluss; overflow:hidden bleibt für Slick */
    .video-scroller-sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        background: transparent;
        display: flex;
        flex-direction: column;
    }

    /* Video-Rahmen: Seitenverhältnis 16:9 */
    .video-scroller__frame {
        position: relative;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .video-scroller__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Panel: normale Breite unter dem Video */
    .video-scroller__panel {
        position: static;
        width: 100%;
        max-width: none;
        padding: 1.25rem 0 0;
        pointer-events: all;
    }

    /* Track: block — Slick übernimmt */
    .video-scroller__track {
        display: block;
    }

    /* Karten: sichtbar + Slick-kompatibel */
    .vs-slide {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        width: auto;
        padding: 1.25rem;
        margin: 0;
    }

    /* Slick-List darf auf Mobil nicht overflow:visible sein */
    .video-scroller__track .slick-list {
        overflow: hidden !important;
    }
}


/* --- _wpbakery.css --- */
/* =============================================================
   WPBAKERY — FLEX LAYOUT RESET
   Replace float-based grid with flexbox.
   Kill all :before/:after clearfix hacks on rows.
   ============================================================= */

/* Row → flex container */
.vc_row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
}

/* =============================================================
   WPBakery text blocks
   Lists rendered from TinyMCE / text blocks keep the theme's
   square bullet marker instead of the browser default disc.
   ============================================================= */

.wpb_text_column ul {
    padding-left: 2rem;
    list-style-position: outside;
}

.wpb_text_column ul > li {
    list-style-type: square;
}

/* Stack columns vertically on mobile only */
@media (max-width: 575px) {
    .vc_row {
        flex-wrap: wrap !important;
    }

    /* Spaltenreihenfolge auf Mobil umkehren (z. B. Bild vor Text) */
    .vc_row.row-col-reverse-mobile {
        flex-direction: column-reverse !important;
    }
}

/* Kill WPBakery clearfix pseudo-elements on rows */
.vc_row::before,
.vc_row::after,
.vc_clearfix::before,
.vc_clearfix::after {
    display: none !important;
    content: none !important;
}

/* Kill all floats on column wrappers — all breakpoints */
.vc_col-xs-1,  .vc_col-xs-2,  .vc_col-xs-3,  .vc_col-xs-4,
.vc_col-xs-5,  .vc_col-xs-6,  .vc_col-xs-7,  .vc_col-xs-8,
.vc_col-xs-9,  .vc_col-xs-10, .vc_col-xs-11, .vc_col-xs-12,
.vc_col-xs-1\/5, .vc_col-xs-2\/5, .vc_col-xs-3\/5,
.vc_col-xs-4\/5, .vc_col-xs-5\/5,
.vc_col-sm-1,  .vc_col-sm-2,  .vc_col-sm-3,  .vc_col-sm-4,
.vc_col-sm-5,  .vc_col-sm-6,  .vc_col-sm-7,  .vc_col-sm-8,
.vc_col-sm-9,  .vc_col-sm-10, .vc_col-sm-11, .vc_col-sm-12,
.vc_col-sm-1\/5, .vc_col-sm-2\/5, .vc_col-sm-3\/5,
.vc_col-sm-4\/5, .vc_col-sm-5\/5,
.vc_col-md-1,  .vc_col-md-2,  .vc_col-md-3,  .vc_col-md-4,
.vc_col-md-5,  .vc_col-md-6,  .vc_col-md-7,  .vc_col-md-8,
.vc_col-md-9,  .vc_col-md-10, .vc_col-md-11, .vc_col-md-12,
.vc_col-md-1\/5, .vc_col-md-2\/5, .vc_col-md-3\/5,
.vc_col-md-4\/5, .vc_col-md-5\/5,
.vc_col-lg-1,  .vc_col-lg-2,  .vc_col-lg-3,  .vc_col-lg-4,
.vc_col-lg-5,  .vc_col-lg-6,  .vc_col-lg-7,  .vc_col-lg-8,
.vc_col-lg-9,  .vc_col-lg-10, .vc_col-lg-11, .vc_col-lg-12,
.vc_col-lg-1\/5, .vc_col-lg-2\/5, .vc_col-lg-3\/5,
.vc_col-lg-4\/5, .vc_col-lg-5\/5 {
    float: none !important;
}

/* Column containers are flex children — reset legacy padding-based gutters */
.vc_column_container {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* =============================================================
   COLUMN GAP — 24px grid scale using CSS gap (not padding)
   WPBakery adds .vc_column-gap-{N} to the row element.
   We use gap directly on the flex row; reset legacy
   negative-margin approach entirely.
   ============================================================= */

/* Reset all legacy gap margin/padding hacks */
[class*="vc_column-gap-"] {
    margin: 0 auto !important;
}

[class*="vc_column-gap-"] > .vc_column_container {
    padding: 0 !important;
}

/* Default: 24px gap */
.vc_row { gap: 24px; }

.vc_column-gap-0   { gap: 0   !important; }
.vc_column-gap-24  { gap: 24px  !important; }
.vc_column-gap-48  { gap: 48px  !important; }
.vc_column-gap-72  { gap: 72px  !important; }
.vc_column-gap-96  { gap: 96px  !important; }
.vc_column-gap-120 { gap: 120px !important; }
.vc_column-gap-144 { gap: 144px !important; }
.vc_column-gap-168 { gap: 168px !important; }

/* Scale down on tablet (~70%) */
@media (max-width: 991px) {
    .vc_column-gap-48  { gap: 32px !important; }
    .vc_column-gap-72  { gap: 48px !important; }
    .vc_column-gap-96  { gap: 64px !important; }
    .vc_column-gap-120 { gap: 80px !important; }
    .vc_column-gap-144 { gap: 96px !important; }
    .vc_column-gap-168 { gap: 112px !important; }
}

@media (max-width: 767px) {
    [class*="vc_column-gap-"] { gap: 20px !important; }
}

/* Scale down on mobile (~50%) */
@media (max-width: 575px) {
    [class*="vc_column-gap-"] { gap: 20px !important; }
}

/* =============================================================
   ROW CONTAINER — width & positioning
   ============================================================= */

.vc_row:not([data-vc-full-width]) {
    max-width: var(--container-size);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Container size variants */
.row-container-inner:not([data-vc-full-width]) {
    max-width: var(--container-size-inner) !important;
}

.vc_row[data-vc-full-width] .vc_column_container > .vc_column-inner {
    padding: 0;
}

.vc_column_container > .vc_column-inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Verschachtelte vc_column_container erhalten kein zusätzliches Padding */
.vc_column_container .vc_column_container > .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 90.25rem){
    .vc_column_container > .vc_column-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

.wpb-content-wrapper > .vc_row {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
}

/* =============================================================
   ROW SPACING PRESETS
   Applied via hywin_space_top / hywin_space_bottom params.
   Suffix --top / --bottom targets padding direction only.
   Each preset maps to a fixed step in the spacing scale.
   ============================================================= */

.row-space-none--top    { padding-top:    0 !important; }
.row-space-none--bottom { padding-bottom: 0 !important; }

/* --- XS: 20px --- */
.row-space-xs--top    { padding-top:    20px !important; }
.row-space-xs--bottom { padding-bottom: 20px !important; }

/* --- SM: 40px --- */
.row-space-sm--top    { padding-top:    40px !important; }
.row-space-sm--bottom { padding-bottom: 40px !important; }

/* --- MD: 80px --- */
.row-space-md--top    { padding-top:    80px !important; }
.row-space-md--bottom { padding-bottom: 80px !important; }

/* --- LG: 120px --- */
.row-space-lg--top    { padding-top:    120px !important; }
.row-space-lg--bottom { padding-bottom: 120px !important; }

/* --- XL: 160px --- */
.row-space-xl--top    { padding-top:    160px !important; }
.row-space-xl--bottom { padding-bottom: 160px !important; }

/* --- XXL: 200px --- */
.row-space-xxl--top    { padding-top:    200px !important; }
.row-space-xxl--bottom { padding-bottom: 200px !important; }

/* Scale down on tablet */
@media (max-width: 991px) {
    .row-space-md--top    { padding-top:    60px  !important; }
    .row-space-md--bottom { padding-bottom: 60px  !important; }
    .row-space-lg--top    { padding-top:    80px  !important; }
    .row-space-lg--bottom { padding-bottom: 80px  !important; }
    .row-space-xl--top    { padding-top:    120px !important; }
    .row-space-xl--bottom { padding-bottom: 120px !important; }
    .row-space-xl--top    { padding-top:    140px !important; }
    .row-space-xl--bottom { padding-bottom: 140px !important; }
    .row-space-xxl--top    { padding-top:    160px !important; }
    .row-space-xxl--bottom { padding-bottom: 160px !important; }
}

/* Scale down on mobile */
@media (max-width: 575px) {
    .row-space-sm--top    { padding-top:    20px !important; }
    .row-space-sm--bottom { padding-bottom: 20px !important; }
    .row-space-md--top    { padding-top:    40px !important; }
    .row-space-md--bottom { padding-bottom: 40px !important; }
    .row-space-lg--top    { padding-top:    60px !important; }
    .row-space-lg--bottom { padding-bottom: 60px !important; }
    .row-space-xl--top    { padding-top:    80px !important; }
    .row-space-xl--bottom { padding-bottom: 80px !important; }
    .row-space-xl--top    { padding-top:    100px !important; }
    .row-space-xl--bottom { padding-bottom: 100px !important; }
    .row-space-xxl--top    { padding-top:    120px !important; }
    .row-space-xxl--bottom { padding-bottom: 120px !important; }
}

/* =============================================================
   COLOR SCHEME INVERSION
   Forces light or dark palette on a row regardless of OS setting.
   Vars mirror :root (light) and @media prefers-color-scheme:dark.
   ============================================================= */

/* Force light palette — applies light vars even in dark OS mode */
.row-scheme-light {
    --color-surface:                    #F9F8FF;
    --color-surface-passthrough:        rgba(249, 248, 255, 0.7);
    --color-container-lowest:           #FFFFFF;
    --color-container-low:              #F4F3FB;
    --color-container:                  #F0EEF8;
    --color-container-high:             #E8E7F0;
    --color-container-high-passthrough: rgba(232, 231, 240, 0.7);
    --color-container-highest:          #E4E3EB;
    --color-on-surface:                 #1B1B20;
    --color-on-surface-variant:         #48484E;
    --color-outline:                    #929199;
    --color-outline-variant:            #C7C6D0;
    --color-error:                      #B62832;
    --color-on-error:                   #FFDDDB;
    color-scheme: light;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
}

/* Force dark palette — applies dark vars even in light OS mode */
.row-scheme-dark {
    --color-surface:                    #121217;
    --color-surface-passthrough:        rgba(18, 18, 23, 0.7);
    --color-container-lowest:           #0D0D12;
    --color-container-low:              #22232A;
    --color-container:                  #292932;
    --color-container-high:             #34343D;
    --color-container-high-passthrough: rgba(52, 52, 61, 0.7);
    --color-container-highest:          #3E3D47;
    --color-on-surface:                 #E2E1E9;
    --color-on-surface-variant:         #C7C6D0;
    --color-outline:                    #929199;
    --color-outline-variant:            #48484E;
    --color-error:                      #CA343E;
    --color-on-error:                   #FFDDDB;
    color-scheme: dark;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
}

.wpb_content_element {
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* Card & Text Slider benötigt overflow: visible in allen WPBakery-Eltern,
   damit die seitlichen Cards über den Container hinausragen.
   Betrifft .card-slider (Breakout) — die Nav liegt außerhalb davon. */
.wpb_content_element:has(.card-slider-wrap),
.wpb_wrapper:has(.card-slider-wrap),
.vc_column-inner:has(.card-slider-wrap),
.vc_column_container:has(.card-slider-wrap),
.wpb_column:has(.card-slider-wrap),
.wpb_content_element:has(.text-slider-wrap),
.wpb_wrapper:has(.text-slider-wrap),
.vc_column-inner:has(.text-slider-wrap),
.vc_column_container:has(.text-slider-wrap),
.wpb_column:has(.text-slider-wrap) {
    overflow: visible !important;
}

/* =============================================================
   WPBAKERY HAS-FILL PADDING RESET
   WPBakery's own CSS sets padding-top: 35px on vc_column-inner
   inside rows/columns with a background fill. We reset this to 0
   so our own spacing system takes full control.
   ============================================================= */

.vc_col-has-fill > .vc_column-inner,
.vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner,
.vc_row-has-fill + .vc_row > .vc_column_container > .vc_column-inner,
.vc_row-has-fill > .vc_column_container > .vc_column-inner {
    padding-top: 0 !important;
}

/* =============================================================
   WPBAKERY BUTTON — margin reset
   ============================================================= */

.vc_btn3-container {
    margin-bottom: 0 !important;
}

/* =============================================================
   CONTENT ALIGNMENT — row-level flex alignment utility
   ============================================================= */

.row-content-left .wpb_wrapper,
.row-content-center .wpb_wrapper,
.row-content-right .wpb_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.row-content-left .wpb_wrapper {
    justify-content: flex-start;
}

.row-content-center .wpb_wrapper {
    justify-content: center;
}

.row-content-right .wpb_wrapper {
    justify-content: flex-end;
}

/*
   WPBakery setzt auf .vc_btn3-block width:100%, was den Button-
   Container als Flex-Item auf volle Breite zwingt — justify-content
   hätte dann keinen sichtbaren Effekt. Wir setzen width auf auto
   (natürliche Inhaltsbreite) und fixieren die Container-Größe mit
   flex:0 0 auto (kein grow/shrink), damit Buttons wirklich neben-
   einander stehen und die Ausrichtung greift.
*/
.row-content-left .wpb_wrapper > .vc_btn3-container,
.row-content-center .wpb_wrapper > .vc_btn3-container,
.row-content-right .wpb_wrapper > .vc_btn3-container {
    flex: 0 0 auto;
}

.row-content-left .wpb_wrapper > .vc_btn3-container .vc_btn3-block,
.row-content-center .wpb_wrapper > .vc_btn3-container .vc_btn3-block,
.row-content-right .wpb_wrapper > .vc_btn3-container .vc_btn3-block {
    width: auto;
}

/* =============================================================
   WPBAKERY SINGLE IMAGE — border-radius fix
   When an image is centered WPBakery renders:
     .wpb_single_image  ← CSS editor places border-radius here
       figure.vc_figure  ← display:inline-block when centered
         .vc_single_image-wrapper  ← visual box
           img
   The radius must reach the wrapper + img and overflow:hidden
   must be set to actually clip the image corners.
   ============================================================= */

.wpb_single_image .vc_single_image-wrapper {
    overflow: hidden;
    border-radius: inherit;
}

.wpb_single_image img {
    border-radius: inherit;
}

/* Propagate radius from the vc_custom_* class down the chain */
.wpb_single_image .vc_figure {
    border-radius: inherit;
    overflow: hidden;
}