/*
Theme Name: Verify GCC Theme
Text Domain: verify-gcc-theme
Author: Moussa Garabet
Description: Ein individuelles WordPress-Theme für Verify GCC mit Mega-Menü, Kontaktformular und responsivem Design.
Version: 1.3
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ========================= Fonts for Texts=============================== */

/* @font-face {
    font-family: 'Roboto';
    src: url('/verify-gcc/wp-content/themes/verify-gcc-theme/assets/fonts/roboto-3fonts/subset-Roboto-Light.woff2') format('woff2'),
        url('/verify-gcc/wp-content/themes/verify-gcc-theme/assets/fonts/roboto-3fonts/subset-Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
} */

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto-3fonts/subset-Roboto-Regular.woff2') format('woff2'),
        url('assets/fonts/roboto-3fonts/subset-Roboto-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto-3fonts/subset-Roboto-Bold.woff2') format('woff2'),
        url('assets/fonts/roboto-3fonts/subset-Roboto-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ========================= Colors =============================== */

/* bild hintergrundfarbe /main slider color
    background-color: rgb(165, 172, 169);
    background-color :#eff3f1; 
    bright silver: border-color: rgb(255, 255, 255);
*/

/* 

    baby blue: #a1d4e2;
    background: radial-gradient(circle at center, #20928a 0%, #a1d4e2 100%) !important;

*/

:root {
    --orange: #ff6900;
    --lightgreen_bg: #edf7f6;
    --green: #20928a;
    --brightgray: #E5E5E5;
    --anim-duration: 500ms;
}


/* ==============================General Properties========================== */
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /* keep vertical scroll, but never a horizontal one — decorative
       full-bleed bits (hero ECG, RTL FAQ tab strip) can poke a few px
       past the viewport on narrow screens. body:overflow:hidden alone
       wasn't catching every case. */
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 16px;
    color: gray;
}

body {
    overflow: hidden;
}

body,
p {
    font-family: 'Roboto', 'Arial';
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}


/* buttons & links */

.gray-link {
    color: gray;
}

.gray-link:hover {
    color: var(--orange);
}

.card.is-active .gray-link,
.header-card.is-active .gray-link {
    color: var(--orange);
}

.green-link {
    color: var(--green);
}

.green-link:hover {
    color: var(--green);
}

.btn-hover {
    display: inline-block;
    position: relative;
    color: gray;
    padding: 0px 0px;
    transition: color 0.4s ease;
    cursor: pointer;
    font-size: 1em;
}

.btn-hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--green);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.btn-hover:hover {
    color: var(--green);
}

.btn-hover:hover::after {
    transform: scaleX(1);
}

.btn-hover-orange {
    display: inline-block;
    position: relative;
    color: gray;
    padding: 0px 0px;
    transition: color 0.4s ease;
    cursor: pointer;
}

.btn-hover-orange::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--orange);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.btn-hover-orange:hover {
    color: var(--orange);
}

.btn-hover-orange:hover::after {
    transform: scaleX(1);
}

.header-card-btn {
    font-size: 0.75rem !important;
    color: gray;
    white-space: nowrap;
}

.home-btn-icon {
    display: inline-block;
    color: gray;
    transition: transform 0.3s ease;
}

.home-btn-icon:hover {
    color: var(--green);
    transform: scale(1.1);
}

/* description of workflow section*/
.section-description {
    text-align: justify;
    font-size: 1em;
    margin: 25px auto 10px auto;
    max-width: 767px;
    color: gray;
}


.accordion-button:not(.collapsed)::after {
    filter: grayscale(1);
}

.section-title {
    text-transform: uppercase;
    font-size: 1.75em;
    padding-bottom: 17px;
    color: var(--green);
    text-wrap: nowrap;
}

/* Headline Widget */
.headline-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lightgreen_bg);
    height: 60px;
}

.headline-widget h2 {
    font-size: 2.188em;
    color: var(--green);
    font-weight: bold;
    margin-bottom: 0px !important;
}


/* animation  */

/* Aufpopp-Reveal beim Reinscrollen (Vorbild: "HERO 2030 V3").
   Klasse .visible wird von element-animation.js gesetzt. Früher: hartes
   translateY(40px)-Fade bzw. 350px-Seiten-Slide -> jetzt federndes Aufpoppen. */

/* Einzelne Elemente (Karten, Feature-Boxen, Flaggen): aus 70% herein-poppen.
   Kein will-change: die ~30 Knoten sind fast immer im Ruhezustand; der Browser
   promotet sie beim Transition-Start selbst und baut den Layer danach wieder ab. */
.animation-immediate,
.animation-effect {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity .8s ease,
        transform 1.1s cubic-bezier(.34, 1.4, .4, 1);
}

.animation-immediate.visible,
.animation-effect.visible {
    opacity: 1;
    transform: none;
}

/* Große Sektionen: der alte 350px-Seiten-Slide wird zu einem ruhigen
   Auftauchen von unten (kein horizontaler Versatz -> kein Overflow). */
.workflow-section,
.faqs-container,
.form-wrapper,
.location-headline-text-wrapper,
.from-headline-text-wrapper,
.location-wrapper {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s ease,
        transform 1s cubic-bezier(.16, 1, .3, 1);
}

.location-wrapper.visible,
.from-headline-text-wrapper.visible,
.workflow-section.visible,
.faqs-container.visible,
.form-wrapper.visible,
.location-headline-text-wrapper.visible {
    opacity: 1;
    transform: none;
}

/* ==============================End of Headline Widget========================== */

/* VERIFY 2026-08-30: Alt-Hero-Slider-CSS entfernt (.mySwiperDesktop /
   .mySwiperMobile / .desk-first-slide + Alt-Pagination). Markup lag in
   front-page.php unter `if ( false )`; der .workflow-swiper weiter unten ist
   NICHT betroffen. Reste in @media-Blöcken siehe VERIFY 2026-08-30 unten. */

/* ===================== 404 Page ============================ */

#notfound {
    position: relative;
    height: 100vh;
}

#notfound .notfound {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.notfound {
    max-width: 520px;
    width: 100%;
    line-height: 1.4;
    text-align: center;
}

.notfound .notfound-404 {
    position: relative;
    height: 200px;
    margin: 0px auto 20px;
    z-index: -1;
}

.notfound .notfound-404 h1 {
    font-size: 236px;
    font-weight: 200;
    margin: 0px;
    color: #211b19;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.notfound .notfound-404 h2 {
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    color: #211b19;
    background: #fff;
    padding: 10px 5px;
    margin: 1rem 2rem;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
}




/* ===================== complianz plugin ============================ */

.privacy-statement {
    text-transform: capitalize !important;
}

.cmplz-document>p:first-of-type {
    display: none !important;
}

/* ==============================Header========================== */
header {
    z-index: 34;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(to right, #edf7f6 25%, #ffffff 75%);
    z-index: 999999;
}

.logo-wrapper-desktop {
    min-width: 165px;
}

.logo {
    width: 165px;
    height: 50px;
}

.desktop-header {
    display: block;
    padding: 0% 5%;
}

.mobile-header {
    display: none !important;
}

.verify-desktop-navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    color: gray;
}

.desk-nav-item {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 10px;
}

.desk-nav-item:hover {
    color: var(--green);
}

.desk-nav-item>a {
    padding: 3px 0px;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    color: inherit;
    text-wrap: nowrap;
}

.desk-nav-icons {
    color: inherit;
    font-size: 1rem;
    margin-right: 5px;
    vertical-align: text-bottom;
}

.desk-nav-phone,
.desk-nav-email {
    font-size: 0.9em;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 3px 10px !important;
    margin-bottom: 2px;
}

.mega-wrapper {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1000;
}

.mega-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    /* natural, content-driven size; JS only overrides width/height briefly
       while animating between tabs of different sizes */
    width: max-content;
    max-width: min(1000px, calc(100vw - 24px));
    border-radius: 5px;
    background: #fff;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.12),
        0 25px 45px rgba(0, 0, 0, 0.10),
        0 50px 70px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity .2s ease,
        transform .22s cubic-bezier(.4, 0, .2, 1),
        width .28s cubic-bezier(.4, 0, .2, 1),
        height .28s cubic-bezier(.4, 0, .2, 1),
        left .28s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear .22s;
    z-index: 999999;
    pointer-events: auto;
    overflow: visible;
    box-sizing: border-box;
}

.mega-panel.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity .2s ease,
        transform .22s cubic-bezier(.4, 0, .2, 1),
        width .28s cubic-bezier(.4, 0, .2, 1),
        height .28s cubic-bezier(.4, 0, .2, 1),
        left .28s cubic-bezier(.4, 0, .2, 1),
        visibility 0s;
}

/* clip overflow only while the box animates between tab sizes,
   so card hover-glows aren't cut off the rest of the time */
.mega-panel.animating {
    overflow: hidden;
}

.mega-arrow {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 22px solid #fff;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .18s ease,
        left .28s cubic-bezier(.4, 0, .2, 1),
        top .28s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear .18s;
    z-index: 1000000;
    pointer-events: none;
}

.mega-arrow.visible {
    opacity: 1;
    visibility: visible;
    transition:
        opacity .18s ease,
        left .28s cubic-bezier(.4, 0, .2, 1),
        top .28s cubic-bezier(.4, 0, .2, 1),
        visibility 0s;
}

.mega-inner {
    display: none;
    box-sizing: border-box;
    padding: 0;
}

.mega-inner.is-active {
    display: block;
}

/* ---- mega card grid: drives the dynamic panel width ---- */
.mega-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, 200px);
    align-content: start;
    align-items: start;
}

.mega-grid--3 {
    grid-template-columns: repeat(3, 200px);
}

.services-content .mega-grid .header-card {
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* ---- reserved, non-shifting image box ---- */
/* No `position` here: a positioned .img-wrapper would paint over the
   .header-card::before hover border in the image area. */
.mega-panel .img-wrapper {
    aspect-ratio: 7 / 4;
    overflow: hidden;
    background: #eef2f2;
}

.mega-panel .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .35s ease;
}

.mega-panel .img-wrapper img.loaded {
    opacity: 1;
}


.mega-overlay {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100% - 70px);
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 998;
}

.mega-overlay.visible {
    opacity: 1;
    visibility: visible;
}


.services-panel {
    display: grid;
    grid-template-columns: 200px 1px 1fr;
    gap: 10px;
    width: auto;
    max-width: 100%;
    min-height: 260px;
    padding: 18px;
}

.services-sidebar {
    display: flex;
    flex-direction: column;
    width: 200px;
    gap: 10px;
}

.services-divider {
    width: 1px;
    background: #e6e6e6;
    min-height: 230px;
}

.services-content {
    flex: 1;
    display: flex;
}

.highlight-box {
    font-weight: 600;
    color: var(--orange);
    font-size: 0.92rem;
    padding: 3px 0;
    border-bottom: 2px solid var(--orange);
    display: inline-block;
}

.services-content .card {
    max-width: 160px;
}

/* header cards */

.header-card {
    border: none !important;
    min-width: 180px;
    position: relative;
    overflow: visible;
}

.header-card-body {
    max-height: 50px;
    display: flex;
    justify-content: center;
    text-align: center;
}

/* header form */
.form-wrapper-header {
    padding: 40px;
    margin: 20px;

}

/* deactivated cards */

.header-card.is-soon {
    cursor: not-allowed !important;
}

.header-card.is-soon:hover {
    opacity: 0.55;
    filter: grayscale(10%);
}

.header-card.is-soon a {
    pointer-events: none;
    cursor: not-allowed !important;
    color: gray !important;
}

.header-card.is-soon a:hover {
    color: gray !important;
}

/* end of deactivated cards */

/* adjust sizes and distances to the edges of browser */
@media screen and (min-width: 992px) and (max-width: 1200px) {

    .services-panel {
        grid-template-columns: 170px 1px 1fr;
        gap: 8px;
        padding: 12px;
    }

    .mega-grid {
        gap: 10px;
        grid-template-columns: repeat(2, 158px);
    }

    .mega-grid--3 {
        grid-template-columns: repeat(3, 158px);
    }

    .header-card {
        min-width: 120px !important;
    }

    .form-wrapper-header {
        padding: 20px;
        margin: 12px;
    }
}

/* contact form mega menu  */

/* overlay */
.contact-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.25);
    z-index: 998;
}

/* Contact Mega Panel */
.contact-mega-panel {
    position: absolute;
    top: 0;
    left: 0;

    /* VERIFY 2026-09-02: Vorhang-Effekt (transform: scaleY) entfernt — hat das
       Formular während des Auf-/Zufahrens gestaucht/verzerrt. Jetzt nur noch
       Opazitäts-Fade, kein transform auf dem Panel. */
    background: #fff;
    border-radius: 5px;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.12),
        0 25px 45px rgba(0, 0, 0, 0.10),
        0 50px 70px rgba(0, 0, 0, 0.08);

    overflow: hidden;

    /* Sichtbarkeit / Opazität */
    opacity: 0;
    visibility: hidden;

    transition:
        opacity 200ms ease-in-out,
        visibility 0s linear 200ms;

    will-change: opacity;

    min-width: 320px;
    max-width: 625px;
    width: auto;
    /* rechts kein Padding -> der Scrollbalken der .contact-inner sitzt am
       Panel-Rand statt eingerueckt (VERIFY 2026-08-31) */
    padding: 20px 0 20px 20px;
    z-index: 999;
}

/* Sichtbar */
.contact-mega-panel.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.contact-arrow-fixed {
    position: fixed;
    top: 52px;
    left: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #fff;
    z-index: 1001;
    pointer-events: none;
    display: none;
}

/* sichtbar wenn Panel geöffnet */
.contact-arrow-fixed.visible {
    display: block;
}

/* Close Button */
.contact-close {
    position: absolute;
    top: 8px;
    right: 8px;
    /* VERIFY 2026-09-02: über den scrollenden Formularfeldern bleiben. Die
       Felder sind wegen der schwebenden Labels position:relative (z-index
       auto) und stehen später im DOM -> malten sonst über den ×. */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.contact-close i {
    color: var(--orange);
    font-size: 2rem;
    line-height: 1;
}

/* Inner Form */
.contact-inner {
    /* VERIFY 2026-08-31: auf niedrigen Viewports (z.B. Nest Hub 1024x600) wurde
       das Panel unten abgeschnitten. Formular scrollt jetzt intern; passt der
       Inhalt in die Hoehe, erscheint kein Scrollbalken -> sonst nichts geaendert.
       padding-right hier (statt am Panel), damit der Scrollbalken am Rand sitzt.
       VERIFY 2026-09-02: padding-top 30 -> 46, damit die schwebende Beschriftung
       des ersten Felds (top:-8px) nicht unter dem ×-Button liegt. */
    padding: 46px 20px 0 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* end of contact form mega menu  */

/* trigger active */

/* Hover Mega Menus Trigger */
.mega-trigger.active-trigger,
#contact-trigger.active-trigger {
    color: var(--green);
}

#contact-trigger.active-trigger {
    border: 2px solid var(--green);
}

/* Optional: sanfte Transition */
.mega-trigger,
#contact-trigger {
    transition: color 0.2s, border 0.2s;
}


/* ==============================End of Header========================== */

/* VERIFY 2026-08-30: Alt-Slider-Hero-CSS entfernt (.stage-* / .triple-hex-* /
   @keyframes changeText). Das zugehörige Markup lag in front-page.php unter
   `if ( false )`; der neue Hero nutzt ausschließlich .vh-*. Zurückholen via
   git-History vor diesem Commit. .text-highlight (ohne stage-) lebt weiter
   unten und wird site-weit genutzt. */

/* ==============================Get verified and Certified ========================== */

/* VERIFY 2026-08-30: Alt-"About Us"/GCC-Flaggen-CSS entfernt (.flag-wrapper /
   .flags-text / .gcc-flag) – Markup lag unter `if ( false )`. */

/* ==============================Service Cards Section: INDIVIDUALS AND FACILITIES ================================ */

.services-cards-section {
    margin-bottom: 100px;
}

.text-highlight {
    color: var(--green);
}

.cards-row {
    margin-bottom: 2rem;
}

.cards-cols {
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-cards-section .card {
    height: 250px;
    max-width: 356px;
    border: 1px solid lightgray;
    position: relative;
    overflow: visible;
}

.services-cards-section .img-wrapper {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.services-cards-section .card-body {
    box-shadow: inset 0px 0px 1px 1px lightgray;
    text-align: center;
    background-color: var(--lightgreen_bg);
    padding: 11px;
}

.services-cards-section .services-cards-img {
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    width: 100%;
}

.card.is-blurred {
    filter: blur(4px);
    transition: filter 0.3s ease;
}

.card.is-active {
    box-shadow: 0 0 40px #ff6900;
    transform: translateY(-4px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* VERIFY 2026-08-30: Tap-/Klick-Feedback (Touch + Maus). Per JS auf pointerdown
   gesetzt, ~180ms nach pointerup wieder entfernt -> kurzer Orange-Rahmen +
   leichtes Eindruecken. Klaert sich immer, kann nicht "haengen". */
.cards-cols .card.is-pressed,
.header-card.is-pressed:not(.is-soon) {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
    transform: scale(0.98);
    transition: transform 90ms ease;
}

/* Beschriftung unten in der Karte blinkt beim Tap/Klick orange – solange
   .is-pressed anliegt (pointerdown bis kurz nach pointerup). */
.cards-cols .card.is-pressed .gray-link,
.header-card.is-pressed:not(.is-soon) .gray-link {
    animation: vh-link-blink 0.45s ease infinite;
}

@keyframes vh-link-blink {
    0%, 100% { color: gray; }
    50%      { color: var(--orange); }
}

@media (prefers-reduced-motion: reduce) {
    .cards-cols .card.is-pressed .gray-link,
    .header-card.is-pressed:not(.is-soon) .gray-link {
        animation: none;
        color: var(--orange);
    }
    .cards-cols .card.is-pressed,
    .header-card.is-pressed:not(.is-soon) {
        transform: none;
    }
}

/* new effekt */


/* Border */
.cards-cols .card::before,
.header-card:not(.is-soon)::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-color: var(--orange);
    pointer-events: none;
    opacity: 0;
    mask:
        linear-gradient(#fff 0 0) 0 0 / 0% 2px no-repeat,
        linear-gradient(#fff 0 0) 100% 0 / 2px 0% no-repeat,
        linear-gradient(#fff 0 0) 100% 100% / 0% 2px no-repeat,
        linear-gradient(#fff 0 0) 0 100% / 2px 0% no-repeat;
}

.cards-cols .card::after,
.header-card:not(.is-soon)::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--orange), 0 0 20px var(--orange), 0 0 30px var(--orange);
    opacity: 0;
    pointer-events: none;
}

/* Aktivierung – VERIFY 2026-08-30: ausschliesslich ueber .is-active (per JS,
   pointerType-geprueft -> nur echte Maus/Tastatur). Kein :hover mehr, damit auf
   Touch- und Hybrid-Geraeten nach einem Tap nichts "haengen" bleibt. */
.cards-cols .card.is-active::before,
.header-card.is-active:not(.is-soon)::before {
    opacity: 1;
    animation: border-draw var(--anim-duration) linear forwards;
}

.cards-cols .card.is-active::after,
.header-card.is-active:not(.is-soon)::after {
    opacity: 1;
    animation: spark-draw var(--anim-duration) linear forwards;
}

/* BORDER ANIMATION */
@keyframes border-draw {
    0% {
        mask-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%;
    }

    25% {
        mask-size: 100% 2px, 2px 0%, 0% 2px, 2px 0%;
    }

    50% {
        mask-size: 100% 2px, 2px 100%, 0% 2px, 2px 0%;
    }

    75% {
        mask-size: 100% 2px, 2px 100%, 100% 2px, 2px 0%;
    }

    100% {
        mask-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    }
}

/* FUNKE ANIMATION: Jede Kante einzeln */
@keyframes spark-draw {
    0% {
        top: 0;
        left: 0;
        transform: translate(-45%, -45%);
    }

    /* oben links: leicht innen */
    25% {
        top: 0;
        left: 100%;
        transform: translate(-55%, -45%);
    }

    /* oben rechts: leicht außen */
    50% {
        top: 100%;
        left: 100%;
        transform: translate(-55%, -55%);
    }

    /* unten rechts: leicht außen */
    75% {
        top: 100%;
        left: 0;
        transform: translate(-45%, -55%);
    }

    /* unten links: leicht innen */
    100% {
        top: 0;
        left: 0;
        transform: translate(-45%, -45%);
    }

    /* zurück oben links */
}


/* ==============================End of Service Cards Section INDIVIDUAS AND FACILITIES================================ */



/* ==============================WHY CHOSE US / About US for individuals ========================== */
.features-section-mobile {
    display: none;
}

.features-section-desktop {
    display: block;
    position: relative;
    overflow: hidden;
}

.features-section-desktop-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

.features {
    height: auto;
    padding: 10px;
    position: relative;
    z-index: 1;
}

.features-row-desk {
    width: 100%;
    height: 100%;
}

.features-text {
    text-align: center;
    max-width: 300px;
}

.verify-stamp-small {
    width: 248px;
    height: 248px;
}

.line-horizontal-desktop {
    width: 42%;
    height: 223px;
}

.line-vertical-desktop {
    width: 104%;
    height: 276px;
}

.features-box1,
.features-box3,
.features-box2,
.features-box4 {
    position: relative;
}

.features-box1,
.features-box3 {
    left: 55px;
}

.features-box1,
.features-box2 {
    top: 75px;
}

.features-box2,
.features-box4 {
    right: 55px;
}

.features-box3,
.features-box4 {
    bottom: 75px;
}


/* ==============================Workflow Section========================== */
/* ========== workflow swiper =========== */

.workflow-section {
    height: auto;
    width: auto;
    margin: 40px auto 100px auto;
}

.workflow-section .swiper-container {
    width: 100%;
    height: 500px;
}

.workflow-section .swiper-slide {
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.workflow-section .workflow-pagination {
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 10;
    bottom: -50px !important;
}

.workflow-section .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: black;
    transition: opacity 0.3s, background 0.3s;
    margin: 0 5px;
    border-radius: 50%;
}

.workflow-section .swiper-pagination-bullet-active {
    background: var(--orange);
}

/* override the bottom property of commen pagination */
.workflow-section h2 {
    display: flex;
    justify-content: center;
    font-size: 2.188em;
    font-weight: 300;
    color: var(--green);
    margin: 70px 0 20px 20px;
}

.workflow-section h3 {
    font-size: 1.875em;
    color: var(--green);
}

.workflow-section .section-description {
    text-align: center;
    font-size: 0.875em;
    color: gray;
    margin: 20px;
    max-width: 767px;
    z-index: 3;
}

.tacho-img {
    width: 653px !important;
    height: 251px !important;
    /* margin-bottom: 80px; */
}



/* ==============================End of Workflow Section========================== */


/* =========================== benefits of cooperation section  ========================= */

.benefits-row {
    width: 100%;
    /* VERIFY 2026-08-31: war height:85vh -> auf hohen Landscape-Fenstern
       (~1300px Fensterhoehe) ~1100px Section fuer 300px-Kreise = riesige
       Luecke. Jetzt inhaltsgetrieben mit moderatem, gedeckeltem Floor. */
    height: auto;
    min-height: min(78vh, 460px);
}
/* Portrait-Fix fuer .benefits-row siehe Ende des Media-Query-Blocks
   (VERIFY 2026-08-30) – dort werden alle vh-Hoehen im Hochformat aufgehoben. */

.benefit-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    height: 300px;
    background-color: var(--lightgreen_bg);
    border-radius: 50%;
    opacity: 0.8;
}

.benefit-circle h2 {
    text-align: center;
    color: var(--orange);
    text-transform: uppercase;
}

.benefit-circle h5 {
    text-transform: uppercase;
    font-size: 18px;
}


/* ==============================Contact Form========================== */

.contactUs-map-section {
    height: auto;
    width: 100%;
    margin: 70px auto 100px auto;
}

.contact-us-row,
.map-row {
    display: flex;
    justify-content: space-around;
}

.contact-details-text,
.map-details-text {
    width: 310px;
    color: gray;
    font-size: 1em;
}


.location-headline-text-wrapper {
    padding: 0px 40px;
}

.location-headline-text-wrapper {
    display: flex;
    flex-direction: column;
}

.contact-details-headline {
    padding-left: 0px;
}

.contact-details-text {
    text-align: left;
}

.form-wrapper {
    margin-top: 60px;
    max-width: 700px !important;
    width: 100%;
}

/* VERIFY 2026-09-02: Homepage-Kontaktsektion — "CONTACT DETAILS" + Intro-Text
   gestapelt über dem Formular (je eine Zeile). Formular füllt die
   .container-Breite (kein vw-Breakout mehr — brach auf großen Screens / /ar/
   das Layout). Nur #form-sec-wrapper (Front Page).
   HINWEIS: Der zusätzliche Map-Ausricht-Block (@media 993, flex:0 0 32/64%)
   wurde 2026-09-02 wieder ENTFERNT — er hat auf /ar/ und ~1000-1300px
   Layout-/Paint-Probleme ausgelöst. Die Map-Row nutzt jetzt wieder das
   Standard-Bootstrap-Grid (col-lg-4 / col-lg-8). */
#form-sec-wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}
#form-sec-wrapper .contact-details-text {
    width: 100%;          /* war 310px (alte Sidebar) */
    max-width: none;
    margin-bottom: 24px;
}
#form-sec-wrapper .form-wrapper {
    width: 100%;
    max-width: none !important;   /* beat .form-wrapper { max-width: 700px !important } */
    margin-top: 24px;
}

/* VERIFY 2026-09-02: Sicherheitsnetz für den Kontaktbereich. Diese drei
   Wrapper starten global mit opacity:0 + transform:translateY(28px) und werden
   erst von element-animation.js beim Reinscrollen auf .visible gesetzt. Fällt
   der Reveal aus (kein JS, schnelles Scrollen), blieben Formular + Karte
   unsichtbar. Hier fest sichtbar halten; die Einblend-Animation der anderen
   Sektionen bleibt unberührt.
   (Der eigentliche /ar/-Blank-Bug lag NICHT hier, sondern am Honeypot des
   Formulars — `left:-9999px` + RTL-Viewport, gefixt in vgcc-forms.css. Ohne
   diesen Fix hätte schon das `.visible` -> `transform:none` die Seite geleert.) */
#form-sec-wrapper .form-wrapper,
#form-sec-wrapper .location-wrapper,
#form-sec-wrapper .location-headline-text-wrapper {
    opacity: 1;
    transform: none;
}

/* VERIFY 2026-09-02: Map-Zeile (موقعنا-Text + Karte) bündig zu den linken/
   rechten Kanten der Form darüber. Nur ≥993px — darunter stapelt .map-row
   (flex-direction:column, eigener @media-Block weiter unten).
   KEIN vw-Breakout, KEIN flex-basis:0-Hack (beides hatte früher Layout-/
   Overflow-Ärger gemacht). Es reicht, die verschachtelte Verkleinerung
   abzuschalten: .map-row hat margin:0 (via `#form-sec-wrapper > .row`), also
   müssen nur noch die Spalten-Paddings + die inneren max-width/95%/40px-
   Einzüge weg, dann sitzen beide Spalten an der Container-Kante = Form-Kante. */
@media (min-width: 993px) {
    #form-sec-wrapper .map-row {
        justify-content: space-between;
        align-items: flex-start;
    }
    #form-sec-wrapper .location-headline-text-wrapper {
        padding: 0;          /* war 0 40px + Bootstrap col-padding 12px */
    }
    #form-sec-wrapper .location-wrapper {
        padding: 0;          /* Bootstrap col-padding — NICHT width anfassen,
                                sonst sprengt col-lg-8 (66.67%) die flex-Zeile */
        max-width: none;     /* war max-width: 800px */
    }
    #form-sec-wrapper .map-wrapper {
        width: 100%;         /* war 95% (von col-lg-8) */
    }
    #form-sec-wrapper .acf-map {
        width: 100%;         /* war 95% */
        margin: 0;           /* war 0 1rem -> schob die Karte aus der Spalte */
    }
}

/* VERIFY 2026-08-31: transform: rotate(-0.26deg) auf der Homepage-Form
   entfernt. War als "Schief-Korrektur" gedacht, hat die Form aber real um
   ~0.26° gekippt (Feld-Unterstriche sichtbar schraeg). Ohne transform ist
   die Form exakt gerade. */


.location-wrapper {
    margin: 66px 0px 0px 0px;
    padding: 0px;
    max-width: 800px;
}

.map-wrapper {
    width: 95%;
}

.map-overlay {
    /* VERIFY 2026-09-02: war font-size:15em (~276px Glyph) -> auf schmalen
       Mobile-Viewports breiter als die Karte -> horizontaler Overflow.
       Jetzt viewport-skaliert, nie breiter als die Box. (.acf-map hat zusätzlich
       overflow:hidden als Sicherheitsnetz.) */
    max-width: 100%;
    font-size: clamp(6rem, 26vw, 15em);
    z-index: 8;
    color: rgba(13, 110, 253, .25);
}

.acf-map {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    max-width: 100%;
    height: 400px;
    overflow: hidden;   /* clip the oversized pin icon + placeholder bg */
    box-shadow: 0px 0px 25px 10px rgba(89, 89, 89, 0.37);
    border-radius: 5px;
    margin: 0rem 1rem;
}

.RIFJN-maps-pin-view-border,
.RIFvHW-maps-pin-view-background {
    color: var(--orange) !important;
    fill: var(--orange) !important;
}

.gm-style-iw-chr {
    display: none !important;
}

/* ==============================End of Contact Form========================== */

/* Our story section from drafts  */

/* ==============================FAQs==========================  */

.faqs-container {
    border-radius: 10px;
    width: 100%;
    display: block;
    margin: auto;
}

.faqs-box {
    display: flex;
    flex-wrap: nowrap;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
}


.faqs-topic-list {
    padding: 0px;
    width: 20%;
    min-height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    max-height: 500px;
    overflow-x: unset;
}

.mobile-nav {
    display: none;
}

.desktop-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-pills {
    margin-left: unset;
    margin-right: unset;
}


.nav-pills .nav-link {
    color: gray;
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin: 0 !important;
    padding: 15px 20px;
    width: 100%;
    text-align: center;
    display: block;
    position: relative;
    line-height: 1.6;
}


.nav-pills .nav-link:hover {
    background-color: var(--lightgreen_bg);
    color: gray;
}

.nav-pills .nav-link.active {
    background-color: var(--lightgreen_bg);
    color: gray;
    border-left: 12px solid var(--green);
}

.nav-pills .nav-link:focus {
    outline: none;
}

.nav-pills .nav-link,
.nav-pills .nav-link.active {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-left 0.3s ease-in-out;
}

.faqs-accordion-content {
    padding: 20px;
    width: 80%;
    overflow-y: auto;
}

.accordion-button {
    background-color: transparent;
    color: gray;
    border: none;
    padding: 0.75rem 1.25rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-button:hover {
    background-color: var(--lightgreen_bg);
}

.accordion-button:focus {
    outline: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: var(--lightgreen_bg);
    color: gray;
}

.accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.acc-body-faqs {
    background-color: #fff;
    color: gray;
    padding: 20px;
}

/* ==============================Footer========================== */

#verifyFooter {
    z-index: 99999;
    display: block;
    position: relative;
    bottom: 0;
    /* min-height, not height: the AR language switcher under the copyright
       line was overflowing the fixed box and rendering outside the footer. */
    min-height: 630px;
    width: 100%;
    background-color: var(--lightgreen_bg);
}

#verifyFooter h3 {
    display: block;
    color: gray;
    text-align: left;
}

.logo-cols {
    display: flex;
    justify-content: center;
    position: relative;
    top: 40px;
}

.footer-logo {
    width: 250px;
    height: 76px;
}

.verify-info-customer-links-row {
    padding: 80px 0px 50px 0px;
}

.info-address-time {
    display: flex;
    flex-direction: column;
    width: 40%;
}

.quick-links {
    width: 60%;
}

.verify-info-customer-links-row ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.verify-info-customer-links-row ul li {
    list-style-type: none;
    font-size: 1.01em;
    color: gray;
    text-align: left;
}

.socials-icons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The footer socials and the legal-links row are stacked (column flex),
   never side by side — so their Bootstrap .col-6 (25% of the viewport at
   desktop, 50% on tablet) is just needlessly narrow and the one-line RTL
   legal row overflowed it / sat off-centre. Let both cells fill the column
   so their centred content lines up. */
.media-icons .col-6 {
    width: 100%;
}

.socials-icons {
    width: 45px;
    height: 45px;
    margin: 15px;
    filter: grayscale(1);
}

.socials-icons:hover {
    filter: none;
}

.footer-whatsapp-icon {
    font-size: 1.3em;
}

.copyright p {
    color: gray;
    font-weight: 500;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 0px;
}

/* breathing room below the last row (copyright + language switcher) so the
   switcher isn't jammed flush against the footer's bottom edge. */
.copyright {
    padding-bottom: 32px;
}

.doha-skyline-desktop {
    max-width: 100%;
    width: auto;
    height: 100px;
    display: block;
    transform: scale3d(2.5, 1.5, 1.5);
    margin-top: 7px;
}

.doha-skyline-tablet {
    display: none;
}

.footer-policy-links {
    min-width: 275px;
}

/* ==============================End of Footer========================== */


@media screen and (max-width: 1400px) {

    .mobile-header {
        display: none !important;
    }

    .contactUs-map-section {
        width: 100%;
    }

    .location-wrapper {
        max-width: 550px;
    }

}



@media screen and (max-width: 1200px) {

    /* header */
    .mobile-header {
        display: none !important;
    }

    .contactUs-map-section {
        width: 100%
    }

    /* ----- */
    #verifyFooter h3 {
        font-size: 1.5em;
    }

    .doha-skyline-tablet {
        display: none;
    }
}


@media screen and (max-width: 992px) {

    /* =======General Properties========= */
    .section-title {
        font-size: 1.25em;
    }

    /* ==================================HEADER=========================================== */

    .desktop-header {
        display: none !important;
    }

    /* Flex layout instead of the old absolute-positioning mix: logo and
       burger sit at the two edges with equal padding, and it mirrors
       automatically for RTL (space-between). */
    .mobile-header {
        height: 70px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background: #fff;
        padding: 0 18px;
    }

    .mobile-header > .row {
        display: contents;
    }

    .mobile-logo-container,
    .burger-container {
        width: auto !important;   /* override inline width:50% */
        flex: 0 0 auto;
        height: 100%;
        padding: 0;
        display: flex;
        align-items: center;
    }

    .logo-mobile {
        position: static;
        width: clamp(135px, 44vw, 165px);
        height: auto;
    }

    nav {
        position: relative;
        padding: 0;
        margin: 0;
        box-shadow: none !important;

    }

    .burger-container .navbar {
        padding: 0;
        min-height: 0;
        flex-direction: row;
    }

    .navbar-toggler-edited {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        border: none;
        cursor: pointer;
        background-color: transparent;
        width: 44px;
        height: 44px;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .navbar-toggler-edited:focus-visible {
        outline: none;

    }

    .navbar-toggler-edited .ham {
        font-size: 2.1em;
        color: var(--green);
        position: static;
    }

    .navbar-toggler-edited .close {
        font-size: 2.6em;
        color: var(--green);
        position: static;
    }

    /* menu button menu buttons transition */
    .fade-transition {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .fade-transition.visible {
        opacity: 1;
    }

    .offcanvas-end {
        width: 360px;
        top: 70px;
    }

    .offcanvas-body {
        padding: 0;
        background-color: white;
    }

    .offcanvas hr {
        margin: 16px;
    }

    .moblie-menu-headline {
        display: flex;
        justify-content: center;
        background-color: var(--lightgreen_bg);
        color: var(--green);
        text-transform: uppercase;
        width: 100%;
        height: 45px;
        padding: 10px 15px;
        font-size: 1.2rem;
    }

    .mobile-nav-accordion {
        padding: 4px 20px;
    }

    .mobile-menu-secondary-list,
    .mobile-nav-clients {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 0;
        color: gray;
        font-size: 1.1em;
    }

    .mobile-nav-clients-item {
        display: block;
        margin: 8px auto;
    }

    .mobile-nav-clients-item a {
        font-size: 1em;
        color: inherit;
    }

    .mobile-menu-icons {
        width: 50px;
        height: 50px;
        filter: grayscale(1);
    }

    .mobile-menu-icons:hover {
        filter: none;
    }

    .mobileMenu-secondaryList-item a {
        padding: 4px 0px;
        margin-left: 20px;
    }

    /* sits on its own below the last <hr>, at the foot of the drawer */
    .vgcc-langswitch-drawer-foot {
        padding: 12px 0 16px;
    }

    .vgcc-langswitch-li .vgcc-langswitch--mobile {
        font-size: 1.1rem;         /* match the secondary menu links above */
        gap: 0.5em;
        margin-left: 20px;         /* same inset as .mobileMenu-secondaryList-item a */
    }

    /* ======================== Services cards  ======================== */
    /* text before the services cards  */
    .section-description {
        margin: 20px;
        max-width: 650px;
    }

    /* ===================== What we do / about us ========================= */
    .features-section-mobile {
        display: block !important;
        padding: 30px 0px;
        position: relative;
        overflow: hidden;
    }

    .features-section-mobile-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 0;
        pointer-events: none;
    }

    .features-mobile {
        position: relative;
        z-index: 1;
    }

    .features-section-desktop {
        display: none !important;
    }

    .benefits-row {
        height: 100vh;
    }

    .line-horizontal-mobile {
        width: 100%;
        height: 100%;

    }

    .mobile-version-feature-text {
        width: 300px;
    }

    /* ==================== Contact us mobile version ======================= */
    .contactUs-map-section {
        height: auto;
        width: 97vw;
        margin: 0px auto;
    }

    .contact-us-row {
        /* for layout */
        display: unset;
        justify-content: unset;
    }


    .frm_fields_container {
        width: 100%;
        /* was min-width:724px — the Bootstrap .container is a fixed 720px
           between 768-991px, so 724px forced the grid wider than its box.
           Formidable's internal direction:ltr then overflowed it to the
           right → the whole form looked off-centre (most obvious on /ar/,
           where everything else is centred). Let the 12-col grid shrink. */
        min-width: 0;
        max-width: 100%;
        margin: 0 auto;
    }

    .frm_submit {
        display: grid;
        justify-content: center;
        align-self: center;
        margin-right: 15px;
    }

    /* .location , */
    .location-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px auto;
    }

    .map-row {
        display: flex;
        /* VERIFY 2026-09-02: DOM order swapped to [text][map] (text on the
           reading side: left EN / right AR). Mobile keeps text-above-map, so
           plain column now, not column-reverse. */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* #form-sec-wrapper is .container.p-0 and full-width below 1200px,
           so the Bootstrap .row negative side margins spilled ~12px past
           the viewport -> horizontal scrollbar + map looked off-centre. */
        margin-left: 0;
        margin-right: 0;
    }

    .acf-map {
        margin-left: auto;
        margin-right: auto;
    }

    .section-title,
    .contact-details-text,
    .map-details-text,
    .map-subheadline {
        text-align: center;
        width: 100%;
    }

    .map-subheadline {
        font-size: 1.125em;
    }

    /* ======================FAQs===================== */

    .faqs-box {
        display: block;
        width: 96%
    }

    .faqs-topic-list {
        width: 100%;
        max-height: none;
        margin-bottom: 20px;
        text-align: center;
        border: none;
        overflow-y: unset;
        word-break: keep-all;
        overflow-x: scroll;
    }

    .desktop-nav {
        display: none !important;
    }

    .mobile-nav {
        width: 940px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap;
        margin-bottom: 5px;
    }

    .mobile-nav .nav-link {
        flex: 1;
        max-width: 235px;
        text-align: center;
    }

    .nav-pills .nav-link.active {
        border: 4px solid var(--green) !important;
        border-top: none;
        border-radius: 10px;
    }

    .nav-pills .nav-link,
    .nav-pills .nav-link.active {
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out;
    }

    .faqs-accordion-content {
        width: 100%;
    }

    /* =========================================== */
    #verifyFooter {
        display: block;
        min-height: 786px;
    }

    .verify-info-customer-links-row {
        padding: 80px 25px 50px 25px;
    }

    .info-address-time {
        width: 58%;
        margin-bottom: 20px;
        border-right: 1px solid #ccc;
    }

    .quick-links {
        width: 42%;
    }

    .medical-pro-list {
        margin-bottom: 20px;
        text-align: right;
    }

    .corporation-partner-list {
        text-align: center;
    }

    .copyright p {
        font-size: 1em;
    }

    .doha-skyline-desktop {
        display: none;
    }


}

@media (min-width: 767px) and (max-width: 992px) {
    .doha-skyline-tablet {
        display: block;
        max-width: 100%;
        width: auto;
        height: 100px;
        transform: scale(2.5);
        margin: 80px 60px 0px 60px;
    }
}



@media screen and (max-width: 767px) {

    /* =============== general headline widget ============ */

    .headline-widget {
        margin: 20px auto;
    }

    .notfound .notfound-404 h1 {
        font-size: 148px;
    }

    /* header  */
    .offcanvas-end {
        width: 100% !important;
        height: 100% !important;
    }

    /* =========================workflow section ======================== */
    .workflow-section {
        height: auto;
        width: auto;
    }

    .workflow-section h3 {
        font-size: 2.188em;
        color: var(--green);
        margin: 20px 0 20px 20px;
    }

    .tacho-img {
        width: 482px !important;
        height: 186px !important;
    }

    /* ================ Benefits Circles============== */

    .benefits-row {
        width: 100%;
        /* VERIFY 2026-08-31: war 130vh -> inhaltsgetrieben, siehe Basis-Regel. */
        height: auto;
        min-height: min(78vh, 460px);
        margin: auto;
    }

    /* =========================================== */
    /* VERIFY 2026-09-02: was width:480px (Formidable fixed-width era). The
       vgcc-forms 12-col grid is fluid, so let it fill its column. */
    .frm_fields_container {
        width: 100% !important;
        min-width: unset;
        padding: 20px 0;
    }

    .frm_submit {
        display: grid;
        justify-content: center;
        align-self: center;
    }

    /* contanct us section map  */
    .acf-map {
        max-width: 100%;
    }

    /* =========================================== */
    #verifyFooter {
        display: block;
        min-height: 942px
    }

    #verifyFooter h3 {
        text-align: center;
        font-size: 1.75em;
    }

    .verify-info-customer-links-row ul li {
        text-align: center;
    }

    .verify-info-customer-links-row {
        padding: 70px 70px 40px 70px;
    }

    .info-address-time {
        width: 100%;
        margin-bottom: 20px;
        border-right: none;
    }

    .quick-links {
        width: 100%;
    }

    .medical-pro-list {
        margin-bottom: 20px;
    }

    .doha-skyline-tablet {
        display: none;
    }
}


@media screen and (max-width: 499px) {

    /* Reach-Out section: trim the big vertical gaps on the smallest
       screens only (>=500px keeps .form-wrapper margin-top:60px and the
       .map-row Bootstrap my-5 = 3rem). */
    .form-wrapper {
        margin-top: 16px;
    }
    .map-row.my-5 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* general properties  */
    .headline-widget h2 {
        font-size: 1.5em;
    }

    .notfound .notfound-404 {
        height: 148px;
        margin: 0px auto 10px;
    }

    .notfound .notfound-404 h1 {
        font-size: 86px;
    }

    .notfound .notfound-404 h2 {
        font-size: 16px;
    }


    .mobile-menu-icons {
        width: 35px;
        height: 35px;
    }

    .offcanvas hr {
        margin: 8px 16px;
    }

    .psv-img {
        width: 94%;
    }

    /* about us  */
    .features-section-mobile {
        padding: 5px;
    }

    /* workflow */
    .workflow-section h3 {
        font-size: 1.2em;
    }

    .tacho-img {
        width: 305px !important;
        height: 117px !important;
    }

    .benefits-row {
        height: 165vh;
    }

    /* contact us section -> infowindow of marker google map */
    /* VERIFY 2026-09-02: was width:95% (Formidable era); vgcc-forms grid is fluid. */
    .frm_fields_container {
        width: 100% !important;
        min-width: unset;
        padding: 20px 0;
    }

    .acf-map {
        width: 90vw;
        margin: 0px auto;
    }

    .gm-style-iw {
        max-width: 188px !important;
    }

    .faqs-box {
        display: block;
        width: 100%;
        margin: 13px;
    }

    .faqs-topic-list {
        overflow-x: scroll;
        white-space: nowrap;
    }

    .mobile-nav .nav-link {
        flex-shrink: 0;
        min-width: 120px;
    }

    .faqs-accordion-content {
        padding: 3px;
    }

    /* ==============================footer========================== */

    #verifyFooter {
        min-height: 950px;
    }

    #verifyFooter h3 {
        font-size: 1.5em;
    }

    .verify-info-customer-links-row {
        padding: 60px 15px 30px 15px;
    }

    .verify-info-customer-links-row ul li {
        font-size: 1em;
    }

    .location-wrapper {
        margin: 50px 0px 50px 0px;
    }

    .copyright p {
        font-size: 0.9em;
    }

}

/* very narrow phones: shrink the 5 footer social icons so the row
   stays inside the viewport (below ~360px it was clipped) */
@media screen and (max-width: 360px) {

    .socials-icons {
        width: 40px;
        height: 40px;
        margin: 6px;
    }
}

/* VERIFY 2026-08-30: .benefits-row hatte an 4 Breakpoints vh-Hoehen
   (85 / 100 / 130 / 165vh). Auf Portrait-Viewports – Tablets (iPad Air/Pro),
   gedrehte Monitore, schmal-hohe Fenster – blaeht das die Section auf
   1200-1500px+ fuer 300px-Kreise auf, mit riesigen Luecken (2+1-Layout).
   Im Hochformat daher komplett an den Inhalt koppeln + gleichmaessige Abstaende.
   Landscape (jeder normale Laptop/Desktop) trifft diese Regel NICHT -> voellig
   unveraendert. Bewusst ganz am Ende, damit es alle vh-Overrides ueberschreibt. */
@media (orientation: portrait) {
    .benefits-row {
        height: auto;
        align-items: center;
        justify-content: center; /* im 2+1-Tablet-Layout die einzelne Karte mittig */
        row-gap: clamp(1.5rem, 5vw, 3rem);
        padding-block: clamp(2rem, 7vw, 4rem);
    }
}

/* ==============================End of Media Queries========================== */


/* ======================================================================== */
/* VERIFY · NEUE HERO  (2026-08-28)                                          */
/* Ersetzt Slider-Hero + "About Us". Copy 1:1 aus den alten Sections.        */
/* Aufbau: Hero (mint) – Marken-Zeile, Headline, Typewriter, zwei            */
/* Zielgruppen-Buttons + Service-Pills links; EKG + Glas-Zähler + runde      */
/* GCC-Flaggen-Badges rechts. Danach direkt das Alt-Theme.                   */
/* Bewegung nur transform / opacity (Compositor).                            */
/* prefers-reduced-motion: alles statisch. Wiederverwendet: .headline-widget. */
/* ======================================================================== */

.vh-hero,
.vh-flags {
    box-sizing: border-box;
}

/* ---------- Hero ---------- */
.vh-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 7vw, 5rem) 0;
    background: var(--lightgreen_bg);
    color: #14342f;
}

/* Weicher Ausklang nach unten: der grüne Hero-Grund (inkl. Hex-Netz) löst sich
   zum Ende hin in Weiß auf, statt hart in die nächste Section zu schneiden.
   Reines Overlay -> unter dem Inhalt (z-index:1), über dem Hex-Netz (z-index:0). */
.vh-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(56px, 12vw, 96px);
    background: linear-gradient(to bottom,
        rgba(237, 247, 246, 0) 0%,
        rgba(255, 255, 255, 0.28) 45%,
        rgba(255, 255, 255, 0.78) 78%,
        #ffffff 100%);
    z-index: 0;
    pointer-events: none;
}

/* VERIFY 2026-08-30: 80vh nur im Querformat. Auf hohen Portrait-Tablets
   (z.B. iPad Pro 1024x1366) waeren 80vh ~1090px -> riesige Leerflaeche.
   Dort Hero = Inhaltshoehe. Laptop/Desktop sind immer landscape -> unveraendert. */
@media (min-width: 992px) and (orientation: landscape) {
    /* VERIFY 2026-08-31: 80vh gedeckelt. Auf hohen Landscape-Fenstern
       (~1240px+ Fensterhoehe) blaehte 80vh den Hero auf ~1000px auf ->
       grosse Leerflaeche ueber/unter dem Inhalt. */
    .vh-hero { min-height: min(80vh, 620px); }
    .vh-hero::after { height: clamp(120px, 16vh, 220px); }
}

/* ---------- Hero-Hintergrund: driftendes Hex-Netz ---------- */
/* Nicht full-bleed: an dieselbe zentrierte Breite wie der Content-Container
   (.container, max 1320px) + etwas Überhang koppeln. Sonst laufen die Hexagons
   auf breiten Monitoren weit vom zentrierten Inhalt weg. Unter ~1600px Viewport
   ist es weiterhin randlos (Laptop-Look unverändert). */
.vh-hexnet {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1600px;
    margin-inline: auto;
    z-index: 0;
    pointer-events: none;
}
.vh-hexnet svg {
    display: block;
    width: 100%;
    height: 100%;
}
.vh-hexnet__h {
    fill: none;
    stroke: var(--green);
    stroke-width: 1.6;
    opacity: 0.26;
}
.vh-hexnet__h.is-orange {
    stroke: var(--orange);
    opacity: 0.24;
}
.vh-hexnet__dot {
    fill: var(--green);
    opacity: 0.42;
}
@keyframes vh-hexnet-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(30px); }
}
@keyframes vh-hexnet-pulse {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.52; }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .vh-hexnet__drift  { animation: vh-hexnet-drift 14s ease-in-out infinite alternate; }
    .vh-hexnet__drift2 { animation: vh-hexnet-drift 20s ease-in-out infinite alternate-reverse; }
    .vh-hexnet .is-pulse {
        transform-origin: center;
        transform-box: fill-box;
        animation: vh-hexnet-pulse 4.5s ease-in-out infinite;
    }
    .vh-hexnet .is-pulse.d1 { animation-delay: 1.2s; }
    .vh-hexnet .is-pulse.d2 { animation-delay: 2.4s; }
}

.vh-hero__inner {
    position: relative;
    z-index: 1;
}
.vh-hero__text { min-width: 0; }
@media (min-width: 992px) {
    .vh-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
    }
}

/* ---------- Marken-Zeile (VERIFY HRCS · … ) – über der Headline, ohne BG ---------- */
.vh-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin: 0 0 clamp(1rem, 2.5vw, 1.6rem);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--green);
}
.vh-badge i {
    font-style: normal;
    color: var(--orange);
    margin: 0 0.15rem;
}
.vh-badge__mark {
    flex: 0 0 auto;
    width: 38px;
    height: 3px;
    background: var(--orange);
}
@media (max-width: 480px) {
    .vh-badge {
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        gap: 0.4rem 0.55rem;
    }
    .vh-badge__mark { width: 26px; }
}

.vh-hero__title {
    max-width: 22ch;
    margin: 0 0 0.4rem;
    font-size: clamp(1.9rem, 4.6vw, 3.3rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--green);
    text-wrap: balance;
}
.vh-hero__title .is-orange { color: var(--orange); }

.vh-hero__tagline {
    display: block;
    max-width: 50ch;
    min-height: 2.8em;
    margin: 0.1rem 0 1.4rem;
    font-size: clamp(1.02rem, 2.3vw, 1.3rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--green);
}
.vh-hero__tagline .tw-caret {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    margin-left: 3px;
    vertical-align: -0.2em;
    background: var(--orange);
    animation: vh-caret-blink 1s step-end infinite;
}
@keyframes vh-caret-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ---------- Aufpopp-Einstieg beim Laden (Vorbild: "HERO 2030 V3") ---------- */
/* Text steigt ruhig auf (vh-in-rise), Buttons / Glas-Zähler / Flaggen poppen
   federnd herein (vh-in-pop). Gestaffelt über ~1.2 s. Die Frames lassen das
   transform am Ende bewusst weg: mit fill-mode both sitzt jedes Element danach
   wieder auf transform:none (kein Dauer-Compositor-Layer, kein hängender
   Stacking-Context fürs Pills-Panel / EKG). Bei prefers-reduced-motion greift
   keine dieser Regeln -> alles sofort sichtbar.
   Ausnahme .vh-hero__title: das ist das LCP-Element und wird NICHT ausgeblendet
   (opacity bleibt 1) – es schiebt sich nur per transform herein, damit der
   Largest Contentful Paint nicht durch den Einstieg verzögert wird. */
@keyframes vh-in-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; }
}
@keyframes vh-in-pop {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; }
}
@keyframes vh-in-shift {
    from { transform: translateY(24px); }
}
@media (prefers-reduced-motion: no-preference) {
    .vh-hero__title {
        animation: vh-in-shift 1s cubic-bezier(.16, 1, .3, 1) 0.3s both;
    }
    .vh-badge,
    .vh-hero__tagline,
    .vh-audience,
    .vh-glass,
    .vh-flags {
        opacity: 0;
        animation: vh-in-rise 1s cubic-bezier(.16, 1, .3, 1) both;
    }
    .vh-audience,
    .vh-glass,
    .vh-flags {
        animation-name: vh-in-pop;
        animation-duration: 1.15s;
        animation-timing-function: cubic-bezier(.34, 1.4, .4, 1);
    }
    .vh-badge         { animation-delay: 0.1s; }
    .vh-hero__tagline { animation-delay: 0.52s; }
    .vh-glass         { animation-delay: 0.76s; }
    .vh-flags         { animation-delay: 1s; }
    .vh-audience      { animation-delay: 1.24s; }
}

/* ---------- Zielgruppen-Buttons + Service-Pills ---------- */
.vh-audience {
    margin-top: 1.4rem;
}
.vh-audience__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
/* Kurz-Label nur unter 499px (siehe @media weiter unten) */
.vh-audience__btn-short { display: none; }
/* Button-Stil aus "HERO 2030": Orange-CTA mit Glanz-Sweep + Ghost-Outline. */
.vh-btn {
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    border: 0;
    border-radius: 14px;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(.16, 1, .3, 1), box-shadow 0.25s ease, background 0.25s ease;
}
.vh-btn:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}
.vh-btn--orange,
.vh-btn--orange:hover,
.vh-btn--orange:focus,
.vh-btn--orange:active,
.vh-btn--orange:visited {
    color: #fff;
}
.vh-btn--orange {
    background: var(--orange);
    box-shadow: 0 12px 26px -12px rgba(255, 105, 0, 0.55);
}
.vh-btn--orange::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 46%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(0);
}
.vh-btn--orange:hover,
.vh-btn--orange[aria-expanded="true"] {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 34px -12px rgba(255, 105, 0, 0.6);
}
.vh-btn--green,
.vh-btn--green:hover,
.vh-btn--green:focus,
.vh-btn--green:active,
.vh-btn--green:visited {
    color: #fff;
}
.vh-btn--green {
    background: var(--green);
    box-shadow: 0 12px 26px -12px rgba(32, 146, 138, 0.55);
}
.vh-btn--green::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 46%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(0);
}
.vh-btn--green:hover,
.vh-btn--green[aria-expanded="true"] {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 34px -12px rgba(32, 146, 138, 0.6);
}
@keyframes vh-btn-sweep {
    0%, 55%   { transform: translateX(0); }
    75%, 100% { transform: translateX(400%); }
}
@media (prefers-reduced-motion: no-preference) {
    .vh-btn--orange::after { animation: vh-btn-sweep 3.6s ease-in-out 1.6s infinite; }
    .vh-btn--green::after  { animation: vh-btn-sweep 3.6s ease-in-out 3.4s infinite; }
}

/* Formidable-Submit-Button auf den Hero-CTA-Stil (.vh-btn--green) bringen.
   Nur Style – Label/Markup liefert das Formular. ID-Scope, damit Formulare
   auf anderen Seiten unberührt bleiben.
   #form-sec-wrapper  = "Reach Out to Us" (Front Page)
   #redirected-contact = Kontaktformular auf der Contact-us-Seite
   #contact-mega-panel = Kontaktformular im Header (Mega-Panel) */
#form-sec-wrapper .frm_button_submit,
#redirected-contact .frm_button_submit,
#contact-mega-panel .frm_button_submit {
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    padding: 16px 30px;
    border: 0 !important;
    border-radius: 14px;
    cursor: pointer;
    color: #fff !important;
    background: var(--green) !important;
    box-shadow: 0 12px 26px -12px rgba(32, 146, 138, 0.55);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(.16, 1, .3, 1), box-shadow 0.25s ease, background 0.25s ease;
}
#form-sec-wrapper .frm_button_submit::after,
#redirected-contact .frm_button_submit::after,
#contact-mega-panel .frm_button_submit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 46%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(0);
}
#form-sec-wrapper .frm_button_submit:hover,
#form-sec-wrapper .frm_button_submit:focus,
#redirected-contact .frm_button_submit:hover,
#redirected-contact .frm_button_submit:focus,
#contact-mega-panel .frm_button_submit:hover,
#contact-mega-panel .frm_button_submit:focus {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 34px -12px rgba(32, 146, 138, 0.6);
}
#form-sec-wrapper .frm_button_submit:focus-visible,
#redirected-contact .frm_button_submit:focus-visible,
#contact-mega-panel .frm_button_submit:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
    #form-sec-wrapper .frm_button_submit::after,
    #redirected-contact .frm_button_submit::after,
    #contact-mega-panel .frm_button_submit::after {
        animation: vh-btn-sweep 3.6s ease-in-out 3.4s infinite;
    }
}

/* Lift + Schatten: nur bei :hover oder solange das Panel offen ist
   (aria-expanded="true"). Zu = normal, auch wenn der Button noch DOM-Fokus hat.
   Klick außerhalb / Escape schließt das Panel (JS). */
.vh-audience__panel {
    margin-top: 1rem;
}
.vh-audience__panel[hidden] { display: none; }
.vh-audience__panel.is-open {
    animation: vh-pop 220ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes vh-pop {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Mobiles Pills-Panel: Einflug mit leichtem Overshoot, Ausflug nach oben,
   Pills gestaffelt. Wird nur unter 499px verdrahtet (siehe @media unten). */
@keyframes vh-panel-in {
    0%   { opacity: 0; transform: translateY(-12px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vh-panel-out {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.96); }
}
@keyframes vh-pill-in {
    0%   { opacity: 0; transform: translateY(9px) scale(0.88); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.vh-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vh-pill {
    display: inline-block;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(32, 146, 138, 0.35);
    color: var(--green);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vh-pill:hover,
.vh-pill:focus-visible {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
/* Pills unter „I run a facility" (oranger Button) -> oranger Akzent */
.vh-audience__panel[data-panel="fac"] .vh-pill {
    border-color: rgba(255, 105, 0, 0.35);
    color: var(--orange);
}
.vh-audience__panel[data-panel="fac"] .vh-pill:hover,
.vh-audience__panel[data-panel="fac"] .vh-pill:focus-visible {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
@media (prefers-reduced-motion: reduce) {
    .vh-audience__panel.is-open,
    .vh-audience__panel.is-closing,
    .vh-audience__panel.is-open .vh-pill { animation: none; }
}

/* Unter 499px: das geöffnete Pills-Panel als auffällige, farbige „Karte" mit
   Farb-Glow (grün fürs Pro-Panel, orange fürs Facility-Panel) + Einflug/Ausflug
   und gestaffelt einfliegenden Pills. Über 499px unverändert. */
@media (max-width: 498px) {
    .vh-audience__panel {
        margin-top: 0.9rem;
        padding: 0.9rem 0.9rem 1rem;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(32, 146, 138, 0.14), rgba(32, 146, 138, 0.04));
        box-shadow:
            0 16px 36px -12px rgba(32, 146, 138, 0.55),
            0 0 0 1px rgba(32, 146, 138, 0.22) inset;
    }
    .vh-audience__panel[data-panel="fac"] {
        background: linear-gradient(180deg, rgba(255, 105, 0, 0.14), rgba(255, 105, 0, 0.04));
        box-shadow:
            0 16px 36px -12px rgba(255, 105, 0, 0.55),
            0 0 0 1px rgba(255, 105, 0, 0.22) inset;
    }

    .vh-audience__panel.is-open {
        animation: vh-panel-in 420ms cubic-bezier(.2, .7, .2, 1.2) both;
    }
    .vh-audience__panel.is-closing {
        animation: vh-panel-out 200ms ease both;
    }

    /* Pills etwas kräftiger, damit sie auf dem Farb-Panel „stehen" */
    .vh-audience__panel .vh-pill {
        box-shadow: 0 4px 12px -4px rgba(20, 52, 47, 0.28);
    }

    /* gestaffelter Einflug der Pills */
    .vh-audience__panel.is-open .vh-pill {
        animation: vh-pill-in 300ms cubic-bezier(.2, .7, .2, 1) both;
    }
    .vh-audience__panel.is-open li:nth-child(1) .vh-pill { animation-delay: 70ms; }
    .vh-audience__panel.is-open li:nth-child(2) .vh-pill { animation-delay: 115ms; }
    .vh-audience__panel.is-open li:nth-child(3) .vh-pill { animation-delay: 160ms; }
    .vh-audience__panel.is-open li:nth-child(4) .vh-pill { animation-delay: 205ms; }
    .vh-audience__panel.is-open li:nth-child(5) .vh-pill { animation-delay: 250ms; }
    .vh-audience__panel.is-open li:nth-child(6) .vh-pill { animation-delay: 295ms; }
}

/* ---------- Hero-Visual: laufende EKG + Glas-Zähler + Flaggen darunter ---------- */
/* Bleibt im hellen Mint-Look der Hero – keine dunkle Box, kein harter Rahmen. */
.vh-hero__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.4rem, 3.5vw, 2.2rem);
    min-height: 260px;
}
@media (max-width: 991px) {
    .vh-hero__visual {
        margin-top: clamp(1.8rem, 6vw, 3rem);
        min-height: 220px;
    }
}

.vh-ecg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(110px, 20vw, 150px);
    z-index: -1;                    /* hinter Text + Rahmen des Panels */
    transform: translateY(60%);    /* Wellen-Mittellinie an die Panel-Unterkante */
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.vh-ecg__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.vh-ecg__line {
    stroke: rgba(255, 105, 0, 0.45);
}

.vh-glass {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: clamp(1.4rem, 3.5vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 50px -24px rgba(15, 46, 42, 0.16);
}
.vh-glass__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(20, 52, 47, 0.55);
}
.vh-glass__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.vh-glass__list li {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: clamp(0.7rem, 2vw, 1rem) clamp(0.8rem, 2.5vw, 1.2rem);
}
.vh-glass__list li:nth-child(odd)  { padding-left: 0; }
.vh-glass__list li:nth-child(even) { padding-right: 0; border-left: 1px solid rgba(20, 52, 47, 0.16); }
.vh-glass__list li:nth-child(-n+2) { padding-top: 0; }
.vh-glass__list li:nth-child(n+3)  { border-top: 1px solid rgba(20, 52, 47, 0.16); }
.vh-glass__num {
    font-size: clamp(1.55rem, 3.4vw, 2.05rem);
    font-weight: 700;
    line-height: 1;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}
.vh-glass__label {
    font-size: 0.74rem;
    line-height: 1.25;
    letter-spacing: 0.03em;
    color: #5a6f6b;
}

@media (prefers-reduced-motion: no-preference) {
    .vh-ecg__track {
        animation: vh-ecg-scroll 4.5s linear infinite;
        will-change: transform;
    }
    @keyframes vh-ecg-scroll {
        from { transform: translateX(0); }
        to   { transform: translateX(-800px); }
    }
}

/* ---------- GCC-Flaggen-Badges (statisch, unter der Glas-Box) ---------- */
.vh-flags {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
}
.vh-flags__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(20, 52, 47, 0.5);
}
.vh-flags__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1rem);
}
.vh-flags__badge {
    display: block;
    width: clamp(40px, 6.5vw, 52px);
    height: clamp(40px, 6.5vw, 52px);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 46, 42, 0.16);
}
.vh-flags__badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- responsive ---------- */
/* Unter dem 2-Spalten-Layout (992px) stapelt der Hero. Das Visual zentriert
   sich schon selbst – hier den oberen Textblock ebenfalls mittig setzen. */
@media (max-width: 991px) {
    .vh-hero__text { text-align: center; }
    .vh-badge,
    .vh-audience__row,
    .vh-pills {
        justify-content: center;
    }
    /* Blöcke mit max-width bleiben sonst linksbündig -> hier mittig ziehen */
    .vh-hero__title,
    .vh-hero__tagline {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    .vh-hero { min-height: 0; }
}

/* Unter 499px: Hero als ein Stapel mit gleichmäßigem Abstand (gap).
   Reihenfolge: Badge/Titel/Tagline · Zähler-Box (+ EKG) · Flaggen · Buttons (zuletzt).
   display:contents löst die beiden Wrapper auf, damit alle sechs Gruppen
   direkte Flex-Items von .vh-hero__inner werden und per order sortierbar sind. */
@media (max-width: 498px) {
    .vh-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }
    .vh-hero__text,
    .vh-hero__visual { display: contents; }

    /* eigene vertikale Margins raus -> nur gap bestimmt den Abstand */
    .vh-badge,
    .vh-hero__title,
    .vh-hero__tagline,
    .vh-glass,
    .vh-flags,
    .vh-audience {
        margin-top: 0;
        margin-bottom: 0;
    }

    .vh-badge         { order: 1; }
    .vh-hero__title   { order: 2; }
    /* nur 1 Zeile reservieren (statt ~2), sonst wirkt der Abstand danach größer */
    .vh-hero__tagline { order: 3; min-height: 1.4em; }
    .vh-glass         { order: 4; }
    .vh-flags         { order: 5; }
    .vh-audience      { order: 6; align-self: stretch; }

    /* EKG kompakt an der Box-Unterkante halten, damit sie den gap
       zu den Flaggen nicht optisch auffüllt */
    .vh-ecg { height: 80px; transform: translateY(50%); }

    /* Kurz-Labels statt der langen Sätze */
    .vh-audience__btn-full  { display: none; }
    .vh-audience__btn-short { display: inline; }

    /* Beide CTA-Buttons nebeneinander in einer Zeile, gleich breit */
    .vh-audience__row { flex-wrap: nowrap; gap: 0.6rem; }
    .vh-audience__btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 13px 10px;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vh-hero__tagline .tw-caret { animation: none; opacity: 0; }

    /* Aufpopp-Reveals abschalten – Inhalte einfach sichtbar lassen */
    .animation-immediate,
    .animation-effect,
    .workflow-section,
    .faqs-container,
    .form-wrapper,
    .location-headline-text-wrapper,
    .from-headline-text-wrapper,
    .location-wrapper {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* =====================================================================
   Arabic language switcher — Phase 0 skeleton.
   Real visual treatment lands with the Phase 1 RTL pass.
   TODO before this ships to live: add .vgcc-langswitch* to the
   WP Rocket "Remove Unused CSS" safelist.
   ===================================================================== */
.vgcc-langswitch {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.85rem;
    line-height: 1;
}

/* explicit grey — NOT `inherit`: the desktop switch sits inside a
   .desk-nav-item whose :hover sets color:var(--green) on the whole cell,
   which made BOTH languages turn green at once. Pinning a colour here
   means only the individually hovered/focused item goes green. */
.vgcc-langswitch__item {
    color: gray;
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.15s ease, color 0.15s ease;
}

/* hover + focus (incl. the focus left after a click) turn the link brand
   green and it STAYS green while focused; every other state keeps grey. */
.vgcc-langswitch__item:hover,
.vgcc-langswitch__item:focus,
.vgcc-langswitch__item:focus-visible {
    opacity: 1;
    color: var(--green);
}

/* the language you're currently on = the active/"focused" one -> green.
   Only the OTHER, un-hovered language stays grey. */
.vgcc-langswitch__item.is-current {
    color: var(--green);
    opacity: 1;
    font-weight: 700;
}

.vgcc-langswitch__sep {
    color: gray;
    opacity: 0.4;
}

.vgcc-langswitch--footer {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1rem;
    font-size: 1rem;                   /* was 0.85rem — too small next to the © line */
    color: gray;
}