/* Referenzgebundener Startseiten-Hero – abgeleitet aus der Nutzerreferenz. */
.page-index.home{
    --hero-reference-gold:#f4b000;
    --hero-reference-black:#080a0b;
    --hero-reference-paper:#f4f2ed;
    --hero-header-height:84px;
    background:var(--hero-reference-paper);
}

.site-header--reference,
.hero-reference{
    --hero-reference-gold:#f4b000;
    --hero-reference-black:#080a0b;
    --hero-reference-paper:#f4f2ed;
    --hero-header-height:84px;
}

.site-header--reference.site-header--hero{
    position:absolute;
    inset:0 0 auto;
    z-index:120;
    width:100%;
    max-width:none;
    overflow-x:clip;
    color:#fff;
    background:transparent;
}
.site-header--reference .header-main{
    color:#fff;
    background:#07090a;
}
.site-header--reference .header-container{
    width:min(calc(100% - 64px),1600px);
    margin-inline:auto;
    min-height:var(--hero-header-height);
    grid-template-columns:minmax(240px,300px) minmax(0,1fr) 218px;
    gap:36px;
    padding:5px 0;
}
.site-header--reference .brand{
    flex-basis:auto;
}
.site-header--reference .brand-logo{
    width:clamp(240px,16vw,300px);
    height:auto;
    padding:0;
}
.site-header--reference .nav-rail{
    justify-content:flex-end;
    gap:clamp(8px,1vw,18px);
    overflow:visible;
}
.site-header--reference .nav-link{
    min-height:40px;
    padding:6px 6px;
    color:#fff;
    font-family:"DM Sans",sans-serif;
    font-size:13px;
    font-weight:760;
    letter-spacing:.25px;
    text-transform:uppercase;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.site-header--reference .nav-link::after{
    right:6px;
    left:6px;
    bottom:2px;
    background:var(--hero-reference-gold);
}
.site-header--reference .nav-link:hover{
    color:var(--hero-reference-gold);
}
.site-header--reference .nav-link.is-active,
.site-header--reference .nav-service.is-active .nav-link,
.site-header--reference .nav-service-toggle[aria-expanded="true"]{
    min-height:46px;
    padding:0 18px;
    border:1px solid var(--hero-reference-gold)!important;
    background:var(--hero-reference-gold)!important;
    color:#090b0c!important;
    box-shadow:none!important;
    transform:none;
}
.site-header--reference .nav-link.is-active:hover,
.site-header--reference .nav-service.is-active .nav-link:hover,
.site-header--reference .nav-service-toggle[aria-expanded="true"]:hover{
    background:#ffc228!important;
    color:#090b0c!important;
}
.site-header--reference .nav-chevron{
    display:block;
    width:11px!important;
    height:11px!important;
    flex-basis:11px!important;
}
.site-header--reference .header-cta{
    width:218px;
    min-height:46px;
    padding:0 22px;
    justify-content:center;
    border:1px solid var(--hero-reference-gold);
    background:var(--hero-reference-gold);
    color:#090b0c;
    font-size:13px;
    text-transform:uppercase;
}
.site-header--reference .header-cta::before,
.site-header--reference .header-cta::after{
    display:none;
}
.site-header--reference .header-cta .btn__face--base{
    display:flex;
    align-items:center;
    justify-content:center;
}
.site-header--reference .header-cta .btn__face--hover,
.site-header--reference .header-cta .btn__icon{
    display:none;
}

.site-header--reference .submenu-shell{
    width:min(calc(100% - 64px),1600px);
    padding-inline:0;
}

.hero-reference{
    position:relative;
    isolation:isolate;
    width:100%;
    min-height:max(820px,var(--viewport-height,100dvh));
    overflow:hidden;
    background:var(--hero-reference-paper);
    color:#111315;
}
.hero-reference__media{
    position:absolute;
    z-index:-3;
    inset:var(--hero-header-height) -2px 0 35.5%;
    overflow:hidden;
    clip-path:polygon(32.5% 0,100% 0,100% 100%,0 100%,22% 63%,22% 20%);
    border-top:0;
    background:#080a0b;
}
.hero-reference__media picture,
.hero-reference__image{
    display:block;
    width:100%;
    height:100%;
}
.hero-reference__image{
    object-fit:cover;
    object-position:center;
    filter:none;
    transform:none;
}
.hero-reference__diagonal{
    position:absolute;
    z-index:1;
    top:calc(var(--hero-header-height) + 4px);
    right:-2px;
    bottom:0;
    left:35.5%;
    width:calc(64.5% + 2px);
    height:calc(100% - var(--hero-header-height) - 4px);
    overflow:visible;
    pointer-events:none;
}
.hero-reference__diagonal .hero-reference__line-base,
.hero-reference__topline .hero-reference__line-base{
    fill:none;
    stroke:var(--hero-reference-gold);
    vector-effect:non-scaling-stroke;
    stroke-linecap:square;
    stroke-linejoin:miter;
}
.hero-reference__diagonal .hero-reference__line-base{
    stroke-width:8;
    animation:hero-reference-outline-glow 8s ease-in-out 3.1s infinite both;
}
.hero-reference__topline .hero-reference__line-base{
    stroke-width:2;
}
.hero-reference__topline{
    position:absolute;
    z-index:2;
    top:0;
    left:calc(50% - 40px);
    width:180px;
    height:260px;
    overflow:visible;
    opacity:.78;
    pointer-events:none;
}
.hero-reference__inner{
    position:relative;
    z-index:3;
    width:min(calc(100% - 64px),1600px);
    margin-inline:auto;
    min-height:max(820px,var(--viewport-height,100dvh));
    display:flex;
    align-items:center;
    padding:144px 0 82px;
}
.hero-reference__copy{
    width:min(750px,46vw);
    transform:translateY(-32px);
}
.hero-reference__title{
    max-width:820px;
    margin:0 0 28px;
    font-family:"DM Sans",sans-serif;
    font-size:68px;
    font-weight:900;
    line-height:1.04;
    letter-spacing:-2.5px;
    text-transform:none;
    text-wrap:balance;
    color:#0b0d0e;
}
.hero-reference__title span,
.hero-reference__title strong{
    display:block;
}
.hero-reference__title strong{
    color:var(--hero-reference-gold);
    font-weight:900;
}
.hero-reference__lead{
    width:min(610px,100%);
    margin:0 0 34px;
    color:#1c1f20;
    font-family:"DM Sans",sans-serif;
    font-size:20px;
    font-weight:470;
    line-height:1.5;
    letter-spacing:0;
}
.hero-reference__benefits{
    width:min(660px,100%);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    list-style:none;
    margin:0 0 32px;
    padding:13px 10px;
    overflow:hidden;
    border:1px solid rgba(8,10,11,.18);
    border-radius:var(--radius-ui);
    background:linear-gradient(135deg,#171918 0%,#0b0d0e 100%);
    box-shadow:0 14px 32px rgba(20,21,20,.16);
}
.hero-reference__benefits li{
    min-width:0;
    min-height:102px;
    display:grid;
    grid-template-rows:40px minmax(42px,auto);
    align-content:center;
    justify-items:center;
    row-gap:6px;
    padding:0 24px;
    color:#f1f1ed;
    font-family:"DM Sans",sans-serif;
    font-size:16px;
    font-weight:540;
    line-height:1.28;
    text-align:center;
}
.hero-reference__benefits li>span:last-child{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hero-reference__benefits li+li{
    border-left:1px solid var(--hero-reference-gold);
}
.hero-reference__benefit-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    color:var(--hero-reference-gold);
}
.hero-reference__benefit-icon .icon{
    width:34px;
    height:34px;
}
.hero-reference__benefit-mask{
    display:block;
    width:34px;
    height:34px;
    background:var(--hero-reference-gold);
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-size:contain;
}
.hero-reference__cta-copy{
    max-width:620px;
    margin:0 0 24px;
    padding-top:50px;
    color:#17191a;
    font-size:18px;
    font-weight:480;
    line-height:1.55;
}
.hero-reference__actions{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}
.hero-reference__button{
    width:285px;
    min-height:50px;
    position:relative;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:6px 22px;
    border:1px solid var(--hero-reference-gold);
    color:#111315;
    font-family:Poppins,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    overflow:hidden;
    border-radius:var(--radius-ui);
    transition:transform .2s ease,background-color .2s ease,color .2s ease;
}
.hero-reference__button::after{
    content:"";
    position:absolute;
    z-index:1;
    top:-60%;
    bottom:-60%;
    left:-55%;
    width:38%;
    pointer-events:none;
    opacity:0;
    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%);
    filter:blur(4px);
    transform:translate3d(-220%,0,0) skewX(-18deg);
    mix-blend-mode:screen;
}
.hero-reference__button > span,
.hero-reference__button > .icon{
    position:relative;
    z-index:2;
}
.hero-reference__button .icon{
    width:18px;
    height:18px;
    flex:0 0 18px;
}
.hero-reference__button--primary{
    background:var(--hero-reference-gold);
    color:#090b0c;
}
.hero-reference__button--secondary{
    border-color:#111315;
    background:#111315;
    color:#f8f7f3;
}
.hero-reference__button:hover{
    transform:translateY(-2px);
}
.hero-reference__button:hover::after{
    animation:brand-button-light-sweep 1.2s cubic-bezier(.35,0,.2,1) 1;
}
.hero-reference__button--primary:hover{
    background:#ffc228;
}
.hero-reference__button--secondary:hover{
    background:var(--hero-reference-gold);
    color:#080a0b;
}
@keyframes hero-reference-outline-glow{
    0%,3%,28%,100%{
        stroke:var(--hero-reference-gold);
        filter:drop-shadow(0 0 0 rgba(244,176,0,0));
    }
    15%{
        stroke:#fff6c9;
        filter:drop-shadow(0 0 7px rgba(255,248,218,.95)) drop-shadow(0 0 18px rgba(244,176,0,.9));
    }
}
@media (max-width:1280px){
    .site-header--reference .header-container{
        grid-template-columns:minmax(250px,300px) minmax(0,1fr);
    }
    .site-header--reference .brand-logo{width:min(285px,25vw)}
    .site-header--reference .header-cta{
        display:none;
    }
    .hero-reference__copy{
        width:min(650px,51vw);
    }
    .hero-reference__title{
        font-size:60px;
    }
    .hero-reference__benefits li{
        padding-inline:16px;
        font-size:15px;
    }
    .hero-reference__button{
        width:250px;
        padding:6px 18px;
        font-size:16px;
    }
}

@media (max-width:1100px){
    .hero-reference{
        min-height:auto;
        display:flex;
        flex-direction:column;
        padding-top:78px;
    }
    .hero-reference__inner{
        order:1;
        width:min(calc(100% - 56px),1600px);
        min-height:auto;
        padding:82px 0 58px;
    }
    .hero-reference__copy{
        width:100%;
        max-width:820px;
        transform:none;
    }
    .hero-reference__media{
        position:relative;
        z-index:0;
        inset:auto;
        order:2;
        width:100%;
        height:clamp(430px,64vw,650px);
        clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);
        border-top:8px solid var(--hero-reference-gold);
    }
    .hero-reference__image{
        object-position:28% center;
        filter:none;
    }
    .hero-reference__diagonal,
    .hero-reference__topline{
        display:none;
    }
    .hero-reference__title{
        max-width:820px;
        font-size:52px;
    }
    .hero-reference__lead,
    .hero-reference__benefits{
        max-width:760px;
    }
}

@media (max-width:900px){
    .site-header--reference.site-header--hero{
        position:absolute;
    }
    .site-header--reference .header-main{
        background:rgba(5,7,8,.95);
    }
    .site-header--reference .header-container{
        width:100%;
        min-height:72px;
        padding:6px 22px;
    }
    .site-header--reference .brand-logo{
        width:180px;
        height:auto;
    }
    .site-header--reference .nav-toggle{
        border-color:rgba(255,255,255,.3);
        color:#fff;
    }
    .site-header--reference .primary-nav{
        background:#090b0c;
        color:#fff;
    }
    .site-header--reference .nav-rail{
        justify-content:flex-start;
    }
    .site-header--reference .service-submenu{
        top:72px;
    }
    /* Die zentrale Header-Geometrie gewinnt auch gegen ältere,
       seitenspezifische Hero-Header-Regeln der Leistungsseiten. */
    body.service-page .site-header--reference .header-main{
        background:rgba(5,7,8,.95);
    }
    body.service-page .site-header--reference .header-container{
        width:100%;
        min-height:72px;
        padding:6px 22px;
    }
    body.service-page .site-header--reference .brand-logo{
        width:180px;
        height:auto;
    }
    .hero-reference{
        padding-top:72px;
    }
    .hero-reference__media{
        height:clamp(330px,58vw,510px);
    }
    .hero-reference__image{
        object-position:28% center;
        filter:none;
    }
    .hero-reference__inner{
        width:calc(100% - 44px);
        padding:74px 0 54px;
    }
    .hero-reference__copy{
        width:100%;
    }
    .hero-reference__title{
        max-width:760px;
        font-size:48px;
    }
    .hero-reference__lead{
        max-width:730px;
        font-size:19px;
    }
    .hero-reference__benefits{
        max-width:760px;
    }
    .hero-reference__actions{
        gap:14px;
    }
    .hero-reference__button{
        width:min(290px,100%);
    }
}

@media (max-width:620px){
    .hero-reference__inner{
        padding-top:56px;
        padding-bottom:42px;
    }
    .hero-reference__title{
        margin-bottom:22px;
        font-size:38px;
        line-height:1.02;
        letter-spacing:-1.7px;
    }
    .hero-reference__lead{
        margin-bottom:30px;
        font-size:19px;
        line-height:1.48;
    }
    .hero-reference__benefits{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0;
        margin-bottom:32px;
        padding:8px;
    }
    .hero-reference__benefits li,
    .hero-reference__benefits li+li{
        min-height:94px;
        grid-template-rows:32px minmax(40px,auto);
        align-content:center;
        row-gap:5px;
        padding:8px 14px;
        border:0;
        font-size:15px;
    }
    .hero-reference__benefits li>span:last-child{
        min-height:40px;
    }
    .hero-reference__benefits li:nth-child(even){
        border-left:1px solid var(--hero-reference-gold);
    }
    .hero-reference__benefits li:nth-child(n+3){
        border-top:1px solid var(--hero-reference-gold);
    }
    .hero-reference__benefit-icon{
        width:32px;
        height:32px;
    }
    .hero-reference__benefit-icon .icon,
    .hero-reference__benefit-mask{
        width:28px;
        height:28px;
    }
    .hero-reference__actions{
        display:grid;
        grid-template-columns:1fr;
    }
    .hero-reference__button{
        width:100%;
        min-height:52px;
        padding:6px 22px;
        font-size:16px;
    }
    .hero-reference__media{
        height:430px;
    }
}

/* =========================================================
   Independent hero entrance
   The hero deliberately does not participate in the generic content-section
   reveal. Only static wrappers receive motion so the image mask, button hover
   transforms and the animated outline keep their own transform ownership.
   ========================================================= */
@keyframes hero-reference-media-enter{
    from{opacity:0;translate:0 14px;scale:.985}
    to{opacity:1;translate:0 0;scale:1}
}
@keyframes hero-reference-image-zoom-enter{
    from{transform:scale(1.055)}
    to{transform:scale(1)}
}
@keyframes hero-reference-content-enter{
    from{opacity:0;translate:0 18px}
    to{opacity:1;translate:0 0}
}

.hero-reference__media picture{
    animation:hero-reference-media-enter .72s cubic-bezier(.22,.75,.24,1) .04s both;
}
.hero-reference__image{
    transform-origin:center center;
    animation:hero-reference-image-zoom-enter 1.05s cubic-bezier(.22,.75,.24,1) .04s both;
}
.hero-reference__title,
.hero-reference__lead,
.hero-reference__benefits li,
.hero-reference__cta-copy,
.hero-reference__button{
    animation:hero-reference-content-enter .56s cubic-bezier(.22,.75,.24,1) both;
}
.hero-reference__title{animation-delay:.18s}
.hero-reference__lead{animation-delay:.27s}
.hero-reference__benefits li:nth-child(1){animation-delay:.35s}
.hero-reference__benefits li:nth-child(2){animation-delay:.40s}
.hero-reference__benefits li:nth-child(3){animation-delay:.45s}
.hero-reference__benefits li:nth-child(4){animation-delay:.50s}
.hero-reference__cta-copy{animation-delay:.57s}
.hero-reference__button:nth-child(1){animation-delay:.64s}
.hero-reference__button:nth-child(2){animation-delay:.70s}

/* Mobile reference composition: image first, content second. */
@media (max-width:680px){
    .hero-reference{
        padding-top:72px;
    }
    .hero-reference__media{
        order:1;
        isolation:isolate;
        height:330px;
        overflow:visible;
        clip-path:none;
        border-top-width:0;
        background:transparent;
    }
    .hero-reference__media::after{
        content:"";
        position:absolute;
        z-index:0;
        inset:0;
        clip-path:polygon(0 0,100% 0,100% 100%,96% 97%,4% 97%,0 100%);
        background:#f4b000;
        transform:translateY(4px);
        pointer-events:none;
    }
    .hero-reference__media picture{
        position:relative;
        z-index:1;
        clip-path:polygon(0 0,100% 0,100% 100%,96% 97%,4% 97%,0 100%);
    }
    .hero-reference__image,
    .hero-reference--service .hero-reference__image{
        object-position:center;
    }
    .hero-reference__inner{
        order:2;
        width:calc(100% - 40px);
        padding:48px 0 56px;
    }
    .hero-reference__copy,
    .hero-reference--service .hero-reference__copy{
        width:100%;
        max-width:none;
        margin-inline:auto;
        text-align:center;
    }
    .hero-reference__title,
    .hero-reference--service .hero-reference__title{
        max-width:360px;
        margin-inline:auto;
        margin-bottom:22px;
        font-size:38px;
        line-height:1.04;
        letter-spacing:-1.6px;
        text-align:center;
    }
    .hero-reference__lead,
    .hero-reference--service .hero-reference__lead{
        width:100%;
        max-width:360px;
        margin:0 auto 30px;
        font-size:18px;
        line-height:1.48;
        text-align:center;
    }
    .hero-reference__benefits,
    .hero-reference--service .hero-reference__benefits{
        width:100%;
        max-width:360px;
        margin:0 auto 30px;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .hero-reference__cta-copy,
    .hero-reference--service .hero-reference__cta-copy{
        max-width:360px;
        margin:0 auto 22px;
        padding-top:28px;
        text-align:center;
    }
    .hero-reference__actions{
        width:100%;
        max-width:360px;
        margin-inline:auto;
        display:grid;
        grid-template-columns:1fr;
        justify-items:center;
        gap:12px;
    }
    .hero-reference__button{
        width:100%;
        min-height:52px;
    }
}

@media (prefers-reduced-motion:reduce){
    .hero-reference__image{
        animation:none;
        transform:none;
    }
}

/* =========================================================
   MOBILE HEADER / NAVIGATION
   Eigenstaendige vertikale Navigation statt abgeschnittener
   Desktop-Leiste. Ausschliesslich unterhalb von 900 px aktiv.
   ========================================================= */
@media (max-width:900px){
    .site-header--reference{
        --mobile-menu-edge:14px;
        --mobile-header-height:70px;
        --mobile-menu-gold:#f4b000;
        --mobile-menu-ink:#080b0c;
    }

    .site-header--reference .header-main,
    body.service-page .site-header--reference.site-header--hero .header-main{
        position:relative;
        z-index:120;
        background:linear-gradient(118deg,#111516 0%,#080a0b 66%,#050607 100%) !important;
        border-bottom:1px solid rgba(244,176,0,.34);
        box-shadow:0 10px 28px rgba(0,0,0,.18);
    }

    .site-header--reference .header-container,
    body.service-page .site-header--reference.site-header--hero .header-container{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 44px !important;
        align-items:center;
        gap:14px !important;
        width:100% !important;
        min-height:var(--mobile-header-height) !important;
        margin:0 !important;
        padding:6px 20px !important;
    }

    .site-header--reference .brand,
    body.service-page .site-header--reference.site-header--hero .brand{
        width:min(164px,calc(100vw - 94px)) !important;
        margin:0 !important;
    }

    .site-header--reference .brand-logo,
    body.service-page .site-header--reference.site-header--hero .brand-logo{
        width:min(164px,calc(100vw - 94px)) !important;
        max-height:52px;
    }

    .site-header--reference .nav-toggle{
        display:grid;
        place-items:center;
        width:42px;
        height:42px;
        padding:0;
        border:1px solid rgba(255,255,255,.24);
        border-radius:3px !important;
        background:rgba(255,255,255,.025);
        color:#fff;
        transition:background-color .2s ease,border-color .2s ease,color .2s ease;
    }

    .site-header--reference .nav-toggle:hover,
    .site-header--reference .nav-toggle[aria-expanded="true"]{
        border-color:var(--mobile-menu-gold);
        background:var(--mobile-menu-gold);
        color:var(--mobile-menu-ink);
    }

    .site-header--reference .nav-toggle svg{
        width:20px;
        height:20px;
    }

    .site-header--reference .primary-nav,
    body.service-page .site-header--reference.site-header--hero .primary-nav{
        position:absolute !important;
        z-index:118;
        top:var(--mobile-header-height) !important;
        right:var(--mobile-menu-edge) !important;
        left:var(--mobile-menu-edge) !important;
        width:auto !important;
        max-height:calc(100dvh - var(--mobile-header-height) - var(--mobile-menu-edge));
        padding:12px !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        border:1px solid rgba(244,176,0,.34);
        border-top:0;
        border-radius:0 0 3px 3px;
        background:
            radial-gradient(circle at 18% 10%,rgba(255,255,255,.05),transparent 30%),
            linear-gradient(118deg,#202324 0%,#101314 56%,#080a0b 100%) !important;
        color:#fff;
        box-shadow:0 28px 56px rgba(0,0,0,.42);
    }

    .js .site-header--reference .primary-nav{
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px) scale(.985);
        transform-origin:top center;
        transition:opacity .2s ease,transform .2s ease,visibility .2s;
    }

    .js .site-header--reference .primary-nav.is-open{
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .site-header--reference .nav-rail,
    body.service-page .site-header--reference.site-header--hero .nav-rail{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:6px !important;
        width:100%;
        overflow:visible !important;
        white-space:normal !important;
    }

    .site-header--reference .nav-service{
        display:block;
        width:100%;
    }

    .site-header--reference .primary-nav .nav-link,
    body.service-page .site-header--reference.site-header--hero .primary-nav .nav-link{
        display:flex !important;
        flex:0 0 auto !important;
        align-items:center;
        justify-content:space-between !important;
        gap:12px;
        width:100% !important;
        min-height:48px !important;
        padding:9px 15px !important;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.12) !important;
        border-radius:3px !important;
        background:rgba(255,255,255,.025) !important;
        color:#f7f7f3 !important;
        box-shadow:none !important;
        font-family:"DM Sans",Poppins,Arial,sans-serif;
        font-size:13px !important;
        font-weight:760;
        line-height:1.2;
        letter-spacing:.38px;
        text-align:left;
        text-transform:uppercase;
        white-space:normal !important;
        transform:none !important;
    }

    .site-header--reference .primary-nav .nav-link::after,
    body.service-page .site-header--reference.site-header--hero .primary-nav .nav-link::after{
        display:none !important;
    }

    .site-header--reference .primary-nav .nav-link:hover,
    .site-header--reference .primary-nav .nav-link:focus-visible{
        border-color:rgba(244,176,0,.7) !important;
        background:rgba(244,176,0,.1) !important;
        color:#fff !important;
    }

    .site-header--reference .primary-nav .nav-link.is-active,
    .site-header--reference .primary-nav .nav-service.is-active .nav-link,
    .site-header--reference .primary-nav .nav-service-toggle[aria-expanded="true"],
    body.service-page .site-header--reference.site-header--hero .primary-nav .nav-link.is-active,
    body.service-page .site-header--reference.site-header--hero .primary-nav .nav-service.is-active .nav-link,
    body.service-page .site-header--reference.site-header--hero .primary-nav .nav-service-toggle[aria-expanded="true"]{
        border-color:var(--mobile-menu-gold) !important;
        background:var(--mobile-menu-gold) !important;
        color:var(--mobile-menu-ink) !important;
    }

    .site-header--reference .primary-nav .nav-rail>a:last-child:not(.is-active){
        border-color:var(--mobile-menu-gold) !important;
        background:transparent !important;
        color:var(--mobile-menu-gold) !important;
    }

    .site-header--reference .primary-nav .nav-chevron,
    body.service-page .site-header--reference.site-header--hero .primary-nav .nav-chevron{
        display:block;
        flex:0 0 12px !important;
        width:12px !important;
        height:12px !important;
        color:currentColor;
    }

    /* In der zweiten Ebene bleibt der Leistungen-Trigger als kompakte
       Rueckkehrzeile sichtbar; die restlichen Hauptlinks treten zurueck. */
    .site-header--reference:has(.service-submenu.is-open) .primary-nav .nav-rail>a{
        display:none !important;
    }

    .site-header--reference .service-submenu,
    body.service-page .site-header--reference.site-header--hero .service-submenu{
        position:fixed !important;
        z-index:117;
        top:calc(var(--mobile-header-height) + 67px) !important;
        right:var(--mobile-menu-edge) !important;
        bottom:var(--mobile-menu-edge) !important;
        left:var(--mobile-menu-edge) !important;
        width:auto;
        overflow:hidden;
        border:1px solid rgba(244,176,0,.34);
        border-radius:3px;
        background-color:#0b0d0e !important;
        background-image:
            radial-gradient(circle at 18% 8%,rgba(255,255,255,.05),transparent 28%),
            linear-gradient(118deg,#202324 0%,#101314 56%,#080a0b 100%) !important;
        color:#fff;
        box-shadow:0 28px 56px rgba(0,0,0,.42);
    }

    .site-header--reference .submenu-shell{
        display:block !important;
        width:100% !important;
        height:100%;
        margin:0;
        padding:10px !important;
    }

    .site-header--reference .submenu-intro{
        display:none;
    }

    .site-header--reference .submenu-links{
        display:grid !important;
        grid-template-columns:1fr !important;
        align-content:start;
        gap:7px !important;
        width:100%;
        height:100%;
        padding:0 2px 2px 0;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        scrollbar-color:var(--mobile-menu-gold) rgba(255,255,255,.08);
        scrollbar-width:thin;
    }

    .site-header--reference .submenu-links>a{
        display:grid;
        grid-template-columns:38px minmax(0,1fr) 16px !important;
        align-items:center;
        gap:11px;
        flex-basis:auto !important;
        width:100% !important;
        min-width:0 !important;
        min-height:66px !important;
        padding:9px 11px;
        border:1px solid rgba(255,255,255,.12);
        border-radius:3px !important;
        background:rgba(255,255,255,.025);
        color:#fff;
        transform:none;
    }

    .site-header--reference .submenu-links>a::before{
        content:none !important;
    }

    .site-header--reference .submenu-links>a:hover,
    .site-header--reference .submenu-links>a:focus-visible{
        border-color:var(--mobile-menu-gold);
        background:rgba(244,176,0,.1);
        transform:none;
    }

    .site-header--reference .submenu-icon{
        width:38px;
        height:38px;
        border-radius:3px;
        background:var(--mobile-menu-gold);
        color:var(--mobile-menu-ink);
    }

    .site-header--reference .submenu-icon svg{
        width:20px;
        height:20px;
    }

    .site-header--reference .submenu-links strong{
        margin-bottom:2px;
        font-size:14px;
        line-height:1.25;
    }

    .site-header--reference .submenu-links small{
        display:-webkit-box;
        overflow:hidden;
        color:#bdc2bd;
        font-size:11px;
        line-height:1.35;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    .site-header--reference .submenu-arrow{
        width:15px !important;
        height:15px !important;
        margin:0;
        color:var(--mobile-menu-gold);
    }

    html:not(.js) .site-header--reference .primary-nav,
    html:not(.js) .site-header--reference .service-submenu{
        position:relative !important;
        inset:auto !important;
        max-height:none;
        margin:0 var(--mobile-menu-edge) var(--mobile-menu-edge);
        opacity:1;
        visibility:visible;
        transform:none;
    }
}

@media (max-width:420px){
    .site-header--reference{
        --mobile-menu-edge:10px;
    }

    .site-header--reference .header-container,
    body.service-page .site-header--reference.site-header--hero .header-container{
        padding-inline:16px !important;
    }

    .site-header--reference .brand,
    .site-header--reference .brand-logo,
    body.service-page .site-header--reference.site-header--hero .brand,
    body.service-page .site-header--reference.site-header--hero .brand-logo{
        width:min(154px,calc(100vw - 90px)) !important;
    }
}