:root{
  --header-floating-surface-light:rgba(255,255,255,.78);
  --header-floating-surface-dark:rgba(0,0,0,.34);
  --header-shadow-light:0 18px 50px rgba(15,23,42,.08);
  --header-shadow-dark:0 18px 50px rgba(0,0,0,.3);
}
.site-header{
  --site-header-fg:#09090b;
  --site-header-muted:rgba(9,9,11,.72);
  --site-header-surface:var(--header-floating-surface-light);
  --site-header-shadow:var(--header-shadow-light);
  --site-header-border:rgba(9,9,11,.08);
  --site-header-logo-filter:brightness(0);
  transform:translateY(0);
}
.site-header.is-hidden{transform:translateY(-100%)}
@media (min-width:1024px){.site-header.is-hidden{transform:translateY(0)}}
.site-header.is-on-dark{
  --site-header-fg:#fff;
  --site-header-muted:rgba(255,255,255,.86);
  --site-header-surface:var(--header-floating-surface-dark);
  --site-header-shadow:var(--header-shadow-dark);
  --site-header-border:rgba(255,255,255,.14);
  --site-header-logo-filter:brightness(0) invert(1);
}
.site-header__shell{
  max-width:1360px;
  margin:0 auto;
  padding-top:1rem;
  padding-left:0;
  padding-right:0;
  transition:max-width 500ms ease-out,padding 500ms ease-out;
}
.site-header.is-floating .site-header__shell{
  max-width:934px;
  padding-left:1rem;
  padding-right:1rem;
}
.site-header__pill{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.625rem 1.25rem;
  color:var(--site-header-fg);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:border-radius 500ms ease-out,background 500ms ease-out,box-shadow 500ms ease-out,backdrop-filter 500ms ease-out,color 240ms ease-out;
}
.site-header.is-floating .site-header__pill{
  border-radius:9999px;
  background:var(--site-header-surface);
  box-shadow:var(--site-header-shadow);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
}
.site-header.is-floating .site-header__pill::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid var(--site-header-border);
  pointer-events:none;
}
.site-header__brand-link{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
}
.site-brand{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.site-brand-mark{
  display:block;
  width:2.15rem;
  height:2.125rem;
  overflow:hidden;
  flex:0 0 auto;
}
.site-brand-wordmark{
  display:none;
}
.boulli-symbol{
  display:block;
  height:100%;
  width:auto;
  max-width:none;
  filter:var(--site-header-logo-filter);
  transition:filter 240ms ease-out;
}
@media (min-width:1024px){
  .site-brand-wordmark{
    display:block;
    width:6.35rem;
    height:2.125rem;
    overflow:hidden;
    flex:0 0 auto;
    opacity:1;
    transform:translateX(0);
    transition:width 500ms ease-out,opacity 300ms ease-out,transform 500ms ease-out;
  }
  .site-brand-wordmark .boulli-symbol-wordmark{
    margin-left:-2.18rem;
  }
  .site-header.is-floating .site-brand-wordmark{
    width:0;
    opacity:0;
    transform:translateX(-0.35rem);
  }
}
.site-header__nav{
  display:none;
  align-items:center;
  gap:2.5rem;
}
.site-header__theme-toggle,
.site-header__mobile-theme-toggle{
  display:flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem;
  border-radius:9999px;
  border:1px solid color-mix(in srgb,var(--site-header-fg) 12%,transparent);
  background:color-mix(in srgb,var(--site-header-fg) 4%,transparent);
}
.site-header__theme-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:9999px;
  color:var(--site-header-muted);
  transition:background-color 180ms ease-out,color 180ms ease-out,transform 180ms ease-out;
}
.site-header__theme-button svg{
  width:1.15rem;
  height:1.15rem;
}
.site-header__theme-button:hover{
  color:var(--site-header-fg);
  transform:translateY(-1px);
}
.site-header__theme-button.is-active{
  color:var(--site-header-fg);
  background:color-mix(in srgb,var(--site-header-fg) 12%,transparent);
}
.site-header__nav a,
.site-header__nav button{
  white-space:nowrap;
  font-size:17px;
  font-weight:500;
  color:var(--site-header-muted);
  transition:color 240ms ease-out;
}
.site-header__nav button{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
  text-align:left;
}
.site-header__nav a:hover,
.site-header__nav button:hover,
.site-header__nav a[aria-current="page"]{
  color:var(--site-header-fg);
}
.site-header__cta{
  display:none;
  position:relative;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:3rem;
  padding:0 1.15rem;
  border-radius:9999px;
  font-size:17px;
  font-weight:600;
  color:var(--site-header-fg);
  border:1px solid color-mix(in srgb,var(--site-header-fg) 18%,transparent);
  transition:background-color 240ms ease-out,color 240ms ease-out,border-color 240ms ease-out,transform 240ms ease-out;
}
.site-header__cta:hover{
  transform:translateY(-1px);
  background:var(--site-header-fg);
  color:var(--site-header-surface);
}
.site-header__mobile-button{
  display:flex;
  width:2.5rem;
  height:2.5rem;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.35rem;
  color:var(--site-header-fg);
}
.site-header__mobile-button span{
  display:block;
  width:1.5rem;
  height:1.5px;
  border-radius:9999px;
  background:currentColor;
  transition:transform 240ms ease-out,opacity 240ms ease-out;
}
.site-header.is-menu-open .site-header__mobile-button span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.site-header.is-menu-open .site-header__mobile-button span:nth-child(2){
  opacity:0;
}
.site-header.is-menu-open .site-header__mobile-button span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
.site-header__mobile-menu{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  pointer-events:none;
  transition:grid-template-rows 300ms ease-out,opacity 240ms ease-out;
}
.site-header.is-menu-open .site-header__mobile-menu{
  grid-template-rows:1fr;
  opacity:1;
  pointer-events:auto;
}
.site-header__mobile-menu-inner{
  min-height:0;
  overflow:hidden;
}
.site-header__mobile-panel{
  margin-top:.75rem;
  border-radius:1.5rem;
  padding:1rem;
  background:var(--site-header-surface);
  box-shadow:var(--site-header-shadow);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  border:1px solid var(--site-header-border);
}
.site-header__mobile-links{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.site-header__mobile-links a,
.site-header__mobile-links button,
.site-header__mobile-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:3rem;
  border-radius:9999px;
  padding:0 1rem;
  color:var(--site-header-fg);
}
.site-header__mobile-links button{
  width:100%;
  background:none;
  border:0;
  font:inherit;
  cursor:pointer;
  text-align:left;
}
.site-header__mobile-links a[aria-current="page"]{
  background:color-mix(in srgb,var(--site-header-fg) 10%,transparent);
}
.site-header__mobile-cta{
  margin-top:.75rem;
  justify-content:center;
  background:var(--site-header-fg);
  color:var(--site-header-surface);
  font-weight:600;
}
.site-header__mobile-theme-toggle{
  width:max-content;
  margin-bottom:.75rem;
}
@media (min-width:1024px){
  .site-header__nav{display:flex}
  .site-header__theme-toggle{display:flex}
  .site-header__cta{display:inline-flex}
  .site-header__mobile-button,
  .site-header__mobile-menu,
  .site-header__mobile-theme-toggle{display:none}
}
@media (max-width:1023px){
  .site-header__shell{padding-left:0;padding-right:0}
  .site-header__theme-toggle{display:none}
}



@media (max-width:1023px){
  .site-header{
    --site-header-mobile-bg:#f6f5f1;
    --site-header-mobile-fg:#050505;
    --site-header-mobile-line:rgba(5,5,5,.16);
    --site-header-mobile-topbar-h:4.85rem;
  }
  .dark .site-header{
    --site-header-mobile-bg:#050505;
    --site-header-mobile-fg:#f8f8f5;
    --site-header-mobile-line:rgba(248,248,245,.18);
  }
  .site-header__mobile-menu{
    position:fixed;
    inset:var(--site-header-mobile-topbar-h) 0 0;
    display:block;
    grid-template-rows:1fr;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 180ms ease,visibility 0s linear 180ms;
    z-index:1;
  }
  .site-header__mobile-menu-inner{
    height:calc(100dvh - var(--site-header-mobile-topbar-h));
    min-height:calc(100dvh - var(--site-header-mobile-topbar-h));
    overflow:auto;
  }
  .site-header__mobile-panel{
    min-height:calc(100dvh - var(--site-header-mobile-topbar-h));
    margin-top:0;
    padding:0 0 1rem;
    border-radius:0;
    background:var(--site-header-mobile-bg);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:0;
    display:grid;
    grid-template-rows:1fr auto;
    row-gap:1rem;
    opacity:0;
    transition:opacity 140ms ease;
  }
  html:has(.site-header.is-menu-open),
  html:has(.site-header.is-menu-open) body{
    overflow:hidden;
    overscroll-behavior:none;
  }
  .site-header.is-menu-open{
    z-index:120;
    bottom:0;
    min-height:100dvh;
    background:var(--site-header-mobile-bg);
    color:var(--site-header-mobile-fg);
  }
  .site-header.is-menu-open .site-header__shell{
    max-width:none;
    height:100%;
    min-height:100dvh;
    padding:0;
    display:flex;
    flex-direction:column;
  }
  .site-header.is-menu-open.is-floating .site-header__shell{
    padding:0;
  }
  .site-header.is-menu-open .site-header__pill{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:2.5rem minmax(0,1fr) 2.5rem;
    align-items:center;
    gap:.9rem;
    padding:1rem;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:var(--site-header-mobile-fg);
    border-bottom:1px solid var(--site-header-mobile-line);
  }
  .site-header.is-menu-open .site-header__pill::after{
    display:none;
  }
  .site-header.is-menu-open .site-header__brand-link{
    width:2.5rem;
    height:2.5rem;
  }
  .site-header.is-menu-open .site-brand{
    width:100%;
    justify-content:flex-start;
  }
  .site-header.is-menu-open .site-brand-mark{
    width:1.35rem;
    height:1.35rem;
  }
  .site-header.is-menu-open .site-brand-wordmark{
    display:none !important;
  }
  .site-header.is-menu-open .boulli-symbol{
    filter:brightness(0);
  }
  .dark .site-header.is-menu-open .boulli-symbol{
    filter:brightness(0) invert(1);
  }
  .site-header.is-menu-open .site-header__theme-toggle{
    display:flex;
    justify-self:center;
    align-items:center;
    gap:0;
    width:min(11.6rem,100%);
    padding:2px;
    border-radius:9999px;
    border:1.5px solid var(--site-header-mobile-fg);
    background:var(--site-header-mobile-fg);
    box-shadow:none;
  }
  .site-header.is-menu-open .site-header__theme-button{
    flex:1 1 50%;
    width:auto;
    height:2.35rem;
    padding:0 .95rem;
    border-radius:9999px;
    color:var(--site-header-mobile-bg);
    background:transparent;
    transform:none;
  }
  .site-header.is-menu-open .site-header__theme-button svg{
    display:none;
  }
  .site-header.is-menu-open .site-header__theme-button::after{
    content:attr(data-theme-toggle);
    display:block;
    font-size:.96rem;
    font-weight:500;
    line-height:1;
    text-transform:capitalize;
  }
  .site-header.is-menu-open .site-header__theme-button.is-active{
    color:var(--site-header-mobile-fg);
    background:var(--site-header-mobile-bg);
  }
  .site-header.is-menu-open .site-header__mobile-button{
    flex:0 0 2.5rem;
    min-width:2.5rem;
    min-height:2.5rem;
    aspect-ratio:1/1;
    width:2.5rem;
    height:2.5rem;
    border-radius:9999px;
    background:var(--site-header-mobile-fg);
    color:var(--site-header-mobile-bg);
    gap:.33rem;
  }
  .site-header.is-menu-open .site-header__mobile-button span{
    width:1.15rem;
    height:1.5px;
  }
  .site-header.is-menu-open .site-header__mobile-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity 180ms ease;
  }
  .site-header.is-menu-open .site-header__mobile-menu-inner{
    height:calc(100dvh - var(--site-header-mobile-topbar-h));
    min-height:calc(100dvh - var(--site-header-mobile-topbar-h));
    overflow:auto;
  }
  .site-header.is-menu-open .site-header__mobile-panel{
    min-height:calc(100dvh - var(--site-header-mobile-topbar-h));
    background:var(--site-header-mobile-bg);
    opacity:1;
  }
  .site-header.is-menu-open .site-header__mobile-theme-toggle{
    display:none !important;
  }
  .site-header.is-menu-open .site-header__mobile-links{
    align-self:end;
    padding:0 1rem .25rem;
    gap:0;
  }
  .site-header.is-menu-open .site-header__mobile-links button[data-contact-form]{
    display:none;
  }
  .site-header.is-menu-open .site-header__mobile-links a{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.35rem;
    min-height:4.15rem;
    padding:0;
    border-radius:0;
    border-bottom:1px solid var(--site-header-mobile-line);
    color:var(--site-header-mobile-fg);
    font-size:0;
    background:transparent;
  }
  .site-header.is-menu-open .site-header__mobile-links a:first-child{
    border-top:1px solid var(--site-header-mobile-line);
  }
  .site-header.is-menu-open .site-header__mobile-links a::after{
    display:block;
    font-size:clamp(2.3rem, 10vw, 3.7rem);
    font-weight:400;
    line-height:.92;
    letter-spacing:-0.055em;
    text-align:right;
  }
  .site-header.is-menu-open .site-header__mobile-links a[href="/"]::after{content:"START";}
  .site-header.is-menu-open .site-header__mobile-links a[href="/work"]::after{content:"ARBEITEN";}
  .site-header.is-menu-open .site-header__mobile-links a[href="/services"]::after{content:"LEISTUNGEN";}
  .site-header.is-menu-open .site-header__mobile-links a[href="/about"]::after{content:"STUDIO";}
  .site-header.is-menu-open .site-header__mobile-links a[aria-current="page"]{
    background:transparent;
  }
  .site-header.is-menu-open .site-header__mobile-links a[aria-current="page"]::before{
    content:"✦";
    display:block;
    flex:0 0 auto;
    font-size:1.45rem;
    line-height:1;
    transform:translateY(-.08em);
  }
  .site-header.is-menu-open .site-header__mobile-cta{
    margin:1rem;
    min-height:3.7rem;
    padding:0 .3rem 0 1.35rem;
    justify-content:space-between;
    border-radius:9999px;
    background:#050505;
    color:#f8f8f5;
    font-size:0;
    font-weight:500;
  }
  .dark .site-header.is-menu-open .site-header__mobile-cta{
    background:#f8f8f5;
    color:#050505;
  }
  .site-header.is-menu-open .site-header__mobile-cta::before{
    content:"Projekt anfragen";
    font-size:1rem;
    line-height:1;
  }
  .site-header.is-menu-open .site-header__mobile-cta::after{
    content:"→";
    display:grid;
    place-items:center;
    width:3.05rem;
    height:3.05rem;
    border-radius:9999px;
    background:#e7ff15;
    color:#050505;
    font-size:1.75rem;
    line-height:1;
  }
}