/* =========================================================
   VOLINE SYSTEMS – GLOBAL DESIGN
   ========================================================= */


/* ---------------------------------------------------------
   1. Globale Farben und Abstände
   --------------------------------------------------------- */

:root {
    /* Hintergründe */
    --voline-bg-page: #F5F5F5;
    --voline-bg-section: #E8E8E8;
    --voline-bg-products: #EFEFEF;
    --voline-bg-card: #F3F3F3;

    /* Linien */
    --voline-border: #D8D8D8;
    --voline-card-border: #C8C8C8;

    /* Akzentfarben */
    --voline-blue: #0000FF;
    --voline-blue-hover: #0000CC;
    --voline-green: #60D000;
    --voline-magenta: #B40097;

    /* Textfarben */
    --voline-nav-text: #41464B;

    /* Standardabstände */
    --voline-space-xs: 12px;
    --voline-space-p: 16px;
    --voline-space-sm: 18px;
    --voline-space-md: 30px;
    --voline-space-lg: 54px;

    /* Abstand Card zum äußeren Bereich */
    --voline-card-inset: 24px;

    /* Abstand zwischen Cards */
    --voline-card-gap: 18px;
}


/* ---------------------------------------------------------
   2. Grundfläche der Website
   --------------------------------------------------------- */

body,
#sp-main-body {
    background-color: var(--voline-bg-page);
}


/* ---------------------------------------------------------
   3. Header
   --------------------------------------------------------- */

#sp-header {
    background-color: var(--voline-bg-page);
    border-bottom: 1px solid var(--voline-border);
    box-shadow: none;
}

/* Kopfzeile oben: E-Mail etwas größer */
#sp-top-bar,
#sp-top-bar a,
#sp-top-bar .sp-contact-info,
#sp-top-bar .sp-contact-info a,
#sp-top1,
#sp-top1 a,
#sp-top2,
#sp-top2 a {
    font-size: 14px !important;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   4. Hauptnavigation
   --------------------------------------------------------- */

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    color: var(--voline-nav-text);
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active > span,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > span,
.sp-megamenu-parent > li > a:focus {
    color: var(--voline-blue) !important;
}

/* About-Us-Menüpunkt: Magenta-Rahmen passend zum Voline-Logo */
.sp-megamenu-parent > li > a[href*="/about"],
.sp-megamenu-parent > li > a[href*="about-us"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 3px solid var(--voline-magenta) !important;
    border-radius: 0 !important;

    padding: 6px 12px !important;

    color: var(--voline-nav-text) !important;
    line-height: 1.2 !important;

    box-sizing: border-box;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

/* Hover / Fokus blau */
.sp-megamenu-parent > li > a[href*="/about"]:hover,
.sp-megamenu-parent > li > a[href*="/about"]:focus,
.sp-megamenu-parent > li > a[href*="about-us"]:hover,
.sp-megamenu-parent > li > a[href*="about-us"]:focus {
    color: var(--voline-blue) !important;
    border-color: var(--voline-magenta) !important;
}

/* Auf der aktiven About-Seite ebenfalls blau */
.sp-megamenu-parent > li.active > a[href*="/about"],
.sp-megamenu-parent > li.active > a[href*="about-us"] {
    color: var(--voline-blue) !important;
    border-color: var(--voline-magenta) !important;
}


/* ---------------------------------------------------------
   5. Off-Canvas-Menü
   --------------------------------------------------------- */

.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
    color: var(--voline-nav-text);
}

.offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu > li.active > span,
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li > a:focus {
    color: var(--voline-blue) !important;
}


/* ---------------------------------------------------------
   6. Normale Links im Seiteninhalt
   Buttons werden ausdrücklich ausgenommen.
   --------------------------------------------------------- */

#sp-main-body a:not(.btn):not(.sppb-btn),
#sp-main-body a:not(.btn):not(.sppb-btn):link,
#sp-main-body a:not(.btn):not(.sppb-btn):visited,
#sp-main-body .sppb-addon-text-block a:not(.btn):not(.sppb-btn),
#sp-main-body .sppb-addon-content a:not(.btn):not(.sppb-btn) {
    color: var(--voline-blue) !important;
    text-decoration: none;
}


/* Falls SP Page Builder Linktext in ein span setzt */

#sp-main-body a:not(.btn):not(.sppb-btn) span,
#sp-main-body .sppb-addon-text-block a:not(.btn):not(.sppb-btn) span,
#sp-main-body .sppb-addon-content a:not(.btn):not(.sppb-btn) span {
    color: inherit !important;
}


/* Hover und Tastatur-Fokus */

#sp-main-body a:not(.btn):not(.sppb-btn):hover,
#sp-main-body a:not(.btn):not(.sppb-btn):focus,
#sp-main-body .sppb-addon-text-block a:not(.btn):not(.sppb-btn):hover,
#sp-main-body .sppb-addon-text-block a:not(.btn):not(.sppb-btn):focus,
#sp-main-body .sppb-addon-content a:not(.btn):not(.sppb-btn):hover,
#sp-main-body .sppb-addon-content a:not(.btn):not(.sppb-btn):focus {
    color: var(--voline-blue-hover) !important;
    text-decoration: none;
}


/* ---------------------------------------------------------
   7. Buttons
   Buttontexte und Icons bleiben weiß.
   --------------------------------------------------------- */

#sp-main-body .sppb-btn,
#sp-main-body .sppb-btn:link,
#sp-main-body .sppb-btn:visited,
#sp-main-body .sppb-btn span,
#sp-main-body .sppb-btn i,
#sp-main-body .btn,
#sp-main-body .btn span,
#sp-main-body .btn i {
    color: #FFFFFF !important;
}

#sp-main-body .sppb-btn:hover,
#sp-main-body .sppb-btn:focus,
#sp-main-body .sppb-btn:hover span,
#sp-main-body .sppb-btn:focus span,
#sp-main-body .sppb-btn:hover i,
#sp-main-body .sppb-btn:focus i,
#sp-main-body .btn:hover,
#sp-main-body .btn:focus,
#sp-main-body .btn:hover span,
#sp-main-body .btn:focus span,
#sp-main-body .btn:hover i,
#sp-main-body .btn:focus i {
    color: #FFFFFF !important;
}


/* ---------------------------------------------------------
   8. Typografische Abstände
   Schriftart, Größen und Textfarben über Helix Typography
   --------------------------------------------------------- */

#sp-main-body h1,
#sp-main-body h2,
#sp-main-body h3,
#sp-main-body p {
    margin-top: 0;
}

#sp-main-body h1 {
    margin-bottom: var(--voline-space-sm);
}

#sp-main-body h2 {
    margin-bottom: var(--voline-space-xs);
}

#sp-main-body h3 {
    margin-bottom: var(--voline-space-sm);
}

#sp-main-body p {
    margin-bottom: 0;
}

#sp-main-body p + p {
    margin-top: var(--voline-space-p);
}


/* ---------------------------------------------------------
   9. Standard-Sections
   --------------------------------------------------------- */

.voline-section {
    background-color: var(--voline-bg-page);
    padding: 50px 40px !important;
}

.voline-section-alt {
    background-color: var(--voline-bg-section) !important;
}

.voline-section-soft {
    background-color: var(--voline-bg-card) !important;
}


/* ---------------------------------------------------------
   10. Einleitungs-Section
   --------------------------------------------------------- */

.voline-section.voline-intro {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

.voline-intro h1 {
    margin-bottom: 10px;
}

.voline-intro .voline-accent-green {
    margin-bottom: 20px;
}


/* ---------------------------------------------------------
   11. Produktbereich
   --------------------------------------------------------- */

.voline-section.voline-products-section {
    background-color: var(--voline-bg-products) !important;

    padding-top: 30px !important;
    padding-bottom: 18px !important;

    border-top: 1px solid var(--voline-border);
}

.voline-products-section .sppb-row-container,
.voline-products-section .sppb-row,
.voline-products-section .sppb-column,
.voline-products-section .sppb-column-addons {
    background-color: transparent !important;
}

.voline-products-heading {
    margin-bottom: 0 !important;
}

.voline-products-heading h2 {
    margin-bottom: 8px !important;
}

.voline-products-heading .voline-accent-green {
    width: 40px;
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   12. How Cold Spray Monitoring Works
   --------------------------------------------------------- */

.voline-monitoring-section {
    background-color: var(--voline-bg-products) !important;
}


/* Überschriftsbereich kompakt halten */

.voline-section.voline-monitoring-section {
    padding-top: 22px !important;
    padding-bottom: 12px !important;

    border-top: 1px solid var(--voline-border);
}


/* Unterelemente transparent */

.voline-monitoring-section .sppb-row-container,
.voline-monitoring-section .sppb-row,
.voline-monitoring-section .sppb-column,
.voline-monitoring-section .sppb-column-addons {
    background-color: transparent !important;
}


/* Überschrift */

.voline-monitoring-heading {
    margin-bottom: 12px !important;
}

.voline-monitoring-heading h2 {
    margin-bottom: 8px !important;
}

.voline-monitoring-heading .voline-accent-green {
    width: 40px;
    margin-bottom: 0;
}


/*
   Falls Überschrift und Karten in zwei getrennten
   SP-Page-Builder-Sections liegen:
   Abstand zwischen beiden bewusst klein halten.
*/

.voline-monitoring-section + .voline-monitoring-section {
    padding-top: 8px !important;
}


/* Kartenbereich unter "How Cold Spray Monitoring Works" */

.voline-monitoring-cards {
    padding-bottom: 30px !important;
}


/* ---------------------------------------------------------
   Monitoring Information Cards – aufklappbar
   --------------------------------------------------------- */

.voline-info-card {
    width: 100%;
    height: auto;

    background-color: var(--voline-bg-card) !important;

    border: 1px solid var(--voline-card-border);
    border-radius: 5px;

    box-sizing: border-box;

    overflow: hidden;
    margin: 0;
}


/* Klickbarer Kopf */

.voline-info-card summary {
    position: relative;

    display: block;

    padding: 18px 50px 18px 20px;

    cursor: pointer;
    list-style: none;

    color: var(--voline-nav-text);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* Browser-Marker ausblenden */

.voline-info-card summary::-webkit-details-marker {
    display: none;
}

.voline-info-card summary::marker {
    content: "";
}


/* Titel */

.voline-info-title {
    display: block;

    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;

    color: inherit;
}


/* Systembezeichnung unter dem Titel */

.voline-info-system {
    display: block;

    margin-top: 6px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;

    color: var(--voline-nav-text);
}


/* Plus rechts */

.voline-info-card summary::after {
    content: "+";

    position: absolute;

    right: 20px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 25px;
    font-weight: 300;

    color: var(--voline-blue);
}


/* Geöffnet: Minus */

.voline-info-card[open] summary::after {
    content: "−";
}


/* Hover / Fokus */

.voline-info-card summary:hover,
.voline-info-card summary:focus {
    color: var(--voline-blue);

    background-color: #EEEEEE;

    outline: none;
}


/* Geöffneter Inhalt */

.voline-info-body {
    padding: 0 20px 20px 20px;

    border-top: 1px solid var(--voline-border);
}

.voline-info-body p {
    margin-top: var(--voline-space-p) !important;
}

.voline-info-body p + p {
    margin-top: var(--voline-space-p) !important;
}


/* ---------------------------------------------------------
   13. Complete Process Consistency Monitoring
   --------------------------------------------------------- */

.voline-section.voline-complete-section {
    background-color: var(--voline-bg-section) !important;

    padding-top: 34px !important;
    padding-bottom: 34px !important;

    border-top: 1px solid var(--voline-border);
    border-bottom: 1px solid var(--voline-border);
}

.voline-complete-section .sppb-row-container,
.voline-complete-section .sppb-row,
.voline-complete-section .sppb-column,
.voline-complete-section .sppb-column-addons {
    background-color: transparent !important;
}

.voline-complete-content {
    max-width: 980px;
}

.voline-complete-content h2 {
    margin-bottom: 8px !important;
}

.voline-complete-content .voline-accent-green {
    width: 40px;
    margin-bottom: 20px;
}

.voline-complete-content p + p {
    margin-top: var(--voline-space-p);
}

.voline-complete-link {
    margin-top: var(--voline-space-sm) !important;
}


/* ---------------------------------------------------------
   14. Technical Background
   --------------------------------------------------------- */

.voline-section.voline-technical-section {
    background-color: var(--voline-bg-products) !important;

    padding-top: 30px !important;
    padding-bottom: 30px !important;

    border-top: 1px solid var(--voline-border);
}

.voline-technical-section .sppb-row-container,
.voline-technical-section .sppb-row,
.voline-technical-section .sppb-column,
.voline-technical-section .sppb-column-addons {
    background-color: transparent !important;
}

.voline-technical-content h2 {
    margin-bottom: 8px !important;
}

.voline-technical-content > .voline-accent-green {
    width: 40px;
    margin-bottom: var(--voline-space-sm);
}

.voline-technical-intro {
    max-width: 900px;
    margin-bottom: var(--voline-space-md) !important;
}


/* ---------------------------------------------------------
   15. Technical Background – Accordion
   --------------------------------------------------------- */

.voline-tech-item {
    background-color: var(--voline-bg-card);

    border: 1px solid var(--voline-card-border);
    border-radius: 5px;

    margin-bottom: 12px;

    overflow: hidden;
}

.voline-tech-item summary {
    position: relative;

    padding: 18px 52px 18px 20px;

    cursor: pointer;

    font-size: 20px;
    font-weight: 400;

    color: var(--voline-nav-text);

    list-style: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* Browser-Marker ausblenden */

.voline-tech-item summary::-webkit-details-marker {
    display: none;
}

.voline-tech-item summary::marker {
    content: "";
}


/* Plus */

.voline-tech-item summary::after {
    content: "+";

    position: absolute;

    right: 20px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 25px;
    font-weight: 300;

    color: var(--voline-blue);
}


/* Geöffnet: Minus */

.voline-tech-item[open] summary::after {
    content: "−";
}


/* Hover / Fokus */

.voline-tech-item summary:hover,
.voline-tech-item summary:focus {
    color: var(--voline-blue);
    background-color: #EEEEEE;
    outline: none;
}


/* Inhalt */

.voline-tech-body {
    padding: 0 20px 20px 20px;

    border-top: 1px solid var(--voline-border);
}

.voline-tech-body p {
    margin-top: var(--voline-space-p) !important;
}

.voline-tech-body p + p {
    margin-top: var(--voline-space-p) !important;
}


/* ---------------------------------------------------------
   16. Conference Contributions

   Dunkler Section-Hintergrund.
   Die Video-Cards bleiben bewusst heller.
   --------------------------------------------------------- */

.voline-section.voline-conference-section {
    background-color: var(--voline-bg-section) !important;

    padding-top: 30px !important;
    padding-bottom: 30px !important;

    border-top: 1px solid var(--voline-border);
}


/* Unterelemente übernehmen den Section-Hintergrund */

.voline-conference-section .sppb-row-container,
.voline-conference-section .sppb-row,
.voline-conference-section .sppb-column,
.voline-conference-section .sppb-column-addons {
    background-color: transparent !important;
}


/* Überschrift + Einleitung */

.voline-conference-heading {
    margin-bottom: var(--voline-space-sm) !important;
}

.voline-conference-heading h2 {
    margin-bottom: 8px !important;
}

.voline-conference-heading .voline-accent-green {
    width: 40px;
    margin-bottom: var(--voline-space-sm);
}

/* ---------------------------------------------------------
   17. Konferenzbeiträge / Video-Cards

   Außenbereich = dunkler Conference-Hintergrund
   Card selbst   = helles Card-Grau
   --------------------------------------------------------- */

.voline-video-card {
    position: relative;
    isolation: isolate;

    /*
       Der Bereich außerhalb der eigentlichen Card
       entspricht der dunkleren Conference Section.
    */
    background-color: var(--voline-bg-section) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box;

    margin: 0 !important;

    padding:
        24px
        calc(28px + var(--voline-card-inset))
        calc(24px + var(--voline-card-gap))
        calc(28px + var(--voline-card-inset)) !important;
}


/* Sichtbare helle Video-Card */

.voline-video-card::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: var(--voline-card-gap);

    left: var(--voline-card-inset);
    right: var(--voline-card-inset);

    background-color: var(--voline-bg-card);

    border: 1px solid var(--voline-card-border);
    border-radius: 5px;

    z-index: 0;
}


/* Inhalt liegt über der Card-Fläche */

.voline-video-card > * {
    position: relative;
    z-index: 1;
}


/* Innere SP-Page-Builder-Elemente transparent */

.voline-video-card .sppb-row-container,
.voline-video-card .sppb-row,
.voline-video-card .sppb-column,
.voline-video-card .sppb-column-addons {
    background-color: transparent !important;
}


/* Kein zusätzlicher Abstand durch SP Page Builder */

.voline-video-card + .voline-video-card {
    margin-top: 0 !important;
}


/* Titel */

.voline-video-card h3 {
    margin-bottom: var(--voline-space-sm);
}


/* Video */

.voline-video-card .sppb-addon-video {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------------------------------------------------------
   18. Alte Contribution-Hilfsklassen
   --------------------------------------------------------- */

.voline-contribution-first {
    margin-top: var(--voline-space-md) !important;
}

.voline-contribution {
    margin-top: var(--voline-space-lg) !important;
}

.voline-contribution-media {
    margin-top: var(--voline-space-sm) !important;
}


/* ---------------------------------------------------------
   19. Produkt-Cards
   --------------------------------------------------------- */

.voline-product {
    position: relative;
    isolation: isolate;

    background-color: var(--voline-bg-products) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box;

    margin: 0 !important;

    padding:
        26px
        calc(28px + var(--voline-card-inset))
        calc(26px + var(--voline-card-gap))
        calc(28px + var(--voline-card-inset)) !important;
}


/* Sichtbare Produkt-Card */

.voline-product::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: var(--voline-card-gap);

    left: var(--voline-card-inset);
    right: var(--voline-card-inset);

    background-color: var(--voline-bg-card);

    border: 1px solid var(--voline-card-border);
    border-radius: 5px;

    z-index: 0;
}

.voline-product > * {
    position: relative;
    z-index: 1;
}

.voline-product .sppb-row-container,
.voline-product .sppb-row,
.voline-product .sppb-column,
.voline-product .sppb-column-addons {
    background-color: transparent !important;
}

.voline-product + .voline-product {
    margin-top: 0 !important;
}

.voline-product img {
    display: block;
    width: 100%;
    height: auto;
}

.voline-product h3 {
    margin-bottom: 12px;
}

.voline-product p {
    margin-top: 0;
}

.voline-product .sppb-addon-text-block,
.voline-product .sppb-addon-content {
    text-align: left;
}


/* ---------------------------------------------------------
   20. Produktbilder
   --------------------------------------------------------- */

.voline-product-image img {
    display: block;

    width: 85%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   21. Grüner Voline-Akzent
   --------------------------------------------------------- */

.voline-accent-green {
    width: 48px;
    height: 3px;

    background-color: var(--voline-green);

    margin: 0 0 var(--voline-space-sm) 0;
}


/* ---------------------------------------------------------
   22. Optionale Trennlinie
   --------------------------------------------------------- */

.voline-divider {
    border-top: 1px solid var(--voline-border);
}


/* ---------------------------------------------------------
   23. Allgemeine Abstandsklassen
   --------------------------------------------------------- */

.voline-gap-xs {
    margin-top: var(--voline-space-xs) !important;
}

.voline-gap-sm {
    margin-top: var(--voline-space-sm) !important;
}

.voline-gap-md {
    margin-top: var(--voline-space-md) !important;
}

.voline-gap-lg {
    margin-top: var(--voline-space-lg) !important;
}




/* ---------------------------------------------------------
   24. Footer – Customers & Partners
   --------------------------------------------------------- */

.voline-footer-partners {
    width: 100%;
}

.voline-partner-logos {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-start;

    gap: 24px;
}

.voline-partner-logo {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;

    line-height: 0;
}

.voline-partner-logo img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 190px !important;
    max-height: 60px !important;

    object-fit: contain;
}

/* Logo-Link ohne zusätzliche Dekoration */
.voline-partner-logo,
.voline-partner-logo:hover,
.voline-partner-logo:focus {
    text-decoration: none;
}




/* ---------------------------------------------------------
   25. Footer – vertikale Abstände
   --------------------------------------------------------- */

#sp-bottom {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

#sp-bottom .sp-module {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#sp-bottom .sp-module-title {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}






/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */


/* ---------------------------------------------------------
   Tablet
   bis 991 px
   --------------------------------------------------------- */

@media (max-width: 991px) {

    :root {
        --voline-card-inset: 16px;
        --voline-card-gap: 14px;
    }


    /* -----------------------------------------------------
       Allgemeine Sections
       ----------------------------------------------------- */

    .voline-section {
        padding: 34px 24px !important;
    }


    /* -----------------------------------------------------
       Intro
       ----------------------------------------------------- */

    .voline-section.voline-intro {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }


    /* -----------------------------------------------------
       Produktbereich
       ----------------------------------------------------- */

    .voline-section.voline-products-section {
        padding-top: 24px !important;
        padding-bottom: 16px !important;
    }


    /* -----------------------------------------------------
       How Cold Spray Monitoring Works
       ----------------------------------------------------- */

    .voline-section.voline-monitoring-section {
        padding-top: 20px !important;
        padding-bottom: 8px !important;
    }


    /* Kartenbereich direkt unter Überschrift */

    .voline-monitoring-cards {
        padding-top: 6px !important;
        padding-bottom: 24px !important;
    }


    /*
       Die drei Karten werden auf Tablet untereinander
       dargestellt. Dadurch bleiben die Texte gut lesbar.
    */

    .voline-monitoring-cards > .sppb-row-container > .sppb-row {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 14px;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    .voline-monitoring-cards > .sppb-row-container > .sppb-row > .sppb-column {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    .voline-info-card summary {
        padding: 16px 46px 16px 18px;
    }

    .voline-info-title {
        font-size: 18px;
    }

    .voline-info-system {
        font-size: 15px;
    }

    .voline-info-card summary::after {
        right: 18px;
        font-size: 23px;
    }

    .voline-info-body {
        padding: 0 18px 18px 18px;
    }


    /* -----------------------------------------------------
       Complete Process Consistency Monitoring
       ----------------------------------------------------- */

    .voline-section.voline-complete-section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }


    .voline-complete-content .voline-accent-green {
        margin-bottom: 16px;
    }


    /* -----------------------------------------------------
       Technical Background
       ----------------------------------------------------- */

    .voline-section.voline-technical-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }


    .voline-technical-intro {
        margin-bottom: 22px !important;
    }


    .voline-tech-item {
        margin-bottom: 10px;
    }


    .voline-tech-item summary {
        padding: 15px 46px 15px 18px;

        font-size: 18px;
        line-height: 1.4;
    }


    .voline-tech-item summary::after {
        right: 18px;

        font-size: 23px;
    }


    .voline-tech-body {
        padding: 0 18px 18px 18px;
    }


    /* -----------------------------------------------------
       Conference Contributions
       ----------------------------------------------------- */

    .voline-section.voline-conference-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }


    .voline-conference-heading {
        margin-bottom: 16px !important;
    }


    /* -----------------------------------------------------
       Video-Cards
       ----------------------------------------------------- */

    .voline-video-card {
        padding:
            20px
            calc(22px + var(--voline-card-inset))
            calc(20px + var(--voline-card-gap))
            calc(22px + var(--voline-card-inset)) !important;
    }


    /* -----------------------------------------------------
       Produkt-Cards
       ----------------------------------------------------- */

    .voline-product {
        padding:
            22px
            calc(22px + var(--voline-card-inset))
            calc(22px + var(--voline-card-gap))
            calc(22px + var(--voline-card-inset)) !important;
    }


    .voline-product-image img {
        width: 90%;
    }


    /* -----------------------------------------------------
       Footer – Customers & Partners
       ----------------------------------------------------- */

    .voline-partner-logos {
        gap: 20px;
    }

    .voline-partner-logo img {
        max-width: 170px !important;
        max-height: 55px !important;
    }


    /* Footer – vertikale Abstände */

    #sp-bottom {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

}


/* ---------------------------------------------------------
   Smartphone
   bis 767 px
   --------------------------------------------------------- */

@media (max-width: 767px) {

    :root {
        --voline-card-inset: 8px;
        --voline-card-gap: 10px;
    }


    /* -----------------------------------------------------
       Allgemeine Typografie
       ----------------------------------------------------- */

    #sp-main-body {
        font-size: 16px;
        line-height: 1.55;
    }

    #sp-main-body h1 {
        font-size: 28px;
        line-height: 1.2;
    }


    #sp-main-body h2 {
        font-size: 23px;
        line-height: 1.25;
    }


    #sp-main-body h3 {
        font-size: 19px;
        line-height: 1.3;
    }


    /* -----------------------------------------------------
       Allgemeine Sections
       ----------------------------------------------------- */

    .voline-section {
        padding: 26px 15px !important;
    }


    /* -----------------------------------------------------
       Intro
       ----------------------------------------------------- */

    .voline-section.voline-intro {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }


    .voline-intro h1 {
        margin-bottom: 8px;
    }


    .voline-intro .voline-accent-green {
        margin-bottom: 16px;
    }


    /* -----------------------------------------------------
       Produktbereich
       ----------------------------------------------------- */

    .voline-section.voline-products-section {
        padding-top: 20px !important;
        padding-bottom: 12px !important;
    }


    /* -----------------------------------------------------
       How Cold Spray Monitoring Works
       ----------------------------------------------------- */

    .voline-section.voline-monitoring-section {
        padding-top: 20px !important;
        padding-bottom: 6px !important;
    }


    .voline-monitoring-heading {
        margin-bottom: 8px !important;
    }


    .voline-monitoring-cards {
        padding-top: 4px !important;
        padding-bottom: 22px !important;
    }


    .voline-monitoring-cards > .sppb-row-container > .sppb-row {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    .voline-monitoring-cards > .sppb-row-container > .sppb-row > .sppb-column {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    .voline-info-card summary {
        padding: 14px 42px 14px 15px;
    }

    .voline-info-title {
        font-size: 17px;
    }

    .voline-info-system {
        margin-top: 4px;
        font-size: 15px;
    }

    .voline-info-card summary::after {
        right: 15px;
        font-size: 22px;
    }

    .voline-info-body {
        padding: 0 15px 15px 15px;
    }

    .voline-info-body p {
        margin-top: 14px !important;
    }

    .voline-info-body p + p {
        margin-top: 14px !important;
    }


    /* -----------------------------------------------------
       Complete Process Consistency Monitoring
       ----------------------------------------------------- */

    .voline-section.voline-complete-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }


    .voline-complete-content .voline-accent-green {
        margin-bottom: 14px;
    }


    .voline-complete-link {
        margin-top: 14px !important;
    }


    /* -----------------------------------------------------
       Technical Background
       ----------------------------------------------------- */

    .voline-section.voline-technical-section {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }


    .voline-technical-intro {
        margin-bottom: 18px !important;
    }


    .voline-tech-item {
        margin-bottom: 9px;

        border-radius: 4px;
    }


    .voline-tech-item summary {
        padding: 14px 42px 14px 15px;

        font-size: 17px;
        line-height: 1.35;
    }


    .voline-tech-item summary::after {
        right: 15px;

        font-size: 22px;
    }


    .voline-tech-body {
        padding: 0 15px 15px 15px;
    }


    .voline-tech-body p {
        margin-top: 14px !important;
    }


    .voline-tech-body p + p {
        margin-top: 14px !important;
    }


    /* -----------------------------------------------------
       Conference Contributions
       ----------------------------------------------------- */

    .voline-section.voline-conference-section {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }


    .voline-conference-heading {
        margin-bottom: 14px !important;
    }


    /* -----------------------------------------------------
       Video-Cards
       ----------------------------------------------------- */

    .voline-video-card {
        padding:
            16px
            calc(16px + var(--voline-card-inset))
            calc(16px + var(--voline-card-gap))
            calc(16px + var(--voline-card-inset)) !important;
    }


    .voline-video-card h3 {
        margin-bottom: 12px;
    }


    /* Videos dürfen nie über die Card hinausragen */

    .voline-video-card iframe,
    .voline-video-card video {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       Produkt-Cards
       ----------------------------------------------------- */

    .voline-product {
        padding:
            18px
            calc(18px + var(--voline-card-inset))
            calc(18px + var(--voline-card-gap))
            calc(18px + var(--voline-card-inset)) !important;
    }


    .voline-product-image img {
        width: 100%;
    }


    /* -----------------------------------------------------
       Footer – Customers & Partners
       ----------------------------------------------------- */

    .voline-footer-partners {
        margin-top: 4px;
    }

    .voline-partner-logos {
        justify-content: flex-start;
        gap: 16px;
    }

    .voline-partner-logo img {
        max-width: 145px !important;
        max-height: 48px !important;
    }


    /* Footer – vertikale Abstände */

    #sp-bottom {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    #sp-bottom .sp-module-title {
        margin-bottom: 16px !important;
    }



}



/* =========================================================
   HEADER / TOP BAR – E-Mail wie im Footer
   ========================================================= */

/*
   Die E-Mail in der oberen dunklen Leiste erhält dieselbe
   Typografie und dasselbe Interaktionsverhalten wie im Footer:
   normal weiß, bei Hover/Fokus/Klick Voline-Grün.
*/

#sp-top-bar a[href^="mailto:info@volinesystems.com"],
#sp-top1 a[href^="mailto:info@volinesystems.com"],
#sp-top2 a[href^="mailto:info@volinesystems.com"] {
    color: #FFFFFF !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;

    text-decoration: none !important;
}


/*
   Abstand zwischen Briefsymbol und Mailadresse wie im Footer:
   Footer: 26px Einzug - 16px Iconbreite = 10px sichtbarer Abstand.
   Die Regel deckt sowohl Helix-Markup mit Icon neben dem Link
   als auch Icon innerhalb des Mail-Links ab.
*/

#sp-top-bar .sp-contact-info .sp-contact-email,
#sp-top1 .sp-contact-info .sp-contact-email,
#sp-top2 .sp-contact-info .sp-contact-email {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#sp-top-bar a[href^="mailto:info@volinesystems.com"],
#sp-top1 a[href^="mailto:info@volinesystems.com"],
#sp-top2 a[href^="mailto:info@volinesystems.com"] {
    align-items: center !important;
    gap: 10px !important;
}

#sp-top-bar .sp-contact-email .icon-envelope,
#sp-top-bar .sp-contact-email .fa-envelope,
#sp-top-bar .sp-contact-email i,
#sp-top-bar .sp-contact-email span,
#sp-top1 .sp-contact-email .icon-envelope,
#sp-top1 .sp-contact-email .fa-envelope,
#sp-top1 .sp-contact-email i,
#sp-top1 .sp-contact-email span,
#sp-top2 .sp-contact-email .icon-envelope,
#sp-top2 .sp-contact-email .fa-envelope,
#sp-top2 .sp-contact-email i,
#sp-top2 .sp-contact-email span {
    margin-right: 0 !important;
}


/* Enthaltene Icon-/Text-Elemente ebenfalls weiß */

#sp-top-bar a[href^="mailto:info@volinesystems.com"] *,
#sp-top1 a[href^="mailto:info@volinesystems.com"] *,
#sp-top2 a[href^="mailto:info@volinesystems.com"] * {
    color: #FFFFFF !important;
}


/* Briefsymbol in der Kopfzeile passend zum Footer */

#sp-top-bar a[href^="mailto:info@volinesystems.com"] .icon-envelope,
#sp-top1 a[href^="mailto:info@volinesystems.com"] .icon-envelope,
#sp-top2 a[href^="mailto:info@volinesystems.com"] .icon-envelope,
#sp-top-bar a[href^="mailto:info@volinesystems.com"] .icon-envelope::before,
#sp-top1 a[href^="mailto:info@volinesystems.com"] .icon-envelope::before,
#sp-top2 a[href^="mailto:info@volinesystems.com"] .icon-envelope::before {
    color: #FFFFFF !important;
    font-size: 15px !important;
}


/* Hover / Fokus / Klick: Voline-Grün */

#sp-top-bar a[href^="mailto:info@volinesystems.com"]:hover,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:focus,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:active,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:hover,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:focus,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:active,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:hover,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:focus,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:active {
    color: var(--voline-green) !important;

    text-decoration: none !important;
}


/* Unterelemente und Briefsymbol bei Hover/Fokus/Klick ebenfalls grün */

#sp-top-bar a[href^="mailto:info@volinesystems.com"]:hover *,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:focus *,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:active *,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:hover *,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:focus *,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:active *,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:hover *,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:focus *,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:active *,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope::before,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope::before,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:active .icon-envelope::before,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope::before,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope::before,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:active .icon-envelope::before,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope::before,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope::before,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:active .icon-envelope::before {
    color: var(--voline-green) !important;
}


/* =========================================================
   LINKEDIN – gemeinsame Buttons für About Us
   ========================================================= */

#sp-main-body .voline-contact-linkedin {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    width: auto !important;

    margin: 16px 0 0 0 !important;
    padding: 0 !important;
}

#sp-main-body .voline-contact-linkedin > a.voline-linkedin-btn,
#sp-main-body .voline-contact-linkedin > a.voline-linkedin-btn:link,
#sp-main-body .voline-contact-linkedin > a.voline-linkedin-btn:visited {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 6px 9px !important;

    background-color: var(--voline-blue) !important;

    border: 1px solid var(--voline-blue) !important;
    border-radius: 4px !important;

    color: #FFFFFF !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    box-sizing: border-box !important;
}

/* LinkedIn-Symbol unabhängig von Joomla/Helix zeichnen */
#sp-main-body .voline-contact-linkedin .voline-linkedin-icon {
    position: relative !important;

    display: inline-block !important;

    flex: 0 0 15px !important;

    width: 15px !important;
    height: 15px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #FFFFFF !important;

    border-radius: 1px !important;

    overflow: hidden !important;

    color: transparent !important;
    font-size: 0 !important;
}

#sp-main-body .voline-contact-linkedin .voline-linkedin-icon::before {
    content: "in";

    position: absolute;

    top: 0;
    left: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    color: var(--voline-blue) !important;

    font-family: Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 15px !important;

    text-transform: lowercase !important;
}

#sp-main-body .voline-contact-linkedin > a.voline-linkedin-btn:hover,
#sp-main-body .voline-contact-linkedin > a.voline-linkedin-btn:focus {
    background-color: var(--voline-blue-hover) !important;
    border-color: var(--voline-blue-hover) !important;

    color: #FFFFFF !important;

    text-decoration: none !important;
}

#sp-main-body .voline-contact-linkedin .voline-linkedin-btn:hover .voline-linkedin-icon::before,
#sp-main-body .voline-contact-linkedin .voline-linkedin-btn:focus .voline-linkedin-icon::before {
    color: var(--voline-blue-hover) !important;
}


/* =========================================================
   ABOUT US – Kontaktdaten
   ========================================================= */

#sp-main-body .voline-about-contact {
    font-size: 20px;
    line-height: 1.55;
}

/* Adresse */
#sp-main-body .voline-about-address {
    position: relative;

    padding-left: 30px;

    font-size: 20px;
    line-height: 1.55;
}

/* =========================================================
   LOCATION PIN – ABOUT US
   ========================================================= */

#sp-main-body .voline-about-address::before {
    content: "";

    position: absolute;

    left: 2px;
    top: 7px;

    width: 15px;
    height: 15px;

    border: 2px solid var(--voline-nav-text);
    border-radius: 50% 50% 50% 0;

    transform: rotate(-45deg);

    box-sizing: border-box;
}


/* Punkt im Location Pin */

#sp-main-body .voline-about-address::after {
    content: "";

    position: absolute;

    left: 7px;
    top: 12px;

    width: 5px;
    height: 5px;

    background-color: var(--voline-nav-text);

    border-radius: 50%;
}

/* E-Mail */
#sp-main-body .voline-about-email {
    position: relative;

    margin-top: 12px;
    padding-left: 30px;

    font-size: 20px;
    line-height: 1.55;
}

#sp-main-body .voline-about-email::before {
    content: "✉";

    position: absolute;

    left: 0;
    top: 1px;

    width: 18px;

    color: var(--voline-nav-text);

    font-family: Arial, sans-serif;
    font-size: 21px;
    line-height: 1.55;

    text-align: center;
}

/* Mail exakt gleiche Schriftgröße wie die Adresse */
#sp-main-body .voline-about-email a,
#sp-main-body .voline-about-email a:link,
#sp-main-body .voline-about-email a:visited {
    color: var(--voline-blue) !important;

    font-size: 20px !important;
    line-height: 1.55 !important;

    text-decoration: none !important;
}

#sp-main-body .voline-about-email a:hover,
#sp-main-body .voline-about-email a:focus {
    color: var(--voline-blue-hover) !important;
}


/* =========================================================
   FOOTER – Contact
   ========================================================= */

#sp-bottom .voline-footer-contact {
    font-size: inherit;
    line-height: 1.6;
}

/* Adresse */
#sp-bottom .voline-footer-address {
    position: relative;

    padding-left: 26px;
}

/* =========================================================
   LOCATION PIN – FOOTER
   ========================================================= */

#sp-bottom .voline-footer-address::before {
    content: "";

    position: absolute;

    left: 2px;
    top: 3px;

    width: 13px;
    height: 13px;

    border: 2px solid #FFFFFF;
    border-radius: 50% 50% 50% 0;

    transform: rotate(-45deg);

    box-sizing: border-box;
}


/* Punkt im Location Pin */

#sp-bottom .voline-footer-address::after {
    content: "";

    position: absolute;

    left: 6px;
    top: 7px;

    width: 5px;
    height: 5px;

    background-color: #FFFFFF;

    border-radius: 50%;
}

/* E-Mail */
#sp-bottom .voline-footer-email {
    position: relative;

    margin-top: 8px;
    padding-left: 26px;
}

#sp-bottom .voline-footer-email::before {
    content: "✉";

    position: absolute;

    left: 0;
    top: 0;

    width: 16px;

    color: #FFFFFF;

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;

    text-align: center;
}

/* Footer-Mail normal weiß */
#sp-bottom .voline-footer-email a,
#sp-bottom .voline-footer-email a:link,
#sp-bottom .voline-footer-email a:visited {
    color: #FFFFFF !important;

    font-size: inherit !important;
    line-height: inherit !important;

    text-decoration: none !important;
}

/* Hover / Fokus / Klick im Footer: Voline-Grün */
#sp-bottom .voline-footer-email a:hover,
#sp-bottom .voline-footer-email a:focus,
#sp-bottom .voline-footer-email a:active {
    color: var(--voline-green) !important;

    text-decoration: none !important;
}


/* =========================================================
   RESPONSIVE – LinkedIn und Contact auf About Us
   ========================================================= */

@media (max-width: 767px) {

    #sp-main-body .voline-contact-linkedin {
        gap: 8px !important;
        margin-top: 14px !important;
    }

    #sp-main-body .voline-contact-linkedin > a.voline-linkedin-btn {
        padding: 6px 8px !important;
        font-size: 14px !important;
    }

    #sp-main-body .voline-about-contact,
    #sp-main-body .voline-about-address,
    #sp-main-body .voline-about-email,
    #sp-main-body .voline-about-email a {
        font-size: 16px !important;
    }

    #sp-main-body .voline-about-address,
    #sp-main-body .voline-about-email {
        padding-left: 26px;
    }

    #sp-main-body .voline-about-address::before {
        width: 18px;
        font-size: 18px;
        font-weight: 900;
    }

    #sp-main-body .voline-about-email::before {
        width: 16px;
        font-size: 16px;
    }
}

/* =========================================================
   ABOUT US – Contact Card
   Analog zu Product / Conference Cards
   ========================================================= */

/*
   Die Contact-Card wird wie die Conference-/Product-Cards
   sichtbar eingerückt. Der Rahmen beginnt nicht mehr fast
   an der Außenkante der Section.

   Desktop:
   - äußerer zusätzlicher Card-Einzug: 28px
   - Innenabstand innerhalb der Card: 28px
*/

.voline-section.voline-contact-card {
    position: relative;
    isolation: isolate;

    --voline-contact-card-outer-inset: 28px;
    --voline-contact-card-inner-padding: 28px;

    background-color: var(--voline-bg-products) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box;

    margin: 0 !important;

    padding:
        26px
        calc(
            var(--voline-card-inset)
            + var(--voline-contact-card-outer-inset)
            + var(--voline-contact-card-inner-padding)
        )
        calc(26px + var(--voline-card-gap))
        calc(
            var(--voline-card-inset)
            + var(--voline-contact-card-outer-inset)
            + var(--voline-contact-card-inner-padding)
        ) !important;
}


/* Sichtbare helle Contact-Card */

.voline-section.voline-contact-card::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: var(--voline-card-gap);

    left: calc(
        var(--voline-card-inset)
        + var(--voline-contact-card-outer-inset)
    );

    right: calc(
        var(--voline-card-inset)
        + var(--voline-contact-card-outer-inset)
    );

    background-color: var(--voline-bg-card);

    border: 1px solid var(--voline-card-border);
    border-radius: 5px;

    z-index: 0;
}


/* Inhalt über der Card-Fläche */

.voline-section.voline-contact-card > * {
    position: relative;
    z-index: 1;
}


/* SP-Page-Builder-Unterelemente transparent */

.voline-contact-card .sppb-row-container,
.voline-contact-card .sppb-row,
.voline-contact-card .sppb-column,
.voline-contact-card .sppb-column-addons {
    background-color: transparent !important;
}


/* Contact-Überschrift */

.voline-contact-card h2 {
    margin-bottom: 8px !important;
}


/* Grüner Akzent */

.voline-contact-card .voline-accent-green {
    width: 48px;
    margin-bottom: 20px;
}


/* =========================================================
   Contact Card – Tablet
   ========================================================= */

@media (max-width: 991px) {

    .voline-section.voline-contact-card {
        --voline-contact-card-outer-inset: 22px;
        --voline-contact-card-inner-padding: 22px;

        padding:
            22px
            calc(
                var(--voline-card-inset)
                + var(--voline-contact-card-outer-inset)
                + var(--voline-contact-card-inner-padding)
            )
            calc(22px + var(--voline-card-gap))
            calc(
                var(--voline-card-inset)
                + var(--voline-contact-card-outer-inset)
                + var(--voline-contact-card-inner-padding)
            ) !important;
    }
}


/* =========================================================
   Contact Card – Smartphone
   ========================================================= */

@media (max-width: 767px) {

    .voline-section.voline-contact-card {
        --voline-contact-card-outer-inset: 10px;
        --voline-contact-card-inner-padding: 16px;

        padding:
            18px
            calc(
                var(--voline-card-inset)
                + var(--voline-contact-card-outer-inset)
                + var(--voline-contact-card-inner-padding)
            )
            calc(18px + var(--voline-card-gap))
            calc(
                var(--voline-card-inset)
                + var(--voline-contact-card-outer-inset)
                + var(--voline-contact-card-inner-padding)
            ) !important;
    }
}


/* =========================================================
   TOP BAR – Briefsymbol wirklich weiß
   ========================================================= */

#sp-top-bar .icon-envelope,
#sp-top-bar .icon-envelope::before,
#sp-top-bar .fa-envelope,
#sp-top-bar .fa-envelope::before,
#sp-top1 .icon-envelope,
#sp-top1 .icon-envelope::before,
#sp-top1 .fa-envelope,
#sp-top1 .fa-envelope::before,
#sp-top2 .icon-envelope,
#sp-top2 .icon-envelope::before,
#sp-top2 .fa-envelope,
#sp-top2 .fa-envelope::before {
    color: #FFFFFF !important;
    opacity: 1 !important;

    -webkit-text-fill-color: #FFFFFF !important;

    filter: none !important;
}


/* Hover / Fokus / Klick weiterhin Voline-Grün */

#sp-top-bar a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope::before,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope,
#sp-top-bar a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope::before,

#sp-top1 a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope::before,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope,
#sp-top1 a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope::before,

#sp-top2 a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:hover .icon-envelope::before,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope,
#sp-top2 a[href^="mailto:info@volinesystems.com"]:focus .icon-envelope::before {
    color: var(--voline-green) !important;

    -webkit-text-fill-color: var(--voline-green) !important;

    opacity: 1 !important;
}

/* =========================================================
   TOP BAR – Briefsymbol leicht nach unten versetzen
   ========================================================= */

#sp-top-bar .sp-contact-email .icon-envelope,
#sp-top-bar .sp-contact-email .fa-envelope,
#sp-top-bar .sp-contact-email i,
#sp-top1 .sp-contact-email .icon-envelope,
#sp-top1 .sp-contact-email .fa-envelope,
#sp-top1 .sp-contact-email i,
#sp-top2 .sp-contact-email .icon-envelope,
#sp-top2 .sp-contact-email .fa-envelope,
#sp-top2 .sp-contact-email i {
    position: relative !important;
    top: 1px !important;
}