/* =========================================================
   AETHER NAV – Mobile-first, 767.98px Glitch-proof, Clean
   ========================================================= */

/* = Base / Reset ========================================================= */
:root{
  --nav-scale: 1;
  --gate-height: 64px;             /* Fallback, ggf. via JS aktualisieren */
  --primary-orange: #ff7a00;       /* Primärfarbe CTA */
}

/* XS -> minimal kleiner */
@media (max-width:360px){ :root{ --nav-scale:.92; } }
/* Small Phones */
@media (min-width:361px) and (max-width:479.98px){ :root{ --nav-scale:.96; } }
/* Large Desktops */
@media (min-width:1200px){ :root{ --nav-scale:1.06; } }

html, body{ scroll-behavior:smooth; }
.nav-lock, .nav-lock body{ overflow:hidden; }

/* = Header =============================================================== */
.aether-header{
  position: fixed !important;
  top: 0 !important; left: 0; right: 0;
  z-index: 1100 !important;
  background: rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom:1px solid var(--border);
  padding-top: max(0px, env(safe-area-inset-top));
  transition: box-shadow .2s ease, background-color .2s ease, padding .2s ease;
}
@supports (background: color-mix(in oklab, #fff 88%, transparent)) {
  .aether-header{
    background: color-mix(in oklab, var(--surface, #fff) 88%, transparent) !important;
  }
}
.aether-header.is-ascended{ box-shadow: 0 6px 24px rgba(0,0,0,.08); }

[data-theme="dark"] .aether-header{
  background: rgba(32,32,32,.85) !important;
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
@supports (background: color-mix(in oklab, #1e1e1e 88%, transparent)) {
  [data-theme="dark"] .aether-header{
    background: color-mix(in oklab, #1e1e1e 88%, transparent) !important;
  }
}
.aether-header.portal-open{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Platz für fixen Header */
body{ padding-top: var(--gate-height) !important; }

/* Header-Layout */
.aether-header__bar{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--header-pad-y) clamp(6px,5vw,10px);
  display: grid;
  grid-template-columns: auto 1fr auto; /* Sigil | Nav | Actions */
  align-items: center;
  gap: 1rem;
  container-type: inline-size;
}
@container (max-width:520px){
  .sigil-mark{ letter-spacing:-0.012em !important; }
  .astral-link{ letter-spacing:0 !important; line-height:1.55 !important; }
}

/* = Brand / Links / CTA – Typo-Feeling =================================== */
.aether-header,
.astral-link,
.astral-link--sub,
.sigil-mark,
.charm-cta{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Brand */
.sigil-mark{
  font-weight:950 !important;
  letter-spacing:-0.015em !important;
  line-height:1.15 !important;
  font-size: clamp(1.6rem, 1.05rem + 1.6vw, 2.4rem) !important;
  color: var(--text);
  display:inline-flex; align-items:center; gap:.5rem;
  white-space:nowrap; text-decoration:none;
}
/* Phones: etwas größer, aber per clamp gedeckelt */
@media (max-width:767.98px){
  .sigil-mark{ font-size: clamp(1.8rem, 7.2vw, 2.3rem) !important; }
}

/* Hauptlinks */
.astral-link{
  font-weight:690 !important;
  letter-spacing:-0.002em !important;
  font-size: calc(var(--nav-scale) * clamp(1.02rem, .98rem + .35vw, 1.16rem)) !important;
  line-height:1.55 !important;
  text-wrap:pretty !important;
  color: var(--muted);
  display:block; text-decoration:none; white-space:nowrap; text-align:center;
  padding:.85rem 1.05rem; position:relative;
}
.astral-link:hover,
.astral-link:focus-visible{ color:var(--text); }
.astral-link[aria-current="page"],
.astral-link[data-active]{ color:var(--text); font-weight:700; }
/* schmale Unterstreichung */
.astral-link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px;
  height:2px !important; background:currentColor; opacity:0; transform:scaleX(.6);
  transition:opacity .18s ease, transform .18s ease;
}
@media(hover:hover){
  .astral-link:hover::after,
  .astral-link:focus-visible::after,
  .astral-link[aria-current="page"]::after,
  .astral-link[data-active]::after{ opacity:.75; transform:scaleX(1); }
}

/* Subnav-Links (95% der Hauptlinks) */
.astral-link--sub{
  font-weight:690 !important;
  letter-spacing:-0.002em !important;
  font-size: calc(var(--nav-scale) * clamp(.97rem, .93rem + .33vw, 1.10rem)) !important;
  line-height:1.65 !important;
  text-wrap:pretty !important;
}

/* CTA */
.charm-cta{
  position:relative;
  padding:.6rem .9rem; border-radius:var(--radius);
  font-weight:950 !important; letter-spacing:-0.01em !important;
  font-size: calc(var(--nav-scale) * clamp(1.02rem, .98rem + .35vw, 1.16rem)) !important;
  line-height:1.28 !important; text-wrap:balance !important;
  background: var(--primary-orange) !important; color:#fff !important; border:0 !important;
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; white-space:nowrap;
}
@media(hover:hover){
  .charm-cta:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.10); }
  .charm-cta:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08); }
}
.charm-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 0 0 6px color-mix(in oklab, var(--primary-orange) 55%, transparent),
    0 12px 28px rgba(0,0,0,.22) !important;
}

/* CTA Glanz & States */
.charm-cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.22), rgba(255,255,255,.08) 35%, transparent 60%);
  mix-blend-mode: soft-light; pointer-events:none; opacity:.95;
}
.charm-cta > *{ position:relative; z-index:1; }
.charm-cta[aria-busy="true"]{ cursor:progress; filter:saturate(.9) brightness(.96); }
.charm-cta[aria-busy="true"] .charm-cta__labl,
.charm-cta[aria-busy="true"] .charm-cta__icon{ opacity:0; }

/* = Actions rechts ======================================================= */
.astral-actions{ display:inline-flex; align-items:center; justify-content:flex-end; gap:.5rem; }
.astral-actions .orb-toggle{ order:0; }
.astral-actions .charm-cta{ order:1; }

/* = Toggle =============================================================== */
.portal-toggle{
  appearance:none; border:1px solid var(--border); background:var(--surface);
  border-radius:var(--radius); padding:.5rem .6rem; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; justify-self:end;
  min-width:44px; min-height:44px; color:var(--text);
}
.portal-toggle:focus-visible{outline:2px solid color-mix(in oklab, var(--text) 20%, transparent); outline-offset:2px}
.portal-toggle .icon{ width:22px; height:22px; }
.portal-toggle .icon-close{ display:none; }
.portal-toggle[aria-expanded="true"] .icon-burger{ display:none; }
.portal-toggle[aria-expanded="true"] .icon-close{ display:inline; }

/* = Nav Grundstruktur ==================================================== */
.astral-nav{ width:100%; }
.astral-nav__list{ list-style:none; padding:0; margin:0; }
.astral-item{ position:relative; border:0; }
.astral-item + .astral-item{ border-top:none; }

/* Fokus-Stile */
.astral-link:focus-visible{ outline:2px solid color-mix(in oklab, currentColor 60%, transparent); outline-offset:3px; border-radius:8px; }

/* THEME Scopes – Linkfarben konsistent */
:root:not([data-theme="dark"]) .astral-link{ color:#111; }
:root:not([data-theme="dark"]) .astral-link[aria-current="page"],
:root:not([data-theme="dark"]) .astral-link[data-active]{ color:#000; }
:root:not([data-theme="dark"]) .portal-toggle{ color:#111; border-color:var(--border); background:#fff; }

[data-theme="dark"] .astral-link{ color:#fff; }
[data-theme="dark"] .astral-link::after{ background:#fff; }
[data-theme="dark"] .astral-link[aria-current="page"],
[data-theme="dark"] .astral-link[data-active]{ color:#fff; }
[data-theme="dark"] .portal-toggle{ color:#fff; border-color:rgba(255,255,255,.25); background:#111; }

/* = MOBILE (<= 767.98px) ================================================= */
@media (max-width:767.98px){
  /* Header-Grid stabil: Logo | Spacer | Actions/Burger */
  .aether-header__bar{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important; gap:1rem !important;
  }

  /* Mobile Menü: unter dem fixen Header andocken, initial unsichtbar */
  .astral-nav{
    position: fixed !important;
    inset: var(--gate-height) 0 0 !important;
    height: calc(100dvh - var(--gate-height)) !important;
    width: auto !important;
    display: block !important;
    opacity: 0; pointer-events: none; transform:none !important;
    background: var(--surface);
    z-index: 1000;
  }
  .astral-nav.is-awakened{ opacity:1; pointer-events:auto; }

  /* UL nur sichtbar, wenn Menü offen */
  .astral-nav__list{ display:none !important; }
  .astral-nav.is-awakened .astral-nav__list{
    display:flex !important; flex-direction:column !important; gap:0 !important;
    padding:.5rem clamp(16px,6vw,48px) .75rem !important;
    overflow:auto !important;
  }

  /* Subnav Mobile */
  .astral-item{ display:grid; grid-template-columns: 1fr auto; align-items:center; border-bottom:1px solid color-mix(in oklab, var(--muted) 12%, transparent); }
  .astral-item:last-child{ border-bottom:0; }
  .astral-item > .astral-link{
    text-align:left !important;
    padding: 0.9rem clamp(16px,6vw,24px);
    padding-right: 3.25rem; line-height:1.3;
    font-weight:750 !important; font-size:1.08rem !important; letter-spacing:.1px !important;
  }
  .astral-link::after{ display:none; }

  .gatelet{
    appearance:none; border:0; background:transparent; padding:.25rem; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    min-width:36px; min-height:36px; border-radius:8px; color:var(--muted);
    margin-right: clamp(12px,5vw,24px);
  }
  .gatelet svg{ width:18px; height:18px; transition:transform .18s ease, color .18s ease; }
  .gatelet[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--text); }

  .underrealm{ display:none; list-style:none; padding:0; margin:.2rem 0 .4rem; }
  .astral-item.is-awakened > .underrealm{ display:block; }
  .underrealm{ margin:.25rem 0 .6rem; padding-left: clamp(18px,7vw,28px); border-left:2px solid color-mix(in oklab, var(--muted) 20%, transparent); }
  .astral-link--sub{
    text-align:left; padding:.45rem 0; line-height:1.25; min-height:36px; font-size:.96rem;
    color: color-mix(in oklab, var(--text) 70%, var(--muted) 30%);
  }
  .astral-link--sub:hover, .astral-link--sub:focus-visible{ color:var(--text); }

  /* Active-Pill mobil */
  .astral-link[aria-current="page"],
  .astral-link[data-active]{ background: color-mix(in oklab, var(--accent) 9%, transparent); color: var(--text); border-radius:12px; }

  /* Mobile CTA unten – sticky & full-bleed */
  .astral-nav__mobile-actions{
    display:grid; grid-template-columns:1fr; gap:.75rem;
    position:sticky !important; bottom:0 !important;
    padding:.95rem clamp(16px,6vw,24px) calc(1rem + env(safe-area-inset-bottom)) !important;
    background: transparent !important; box-shadow:none !important; border-top:0 !important;
    margin-top:auto; z-index:2;
  }
  .astral-nav__mobile-actions .charm-cta{
    width:100% !important; min-height:54px !important; padding:1rem 1.1rem !important; border-radius:14px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08) !important;
  }
  [data-theme="dark"] .astral-nav__mobile-actions .charm-cta{
    box-shadow: 0 12px 28px rgba(0,0,0,.36), 0 3px 10px rgba(0,0,0,.24) !important;
  }

  /* Overlay/Dimmer bündig unter Header */
  .night-veil{
    position: fixed !important;
    inset: var(--gate-height) 0 0 !important;
    background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .18s ease;
    z-index: 900;
  }
  .night-veil.is-awakened{ opacity:1; pointer-events:auto; }

  /* Burger sichtbar auf Mobile, CTA nicht verstecken */
  .portal-toggle{ display:inline-flex !important; }
  .astral-actions .charm-cta{ display:inline-flex !important; }

  /* Dark-Mode Farbanpassungen mobil */
  [data-theme="dark"] .astral-item{ border-bottom:1px solid rgba(255,255,255,.07); }
  [data-theme="dark"] .underrealm{ border-left-color: rgba(255,255,255,.12); }
}

/* = DESKTOP/TABLET (>= 768px) ============================================ */
@media (min-width:768px){
  .portal-toggle{ display:none !important; }

  .astral-nav{
    position: static !important; inset: auto !important;
    height: auto !important; opacity: 1 !important;
    pointer-events: auto !important; transform: none !important;
    display: block !important; background: transparent !important; width:auto; 
  }
  .astral-nav__list{
    display:flex !important; flex-direction: row !important;
    align-items:center !important; justify-content:center !important;
    gap:0 !important; overflow:visible !important; padding:0 !important;
  }

  /* Dropdown Desktop */
  .gatelet{ display:inline-flex !important; appearance:none; border:0; background:transparent; cursor:pointer; padding:.25rem; line-height:1; color:var(--muted); }
  .gatelet svg{ width:16px; height:16px; transition:transform .18s ease, color .18s ease; }
  .gatelet[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--text); }

  .astral-item{ display:inline-flex; align-items:center; position:relative; }
  .astral-item > .astral-link{ padding-right:.25rem; min-height:auto; line-height:normal; }

  .underrealm{
    position:absolute; left:0; top:calc(100% + 8px);
    min-width:240px; max-width:420px; padding:.5rem 0 !important;
    background: rgba(0,0,0,.9) !important; color:#fff;
    border-radius:12px; border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.36);
    display:none; z-index:2000 !important;
  }
  .underrealm::before{
    content:""; position:absolute; top:-6px; left:14px; width:12px; height:12px;
    background: rgba(0,0,0,.9) !important; transform:rotate(45deg);
    border-left:1px solid rgba(255,255,255,.10) !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }
  .underrealm li{ list-style:none; margin:0; }
  .underrealm li + li{ border-top:1px solid rgba(255,255,255,.12); }
  .astral-link--sub{
    display:block; text-align:left !important;
    padding:.6rem .9rem !important; margin:0; border-radius:0; color:#e9e9e9;
  }
  .astral-link--sub:hover, .astral-link--sub:focus-visible{ background: rgba(255,255,255,.08); color:#fff; }
  .astral-item.is-awakened > .underrealm{ display:block !important; }

  /* Light-Mode Dropdown */
  :root:not([data-theme="dark"]) .underrealm{
    background:#fff !important; color:#111 !important;
    border:1px solid rgba(0,0,0,.12) !important; box-shadow:0 14px 34px rgba(0,0,0,.14) !important;
  }
  :root:not([data-theme="dark"]) .underrealm::before{
    background:#fff !important;
    border-left:1px solid rgba(0,0,0,.12) !important;
    border-top:1px solid rgba(0,0,0,.12) !important;
  }
  :root:not([data-theme="dark"]) .astral-link--sub{ color:#111 !important; }
  :root:not([data-theme="dark"]) .astral-link--sub:hover,
  :root:not([data-theme="dark"]) .astral-link--sub:focus-visible{ background:rgba(0,0,0,.06) !important; color:#000 !important; }
}

/* = Tablet kompakt (nur ein kompakter Adjust, ohne neue Logik) ============ */
@media (min-width:768px) and (max-width:1023.98px){
  .astral-nav__list{ flex-wrap: nowrap !important; justify-content: flex-start; gap:.25rem !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .astral-nav__list::-webkit-scrollbar{ display:none; }
  .astral-link{ padding:.56rem .68rem !important; font-size:.80rem !important; line-height:1.15 !important; }
  .aether-header__bar{ grid-template-columns: auto minmax(0,1fr) auto !important; gap:.5rem !important; }
  .sigil-mark{ flex-shrink:0 !important; white-space:nowrap !important; margin-right: clamp(8px,2vw,16px) !important; font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important; line-height:1 !important; }
  .astral-nav{ min-width:0 !important; justify-self:end !important; margin-left: clamp(10px, 2.5vw, 28px) !important; }
  .gatelet{ display:none !important; }
  .astral-actions{ gap:.35rem !important; }
  .astral-actions .charm-cta{ font-size:.80rem !important; padding:.55rem .85rem !important; min-height:38px !important; border-radius:10px !important; margin:0 !important; white-space:nowrap !important; }
}

/* = Kleine Typo-Feinheiten =============================================== */
@media (max-width:479.98px){
  .astral-link{ line-height:1.5 !important; }
  .astral-link--sub{ line-height:1.5 !important; }
}
@media (min-width:768px) and (max-width:880px){
  .astral-link{
    font-size: clamp(.88rem, .82rem + .25vw, 1rem) !important;
    line-height: 1.55 !important;
    letter-spacing: -0.001em !important;
  }
}

/* = Light/Dark Nuancen bei offenem Portal ================================ */
:root:not([data-theme="dark"]) .astral-nav.is-awakened{ background:#fff; }
[data-theme="dark"] .astral-nav.is-awakened{ background:#000; }
[data-theme="dark"] .night-veil.is-awakened{ background:rgba(0,0,0,.6); }


@media (min-width:768px){
  /* Dropdown auch zeigen, wenn hidden am Markup hängt */
  .astral-item.is-awakened > .underrealm[hidden],
  .astral-item:hover > .underrealm[hidden],
  .astral-item:focus-within > .underrealm[hidden]{
    display:block !important;
  }

  /* optional: kleine Fade/Pop-Wirkung */
  .underrealm{
    display:none; opacity:0; transform:translateY(4px);
    transition:opacity .12s ease, transform .12s ease;
  }
  .astral-item.is-awakened > .underrealm,
  .astral-item:hover > .underrealm,
  .astral-item:focus-within > .underrealm{
    display:block !important; opacity:1; transform:translateY(0);
  }
}
/* === Desktop Hover-Gap Fix ============================================= */
@media (min-width:768px){
  /* 1) Subnav direkt unter den Menüpunkt, ohne Lücke */
  .underrealm{
    top: 100% !important;         /* statt calc(100% + 8px) */
    margin-top: 8px !important;   /* optischer Abstand, ohne echten Hover-Gap */
  }

  /* 2) "Hover-Bridge": unsichtbarer Steg füllt den Spalt, damit :hover nicht abreißt */
  .astral-item{
    position: relative; /* sicherstellen */
  }
  .astral-item::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height: 10px;                 /* Steghöhe – kann 6–12px sein */
    pointer-events:auto;          /* Maus darf darüber fahren */
    /* kein Hintergrund – bleibt unsichtbar */
  }

  /* 3) Dropdown zeigen – auch wenn im Markup noch [hidden] steht */
  .astral-item:hover    > .underrealm,
  .astral-item:focus-within > .underrealm,
  .underrealm:hover{
    display:block !important;
    opacity:1; transform:translateY(0);
  }
  .astral-item:hover    > .underrealm[hidden],
  .astral-item:focus-within > .underrealm[hidden],
  .underrealm[hidden]:hover{
    display:block !important;
  }

  /* (optional) sanfter Pop/Fade, ohne den Hover zu stören */
  .underrealm{
    opacity:0; transform:translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
  }
}
/* === MOBILE NAV: Freiraum oben komplett entfernen ====================== */
@media (max-width: 767.98px) {

  /* Menü bündig direkt unter dem Header */
  .astral-nav {
    position: fixed !important;
    top: var(--gate-height) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    inset: var(--gate-height) 0 0 0 !important;
  }

  /* UL bündig oben, kein Gap */
  .astral-nav.is-awakened .astral-nav__list {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Sicherheitsnetz: Header darf keinen zusätzlichen Push geben */
  body {
    padding-top: var(--gate-height) !important;
  }

  /* Header selbst – kein zusätzliches Padding oben (Safe-Area abziehen) */
  .aether-header {
    padding-top: 0 !important;
  }

  /* CTA-Button oben weiterhin ausgeblendet */
  .aether-header .astral-actions .charm-cta {
    display: none !important;
  }
}
/* === MOBILE NAV: letzter Spalt oben entfernen (finaler Fix) ============ */
@media (max-width: 767.98px){

  /* 1) Menü bündig direkt unter Header */
  .astral-nav {
    position: fixed !important;
    top: var(--gate-height) !important;
    inset: var(--gate-height) 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    background-clip: content-box !important;
  }

  /* 2) UL – keine Luft, kein Puffer */
  .astral-nav.is-awakened .astral-nav__list {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) Body-Offset neutralisieren (damit kein doppelter Versatz entsteht) */
  body {
    padding-top: 0 !important;
  }

  /* 4) Header soll Safe-Area respektieren, aber keinen Extra-Gap erzeugen */
  .aether-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
    margin-bottom: 0 !important;
  }

  /* 5) Overlay exakt bündig unter Header */
  .night-veil {
    top: var(--gate-height) !important;
    inset: var(--gate-height) 0 0 0 !important;
    margin: 0 !important;
  }

  /* 6) CTA oben ausgeblendet */
  .aether-header .astral-actions .charm-cta {
    display: none !important;
  }
}
/* === MOBILE NAV — den allerletzten Spalt wirklich killen ================= */
@media (max-width: 767.98px){

  /* 0) CTA oben sicher weg */
  .aether-header .astral-actions .charm-cta{ display:none !important; }

  /* 1) Wenn Menü offen: Header ohne Border/Shadow & ohne Blur (Farben identisch) */
  body:has(.astral-nav.is-awakened) .aether-header,
  .aether-header.portal-open{
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 2) Menü exakt unter Header andocken und um 1px überlappen */
  .astral-nav{
    position: fixed !important;
    inset: var(--gate-height) 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }
  body:has(.astral-nav.is-awakened) .astral-nav{
    top: calc(var(--gate-height) - 1px) !important;     /* 1px Overlap */
    inset: calc(var(--gate-height) - 1px) 0 0 0 !important;
  }

  /* 3) Overlay bündig (gleiche 1px-Überlappung) */
  .night-veil{
    inset: var(--gate-height) 0 0 0 !important;
  }
  body:has(.astral-nav.is-awakened) .night-veil{
    top: calc(var(--gate-height) - 1px) !important;
    inset: calc(var(--gate-height) - 1px) 0 0 0 !important;
  }

  /* 4) Liste ohne jeden Top-Abstand */
  .astral-nav.is-awakened .astral-nav__list{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 5) Sicherheitsnetz: Kein Body-Top-Padding doppelt addieren */
  body{ padding-top: var(--gate-height) !important; }
}
/* NAV IMMER LINKSBÜNDIG – überschreibt alle früheren Regeln */
.astral-nav__list{
  justify-content: flex-end !important;
}


/* Tablet-Kompakt: Nav nicht nach rechts schieben */
@media (min-width:768px) and (max-width:1023.98px){
  .astral-nav{
    justify-self: end !important;
  }
}