/* ===== Header / Navigation only ===== */

body > a.visually-hidden:focus{
  position:fixed !important;
  top:12px;
  left:12px;
  width:auto;
  height:auto;
  overflow:visible;
  clip:auto;
  clip-path:none;
  white-space:normal;
  margin:0;
  padding:.78rem 1rem;
  border-radius:14px;
  border:1px solid rgba(var(--brand-rgb), .28);
  background:rgba(10,14,22,.96);
  color:#fff;
  box-shadow:var(--shadow-panel);
  z-index:3000;
}

.main-header{
  position:fixed;
  top:.875rem;
  left:0;
  right:0;
  width:min(var(--container-max), 92vw);
  margin:0 auto;
  z-index:1000;
  border-radius:1.125rem;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(12,16,25,.78), rgba(15,19,29,.88));
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  box-shadow:
    0 22px 52px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base);
  isolation:isolate;
}

.main-header::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(20rem 12rem at 8% -10%, rgba(var(--brand-rgb), .10), transparent 55%),
    radial-gradient(18rem 10rem at 100% 0%, rgba(var(--brand-green-rgb), .07), transparent 55%);
  opacity:.9;
}

.main-header::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:900;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 3px 3px,
    rgba(0,0,0,.60);
  -webkit-backdrop-filter:blur(5px) saturate(.84);
  backdrop-filter:blur(5px) saturate(.84);
  transition:opacity var(--transition-base);
  will-change:opacity;
}

body.dropdown-open .nav-backdrop{
  opacity:1;
}

@media (max-width: 899px){
  .nav-backdrop{
    display:none;
  }
}

.main-header.is-scrolled{
  background:linear-gradient(180deg, rgba(10,14,22,.88), rgba(12,16,25,.94));
  border-color:rgba(255,255,255,.12);
  box-shadow:
    0 26px 62px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.main-header[data-nav-open="true"]{
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(10,14,22,.90), rgba(12,16,25,.96));
  box-shadow:
    0 30px 72px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.containerheader{
  position:relative;
  max-width:none;
  margin:0 auto;
  padding:.625rem 1rem;
  display:flex;
  align-items:center;
  gap:.875rem;
}

.containerheader > *{
  position:relative;
  z-index:1;
}

.logo{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.logo img{
  width:auto;
  height:2.75rem;
  display:block;
}

.main-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.nav-root{
  display:flex;
  align-items:center;
  justify-content:center;
  list-style:none;
  gap:18px;
}

.nav-root > li{
  position:relative;
}

.main-nav a{
  text-decoration:none;
  color:rgba(255,255,255,.92);
  font-size:.98rem;
  font-weight:760;
  line-height:1.2;
  transition:color var(--transition-base), opacity var(--transition-base);
}

.main-nav a:hover,
.main-nav a:focus-visible{
  color:#fff;
}

.nav-root > li > a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  justify-content:center;
  text-align:center;
  padding-inline:.15rem;
}

.has-sub > a::after{
  content:"▾";
  font-size:.78em;
  margin-left:.38rem;
  opacity:.72;
  transform:translateY(.02rem);
}

.has-sub::before{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:150px;
  height:24px;
  transform:translateX(-50%);
  pointer-events:auto;
}

.sub{
  position:absolute;
  left:50%;
  top:calc(100% + 20px);
  transform:translateX(-42%) translateY(10px);
  width:min(440px, calc(100vw - 32px));
  opacity:0;
  visibility:hidden;
  background:
    linear-gradient(180deg, rgba(7,13,23,.995), rgba(4,9,17,.998));
  border:1px solid rgba(118,169,229,.30);
  border-radius:14px;
  box-shadow:
    0 30px 74px rgba(0,0,0,.54),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 32px rgba(var(--brand-rgb), .08);
  padding:12px;
  transition:opacity var(--transition-base), transform var(--transition-base), visibility .18s step-end;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
}

@media (min-width: 900px){
  .sub{
    width:min(57.5rem, calc(100vw - 1.5rem));
    display:grid;
    grid-auto-flow:column;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:repeat(5, auto);
    column-gap:1.375rem;
    row-gap:8px;
    padding:24px;
  }
}

.sub::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 43%, rgba(var(--brand-rgb), .68) 48%, rgba(58,204,255,.62) 52%, transparent 57%) 50% 0 / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 30%);
  background-size:100% 2px, auto;
  opacity:.68;
}

@media (min-width: 900px){
  .sub::after{
    content:"";
    position:absolute;
    top:18px;
    bottom:18px;
    left:50%;
    width:1px;
    pointer-events:none;
    background:linear-gradient(
      180deg,
      transparent,
      rgba(125,187,255,.16) 18%,
      rgba(255,255,255,.075) 50%,
      rgba(125,187,255,.13) 82%,
      transparent
    );
  }
}

.sub li{
  list-style:none;
  position:relative;
  z-index:1;
}

@media (min-width: 900px){
  .sub li:nth-child(1)::before,
  .sub li:nth-child(6)::before{
    display:block;
    margin:0 0 9px 2px;
    color:rgba(58,174,255,.96);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.20em;
    line-height:1;
    text-transform:uppercase;
  }

  .sub li:nth-child(1)::before{
    content:"Sichtbarkeit & Autorität";
  }

  .sub li:nth-child(6)::before{
    content:"Shops & Websites";
  }
}

.sub a{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 20px;
  grid-template-rows:auto 1fr;
  column-gap:15px;
  row-gap:5px;
  align-items:center;
  min-height:92px;
  padding:13px 16px 13px 13px;
  border-radius:13px;
  font-weight:780;
  font-size:.98rem;
  color:rgba(255,255,255,.94);
  text-decoration:none;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  background:
    rgba(255,255,255,.032);
  border:1px solid rgba(126,160,202,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 24px rgba(0,0,0,.11);
}

.sub a::after{
  content:"→";
  grid-column:3;
  grid-row:1 / span 2;
  justify-self:end;
  align-self:center;
  color:rgba(255,255,255,.72);
  font-size:1.24rem;
  font-weight:430;
  line-height:1;
  transform:translateX(0);
  transition:
    color var(--transition-base),
    transform var(--transition-base);
}

.sub a:hover,
.sub a:focus-visible{
  background:
    rgba(255,255,255,.055);
  border-color:rgba(var(--brand-rgb), .30);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 28px rgba(0,0,0,.18);
}

.sub a:hover::after,
.sub a:focus-visible::after{
  color:#fff;
  transform:translateX(3px);
}

.sub a .item-title{
  grid-column:2;
  grid-row:1;
  line-height:1.1;
  align-self:end;
  font-size:1rem;
  font-weight:920;
  letter-spacing:-.018em;
}

.sub a .item-desc{
  grid-column:2;
  grid-row:2;
  margin-top:0;
  color:rgba(216,228,248,.74);
  font-weight:610;
  font-size:.875rem;
  line-height:1.38;
  align-self:start;
}

.sub a .icon{
  grid-column:1;
  grid-row:1 / span 2;
  width:2.75rem;
  height:2.75rem;
  padding:.4375rem;
  margin-top:0;
  align-self:center;
  border-radius:.875rem;
  border:1px solid rgba(126,160,202,.15);
  background:
    rgba(255,255,255,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 20px rgba(0,0,0,.16);
  opacity:1;
  flex:none;
  color:rgba(37,167,255,.98);
}

.sub a .icon--service{
  object-fit:contain;
}

.sub li:nth-child(2) a .icon,
.sub li:nth-child(5) a .icon{
  color:rgba(43,236,230,.98);
  border-color:rgba(126,160,202,.15);
  background:rgba(255,255,255,.045);
}

.sub li:nth-child(4) a .icon,
.sub li:nth-child(9) a .icon{
  color:rgba(177,95,255,.98);
  border-color:rgba(126,160,202,.15);
  background:rgba(255,255,255,.045);
}

.sub li:nth-child(7) a .icon{
  color:rgba(146,220,75,.98);
  border-color:rgba(126,160,202,.15);
  background:rgba(255,255,255,.045);
}

.sub li:nth-child(10) a .icon{
  color:rgba(255,147,54,.98);
  border-color:rgba(126,160,202,.15);
  background:rgba(255,255,255,.045);
}

.has-sub:hover > .sub,
.has-sub:focus-within > .sub,
.has-sub.open > .sub{
  opacity:1;
  visibility:visible;
  transform:translateX(-42%) translateY(0);
  transition:opacity var(--transition-base), transform var(--transition-base), visibility 0s;
}

.cta-button{
  flex:0 0 auto;
  margin-left:auto;
}

.main-header .button-angebot,
.mobile-nav .button-angebot{
  background:linear-gradient(180deg, rgba(var(--brand-rgb), .98), rgba(var(--brand-dark-rgb), .98));
  color:#fff;
  border:none;
  padding:11px 16px;
  border-radius:12px;
  cursor:pointer;
  font-size:.97rem;
  font-weight:840;
  line-height:1;
  transition:
    transform var(--transition-base),
    filter var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
  box-shadow:
    0 16px 36px rgba(var(--brand-rgb), .20),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

.main-header .button-angebot:hover,
.mobile-nav .button-angebot:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:
    0 20px 42px rgba(var(--brand-rgb), .26),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

.main-header .button-angebot:active,
.mobile-nav .button-angebot:active{
  transform:translateY(0);
}

.main-header .button-angebot:focus-visible,
.mobile-nav .button-angebot:focus-visible{
  outline:2px solid rgba(var(--brand-rgb), .88);
  outline-offset:2px;
}

.burger-menu{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  cursor:pointer;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  margin-left:2px;
  user-select:none;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

.burger-menu:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}

.burger-menu span{
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background-color:#fff;
  transition:transform var(--transition-base), opacity var(--transition-base), background-color var(--transition-base);
}

.burger-menu.active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.burger-menu.active span:nth-child(2){
  opacity:0;
}

.burger-menu.active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mobile-nav{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)) 16px;
  background:
    radial-gradient(420px 360px at 18% 0%, rgba(var(--brand-rgb), .18), transparent 62%),
    radial-gradient(460px 340px at 84% 100%, rgba(var(--brand-indigo-rgb), .14), transparent 60%),
    rgba(5,9,16,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(-8px);
  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1);
  overscroll-behavior:contain;
}

.mobile-nav.hidden{
  display:none !important;
}

.mobile-nav.open{
  opacity:1;
  transform:translateY(0);
}

.mobile-nav:focus{
  outline:none;
}

.mobile-panel{
  box-sizing:border-box;
  width:min(380px, 100%);
  max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(22rem 18rem at 82% 0%, rgba(var(--brand-rgb), .14), transparent 62%),
    linear-gradient(180deg, rgba(7,13,24,.98), rgba(5,10,18,.99));
  border:1px solid rgba(var(--brand-rgb), .22);
  border-radius:20px;
  box-shadow:
    0 26px 70px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 46px rgba(var(--brand-rgb), .10);
  position:relative;
  opacity:0;
  transform:translate3d(0, -14px, 0) scale(.985);
  transition:
    opacity .26s ease,
    transform .34s cubic-bezier(.22, 1, .36, 1);
  will-change:transform, opacity;
}

.mobile-nav.open .mobile-panel{
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1);
}

.mobile-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.20;
  mask-image:radial-gradient(36rem 24rem at 50% 18%, #000 54%, transparent 100%);
  -webkit-mask-image:radial-gradient(36rem 24rem at 50% 18%, #000 54%, transparent 100%);
}

.mobile-panel-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 16px 18px;
  background:
    linear-gradient(180deg, rgba(6,11,20,.96), rgba(7,13,23,.90));
  border-bottom:1px solid rgba(var(--brand-rgb), .18);
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

.mobile-panel-logo{
  display:inline-flex;
  align-items:center;
  min-width:0;
  text-decoration:none;
}

.mobile-panel-logo img{
  display:block;
  width:146px;
  height:auto;
}

.mobile-close{
  appearance:none;
  -webkit-appearance:none;
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(18,33,58,.90), rgba(10,18,34,.96));
  border:1px solid rgba(var(--brand-rgb), .42);
  border-radius:13px;
  box-shadow:
    0 14px 30px rgba(0,0,0,.28),
    0 0 24px rgba(var(--brand-rgb), .18),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:background-color var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.mobile-close:hover{
  background:linear-gradient(180deg, rgba(24,44,75,.92), rgba(12,22,40,.98));
  border-color:rgba(var(--brand-rgb), .62);
  transform:translateY(-1px);
}

.mobile-close:active{
  transform:translateY(0);
}

.mobile-panel ul{
  display:grid;
  gap:7px;
  list-style:none;
  margin:0;
  padding:16px 16px 14px;
  position:relative;
  z-index:1;
}

.mobile-panel ul a,
.mobile-panel ul button{
  display:grid;
  grid-template-columns:28px minmax(0, 1fr) 18px;
  column-gap:12px;
  align-items:center;
  width:100%;
  min-height:48px;
  padding:10px 14px;
  color:#fff;
  text-decoration:none;
  font-size:clamp(.96rem, 3.8vw, 1.04rem);
  font-weight:830;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(12,21,38,.76), rgba(8,15,28,.86));
  border:1px solid rgba(var(--brand-rgb), .16);
  cursor:pointer;
  opacity:0;
  transform:translate3d(0, 8px, 0);
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.22, 1, .36, 1),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.12);
}

.mobile-nav.open .mobile-panel ul a,
.mobile-nav.open .mobile-panel ul button{
  opacity:1;
  transform:translate3d(0, 0, 0);
}

.mobile-nav.open .mobile-panel ul li:nth-child(1) a{transition-delay:.04s, .04s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(3) a{transition-delay:.06s, .06s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(4) a{transition-delay:.075s, .075s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(5) a{transition-delay:.09s, .09s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(6) a{transition-delay:.105s, .105s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(7) a{transition-delay:.12s, .12s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(8) a{transition-delay:.135s, .135s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(9) a{transition-delay:.15s, .15s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(10) a{transition-delay:.165s, .165s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(11) a{transition-delay:.18s, .18s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(12) a{transition-delay:.195s, .195s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(15) a{transition-delay:.21s, .21s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(16) a{transition-delay:.225s, .225s, 0s, 0s, 0s;}
.mobile-nav.open .mobile-panel ul li:nth-child(17) a{transition-delay:.24s, .24s, 0s, 0s, 0s;}

.mobile-panel ul a::after{
  content:"›";
  justify-self:end;
  color:rgba(255,255,255,.72);
  font-size:1.55rem;
  font-weight:520;
  line-height:1;
  transform:translateY(-1px);
}

.mobile-panel ul a:hover,
.mobile-panel ul button:hover,
.mobile-panel ul a:focus-visible,
.mobile-panel ul button:focus-visible{
  background:
    linear-gradient(180deg, rgba(15,28,50,.88), rgba(9,18,34,.95));
  border-color:rgba(var(--brand-rgb), .34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 14px 28px rgba(0,0,0,.18),
    0 0 0 1px rgba(var(--brand-rgb), .07);
  transform:translateY(-1px);
}

.mobile-nav .icon{
  width:22px;
  height:22px;
  margin-top:0;
  opacity:.94;
  color:rgba(18,154,255,.98);
}

.mobile-nav .icon--service{
  object-fit:contain;
}

.mobile-group{
  margin:15px 2px 5px;
  padding:0;
  color:rgba(145,190,255,.82);
  opacity:1;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:transparent;
  border:none;
  animation:none;
}

.mobile-sep{
  height:2px;
}

.mobile-cta{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:center;
  padding:10px 16px 16px;
  background:
    linear-gradient(180deg, rgba(5,10,18,0), rgba(5,10,18,.92) 32%),
    rgba(5,10,18,.84);
  backdrop-filter:blur(6px);
  border-top:1px solid rgba(var(--brand-rgb), .12);
  z-index:1;
}

.button--full{
  width:100%;
  min-height:52px;
  padding:14px 16px;
}

.mobile-nav .button--full{
  display:grid;
  grid-template-columns:28px minmax(0, 1fr) 18px;
  align-items:center;
  column-gap:12px;
  text-align:left;
  border-radius:11px;
  background:
    linear-gradient(135deg, rgba(34,161,255,.98), rgba(0,93,238,.98));
  border:1px solid rgba(151,214,255,.30);
  box-shadow:
    0 18px 34px rgba(0,123,255,.32),
    0 0 30px rgba(0,132,255,.22),
    inset 0 1px 0 rgba(255,255,255,.20);
  opacity:0;
  transform:translate3d(0, 10px, 0);
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.22, 1, .36, 1),
    filter var(--transition-base),
    box-shadow var(--transition-base);
}

.mobile-nav.open .button--full{
  opacity:1;
  transform:translate3d(0, 0, 0);
  transition-delay:.27s, .27s, 0s, 0s;
}

.mobile-nav .button--full::after{
  content:"›";
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  align-self:center;
  width:18px;
  height:18px;
  color:#fff;
  font-size:1.55rem;
  font-weight:520;
  line-height:1;
}

.mobile-nav .button--full .icon{
  color:#fff;
  width:22px;
  height:22px;
}

.mobile-nav .button--full span{
  min-width:0;
}

body.nav-open{
  overflow:hidden;
}

@media (max-width: 1220px){
  .nav-root{
    gap:14px;
  }

  .main-nav a{
    font-size:.95rem;
  }

  .main-header .button-angebot{
    padding:10px 14px;
    font-size:.93rem;
  }
}

@media (max-width: 1120px){
  .main-nav{
    display:none;
  }

  .burger-menu{
    display:flex;
  }
}

@media (max-width: 768px){
  .main-header,
  .main-header.is-scrolled,
  .main-header[data-nav-open="true"],
  .mobile-nav,
  .mobile-cta{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .main-header{
    top:12px;
    width:min(var(--container-max), 92vw);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(12,16,25,.94), rgba(15,19,29,.97));
  }

  .mobile-nav{
    background:
      radial-gradient(560px 380px at 18% 8%, rgba(var(--brand-rgb), .14), transparent 58%),
      radial-gradient(560px 380px at 82% 92%, rgba(var(--brand-green-rgb), .12), transparent 58%),
      rgba(7,10,16,.94);
  }

  .containerheader{
    padding:8px 10px;
    gap:10px;
  }

  .logo img{
    height:38px;
  }

  .main-header .button-angebot{
    padding:9px 12px;
    font-size:.88rem;
  }
}

@media (max-width: 520px){
  .mobile-nav{
    align-items:flex-start;
    justify-content:center;
    padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .mobile-panel{
    width:100%;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height:calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius:20px;
    border-left:1px solid rgba(var(--brand-rgb), .22);
    border-right:1px solid rgba(var(--brand-rgb), .22);
    transform:translate3d(18px, 0, 0);
  }

  .mobile-panel-head{
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    padding-top:16px;
  }

  .logo img{
    height:35px;
  }

  .main-header .button-angebot{
    padding:8px 10px;
    font-size:.84rem;
  }

  .burger-menu{
    width:42px;
    height:42px;
  }

  .burger-menu span{
    width:20px;
  }
}

@media (prefers-reduced-motion: reduce){
  .mobile-nav,
  .mobile-close,
  .main-header .button-angebot,
  .mobile-nav .button-angebot,
  .main-header,
  .main-nav a,
  .sub,
  .mobile-panel ul a,
  .mobile-panel ul button,
  .burger-menu,
  .burger-menu span{
    transition:none !important;
    animation:none !important;
  }
}