/* Handy-/Tablet-Menü (unter 1180 px): Vollbild unter dem Kopf, dunkler Verlauf, Einträge gleiten gestaffelt ein.
   Der Kopf hat backdrop-filter → position:fixed wäre auf den Kopf begrenzt; darum absolute + Bildschirmhöhe. */
@media (max-width:1179px){
  html:has(.hdr.is-open){overflow:hidden}
  .hdr.is-open{background:var(--kalk)}
  .hdr .hdr__nav,.hdr.is-open .hdr__nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    height:calc(100vh - var(--hh));height:calc(100dvh - var(--hh));max-height:none;overflow-y:auto;overscroll-behavior:contain;
    padding:12px 28px calc(28px + env(safe-area-inset-bottom));border:0;box-shadow:none;
    background:
      radial-gradient(120% 60% at 100% 0%,rgba(157,189,230,.22),transparent 60%),
      radial-gradient(90% 70% at 0% 100%,rgba(79,127,184,.40),transparent 65%),
      linear-gradient(165deg,#14171c 0%,#163a6b 55%,#1d4a86 100%);
    color:#fff;visibility:hidden;clip-path:circle(0% at calc(100% - 44px) -20px);
    transition:clip-path .55s cubic-bezier(.7,0,.25,1),visibility 0s linear .55s}
  .hdr.is-open .hdr__nav{visibility:visible;clip-path:circle(160% at calc(100% - 44px) -20px);
    transition:clip-path .7s cubic-bezier(.65,0,.2,1),visibility 0s}
  /* feine Höhenlinien als Hintergrund-Ornament */
  .hdr__nav::before{content:"";position:absolute;right:-30%;bottom:-10%;width:120%;aspect-ratio:1;pointer-events:none;border-radius:50%;
    background:repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(255,255,255,.05) 22px 23px);opacity:.9}

  .hdr__nav ul{position:relative;padding:0;counter-reset:m}
  .hdr__nav > ul > li{opacity:0;transform:translateY(22px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
  .hdr.is-open .hdr__nav > ul > li{opacity:1;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
  .hdr.is-open .hdr__nav > ul > li:nth-child(1){transition-delay:.18s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(2){transition-delay:.24s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(3){transition-delay:.30s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(4){transition-delay:.36s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(5){transition-delay:.42s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(6){transition-delay:.48s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(7){transition-delay:.54s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(8){transition-delay:.60s}

  .hdr__nav > ul > li > a{display:flex;align-items:baseline;gap:14px;padding:15px 0;color:#fff;
    font:600 clamp(24px,6.6vw,32px)/1.1 var(--sora);letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.12)}
  .hdr__nav > ul > li > a::before{counter-increment:m;content:"0" counter(m);font:500 11px/1 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.45);transform:translateY(-.9em)}
  .hdr__nav > ul > li > a svg{display:none}
  .hdr__nav > ul > li > a:hover,.hdr__nav > ul > li > a:focus-visible{color:var(--blau-d)}
  .hdr__nav > ul > li > a[aria-current="page"]{color:var(--blau-d)}
  .hdr__nav > ul > li > a[aria-current="page"]::before{color:var(--blau-d)}

  .hdr__subknopf{color:#fff;border-bottom-color:rgba(255,255,255,.12)!important}
  .hdr__nav .hdr__subliste{padding:6px 0 12px 32px}
  .hdr__nav .hdr__subliste a{color:rgba(255,255,255,.78);font:500 17px/1.3 var(--sans);padding:10px 0}
  .hdr__nav .hdr__subliste a:hover{color:var(--blau-d)}

  /* Kontaktknöpfe groß am Ende – auch am Tablet */
  .hdr.is-open .hdr__navknoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding:28px 0 0;
    opacity:0;transform:translateY(16px);animation:menueKnoepfe .6s .62s cubic-bezier(.2,.8,.2,1) forwards}
  .hdr__nav .hdr__knopf{height:56px;border-radius:12px;font-size:16px}
  .hdr__nav .hdr__knopf--ruf{background:rgba(255,255,255,.06)!important;border:1.5px solid rgba(255,255,255,.35)!important;color:#fff}
  .hdr__nav .hdr__knopf--mail{background:#fff;border-color:#fff!important;color:var(--blau-tief)}
}
@media (max-width:459px){ .hdr.is-open .hdr__navknoepfe{grid-template-columns:1fr} }
@keyframes menueKnoepfe{to{opacity:1;transform:none}}
@media (max-width:1179px) and (prefers-reduced-motion:reduce){
  .hdr .hdr__nav,.hdr.is-open .hdr__nav,.hdr__nav > ul > li{transition:none!important}
  .hdr.is-open .hdr__navknoepfe{animation:none;opacity:1;transform:none}
}
@media (max-width:1179px){ .hdr__nav .hdr__knopf--ruf svg{color:var(--blau-d);stroke:currentColor} }