.footer-reference{
    position:relative;
    width:100%;
    min-height:760px;
    padding:122px 0 48px;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 36%,rgba(255,255,255,.032),transparent 34%),
        radial-gradient(circle at 78% 44%,rgba(232,164,7,.025),transparent 31%),
        linear-gradient(128deg,#151719 0%,#101214 52%,#161719 100%);
    color:#f5f5f1;
}
.footer-reference::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.2;
    background-image:repeating-linear-gradient(112deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);
}
.footer-reference .footer-container{
    position:relative;
    z-index:1;
    display:block;
    width:min(100%,1400px);
    margin-inline:auto;
    padding-inline:36px;
}
.footer-reference__main{
    display:grid;
    grid-template-columns:minmax(250px,300px) minmax(230px,1.18fr) minmax(175px,.82fr) minmax(280px,1.14fr);
    gap:54px;
    align-items:start;
}
.footer-reference__brand{
    min-width:0;
    padding-right:50px;
    border-right:1px solid rgba(255,255,255,.18);
}
.footer-reference .footer-brand img{
    width:190px;
    height:114px;
    margin:0 0 34px;
    object-fit:contain;
    object-position:left center;
}
.footer-reference .footer-brand p{
    max-width:255px;
    margin:0;
    color:#f1f1ed;
    font-size:18px;
    font-weight:400;
    line-height:1.9;
}
.footer-reference__column h2{
    margin:10px 0 34px;
    color:#f4b000;
    font-family:Sora,Poppins,Arial,sans-serif;
    font-size:21px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:.1px;
    text-transform:uppercase;
}
.footer-reference__column ul{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin:0;
    padding:0;
    list-style:none;
}
.footer-reference__column li{
    position:relative;
    margin:0;
    padding:0;
}
.footer-reference__services li{
    padding-left:22px;
}
.footer-reference__services li::before{
    content:"";
    position:absolute;
    left:0;
    top:13px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#f4b000;
}
.footer-reference__column a,
.footer-reference__privacy-button,
.footer-reference__contact-row{
    color:#f1f1ed;
    font-size:18px;
    font-weight:400;
    line-height:1.55;
}
.footer-reference__column li>a{
    position:relative;
    display:inline-block;
    transition:color .22s ease,transform .22s ease;
}
.footer-reference__privacy-button{
    display:inline-block;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    text-align:left;
    transition:color .22s ease,transform .22s ease;
}
.footer-reference__privacy-button:hover{
    color:#f4b000;
    transform:translateX(3px);
}
.footer-reference__privacy-button:focus-visible{
    outline:3px solid var(--brand-bright);
    outline-offset:4px;
}
.footer-reference__column li>a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    height:1px;
    background:#f4b000;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .22s ease;
}
.footer-reference__column li>a:hover{
    color:#f4b000;
    transform:translateX(3px);
}
.footer-reference__column li>a:hover::after{
    transform:scaleX(1);
    transform-origin:left;
}
.footer-reference__contact address{
    display:flex;
    flex-direction:column;
    gap:24px;
    margin:0;
    font-style:normal;
}
.footer-reference__contact address>a,
.footer-reference__contact-row{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:18px;
    align-items:center;
}
.footer-reference__contact address>a{
    transition:color .22s ease,transform .22s ease;
}
.footer-reference__contact address>a:hover{
    color:#f4b000;
    transform:translateX(3px);
}
.footer-reference__contact-icon{
    display:inline-flex;
    color:#f4b000;
}
.footer-reference__contact-icon svg{
    width:24px;
    height:24px;
    flex:0 0 24px;
}
.footer-reference__bottom{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:28px;
    align-items:center;
    margin-top:68px;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.22);
    color:#bfc1bd;
    font-size:15px;
    line-height:1.5;
}
.footer-reference__bottom>a{justify-self:end}
.footer-reference__bottom>a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#d7d8d4;
    transition:opacity .22s ease,transform .22s ease;
}
.footer-reference__bottom>a:hover{
    opacity:.84;
    transform:translateY(-1px);
}
.footer-reference__credit{
    gap:10px;
    line-height:1.25;
}
.footer-reference__credit-label{
    color:#bfc1bd;
    font-size:14px;
    font-weight:400;
    white-space:nowrap;
}
.footer-reference__credit img{
    display:block;
    width:132px;
    max-width:100%;
    height:auto;
    object-fit:contain;
}
@media (max-width:1100px){
    .footer-reference{min-height:0;padding-top:82px}
    .footer-reference .footer-container{padding-inline:30px}
    .footer-reference__main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px 64px}
    .footer-reference__brand{padding-right:44px}
    .footer-reference__contact address{max-width:360px}
}
@media (max-width:680px){
    .footer-reference{padding:75px 0 30px}
    .footer-reference .footer-container{padding-inline:22px}
    .footer-reference__main{grid-template-columns:1fr;gap:48px;text-align:left}
    .footer-reference__brand{padding:0 0 44px;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
    .footer-reference .footer-brand img{width:174px;height:104px;margin-bottom:28px}
    .footer-reference .footer-brand p{max-width:330px;font-size:17px;line-height:1.75}
    .footer-reference__column h2{margin:0 0 26px;font-size:20px}
    .footer-reference__column ul{gap:17px}
    .footer-reference__column a,.footer-reference__privacy-button,.footer-reference__contact-row{font-size:17px}
    .footer-reference__bottom{grid-template-columns:1fr;gap:16px;margin-top:54px;padding-top:24px;text-align:left;font-size:14px}
    .footer-reference__bottom>a{justify-self:start;justify-content:flex-start}
    .footer-reference__credit{gap:9px}
    .footer-reference__credit-label{font-size:13px}
    .footer-reference__credit img{width:124px}
}

/* Einheitlicher UI-Radius fuer alle aktiven, rechteckigen Karten und Aktionen.
   Die geclippten Ablaufkarten bleiben bewusst ausserhalb dieses Systems. */
:where(
    .nav-link,
    .nav-service-toggle,
    .nav-toggle,
    .header-cta,
    .submenu-links > a,
    .btn,
    .hero-reference__button,
    .hero-benefits li,
    .module-card,
    .reference-card,
    .partner-logo,
    .module-select,
    .rail-control,
    .explorer-action,
    .filter-button,
    .variant-dock button,
    .about-reference__benefit,
    .services-reference__card,
    .services-reference__action,
    .reference-projects__card,
    .reference-projects__button,
    .advantages-reference__card,
    .reviews-reference__summary,
    .reviews-reference__card,
    .reviews-reference__control,
    .partners-productworlds__logo-stage,
    .partners-productworlds__logo-card
) {
    border-radius:var(--radius-ui) !important;
}

/* Horizontale Section-CTAs: rahmenloses dunkles Band mit gelbem Aktionsblock. */
:where(
    .section-cta,
    .about-reference__cta,
    .services-reference__cta,
    .reference-projects__cta-band,
    .process-reference__cta,
    .advantages-reference__cta,
    .reviews-reference__cta,
    .partners-productworlds__cta,
    .contact-project-reference__cta-band
) {
    /* Exakt die berechnete Akzentfarbe des aktiven Header-Buttons
       „Projekt anfragen“ (rgb(244,176,0)). */
    --section-cta-accent:#f4b000;
    border:0 !important;
    border-radius:var(--radius-ui) !important;
}

:where(
    .section-cta > .btn,
    .about-reference__cta-button,
    .services-reference__cta-button,
    .reference-projects__button,
    .process-reference__cta-button,
    .advantages-reference__cta-button,
    .reviews-reference__cta-button,
    .partners-productworlds__cta-button,
    .contact-project-reference__cta-button
) {
    border:0 !important;
    border-radius:var(--radius-ui) !important;
    background:var(--section-cta-accent) !important;
    background-image:none !important;
    color:#111516 !important;
    outline-color:#111516;
}

/* Der Copybereich beginnt nah an der gelben Flaeche und wird innerhalb
   der unveraenderten CTA-Hoehe verlaesslich vertikal zentriert. */
:where(
    .section-cta > p,
    .about-reference__cta-copy,
    .services-reference__cta-copy,
    .reference-projects__cta-band > p,
    .process-reference__cta-copy,
    .advantages-reference__cta > p,
    .reviews-reference__cta > p,
    .partners-productworlds__cta > p,
    .contact-project-reference__cta-band > p
) {
    align-self:stretch !important;
    display:grid !important;
    align-content:center !important;
    padding-left:12px !important;
}

/* Gemeinsamer linker Block aller horizontalen Section-CTAs.
   Der Blitz ist bewusst eine gefuellte CSS-Silhouette: Das vorhandene
   zap.svg bleibt im Markup/Assetpfad erhalten, seine Kontur wird jedoch
   visuell durch die kontraststarke Fuellung ersetzt. */
:where(
    .section-cta__mark,
    .about-reference__cta-mark,
    .services-reference__cta-mark,
    .reference-projects__cta-mark,
    .process-reference__cta-mark,
    .advantages-reference__cta-symbol,
    .reviews-reference__cta-mark,
    .partners-productworlds__cta-mark,
    .contact-project-reference__cta-mark
) {
    --section-cta-yellow-width:205px;
    --section-cta-bolt-x:85px;
}

:where(
    .section-cta__mark,
    .about-reference__cta-mark,
    .services-reference__cta-mark,
    .reference-projects__cta-mark,
    .process-reference__cta-mark,
    .advantages-reference__cta-symbol,
    .reviews-reference__cta-mark,
    .partners-productworlds__cta-mark,
    .contact-project-reference__cta-mark
)::before {
    width:min(var(--section-cta-yellow-width),calc(100% - 16px)) !important;
    background:var(--section-cta-accent) !important;
    clip-path:polygon(0 0,100% 0,68% 100%,0 100%) !important;
}

/* Keine separate gelbe Trennlinie: Die schräge Kante entsteht nur durch
   die Grenze zwischen gelber und dunkler Flaeche. */
:where(
    .section-cta__mark,
    .about-reference__cta-mark,
    .services-reference__cta-mark,
    .reference-projects__cta-mark,
    .process-reference__cta-mark,
    .advantages-reference__cta-symbol,
    .reviews-reference__cta-mark,
    .partners-productworlds__cta-mark,
    .contact-project-reference__cta-mark
)::after {
    content:none !important;
    display:none !important;
    width:0 !important;
    border:0 !important;
    background:none !important;
}

:where(
    .section-cta__mark-icon,
    .about-reference__cta-icon,
    .services-reference__cta-mark .icon,
    .reference-projects__cta-zap,
    .process-reference__cta-icon,
    .advantages-reference__cta-zap,
    .reviews-reference__cta-zap,
    .partners-productworlds__cta-zap,
    .contact-project-reference__cta-icon
) {
    position:absolute !important;
    z-index:2 !important;
    top:50% !important;
    left:min(var(--section-cta-bolt-x),calc(50% - 8px)) !important;
    display:block !important;
    width:44px !important;
    height:55px !important;
    margin:0 !important;
    background:#111516 !important;
    color:transparent !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='black' points='384.533,15 288.133,207.8 368.467,207.8 127.467,497 207.8,239.933 127.467,239.933 239.933,15'/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='black' points='384.533,15 288.133,207.8 368.467,207.8 127.467,497 207.8,239.933 127.467,239.933 239.933,15'/%3E%3C/svg%3E") !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
    -webkit-mask-size:contain !important;
    mask-size:contain !important;
    clip-path:polygon(75.10% 2.93%,56.28% 40.59%,71.97% 40.59%,24.90% 97.07%,40.59% 46.86%,24.90% 46.86%,46.86% 2.93%) !important;
    transform:translate(-50%,-50%) !important;
}

:where(
    .section-cta__mark-icon,
    .about-reference__cta-icon,
    .services-reference__cta-mark .icon,
    .reference-projects__cta-zap,
    .process-reference__cta-icon,
    .advantages-reference__cta-zap,
    .reviews-reference__cta-zap,
    .partners-productworlds__cta-zap,
    .contact-project-reference__cta-icon
) :where(svg,g,path,polygon,polyline,line,rect,circle,ellipse) {
    opacity:0 !important;
}

@media (max-width:1280px) {
    :where(
        .section-cta__mark,
        .about-reference__cta-mark,
        .services-reference__cta-mark,
        .reference-projects__cta-mark,
        .process-reference__cta-mark,
        .advantages-reference__cta-symbol,
        .reviews-reference__cta-mark,
        .partners-productworlds__cta-mark,
        .contact-project-reference__cta-mark
    ) {
        --section-cta-yellow-width:170px;
        --section-cta-bolt-x:71px;
    }

    :where(
        .section-cta__mark-icon,
        .about-reference__cta-icon,
        .services-reference__cta-mark .icon,
        .reference-projects__cta-zap,
        .process-reference__cta-icon,
        .advantages-reference__cta-zap,
        .reviews-reference__cta-zap,
        .partners-productworlds__cta-zap,
        .contact-project-reference__cta-icon
    ) {
        width:40px !important;
        height:50px !important;
    }
}

@media (max-width:760px) {
    :where(
        .section-cta__mark,
        .about-reference__cta-mark,
        .services-reference__cta-mark,
        .reference-projects__cta-mark,
        .process-reference__cta-mark,
        .advantages-reference__cta-symbol,
        .reviews-reference__cta-mark,
        .partners-productworlds__cta-mark,
        .contact-project-reference__cta-mark
    ) {
        --section-cta-yellow-width:76px;
        --section-cta-bolt-x:31px;
    }

    :where(
        .section-cta__mark-icon,
        .about-reference__cta-icon,
        .services-reference__cta-mark .icon,
        .reference-projects__cta-zap,
        .process-reference__cta-icon,
        .advantages-reference__cta-zap,
        .reviews-reference__cta-zap,
        .partners-productworlds__cta-zap,
        .contact-project-reference__cta-icon
    ) {
        left:var(--section-cta-bolt-x) !important;
        width:34px !important;
        height:43px !important;
    }
}

/* =========================================================
   Global button light sweep and centered CTA actions
   ========================================================= */

/* One late, shared effect replaces the older split-panel and per-component
   hover treatments. It deliberately matches the active header CTA sweep. */
@keyframes elektroeser-button-light-sweep {
    0% {
        opacity:0;
        transform:translate3d(-220%,0,0) skewX(-18deg);
    }
    12% { opacity:.35; }
    48% { opacity:1; }
    100% {
        opacity:0;
        transform:translate3d(520%,0,0) skewX(-18deg);
    }
}

:where(
    .btn,
    .hero-reference__button,
    .about-reference__cta-button,
    .services-reference__action,
    .services-reference__cta-button,
    .reference-projects__button,
    .process-reference__cta-button,
    .advantages-reference__cta-button,
    .reviews-reference__control,
    .reviews-reference__cta-button,
    .partners-productworlds__cta-button,
    .contact-project-reference__cta-button,
    .other-services-reference__action,
    .module-select,
    .rail-control,
    .explorer-action,
    .filter-button,
    .variant-dock button
) {
    position:relative !important;
    isolation:isolate;
    overflow:hidden !important;
}

/* Remove the obsolete two-panel and per-component sweeps. */
.btn::before,
.hero-reference__button::before,
.about-reference__cta-button::before,
.services-reference__action::before,
.services-reference__cta-button::before,
.reference-projects__button::before,
.process-reference__cta-button::before,
.advantages-reference__cta-button::before,
.reviews-reference__control::before,
.reviews-reference__cta-button::before,
.partners-productworlds__cta-button::before,
.contact-project-reference__cta-button::before,
.other-services-reference__action::before,
.btn > .btn__light-sweep {
    content:none !important;
    display:none !important;
}

:where(
    .btn,
    .hero-reference__button,
    .about-reference__cta-button,
    .services-reference__action,
    .services-reference__cta-button,
    .reference-projects__button,
    .process-reference__cta-button,
    .advantages-reference__cta-button,
    .reviews-reference__control,
    .reviews-reference__cta-button,
    .partners-productworlds__cta-button,
    .contact-project-reference__cta-button,
    .other-services-reference__action,
    .module-select,
    .rail-control,
    .explorer-action,
    .filter-button,
    .variant-dock button
)::after {
    content:"" !important;
    position:absolute !important;
    z-index:3 !important;
    top:-60% !important;
    bottom:-60% !important;
    left:-55% !important;
    right:auto !important;
    display:block !important;
    width:38% !important;
    height:auto !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(105deg,transparent 0%,rgba(255,224,126,.08) 22%,rgba(255,248,220,.78) 50%,rgba(255,202,48,.18) 78%,transparent 100%) !important;
    clip-path:none !important;
    filter:blur(4px);
    opacity:0;
    pointer-events:none;
    mix-blend-mode:screen;
    transform:translate3d(-220%,0,0) skewX(-18deg);
}

:where(
    .btn,
    .hero-reference__button,
    .about-reference__cta-button,
    .services-reference__cta-button,
    .reference-projects__button,
    .process-reference__cta-button,
    .advantages-reference__cta-button,
    .reviews-reference__control,
    .reviews-reference__cta-button,
    .partners-productworlds__cta-button,
    .contact-project-reference__cta-button,
    .module-select,
    .rail-control,
    .explorer-action,
    .filter-button,
    .variant-dock button
):is(:hover,:focus-visible)::after,
.services-reference__card-link:is(:hover,:focus-visible) .services-reference__action::after,
.other-services-reference__card-link:is(:hover,:focus-visible) .other-services-reference__action::after {
    animation:elektroeser-button-light-sweep 1.2s cubic-bezier(.35,0,.2,1) 1 !important;
}

/* The sweep does not replace a button's established palette. In particular,
   yellow actions on service pages keep dark, readable labels and icons. */
.btn:is(:hover,:focus-visible) {
    color:var(--surface-fg) !important;
}
.btn:is(:hover,:focus-visible) .btn__icon {
    color:var(--interactive-accent) !important;
}
.header-cta:is(:hover,:focus-visible),
.hero .btn:is(:hover,:focus-visible),
[data-surface-tone="dark"] .btn:is(:hover,:focus-visible),
.section-cta > .btn:is(:hover,:focus-visible) {
    color:#111516 !important;
}
.header-cta:is(:hover,:focus-visible) .btn__icon,
.hero .btn:is(:hover,:focus-visible) .btn__icon,
[data-surface-tone="dark"] .btn:is(:hover,:focus-visible) .btn__icon,
.section-cta > .btn:is(:hover,:focus-visible) .btn__icon {
    color:#111516 !important;
}
.hero-reference__button--secondary:is(:hover,:focus-visible) {
    color:#f8f7f3 !important;
}

/* CTA labels are geometrically centered. Their arrows are removed from the
   centering equation and remain anchored at the right edge. */
:where(
    .hero-reference__button,
    .about-reference__cta-button,
    .services-reference__cta-button,
    .reference-projects__button,
    .process-reference__cta-button,
    .advantages-reference__cta-button,
    .reviews-reference__cta-button,
    .partners-productworlds__cta-button,
    .contact-project-reference__cta-button
) {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding-left:46px !important;
    padding-right:46px !important;
    text-align:center !important;
}

:where(
    .hero-reference__button,
    .about-reference__cta-button,
    .services-reference__cta-button,
    .reference-projects__button,
    .process-reference__cta-button,
    .advantages-reference__cta-button,
    .reviews-reference__cta-button,
    .partners-productworlds__cta-button,
    .contact-project-reference__cta-button
) > :first-child {
    min-width:0;
    text-align:center !important;
    white-space:nowrap;
}

:where(
    .hero-reference__button,
    .about-reference__cta-button,
    .services-reference__cta-button,
    .reference-projects__button,
    .process-reference__cta-button,
    .advantages-reference__cta-button,
    .reviews-reference__cta-button,
    .partners-productworlds__cta-button,
    .contact-project-reference__cta-button
) > :where(svg,[class*="arrow"],[class*="icon"]):last-child {
    position:absolute !important;
    z-index:2;
    top:50% !important;
    right:20px !important;
    margin:0 !important;
    transform:translateY(-50%);
}

:where(
    .hero-reference__button,
    .about-reference__cta-button,
    .services-reference__cta-button,
    .reference-projects__button,
    .process-reference__cta-button,
    .advantages-reference__cta-button,
    .reviews-reference__cta-button,
    .partners-productworlds__cta-button,
    .contact-project-reference__cta-button
):is(:hover,:focus-visible) > :where(svg,[class*="arrow"],[class*="icon"]):last-child {
    transform:translate(4px,-50%) !important;
}

.hero .btn,
.section-cta > .btn {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding-left:46px !important;
    padding-right:46px !important;
    text-align:center !important;
}
.hero .btn .btn__face--base,
.section-cta > .btn .btn__face--base {
    display:flex !important;
    width:100%;
    align-items:center;
    justify-content:center;
}
.hero .btn .btn__face--hover,
.section-cta > .btn .btn__face--hover { display:none !important; }
.hero .btn .btn__label,
.section-cta > .btn .btn__label {
    width:100%;
    text-align:center;
    white-space:nowrap;
}
.hero .btn .btn__icon,
.section-cta > .btn .btn__icon {
    position:absolute !important;
    z-index:2;
    top:50%;
    right:16px;
    margin:0;
    transform:translateY(-50%);
}
.hero .btn:is(:hover,:focus-visible) .btn__icon,
.section-cta > .btn:is(:hover,:focus-visible) .btn__icon {
    transform:translate(4px,-50%) !important;
}

/* More room for ordinary CTA labels without altering the 1400px band or its
   established height. The middle copy column absorbs the extra width. */
@media (min-width:1101px) {
    .about-reference__cta,
    .services-reference__cta,
    .process-reference__cta,
    .contact-project-reference__cta-band,
    .section-cta {
        grid-template-columns:240px minmax(0,1fr) 360px !important;
    }
    .reference-projects__cta-band,
    .advantages-reference__cta {
        grid-template-columns:240px minmax(0,1fr) 360px !important;
    }
    .reviews-reference__cta {
        grid-template-columns:210px minmax(0,1fr) 360px !important;
    }
    .partners-productworlds__cta {
        grid-template-columns:220px minmax(0,1fr) 360px !important;
    }
}

@media (max-width:760px) {
    :where(
        .hero-reference__button,
        .about-reference__cta-button,
        .services-reference__cta-button,
        .reference-projects__button,
        .process-reference__cta-button,
        .advantages-reference__cta-button,
        .reviews-reference__cta-button,
        .partners-productworlds__cta-button,
        .contact-project-reference__cta-button,
        .hero .btn,
        .section-cta > .btn
    ) {
        padding-left:42px !important;
        padding-right:42px !important;
    }
    :where(
        .hero-reference__button,
        .about-reference__cta-button,
        .services-reference__cta-button,
        .reference-projects__button,
        .process-reference__cta-button,
        .advantages-reference__cta-button,
        .reviews-reference__cta-button,
        .partners-productworlds__cta-button,
        .contact-project-reference__cta-button
    ) > :first-child,
    .hero .btn .btn__label,
    .section-cta > .btn .btn__label {
        white-space:normal;
    }
}

/* =========================================================
   Mobile section CTA card
   Desktop keeps the established horizontal band. On compact screens every
   shared CTA becomes the same two-row component from the mobile reference:
   bolt + copy, followed by one full-width action.
   ========================================================= */
@media (max-width:680px) {
    :where(
        .section-cta,
        .about-reference__cta,
        .services-reference__cta,
        .reference-projects__cta-band,
        .process-reference__cta,
        .advantages-reference__cta,
        .reviews-reference__cta,
        .partners-productworlds__cta,
        .contact-project-reference__cta,
        .contact-project-reference__cta-band,
        .about-page-reference__cta
    ) {
        width:100% !important;
        min-height:0 !important;
        display:grid !important;
        grid-template-columns:42px minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        grid-template-areas:
            "mark copy"
            "button button" !important;
        align-items:center !important;
        gap:14px 14px !important;
        padding:16px !important;
        overflow:hidden !important;
        border:0 !important;
        border-radius:var(--radius-ui) !important;
        clip-path:none !important;
        background:#0b0e0f !important;
        background-image:none !important;
        box-shadow:0 12px 26px rgba(0,0,0,.16) !important;
        color:#f7f6f1 !important;
        transform:none;
    }

    :where(
        .section-cta__mark,
        .about-reference__cta-mark,
        .services-reference__cta-mark,
        .reference-projects__cta-mark,
        .process-reference__cta-mark,
        .advantages-reference__cta-symbol,
        .reviews-reference__cta-mark,
        .partners-productworlds__cta-mark,
        .contact-project-reference__cta-mark,
        .about-page-reference__cta-mark
    ) {
        position:relative !important;
        inset:auto !important;
        grid-area:mark !important;
        align-self:center !important;
        display:grid !important;
        width:42px !important;
        min-width:42px !important;
        height:46px !important;
        place-items:center !important;
        padding:0 !important;
        overflow:visible !important;
        border:0 !important;
        clip-path:none !important;
        background:transparent !important;
        transform:none !important;
    }

    :where(
        .section-cta__mark,
        .about-reference__cta-mark,
        .services-reference__cta-mark,
        .reference-projects__cta-mark,
        .process-reference__cta-mark,
        .advantages-reference__cta-symbol,
        .reviews-reference__cta-mark,
        .partners-productworlds__cta-mark,
        .contact-project-reference__cta-mark
    )::before,
    :where(
        .section-cta__mark,
        .about-reference__cta-mark,
        .services-reference__cta-mark,
        .reference-projects__cta-mark,
        .process-reference__cta-mark,
        .advantages-reference__cta-symbol,
        .reviews-reference__cta-mark,
        .partners-productworlds__cta-mark,
        .contact-project-reference__cta-mark
    )::after {
        content:none !important;
        display:none !important;
    }

    .about-page-reference__cta-mark::after{
        content:none !important;
        display:none !important;
    }
    .about-page-reference__cta-mark::before{
        content:"" !important;
        display:block !important;
        width:28px !important;
        height:34px !important;
        background:var(--section-cta-accent,#f4b000) !important;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='384.533,15 288.133,207.8 368.467,207.8 127.467,497 207.8,239.933 127.467,239.933 239.933,15' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat !important;
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='384.533,15 288.133,207.8 368.467,207.8 127.467,497 207.8,239.933 127.467,239.933 239.933,15' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat !important;
    }

    :where(
        .section-cta__mark-icon,
        .about-reference__cta-icon,
        .services-reference__cta-mark .icon,
        .reference-projects__cta-zap,
        .process-reference__cta-icon,
        .advantages-reference__cta-zap,
        .reviews-reference__cta-zap,
        .partners-productworlds__cta-zap,
        .contact-project-reference__cta-icon
    ) {
        position:static !important;
        inset:auto !important;
        display:block !important;
        width:28px !important;
        height:34px !important;
        margin:0 !important;
        background:var(--section-cta-accent,#f4b000) !important;
        color:transparent !important;
        transform:none !important;
    }

    :where(
        .section-cta > p,
        .about-reference__cta-copy,
        .services-reference__cta-copy,
        .reference-projects__cta-band > p,
        .process-reference__cta-copy,
        .advantages-reference__cta > p,
        .reviews-reference__cta > p,
        .partners-productworlds__cta > p,
        .contact-project-reference__cta-band > p,
        .about-page-reference__cta-copy
    ) {
        grid-area:copy !important;
        align-self:center !important;
        display:block !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        color:#f7f6f1 !important;
        font-size:15px !important;
        font-weight:650 !important;
        line-height:1.42 !important;
        text-align:left !important;
    }
    .services-reference__cta-copy > :where(strong,p){
        display:block;
        margin:0;
        color:inherit;
        font:inherit;
    }
    /* The second sentence repeats the same mobile action intent and made this
       otherwise compact card substantially taller than every sibling CTA. */
    .services-reference__cta-copy > p{display:none}

    .contact-project-reference__cta-copy{
        grid-area:mark / mark / copy / copy !important;
        display:grid !important;
        grid-template-columns:42px minmax(0,1fr) !important;
        align-items:center !important;
        gap:14px !important;
        margin:0 !important;
        padding:0 !important;
        background:none !important;
    }
    .contact-project-reference__cta-copy > p{
        margin:0 !important;
        color:#f7f6f1 !important;
        font-size:15px !important;
        font-weight:650 !important;
        line-height:1.42 !important;
        text-align:left !important;
    }

    .advantages-reference__cta-divider{
        display:none !important;
    }

    :where(
        .section-cta > .btn,
        .about-reference__cta-button,
        .services-reference__cta-button,
        .reference-projects__button,
        .process-reference__cta-button,
        .advantages-reference__cta-button,
        .reviews-reference__cta-button,
        .partners-productworlds__cta-button,
        .contact-project-reference__cta-button,
        .about-page-reference__cta-button
    ) {
        position:relative !important;
        inset:auto !important;
        grid-area:button !important;
        align-self:auto !important;
        display:flex !important;
        width:100% !important;
        min-width:0 !important;
        min-height:50px !important;
        margin:0 !important;
        padding:8px 42px !important;
        align-items:center !important;
        justify-content:center !important;
        border:0 !important;
        border-radius:var(--radius-ui) !important;
        clip-path:none !important;
        background:var(--section-cta-accent,#f4b000) !important;
        background-image:none !important;
        color:#111516 !important;
        font-size:15px !important;
        font-weight:760 !important;
        line-height:1.2 !important;
        text-align:center !important;
    }
    :where(
        .section-cta > .btn,
        .about-reference__cta-button,
        .services-reference__cta-button,
        .reference-projects__button,
        .process-reference__cta-button,
        .advantages-reference__cta-button,
        .reviews-reference__cta-button,
        .partners-productworlds__cta-button,
        .contact-project-reference__cta-button,
        .about-page-reference__cta-button
    ) :where(svg,[class*="arrow"],[class*="icon"]):last-child {
        position:absolute !important;
        top:50% !important;
        right:16px !important;
        width:15px !important;
        height:15px !important;
        margin:0 !important;
        transform:translateY(-50%) !important;
    }
}