@import url("./fonts.css");



:root{
  
  --wrap:1200px;
  
  --page-padding:var(--layout-compact-page-padding);
  --section-padding:var(--space-12);
  --section-gutter:var(--layout-compact-gutter);
  
  --glow-violet:color-mix(in srgb,var(--palette-violet-500) 55%,transparent);
  --glow-rose:color-mix(in srgb,var(--palette-frozen-pink) 42%,transparent);
  --glow-cyan:color-mix(in srgb,var(--palette-frozen-blue) 22%,transparent);
  
  --glow-drift-duration:10s;
  
  --nav-offset:14px;
  --nav-height:52px;
}
html[data-theme="light"]{--glow-violet:color-mix(in srgb,var(--palette-violet-500) 26%,transparent);--glow-rose:color-mix(in srgb,var(--palette-frozen-pink) 45%,transparent);--glow-cyan:color-mix(in srgb,var(--palette-frozen-blue) 30%,transparent)}
@supports selector(:has(*)){
  html:not([data-theme]):has(#themeLight:checked){--glow-violet:color-mix(in srgb,var(--palette-violet-500) 26%,transparent);--glow-rose:color-mix(in srgb,var(--palette-frozen-pink) 45%,transparent);--glow-cyan:color-mix(in srgb,var(--palette-frozen-blue) 30%,transparent)}
  @media (prefers-color-scheme:light){
    html:not([data-theme]):has(#themeSystem:checked){--glow-violet:color-mix(in srgb,var(--palette-violet-500) 26%,transparent);--glow-rose:color-mix(in srgb,var(--palette-frozen-pink) 45%,transparent);--glow-cyan:color-mix(in srgb,var(--palette-frozen-blue) 30%,transparent)}
  }
}
@media (min-width:768px){:root{--page-padding:var(--layout-medium-page-padding);--section-padding:var(--space-16);--section-gutter:var(--layout-medium-gutter)}}
@media (min-width:1024px){:root{--page-padding:var(--layout-expanded-page-padding);--section-padding:var(--space-24);--section-gutter:var(--layout-expanded-gutter)}}
@media (min-width:1280px){:root{--page-padding:var(--layout-marketing-page-padding);--section-gutter:var(--layout-marketing-gutter)}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-background);color:var(--color-foreground);
  font-family:var(--font-family-product);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;isolation:isolate;
  
  overflow-wrap:break-word;
}
h1,h2,h3{font-family:var(--font-family-display);font-weight:var(--font-weight-bold);line-height:1.02;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
a:not(.pill):not(.logo):not(.nav-menu-toggle){text-decoration-thickness:var(--stroke-default);text-underline-offset:3px}
.skip-link{
  position:fixed;left:16px;top:12px;z-index:var(--layer-tooltip);
  display:inline-flex;align-items:center;min-height:var(--size-target-web-touch);padding:10px 16px;
  border-radius:var(--radius-md);
  background:var(--gradient-primary-action);color:var(--color-primary-foreground);font:var(--type-label);
  transform:translateY(-160%);transition:transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.skip-link:focus{transform:none}
.wrap{width:min(100% - 2 * var(--page-padding),var(--wrap));margin-inline:auto}
.section{padding-block:var(--section-padding)}
section[id]{scroll-margin-top:calc(var(--nav-offset) + var(--nav-height) + var(--space-4))}
:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset);border-radius:var(--radius-xs)}
.label{color:var(--color-link)}


.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--gradient-primary-action);z-index:var(--layer-sticky);pointer-events:none}


.nav{position:fixed;top:var(--nav-offset);left:0;right:0;z-index:var(--layer-sticky);display:flex;justify-content:center;padding-inline:76px;pointer-events:none}
.nav-in{
  pointer-events:auto;position:relative;display:flex;align-items:center;flex-wrap:wrap;
  width:auto;max-width:min(100%,var(--wrap));min-height:52px;gap:var(--space-2);padding:4px 8px 4px 16px;
  border:var(--stroke-default) solid var(--material-frozen-border);border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--material-frozen-background-start),var(--material-frozen-background-end));
  box-shadow:inset 0 1px 0 var(--material-frozen-inner-highlight),var(--elevation-sm);
  backdrop-filter:saturate(var(--material-frozen-saturate)) blur(var(--material-frozen-blur));
  -webkit-backdrop-filter:saturate(var(--material-frozen-saturate)) blur(var(--material-frozen-blur));
  transform:translateY(-120%);opacity:0;animation:navIn .9s var(--motion-easing-enter) .3s forwards;
}

.nav-in::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border-block-start:var(--stroke-default) solid var(--material-frozen-edge);
  border-inline-start:var(--stroke-default) solid var(--material-frozen-edge);
}
@keyframes navIn{to{transform:none;opacity:1}}
.logo{
  display:flex;align-items:center;gap:6px;min-height:var(--size-target-web-touch);
  margin-right:4px;padding-inline:4px;color:var(--color-foreground);
}
.nav-links{display:flex;gap:var(--space-1)}
.nav-links a{
  display:inline-flex;align-items:center;min-height:var(--size-target-web-touch);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  color:var(--color-muted-foreground);text-decoration:none;
  transition:color var(--motion-duration-fast) var(--motion-easing-standard),background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.nav-links a:hover{background:var(--color-secondary-hover);color:var(--color-foreground)}

.nav-links a[aria-current="true"]{
  background:var(--color-secondary);color:var(--color-foreground);
  font-weight:var(--font-weight-semibold);
  box-shadow:inset 0 -2px 0 var(--color-primary);
}
.nav-menu{display:none}
.nav-menu-toggle{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-width:var(--size-target-web-touch);min-height:var(--size-target-web-touch);padding:0 var(--space-3);
  border-radius:var(--radius-md);color:var(--color-foreground);cursor:pointer;list-style:none;
  font:var(--font-weight-label) var(--type-label-size)/var(--type-label-line-height) var(--font-family-product);
}
.nav-menu-toggle::-webkit-details-marker{display:none}
.nav-menu-toggle:hover,.nav-menu[open] .nav-menu-toggle{background:var(--color-secondary-hover)}

.nav-menu-icon,.nav-menu-icon::before,.nav-menu-icon::after{display:block;width:18px;height:2px;border-radius:1px;background:currentColor;transition:transform var(--motion-duration-fast) var(--motion-easing-standard)}
.nav-menu-icon{position:relative}
.nav-menu-icon::before,.nav-menu-icon::after{content:"";position:absolute;left:0}
.nav-menu-icon::before{top:-6px}
.nav-menu-icon::after{top:6px}
.nav-menu[open] .nav-menu-icon{background:transparent}
.nav-menu[open] .nav-menu-icon::before{transform:translateY(6px) rotate(45deg)}
.nav-menu[open] .nav-menu-icon::after{transform:translateY(-6px) rotate(-45deg)}
.nav-menu-panel{
  position:absolute;inset-inline:0;top:calc(100% + var(--space-2));z-index:var(--layer-popover);
  display:flex;flex-direction:column;gap:var(--space-1);
  max-height:calc(100svh - var(--nav-height) - var(--space-12));overflow:auto;padding:var(--space-2);
  border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface-elevated);box-shadow:var(--elevation-md);
}
.nav-menu-panel a{
  display:flex;align-items:center;min-height:var(--size-row-comfortable);padding-inline:var(--space-4);
  border-radius:var(--radius-md);color:var(--color-foreground);text-decoration:none;
  font:var(--font-weight-medium) var(--type-body-large-size)/var(--type-body-large-line-height) var(--font-family-product);
}
.nav-menu-panel a:hover{background:var(--color-secondary)}
.nav-menu-panel a:active{background:var(--color-secondary-pressed)}
.nav-menu-panel a:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:calc(-1 * var(--focus-width))}
.nav-menu-panel a[aria-current="true"]{
  background:var(--color-secondary);color:var(--color-foreground);
  font-weight:var(--font-weight-strong);
  box-shadow:inset 3px 0 0 var(--color-primary);
}


.theme-picker{position:fixed;top:var(--nav-offset);right:20px;z-index:var(--layer-popover);display:block}
.theme-toggle{
  position:relative;width:var(--size-target-web-touch);height:var(--size-target-web-touch);
  display:grid;place-items:center;flex:none;padding:0;border-radius:var(--radius-md);
  border:var(--stroke-default) solid var(--material-frozen-border);color:var(--color-foreground);
  background:linear-gradient(135deg,var(--material-frozen-background-start),var(--material-frozen-background-end));
  box-shadow:inset 0 1px 0 var(--material-frozen-inner-highlight),var(--elevation-sm);
  backdrop-filter:saturate(var(--material-frozen-saturate)) blur(var(--material-frozen-blur));
  -webkit-backdrop-filter:saturate(var(--material-frozen-saturate)) blur(var(--material-frozen-blur));
  cursor:pointer;list-style:none;transition:background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.theme-toggle::-webkit-details-marker{display:none}
.theme-toggle::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border-block-start:var(--stroke-default) solid var(--material-frozen-edge);
  border-inline-start:var(--stroke-default) solid var(--material-frozen-edge);
}
.theme-toggle:hover,.theme-picker[open] .theme-toggle{background:var(--color-secondary-hover)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-menu{
  position:absolute;top:calc(100% + var(--space-2));right:0;z-index:var(--layer-popover);
  width:260px;max-width:calc(100vw - var(--space-10));padding:var(--space-3);
  background:var(--color-surface-elevated);border:var(--stroke-default) solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--elevation-md);
}
.theme-menu[hidden]{display:none}

.theme-option{
  width:100%;display:flex;align-items:center;gap:10px;min-height:var(--size-target-web-touch);padding:10px;
  border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-foreground);
  font-size:var(--type-body-small-size);line-height:normal;text-align:left;cursor:pointer;
}
.theme-option:hover,.theme-option:focus-visible{background:var(--color-secondary-hover)}
.theme-option input{width:18px;height:18px;accent-color:var(--color-primary)}
.settings-label{display:block;margin:0 0 var(--space-2);color:var(--color-muted-foreground)}
.settings-language{margin-top:var(--space-4);padding-top:14px;border-top:var(--stroke-default) solid var(--color-border)}

.language-switch{
  display:flex;align-items:center;justify-content:stretch;gap:1px;padding:3px;
  border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-secondary);
}
.language-switch a{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:var(--size-target-web-touch);
  padding:7px 9px;border-radius:var(--radius-sm);text-align:center;font-size:13px;
  color:var(--color-muted-foreground);text-decoration:none;
}
.language-switch a[aria-current="page"]{background:var(--color-surface);color:var(--color-foreground)}


.pill{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--size-target-web-touch);
  font-family:var(--font-family-product);font-size:14.5px;font-weight:var(--font-weight-semibold);
  color:var(--color-primary-foreground);background:var(--gradient-primary-action);
  padding:10px 20px;border-radius:var(--radius-md);border:0;cursor:pointer;text-decoration:none;
  
  max-width:100%;white-space:normal;text-align:center;
  transition:transform var(--motion-duration-standard) var(--motion-easing-standard),box-shadow var(--motion-duration-standard) var(--motion-easing-standard),background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.nav .pill{white-space:nowrap}
.pill:hover{box-shadow:var(--elevation-sm);transform:translateY(-1px)}
.pill:active{transform:scale(var(--motion-pressed-scale))}
.pill-grad{background:var(--gradient-primary-action);color:var(--color-primary-foreground)}
.pill-grad:hover{box-shadow:var(--elevation-md)}
.pill-ghost{background:transparent;color:var(--color-foreground);border:var(--stroke-default) solid var(--color-border-strong)}
.pill-ghost:hover{background:var(--color-secondary-hover);box-shadow:none}
.pill-ghost:active{background:var(--color-secondary-pressed)}
.pill-lg{min-height:var(--size-control-lg);font-size:16px;padding:0 var(--space-8)}
.pill:focus-visible,.nav-links a:focus-visible,.foot-links a:focus-visible,.mailto:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:3px}



.hero{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;text-align:center;
  
  min-height:calc(100svh + var(--hero-glow-overhang));
  padding-block:calc(var(--nav-offset) + var(--nav-height) + var(--space-10)) calc(clamp(var(--space-12),14svh,150px) + var(--hero-glow-overhang));
  overflow-x:clip;
}


:root{--hero-glow-overhang:calc(min(22svh,220px) + var(--space-1) - clamp(var(--space-12),14svh,150px))}
.hero-brand{position:absolute;inset:0;z-index:-1;opacity:0;animation:fadeUp var(--motion-duration-page) var(--motion-easing-enter) .18s forwards;pointer-events:none}
.hero-brand[hidden]{display:none}
.hero-particles{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y}
@media (prefers-reduced-motion:reduce){.hero-brand{animation:none;opacity:1}}


.hero .wrap{position:relative}
.hero .wrap::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(100% + var(--space-1));inset-inline:calc(-1 * max(var(--page-padding),calc((100vw - var(--wrap)) / 2)));
  height:min(22svh,220px);
  background:
    radial-gradient(closest-side at 34% 55%,var(--glow-violet),color-mix(in srgb,var(--glow-violet) 50%,transparent) 38%,color-mix(in srgb,var(--glow-violet) 15%,transparent) 70%,transparent),
    radial-gradient(closest-side at 68% 45%,var(--glow-rose),color-mix(in srgb,var(--glow-rose) 50%,transparent) 38%,color-mix(in srgb,var(--glow-rose) 15%,transparent) 70%,transparent),
    radial-gradient(closest-side at 52% 70%,var(--glow-cyan),color-mix(in srgb,var(--glow-cyan) 50%,transparent) 38%,color-mix(in srgb,var(--glow-cyan) 15%,transparent) 70%,transparent);
  -webkit-mask:radial-gradient(ellipse 58% 42% at 50% 50%,#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);
  mask:radial-gradient(ellipse 58% 42% at 50% 50%,#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);
}


h1.hero-h{max-width:16ch;margin-inline:auto;color:var(--color-foreground);text-wrap:balance;hyphens:manual}

.hero--particles-ready h1.hero-h{color:transparent}
@media (min-width:768px){.hero--particles-ready h1.hero-h{font:var(--marketing-display)}}
@media (min-width:1024px){.hero--particles-ready h1.hero-h{font:var(--marketing-hero)}}
@media (min-width:1280px){.hero--particles-ready h1.hero-h{font:var(--marketing-hero-xl)}}
.word{display:inline-block;overflow:hidden;padding-block:.14em;margin-block:-.14em;vertical-align:bottom;max-width:100%}
.word span{display:inline-block;transform:translateY(105%);animation:wordUp var(--motion-duration-page) var(--motion-easing-enter) forwards}
@keyframes wordUp{to{transform:none}}
.hero-sub{color:var(--color-muted-foreground);max-width:56ch;margin:var(--space-5) auto 0;opacity:0;animation:fadeUp var(--motion-duration-page) var(--motion-easing-enter) .32s forwards}
.hero-cta{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-8);opacity:0;animation:fadeUp var(--motion-duration-page) var(--motion-easing-enter) .38s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(var(--motion-distance-medium))}to{opacity:1;transform:none}}


.head{max-width:820px}
.head :is(h1,h2){max-width:14ch;margin:var(--space-4) auto 0;text-wrap:balance}
.head p{color:var(--color-muted-foreground);margin-top:var(--space-5);max-width:58ch}
.center{margin-inline:auto;text-align:center}
.center p{margin-inline:auto}



.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:var(--section-gutter);margin-top:var(--space-10);overflow-x:clip;overflow-clip-margin:var(--space-3)}
.card{
  background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border);
  border-radius:var(--radius-lg);padding:var(--space-6);position:relative;display:flex;flex-direction:column;min-width:0;
  transition:transform var(--motion-duration-standard) var(--motion-easing-standard),box-shadow var(--motion-duration-standard) var(--motion-easing-standard);
}
.card svg{position:relative;width:var(--icon-lg);height:var(--icon-lg);stroke:var(--color-primary);stroke-width:var(--icon-stroke);fill:none;stroke-linecap:round;stroke-linejoin:round}
.card :is(h2,h3){position:relative;margin-top:var(--space-4)}
.card p{position:relative;color:var(--color-muted-foreground);margin-top:var(--space-2);padding-bottom:var(--space-5)}


.card .tag{position:relative;align-self:flex-start;max-width:100%;margin-top:auto;display:inline-flex;align-items:center;min-height:var(--size-badge-md);padding-inline:var(--space-3);border-radius:var(--radius-round);background:var(--color-muted);color:var(--color-foreground);overflow-wrap:anywhere}
:is(#leistungen,#showcases) .cards{grid-template-columns:minmax(0,1fr)}

.card>.service-illustration{display:block;width:100%;max-width:none;height:auto;aspect-ratio:2/1;align-self:stretch;flex:none;background:var(--color-surface-inset);border:var(--stroke-default) solid var(--material-standard-border);border-radius:var(--radius-md);overflow:hidden;stroke:none;fill:none}
.service-illustration .si-st-violet{stop-color:var(--palette-violet-500)}
.service-illustration .si-st-violet-soft{stop-color:var(--palette-violet-400)}
.service-illustration .si-st-blue{stop-color:var(--palette-frozen-blue)}
.service-illustration .si-st-cyan{stop-color:var(--palette-frozen-cyan)}
.service-illustration .si-st-fade{stop-opacity:0}
.service-illustration .si-glow{opacity:.34}
.service-illustration .si-fx-shadow{flood-color:var(--color-shadow);flood-opacity:.18}
.service-illustration .si-frame{fill:var(--color-surface-elevated);stroke:var(--material-standard-border);stroke-width:1}
.service-illustration .si-screen{fill:var(--color-surface)}
.service-illustration .si-panel{fill:var(--color-surface);stroke:var(--color-border);stroke-width:1}
.service-illustration .si-glass{fill:var(--color-surface-elevated);stroke:var(--color-border);stroke-width:1}
.service-illustration .si-inset{fill:var(--color-surface-inset)}
.service-illustration .si-line{fill:var(--color-border)}
.service-illustration .si-text{fill:var(--color-foreground);opacity:.82}
.service-illustration .si-accent{fill:var(--color-accent)}
.service-illustration .si-primary{fill:var(--color-primary)}
.service-illustration .si-on-primary{fill:var(--color-primary-foreground)}
.service-illustration .si-on-primary-soft{fill:var(--color-primary-foreground);opacity:.6}
.service-illustration .si-dot{fill:var(--color-border-strong);opacity:.55}
.service-illustration .si-glyph{fill:none;stroke:var(--color-brand-signal);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.service-illustration .si-glyph-on{fill:none;stroke:var(--color-primary-foreground);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.service-illustration .si-grid{fill:none;stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 4}
.service-illustration .si-wire{fill:none;stroke-width:2;stroke-linecap:round}
.service-illustration .si-ring{fill:none;stroke-width:1.25}
@media (min-width:768px){:is(#leistungen,#showcases) .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

#leistungen .card:hover,#leistungen .card.rv.on:hover{transform:none;box-shadow:none}


.labor{position:relative;isolation:isolate;overflow-x:clip}
.labor::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at center,var(--color-border-strong) 1px,transparent 1.5px);
  background-size:var(--space-6) var(--space-6);opacity:.55;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0%,rgba(0,0,0,.35) 55%,transparent 85%);
  mask:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0%,rgba(0,0,0,.35) 55%,transparent 85%);
}

.lab-brief{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);max-width:62ch;margin:var(--space-10) auto 0;text-align:center}
.lab-note{color:var(--color-muted-foreground);font:var(--type-body-small)}
.lab-stage{
  position:relative;margin-top:var(--space-10);aspect-ratio:16/10;min-height:280px;max-height:min(78svh,720px);width:100%;
  border:var(--stroke-default) solid var(--material-standard-border);border-radius:var(--radius-2xl);overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--color-surface),var(--color-surface-inset));
  box-shadow:inset 0 1px 0 var(--material-frozen-inner-highlight),var(--elevation-md);
}
.lab-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}

.lab-stats{
  position:absolute;left:var(--space-4);bottom:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:0;
  padding:var(--space-2) var(--space-3);max-width:calc(100% - 2 * var(--space-4));pointer-events:none;
  border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-elevated);
}

.lab-stats div{display:flex;flex-wrap:wrap;gap:0 var(--space-2);align-items:baseline;min-width:0}
.lab-stats dt{color:var(--color-muted-foreground);overflow-wrap:anywhere}
.lab-stats dd{margin:0;color:var(--color-foreground);font-variant-numeric:tabular-nums}
.lab-controls{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;align-items:center;margin-top:var(--space-6)}

.lab-shapes{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1);padding:3px;max-width:100%;
  border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-secondary);
}
.lab-shapes button,.lab-pause,.lab-action,.stoff-action{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--size-target-web-touch);
  padding:0 var(--space-4);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-muted-foreground);
  font:var(--type-label);cursor:pointer;
  transition:background-color var(--motion-duration-fast) var(--motion-easing-standard),color var(--motion-duration-fast) var(--motion-easing-standard);
}
.lab-shapes button:hover{background:var(--color-secondary-hover);color:var(--color-foreground)}

.lab-shapes button[aria-pressed="true"]{background:var(--color-surface);color:var(--color-foreground);box-shadow:inset 0 -2px 0 var(--color-primary)}
.lab-pause,.lab-action,.stoff-action{border:var(--stroke-default) solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-foreground)}
.lab-pause:hover,.lab-action:hover,.stoff-action:hover{background:var(--color-secondary-hover)}


.lab-pause i{width:10px;height:12px;flex:none;border-inline:3px solid currentColor}
.lab-pause[data-state="paused"] i{width:0;height:0;border-inline:0;border-block:6px solid transparent;border-inline-start:10px solid currentColor}
@media (max-width:767.98px){
  .lab-stage{aspect-ratio:4/5;max-height:70svh}
  .lab-stats{left:var(--space-3);bottom:var(--space-3);font:var(--type-caption)}
  .lab-stats .lab-engine{display:none}
}
@media (prefers-reduced-motion:reduce){.lab-pause{display:none}}
@media (forced-colors:active){.lab-shapes button[aria-pressed="true"]{outline:2px solid CanvasText}}

.lab-stage:not(.is-live){display:flex;align-items:center;justify-content:center;aspect-ratio:auto;min-height:220px;max-height:none;padding:var(--space-6)}
.lab-stage-note{max-width:52ch;padding:var(--space-3) var(--space-4);border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-elevated);color:var(--color-muted-foreground);text-align:center;font:var(--type-body-small)}
.lab-stage.is-live .lab-stage-note{display:none}
.lab-stats[hidden],.lab-controls[hidden]{display:none}

.lab-more{margin-top:var(--space-16);text-align:center}
.lab-more-title{color:var(--color-foreground);font:var(--type-title)}
.lab-teasers{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin:var(--space-6) 0 0;padding:0;list-style:none;text-align:start}
@media (min-width:768px){.lab-teasers{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--section-gutter)}}
.lab-teaser{
  display:flex;flex-direction:column;height:100%;overflow:hidden;color:var(--color-foreground);text-decoration:none;
  border:var(--stroke-default) solid var(--material-standard-border);border-radius:var(--radius-lg);background:var(--material-standard-background);
  transition:transform var(--motion-duration-standard) var(--motion-easing-standard),box-shadow var(--motion-duration-standard) var(--motion-easing-standard),border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.lab-teaser img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--color-surface-inset);transition:transform var(--motion-duration-page) var(--motion-easing-standard)}
.lab-teaser-kicker{margin:var(--space-4) var(--space-4) 0;color:var(--color-link);font:var(--type-label)}
.lab-teaser-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin:var(--space-1) var(--space-4) var(--space-4);font:var(--type-heading-3)}

.lab-teaser-title::after{content:"→";flex:none;color:var(--color-muted-foreground);transition:transform var(--motion-duration-fast) var(--motion-easing-standard),color var(--motion-duration-fast) var(--motion-easing-standard)}
.lab-teaser:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset);border-radius:var(--radius-lg)}
@media (hover:hover){
  .lab-teaser:hover{border-color:var(--color-border-strong);box-shadow:var(--elevation-md);transform:translateY(calc(-1 * var(--motion-hover-lift)))}
  .lab-teaser:hover img{transform:scale(1.04)}
  .lab-teaser:hover .lab-teaser-title::after{color:var(--color-link);transform:translateX(var(--space-1))}
}
@media (prefers-reduced-motion:reduce){.lab-teaser,.lab-teaser img,.lab-teaser-title::after{transition:none}.lab-teaser:hover{transform:none}.lab-teaser:hover img{transform:none}}
.lab-more-cta{display:flex;justify-content:center;margin-top:var(--space-8)}
.lab-more-link{gap:var(--space-2)}
.lab-more-link svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-duration-fast) var(--motion-easing-standard)}
.lab-more-link:hover svg{transform:translateX(3px)}


.section.page-intro{padding-block-start:calc(var(--nav-offset) + var(--nav-height) + var(--space-12))}
.showcase-page{min-height:100svh;display:flex;flex-direction:column}
.showcase-page main{flex:1}

.showcase-cards{list-style:none;padding:0}
.showcase-card .showcase-kicker{margin-top:var(--space-4);padding-bottom:0;color:var(--color-link);font:var(--type-label)}
.showcase-card h2{position:static;margin-top:var(--space-2)}
.showcase-card h2 a{color:var(--color-foreground);text-decoration:none}
.showcase-card h2 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.showcase-card h2 a:focus-visible{outline:none}
.showcase-card:has(h2 a:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}
.showcase-card h2 a:hover{color:var(--color-link)}
@media (hover:hover){.showcase-card:hover{box-shadow:var(--elevation-md);transform:translateY(calc(-1 * var(--motion-hover-lift)))}}

.showcase-back{margin-bottom:var(--space-6)}
.showcase-back a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--size-target-web-touch);color:var(--color-link);text-decoration:underline}
.showcase-back a::before{content:"←";display:inline-block;text-decoration:none}
.showcase-back a:hover{color:var(--color-link-hover)}
.showcase-detail .head h1{max-width:20ch;margin-inline:0}

.showcase-stage{
  position:relative;margin-top:var(--space-10);aspect-ratio:16/9;min-height:260px;max-height:min(72svh,680px);width:100%;
  border:var(--stroke-default) solid var(--material-standard-border);border-radius:var(--radius-2xl);overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--color-surface),var(--color-surface-inset));
  box-shadow:inset 0 1px 0 var(--material-frozen-inner-highlight),var(--elevation-md);
}
.showcase-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y}

.showcase-stage:not(.is-live){display:flex;align-items:flex-end;justify-content:center;aspect-ratio:auto;min-height:260px;max-height:none;padding:var(--space-4)}
.showcase-stage-note{position:relative;max-width:52ch;padding:var(--space-3) var(--space-4);border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-elevated);color:var(--color-muted-foreground);text-align:center;font:var(--type-body-small)}
.showcase-stage.is-live .showcase-stage-note{display:none}

.showcase-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 30%;padding:var(--space-4)}
.showcase-stage.is-live .showcase-still{display:none}

.showcase-stage:has(.showcase-still):not(.is-live){aspect-ratio:16/9}
.showcase-stats[hidden],.showcase-controls[hidden]{display:none}
.showcase-explain{max-width:var(--size-content-reading);margin-top:var(--space-12)}
.showcase-explain h2{font:var(--type-heading-2)}
.showcase-explain p{margin-top:var(--space-4);color:var(--color-muted-foreground)}

.growth-canvas{touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}

.ink-canvas{touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}

.glass-canvas{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.glass-canvas[data-dragging]{cursor:grabbing}

.glass-stats div{flex-wrap:wrap;min-width:0;column-gap:var(--space-1)}
.glass-stats dd{overflow-wrap:anywhere}

.world-canvas{touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}

.showcase-still.world-still{object-fit:cover;object-position:50% 50%;padding:0}
.world-stats div{flex-wrap:wrap;min-width:0;column-gap:var(--space-1)}

.world-time{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-3);min-height:var(--size-target-web-touch);max-width:100%;color:var(--color-foreground);font:var(--type-label)}
.world-time input{width:min(16rem,100%);min-width:0;height:var(--size-target-web-touch);margin:0;accent-color:var(--color-primary);cursor:pointer}

.million-canvas{touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.showcase-still.million-still{object-fit:cover;object-position:50% 50%;padding:0}
.million-stats div{flex-wrap:wrap;min-width:0;column-gap:var(--space-1)}
.million-stats dd{overflow-wrap:anywhere}

.kingdom-canvas{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.kingdom-canvas[data-hover="gear"]{cursor:pointer}
.kingdom-canvas[data-grip]{cursor:grabbing}
.kingdom-stats div{flex-wrap:wrap;min-width:0;column-gap:var(--space-1)}

.kingdom-gear{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-3);min-height:var(--size-target-web-touch);max-width:100%;color:var(--color-foreground);font:var(--type-label)}
.kingdom-gear input{width:min(14rem,100%);min-width:0;height:var(--size-target-web-touch);margin:0;accent-color:var(--color-primary);cursor:pointer}
.lab-action[aria-pressed="true"]{background:var(--color-surface);box-shadow:inset 0 -2px 0 var(--color-primary)}

.light-canvas{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.light-canvas[data-dragging]{cursor:grabbing}
.showcase-still.light-still{object-fit:cover;object-position:50% 50%;padding:0}
.light-stats div{flex-wrap:wrap;min-width:0;column-gap:var(--space-1)}

.light-range{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-3);min-height:var(--size-target-web-touch);max-width:100%;color:var(--color-foreground);font:var(--type-label)}
.light-range input{width:min(10rem,100%);min-width:0;height:var(--size-target-web-touch);margin:0;accent-color:var(--color-primary);cursor:pointer}
.light-range output{min-width:5ch;color:var(--color-muted-foreground);font-variant-numeric:tabular-nums}

.suns-canvas{touch-action:pan-y;cursor:default;user-select:none;-webkit-user-select:none}
.suns-canvas[data-hover="sun"]{cursor:grab}
.suns-canvas[data-dragging]{cursor:grabbing}
.showcase-still.suns-still{object-fit:cover;object-position:50% 50%;padding:0}
.suns-stats div{flex-wrap:wrap;min-width:0;column-gap:var(--space-1)}

.throne-canvas{touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.throne-canvas[data-hover="candle"]{cursor:grab}
.throne-canvas[data-dragging]{cursor:grabbing}
.throne-stats div{flex-wrap:wrap;min-width:0;column-gap:var(--space-1)}

.throne-range{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-3);min-height:var(--size-target-web-touch);max-width:100%;color:var(--color-foreground);font:var(--type-label)}
.throne-range input{width:min(10rem,100%);min-width:0;height:var(--size-target-web-touch);margin:0;accent-color:var(--color-primary);cursor:pointer}
.throne-range output{min-width:6ch;color:var(--color-muted-foreground);font-variant-numeric:tabular-nums}
@media (max-width:767.98px){
  .showcase-stage.is-live{aspect-ratio:4/5;max-height:70svh}
  .showcase-stage:not(.is-live){min-height:200px}
}

.stoff-canvas{touch-action:none;cursor:grab}
.stoff-canvas[data-grab="active"]{cursor:grabbing}

.showcase-stage.decay-stage{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--space-4);aspect-ratio:auto;min-height:0;max-height:none;padding:var(--space-8) var(--space-8) var(--space-16)}
.showcase-stage.decay-stage:not(.is-live){padding-bottom:var(--space-6)}
.decay-canvas{pointer-events:none;cursor:grab;user-select:none;-webkit-user-select:none}
.decay-canvas[data-digging]{cursor:grabbing}
.decay-stage.is-live:is([data-state="sand"],[data-state="restoring"]) .decay-canvas{pointer-events:auto;touch-action:pan-y}
.decay-stage:is([data-state="sand"],[data-state="restoring"]) .decay-page{opacity:0}

.lab-stats.decay-stats{position:static;justify-content:center;width:fit-content;max-width:100%;margin:var(--space-4) auto 0}
.decay-page{position:relative;display:flex;flex-direction:column;gap:var(--space-8);min-width:0;color:var(--color-foreground)}
.decay-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-6);padding-bottom:var(--space-3);border-bottom:var(--stroke-default) solid var(--color-border-strong)}
.decay-logo{font-size:var(--type-title-size);line-height:var(--type-title-line-height);color:var(--color-foreground)}
.decay-nav{font:var(--type-label);color:var(--color-muted-foreground)}
.decay-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--space-8);align-items:start}
.decay-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);min-width:0}
.decay-kicker,.decay-card-label{font:var(--type-label);color:var(--color-link)}
.decay-title{font:var(--type-heading-1);color:var(--color-foreground);overflow-wrap:anywhere}
.decay-text,.decay-card-text{max-width:42ch;font:var(--type-body-small);color:var(--color-muted-foreground);overflow-wrap:anywhere}
.decay-like{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--size-target-web-touch);margin-top:var(--space-2);padding:0 var(--space-5);border:0;border-radius:var(--radius-round);background:var(--color-primary);color:var(--color-primary-foreground);font:var(--type-label);cursor:pointer}
.decay-like:hover{background:var(--color-primary-hover)}
.decay-like[aria-pressed="true"]{background:var(--color-accent);color:var(--color-accent-foreground)}
.decay-count{font-variant-numeric:tabular-nums}
.decay-card{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--space-5);border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-elevated)}
.decay-swatch{display:flex;gap:var(--space-2);margin-bottom:var(--space-2)}
.decay-swatch i{width:var(--space-8);height:var(--space-8);border-radius:var(--radius-round);background:var(--palette-violet-500)}
.decay-swatch i:nth-child(2){background:var(--palette-frozen-pink)}
.decay-swatch i:nth-child(3){background:var(--palette-frozen-blue)}
.decay-card-title{font:var(--type-heading-3);color:var(--color-foreground);overflow-wrap:anywhere}
@media (max-width:767.98px){
  .showcase-stage.decay-stage{padding:var(--space-5) var(--space-4) var(--space-20)}
  .decay-page{gap:var(--space-5)}
}

.learn-canvas{touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.learn-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-4)}
.learn-panel[hidden]{display:none}
.learn-figure{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;margin:0;padding:var(--space-3);border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-inset)}
.learn-figure figcaption{font:var(--type-caption);color:var(--color-muted-foreground)}
.learn-figure output{color:var(--color-foreground);font-variant-numeric:tabular-nums}
.learn-target{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.learn-loss{display:block;width:100%;height:clamp(96px,14vw,150px)}
@media (min-width:768px){.learn-panel{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}

.traffic-canvas{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.traffic-canvas[data-hover="router"]{cursor:pointer}

.lab-stats.traffic-stats{position:static;justify-content:center;width:fit-content;max-width:100%;margin:var(--space-4) auto 0}
.traffic-nodes button{min-width:var(--size-target-web-touch);padding:0 var(--space-3)}
.traffic-nodes button[aria-pressed="true"]{background:var(--color-danger);color:var(--color-danger-foreground);box-shadow:inset 0 -2px 0 var(--color-destructive)}
.traffic-node-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.traffic-load{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--size-target-web-touch);max-width:100%;padding:0 var(--space-4);border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-secondary);color:var(--color-foreground);font:var(--type-label)}
.traffic-load input{width:9rem;min-width:0;flex:1 1 auto;height:var(--size-target-web-touch);margin:0;accent-color:var(--color-primary);cursor:pointer}
.traffic-load output{min-width:4.5ch;text-align:end;font-variant-numeric:tabular-nums}
.lab-action:disabled{opacity:.55;cursor:default}
.lab-action:disabled:hover{background:transparent}


.showroom[hidden],.showroom-empty[hidden],.showroom-bar[hidden],.showroom-picker-bar[hidden],.showroom-message[hidden]{display:none}
.showroom{margin-top:var(--space-10)}
.showroom-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);min-height:220px;
  padding:var(--space-8) var(--space-6);border:var(--stroke-default) dashed var(--color-border-strong);border-radius:var(--radius-2xl);
  background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--color-surface),var(--color-surface-inset));
  color:var(--color-muted-foreground);text-align:center
}
.showroom-empty strong{font:var(--type-heading-3);color:var(--color-foreground)}

.showroom.is-open{margin-top:var(--space-3)}
.showroom-message{padding:var(--space-8);border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-muted-foreground)}
.showroom-message button{margin-top:var(--space-4)}
.showroom-picker-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.showroom-picker-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.showroom-scroll{min-width:var(--size-target-web-touch);padding-inline:var(--space-3)}
.showroom-scroll:disabled{opacity:.45;cursor:default}

#showcases.has-selection>.wrap>.head h1{font:var(--type-heading-2);max-width:none}
#showcases.has-selection>.wrap>.head p{display:none}
.showroom-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.showroom-view[hidden]{display:none}
.showroom-view{margin-top:0}
.showroom-showcase>.wrap{width:100%}
.showroom-view[aria-busy="true"]{min-height:320px}
.showroom-showcase .showcase-stage{margin-top:0}
.showroom-showcase .head{margin-top:var(--space-8)}
.showroom-showcase .head h2{max-width:20ch;margin-inline:0}
.showroom-showcase .showcase-explain h3{font:var(--type-heading-2)}

.showcase-cards.is-showroom{
  display:flex;gap:var(--space-4);position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--space-3);padding:var(--space-3);margin-inline:calc(-1 * var(--space-3));
  flex-wrap:nowrap;scrollbar-width:auto;margin-top:var(--space-2);
  scroll-margin-top:calc(var(--nav-offset) + var(--nav-height) + var(--space-4))
}
.showcase-cards.is-showroom .showcase-card{flex:0 0 min(12rem,72%);scroll-snap-align:start;padding:var(--space-3)}
.showcase-cards.is-showroom .showcase-card>p,.showcase-cards.is-showroom .showcase-card .tag{display:none}
.showcase-cards.is-showroom .showcase-card h2{font:var(--type-title);margin-top:var(--space-2)}
.showcase-card.is-selected{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.showcase-card.is-selected h2 a{color:var(--color-link)}
@media (hover:hover){.showcase-cards.is-showroom .showcase-card:hover{transform:none}}
@media (forced-colors:active){.showcase-card.is-selected{outline:3px solid Highlight}}

#produkte{position:relative;isolation:isolate;padding-block:var(--section-padding)}

.produkte-wrap{width:min(100% - 2 * var(--page-padding),var(--size-content-default));margin-inline:auto}
.feature-panel{
  position:relative;margin-inline:auto;width:min(100%,var(--size-content-default));
  padding:var(--space-16) var(--space-12);border-radius:var(--radius-2xl);
  color:var(--color-foreground);
  background:linear-gradient(135deg,var(--material-frozen-background-start),var(--material-frozen-background-end));
  border:var(--stroke-default) solid var(--material-frozen-border);
  box-shadow:inset 0 1px 0 var(--material-frozen-inner-highlight),var(--material-frozen-elevation);
  backdrop-filter:saturate(var(--material-frozen-saturate)) blur(var(--material-frozen-blur));
  -webkit-backdrop-filter:saturate(var(--material-frozen-saturate)) blur(var(--material-frozen-blur));
}

.feature-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border-block-start:var(--stroke-default) solid var(--material-frozen-edge);
  border-inline-start:var(--stroke-default) solid var(--material-frozen-edge);
}

.feature-panel{overflow:hidden}
.feature-panel::after,.feature-inner::before{content:"";position:absolute;pointer-events:none;border-radius:50%}
.feature-panel::after{
  z-index:0;width:70%;aspect-ratio:1;inset-inline-start:-18%;inset-block-start:8%;
  background:radial-gradient(closest-side,var(--glow-violet),color-mix(in srgb,var(--glow-violet) 50%,transparent) 38%,color-mix(in srgb,var(--glow-violet) 15%,transparent) 70%,transparent);
}
.feature-inner::before{
  z-index:-1;width:75%;aspect-ratio:1;inset-inline-end:-30%;inset-block-end:-55%;
  background:radial-gradient(closest-side,var(--glow-rose),color-mix(in srgb,var(--glow-rose) 50%,transparent) 38%,color-mix(in srgb,var(--glow-rose) 15%,transparent) 70%,transparent);
}
.feature-inner{position:relative;z-index:1;isolation:isolate;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-12);align-items:center}
.feature-inner>*{min-width:0}
.feature-panel .label{color:var(--color-link)}
.feature-panel h2{max-width:18ch;margin-top:var(--space-4);text-wrap:balance}

.feature-panel .lead{color:var(--color-foreground);margin-top:var(--space-5);max-width:50ch}
.facts{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}

.fact{background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border);border-radius:var(--radius-lg);padding:var(--space-6);min-width:0}
.fact p{color:var(--color-muted-foreground);margin-top:var(--space-2)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .feature-panel{background:var(--color-surface-elevated);border-color:var(--color-border-strong);box-shadow:var(--elevation-md)}
  .feature-panel::before{display:none}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .hero .wrap::after,.feature-panel::after,.feature-inner::before{display:none}
  .feature-panel{background:var(--color-surface-elevated);border-color:var(--color-border-strong);box-shadow:var(--elevation-md);backdrop-filter:none;-webkit-backdrop-filter:none}
  .feature-panel::before{display:none}
}
@media (forced-colors:active){.hero .wrap::after,.feature-panel::after,.feature-inner::before{display:none}}


.person{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-12);align-items:center}
.person>*{min-width:0}
.portrait{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface-inset);box-shadow:var(--elevation-md)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}

.portrait figcaption{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);display:flex;flex-direction:column;gap:var(--space-0-5);padding:var(--space-3) var(--space-4);border:var(--stroke-default) solid var(--material-elevated-border);border-radius:var(--radius-lg);background:var(--color-surface-elevated);box-shadow:var(--elevation-sm)}
.portrait strong{line-height:1.2}
.portrait span{color:var(--color-muted-foreground)}
.person h2{margin-top:var(--space-4);text-wrap:balance}
.person .p-lead{color:var(--color-muted-foreground);margin-top:var(--space-5);max-width:52ch}
.person ul{list-style:none;padding:0;margin:var(--space-6) 0 0;display:flex;flex-direction:column;gap:var(--space-3)}
.person li{display:flex;gap:var(--space-3);color:var(--color-muted-foreground)}

.person li>span{min-width:0}
.person li b{color:var(--color-foreground);font-weight:var(--font-weight-semibold)}
.person li::before{content:"";width:var(--size-indicator-md);height:var(--size-indicator-md);flex:none;margin-top:2px;border-radius:var(--radius-round);background:var(--color-primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/16px no-repeat}


.kontakt{margin-top:var(--space-8)}
.k-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start}
.k-grid>*{min-width:0}
.k-grid h2{margin-top:var(--space-4);text-wrap:balance}
.k-lead{color:var(--color-muted-foreground);margin-top:var(--space-5);max-width:42ch}
.honeypot{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.mailto{display:flex;width:fit-content;max-width:100%;align-items:center;gap:var(--space-2);min-height:var(--size-target-web-touch);margin-top:var(--space-6);font:var(--type-heading-3);color:var(--color-link);overflow-wrap:anywhere}
.mailto i{width:var(--space-2);height:var(--space-2);flex:none;border-radius:var(--radius-round);background:var(--color-brand-signal)}
.mailto:hover span{color:var(--color-link-hover);text-decoration:underline;text-underline-offset:3px}
form{
  display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);
  background:var(--color-surface);border:var(--stroke-default) solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--elevation-sm);
  
  overflow-x:clip;overflow-clip-margin:var(--space-3);
}
.zeile{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.feld{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.feld label{color:var(--color-muted-foreground)}

.feld input,.feld textarea,.feld select{
  font:inherit;font-size:16px;color:var(--color-foreground);background:var(--color-surface-inset);
  border:var(--stroke-default) solid var(--color-border-strong);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);width:100%;min-height:var(--size-target-web-touch);
  transition:border-color var(--motion-duration-fast) var(--motion-easing-standard),background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.feld textarea{resize:vertical;min-height:var(--size-textarea-md)}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;background:var(--color-surface);border-color:var(--color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus) 24%,transparent)}

.field-hint,.field-error{font:var(--type-caption);margin:0}
.field-hint{color:var(--color-muted-foreground)}
.field-error{display:none;color:var(--color-danger-foreground)}
.feld :is(input,textarea,select):user-invalid:not(:focus){border-color:var(--color-danger-foreground);box-shadow:0 0 0 1px var(--color-danger-foreground)}
.feld :is(input,textarea):user-invalid:not(:focus)~.field-error{display:block}
.hinweis{font:var(--type-caption);color:var(--color-muted-foreground)}
#anfrage[aria-busy="true"] .pill{cursor:progress;opacity:.72}
#form-hinweis[data-state="error"]{color:var(--color-danger-foreground)}
#form-hinweis[data-state="success"]{color:var(--color-success-foreground)}


.foot{padding:0 0 var(--space-12)}
.foot-in{border-top:var(--stroke-default) solid var(--color-border);padding-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:center;font:var(--type-body);color:var(--color-muted-foreground)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin-left:auto;min-width:0}
.foot-links a{display:inline-flex;align-items:center;min-height:var(--size-target-web-touch);color:var(--color-muted-foreground);text-decoration:underline}
.foot-links a:hover{color:var(--color-link)}
.foot-links [aria-current="page"]{color:var(--color-foreground);text-decoration:underline;text-underline-offset:4px}


.rv{opacity:1;transform:none}
.reveal-ready .rv{opacity:0;transform:translateY(var(--motion-distance-medium));transition:opacity var(--motion-duration-page) var(--motion-easing-enter),transform var(--motion-duration-page) var(--motion-easing-enter)}
.reveal-ready .rv.on{opacity:1;transform:none}

@media (hover:hover){.reveal-ready .card.rv.on:hover{transform:translateY(calc(-1 * var(--motion-hover-lift)))}}


.legal-page{min-height:100svh;display:flex;flex-direction:column}

.legal-header{display:flex;align-items:center;padding-block:var(--space-2)}

@media (max-height:521px){.legal-header{padding-block:0}}
.legal-support{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-4)}

.legal-page .legal-support details:not([open]) .theme-menu{display:none}
.legal-page .legal-support .language-switch{flex-wrap:wrap}
.legal-page .legal-support .language-switch a{min-width:0;flex-basis:auto}

html:has(body.legal-page){scroll-padding-block-start:max(calc(var(--size-target-web-touch) + 3 * var(--space-2)),6em)}
.legal-page :is(a,input,summary,h1,h2){scroll-margin-block-start:max(calc(var(--size-target-web-touch) + 3 * var(--space-2)),6em)}
.legal-content{max-width:var(--size-content-reading);padding-block:clamp(2.5rem,7vw,5.5rem);flex:1;overflow-wrap:anywhere}
.legal-content h1{margin-top:var(--space-4)}
.legal-content h1+p{margin-top:var(--space-4)}
.legal-content section{margin-top:var(--space-10)}
.legal-content h2{margin-bottom:var(--space-4)}
.legal-content p+p{margin-top:var(--space-4)}

.legal-content a:not(.pill){text-decoration:underline;text-underline-offset:3px;color:var(--color-link)}
.legal-content a:not(.pill):hover{color:var(--color-link-hover)}

.legal-pending{background:var(--color-warning);border-left:3px solid var(--color-warning-foreground);color:var(--color-warning-foreground);padding:var(--space-4) var(--space-5);border-radius:0 var(--radius-md) var(--radius-md) 0}
.legal-pending,.legal-source{font:var(--type-body-small)}
.legal-source{margin-top:var(--space-10);color:var(--color-muted-foreground)}

.legal-header-bar{position:sticky;top:0;z-index:var(--layer-sticky);background:var(--color-surface-elevated);border-bottom:var(--stroke-default) solid var(--color-border);box-shadow:var(--elevation-sm)}


@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  
  ::view-transition-group(root){animation-duration:var(--motion-duration-standard);animation-timing-function:var(--motion-easing-standard)}
  .logo{view-transition-name:site-logo}
}


.result-status{width:var(--size-avatar-md);height:var(--size-avatar-md);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-round);margin-bottom:var(--space-4)}
.result-status svg{width:var(--icon-md);height:var(--icon-md);stroke:currentColor;stroke-width:var(--icon-stroke);fill:none;stroke-linecap:round;stroke-linejoin:round}
.result-status[data-state="success"]{background:var(--color-success);color:var(--color-success-foreground)}
.result-status[data-state="error"]{background:var(--color-danger);color:var(--color-danger-foreground)}

.result-recovery{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);margin-top:var(--space-6)}
.result-recovery .mailto{margin-top:0}


@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-in,.theme-toggle{background:var(--color-surface-elevated);border-color:var(--color-border);box-shadow:var(--elevation-sm)}
  .nav-in::before,.theme-toggle::after{display:none}
}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
  .nav-in,.theme-toggle{background:var(--color-surface-elevated);border-color:var(--color-border);box-shadow:var(--elevation-sm);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-in::before,.theme-toggle::after{display:none}
}
@media (forced-colors:active){
  .nav-in::before,.theme-toggle::after,.feature-panel::before{display:none}
}


@keyframes glowDriftHero{
  0%{opacity:.64;transform:scale(.94)}
  25%{opacity:.80;transform:scale(1.03)}
  50%{opacity:.88;transform:scale(1.08)}
  75%{opacity:.78;transform:scale(1.03)}
  100%{opacity:.66;transform:scale(.95)}
}
@keyframes glowDriftViolet{
  0%{opacity:.60;transform:scale(.92)}
  35%{opacity:.78;transform:scale(1.04)}
  65%{opacity:.86;transform:scale(1.10)}
  100%{opacity:.64;transform:scale(.94)}
}
@keyframes glowDriftRose{
  0%{opacity:.62;transform:scale(.93)}
  35%{opacity:.80;transform:scale(1.05)}
  65%{opacity:.88;transform:scale(1.10)}
  100%{opacity:.66;transform:scale(.95)}
}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap::after{animation:glowDriftHero var(--glow-drift-duration) ease-in-out infinite alternate}
  .feature-panel::after{animation:glowDriftViolet var(--glow-drift-duration) ease-in-out infinite alternate}
  .feature-inner::before{animation:glowDriftRose calc(var(--glow-drift-duration) * 1.3) ease-in-out infinite alternate}
}


@media (max-width:1023.98px){
  .nav{left:0;right:64px;padding-left:20px;padding-right:8px}
  .nav-in{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .nav-in>.logo{grid-column:1;grid-row:1}
  .nav-links{display:none}
  .nav-menu{display:block;grid-column:3;grid-row:1;justify-self:end}
  .nav .pill{grid-column:2;grid-row:1;margin:0}
  .theme-picker{right:12px}
  .feature-inner,.person,.k-grid{grid-template-columns:1fr}
  .portrait{width:min(100%,340px);margin-inline:auto}
  .person .ptext{order:-1}
  .feature-inner{gap:var(--space-10)}
  .feature-panel{padding:var(--space-12) var(--space-8);border-radius:var(--radius-xl)}
}
@media (max-width:767.98px){
  .zeile{grid-template-columns:1fr}
  .feature-panel{padding:var(--space-10) var(--space-6)}
  form{padding:var(--space-5)}
}
@media (max-width:560px){
  .section{padding-block:var(--space-10)}
  
  .nav{top:10px}
  .theme-picker{top:18px;right:12px}
  .nav-in{padding-left:16px}
  .nav .pill{padding-inline:12px;font-size:13px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .pill{width:100%}
}

@media (max-width:427.98px){
  :root{--nav-height:54px}
  .nav{right:64px;padding:0 8px 0 10px;top:10px}
  .theme-picker{top:10px;right:12px}
  .nav-in{grid-template-columns:1fr auto;gap:2px;padding:4px 6px}
  .nav .pill{display:none}
  .nav-menu{grid-column:2}
  .nav-menu-toggle{padding:0}
  .nav-menu-toggle>span:last-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media (max-width:389.98px){
  .feature-panel{padding:var(--space-8) var(--space-5)}
}

@media (min-width:1024px){
  .feature-panel{padding:var(--space-20) var(--space-16)}
}
@media (min-width:1280px){
  .feature-panel{padding:var(--space-24) var(--space-20)}
  .feature-inner{gap:var(--space-16)}
}

@media (prefers-reduced-motion:reduce){
  
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal-ready .rv{opacity:1;transform:none}
  .word span{transform:none}
  .hero-sub,.hero-cta,.nav-in{opacity:1;transform:none}
}