/* SONOTEC component styles. Prefix: st- */
.st-root{background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
.st-root *,.st-root *::before,.st-root *::after{box-sizing:border-box}
.st-root a{color:var(--text-strong)}
.st-root a:hover{color:var(--text-accent)}
.st-root :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.st-root [data-surface="dark"] :focus-visible{outline-color:var(--focus-ring-on-dark)}
.st-container{width:100%;max-width:calc(var(--container-max) + 2 * var(--page-margin));margin-inline:auto;padding-inline:var(--page-margin)}
.st-section{padding-block:var(--section-y);scroll-margin-top:var(--header-h)}
.st-h1{font-family:var(--font-display);font-stretch:var(--display-stretch);font-size:var(--fs-display);font-weight:var(--weight-semibold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-strong);margin:0;max-width:var(--measure-display);text-wrap:balance}
.st-h2{font-family:var(--font-display);font-stretch:var(--display-stretch);font-size:var(--fs-h2);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--text-strong);margin:0;text-wrap:balance}
.st-h3{font-family:var(--font-sans);font-size:var(--fs-h3);font-weight:var(--weight-semibold);line-height:var(--leading-snug);color:var(--text-strong);margin:0}
.st-lead{font-size:var(--fs-lead);line-height:1.5;max-width:var(--measure-lead);margin:0;color:var(--text-body);text-wrap:pretty}
.st-body{max-width:var(--measure-body);margin:0;text-wrap:pretty}
.st-label{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:var(--leading-label)}
[data-surface="dark"]{background:var(--surface-dark);color:var(--text-on-dark)}
[data-surface="dark"] .st-h2,[data-surface="dark"] .st-h3{color:var(--text-on-dark)}
[data-surface="dark"] .st-body{color:var(--text-on-dark)}

/* Eyebrow */
.st-eyebrow{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-5);font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.st-eyebrow__index{color:var(--text-strong)}
.st-eyebrow__rule{width:32px;height:1px;background:currentColor;opacity:.6}
.st-eyebrow--on-dark{color:var(--text-on-dark-muted)}
.st-eyebrow--on-dark .st-eyebrow__index{color:var(--text-on-dark-accent)}

/* Button */
.st-btn{display:inline-flex;align-items:stretch;min-height:52px;border:0;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:var(--fs-button);font-weight:var(--weight-semibold);line-height:1.2;text-decoration:none;cursor:pointer;overflow:hidden;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.st-btn--lg{min-height:58px;font-size:1.0625rem}
.st-btn--block{display:flex;width:100%}
.st-btn--block .st-btn__label{flex:1}
.st-btn__label{display:flex;align-items:center;padding:12px 22px}
.st-btn__icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:52px}
.st-btn--lg .st-btn__icon{width:58px}
.st-btn__icon svg{transition:transform var(--dur-base) var(--ease-out)}
.st-btn:hover .st-btn__icon svg{transform:translateX(3px)}
.st-btn:active{transform:translateY(1px)}
.st-root .st-btn--primary,.st-btn--primary{background:var(--graphite-900);color:var(--paper)}
.st-btn--primary .st-btn__icon{background:var(--mint-500);color:var(--graphite-900)}
.st-root .st-btn--primary:hover,.st-btn--primary:hover{background:var(--graphite-700);color:var(--paper)}
.st-root .st-btn--secondary,.st-btn--secondary{background:transparent;color:var(--text-strong);box-shadow:inset 0 0 0 1.5px var(--graphite-900)}
.st-root .st-btn--secondary:hover,.st-btn--secondary:hover{background:var(--graphite-900);color:var(--paper)}
.st-root .st-btn--accent,.st-btn--accent{background:var(--mint-500);color:var(--graphite-900)}
.st-btn--accent .st-btn__icon{background:var(--graphite-900);color:var(--mint-500)}
.st-root .st-btn--accent:hover,.st-btn--accent:hover{background:var(--mint-600);color:var(--graphite-900)}
.st-root .st-btn--ghost,.st-btn--ghost{background:transparent;color:var(--text-strong);min-height:44px}
.st-btn--ghost .st-btn__label{padding:8px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.st-btn--ghost .st-btn__icon{width:36px}
.st-root .st-btn--ghost:hover,.st-btn--ghost:hover{color:var(--text-accent)}
.st-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
[data-surface="dark"] .st-btn:focus-visible{outline-color:var(--focus-ring-on-dark)}

/* Demo notice */
.st-demo-bar{background:var(--surface-sunken);color:var(--graphite-700);border-bottom:1px solid var(--border-subtle)}
.st-demo-bar .st-container{display:flex;align-items:center;gap:var(--space-2);min-height:32px;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.02em}
.st-demo-dot{width:6px;height:6px;border-radius:50%;background:var(--mint-800);flex:0 0 auto}
.st-demo-inline{display:inline-flex;align-items:center;gap:var(--space-2);margin:0;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.02em;color:var(--text-muted)}
[data-surface="dark"] .st-demo-inline{color:var(--text-on-dark-muted)}
[data-surface="dark"] .st-demo-dot{background:var(--mint-500)}

/* Figure */
.st-figure{position:relative;margin:0;overflow:hidden;background:var(--concrete-200)}
.st-figure img{display:block;width:100%;height:100%;object-fit:cover}
.st-figure__caption{position:absolute;left:var(--space-3);bottom:var(--space-3);padding:4px 8px;background:rgba(247,248,246,.9);color:var(--graphite-700);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.4}

/* Wordmark (kein Logo geliefert – reine Typografie) */
.st-wordmark{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--text-strong);line-height:1}
.st-root a.st-wordmark:hover{color:var(--text-strong)}
.st-wordmark__name{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:1.3125rem;letter-spacing:var(--tracking-wordmark)}
.st-wordmark__sub{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
[data-surface="dark"] .st-wordmark,[data-surface="dark"] a.st-wordmark:hover{color:var(--text-on-dark)}
[data-surface="dark"] .st-wordmark__sub{color:var(--text-on-dark-muted)}

/* Header + navigation */
.st-header{position:relative;z-index:20;background:var(--surface-page)}
.st-header--sticky{position:sticky;top:0}
.st-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:var(--header-h)}
.st-header__main{border-bottom:1px solid var(--border-subtle)}
.st-nav ul{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0}
.st-root .st-nav__link,.st-nav__link{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--text-strong);text-decoration:none;font-size:.9375rem;font-weight:var(--weight-medium)}
.st-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1.5px;background:var(--graphite-900);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
.st-nav__link:hover::after,.st-nav__link[aria-current="true"]::after{transform:scaleX(1)}
.st-root .st-nav__link:hover{color:var(--text-strong)}
.st-header__actions{display:flex;align-items:center;gap:var(--space-3)}
.st-menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-strong);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--graphite-900)}
.st-menu-btn:hover{background:var(--graphite-900);color:var(--paper)}
.st-menu-btn[aria-expanded="true"]{background:var(--graphite-900);color:var(--paper)}
.st-mobile-menu{position:absolute;left:0;right:0;top:100%;background:var(--surface-page);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-menu);padding:var(--space-5) var(--page-margin) var(--space-6);max-height:calc(100vh - var(--header-h));overflow:auto}
.st-mobile-menu[hidden]{display:none}
.st-mobile-menu ol{list-style:none;margin:0 0 var(--space-6);padding:0}
.st-mobile-menu li{border-bottom:1px solid var(--border-default)}
.st-root .st-mobile-menu__link,.st-mobile-menu__link{display:flex;align-items:baseline;gap:var(--space-4);min-height:60px;padding-block:var(--space-4);color:var(--text-strong);text-decoration:none;font-family:var(--font-display);font-stretch:var(--display-stretch);font-size:1.75rem;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading)}
.st-mobile-menu__link span{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);color:var(--text-muted)}
.st-mobile-menu__foot{display:flex;flex-direction:column;gap:var(--space-5)}
@media (max-width:1023px){.st-nav{display:none}.st-menu-btn{display:inline-flex}}
@media (max-width:639px){.st-header__cta{display:none}}
@media (min-width:1024px){.st-mobile-menu{display:none}}

/* Hero */
.st-hero{position:relative;display:grid;background:var(--surface-page);overflow:hidden}
.st-hero__media{position:relative}
.st-hero__media img{display:block;width:100%;height:100%;object-fit:cover}
.st-hero__scrim{position:absolute;inset:0;background:var(--scrim-paper)}
.st-hero__inner{position:relative;z-index:1}
.st-hero__content{display:flex;flex-direction:column;gap:var(--space-5)}
.st-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3)}
.st-hero .st-figure__caption{left:auto;right:var(--page-margin);bottom:var(--space-4)}
@media (min-width:900px){
.st-hero{min-height:clamp(600px,82vh,840px)}
.st-hero__media{position:absolute;inset:0}
.st-hero__media img{animation:st-hero-in var(--dur-slow) var(--ease-out) both}
.st-hero__inner{padding-block:clamp(64px,10vh,120px) 120px}
.st-hero__content{max-width:600px}
}
@media (max-width:899px){
.st-hero__inner{order:1;padding-block:var(--space-7) var(--space-6)}
.st-hero__media{order:2;aspect-ratio:4/3}
.st-hero__media img{object-position:82% 50%!important}
.st-hero__scrim{display:none}
.st-hero__actions .st-btn{width:100%}
.st-hero__actions .st-btn .st-btn__label{flex:1}
}
@keyframes st-hero-in{from{transform:scale(1.04)}to{transform:scale(1)}}

/* Process */
.st-process__layout{display:grid;gap:var(--space-8)}
.st-process__head{display:flex;flex-direction:column;gap:var(--space-4)}
.st-process__steps{position:relative;display:grid;gap:var(--space-7);list-style:none;margin:0;padding:0;counter-reset:step}
.st-step{position:relative;display:flex;flex-direction:column;gap:var(--space-3)}
.st-step__num{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:var(--space-3);background:var(--mint-500);color:var(--graphite-900);font-family:var(--font-mono);font-size:.9375rem;font-weight:var(--weight-medium);position:relative;z-index:1}
.st-step p{margin:0;max-width:34ch}
@media (min-width:900px){
.st-process__layout{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gutter)}
.st-process__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.st-process__steps::before{content:"";position:absolute;left:28px;right:0;top:28px;height:1px;background:var(--graphite-900);opacity:.18}
}
@media (max-width:899px){
.st-process__steps::before{content:"";position:absolute;left:28px;top:28px;bottom:28px;width:1px;background:var(--graphite-900);opacity:.18}
.st-step{padding-left:80px}
.st-step__num{position:absolute;left:0;top:0;margin:0}
}

/* Products */
.st-products{background:var(--surface-raised)}
.st-products__head{display:grid;gap:var(--space-5);margin-bottom:var(--space-8)}
.st-products__body{display:grid;gap:var(--space-7)}
.st-products__figure{aspect-ratio:16/10}
.st-plist{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--graphite-900)}
.st-prow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-2) var(--space-4);padding-block:var(--space-5);border-bottom:1px solid var(--border-default)}
.st-prow__num{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--weight-medium);color:var(--text-muted);padding-top:6px}
.st-prow__main{display:flex;flex-direction:column;gap:var(--space-2)}
.st-prow__code{display:inline-flex;align-self:flex-start;padding:3px 8px;background:var(--mint-300);color:var(--graphite-900);font-family:var(--font-mono);font-size:.8125rem;font-weight:var(--weight-medium);letter-spacing:.02em}
.st-prow__use{margin:0;color:var(--text-body);grid-column:2}
.st-products__outro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);margin-top:var(--space-7)}
@media (min-width:900px){
.st-products__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--gutter)}
.st-products__body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gutter);align-items:start}
.st-products__figure{aspect-ratio:4/5;position:sticky;top:calc(var(--header-h) + var(--space-5))}
}
@media (min-width:1200px){.st-prow{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);align-items:baseline}.st-prow__use{grid-column:3}}

/* About */
.st-about__layout{display:grid;gap:var(--space-7);align-items:center}
.st-about__figure{aspect-ratio:1/1}
.st-about__text{display:flex;flex-direction:column;gap:var(--space-5)}
.st-about__year{display:flex;align-items:baseline;gap:var(--space-4);margin:0;color:var(--text-on-dark-accent);font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:var(--weight-semibold);font-size:var(--fs-figure);line-height:.9;letter-spacing:-.04em}
.st-about__year span{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-on-dark-muted)}
@media (min-width:900px){.st-about__layout{grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr)}.st-about__text{grid-column:3}}

/* Contact */
.st-contact{background:var(--surface-accent);color:var(--text-on-accent)}
.st-contact .st-eyebrow,.st-contact .st-demo-inline{color:var(--graphite-700)}
.st-contact__layout{display:grid;gap:var(--space-7)}
.st-contact__head{display:flex;flex-direction:column;gap:var(--space-5)}
.st-contact__list{margin:0;border-top:1.5px solid var(--graphite-900)}
.st-contact__row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-4);padding-block:var(--space-5);border-bottom:1px solid rgba(22,28,27,.22)}
.st-contact__row dt{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--graphite-700);padding-top:5px}
.st-contact__row dd{margin:0;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:var(--weight-medium);color:var(--graphite-900);overflow-wrap:anywhere}
.st-contact__note{margin-top:var(--space-5)}
@media (min-width:900px){.st-contact__layout{grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr)}.st-contact__list-wrap{grid-column:3}}

/* Footer */
.st-footer{background:var(--surface-darker);color:var(--text-on-dark);padding-block:var(--space-8) var(--space-6)}
.st-footer__top{display:grid;gap:var(--space-6);padding-bottom:var(--space-7);border-bottom:1px solid var(--border-on-dark)}
.st-footer__nav ul{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);list-style:none;margin:0;padding:0}
.st-root .st-footer__nav a,.st-footer__nav a{display:inline-flex;min-height:44px;align-items:center;color:var(--text-on-dark);text-decoration:none;font-size:.9375rem}
.st-root .st-footer__nav a:hover{color:var(--text-on-dark-accent)}
.st-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4);padding-top:var(--space-5)}
.st-root .st-footer__top-link,.st-footer__top-link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;color:var(--text-on-dark);text-decoration:none;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.st-root .st-footer__top-link:hover{color:var(--text-on-dark-accent)}
@media (min-width:900px){.st-footer__top{grid-template-columns:minmax(0,1fr) auto;align-items:center}}