/* ==========================================================================
   aeovi.com · Hauptnavigation: Mega-Menü (Desktop) und Menüblatt (Handy)
   Markup aus tools/nav_gen.py, Verhalten in menu.js.
   Glas wie beim Cookie-Banner: dunkle Fläche, Haarlinien-Lichtkante.
   ========================================================================== */
:root { --nav-h: 80px; --menu-ease: cubic-bezier(.16, 1, .3, 1); }

/* Mono-Beschriftungen (auch auf Seiten ohne leistung.css) */
.mega .mono, .sheet .mono { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Auslöser „Leistungen“ ---------- */
.nav ul a, .nav-trigger { position: relative; }
.nav-trigger { all: unset; position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font: 500 15px var(--sans); color: var(--muted); transition: color .2s; }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--text); }
.nav-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 4px; }
.nav-trigger .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--menu-ease); }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* feine Linie unter dem aktiven Punkt */
.nav ul a::after, .nav-trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--menu-ease); opacity: .6; }
.nav ul a:hover::after, .nav-trigger[aria-expanded="true"]::after, .nav ul a[aria-current]::after, .nav-trigger.is-current::after { transform: none; }
.nav ul a[aria-current], .nav-trigger.is-current { color: var(--text); }

/* Kopfzeile bleibt sichtbar und wird dichter, solange ein Menü offen ist */
.nav.menu-open { transform: none !important; background: rgba(5, 6, 11, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.nav-scrim { position: fixed; inset: 0; z-index: 48; background: rgba(5, 6, 11, .55); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.nav-scrim.on { opacity: 1; visibility: visible; transition: opacity .4s; }

/* ---------- Mega-Menü ---------- */
.mega {
  position: fixed; z-index: 49; top: calc(var(--nav-h) + 6px); right: var(--gutter); width: min(1040px, calc(100vw - 2 * var(--gutter)));
  border-radius: 22px; overflow: hidden; isolation: isolate;
  background: rgba(12, 14, 23, .86); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.985); transform-origin: top right;
  transition: opacity .3s, transform .5s var(--menu-ease), visibility 0s .5s;
}
.mega.open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .5s var(--menu-ease); }
.mega::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .08) 18%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .03) 65%, rgba(255, 255, 255, .08) 85%, rgba(255, 255, 255, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mega-in { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; padding: 10px; }
.mega-list { padding: 18px 12px 10px; }
.mega-k { display: block; margin: 0 0 14px 12px; font-size: 10.5px; color: var(--muted); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

.mega-item, .sheet-item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; grid-template-rows: auto auto; column-gap: 14px; align-items: start;
  padding: 16px 14px; border-radius: 14px; text-decoration: none; color: var(--text); isolation: isolate; }
.mega-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), rgba(255, 255, 255, .025);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); opacity: 0; transition: opacity .35s; }
.mega-item:hover::before, .mega-item:focus-visible::before, .mega-item[aria-current]::before { opacity: 1; }
.mega-item:focus-visible { outline: none; }
.arc { grid-row: 1 / span 2; width: 38px; height: 38px; fill: none; stroke-linecap: round; transition: transform .7s var(--menu-ease); }
.arc .off { stroke: rgba(255, 255, 255, .13); stroke-width: 1.6; }
.arc .on { stroke: var(--c); stroke-width: 2.6; filter: drop-shadow(0 0 3px var(--c)); }
.mega-item:hover .arc, .sheet-item:hover .arc { transform: rotate(90deg); }
.mi-no { grid-column: 2; font-size: 10px !important; letter-spacing: .16em; color: var(--c); }
.mi-t { grid-column: 2; display: grid; gap: 4px; margin-top: 4px; }
.mi-t b { font: 500 23px/1.05 var(--cond); letter-spacing: -.003em; }
.mi-t small { font: 400 14px/1.45 var(--sans); color: var(--muted); transition: color .3s; }
.mega-item:hover small { color: var(--soft); }
.mega-item .ar, .sheet-item .ar { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 18px; height: 18px; color: var(--c); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .45s var(--menu-ease); }
.mega-item:hover .ar, .mega-item:focus-visible .ar { opacity: 1; transform: none; }

/* gestaffelter Auftritt */
.mega .mega-item, .mega-feature, .mega-k { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .6s var(--menu-ease); }
.mega.open .mega-item, .mega.open .mega-feature, .mega.open .mega-k { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 45ms); }
.mega.open .mega-feature { transition-delay: 160ms; }

/* Expertise-Karte */
.mega-feature { --c: var(--mag); position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 100%; padding: 26px; overflow: hidden;
  border-radius: 16px; text-decoration: none; color: var(--text); isolation: isolate;
  background: radial-gradient(90% 80% at 100% 0%, rgba(230, 4, 126, .2), transparent 65%), radial-gradient(70% 60% at 0% 100%, rgba(255, 196, 20, .08), transparent 70%), rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: box-shadow .4s; }
.mega-feature:hover, .mega-feature:focus-visible { box-shadow: inset 0 0 0 1px rgba(230, 4, 126, .45); outline: none; }
.mf-seal { position: absolute; z-index: -1; top: 18px; right: 18px; width: 150px; height: 150px; opacity: .95; transition: transform 1.2s var(--menu-ease); }
.mf-seal text { font: 500 9.5px var(--mono); letter-spacing: .36em; fill: var(--muted); text-transform: uppercase; }
.mf-seal .spin { transform-origin: 0 0; animation: mfspin 40s linear infinite; }
.mf-seal image { filter: drop-shadow(0 0 16px rgba(230, 4, 126, .45)); }
.mega-feature:hover .mf-seal { transform: scale(1.06) rotate(-8deg); }
@keyframes mfspin { to { transform: rotate(360deg); } }
.mega-feature .mono { margin-top: 150px; font-size: 10.5px; color: var(--mag); }
.mf-t { font: 300 32px/1 var(--cond); }
.mf-t em { display: block; font-style: normal; font-weight: 600; }
.mf-p { font-size: 14px; line-height: 1.5; color: var(--soft); }
.mf-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 14px var(--sans); }
.mf-more .ar { width: 16px; height: 16px; transition: transform .4s var(--menu-ease); }
.mega-feature:hover .mf-more .ar { transform: translateX(4px); }

.mega-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 26px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .015); }
.mega-foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); text-decoration: none; font: 500 14px var(--sans); transition: color .2s; }
.mega-foot a:hover { color: var(--text); }
.mega-foot a .ar { width: 16px; height: 16px; transition: transform .4s var(--menu-ease); }
.mega-foot a:hover .ar { transform: translateX(4px); }
.mega-foot .mono { font-size: 10.5px; color: var(--dim); }

/* ---------- Sprachumschalter DE / EN ---------- */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); }
.nav > .lang { margin-right: -14px; }
.lang-o { display: grid; place-items: center; min-width: 36px; height: 28px; padding: 0 10px; border-radius: 999px; text-decoration: none;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--muted); transition: color .2s, background-color .3s; }
.lang-o:hover { color: var(--text); }
.lang-o[aria-current] { color: var(--text); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.lang-o:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sheet-lang { display: none; }

/* ---------- Handy: Menüknopf und Menüblatt ---------- */
.nav-burger, .sheet { display: none; }
@media (max-width: 900px) {
  .mega { display: none; }
  .nav { gap: 12px; }
  .nav-burger { all: unset; display: grid; place-items: center; position: relative; flex: none; width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line2); }
  .nav-burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .nav-burger i { position: absolute; left: 14px; right: 14px; height: 1.6px; border-radius: 2px; background: var(--text); transition: transform .5s var(--menu-ease); }
  .nav-burger i:first-child { transform: translateY(-3.5px); }
  .nav-burger i:last-child { transform: translateY(3.5px); }
  .nav-burger[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
  .nav-burger[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }

  .sheet { display: block; position: fixed; inset: 0; z-index: 49; overflow: hidden;
    background: rgba(5, 6, 11, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
  .sheet.open { opacity: 1; visibility: visible; transition: opacity .35s; }
  /* gescrollt wird nur unterhalb der Kopfzeile, Inhalt läuft nie unter Logo und Knöpfe */
  .sheet-in { position: absolute; inset: var(--nav-h) 0 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px var(--gutter) 36px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px); mask-image: linear-gradient(to bottom, transparent, #000 18px); }
  .sheet-list { display: grid; gap: 2px; }
  .sheet-item { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .sheet-item .arc { width: 34px; height: 34px; }
  .sheet-item .mi-t b { font-size: 26px; }
  .sheet-item .ar { opacity: .7; transform: none; }
  .sheet-more { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
  .sheet-more a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; color: var(--soft); text-decoration: none; font: 500 17px var(--sans); border-bottom: 1px solid var(--line); }
  .sheet-more a .ar { width: 18px; height: 18px; color: var(--muted); }
  .sheet-cta { width: 100%; justify-content: center; margin-top: 30px; }
  .sheet-cta .ar { width: 18px; height: 18px; }
  .sheet .mega-k { margin-left: 4px; }
  .nav > .lang { display: none; }
  .sheet-lang { display: block; margin-top: 34px; }
  .lang--sheet { display: flex; width: 100%; padding: 4px; }
  .lang--sheet .lang-o { flex: 1; height: 46px; font: 500 16px/1 var(--sans); letter-spacing: 0; }
  /* gestaffelter Auftritt */
  .sheet .sheet-item, .sheet .sheet-more, .sheet .sheet-cta, .sheet .sheet-lang, .sheet .mega-k { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .6s var(--menu-ease); }
  .sheet.open .sheet-item, .sheet.open .sheet-more, .sheet.open .sheet-cta, .sheet.open .sheet-lang, .sheet.open .mega-k { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 50ms); }
  .sheet.open .sheet-more { transition-delay: 300ms; }
  .sheet.open .sheet-cta { transition-delay: 360ms; }
  .sheet.open .sheet-lang { transition-delay: 420ms; }
  html.menu-lock, html.menu-lock body { overflow: hidden; }
  .nav.sheet-open { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 420px) {
  .nav .btn { padding: 10px 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .mega, .mega *, .sheet, .sheet * { transition: none !important; animation: none !important; }
}