/* =========================================================
   PSMweb Premium Studio Header · v4
   Farben: :root
   Menügrößen: .studio-circle-primary-link
   ========================================================= */
:root{
  --studio-navy:#07111F;
  --studio-navy-2:#0B1A2E;
  --studio-cyan:#5DD6FF;
  --studio-white:#FFFFFF;
  --studio-muted:#8FA9BF;
  --studio-line:#2A4A6B;
  --studio-header-h:76px;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--studio-header-h) + 28px);
}
body.menu-lock{overflow:hidden}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.studio-header{
  position:fixed;
  z-index:1600;
  top:calc(10px + env(safe-area-inset-top));
  left:50%;
  width:min(1380px,calc(100% - 28px));
  transform:translateX(-50%);
  color:var(--studio-white);
}
.studio-header-inner{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,24px);
  min-height:var(--studio-header-h);
  padding:10px 12px 10px 18px;
  border:1px solid transparent;
  border-radius:22px;
  transition:min-height .24s ease,padding .24s ease,background-color .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.studio-header.is-compact .studio-header-inner,
body.menu-lock .studio-header-inner{
  min-height:60px;
  padding-top:6px;
  padding-bottom:6px;
  background:rgba(7,17,31,.86);
  border-color:rgba(42,74,107,.72);
  box-shadow:0 14px 38px rgba(0,0,0,.24);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
.studio-logo-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-width:174px;
  min-height:44px;
  padding:4px 3px;
  border-radius:10px;
  text-decoration:none;
}
.studio-logo{
  display:block;
  width:174px;
  height:auto;
  max-height:44px;
  filter:none!important;
  opacity:1!important;
}
.studio-status{
  flex:1 1 auto;
  min-width:0;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  color:var(--studio-muted);
  font-size:12px;
  font-weight:560;
  letter-spacing:.01em;
  white-space:nowrap;
}
.studio-status-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--studio-cyan);
  animation:studioStatusPulse 1.8s ease-in-out infinite;
}
.studio-status-copy{
  width:min(510px,100%);
  min-width:0;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.42em;
  overflow:hidden;
}
.studio-status-text,
.studio-status-link{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.studio-status-link{
  flex:0 0 auto;
  color:var(--studio-cyan);
  text-decoration:none;
}
.studio-status-copy.is-blinking .studio-status-text,
.studio-status-copy.is-blinking .studio-status-link{
  animation:studioStatusBlink .5s linear both;
}
.studio-status-copy.is-exiting .studio-status-text,
.studio-status-copy.is-exiting .studio-status-link{
  opacity:0;
  transition:opacity .45s ease;
}
@keyframes studioStatusPulse{0%,100%{opacity:.34}50%{opacity:1}}
@keyframes studioStatusBlink{0%{opacity:0}38%{opacity:1}62%{opacity:.25}100%{opacity:1}}

.studio-menu-button{
  flex:0 0 auto;
  min-width:104px;
  min-height:46px;
  padding:0 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(93,214,255,.48);
  border-radius:999px;
  background:rgba(7,17,31,.74);
  color:var(--studio-cyan);
  font:700 13px/1 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.03em;
  cursor:pointer;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.studio-menu-button:hover{
  background:rgba(11,26,46,.96);
  border-color:var(--studio-cyan);
  transform:translateY(-1px);
}
body.menu-lock .studio-menu-button{
  background:var(--studio-navy);
  color:var(--studio-cyan);
  border-color:rgba(7,17,31,.64);
}
.studio-logo-link:focus-visible,
.studio-menu-button:focus-visible,
.studio-circle-menu a:focus-visible,
.studio-submenu-toggle:focus-visible,
.studio-hero-cta:focus-visible{
  outline:2px solid var(--studio-cyan);
  outline-offset:4px;
}

/* Vollbild-Kreismenü. Das komplette Markup bleibt immer im DOM/HTML. */
.studio-circle-menu{
  --menu-origin-x:calc(100vw - 90px);
  --menu-origin-y:56px;
  position:fixed;
  inset:0;
  z-index:1500;
  padding:
    calc(118px + env(safe-area-inset-top))
    max(28px,6vw)
    max(32px,calc(24px + env(safe-area-inset-bottom)));
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--studio-cyan);
  color:var(--studio-navy);
  clip-path:circle(0 at var(--menu-origin-x) var(--menu-origin-y));
  visibility:hidden;
  pointer-events:none;
  transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s linear .85s;
}
.studio-circle-menu.is-open{
  visibility:visible;
  pointer-events:auto;
  clip-path:circle(150vmax at var(--menu-origin-x) var(--menu-origin-y));
  transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s;
}
.studio-circle-inner{
  width:min(1180px,100%);
  min-height:calc(100dvh - 160px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:26px;
}
.studio-circle-primary{
  width:min(920px,100%);
  margin:0;
  padding:0;
  list-style:none;
}
.studio-circle-item{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 48px;
  align-items:center;
  column-gap:10px;
  border-bottom:1px solid rgba(7,17,31,.18);
  opacity:0;
  transform:translateY(20px);
}
.studio-circle-menu.is-open .studio-circle-item{
  opacity:1;
  transform:none;
  transition:transform .68s cubic-bezier(.2,.8,.2,1),opacity .42s ease;
}
.studio-circle-menu.is-open .studio-circle-item:nth-child(1){transition-delay:.15s}
.studio-circle-menu.is-open .studio-circle-item:nth-child(2){transition-delay:.22s}
.studio-circle-menu.is-open .studio-circle-item:nth-child(3){transition-delay:.29s}
.studio-circle-menu.is-open .studio-circle-item:nth-child(4){transition-delay:.36s}
.studio-circle-number{
  color:rgba(7,17,31,.54);
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
}
.studio-circle-primary-link{
  width:max-content;
  max-width:100%;
  min-height:78px;
  display:inline-flex;
  align-items:center;
  color:var(--studio-navy);
  text-decoration:none;
  font-size:clamp(38px,5.3vw,76px);
  font-weight:850;
  line-height:.98;
  letter-spacing:-.045em;
}
.studio-submenu-toggle{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(7,17,31,.34);
  border-radius:50%;
  background:transparent;
  color:var(--studio-navy);
  cursor:pointer;
}
.studio-plus{
  position:relative;
  width:18px;
  height:18px;
  display:block;
  transition:transform .3s cubic-bezier(.7,0,.2,1);
}
.studio-plus::before,
.studio-plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.studio-plus::after{
  transform:translate(-50%,-50%) rotate(90deg);
  transition:opacity .22s ease,transform .3s cubic-bezier(.7,0,.2,1);
}
.studio-submenu-toggle[aria-expanded="true"] .studio-plus{transform:rotate(180deg)}
.studio-submenu-toggle[aria-expanded="true"] .studio-plus::after{
  opacity:0;
  transform:translate(-50%,-50%) rotate(180deg);
}

/* Kein display:none: Links bleiben im HTML/DOM und werden nur visuell eingeklappt. */
.studio-submenu-panel{
  grid-column:2 / 4;
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  visibility:hidden;
  transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1),opacity .25s ease,visibility 0s linear .38s;
}
.studio-submenu-panel.is-open{
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1),opacity .28s ease,visibility 0s;
}
.studio-submenu-panel-inner{overflow:hidden}
.studio-submenu-list{
  margin:0;
  padding:2px 0 18px;
  display:flex;
  flex-wrap:wrap;
  gap:7px 18px;
  list-style:none;
}
.studio-submenu-list a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:rgba(7,17,31,.78);
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  line-height:1.3;
}
.studio-submenu-list a:hover{color:var(--studio-navy)}

.studio-circle-footer{
  width:min(920px,100%);
  padding-top:8px;
  display:flex;
  justify-content:flex-end;
}
.studio-circle-cta{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  color:var(--studio-navy);
  text-decoration:none;
  font-size:15px;
  font-weight:800;
}

/* Rollende Wörter */
.roll-text{
  position:relative;
  display:inline-block;
  height:1.12em;
  overflow:hidden;
  vertical-align:middle;
  line-height:1.08;
}
.roll-text-current,
.roll-text-next{
  display:block;
  transform:translateY(0);
  transition:transform .45s cubic-bezier(.7,0,.2,1),color .45s ease;
}
.roll-text-next{
  position:absolute;
  top:100%;
  left:0;
  color:var(--studio-cyan);
}
.studio-circle-menu .roll-text-next{color:rgba(7,17,31,.58)}
.roll-trigger:hover .roll-text-current,
.roll-trigger:focus-visible .roll-text-current,
.roll-trigger.is-roll-active .roll-text-current{transform:translateY(-100%)}
.roll-trigger:hover .roll-text-next,
.roll-trigger:focus-visible .roll-text-next,
.roll-trigger.is-roll-active .roll-text-next{transform:translateY(-100%)}

/* Startseiten-Hero */
.hero.studio-hero{
  position:relative!important;
  isolation:isolate;
  width:100%!important;
  max-width:none!important;
  min-height:100svh!important;
  margin:0!important;
  padding:
    calc(146px + env(safe-area-inset-top))
    max(24px,7vw)
    clamp(70px,9vw,120px)!important;
  display:flex!important;
  align-items:flex-end!important;
  overflow:hidden!important;
  background:var(--studio-navy)!important;
}
.studio-hero .hero-background-image{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  filter:saturate(.9) contrast(1.03) brightness(.78)!important;
  transform:none!important;
  pointer-events:none!important;
}
.hero.studio-hero::before{
  content:"";
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  height:auto!important;
  background:
    linear-gradient(90deg,rgba(5,13,24,.96) 0%,rgba(7,17,31,.88) 34%,rgba(7,17,31,.43) 66%,rgba(7,17,31,.26) 100%),
    linear-gradient(180deg,rgba(7,17,31,.16) 0%,rgba(7,17,31,.20) 48%,rgba(7,17,31,.72) 100%)!important;
  pointer-events:none;
}
.hero.studio-hero::after{display:none!important}
.studio-hero-content{
  position:relative;
  z-index:2;
  width:min(900px,100%);
  color:var(--studio-white);
}
.studio-hero-eyebrow{
  margin:0 0 22px;
  color:var(--studio-cyan);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(12px);
  animation:studioHeroMetaIn .8s ease 1.02s forwards;
}
.studio-hero-title{
  margin:0!important;
  max-width:940px!important;
  color:var(--studio-white)!important;
  font-size:clamp(3.4rem,7.1vw,7.2rem)!important;
  font-weight:900!important;
  line-height:.92!important;
  letter-spacing:-.06em!important;
  text-wrap:balance;
}
.studio-hero-line-mask{
  display:block;
  overflow:hidden;
  padding-bottom:.05em;
}
.studio-hero-line{
  display:block;
  transform:translateY(110%);
  animation:studioHeroLineIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.studio-hero-line-mask:nth-child(1) .studio-hero-line{animation-delay:.08s}
.studio-hero-line-mask:nth-child(2) .studio-hero-line{animation-delay:.20s}
.studio-hero-line-mask:nth-child(3) .studio-hero-line{animation-delay:.32s;color:var(--studio-cyan)}
@keyframes studioHeroLineIn{to{transform:translateY(0)}}
@keyframes studioHeroMetaIn{to{opacity:1;transform:translateY(0)}}
.studio-hero-subline,
.studio-hero-support,
.studio-hero-actions,
.studio-hero-footline{
  opacity:0;
  transform:translateY(12px);
  animation:studioHeroMetaIn .8s ease forwards;
}
.studio-hero-subline{
  max-width:650px;
  margin:27px 0 0;
  color:#DCEAF3;
  font-size:clamp(1.05rem,1.8vw,1.28rem);
  font-weight:420;
  line-height:1.6;
  animation-delay:1.10s;
}
.studio-hero-support{
  max-width:680px;
  margin:10px 0 0;
  color:var(--studio-muted);
  font-size:.95rem;
  line-height:1.62;
  animation-delay:1.18s;
}
.studio-hero-actions{margin-top:28px;animation-delay:1.26s}
.studio-hero-cta{
  min-height:54px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--studio-cyan);
  border-radius:999px;
  background:var(--studio-cyan);
  color:var(--studio-navy)!important;
  text-decoration:none;
  font-size:14px;
  font-weight:820;
}
.studio-hero-cta .roll-text-next{color:var(--studio-navy-2)}
.studio-hero-footline{
  width:min(650px,100%);
  margin-top:34px;
  padding-top:15px;
  border-top:1px solid rgba(42,74,107,.85);
  color:var(--studio-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  animation-delay:1.34s;
}

/* Ankerabstand unter dem festen Header */
#leistungen,#beispiele,#design-studies,#pakete,#paketvergleich,#starter-website,
#unternehmenswebsite-plus,#online-shop-paket,#ablauf,#profil,#anfrage,#packageFinder,#projectForm{
  scroll-margin-top:calc(var(--studio-header-h) + 28px);
}

/* Rechtseiten: Platz für festen Header */
.studio-circle-menu + .legal-hero{
  padding-top:calc(150px + env(safe-area-inset-top))!important;
}

@media(max-width:820px){
  :root{--studio-header-h:64px}
  .studio-header{
    top:calc(8px + env(safe-area-inset-top));
    width:calc(100% - 16px);
  }
  .studio-header-inner{
    gap:6px;
    min-height:64px;
    padding:6px 7px 6px 9px;
    border-radius:18px;
  }
  .studio-header.is-compact .studio-header-inner,
  body.menu-lock .studio-header-inner{min-height:58px}
  .studio-logo-link{min-width:96px;min-height:44px}
  .studio-logo{width:112px;max-height:34px}
  .studio-status{font-size:10px;gap:5px}
  .studio-status-dot{width:6px;height:6px}
  .studio-status-copy{width:100%;justify-content:center}
  .studio-menu-button{min-width:72px;min-height:44px;padding:0 12px;font-size:11.5px}
  .studio-circle-menu{
    padding:
      calc(96px + env(safe-area-inset-top))
      16px
      max(24px,calc(18px + env(safe-area-inset-bottom)));
  }
  .studio-circle-inner{
    min-height:calc(100dvh - 122px);
    justify-content:flex-start;
    gap:20px;
  }
  .studio-circle-primary{width:100%}
  .studio-circle-item{
    grid-template-columns:30px minmax(0,1fr) 44px;
    column-gap:6px;
  }
  .studio-circle-primary-link{
    min-height:61px;
    font-size:clamp(30px,10.2vw,46px);
  }
  .studio-submenu-toggle{width:44px;height:44px}
  .studio-submenu-panel{grid-column:2 / 4}
  .studio-submenu-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px 12px;
    padding:0 0 13px;
  }
  .studio-submenu-list a{font-size:12px}
  .studio-circle-footer{justify-content:flex-start}
  .studio-circle-cta{font-size:13.5px}
  .hero.studio-hero{
    min-height:100svh!important;
    padding:
      calc(116px + env(safe-area-inset-top))
      18px
      58px!important;
    align-items:flex-end!important;
  }
  .studio-hero .hero-background-image{
    object-position:68% center!important;
    filter:saturate(.88) contrast(1.02) brightness(.68)!important;
  }
  .hero.studio-hero::before{
    background:
      linear-gradient(90deg,rgba(5,13,24,.96) 0%,rgba(7,17,31,.80) 66%,rgba(7,17,31,.44) 100%),
      linear-gradient(180deg,rgba(7,17,31,.20),rgba(7,17,31,.28) 48%,rgba(7,17,31,.78) 100%)!important;
  }
  .studio-hero-title{font-size:clamp(2.9rem,13.5vw,5rem)!important}
  .studio-hero-subline{font-size:1rem}
  .studio-hero-support{font-size:.88rem}
  .studio-hero-cta{width:100%;min-height:52px}
  .studio-hero-footline{font-size:9.5px;letter-spacing:.06em}
  .studio-circle-menu + .legal-hero{
    padding-top:calc(128px + env(safe-area-inset-top))!important;
  }
}
@media(max-width:390px){
  .studio-logo-link{min-width:86px}
  .studio-logo{width:98px}
  .studio-status{font-size:9.4px}
  .studio-menu-button{min-width:68px;padding-inline:10px}
  .studio-submenu-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .studio-status-dot{animation:none!important;opacity:1}
  .studio-circle-menu{transition:none!important}
  .studio-circle-menu.is-open{clip-path:circle(150vmax at var(--menu-origin-x) var(--menu-origin-y))!important}
  .studio-circle-item,
  .studio-circle-menu.is-open .studio-circle-item{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .studio-submenu-panel{transition:none!important}
  .roll-text-current,.roll-text-next{transition:none!important}
  .studio-hero-line,
  .studio-hero-eyebrow,
  .studio-hero-subline,
  .studio-hero-support,
  .studio-hero-actions,
  .studio-hero-footline{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* =========================================================
   MOBILE POLISH + HERO SHARPNESS · 2026-10-01
   ========================================================= */

/* Das vorhandene 1024×576-WebP wird nicht mehr zusätzlich weichgerechnet. */
.studio-hero .hero-background-image{
  filter:none!important;
  image-rendering:auto;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Mobil: Kopfzeile kompakter, Status bekommt garantiert Platz. */
@media(max-width:820px){
  .studio-header{
    top:calc(6px + env(safe-area-inset-top));
    width:calc(100% - 12px);
  }
  .studio-header-inner{
    min-height:58px;
    padding:5px 6px 5px 7px;
    gap:4px;
    border-radius:16px;
  }
  .studio-header.is-compact .studio-header-inner,
  body.menu-lock .studio-header-inner{
    min-height:54px;
    padding-top:4px;
    padding-bottom:4px;
  }
  .studio-logo-link{
    flex:0 0 94px;
    min-width:94px;
    min-height:44px;
    padding:2px 0;
  }
  .studio-logo{
    width:94px;
    max-height:30px;
  }
  .studio-status{
    flex:1 1 auto;
    min-width:0;
    height:44px;
    gap:4px;
    color:#D5E5EF;
    font-size:10.2px;
    font-weight:700;
    letter-spacing:0;
  }
  .studio-status-dot{
    width:6px;
    height:6px;
  }
  .studio-status-copy{
    width:100%;
    min-width:0;
    height:20px;
    justify-content:center;
    overflow:hidden;
  }
  .studio-status-text,
  .studio-status-link{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .studio-status-link{
    color:var(--studio-cyan);
    font-weight:800;
  }
  .studio-menu-button{
    flex:0 0 68px;
    min-width:68px;
    min-height:44px;
    padding:0 9px;
    font-size:11px;
  }

  /* Hero bewusst kompakter, damit die komplette erste Ansicht auf kleinen Displays passt. */
  .hero.studio-hero{
    min-height:100svh!important;
    padding:
      calc(92px + env(safe-area-inset-top))
      16px
      28px!important;
    align-items:center!important;
  }
  .studio-hero .hero-background-image{
    object-position:64% center!important;
    filter:none!important;
  }
  .hero.studio-hero::before{
    background:
      linear-gradient(90deg,rgba(5,13,24,.94) 0%,rgba(7,17,31,.73) 62%,rgba(7,17,31,.30) 100%),
      linear-gradient(180deg,rgba(7,17,31,.12),rgba(7,17,31,.22) 52%,rgba(7,17,31,.70) 100%)!important;
  }
  .studio-hero-content{
    width:min(100%,620px);
  }
  .studio-hero-eyebrow{
    margin-bottom:12px;
    font-size:9.5px;
    letter-spacing:.14em;
  }
  .studio-hero-title{
    font-size:clamp(2.45rem,11.8vw,4.1rem)!important;
    line-height:.94!important;
    letter-spacing:-.052em!important;
  }
  .studio-hero-subline{
    margin-top:16px;
    font-size:.94rem;
    line-height:1.45;
  }
  .studio-hero-support{
    margin-top:7px;
    font-size:.78rem;
    line-height:1.5;
  }
  .studio-hero-actions{
    margin-top:17px;
  }
  .studio-hero-cta{
    min-height:46px;
    padding:0 17px;
    font-size:12.5px;
  }
  .studio-hero-footline{
    margin-top:18px;
    padding-top:11px;
    font-size:8.7px;
    line-height:1.45;
    letter-spacing:.04em;
  }

  /* Kreis-Menü: Hauptpunkte passen geschlossen vollständig auf typische Handydisplays. */
  .studio-circle-menu{
    padding:
      calc(76px + env(safe-area-inset-top))
      12px
      max(16px,calc(12px + env(safe-area-inset-bottom)));
  }
  .studio-circle-inner{
    min-height:calc(100dvh - 98px);
    gap:11px;
  }
  .studio-circle-item{
    grid-template-columns:26px minmax(0,1fr) 44px;
    column-gap:4px;
  }
  .studio-circle-primary-link{
    min-height:52px;
    font-size:clamp(27px,8.9vw,38px);
    letter-spacing:-.04em;
  }
  .studio-circle-number{
    font-size:9px;
  }
  .studio-submenu-list{
    padding:0 0 8px;
    gap:0 8px;
  }
  .studio-submenu-list a{
    min-height:38px;
    font-size:11.3px;
  }
  .studio-circle-footer{
    padding-top:2px;
  }
  .studio-circle-cta{
    min-height:44px;
    font-size:12.5px;
  }
}

/* Besonders kurze Handydisplays (z. B. kleine iPhones): noch kompakter. */
@media(max-width:820px) and (max-height:740px){
  .hero.studio-hero{
    padding:
      calc(80px + env(safe-area-inset-top))
      14px
      20px!important;
  }
  .studio-hero-eyebrow{margin-bottom:8px;font-size:8.8px}
  .studio-hero-title{font-size:clamp(2.12rem,10.5vw,3.35rem)!important}
  .studio-hero-subline{margin-top:11px;font-size:.88rem}
  .studio-hero-support{margin-top:5px;font-size:.72rem;line-height:1.42}
  .studio-hero-actions{margin-top:12px}
  .studio-hero-cta{min-height:44px}
  .studio-hero-footline{margin-top:12px;padding-top:9px;font-size:8px}

  .studio-circle-menu{
    padding-top:calc(68px + env(safe-area-inset-top));
  }
  .studio-circle-primary-link{
    min-height:47px;
    font-size:clamp(25px,8.2vw,34px);
  }
  .studio-circle-inner{gap:7px}
}

/* Sehr schmale Geräte: Logo und Button bleiben stabil, Status bleibt in der Mitte sichtbar. */
@media(max-width:370px){
  .studio-logo-link{flex-basis:82px;min-width:82px}
  .studio-logo{width:82px}
  .studio-menu-button{flex-basis:62px;min-width:62px;padding-inline:7px;font-size:10.3px}
  .studio-status{font-size:9.4px}
  .studio-hero-title{font-size:clamp(2.08rem,10.8vw,3rem)!important}
}