Header

<!-- Achsen am <header>:
     data-layout = rechts | mittig | burger | zentriert
     data-marke  = logoname | logo
     data-hoehe  = kompakt | standard | gross
     data-hover  = underline | zoom | farbe   (Hover der Menüpunkte)
     data-scroll = glas | solid              (Verhalten beim Scrollen)
     data-hb     = klassik | spin | squeeze | pfeil      (Hamburger-Icon-Animation)
     data-menu   = ausklappen | einblenden | vollbild    (Aufklappen des Mobil-Menüs)
     data-mlogo  = links | mittig | rechts               (Logo-Position mobil)
     data-mburger= links | rechts                        (Menü-Knopf-Position mobil; nie dieselbe Seite wie das Logo) -->
<!-- Optional: Ankündigungs-Leiste ÜBER dem Header (einfach weglassen, wenn nicht gewünscht) -->
<div class="site-head__annbar" role="region" aria-label="Ankündigung">
  <span class="site-head__annbar-text">Neu: kostenlose Erstberatung im Juli — <a href="#">jetzt Termin sichern</a></span>
  <button type="button" class="site-head__annbar-close" aria-label="Hinweis schließen">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
  </button>
</div>
<header class="site-head" data-layout="rechts" data-marke="logoname" data-hoehe="standard" data-hover="underline" data-hb="klassik" data-menu="ausklappen" data-mlogo="links" data-mburger="rechts" data-scroll="glas">
  <a href="#" class="site-head__brand" aria-label="Marke – zur Startseite">
    <span class="site-head__mark" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V9l8-5 8 5v11"/><path d="M9 20v-6h6v6"/></svg>
    </span>
    <span class="site-head__name">Marke</span>
  </a>
  <nav class="site-head__nav" aria-label="Hauptmenü"><a href="#">Start</a><a href="#">Leistungen</a><a href="#">Referenzen</a><a href="#">Kontakt</a></nav>
  <!-- geteilte Nav nur für data-layout="zentriert" (Logo mittig, nur Symbol) -->
  <nav class="site-head__navside site-head__navside--left" aria-label="Menü links"><a href="#">Start</a><a href="#">Leistungen</a></nav>
  <nav class="site-head__navside site-head__navside--right" aria-label="Menü rechts"><a href="#">Referenzen</a><a href="#">Kontakt</a></nav>
  <a href="#" class="site-head__cta">Anfragen</a>
  <button type="button" class="site-head__burger" aria-label="Menü öffnen" aria-expanded="false" aria-controls="site-drawer">
    <span class="site-head__hb" aria-hidden="true"><span></span><span></span><span></span></span>
  </button>
  <div class="site-head__drawer" id="site-drawer">
    <a href="#">Start</a><a href="#">Leistungen</a><a href="#">Referenzen</a><a href="#">Kontakt</a>
  </div>
</header>

<style>
/* Ein Header, per data-Attribut umschaltbar. Akzentfarbe über --akzent. In echten
   Projekten position:sticky am Fenster (kein Scrollbox-Wrapper wie in der Demo). */
/* Optionale Ankündigungs-Leiste über dem Header */
.site-head__annbar{display:flex;align-items:center;gap:.8rem;padding:.55rem 1.1rem;font-size:.82rem;color:#0d0d10;
  background:linear-gradient(90deg,var(--akzent,#7c87ff),color-mix(in srgb,var(--akzent,#7c87ff) 62%,#fff))}
.site-head__annbar-text{flex:1;min-width:0;font-weight:600}
.site-head__annbar-text a{color:#0d0d10;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.site-head__annbar-close{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:7px;background:rgba(13,13,16,.12);color:#0d0d10;transition:background .2s ease}
.site-head__annbar-close:hover,.site-head__annbar-close:focus-visible{background:rgba(13,13,16,.24);outline:none}
.site-head__annbar-close:focus-visible{outline:2px solid #0d0d10;outline-offset:2px}
.site-head__annbar-close svg{width:15px;height:15px}
.site-head__annbar.is-hidden{display:none}
.site-head{position:sticky;top:0;z-index:50;display:grid;align-items:center;gap:.5rem 1.2rem;
  --sh-pad:.95rem 1.4rem;--sh-mark:38px;--sh-nav:#a1a1aa;--sh-nav-hover:#f4f4f5;padding:var(--sh-pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,
    -webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
.site-head.scrolled{background:rgba(22,22,26,.6);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:#2c2c34;box-shadow:0 8px 24px -18px rgba(0,0,0,.85)}
/* Scroll-Stil "solid": feste Fläche + Schatten statt Milchglas (data-scroll="solid") */
.site-head[data-scroll="solid"]{background:#1c1c22;border-bottom-color:#26262c}
.site-head[data-scroll="solid"].scrolled{background:#1c1c22;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 6px 22px rgba(0,0,0,.55)}
.site-head__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  color:#f4f4f5;font-weight:700;font-size:1rem;white-space:nowrap}
.site-head__mark{width:var(--sh-mark);height:var(--sh-mark);flex:0 0 auto;border-radius:10px;
  display:grid;place-items:center;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.16)),var(--akzent,#7c87ff);
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.35)}
.site-head__mark svg{width:56%;height:56%}
.site-head__mark:has(img){background:none;box-shadow:none;border-color:transparent;padding:2px}
.site-head__mark img{width:100%;height:100%;object-fit:contain}
.site-head__nav{display:inline-flex;gap:1.4rem;font-size:.86rem}
.site-head__navside{display:none;gap:1.4rem;font-size:.86rem}
/* Menü-Links (Haupt- und geteilte Nav) */
.site-head nav a{position:relative;color:var(--sh-nav);text-decoration:none;padding-bottom:2px;
  transition:color .2s ease,transform .2s ease}
.site-head nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--akzent,#7c87ff);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.site-head nav a:hover,.site-head nav a:focus-visible{color:var(--sh-nav-hover);outline:none}
.site-head nav a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:4px;border-radius:2px}
/* Menü-Hover-Achse (data-hover): Unterstrich · Zoom · Farbe */
.site-head[data-hover="underline"] nav a:hover::after,
.site-head[data-hover="underline"] nav a:focus-visible::after{transform:scaleX(1)}
.site-head[data-hover="zoom"] nav a:hover,
.site-head[data-hover="zoom"] nav a:focus-visible{transform:scale(1.09)}
/* "farbe" = adaptiver Hintergrund beim Hover (hell auf dunkel, dunkel auf hell) — auf hellen Seiten --sh-nav-bg:#141418;--sh-nav-ink:#fff setzen */
.site-head[data-hover="farbe"] nav a{padding:.34rem .6rem;border-radius:8px;transition:background-color .2s ease,color .2s ease}
.site-head[data-hover="farbe"] nav a:hover,
.site-head[data-hover="farbe"] nav a:focus-visible{background:var(--sh-nav-bg,#f4f4f5);color:var(--sh-nav-ink,#141418)}
.site-head__cta{justify-self:end;font-size:.82rem;font-weight:600;color:#0d0d10;text-decoration:none;
  padding:.55rem 1rem;border-radius:99px;white-space:nowrap;background:var(--akzent,#7c87ff);transition:filter .2s ease}
.site-head__cta:hover,.site-head__cta:focus-visible{filter:brightness(1.1);outline:none}
.site-head__cta:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-head__burger{justify-self:end;width:44px;height:44px;display:none;place-items:center;touch-action:manipulation;
  border:1px solid #2c2c34;border-radius:10px;background:#1c1c22;color:#f4f4f5;cursor:pointer;transition:background .2s ease}
.site-head__burger:hover{background:#24242c}
.site-head__burger:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-head__burger svg{width:20px;height:20px}
.site-head__drawer{position:absolute;left:0;right:0;top:100%;z-index:40;display:none;flex-direction:column;gap:.2rem;
  padding:.6rem;background:rgba(22,22,26,.97);border-bottom:1px solid #2c2c34;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-head__drawer a{color:#e4e4e7;text-decoration:none;font-size:.9rem;padding:.7rem .8rem;border-radius:8px}
.site-head__drawer a:hover,.site-head__drawer a:focus-visible{background:rgba(255,255,255,.06);color:#fff;outline:none}
.site-head__drawer a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px}
.site-head.is-open .site-head__drawer{display:flex}
/* ── Mobil-Menü: Hamburger-Stil (data-hb) + Aufklapp-Animation (data-menu) ── */
.site-head__hb{position:relative;width:22px;height:16px;pointer-events:none}
.site-head__hb span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s ease,opacity .2s ease,top .3s ease}
.site-head__hb span:nth-child(1){top:0}.site-head__hb span:nth-child(2){top:7px}.site-head__hb span:nth-child(3){top:14px}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="spin"] .site-head__hb{transition:transform .42s cubic-bezier(.4,0,.2,1)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb{transform:rotate(180deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="squeeze"] .site-head__hb span{transition-timing-function:cubic-bezier(.5,-.4,.35,1.4);transition-duration:.34s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(2){transition-delay:.05s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(3){transition-delay:.1s}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__hb span{transform-origin:left center}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;width:11px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;width:11px;transform:rotate(45deg)}
/* Aufklapp-Animation: Drawer immer gerendert, per Sichtbarkeit/Transform gesteuert (display animiert nicht) */
.site-head__drawer{display:flex;visibility:hidden;pointer-events:none;opacity:0;
  transition:opacity .28s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility .3s}
.site-head.is-open .site-head__drawer{visibility:visible;pointer-events:auto;opacity:1}
.site-head[data-menu="ausklappen"] .site-head__drawer{transform:translateY(-10px)}
.site-head[data-menu="ausklappen"].is-open .site-head__drawer{transform:translateY(0)}
.site-head[data-menu="einblenden"] .site-head__drawer{transform:scaleY(.96);transform-origin:top}
.site-head[data-menu="einblenden"].is-open .site-head__drawer{transform:scaleY(1)}
.site-head[data-menu="vollbild"] .site-head__drawer{position:fixed;inset:0;z-index:60;transform:none;
  justify-content:center;align-items:center;gap:.4rem;padding:2rem;border-bottom:0;
  background:rgba(13,13,16,.62);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.site-head[data-menu="vollbild"] .site-head__drawer a{font-size:1.35rem;padding:.6rem 1.2rem}
.site-head[data-menu="vollbild"] .site-head__brand,.site-head[data-menu="vollbild"] .site-head__burger{position:relative;z-index:61}
@media (prefers-reduced-motion:reduce){.site-head__hb span,.site-head[data-hb="spin"] .site-head__hb,.site-head__drawer{transition:none}}
/* Layout */
.site-head[data-layout="rechts"]{grid-template-columns:auto 1fr auto}
.site-head[data-layout="rechts"] .site-head__nav{grid-column:3;justify-self:end}
.site-head[data-layout="rechts"] .site-head__cta{display:none}
.site-head[data-layout="mittig"]{grid-template-columns:1fr auto 1fr}
.site-head[data-layout="mittig"] .site-head__brand{grid-column:1;grid-row:1;justify-self:start}
.site-head[data-layout="mittig"] .site-head__nav{grid-column:2;grid-row:1;justify-self:center}
.site-head[data-layout="mittig"] .site-head__cta{grid-column:3;grid-row:1;justify-self:end}
.site-head[data-layout="burger"]{grid-template-columns:1fr auto}
.site-head[data-layout="burger"] .site-head__nav,.site-head[data-layout="burger"] .site-head__cta{display:none}
.site-head[data-layout="burger"] .site-head__burger{display:grid}
.site-head[data-layout="zentriert"]{grid-template-columns:1fr auto 1fr;column-gap:1.8rem}
.site-head[data-layout="zentriert"] .site-head__nav,.site-head[data-layout="zentriert"] .site-head__cta{display:none}
.site-head[data-layout="zentriert"] .site-head__name{display:none}
.site-head[data-layout="zentriert"] .site-head__navside--left{display:inline-flex;grid-column:1;grid-row:1;justify-self:end}
.site-head[data-layout="zentriert"] .site-head__brand{grid-column:2;grid-row:1;justify-self:center}
.site-head[data-layout="zentriert"] .site-head__navside--right{display:inline-flex;grid-column:3;grid-row:1;justify-self:start}
/* Logo */
.site-head[data-marke="logo"] .site-head__name{display:none}
/* Höhe */
.site-head[data-hoehe="kompakt"]{--sh-pad:.55rem 1.3rem;--sh-mark:32px}
.site-head[data-hoehe="gross"]{--sh-pad:1.35rem 1.5rem;--sh-mark:46px}
/* Mobil: einzeilige Layouts weichen auf den Burger aus */
@media (max-width:640px){
  .site-head[data-layout="rechts"],.site-head[data-layout="mittig"],
  .site-head[data-layout="zentriert"]{grid-template-columns:1fr auto}
  .site-head[data-layout="rechts"] .site-head__nav,
  .site-head[data-layout="mittig"] .site-head__nav,
  .site-head[data-layout="mittig"] .site-head__cta,
  .site-head[data-layout="zentriert"] .site-head__navside--left,
  .site-head[data-layout="zentriert"] .site-head__navside--right{display:none}
  .site-head[data-layout="zentriert"] .site-head__brand{grid-column:1;justify-self:start}
  .site-head[data-layout="rechts"] .site-head__burger,
  .site-head[data-layout="mittig"] .site-head__burger,
  .site-head[data-layout="zentriert"] .site-head__burger{display:grid}
}
/* ── Mobil-Anordnung: Logo links/mittig/rechts · Menü-Knopf links/rechts (data-mlogo/data-mburger) ── */
@media (max-width:640px){
  .site-head[data-layout="rechts"],.site-head[data-layout="mittig"],
  .site-head[data-layout="zentriert"],.site-head[data-layout="burger"]{grid-template-columns:1fr auto 1fr}
  .site-head[data-layout] .site-head__brand{grid-row:1;grid-column:1;justify-self:start}
  .site-head[data-layout][data-mlogo="mittig"] .site-head__brand{grid-column:2;justify-self:center}
  .site-head[data-layout][data-mlogo="rechts"] .site-head__brand{grid-column:3;justify-self:end}
  .site-head[data-layout] .site-head__burger{grid-row:1;grid-column:3;justify-self:end}
  .site-head[data-layout][data-mburger="links"] .site-head__burger{grid-column:1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .site-head,.site-head nav a,.site-head nav a::after,.site-head__cta,.site-head__burger{transition:none}
}
</style>

<script>
/* Milchglas beim Scrollen + Burger-Menü. Im Projekt am Fenster-Scroll hängen. */
(function(){
  var head=document.querySelector('.site-head');
  if(!head) return;
  window.addEventListener('scroll',function(){head.classList.toggle('scrolled',window.scrollY>12);},{passive:true});
  var burger=head.querySelector('.site-head__burger');
  if(burger) burger.addEventListener('click',function(){
    var open=head.classList.toggle('is-open');
    burger.setAttribute('aria-expanded',open?'true':'false');
  });
  var annClose=document.querySelector('.site-head__annbar-close');
  if(annClose) annClose.addEventListener('click',function(){
    var bar=annClose.closest('.site-head__annbar');
    if(bar) bar.classList.add('is-hidden');
    /* Im Projekt merken: localStorage.setItem('annbar-dismissed','1'); */
  });
})();
</script>

<!-- Flexibler Header MIT ausklappender Suche — eigenständig kopierbar (Markup + CSS + JS komplett enthalten). -->
<!-- Achsen am <header>:
     data-layout = rechts | mittig | burger | zentriert
     data-marke  = logoname | logo
     data-hoehe  = kompakt | standard | gross
     data-hover  = underline | zoom | farbe   (Hover der Menüpunkte)
     data-scroll = glas | solid              (Verhalten beim Scrollen)
     data-hb     = klassik | spin | squeeze | pfeil      (Hamburger-Icon-Animation)
     data-menu   = ausklappen | einblenden | vollbild    (Aufklappen des Mobil-Menüs)
     data-mlogo  = links | mittig | rechts               (Logo-Position mobil)
     data-mburger= links | rechts                        (Menü-Knopf-Position mobil; nie dieselbe Seite wie das Logo) -->
<!-- Optional: Ankündigungs-Leiste ÜBER dem Header (einfach weglassen, wenn nicht gewünscht) -->
<div class="site-head__annbar" role="region" aria-label="Ankündigung">
  <span class="site-head__annbar-text">Neu: kostenlose Erstberatung im Juli — <a href="#">jetzt Termin sichern</a></span>
  <button type="button" class="site-head__annbar-close" aria-label="Hinweis schließen">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
  </button>
</div>
<header class="site-head site-head--suche" data-layout="rechts" data-marke="logoname" data-hoehe="standard" data-hover="underline" data-hb="klassik" data-menu="ausklappen" data-mlogo="links" data-mburger="rechts" data-scroll="glas">
  <a href="#" class="site-head__brand" aria-label="Marke – zur Startseite">
    <span class="site-head__mark" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V9l8-5 8 5v11"/><path d="M9 20v-6h6v6"/></svg>
    </span>
    <span class="site-head__name">Marke</span>
  </a>
  <nav class="site-head__nav" aria-label="Hauptmenü"><a href="#">Shop</a><a href="#">Magazin</a><a href="#">Angebote</a><a href="#">Kontakt</a></nav>
  <!-- geteilte Nav nur für data-layout="zentriert" (Logo mittig, nur Symbol) -->
  <nav class="site-head__navside site-head__navside--left" aria-label="Menü links"><a href="#">Shop</a><a href="#">Magazin</a></nav>
  <nav class="site-head__navside site-head__navside--right" aria-label="Menü rechts"><a href="#">Angebote</a><a href="#">Kontakt</a></nav>
  <div class="site-head__search">
    <form class="fx-search" role="search" action="#">
      <button type="submit" class="fx-search__btn" aria-label="Suche oeffnen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></button>
      <input type="search" class="fx-search__field" placeholder="Suchen …" aria-label="Suchbegriff">
    </form>
  </div>
  <button type="button" class="site-head__burger" aria-label="Menü öffnen" aria-expanded="false" aria-controls="suche-drawer">
    <span class="site-head__hb" aria-hidden="true"><span></span><span></span><span></span></span>
  </button>
  <div class="site-head__drawer" id="suche-drawer">
    <a href="#">Shop</a><a href="#">Magazin</a><a href="#">Angebote</a><a href="#">Kontakt</a>
  </div>
</header>

<style>
/* Ein Header, per data-Attribut umschaltbar. Akzentfarbe über --akzent. In echten
   Projekten position:sticky am Fenster (kein Scrollbox-Wrapper wie in der Demo). */
/* Optionale Ankündigungs-Leiste über dem Header */
.site-head__annbar{display:flex;align-items:center;gap:.8rem;padding:.55rem 1.1rem;font-size:.82rem;color:#0d0d10;
  background:linear-gradient(90deg,var(--akzent,#7c87ff),color-mix(in srgb,var(--akzent,#7c87ff) 62%,#fff))}
.site-head__annbar-text{flex:1;min-width:0;font-weight:600}
.site-head__annbar-text a{color:#0d0d10;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.site-head__annbar-close{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:7px;background:rgba(13,13,16,.12);color:#0d0d10;transition:background .2s ease}
.site-head__annbar-close:hover,.site-head__annbar-close:focus-visible{background:rgba(13,13,16,.24);outline:none}
.site-head__annbar-close:focus-visible{outline:2px solid #0d0d10;outline-offset:2px}
.site-head__annbar-close svg{width:15px;height:15px}
.site-head__annbar.is-hidden{display:none}
.site-head{position:sticky;top:0;z-index:50;display:grid;align-items:center;gap:.5rem 1.2rem;
  --sh-pad:.95rem 1.4rem;--sh-mark:38px;--sh-nav:#a1a1aa;--sh-nav-hover:#f4f4f5;padding:var(--sh-pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,
    -webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
.site-head.scrolled{background:rgba(22,22,26,.6);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:#2c2c34;box-shadow:0 8px 24px -18px rgba(0,0,0,.85)}
/* Scroll-Stil "solid": feste Fläche + Schatten statt Milchglas (data-scroll="solid") */
.site-head[data-scroll="solid"]{background:#1c1c22;border-bottom-color:#26262c}
.site-head[data-scroll="solid"].scrolled{background:#1c1c22;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 6px 22px rgba(0,0,0,.55)}
.site-head__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  color:#f4f4f5;font-weight:700;font-size:1rem;white-space:nowrap}
.site-head__mark{width:var(--sh-mark);height:var(--sh-mark);flex:0 0 auto;border-radius:10px;
  display:grid;place-items:center;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.16)),var(--akzent,#7c87ff);
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.35)}
.site-head__mark svg{width:56%;height:56%}
.site-head__mark:has(img){background:none;box-shadow:none;border-color:transparent;padding:2px}
.site-head__mark img{width:100%;height:100%;object-fit:contain}
.site-head__nav{display:inline-flex;gap:1.4rem;font-size:.86rem}
.site-head__navside{display:none;gap:1.4rem;font-size:.86rem}
/* Menü-Links (Haupt- und geteilte Nav) */
.site-head nav a{position:relative;color:var(--sh-nav);text-decoration:none;padding-bottom:2px;
  transition:color .2s ease,transform .2s ease}
.site-head nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--akzent,#7c87ff);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.site-head nav a:hover,.site-head nav a:focus-visible{color:var(--sh-nav-hover);outline:none}
.site-head nav a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:4px;border-radius:2px}
/* Menü-Hover-Achse (data-hover): Unterstrich · Zoom · Farbe */
.site-head[data-hover="underline"] nav a:hover::after,
.site-head[data-hover="underline"] nav a:focus-visible::after{transform:scaleX(1)}
.site-head[data-hover="zoom"] nav a:hover,
.site-head[data-hover="zoom"] nav a:focus-visible{transform:scale(1.09)}
/* "farbe" = adaptiver Hintergrund beim Hover (hell auf dunkel, dunkel auf hell) — auf hellen Seiten --sh-nav-bg:#141418;--sh-nav-ink:#fff setzen */
.site-head[data-hover="farbe"] nav a{padding:.34rem .6rem;border-radius:8px;transition:background-color .2s ease,color .2s ease}
.site-head[data-hover="farbe"] nav a:hover,
.site-head[data-hover="farbe"] nav a:focus-visible{background:var(--sh-nav-bg,#f4f4f5);color:var(--sh-nav-ink,#141418)}
.site-head__cta{justify-self:end;font-size:.82rem;font-weight:600;color:#0d0d10;text-decoration:none;
  padding:.55rem 1rem;border-radius:99px;white-space:nowrap;background:var(--akzent,#7c87ff);transition:filter .2s ease}
.site-head__cta:hover,.site-head__cta:focus-visible{filter:brightness(1.1);outline:none}
.site-head__cta:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-head__burger{justify-self:end;width:44px;height:44px;display:none;place-items:center;touch-action:manipulation;
  border:1px solid #2c2c34;border-radius:10px;background:#1c1c22;color:#f4f4f5;cursor:pointer;transition:background .2s ease}
.site-head__burger:hover{background:#24242c}
.site-head__burger:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-head__burger svg{width:20px;height:20px}
.site-head__drawer{position:absolute;left:0;right:0;top:100%;z-index:40;display:none;flex-direction:column;gap:.2rem;
  padding:.6rem;background:rgba(22,22,26,.97);border-bottom:1px solid #2c2c34;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-head__drawer a{color:#e4e4e7;text-decoration:none;font-size:.9rem;padding:.7rem .8rem;border-radius:8px}
.site-head__drawer a:hover,.site-head__drawer a:focus-visible{background:rgba(255,255,255,.06);color:#fff;outline:none}
.site-head__drawer a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px}
.site-head.is-open .site-head__drawer{display:flex}
/* ── Mobil-Menü: Hamburger-Stil (data-hb) + Aufklapp-Animation (data-menu) ── */
.site-head__hb{position:relative;width:22px;height:16px;pointer-events:none}
.site-head__hb span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s ease,opacity .2s ease,top .3s ease}
.site-head__hb span:nth-child(1){top:0}.site-head__hb span:nth-child(2){top:7px}.site-head__hb span:nth-child(3){top:14px}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="spin"] .site-head__hb{transition:transform .42s cubic-bezier(.4,0,.2,1)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb{transform:rotate(180deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="squeeze"] .site-head__hb span{transition-timing-function:cubic-bezier(.5,-.4,.35,1.4);transition-duration:.34s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(2){transition-delay:.05s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(3){transition-delay:.1s}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__hb span{transform-origin:left center}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;width:11px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;width:11px;transform:rotate(45deg)}
/* Aufklapp-Animation: Drawer immer gerendert, per Sichtbarkeit/Transform gesteuert (display animiert nicht) */
.site-head__drawer{display:flex;visibility:hidden;pointer-events:none;opacity:0;
  transition:opacity .28s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility .3s}
.site-head.is-open .site-head__drawer{visibility:visible;pointer-events:auto;opacity:1}
.site-head[data-menu="ausklappen"] .site-head__drawer{transform:translateY(-10px)}
.site-head[data-menu="ausklappen"].is-open .site-head__drawer{transform:translateY(0)}
.site-head[data-menu="einblenden"] .site-head__drawer{transform:scaleY(.96);transform-origin:top}
.site-head[data-menu="einblenden"].is-open .site-head__drawer{transform:scaleY(1)}
.site-head[data-menu="vollbild"] .site-head__drawer{position:fixed;inset:0;z-index:60;transform:none;
  justify-content:center;align-items:center;gap:.4rem;padding:2rem;border-bottom:0;
  background:rgba(13,13,16,.62);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.site-head[data-menu="vollbild"] .site-head__drawer a{font-size:1.35rem;padding:.6rem 1.2rem}
.site-head[data-menu="vollbild"] .site-head__brand,.site-head[data-menu="vollbild"] .site-head__burger{position:relative;z-index:61}
@media (prefers-reduced-motion:reduce){.site-head__hb span,.site-head[data-hb="spin"] .site-head__hb,.site-head__drawer{transition:none}}
/* Layout */
.site-head[data-layout="rechts"]{grid-template-columns:auto 1fr auto}
.site-head[data-layout="rechts"] .site-head__nav{grid-column:3;justify-self:end}
.site-head[data-layout="rechts"] .site-head__cta{display:none}
.site-head[data-layout="mittig"]{grid-template-columns:1fr auto 1fr}
.site-head[data-layout="mittig"] .site-head__brand{grid-column:1;grid-row:1;justify-self:start}
.site-head[data-layout="mittig"] .site-head__nav{grid-column:2;grid-row:1;justify-self:center}
.site-head[data-layout="mittig"] .site-head__cta{grid-column:3;grid-row:1;justify-self:end}
.site-head[data-layout="burger"]{grid-template-columns:1fr auto}
.site-head[data-layout="burger"] .site-head__nav,.site-head[data-layout="burger"] .site-head__cta{display:none}
.site-head[data-layout="burger"] .site-head__burger{display:grid}
.site-head[data-layout="zentriert"]{grid-template-columns:1fr auto 1fr;column-gap:1.8rem}
.site-head[data-layout="zentriert"] .site-head__nav,.site-head[data-layout="zentriert"] .site-head__cta{display:none}
.site-head[data-layout="zentriert"] .site-head__name{display:none}
.site-head[data-layout="zentriert"] .site-head__navside--left{display:inline-flex;grid-column:1;grid-row:1;justify-self:end}
.site-head[data-layout="zentriert"] .site-head__brand{grid-column:2;grid-row:1;justify-self:center}
.site-head[data-layout="zentriert"] .site-head__navside--right{display:inline-flex;grid-column:3;grid-row:1;justify-self:start}
/* Logo */
.site-head[data-marke="logo"] .site-head__name{display:none}
/* Höhe */
.site-head[data-hoehe="kompakt"]{--sh-pad:.55rem 1.3rem;--sh-mark:32px}
.site-head[data-hoehe="gross"]{--sh-pad:1.35rem 1.5rem;--sh-mark:46px}
/* Mobil: einzeilige Layouts weichen auf den Burger aus */
@media (max-width:640px){
  .site-head[data-layout="rechts"],.site-head[data-layout="mittig"],
  .site-head[data-layout="zentriert"]{grid-template-columns:1fr auto}
  .site-head[data-layout="rechts"] .site-head__nav,
  .site-head[data-layout="mittig"] .site-head__nav,
  .site-head[data-layout="mittig"] .site-head__cta,
  .site-head[data-layout="zentriert"] .site-head__navside--left,
  .site-head[data-layout="zentriert"] .site-head__navside--right{display:none}
  .site-head[data-layout="zentriert"] .site-head__brand{grid-column:1;justify-self:start}
  .site-head[data-layout="rechts"] .site-head__burger,
  .site-head[data-layout="mittig"] .site-head__burger,
  .site-head[data-layout="zentriert"] .site-head__burger{display:grid}
}
/* ── Mobil-Anordnung: Logo links/mittig/rechts · Menü-Knopf links/rechts (data-mlogo/data-mburger) ── */
@media (max-width:640px){
  .site-head[data-layout="rechts"],.site-head[data-layout="mittig"],
  .site-head[data-layout="zentriert"],.site-head[data-layout="burger"]{grid-template-columns:1fr auto 1fr}
  .site-head[data-layout] .site-head__brand{grid-row:1;grid-column:1;justify-self:start}
  .site-head[data-layout][data-mlogo="mittig"] .site-head__brand{grid-column:2;justify-self:center}
  .site-head[data-layout][data-mlogo="rechts"] .site-head__brand{grid-column:3;justify-self:end}
  .site-head[data-layout] .site-head__burger{grid-row:1;grid-column:3;justify-self:end}
  .site-head[data-layout][data-mburger="links"] .site-head__burger{grid-column:1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .site-head,.site-head nav a,.site-head nav a::after,.site-head__cta,.site-head__burger{transition:none}
}
/* ── Ausklappende Suche ── */
/* Platzierung: rechts sichtbar in Rechts/Mittig, aus in Burger/Logo-mittig */
.site-head__search{display:none;align-items:center;justify-self:end}
.site-head--suche[data-layout="rechts"]{grid-template-columns:auto 1fr auto auto}
.site-head--suche[data-layout="rechts"] .site-head__nav{grid-column:3;grid-row:1;justify-self:end}
.site-head--suche[data-layout="rechts"] .site-head__search{grid-column:4;grid-row:1;display:flex}
.site-head--suche[data-layout="mittig"] .site-head__search{grid-column:3;grid-row:1;display:flex}
@media (max-width:640px){.site-head--suche[data-layout="rechts"] .site-head__search,.site-head--suche[data-layout="mittig"] .site-head__search{display:none}}
/* Das ausklappende Suchfeld */
.fx-search{display:flex;align-items:center;height:38px;border-radius:99px;overflow:hidden;
  background:#101014;border:1px solid #26262c;transition:border-color .25s ease,box-shadow .25s ease}
.fx-search:focus-within{border-color:var(--akzent,#7c87ff);box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent,#7c87ff) 22%,transparent)}
.fx-search__btn{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:0;cursor:pointer;background:transparent;color:#a1a1aa;transition:color .2s ease}
.fx-search__btn:hover,.fx-search__btn:focus-visible{color:#f4f4f5;outline:none}
.fx-search__btn:focus-visible{color:var(--akzent,#7c87ff)}
.fx-search__btn svg{width:17px;height:17px}
.fx-search__field{width:0;min-width:0;padding:0;border:0;background:transparent;color:#f4f4f5;font-size:.88rem;font-family:inherit;transition:width .32s cubic-bezier(.4,0,.2,1),padding .32s ease}
.fx-search__field::placeholder{color:#a1a1aa}
.fx-search__field:focus{outline:none}
.fx-search.is-open .fx-search__field{width:170px;padding-right:.9rem}
@media (prefers-reduced-motion:reduce){.fx-search,.fx-search__field,.fx-search__btn{transition:none}}
</style>

<script>
/* Milchglas beim Scrollen + Burger-Menü. Im Projekt am Fenster-Scroll hängen. */
(function(){
  var head=document.querySelector('.site-head');
  if(!head) return;
  window.addEventListener('scroll',function(){head.classList.toggle('scrolled',window.scrollY>12);},{passive:true});
  var burger=head.querySelector('.site-head__burger');
  if(burger) burger.addEventListener('click',function(){
    var open=head.classList.toggle('is-open');
    burger.setAttribute('aria-expanded',open?'true':'false');
  });
  var annClose=document.querySelector('.site-head__annbar-close');
  if(annClose) annClose.addEventListener('click',function(){
    var bar=annClose.closest('.site-head__annbar');
    if(bar) bar.classList.add('is-hidden');
    /* Im Projekt merken: localStorage.setItem('annbar-dismissed','1'); */
  });
})();
/* Suchfeld auf Klick/Fokus ausklappen; leer verlassen klappt wieder ein */
/* Suchfeld auf Klick/Fokus ausklappen; leer verlassen klappt wieder ein */
document.querySelectorAll('.fx-search').forEach(function(form){
  var field=form.querySelector('.fx-search__field'), btn=form.querySelector('.fx-search__btn');
  if(!field||!btn) return;
  btn.addEventListener('click',function(e){ if(!form.classList.contains('is-open') && field.value===''){ e.preventDefault(); form.classList.add('is-open'); field.focus(); } });
  field.addEventListener('focus',function(){form.classList.add('is-open');});
  field.addEventListener('blur',function(){ if(field.value==='') form.classList.remove('is-open'); });
});
</script>

<!-- Flexibler Header MIT Sternen-Layer (erscheint bei Hover/Fokus) — eigenständig kopierbar (Markup + CSS + JS komplett enthalten). -->
<!-- Achsen am <header>:
     data-layout = rechts | mittig | burger | zentriert
     data-marke  = logoname | logo
     data-hoehe  = kompakt | standard | gross
     data-hover  = underline | zoom | farbe   (Hover der Menüpunkte)
     data-scroll = solid empfohlen (die Sterne wirken auf fester Fläche klarer)
     data-hb     = klassik | spin | squeeze | pfeil      (Hamburger-Icon-Animation)
     data-menu   = ausklappen | einblenden | vollbild    (Aufklappen des Mobil-Menüs)
     data-mlogo  = links | mittig | rechts               (Logo-Position mobil)
     data-mburger= links | rechts                        (Menü-Knopf-Position mobil; nie dieselbe Seite wie das Logo) -->
<!-- Optional: Ankündigungs-Leiste ÜBER dem Header (einfach weglassen, wenn nicht gewünscht) -->
<div class="site-head__annbar" role="region" aria-label="Ankündigung">
  <span class="site-head__annbar-text">Neu: kostenlose Erstberatung im Juli — <a href="#">jetzt Termin sichern</a></span>
  <button type="button" class="site-head__annbar-close" aria-label="Hinweis schließen">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
  </button>
</div>
<header class="site-head site-head--stars" data-layout="rechts" data-marke="logoname" data-hoehe="standard" data-hover="underline" data-hb="klassik" data-menu="ausklappen" data-mlogo="links" data-mburger="rechts" data-scroll="solid">
  <svg class="site-head__stars" viewBox="0 0 1200 76" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <circle cx="22" cy="18" r=".6" opacity=".45"/><circle cx="58" cy="55" r=".9" opacity=".7"/><circle class="twinkle-3" cx="96" cy="30" r=".5" opacity=".4"/>
    <g class="glanz twinkle"><circle cx="150" cy="24" r="1.5"/><path d="M150 17.5v13.0 M143.5 24h13.0"/></g><circle cx="188" cy="60" r=".55" opacity=".35"/><circle class="st-a twinkle-2" cx="228" cy="14" r="1.2" opacity=".85"/>
    <circle cx="262" cy="44" r=".7" opacity=".5"/><circle cx="300" cy="26" r=".5" opacity=".4"/><circle class="twinkle" cx="338" cy="58" r="1" opacity=".75"/>
    <circle cx="376" cy="12" r=".6" opacity=".45"/><circle class="st-a" cx="404" cy="38" r=".8" opacity=".6"/><circle class="twinkle-3" cx="442" cy="22" r="1.3" opacity=".85"/>
    <circle cx="478" cy="52" r=".5" opacity=".35"/><circle cx="512" cy="34" r=".9" opacity=".65"/><circle class="twinkle-2" cx="548" cy="10" r=".7" opacity=".55"/>
    <circle cx="584" cy="28" r=".55" opacity=".4"/><g class="glanz twinkle-2"><circle cx="620" cy="50" r="1.4"/><path d="M620 43.5v13.0 M613.5 50h13.0"/></g><circle cx="654" cy="16" r=".8" opacity=".6"/>
    <circle class="twinkle" cx="692" cy="40" r=".5" opacity=".4"/><circle cx="726" cy="62" r=".65" opacity=".5"/><circle class="st-a twinkle-3" cx="762" cy="20" r="1.1" opacity=".8"/>
    <circle cx="798" cy="48" r=".5" opacity=".35"/><circle cx="832" cy="30" r=".9" opacity=".7"/><circle class="twinkle-2" cx="868" cy="56" r=".6" opacity=".45"/>
    <circle cx="902" cy="12" r=".75" opacity=".55"/><circle cx="936" cy="36" r=".5" opacity=".4"/><circle class="twinkle" cx="972" cy="24" r="1.2" opacity=".8"/>
    <g class="glanz twinkle-3"><circle cx="1010" cy="18" r="1.5"/><path d="M1010 11.5v13.0 M1003.5 18h13.0"/></g><circle cx="1046" cy="54" r=".6" opacity=".45"/><circle class="st-a" cx="1082" cy="32" r=".7" opacity=".55"/>
    <circle class="twinkle-2" cx="1118" cy="14" r=".9" opacity=".7"/><circle cx="1152" cy="46" r=".5" opacity=".35"/><circle cx="1184" cy="26" r=".8" opacity=".6"/>
  </svg>
  <a href="#" class="site-head__brand" aria-label="Marke – zur Startseite">
    <span class="site-head__mark" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V9l8-5 8 5v11"/><path d="M9 20v-6h6v6"/></svg>
    </span>
    <span class="site-head__name">Marke</span>
  </a>
  <nav class="site-head__nav" aria-label="Hauptmenü"><a href="#">Start</a><a href="#">Leistungen</a><a href="#">Referenzen</a><a href="#">Kontakt</a></nav>
  <!-- geteilte Nav nur für data-layout="zentriert" (Logo mittig, nur Symbol) -->
  <nav class="site-head__navside site-head__navside--left" aria-label="Menü links"><a href="#">Start</a><a href="#">Leistungen</a></nav>
  <nav class="site-head__navside site-head__navside--right" aria-label="Menü rechts"><a href="#">Referenzen</a><a href="#">Kontakt</a></nav>
  <button type="button" class="site-head__burger" aria-label="Menü öffnen" aria-expanded="false" aria-controls="sterne-drawer">
    <span class="site-head__hb" aria-hidden="true"><span></span><span></span><span></span></span>
  </button>
  <div class="site-head__drawer" id="sterne-drawer">
    <a href="#">Start</a><a href="#">Leistungen</a><a href="#">Referenzen</a><a href="#">Kontakt</a>
  </div>
</header>

<style>
/* Ein Header, per data-Attribut umschaltbar. Akzentfarbe über --akzent. In echten
   Projekten position:sticky am Fenster (kein Scrollbox-Wrapper wie in der Demo). */
/* Optionale Ankündigungs-Leiste über dem Header */
.site-head__annbar{display:flex;align-items:center;gap:.8rem;padding:.55rem 1.1rem;font-size:.82rem;color:#0d0d10;
  background:linear-gradient(90deg,var(--akzent,#7c87ff),color-mix(in srgb,var(--akzent,#7c87ff) 62%,#fff))}
.site-head__annbar-text{flex:1;min-width:0;font-weight:600}
.site-head__annbar-text a{color:#0d0d10;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.site-head__annbar-close{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:7px;background:rgba(13,13,16,.12);color:#0d0d10;transition:background .2s ease}
.site-head__annbar-close:hover,.site-head__annbar-close:focus-visible{background:rgba(13,13,16,.24);outline:none}
.site-head__annbar-close:focus-visible{outline:2px solid #0d0d10;outline-offset:2px}
.site-head__annbar-close svg{width:15px;height:15px}
.site-head__annbar.is-hidden{display:none}
.site-head{position:sticky;top:0;z-index:50;display:grid;align-items:center;gap:.5rem 1.2rem;
  --sh-pad:.95rem 1.4rem;--sh-mark:38px;--sh-nav:#a1a1aa;--sh-nav-hover:#f4f4f5;padding:var(--sh-pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,
    -webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
.site-head.scrolled{background:rgba(22,22,26,.6);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:#2c2c34;box-shadow:0 8px 24px -18px rgba(0,0,0,.85)}
/* Scroll-Stil "solid": feste Fläche + Schatten statt Milchglas (data-scroll="solid") */
.site-head[data-scroll="solid"]{background:#1c1c22;border-bottom-color:#26262c}
.site-head[data-scroll="solid"].scrolled{background:#1c1c22;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 6px 22px rgba(0,0,0,.55)}
.site-head__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  color:#f4f4f5;font-weight:700;font-size:1rem;white-space:nowrap}
.site-head__mark{width:var(--sh-mark);height:var(--sh-mark);flex:0 0 auto;border-radius:10px;
  display:grid;place-items:center;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.16)),var(--akzent,#7c87ff);
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.35)}
.site-head__mark svg{width:56%;height:56%}
.site-head__mark:has(img){background:none;box-shadow:none;border-color:transparent;padding:2px}
.site-head__mark img{width:100%;height:100%;object-fit:contain}
.site-head__nav{display:inline-flex;gap:1.4rem;font-size:.86rem}
.site-head__navside{display:none;gap:1.4rem;font-size:.86rem}
/* Menü-Links (Haupt- und geteilte Nav) */
.site-head nav a{position:relative;color:var(--sh-nav);text-decoration:none;padding-bottom:2px;
  transition:color .2s ease,transform .2s ease}
.site-head nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--akzent,#7c87ff);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.site-head nav a:hover,.site-head nav a:focus-visible{color:var(--sh-nav-hover);outline:none}
.site-head nav a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:4px;border-radius:2px}
/* Menü-Hover-Achse (data-hover): Unterstrich · Zoom · Farbe */
.site-head[data-hover="underline"] nav a:hover::after,
.site-head[data-hover="underline"] nav a:focus-visible::after{transform:scaleX(1)}
.site-head[data-hover="zoom"] nav a:hover,
.site-head[data-hover="zoom"] nav a:focus-visible{transform:scale(1.09)}
/* "farbe" = adaptiver Hintergrund beim Hover (hell auf dunkel, dunkel auf hell) — auf hellen Seiten --sh-nav-bg:#141418;--sh-nav-ink:#fff setzen */
.site-head[data-hover="farbe"] nav a{padding:.34rem .6rem;border-radius:8px;transition:background-color .2s ease,color .2s ease}
.site-head[data-hover="farbe"] nav a:hover,
.site-head[data-hover="farbe"] nav a:focus-visible{background:var(--sh-nav-bg,#f4f4f5);color:var(--sh-nav-ink,#141418)}
.site-head__cta{justify-self:end;font-size:.82rem;font-weight:600;color:#0d0d10;text-decoration:none;
  padding:.55rem 1rem;border-radius:99px;white-space:nowrap;background:var(--akzent,#7c87ff);transition:filter .2s ease}
.site-head__cta:hover,.site-head__cta:focus-visible{filter:brightness(1.1);outline:none}
.site-head__cta:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-head__burger{justify-self:end;width:44px;height:44px;display:none;place-items:center;touch-action:manipulation;
  border:1px solid #2c2c34;border-radius:10px;background:#1c1c22;color:#f4f4f5;cursor:pointer;transition:background .2s ease}
.site-head__burger:hover{background:#24242c}
.site-head__burger:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-head__burger svg{width:20px;height:20px}
.site-head__drawer{position:absolute;left:0;right:0;top:100%;z-index:40;display:none;flex-direction:column;gap:.2rem;
  padding:.6rem;background:rgba(22,22,26,.97);border-bottom:1px solid #2c2c34;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-head__drawer a{color:#e4e4e7;text-decoration:none;font-size:.9rem;padding:.7rem .8rem;border-radius:8px}
.site-head__drawer a:hover,.site-head__drawer a:focus-visible{background:rgba(255,255,255,.06);color:#fff;outline:none}
.site-head__drawer a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px}
.site-head.is-open .site-head__drawer{display:flex}
/* ── Mobil-Menü: Hamburger-Stil (data-hb) + Aufklapp-Animation (data-menu) ── */
.site-head__hb{position:relative;width:22px;height:16px;pointer-events:none}
.site-head__hb span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s ease,opacity .2s ease,top .3s ease}
.site-head__hb span:nth-child(1){top:0}.site-head__hb span:nth-child(2){top:7px}.site-head__hb span:nth-child(3){top:14px}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="spin"] .site-head__hb{transition:transform .42s cubic-bezier(.4,0,.2,1)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb{transform:rotate(180deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="squeeze"] .site-head__hb span{transition-timing-function:cubic-bezier(.5,-.4,.35,1.4);transition-duration:.34s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(2){transition-delay:.05s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(3){transition-delay:.1s}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__hb span{transform-origin:left center}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;width:11px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;width:11px;transform:rotate(45deg)}
/* Aufklapp-Animation: Drawer immer gerendert, per Sichtbarkeit/Transform gesteuert (display animiert nicht) */
.site-head__drawer{display:flex;visibility:hidden;pointer-events:none;opacity:0;
  transition:opacity .28s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility .3s}
.site-head.is-open .site-head__drawer{visibility:visible;pointer-events:auto;opacity:1}
.site-head[data-menu="ausklappen"] .site-head__drawer{transform:translateY(-10px)}
.site-head[data-menu="ausklappen"].is-open .site-head__drawer{transform:translateY(0)}
.site-head[data-menu="einblenden"] .site-head__drawer{transform:scaleY(.96);transform-origin:top}
.site-head[data-menu="einblenden"].is-open .site-head__drawer{transform:scaleY(1)}
.site-head[data-menu="vollbild"] .site-head__drawer{position:fixed;inset:0;z-index:60;transform:none;
  justify-content:center;align-items:center;gap:.4rem;padding:2rem;border-bottom:0;
  background:rgba(13,13,16,.62);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.site-head[data-menu="vollbild"] .site-head__drawer a{font-size:1.35rem;padding:.6rem 1.2rem}
.site-head[data-menu="vollbild"] .site-head__brand,.site-head[data-menu="vollbild"] .site-head__burger{position:relative;z-index:61}
@media (prefers-reduced-motion:reduce){.site-head__hb span,.site-head[data-hb="spin"] .site-head__hb,.site-head__drawer{transition:none}}
/* Layout */
.site-head[data-layout="rechts"]{grid-template-columns:auto 1fr auto}
.site-head[data-layout="rechts"] .site-head__nav{grid-column:3;justify-self:end}
.site-head[data-layout="rechts"] .site-head__cta{display:none}
.site-head[data-layout="mittig"]{grid-template-columns:1fr auto 1fr}
.site-head[data-layout="mittig"] .site-head__brand{grid-column:1;grid-row:1;justify-self:start}
.site-head[data-layout="mittig"] .site-head__nav{grid-column:2;grid-row:1;justify-self:center}
.site-head[data-layout="mittig"] .site-head__cta{grid-column:3;grid-row:1;justify-self:end}
.site-head[data-layout="burger"]{grid-template-columns:1fr auto}
.site-head[data-layout="burger"] .site-head__nav,.site-head[data-layout="burger"] .site-head__cta{display:none}
.site-head[data-layout="burger"] .site-head__burger{display:grid}
.site-head[data-layout="zentriert"]{grid-template-columns:1fr auto 1fr;column-gap:1.8rem}
.site-head[data-layout="zentriert"] .site-head__nav,.site-head[data-layout="zentriert"] .site-head__cta{display:none}
.site-head[data-layout="zentriert"] .site-head__name{display:none}
.site-head[data-layout="zentriert"] .site-head__navside--left{display:inline-flex;grid-column:1;grid-row:1;justify-self:end}
.site-head[data-layout="zentriert"] .site-head__brand{grid-column:2;grid-row:1;justify-self:center}
.site-head[data-layout="zentriert"] .site-head__navside--right{display:inline-flex;grid-column:3;grid-row:1;justify-self:start}
/* Logo */
.site-head[data-marke="logo"] .site-head__name{display:none}
/* Höhe */
.site-head[data-hoehe="kompakt"]{--sh-pad:.55rem 1.3rem;--sh-mark:32px}
.site-head[data-hoehe="gross"]{--sh-pad:1.35rem 1.5rem;--sh-mark:46px}
/* Mobil: einzeilige Layouts weichen auf den Burger aus */
@media (max-width:640px){
  .site-head[data-layout="rechts"],.site-head[data-layout="mittig"],
  .site-head[data-layout="zentriert"]{grid-template-columns:1fr auto}
  .site-head[data-layout="rechts"] .site-head__nav,
  .site-head[data-layout="mittig"] .site-head__nav,
  .site-head[data-layout="mittig"] .site-head__cta,
  .site-head[data-layout="zentriert"] .site-head__navside--left,
  .site-head[data-layout="zentriert"] .site-head__navside--right{display:none}
  .site-head[data-layout="zentriert"] .site-head__brand{grid-column:1;justify-self:start}
  .site-head[data-layout="rechts"] .site-head__burger,
  .site-head[data-layout="mittig"] .site-head__burger,
  .site-head[data-layout="zentriert"] .site-head__burger{display:grid}
}
/* ── Mobil-Anordnung: Logo links/mittig/rechts · Menü-Knopf links/rechts (data-mlogo/data-mburger) ── */
@media (max-width:640px){
  .site-head[data-layout="rechts"],.site-head[data-layout="mittig"],
  .site-head[data-layout="zentriert"],.site-head[data-layout="burger"]{grid-template-columns:1fr auto 1fr}
  .site-head[data-layout] .site-head__brand{grid-row:1;grid-column:1;justify-self:start}
  .site-head[data-layout][data-mlogo="mittig"] .site-head__brand{grid-column:2;justify-self:center}
  .site-head[data-layout][data-mlogo="rechts"] .site-head__brand{grid-column:3;justify-self:end}
  .site-head[data-layout] .site-head__burger{grid-row:1;grid-column:3;justify-self:end}
  .site-head[data-layout][data-mburger="links"] .site-head__burger{grid-column:1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .site-head,.site-head nav a,.site-head nav a::after,.site-head__cta,.site-head__burger{transition:none}
}
/* ── Sternen-Layer ── */
.site-head__stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .45s ease}
.site-head--stars:hover .site-head__stars,.site-head--stars:focus-within .site-head__stars{opacity:.95}
.site-head__stars circle{fill:#e9edff}
.site-head__stars .st-a{fill:var(--akzent,#7c87ff)}
.site-head__stars .glanz circle{fill:#fff}
.site-head__stars .glanz path{stroke:#fff;stroke-width:.6;stroke-linecap:round;fill:none;opacity:.4}
.site-head__stars .twinkle{animation:shStarTwinkle 3.4s ease-in-out infinite}
.site-head__stars .twinkle-2{animation:shStarTwinkle 4.6s ease-in-out infinite;animation-delay:1.2s}
.site-head__stars .twinkle-3{animation:shStarTwinkle 5.6s ease-in-out infinite;animation-delay:2.3s}
@keyframes shStarTwinkle{0%,100%{opacity:.25}55%{opacity:1}}
/* Inhalt ueber die Sterne heben (Drawer bleibt unberuehrt) */
.site-head--stars .site-head__brand,.site-head--stars nav,.site-head--stars .site-head__cta,.site-head--stars .site-head__burger{position:relative;z-index:1}
@media (hover:none){.site-head__stars{display:none}}
@media (prefers-reduced-motion:reduce){.site-head__stars,.site-head__stars .twinkle,.site-head__stars .twinkle-2,.site-head__stars .twinkle-3{animation:none;transition:none}}
</style>

<script>
/* Milchglas beim Scrollen + Burger-Menü. Im Projekt am Fenster-Scroll hängen. */
(function(){
  var head=document.querySelector('.site-head');
  if(!head) return;
  window.addEventListener('scroll',function(){head.classList.toggle('scrolled',window.scrollY>12);},{passive:true});
  var burger=head.querySelector('.site-head__burger');
  if(burger) burger.addEventListener('click',function(){
    var open=head.classList.toggle('is-open');
    burger.setAttribute('aria-expanded',open?'true':'false');
  });
  var annClose=document.querySelector('.site-head__annbar-close');
  if(annClose) annClose.addEventListener('click',function(){
    var bar=annClose.closest('.site-head__annbar');
    if(bar) bar.classList.add('is-hidden');
    /* Im Projekt merken: localStorage.setItem('annbar-dismissed','1'); */
  });
})();
</script>

<!-- Schwebender Glas-Header (Pill-Kapsel) — eigenständig kopierbar. Achsen am <header>:
     data-layout = rechts | mittig | burger | zentriert
     data-marke  = logoname | logo
     data-hoehe  = kompakt | standard | gross
     data-hover  = underline | zoom | farbe   (Hover der Menüpunkte)
     data-scroll = glas | solid              (Verhalten beim Scrollen)
     data-hb     = klassik | spin | squeeze | pfeil      (Hamburger-Icon-Animation)
     data-menu   = ausklappen | einblenden | vollbild    (Aufklappen des Mobil-Menüs)
     data-mlogo  = links | mittig | rechts               (Logo-Position mobil)
     data-mburger= links | rechts                        (Menü-Knopf-Position mobil; nie dieselbe Seite wie das Logo) -->
<!-- Optional: Ankündigungs-Leiste ÜBER dem Header (einfach weglassen, wenn nicht gewünscht) -->
<div class="site-head__annbar" role="region" aria-label="Ankündigung">
  <span class="site-head__annbar-text">Neu: kostenlose Erstberatung im Juli — <a href="#">jetzt Termin sichern</a></span>
  <button type="button" class="site-head__annbar-close" aria-label="Hinweis schließen">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
  </button>
</div>
<header class="site-head site-head--pill" data-layout="rechts" data-marke="logoname" data-hoehe="standard" data-hover="underline" data-hb="klassik" data-menu="ausklappen" data-mlogo="links" data-mburger="rechts" data-scroll="glas">
  <a href="#" class="site-head__brand" aria-label="Marke – zur Startseite">
    <span class="site-head__mark" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V9l8-5 8 5v11"/><path d="M9 20v-6h6v6"/></svg>
    </span>
    <span class="site-head__name">Marke</span>
  </a>
  <nav class="site-head__nav" aria-label="Hauptmenü"><a href="#">Start</a><a href="#">Leistungen</a><a href="#">Referenzen</a><a href="#">Kontakt</a></nav>
  <!-- geteilte Nav nur für data-layout="zentriert" (Logo mittig, nur Symbol) -->
  <nav class="site-head__navside site-head__navside--left" aria-label="Menü links"><a href="#">Start</a><a href="#">Leistungen</a></nav>
  <nav class="site-head__navside site-head__navside--right" aria-label="Menü rechts"><a href="#">Referenzen</a><a href="#">Kontakt</a></nav>
  <a href="#" class="site-head__cta">Anfragen</a>
  <button type="button" class="site-head__burger" aria-label="Menü öffnen" aria-expanded="false" aria-controls="site-drawer">
    <span class="site-head__hb" aria-hidden="true"><span></span><span></span><span></span></span>
  </button>
  <div class="site-head__drawer" id="site-drawer">
    <a href="#">Start</a><a href="#">Leistungen</a><a href="#">Referenzen</a><a href="#">Kontakt</a>
  </div>
</header>

<style>
/* Ein Header, per data-Attribut umschaltbar. Akzentfarbe über --akzent. In echten
   Projekten position:sticky am Fenster (kein Scrollbox-Wrapper wie in der Demo). */
/* Optionale Ankündigungs-Leiste über dem Header */
.site-head__annbar{display:flex;align-items:center;gap:.8rem;padding:.55rem 1.1rem;font-size:.82rem;color:#0d0d10;
  background:linear-gradient(90deg,var(--akzent,#7c87ff),color-mix(in srgb,var(--akzent,#7c87ff) 62%,#fff))}
.site-head__annbar-text{flex:1;min-width:0;font-weight:600}
.site-head__annbar-text a{color:#0d0d10;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.site-head__annbar-close{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:7px;background:rgba(13,13,16,.12);color:#0d0d10;transition:background .2s ease}
.site-head__annbar-close:hover,.site-head__annbar-close:focus-visible{background:rgba(13,13,16,.24);outline:none}
.site-head__annbar-close:focus-visible{outline:2px solid #0d0d10;outline-offset:2px}
.site-head__annbar-close svg{width:15px;height:15px}
.site-head__annbar.is-hidden{display:none}
.site-head{position:sticky;top:0;z-index:50;display:grid;align-items:center;gap:.5rem 1.2rem;
  --sh-pad:.95rem 1.4rem;--sh-mark:38px;--sh-nav:#a1a1aa;--sh-nav-hover:#f4f4f5;padding:var(--sh-pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,
    -webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
.site-head.scrolled{background:rgba(22,22,26,.6);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:#2c2c34;box-shadow:0 8px 24px -18px rgba(0,0,0,.85)}
/* Scroll-Stil "solid": feste Fläche + Schatten statt Milchglas (data-scroll="solid") */
.site-head[data-scroll="solid"]{background:#1c1c22;border-bottom-color:#26262c}
.site-head[data-scroll="solid"].scrolled{background:#1c1c22;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 6px 22px rgba(0,0,0,.55)}
.site-head__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  color:#f4f4f5;font-weight:700;font-size:1rem;white-space:nowrap}
.site-head__mark{width:var(--sh-mark);height:var(--sh-mark);flex:0 0 auto;border-radius:10px;
  display:grid;place-items:center;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.16)),var(--akzent,#7c87ff);
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.35)}
.site-head__mark svg{width:56%;height:56%}
.site-head__mark:has(img){background:none;box-shadow:none;border-color:transparent;padding:2px}
.site-head__mark img{width:100%;height:100%;object-fit:contain}
.site-head__nav{display:inline-flex;gap:1.4rem;font-size:.86rem}
.site-head__navside{display:none;gap:1.4rem;font-size:.86rem}
/* Menü-Links (Haupt- und geteilte Nav) */
.site-head nav a{position:relative;color:var(--sh-nav);text-decoration:none;padding-bottom:2px;
  transition:color .2s ease,transform .2s ease}
.site-head nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--akzent,#7c87ff);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.site-head nav a:hover,.site-head nav a:focus-visible{color:var(--sh-nav-hover);outline:none}
.site-head nav a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:4px;border-radius:2px}
/* Menü-Hover-Achse (data-hover): Unterstrich · Zoom · Farbe */
.site-head[data-hover="underline"] nav a:hover::after,
.site-head[data-hover="underline"] nav a:focus-visible::after{transform:scaleX(1)}
.site-head[data-hover="zoom"] nav a:hover,
.site-head[data-hover="zoom"] nav a:focus-visible{transform:scale(1.09)}
/* "farbe" = adaptiver Hintergrund beim Hover (hell auf dunkel, dunkel auf hell) — auf hellen Seiten --sh-nav-bg:#141418;--sh-nav-ink:#fff setzen */
.site-head[data-hover="farbe"] nav a{padding:.34rem .6rem;border-radius:8px;transition:background-color .2s ease,color .2s ease}
.site-head[data-hover="farbe"] nav a:hover,
.site-head[data-hover="farbe"] nav a:focus-visible{background:var(--sh-nav-bg,#f4f4f5);color:var(--sh-nav-ink,#141418)}
.site-head__cta{justify-self:end;font-size:.82rem;font-weight:600;color:#0d0d10;text-decoration:none;
  padding:.55rem 1rem;border-radius:99px;white-space:nowrap;background:var(--akzent,#7c87ff);transition:filter .2s ease}
.site-head__cta:hover,.site-head__cta:focus-visible{filter:brightness(1.1);outline:none}
.site-head__cta:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-head__burger{justify-self:end;width:44px;height:44px;display:none;place-items:center;touch-action:manipulation;
  border:1px solid #2c2c34;border-radius:10px;background:#1c1c22;color:#f4f4f5;cursor:pointer;transition:background .2s ease}
.site-head__burger:hover{background:#24242c}
.site-head__burger:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-head__burger svg{width:20px;height:20px}
.site-head__drawer{position:absolute;left:0;right:0;top:100%;z-index:40;display:none;flex-direction:column;gap:.2rem;
  padding:.6rem;background:rgba(22,22,26,.97);border-bottom:1px solid #2c2c34;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-head__drawer a{color:#e4e4e7;text-decoration:none;font-size:.9rem;padding:.7rem .8rem;border-radius:8px}
.site-head__drawer a:hover,.site-head__drawer a:focus-visible{background:rgba(255,255,255,.06);color:#fff;outline:none}
.site-head__drawer a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px}
.site-head.is-open .site-head__drawer{display:flex}
/* ── Mobil-Menü: Hamburger-Stil (data-hb) + Aufklapp-Animation (data-menu) ── */
.site-head__hb{position:relative;width:22px;height:16px;pointer-events:none}
.site-head__hb span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s ease,opacity .2s ease,top .3s ease}
.site-head__hb span:nth-child(1){top:0}.site-head__hb span:nth-child(2){top:7px}.site-head__hb span:nth-child(3){top:14px}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="spin"] .site-head__hb{transition:transform .42s cubic-bezier(.4,0,.2,1)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb{transform:rotate(180deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="squeeze"] .site-head__hb span{transition-timing-function:cubic-bezier(.5,-.4,.35,1.4);transition-duration:.34s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(2){transition-delay:.05s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(3){transition-delay:.1s}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__hb span{transform-origin:left center}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;width:11px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;width:11px;transform:rotate(45deg)}
/* Aufklapp-Animation: Drawer immer gerendert, per Sichtbarkeit/Transform gesteuert (display animiert nicht) */
.site-head__drawer{display:flex;visibility:hidden;pointer-events:none;opacity:0;
  transition:opacity .28s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility .3s}
.site-head.is-open .site-head__drawer{visibility:visible;pointer-events:auto;opacity:1}
.site-head[data-menu="ausklappen"] .site-head__drawer{transform:translateY(-10px)}
.site-head[data-menu="ausklappen"].is-open .site-head__drawer{transform:translateY(0)}
.site-head[data-menu="einblenden"] .site-head__drawer{transform:scaleY(.96);transform-origin:top}
.site-head[data-menu="einblenden"].is-open .site-head__drawer{transform:scaleY(1)}
.site-head[data-menu="vollbild"] .site-head__drawer{position:fixed;inset:0;z-index:60;transform:none;
  justify-content:center;align-items:center;gap:.4rem;padding:2rem;border-bottom:0;
  background:rgba(13,13,16,.62);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.site-head[data-menu="vollbild"] .site-head__drawer a{font-size:1.35rem;padding:.6rem 1.2rem}
.site-head[data-menu="vollbild"] .site-head__brand,.site-head[data-menu="vollbild"] .site-head__burger{position:relative;z-index:61}
@media (prefers-reduced-motion:reduce){.site-head__hb span,.site-head[data-hb="spin"] .site-head__hb,.site-head__drawer{transition:none}}
/* Layout */
.site-head[data-layout="rechts"]{grid-template-columns:auto 1fr auto}
.site-head[data-layout="rechts"] .site-head__nav{grid-column:3;justify-self:end}
.site-head[data-layout="rechts"] .site-head__cta{display:none}
.site-head[data-layout="mittig"]{grid-template-columns:1fr auto 1fr}
.site-head[data-layout="mittig"] .site-head__brand{grid-column:1;grid-row:1;justify-self:start}
.site-head[data-layout="mittig"] .site-head__nav{grid-column:2;grid-row:1;justify-self:center}
.site-head[data-layout="mittig"] .site-head__cta{grid-column:3;grid-row:1;justify-self:end}
.site-head[data-layout="burger"]{grid-template-columns:1fr auto}
.site-head[data-layout="burger"] .site-head__nav,.site-head[data-layout="burger"] .site-head__cta{display:none}
.site-head[data-layout="burger"] .site-head__burger{display:grid}
.site-head[data-layout="zentriert"]{grid-template-columns:1fr auto 1fr;column-gap:1.8rem}
.site-head[data-layout="zentriert"] .site-head__nav,.site-head[data-layout="zentriert"] .site-head__cta{display:none}
.site-head[data-layout="zentriert"] .site-head__name{display:none}
.site-head[data-layout="zentriert"] .site-head__navside--left{display:inline-flex;grid-column:1;grid-row:1;justify-self:end}
.site-head[data-layout="zentriert"] .site-head__brand{grid-column:2;grid-row:1;justify-self:center}
.site-head[data-layout="zentriert"] .site-head__navside--right{display:inline-flex;grid-column:3;grid-row:1;justify-self:start}
/* Logo */
.site-head[data-marke="logo"] .site-head__name{display:none}
/* Höhe */
.site-head[data-hoehe="kompakt"]{--sh-pad:.55rem 1.3rem;--sh-mark:32px}
.site-head[data-hoehe="gross"]{--sh-pad:1.35rem 1.5rem;--sh-mark:46px}
/* Mobil: einzeilige Layouts weichen auf den Burger aus */
@media (max-width:640px){
  .site-head[data-layout="rechts"],.site-head[data-layout="mittig"],
  .site-head[data-layout="zentriert"]{grid-template-columns:1fr auto}
  .site-head[data-layout="rechts"] .site-head__nav,
  .site-head[data-layout="mittig"] .site-head__nav,
  .site-head[data-layout="mittig"] .site-head__cta,
  .site-head[data-layout="zentriert"] .site-head__navside--left,
  .site-head[data-layout="zentriert"] .site-head__navside--right{display:none}
  .site-head[data-layout="zentriert"] .site-head__brand{grid-column:1;justify-self:start}
  .site-head[data-layout="rechts"] .site-head__burger,
  .site-head[data-layout="mittig"] .site-head__burger,
  .site-head[data-layout="zentriert"] .site-head__burger{display:grid}
}
/* ── Mobil-Anordnung: Logo links/mittig/rechts · Menü-Knopf links/rechts (data-mlogo/data-mburger) ── */
@media (max-width:640px){
  .site-head[data-layout="rechts"],.site-head[data-layout="mittig"],
  .site-head[data-layout="zentriert"],.site-head[data-layout="burger"]{grid-template-columns:1fr auto 1fr}
  .site-head[data-layout] .site-head__brand{grid-row:1;grid-column:1;justify-self:start}
  .site-head[data-layout][data-mlogo="mittig"] .site-head__brand{grid-column:2;justify-self:center}
  .site-head[data-layout][data-mlogo="rechts"] .site-head__brand{grid-column:3;justify-self:end}
  .site-head[data-layout] .site-head__burger{grid-row:1;grid-column:3;justify-self:end}
  .site-head[data-layout][data-mburger="links"] .site-head__burger{grid-column:1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .site-head,.site-head nav a,.site-head nav a::after,.site-head__cta,.site-head__burger{transition:none}
}

/* ── Pill-Kapsel (.site-head--pill): schwebender Glas-Header — Glas immer sichtbar, verdichtet beim Scrollen ── */
.site-head--pill{top:.65rem;width:min(94%,1080px);margin:.75rem auto 0;border-radius:999px;
  background:rgba(20,20,26,.5);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.75)}
.site-head--pill.scrolled{background:rgba(20,20,26,.84);border-color:rgba(255,255,255,.15);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.9)}
/* Scroll-Stil "solid" in der Kapsel-Form */
.site-head--pill[data-scroll="solid"]{background:#191920;border-color:#2a2a33}
.site-head--pill[data-scroll="solid"].scrolled{background:#1c1c22;border-color:#31313b;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 12px 28px rgba(0,0,0,.55)}
.site-head--pill .site-head__burger{border-radius:999px}
/* Mobil-Menü als abgesetzte Karte unter der Kapsel (Vollbild-Variante bleibt unverändert) */
.site-head--pill:not([data-menu="vollbild"]) .site-head__drawer{left:.55rem;right:.55rem;top:calc(100% + .5rem);
  border-radius:22px;border:1px solid rgba(255,255,255,.1);background:rgba(20,20,24,.97)}
</style>

<script>
/* Milchglas beim Scrollen + Burger-Menü. Im Projekt am Fenster-Scroll hängen. */
(function(){
  var head=document.querySelector('.site-head');
  if(!head) return;
  window.addEventListener('scroll',function(){head.classList.toggle('scrolled',window.scrollY>12);},{passive:true});
  var burger=head.querySelector('.site-head__burger');
  if(burger) burger.addEventListener('click',function(){
    var open=head.classList.toggle('is-open');
    burger.setAttribute('aria-expanded',open?'true':'false');
  });
  var annClose=document.querySelector('.site-head__annbar-close');
  if(annClose) annClose.addEventListener('click',function(){
    var bar=annClose.closest('.site-head__annbar');
    if(bar) bar.classList.add('is-hidden');
    /* Im Projekt merken: localStorage.setItem('annbar-dismissed','1'); */
  });
})();
</script>

<!-- Mobil-Header mit Slot-System — eigenständig kopierbar (Markup + CSS + JS komplett enthalten).
     5 gleich breite Plätze, Belegung über Attribute am <header>:
     data-s1 .. data-s5 = logo | logo2 | menue | suche | konto | warenkorb
                          | facebook | instagram | linkedin | google | leer
       · menue (Hamburger) nur außen: data-s1 oder data-s5 (UX-Leitplanke, im CSS verankert)
       · logo nur data-s1, data-s3 oder data-s5; mittig (s3) wird es echt zentriert,
         die Nachbar-Slots 2+4 bleiben reserviert (Wert "logo2")
       · Logo mit Name belegt außen 2 Plätze: Folge-Slot="logo2"
     data-zeilen       = eins | zwei    (zwei = Logo mittig in eigener Zeile, Icon-Leiste darunter)
     data-marke        = logoname | logo    (mit Name · nur Symbol)
     data-beschriftung = mit | ohne     (Textzeile unter den Icons)
     data-hb           = klassik | spin | squeeze | pfeil     (Hamburger-Animation)
     data-menu         = ausklappen | einblenden | vollbild   (Aufklappen; Vollbild mit Blur)
     Hinweise: Suche/Anmelden/Warenkorb/Social sind Links — href auf die eigenen Ziele setzen.
     Social-Icons sparsam einsetzen (Header-Platz ist knapp; üblicher Ort ist der Footer).
     Tab-Reihenfolge folgt der Markup-Reihenfolge, nicht der Slot-Anordnung. -->
<header class="site-head site-head--slots" data-zeilen="eins" data-marke="logoname" data-beschriftung="ohne" data-hb="klassik" data-menu="ausklappen" data-s1="menue" data-s2="logo2" data-s3="logo" data-s4="logo2" data-s5="warenkorb">
  <a href="#" class="shs-el shs-el--logo" aria-label="Marke – zur Startseite">
    <span class="shs-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V9l8-5 8 5v11"/><path d="M9 20v-6h6v6"/></svg></span>
    <span class="shs-name">Marke</span>
  </a>
  <button type="button" class="shs-el shs-el--menue site-head__burger" aria-label="Menü öffnen" aria-expanded="false" aria-controls="shs-drawer">
    <span class="site-head__hb" aria-hidden="true"><span></span><span></span><span></span></span>
    <span class="shs-cap">Menü</span>
  </button>
  <a href="#" class="shs-el shs-el--suche" aria-label="Suche">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
    <span class="shs-cap">Suche</span>
  </a>
  <a href="#" class="shs-el shs-el--konto" aria-label="Anmelden / Konto">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5"/></svg>
    <span class="shs-cap">Anmelden</span>
  </a>
  <a href="#" class="shs-el shs-el--warenkorb" aria-label="Warenkorb">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
    <span class="shs-cap">Warenkorb</span>
  </a>
  <a href="#" class="shs-el shs-el--facebook" aria-label="Facebook">
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.6-1.5H16V5c-.3 0-1.2-.1-2.2-.1-2.2 0-3.8 1.4-3.8 3.9V11H7.5v3H10v8h3z"/></svg>
    <span class="shs-cap">Facebook</span>
  </a>
  <a href="#" class="shs-el shs-el--instagram" aria-label="Instagram">
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.5.4 1.1.4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.5.2-1.1.4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.5-.4-1.1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.5-.2 1.1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zM12 6.9A5.1 5.1 0 1 0 17.1 12 5.1 5.1 0 0 0 12 6.9zm0 8.4A3.3 3.3 0 1 1 15.3 12 3.3 3.3 0 0 1 12 15.3zm5.3-8.6a1.2 1.2 0 1 0 1.2 1.2 1.2 1.2 0 0 0-1.2-1.2z"/></svg>
    <span class="shs-cap">Instagram</span>
  </a>
  <a href="#" class="shs-el shs-el--linkedin" aria-label="LinkedIn">
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.9 8.5H4V20h2.9V8.5zM5.4 3.6a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4zM20 20h-2.9v-5.6c0-1.3 0-3.1-1.9-3.1s-2.2 1.5-2.2 3v5.7H10V8.5h2.8v1.6h.1a3.1 3.1 0 0 1 2.8-1.5c3 0 3.5 2 3.5 4.5V20z"/></svg>
    <span class="shs-cap">LinkedIn</span>
  </a>
  <a href="#" class="shs-el shs-el--google" aria-label="Google">
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.35 11.1h-9.17v2.73h6.51c-.33 3.81-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27 3.09 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10 5.35 0 9.25-3.67 9.25-9.09 0-1.15-.15-1.81-.15-1.81Z"/></svg>
    <span class="shs-cap">Google</span>
  </a>
  <div class="site-head__drawer" id="shs-drawer">
    <a href="#">Start</a><a href="#">Leistungen</a><a href="#">Referenzen</a><a href="#">Kontakt</a>
  </div>
</header>

<style>
/* Grundgerüst: klebt oben, Milchglas beim Scrollen */
.site-head{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,
    -webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
.site-head.scrolled{background:rgba(22,22,26,.6);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:#2c2c34;box-shadow:0 8px 24px -18px rgba(0,0,0,.85)}
.site-head__drawer{position:absolute;left:0;right:0;top:100%;z-index:40;display:none;flex-direction:column;gap:.2rem;
  padding:.6rem;background:rgba(22,22,26,.97);border-bottom:1px solid #2c2c34;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-head__drawer a{color:#e4e4e7;text-decoration:none;font-size:.9rem;padding:.7rem .8rem;border-radius:8px}
.site-head__drawer a:hover,.site-head__drawer a:focus-visible{background:rgba(255,255,255,.06);color:#fff;outline:none}
.site-head__drawer a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px}
.site-head.is-open .site-head__drawer{display:flex}
/* ── Mobil-Menü: Hamburger-Stil (data-hb) + Aufklapp-Animation (data-menu) ── */
.site-head__hb{position:relative;width:22px;height:16px;pointer-events:none}
.site-head__hb span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s ease,opacity .2s ease,top .3s ease}
.site-head__hb span:nth-child(1){top:0}.site-head__hb span:nth-child(2){top:7px}.site-head__hb span:nth-child(3){top:14px}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="klassik"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="spin"] .site-head__hb{transition:transform .42s cubic-bezier(.4,0,.2,1)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb{transform:rotate(180deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="spin"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="squeeze"] .site-head__hb span{transition-timing-function:cubic-bezier(.5,-.4,.35,1.4);transition-duration:.34s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(2){transition-delay:.05s}
.site-head[data-hb="squeeze"] .site-head__hb span:nth-child(3){transition-delay:.1s}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(2){opacity:0}
.site-head[data-hb="squeeze"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__hb span{transform-origin:left center}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(1){top:7px;width:11px;transform:rotate(-45deg)}
.site-head[data-hb="pfeil"] .site-head__burger[aria-expanded="true"] .site-head__hb span:nth-child(3){top:7px;width:11px;transform:rotate(45deg)}
/* Aufklapp-Animation: Drawer immer gerendert, per Sichtbarkeit/Transform gesteuert (display animiert nicht) */
.site-head__drawer{display:flex;visibility:hidden;pointer-events:none;opacity:0;
  transition:opacity .28s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility .3s}
.site-head.is-open .site-head__drawer{visibility:visible;pointer-events:auto;opacity:1}
.site-head[data-menu="ausklappen"] .site-head__drawer{transform:translateY(-10px)}
.site-head[data-menu="ausklappen"].is-open .site-head__drawer{transform:translateY(0)}
.site-head[data-menu="einblenden"] .site-head__drawer{transform:scaleY(.96);transform-origin:top}
.site-head[data-menu="einblenden"].is-open .site-head__drawer{transform:scaleY(1)}
.site-head[data-menu="vollbild"] .site-head__drawer{position:fixed;inset:0;z-index:60;transform:none;
  justify-content:center;align-items:center;gap:.4rem;padding:2rem;border-bottom:0;
  background:rgba(13,13,16,.62);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.site-head[data-menu="vollbild"] .site-head__drawer a{font-size:1.35rem;padding:.6rem 1.2rem}
.site-head[data-menu="vollbild"] .site-head__brand,.site-head[data-menu="vollbild"] .site-head__burger{position:relative;z-index:61}
@media (prefers-reduced-motion:reduce){.site-head__hb span,.site-head[data-hb="spin"] .site-head__hb,.site-head__drawer{transition:none}}
/* ── Slot-System: 5 gleich breite Plätze, Belegung über data-s1..data-s5 am <header> ── */
.site-head--slots{display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;gap:0;padding:.4rem .5rem;color:#e4e4e7}
.shs-el{display:none;grid-row:1;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:48px;
  padding:.35rem .15rem;border:0;border-radius:10px;background:none;color:#e4e4e7;text-decoration:none;cursor:pointer;font:inherit}
.shs-el:hover{background:rgba(255,255,255,.06)}
.shs-el:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px}
.shs-el>svg{width:22px;height:22px;flex:0 0 auto}
.shs-cap{font-size:.66rem;font-weight:600;color:#a1a1aa}
.shs-el:hover .shs-cap{color:#e4e4e7}
.site-head--slots[data-beschriftung="ohne"] .shs-cap{display:none}
.site-head--slots .site-head__burger{width:auto;height:auto;border:0;background:none}
.site-head--slots .site-head__hb{margin:3px 0}
/* Logo = Home-Link */
.shs-el--logo{flex-direction:row;gap:.5rem}
.shs-mark{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.16)),var(--akzent,#7c87ff);
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.35)}
.shs-mark svg{width:56%;height:56%}
.shs-name{font-weight:700;font-size:.95rem;color:#f4f4f5;white-space:nowrap}
.site-head--slots[data-marke="logo"] .shs-name{display:none}
/* Platzierung — jedes Element auf Zeile 1 genagelt (explizite Zeile verhindert Grid-Umbruch) */
/* Menü bewusst NUR außen (Slot 1/5): UX-Leitplanke (Daumen-Zonen, Konvention) */
.site-head--slots[data-s1="menue"] .shs-el--menue{display:flex;grid-column:1}
.site-head--slots[data-s5="menue"] .shs-el--menue{display:flex;grid-column:5}
.site-head--slots[data-s1="suche"] .shs-el--suche{display:flex;grid-column:1}
.site-head--slots[data-s2="suche"] .shs-el--suche{display:flex;grid-column:2}
.site-head--slots[data-s3="suche"] .shs-el--suche{display:flex;grid-column:3}
.site-head--slots[data-s4="suche"] .shs-el--suche{display:flex;grid-column:4}
.site-head--slots[data-s5="suche"] .shs-el--suche{display:flex;grid-column:5}
.site-head--slots[data-s1="konto"] .shs-el--konto{display:flex;grid-column:1}
.site-head--slots[data-s2="konto"] .shs-el--konto{display:flex;grid-column:2}
.site-head--slots[data-s3="konto"] .shs-el--konto{display:flex;grid-column:3}
.site-head--slots[data-s4="konto"] .shs-el--konto{display:flex;grid-column:4}
.site-head--slots[data-s5="konto"] .shs-el--konto{display:flex;grid-column:5}
.site-head--slots[data-s1="warenkorb"] .shs-el--warenkorb{display:flex;grid-column:1}
.site-head--slots[data-s2="warenkorb"] .shs-el--warenkorb{display:flex;grid-column:2}
.site-head--slots[data-s3="warenkorb"] .shs-el--warenkorb{display:flex;grid-column:3}
.site-head--slots[data-s4="warenkorb"] .shs-el--warenkorb{display:flex;grid-column:4}
.site-head--slots[data-s5="warenkorb"] .shs-el--warenkorb{display:flex;grid-column:5}
.site-head--slots[data-s1="facebook"] .shs-el--facebook{display:flex;grid-column:1}
.site-head--slots[data-s2="facebook"] .shs-el--facebook{display:flex;grid-column:2}
.site-head--slots[data-s3="facebook"] .shs-el--facebook{display:flex;grid-column:3}
.site-head--slots[data-s4="facebook"] .shs-el--facebook{display:flex;grid-column:4}
.site-head--slots[data-s5="facebook"] .shs-el--facebook{display:flex;grid-column:5}
.site-head--slots[data-s1="instagram"] .shs-el--instagram{display:flex;grid-column:1}
.site-head--slots[data-s2="instagram"] .shs-el--instagram{display:flex;grid-column:2}
.site-head--slots[data-s3="instagram"] .shs-el--instagram{display:flex;grid-column:3}
.site-head--slots[data-s4="instagram"] .shs-el--instagram{display:flex;grid-column:4}
.site-head--slots[data-s5="instagram"] .shs-el--instagram{display:flex;grid-column:5}
.site-head--slots[data-s1="linkedin"] .shs-el--linkedin{display:flex;grid-column:1}
.site-head--slots[data-s2="linkedin"] .shs-el--linkedin{display:flex;grid-column:2}
.site-head--slots[data-s3="linkedin"] .shs-el--linkedin{display:flex;grid-column:3}
.site-head--slots[data-s4="linkedin"] .shs-el--linkedin{display:flex;grid-column:4}
.site-head--slots[data-s5="linkedin"] .shs-el--linkedin{display:flex;grid-column:5}
.site-head--slots[data-s1="google"] .shs-el--google{display:flex;grid-column:1}
.site-head--slots[data-s2="google"] .shs-el--google{display:flex;grid-column:2}
.site-head--slots[data-s3="google"] .shs-el--google{display:flex;grid-column:3}
.site-head--slots[data-s4="google"] .shs-el--google{display:flex;grid-column:4}
.site-head--slots[data-s5="google"] .shs-el--google{display:flex;grid-column:5}
/* Logo nur links (1) · mittig (3, echt zentriert, Slot 2+4 reserviert) · rechts (5) */
.site-head--slots[data-zeilen="eins"][data-marke="logoname"][data-s1="logo"] .shs-el--logo{display:flex;grid-column:1/span 2}
.site-head--slots[data-zeilen="eins"][data-marke="logo"][data-s1="logo"] .shs-el--logo{display:flex;grid-column:1}
.site-head--slots[data-zeilen="eins"][data-s3="logo"] .shs-el--logo{display:flex;grid-column:2/span 3}
.site-head--slots[data-zeilen="eins"][data-marke="logoname"][data-s5="logo"] .shs-el--logo{display:flex;grid-column:4/span 2}
.site-head--slots[data-zeilen="eins"][data-marke="logo"][data-s5="logo"] .shs-el--logo{display:flex;grid-column:5}
/* Zweizeilig: Logo mittig in eigener oberer Zeile, Icon-Leiste darunter (Muster großer Shops) */
.site-head--slots[data-zeilen="zwei"] .shs-el{grid-row:2}
.site-head--slots[data-zeilen="zwei"] .shs-el--logo{display:flex;grid-row:1;grid-column:1/-1;justify-self:center;padding:.45rem .2rem .2rem}
/* Vollbild-Menü: Logo + Burger über der Glasfläche halten */
.site-head--slots[data-menu="vollbild"] .shs-el--logo,.site-head--slots[data-menu="vollbild"] .site-head__burger{position:relative;z-index:61}
</style>

<script>
/* Milchglas beim Scrollen + Hamburger-Menü */
(function(){
  var head=document.querySelector('.site-head--slots');
  if(!head) return;
  window.addEventListener('scroll',function(){head.classList.toggle('scrolled',window.scrollY>12);},{passive:true});
  var burger=head.querySelector('.site-head__burger');
  if(burger) burger.addEventListener('click',function(){
    var open=head.classList.toggle('is-open');
    burger.setAttribute('aria-expanded',open?'true':'false');
  });
})();
</script>