/* ============ 21Layer — Anwendungen-Dropdown und Mobile-Menue ============
   Wird von allen Seiten eingebunden und enthaelt ausschliesslich die neuen
   Regeln. Die bestehenden Nav-Stile bleiben dort, wo sie sind: inline in
   index.html und anfrage.html, ausgelagert in legal.css.

   Das Dropdown oeffnet bereits ohne Javascript — ueber :hover und
   :focus-within. nav-menu.js ergaenzt nur Klick, Escape und das Mobile-Menue.
   Die Eintraege selbst stehen als statisches HTML in jeder Seite, damit sie
   ohne Javascript verlinkbar und indexierbar sind.

   Das Panel ist dunkel und leicht durchscheinend, mit hellem Text. Es steht
   damit ueber dem dunklen Hero der Startseite ebenso wie ueber den hellen
   Fallstudienseiten und bringt seinen Kontrast selbst mit.
========================================================================== */

/* ---------- Dropdown ---------- */
.nav-dd { position: relative; display: inline-flex; align-items: center; }

/* Der Menuepunkt ist ein Link: Groesse, Gewicht, Laufweite und Farbe kommen
   aus .nav-link. Frueher stand hier ein <button> mit "font: inherit" — noetig,
   weil Browser Knoepfen eine eigene Schrift geben, aber die Kurzschreibweise
   setzte auch die Groesse und uebersteuerte .nav-link, wo nav-menu.css zuletzt
   geladen wird. Ein <a> bringt nichts davon mit. */
.nav-dd__trigger {
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-dd__chev {
  width: 7px; height: 7px; flex: none; margin-top: -2px;
  border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.nav-dd:hover .nav-dd__chev,
.nav-dd:focus-within .nav-dd__chev { transform: rotate(225deg) translate(-2px, -2px); }

/* Dunkles Panel, klappt linksbuendig unter dem Menuepunkt auf: die linke
   Kante sitzt 16px vor dem Wort "Anwendungen", die Eintraege stehen dadurch
   knapp rechts davon. Deckkraft und Helligkeit sind an der Vorlage gemessen
   (dort rgb(10, 22, 26) ueber dunklem, rgb(22, 35, 36) ueber hellem Grund).
   Der Farbton ist bewusst etwas gruener als dort, naeher am Tannengruen der
   Seite (#0f2d25): rgb(6, 24, 21) bei 93 Prozent. Der Rest scheint
   weichgezeichnet durch. */
.nav-dd__menu {
  position: absolute; top: 100%; left: -16px;
  margin-top: 14px; width: min(360px, calc(100vw - 32px));
  transform: translateY(-6px);
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  background: rgba(6, 24, 21, 0.93);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.3s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              visibility 0s linear 0.3s;
}
/* Unsichtbare Bruecke: sonst schliesst das Panel, sobald der Zeiger den
   Abstand zwischen Trigger und Panel quert. */
.nav-dd__menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav-dd:hover .nav-dd__menu,
.nav-dd:focus-within .nav-dd__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Escape soll schliessen koennen, ohne dass der Tastaturfokus den Menuepunkt
   verlaesst. Diese Regel muss nach den Aufklapp-Regeln stehen, sonst sticht
   sie nicht gegen :focus-within. */
.nav-dd.is-dismissed .nav-dd__menu {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
}
.nav-dd.is-dismissed .nav-dd__chev { transform: rotate(45deg); }

/* Eintraege: heller Titel, darunter die Branche in Grau und Versalien — wie
   die Gruppenueberschriften der Vorlage. Beim Zeigen und fuer die aktuelle
   Seite bekommt die Zeile eine feine Kontur, eine Spur hellere Flaeche und
   einen Pfeil rechts. Der Rand ist immer da, nur transparent, damit nichts
   springt. */
.nav-dd__item {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 40px 11px 14px; border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none; color: #eef2f3;
  transition: background 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.nav-dd__item::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.3px solid rgba(255, 255, 255, 0.6);
  border-top: 1.3px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg) translate(-3px, 3px); opacity: 0;
  transition: opacity 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.nav-dd__item:hover,
.nav-dd__item[aria-current="page"] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.nav-dd__item:hover::after,
.nav-dd__item[aria-current="page"]::after { opacity: 1; transform: rotate(45deg); }
.nav-dd__item:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }
.nav-dd__title { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.nav-dd__industry {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #97a2a3;
}
.nav-dd__menu .nav-dd__title { font-size: 14.5px; font-weight: 450; letter-spacing: 0.005em; }
.nav-dd__menu .nav-dd__industry { font-size: 11px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }


/* ---------- Hamburger ---------- */
.nav-burger {
  display: none; position: relative;
  width: 40px; height: 40px; flex: none; padding: 0;
  background: none; border: none; cursor: pointer;
  /* Explizit hell statt inherit: ueber legal.css erbte der Knopf sonst die
     dunkle Textfarbe und war auf Impressum, Datenschutz und 404 ueber dem
     dunklen Marmor-Hero unsichtbar — ebenso auf jeder Seite im gescrollten
     Zustand, wo ein dunkler Balken unter der Leiste liegt. */
  color: #f4f6f8;
}
.nav-burger span {
  position: absolute; left: 10px; width: 20px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              opacity 0.2s linear;
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 19.5px; }
.nav-burger span:nth-child(3) { top: 25px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }

/* ---------- Mobile-Menue ---------- */
.nav-mobile {
  position: fixed; left: 0; right: 0; top: 0; z-index: 45;
  padding: calc(var(--ah, 44px) + 76px) 22px 32px;
  max-height: 100vh; overflow-y: auto;
  background: #fbfbf9;
  box-shadow: 0 18px 50px rgba(6, 12, 16, 0.24);
  transform: translateY(-100%);
  transition: transform 0.42s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.nav.scrolled ~ .nav-mobile { padding-top: 76px; }
.nav-mobile.is-open { transform: translateY(0); }

.nav-mobile__link,
.nav-mobile__acc {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 2px; margin: 0;
  background: none; border: none; border-bottom: 1px solid rgba(20, 40, 44, 0.1);
  font: inherit; font-size: 16px; color: #16242a; text-align: left;
  text-decoration: none; cursor: pointer;
}
.nav-mobile__acc .nav-dd__chev { color: #97a2a3; }
.nav-mobile__acc[aria-expanded="true"] .nav-dd__chev { transform: rotate(225deg) translate(-2px, -2px); }

.nav-mobile__sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.nav-mobile__sub > div { overflow: hidden; }
.nav-mobile__acc[aria-expanded="true"] + .nav-mobile__sub { grid-template-rows: 1fr; }
.nav-mobile__sublink {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 2px 12px 16px;
  border-bottom: 1px solid rgba(20, 40, 44, 0.07);
  border-left: 2px solid rgba(20, 40, 44, 0.1);
  text-decoration: none; color: #16242a;
}
.nav-mobile__sublink[aria-current="page"] { border-left-color: #2f8d93; color: #226a70; }
.nav-mobile__sublink .nav-dd__title { font-size: 14.5px; }

body.nav-open { overflow: hidden; }

/* ---------- Navigationsleiste ueber hellen Seiten ---------- */
/* Die Schrift der Leiste ist weiss (legal.css) und der Balken im gescrollten
   Zustand dunkel-transparent. Beides ist auf dunklen Grund gerechnet: das
   Hero-Video der Startseite, den Marmor der Legal-Seiten.

   Fallstudienseiten sind durchgehend hell. Sie tragen am <body> die Klasse
   nav-on-light und drehen beides um: dunkle Schrift, und im gescrollten
   Zustand ein heller statt eines dunklen Balkens.

   Gemessen am fertigen Pixel: ohne diese Regeln lag der Kontrast am
   Seitenanfang bei rund 1,3:1 und gescrollt bei 1,95:1. Mit ihnen ueber 10:1
   in beiden Zustaenden. */
body.nav-on-light .nav .wordmark,
body.nav-on-light .nav .nav-link,
body.nav-on-light .nav .nav-burger { color: #16242a; }

body.nav-on-light .nav .nav-link:hover { color: #0a0d12; }

/* Heller Balken statt des dunklen, sobald gescrollt wird. */
body.nav-on-light .nav.scrolled {
  background: linear-gradient(180deg, rgba(252, 252, 250, 0.88), rgba(244, 244, 241, 0.78));
  border-bottom: 1px solid rgba(20, 40, 44, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 10px 30px rgba(10, 20, 18, 0.08);
}

/* Die Glaspille ist auf dunklen Grund gerechnet; auf hellem Grund ergaebe sie
   helle Schrift auf mittlerem Grau. Dieselbe Rezeptur, gefuellt mit der
   Signalfarbe des jeweiligen Falls — die Variablen stehen am <body>.

   Bewusst --accent-deep und nicht --accent: mit weisser Schrift kaeme das
   hellere Teal auf 3,95:1 und das Amber auf 3,29:1, beides zu wenig. Die
   dunklen Varianten liegen zwischen 5 und 8,4:1.

   Der Rueckfallwert deckt den Fall ab, dass nav-on-light einmal ohne gesetzte
   Akzentfarbe verwendet wird; ohne ihn wuerde eine ungueltige Farbe die
   gesamte Deklaration verwerfen, samt der Innenschatten. */
body.nav-on-light .nav .btn-nav {
  --btn-fill: var(--accent-deep, #16242a);
  --btn-tint: var(--tint, 12, 20, 22);
  color: #fff;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0.01)), var(--btn-fill);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3),
              inset 0 0 0 1px rgba(255, 255, 255, 0.12),
              0 6px 22px rgba(var(--btn-tint), 0.34);
}
body.nav-on-light .nav .btn-nav:hover {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.03)), var(--btn-fill);
  filter: brightness(1.1);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.34),
              inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 8px 26px rgba(var(--btn-tint), 0.44);
}

/* ---------- Fallstudien im Footer ---------- */
.ft-sub {
  margin-top: clamp(10px, 1.2vh, 14px);
  padding-left: 14px;
  border-left: 1px solid var(--hair);
}
.ft-sub a { font-size: clamp(12.5px, 0.92vw, 14px); color: var(--faint); }
.ft-sub a:hover { color: var(--ivory); }

@media (max-width: 880px) {
  .nav-burger { display: inline-flex; }
  .nav .btn-nav { margin-left: auto; margin-right: 10px; }
}
@media (min-width: 881px) {
  .nav-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dd__menu, .nav-dd__chev, .nav-mobile, .nav-mobile__sub,
  .nav-burger span, .nav-dd__item { transition: none; }
}