:root{
    --front-header-width:min(1480px,calc(100vw - 48px));
    --front-content-width:min(1480px,calc(100vw - 48px));
    --front-radius:clamp(16px,1.25vw,22px);
    --front-hero-title:clamp(48px,3.4vw,64px);
    --front-section-title:clamp(30px,2.3vw,43px);
    --front-copy:clamp(14px,1.05vw,17px);
}

.site-header,
.header-inner{
    height:clamp(92px,6.25vw,108px);
}

.header-inner{
    width:var(--front-header-width)!important;
    max-width:none!important;
    margin-inline:auto;
    display:flex;
    align-items:center;
    gap:0!important;
}

.header-inner .brand-lockup,
.header-inner .brand-lockup img{
    width:clamp(170px,12vw,220px);
    height:auto;
}

.header-inner .brand-lockup{
    flex-basis:clamp(170px,12vw,220px);
}

.header-inner .desktop-nav{
    margin-left:clamp(28px,3vw,52px);
    display:flex;
    flex:1;
    align-items:center;
    justify-content:center;
    gap:clamp(16px,1.8vw,30px);
    font-size:clamp(13px,.95vw,16px);
}

.header-inner .desktop-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding-block:8px;
    color:#FFFFFF;
    white-space:nowrap;
    text-decoration:none;
}

.header-inner .header-tools{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:clamp(18px,1.5vw,26px);
}

.header-inner .language-switch{
    font-size:clamp(13px,.9vw,16px);
}

.header-inner .button-header{
    min-height:clamp(42px,3vw,52px);
    padding-inline:clamp(18px,1.5vw,28px);
    border:1px solid #94B422;
    border-radius:10px;
    background:#94B422;
    color:#FFFFFF;
    font-size:clamp(13px,.95vw,16px);
    font-weight:700;
    line-height:1.4;
}

.page-shell,
main .site-container{
    width:var(--front-content-width);
    max-width:none;
    margin-inline:auto;
}

.footer-inner{
    width:var(--front-content-width)!important;
    max-width:none!important;
    margin-inline:auto;
}

/* Die sichtbaren Footer-Bereiche liegen auf Desktop und Ultrawide spiegelbildlich
   zur gemeinsamen Mittelachse von Header, Inhalt und Newsletter. */
@media(min-width:1101px){
    .footer-inner{
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        column-gap:clamp(48px,4vw,76px)!important;
    }

    .footer-inner>.footer-brand,
    .footer-inner>nav{
        min-width:0;
    }
}

/* Einheitliche Content-Skala nach der freigegebenen Home-Karte. */
.bioscan-hero-card{
    min-height:0!important;
    aspect-ratio:816/350;
    border-radius:var(--front-radius)!important;
}

.bioscan-hero-copy{
    padding:clamp(42px,4.1vw,65px)!important;
}

.bioscan-hero-copy h1{
    max-width:560px!important;
    font-size:var(--front-hero-title)!important;
    line-height:1.02!important;
}

.bioscan-hero-copy>p{
    margin:clamp(18px,1.55vw,24px) 0!important;
    font-size:var(--front-copy)!important;
    line-height:1.45;
}

.bioscan-card-grid,
.bioscan-process-card,
.bioscan-knowledge-card,
.bioscan-closing-card{
    border-radius:var(--front-radius)!important;
}

.bioscan-feature{
    min-height:230px!important;
    padding-block:32px!important;
    border-radius:var(--front-radius)!important;
}

.bioscan-icon{
    width:72px!important;
    height:72px!important;
    margin-bottom:16px!important;
}

.bioscan-icon svg{
    width:40px!important;
    height:40px!important;
}

.bioscan-feature h2,
.bioscan-timeline h3{
    font-size:clamp(19px,1.35vw,23px)!important;
}

.bioscan-feature p,
.bioscan-timeline p,
.bioscan-knowledge-card p,
.bioscan-closing-copy>p{
    font-size:var(--front-copy)!important;
}

.bioscan-process-card{
    min-height:440px!important;
}

.bioscan-process-copy>h2,
.bioscan-knowledge-card h2,
.bioscan-closing-copy h2{
    font-size:var(--front-section-title)!important;
}

.bioscan-knowledge-card{
    min-height:160px!important;
}

.bioscan-closing-card{
    min-height:250px!important;
}

/* Bildseitige Maske verhindert bei hellen Platzhaltern jede sichtbare Ansatzkante. */
.nutrition-hero-card .bioscan-hero-image{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 5%,#78715E 62%,#78715E 100%);
    mask-image:linear-gradient(90deg,transparent 0%,transparent 5%,#78715E 62%,#78715E 100%);
}

.nutrition-hero-card::after{
    left:20%!important;
    width:52%!important;
    background:linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 18%,transparent 100%)!important;
}

.content-facts{
    margin:14px 0 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px 24px;
    list-style:none;
    font-size:var(--front-copy);
}

.content-facts li::before{
    content:"✓";
    margin-right:8px;
    color:#94B422;
    font-weight:700;
}

/* Die freigegebene BioScan-Hero-Typografie und Einrückung gelten auch für Home. */
@media(min-width:821px){
    .hero-card .hero-copy{
        padding:clamp(42px,4.1vw,65px)!important;
    }

    .hero-card .hero-copy h1{
        margin-bottom:clamp(18px,1.55vw,24px)!important;
        font-size:var(--front-hero-title)!important;
        line-height:1.02!important;
    }

    .hero-card .hero-copy p{
        margin-bottom:clamp(18px,1.55vw,24px)!important;
        font-size:var(--front-copy)!important;
        line-height:1.45!important;
    }

    .hero-card + .services-card{
        margin-top:clamp(48px,3.25cqw,58px)!important;
    }
}

@media(max-width:820px){
    :root{
        --front-header-width:calc(100vw - 24px);
        --front-content-width:calc(100vw - 24px);
    }

    .site-header,
    .header-inner{
        height:72px;
    }

    .bioscan-hero-card{
        aspect-ratio:auto;
    }

    .nutrition-hero-card .bioscan-hero-image{
        -webkit-mask-image:linear-gradient(180deg,transparent 0%,#78715E 38%,#78715E 100%);
        mask-image:linear-gradient(180deg,transparent 0%,#78715E 38%,#78715E 100%);
    }

    .content-facts{grid-template-columns:1fr}
}

@media(max-width:540px){
    :root{
        --front-content-width:calc(100vw - 20px);
    }

    .header-inner .brand-lockup,
    .header-inner .brand-lockup img{
        width:112px;
    }

    .header-inner .brand-lockup{
        flex-basis:112px;
    }
}

/* Freigegebene Tablet-/Breitformat-Mobilansicht: Bild kompakt neben dem Text. */
@media(min-width:480px) and (max-width:820px){
    .bioscan-hero-card{
        min-height:360px!important;
        grid-template-columns:60% 40%!important;
    }

    .bioscan-hero-copy{
        align-self:stretch;
        padding:28px 26px!important;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    .bioscan-hero-copy h1{
        font-size:clamp(30px,5.4vw,42px)!important;
    }

    .bioscan-hero-copy>p{
        font-size:13px!important;
        line-height:1.45;
    }

    .bioscan-hero-card::after{
        top:0!important;
        right:auto!important;
        bottom:0!important;
        left:50%!important;
        width:22%!important;
        height:auto!important;
        background:linear-gradient(90deg,#FFFFFF 0%,rgb(255 255 255 / 82%) 30%,transparent 100%)!important;
    }

    .bioscan-hero-image{
        position:relative!important;
        inset:auto!important;
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        aspect-ratio:auto!important;
        object-fit:cover;
    }
}

/* Der vollständige Desktop-Navigationssatz wird schon vor dem ersten Platzmangel
   durch das kompakte Menü ersetzt. Die spezifischen Selektoren überschreiben
   ältere Seitenregeln zuverlässig auf Startseite und Unterseiten. */
@media(max-width:1100px){
    .header-inner .desktop-nav{display:none!important}
    .header-inner .mobile-menu{display:block!important}
    .header-inner{min-width:0}
    .header-inner .header-tools{min-width:0;margin-left:auto}
}

/* Auch auf Ultrawide bleibt dieselbe 1480-Pixel-Mittelachse erhalten.
   Header, Inhaltskarten, Newsletter und Footer dürfen dort nicht auf eine
   zweite, breitere 1920-Pixel-Spur wechseln. */