/* =====================================================================
   Airfy-Hauptmenü – auf allen Seiten gleich (Startseite, Enterprise, Technology).
   Nachbau von „navigation-2“ (React Bits Pro): zentrierter, abgerundeter Glas-Balken,
   der sich zu Karten aufklappt; auf schmalen Bildschirmen eine aufklappende Glas-Karte.
   Eigenständig: eigene Schrift, eigene Farben, keine Abhängigkeit vom Seiten-CSS.
   Hell, wenn <html data-theme="light">, sonst dunkel.
   ===================================================================== */
@font-face { font-family: "Airfy Nav"; src: url("../fonts/mona-sans-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

.anav {
  --an-bg: rgba(252, 251, 248, .62); --an-bg-open: rgba(252, 251, 248, .86); --an-solid: #FBFAF7;
  --an-ink: #11171A; --an-ink-2: #46525A; --an-ink-3: #7B868D;
  --an-line: rgba(17, 23, 26, .1); --an-line-2: rgba(17, 23, 26, .24);
  --an-card: rgba(255, 255, 255, .55); --an-card-hover: rgba(255, 255, 255, .9); --an-ic: rgba(17, 23, 26, .06); --an-cur: rgba(17, 23, 26, .07);
  --an-accent: #3F6E84; --an-planned: #9A5F14;
  --an-shadow: 0 1px 2px rgba(17, 23, 26, .05), 0 22px 50px -24px rgba(17, 23, 26, .45);
  --an-ease: cubic-bezier(.4, 0, .2, 1);
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; padding: 12px 14px 0; pointer-events: none;
  font-family: "Airfy Nav", "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.3; -webkit-font-smoothing: antialiased; color: var(--an-ink);
}
html:not([data-theme="light"]) .anav, .anav.is-dark {
  --an-bg: rgba(11, 15, 19, .58); --an-bg-open: rgba(11, 15, 19, .88); --an-solid: #0A0E11;
  --an-ink: #EEF2F4; --an-ink-2: #A9B6BE; --an-ink-3: #75848D;
  --an-line: rgba(238, 242, 244, .1); --an-line-2: rgba(238, 242, 244, .24);
  --an-card: rgba(255, 255, 255, .035); --an-card-hover: rgba(255, 255, 255, .08); --an-ic: rgba(255, 255, 255, .07); --an-cur: rgba(255, 255, 255, .09);
  --an-accent: #9CC4D6; --an-planned: #E9BA74;
  --an-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .anav { --an-bg: rgba(252, 251, 248, .95); --an-bg-open: rgba(252, 251, 248, .98); }
  html:not([data-theme="light"]) .anav, .anav.is-dark { --an-bg: rgba(11, 15, 19, .95); --an-bg-open: rgba(11, 15, 19, .98); }
}
.anav *, .anav *::before, .anav *::after { box-sizing: border-box; }
.anav [lang] { font-style: normal; }
html[lang="de"] .anav [lang="en"], html[lang="en"] .anav [lang="de"] { display: none !important; }
html:not([data-theme="light"]) .anav .anav__l, html[data-theme="light"] .anav .anav__d { display: none !important; }
html[data-theme] .anav.is-dark .anav__l, html:not([data-theme]) .anav.is-dark .anav__l { display: none !important; }
html[data-theme] .anav.is-dark .anav__d, html:not([data-theme]) .anav.is-dark .anav__d { display: block !important; }
.anav a { color: inherit; text-decoration: none; }
.anav button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.anav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.anav :focus-visible { outline: 2px solid var(--an-accent); outline-offset: 2px; border-radius: 10px; }

/* Glas-Hülle */
.anav__shell {
  pointer-events: auto; position: relative; width: fit-content; max-width: 100%; margin: 0 auto;
  border-radius: 24px; background: var(--an-bg); border: 1px solid var(--an-line); box-shadow: var(--an-shadow);
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  overflow: hidden; transition: background-color .45s var(--an-ease), box-shadow .45s var(--an-ease), border-color .45s var(--an-ease);
  animation: anav-in .5s var(--an-ease) both;
}
@keyframes anav-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
.anav.is-open .anav__shell, .anav.is-mobile-open .anav__shell { background: var(--an-bg-open); }

.anav__bar { display: flex; align-items: center; gap: 6px; padding: 7px 7px 7px 18px; min-height: 56px; }
.anav__brand { display: flex; align-items: center; gap: 9px; margin-right: 14px; flex: none; }
.anav__brand img { display: block; }
.anav__berry { width: 26px; height: 26px; }
.anav__word { width: auto; height: 12px; }

.anav__links { display: flex; align-items: center; gap: 2px; }
.anav__item { display: flex; align-items: center; border-radius: 999px; transition: background-color .25s; }
.anav__link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 2px 9px 14px; font-size: 14.5px; font-weight: 520; letter-spacing: -.01em; color: var(--an-ink-2); white-space: nowrap; transition: color .2s; }
.anav__more { display: grid; place-items: center; width: 28px; height: 34px; margin-right: 4px; border-radius: 999px; color: var(--an-ink-3); transition: color .2s; }
.anav__more svg { width: 14px; height: 14px; transition: transform .3s var(--an-ease); }
.anav__item:hover .anav__link, .anav__item:hover .anav__more, .anav__item.is-open .anav__link, .anav__item.is-open .anav__more { color: var(--an-ink); }
.anav__item.is-open .anav__more svg { transform: rotate(180deg); }
.anav__item.is-current { background: var(--an-cur); }
.anav__item.is-current .anav__link { color: var(--an-ink); font-weight: 640; }
.anav__de { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--an-line-2); color: var(--an-ink-3); }

.anav__tools { display: flex; align-items: center; gap: 6px; margin-left: 14px; flex: none; }
.anav__seg { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--an-line-2); }
.anav__seg button { padding: 5px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 640; color: var(--an-ink-3); transition: background-color .25s, color .25s; }
html[lang="de"] .anav__seg [data-set-lang="de"], html[lang="en"] .anav__seg [data-set-lang="en"] { background: var(--an-ink); color: var(--an-solid); }
.anav__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--an-ink-2); box-shadow: inset 0 0 0 1px var(--an-line-2); transition: color .2s, box-shadow .2s; }
.anav__icon:hover { color: var(--an-ink); box-shadow: inset 0 0 0 1px var(--an-ink); }
.anav__icon svg { width: 16px; height: 16px; }
html:not([data-theme="light"]) .anav__icon .anav__moon, html[data-theme="light"] .anav__icon .anav__sun { display: none; }
.anav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 14px; background: var(--an-ink); color: var(--an-solid) !important; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; transition: opacity .2s, transform .3s var(--an-ease); }
.anav__cta:hover { opacity: .88; }
.anav__cta svg { width: 15px; height: 15px; transition: transform .3s var(--an-ease); }
.anav__cta:hover svg { transform: translateX(2px); }

.anav .anav__burger { display: none; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--an-ink); color: var(--an-solid); flex: none; }
.anav__burger svg { width: 19px; height: 19px; }
.anav__burger .anav__x { display: none; }
.anav.is-mobile-open .anav__burger .anav__x { display: block; }
.anav.is-mobile-open .anav__burger .anav__bars { display: none; }

/* Aufklappende Karten (breit) */
.anav__drop { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s var(--an-ease), opacity .3s var(--an-ease); contain: inline-size; }
.anav.is-open .anav__drop { grid-template-rows: 1fr; opacity: 1; }
.anav__drop-in { min-height: 0; overflow: hidden; }
.anav__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 8px 8px; }
.anav__panel[hidden] { display: none; }
.anav__card { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 16px; background: var(--an-card); border: 1px solid var(--an-line); color: var(--an-ink);
  opacity: 0; transform: translateY(10px); transition: opacity .2s ease-out, transform .2s ease-out, background-color .2s, border-color .2s, box-shadow .2s; transition-delay: calc(var(--i, 0) * 50ms); }
.anav.is-open .anav__panel:not([hidden]) .anav__card, .anav.is-mobile-open .anav__card { opacity: 1; transform: none; }
.anav__card:hover, .anav__card:focus-visible { background: var(--an-card-hover); border-color: var(--an-line-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45); }
.anav__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--an-ic); color: var(--an-ink-2); flex: none; }
.anav__card:hover .anav__ic { color: var(--an-accent); }
.anav__ct { display: grid; gap: 2px; min-width: 0; }
.anav__ct b { font-size: 14px; font-weight: 620; letter-spacing: -.01em; }
.anav__ct small { font-size: 12.5px; line-height: 1.35; color: var(--an-ink-3); }
.anav__planned { color: var(--an-planned); font-weight: 650; }

/* Schmale Bildschirme: Glas-Karte mit aufklappendem Inhalt */
.anav__mobile { display: none; }
@media (max-width: 1023px) {
  .anav { padding: 10px 10px 0; }
  .anav__shell { width: 100%; border-radius: 22px; }
  .anav__bar { padding: 7px 7px 7px 16px; min-height: 56px; }
  .anav__links, .anav__tools .anav__icon, .anav__tools .anav__cta, .anav__drop { display: none !important; }
  .anav__tools { margin-left: auto; }
  .anav .anav__burger { display: grid; }
  .anav__mobile { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--an-ease), opacity .3s var(--an-ease); opacity: 0; }
  .anav.is-mobile-open .anav__mobile { grid-template-rows: 1fr; opacity: 1; }
  .anav__mobile-in { min-height: 0; overflow: hidden; }
  .anav__mobile-scroll { max-height: calc(100dvh - 90px); overflow: auto; overscroll-behavior: contain; padding: 4px 12px 14px; display: grid; gap: 18px; }
  .anav__mcta { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 999px; background: var(--an-ink); color: var(--an-solid) !important; font-size: 15px; font-weight: 620; }
  .anav__msec { display: grid; gap: 8px; }
  .anav__mhead { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
  .anav__mhead span { display: inline-flex; align-items: center; gap: 8px; }
  .anav__mhead[aria-current="page"] { color: var(--an-accent); }
  .anav__mhead[aria-current="page"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .anav__mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
  .anav__mgrid .anav__card { padding: 11px 12px; border-radius: 14px; }
  .anav__mgrid .anav__ic { width: 30px; height: 30px; border-radius: 9px; }
  .anav__mtools { display: flex; align-items: center; gap: 8px; padding: 2px 4px 0; }
  html.anav-lock, html.anav-lock body { overflow: hidden; }
}
@media (max-width: 380px) { .anav__word { height: 11px; } .anav__brand { margin-right: 6px; } .anav__seg button { padding: 5px 7px; } }

/* Ohne JavaScript: die drei Hauptpunkte als Leiste, kein Menü-Knopf */
@media (max-width: 1023px) {
  html:not(.anav-js) .anav .anav__burger { display: none; }
  html:not(.anav-js) .anav__shell { width: fit-content; }
  html:not(.anav-js) .anav__links { display: flex !important; }
  html:not(.anav-js) .anav__more, html:not(.anav-js) .anav__brand .anav__word, html:not(.anav-js) .anav__tools { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .anav__shell { animation: none; }
  .anav *, .anav *::before, .anav *::after { transition-duration: .001s !important; transition-delay: 0s !important; }
}
.anav__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.anav.is-scrolled:not(.is-open):not(.is-mobile-open) .anav__shell { box-shadow: var(--an-shadow), 0 0 0 1px var(--an-line); }
