/* Hero and navigation only. Existing content sections retain their design. */
:root{--nav-height:clamp(3.5rem,7svh,4.75rem)}
html{scroll-padding-top:var(--nav-height)}
.statement{min-height:calc(100vh - var(--nav-height));min-height:calc(100svh - var(--nav-height));display:flex;flex-direction:column}
.masthead{padding-block:clamp(1.5rem,4svh,3rem)}
.branding-group{display:flex;align-items:center;gap:clamp(1.25rem,2.5vi,3rem);width:max-content;max-width:100%;padding-bottom:clamp(.75rem,1.5svh,1.25rem);border-bottom:1px solid #1e1e1d26}
.masthead-caption{font-size:clamp(.6rem,.78vi,.75rem);letter-spacing:.06em;line-height:1.45}
.statement-type{container-type:inline-size;flex:1;display:flex;align-items:center;padding-block:clamp(4rem,11svh,9rem) clamp(2rem,3svh,3rem)}
.statement h1{margin:0;width:100%;max-width:100%;font-family:var(--font-body);font-size:clamp(3rem,min(9vi,19svh,11cqw),11rem);font-weight:800;line-height:.93;letter-spacing:-.045em}
.headline-line{display:block;white-space:nowrap;letter-spacing:-.045em}
.headline-accent{color:var(--color-accent)}
.headline-mobile{display:none}
.sales-nav{position:sticky;top:0;z-index:30;background:#1e1e1d;color:#f5f2ee}
.sales-nav-inner{position:relative;display:flex;align-items:stretch;justify-content:space-between;min-height:var(--nav-height)}
.sales-nav .nav-home{display:flex;align-items:center;font-size:34px}
.js .sales-nav .nav-home{opacity:0;visibility:hidden;transition:opacity 360ms ease-in-out,visibility 0s linear 360ms}
.js .sales-nav.show-home .nav-home{opacity:1;visibility:visible;transition-delay:0s}
.sales-nav.nav-wide .sales-nav-inner{display:grid;grid-template-columns:minmax(6rem,15fr) minmax(min-content,85fr)}
.js .sales-nav:not(.nav-wide) .sales-links{display:none}
.js .sales-nav:not(.nav-wide) .nav-menu:not([hidden]){display:block}
.sales-nav.nav-wide .sales-links{width:100%;padding-left:clamp(.5rem,1.5vi,1.5rem)}
.sales-nav .brand-red{color:#f5f2ee}

.sales-links{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr)) clamp(.5rem,1.5vi,1.5rem) minmax(max-content,1fr)}
.sales-links>a{display:flex;align-items:center;justify-content:center;gap:1rem;white-space:nowrap;padding:.75rem .5rem;font-size:.9375rem;font-weight:600;letter-spacing:-.025em;transition:color 200ms ease-out,background-color 200ms ease-out}
.sales-links>a:not(.nav-cta){position:relative;color:#f5f2ee}
.sales-links>a:not(.nav-cta)::after{content:"";position:absolute;bottom:.5rem;left:50%;width:40%;height:2px;background:var(--color-accent);transform:translateX(-50%);opacity:0;transition:opacity 180ms ease-out}
.sales-links>a:not(.nav-cta):focus-visible::after{opacity:1}
.sales-links .nav-cta{grid-column:5;background:#1e1e1d;color:var(--color-accent);justify-content:center;gap:.75rem}
.sales-links .nav-cta:focus-visible{background:var(--color-accent);color:#f5f2ee}
.sales-nav a:focus-visible,.sales-nav button:focus-visible{outline:2px solid #f5f2ee;outline-offset:-5px}
.nav-menu{display:none;justify-self:end;align-self:stretch;border:0;background:none;color:inherit;padding-inline:1.25rem;font-weight:600}
.nav-dialog{width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--color-bg);color:var(--color-ink);overflow:auto}
.nav-dialog::backdrop{background:#1e1e1d}
.nav-dialog[open]{display:flex;flex-direction:column}
.dialog-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;background:#1e1e1d;color:#f5f2ee;padding:0 var(--gutter)}
.dialog-top .brand{display:flex;align-items:center;min-height:var(--nav-height);font-size:34px}
.dialog-top .brand-red{color:#f5f2ee}
.dialog-top :focus-visible{outline-color:#f5f2ee}
.nav-close{border:0;background:none;color:inherit;min-width:3rem;min-height:var(--nav-height);font-size:clamp(2rem,6vi,2.5rem);line-height:1}
.dialog-top .brand:hover .brand-red{color:#f5f2ee}.dialog-top .brand:hover .brand-l{color:var(--color-accent)}
.dialog-links{display:flex;flex-direction:column;flex:1;padding:0 var(--gutter) clamp(1rem,3svh,2rem)}
.dialog-links>a{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:1;border-top:1px solid #1e1e1d;padding-block:clamp(1.5rem,4svh,3rem);font-size:clamp(1.6875rem,7.1vi,4.5rem);overflow-wrap:anywhere;font-weight:700;line-height:1.1;letter-spacing:-.04em}
.dialog-links>a:first-child{border-top:0}
.dialog-links>a:last-child{color:var(--color-accent);justify-content:flex-start;gap:.6em}
.dialog-links .nav-cta>span{flex-shrink:0}
.dialog-links>a:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
.dialog-links .nav-cta:focus-visible{background:var(--color-accent);color:#f5f2ee}
.dialog-links .arrow-icon{width:1em;height:1em}
@media(prefers-reduced-motion:no-preference){
 .nav-dialog[open]{overflow-x:hidden}
 .nav-dialog[open] .dialog-links{animation:menu-enter 200ms ease-out both}
 @keyframes menu-enter{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
}
.navigation-open{position:fixed;inset-inline:0;overflow:hidden}
@media(prefers-reduced-motion:no-preference){.nav-cta>span{transition:transform 200ms ease-out}.nav-cta:focus-visible>span{transform:translate(3px,-3px)}}
html:not(.js) .sales-nav{position:static}
html:not(.js) .sales-nav-inner{flex-wrap:wrap}
html:not(.js) .sales-links{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
html:not(.js) .sales-links>a{white-space:normal}
@media(hover:hover) and (pointer:fine){
 .sales-links>a:not(.nav-cta):hover::after{opacity:1}
 .sales-links .nav-cta:hover,.dialog-links .nav-cta:hover{background:var(--color-accent);color:#f5f2ee}
 .dialog-links>a:not(.nav-cta):hover{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:.3em}
 .sales-nav .brand:hover .brand-red,.dialog-top .brand:hover .brand-red{color:var(--color-accent)}
 .sales-nav .brand:hover .brand-l,.dialog-top .brand:hover .brand-l{color:#f5f2ee}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.nav-cta:hover>span{transform:translate(3px,-3px)}}

html:not(.nav-compact) .statement-type{padding-block:clamp(3rem,7svh,6rem) clamp(3rem,7svh,6rem)}
.nav-compact .masthead{padding-block:0}.nav-compact .branding-group{padding-top:0;align-items:center}.nav-compact .masthead .brand{display:flex;align-items:center;min-height:var(--nav-height);font-size:34px}
/* A brief opacity fade remains gentle even when spatial motion is reduced. */
@media(prefers-reduced-motion:reduce){.js .sales-nav .nav-home{transition:opacity 180ms ease-out,visibility 0s linear 180ms!important}.js .sales-nav.show-home .nav-home{transition-delay:0s!important}}
html:not(.js) .sales-links .nav-cta{grid-column:auto}

/* Branding and headline switch together with the compact navigation. */
.nav-compact .branding-group{padding-bottom:0;box-sizing:border-box;height:var(--nav-height);position:relative;border-bottom:0}
.nav-compact .branding-group::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#1e1e1d26}
.nav-compact .headline-desktop{display:none}
.nav-compact .headline-mobile{display:block}

/* Short landscape windows: fit the complete statement above the navigation. */
@media(max-height:35rem) and (min-aspect-ratio:1/1){
 .masthead{padding-block:0}
 .branding-group{padding-block:0;min-height:var(--nav-height)}
 .statement .statement-type{padding-block:.75rem}
 .statement h1{width:min(100%,max(12rem,calc((100svh - var(--nav-height) * 2 - 3rem) * 2.1)))}
}

/* Align section labels below the sticky bar, accounting for their own inset. */
:is(#auswahl,#preis,#ueber-mich,#kontakt){scroll-margin-top:calc(1rem - var(--section-inset))}
:is(#auswahl,#preis,#ueber-mich,#kontakt) .label{font-size:.875rem}