/* ============================================================================
   Navigation & Submenu
   Geladen von: layout/header.htm, layout/header_public.htm
   Markup:      layout/navigation_work.htm, layout/navigation_public.htm
   ============================================================================ */

/* --- Top-Navigation Container -------------------------------------------- */

.top-navigation {
  /* WICHTIG: Der Blur liegt auf ::before, NICHT auf dem Header selbst.
     backdrop-filter auf dem Header würde einen "backdrop root" für seinen Teilbaum
     aufspannen. Die .submenu-Flyouts klappen aber per position:absolute; top:100%
     UNTERHALB der Header-Box aus — dort gibt es innerhalb dieses Roots nichts zu
     blurren → die Flyouts blieben durchsichtig (Header geblurrt, Submenü nicht).
     Liegt der Blur stattdessen auf ::before (ein Blatt-Element), ist der Header KEIN
     backdrop root mehr, und die Submenüs blurren wieder selbst gegen die Seite. */
  background-color: transparent;
  /* Navi ist halbtransparent → der Body-Gradient scheint durch. Floating-Labels
     (z. B. globale Suche) reproduzieren daher denselben Gradient (--surface-overlay aus
     :root geerbt, nicht none), damit die Label-Kerbe sich mit dem Hintergrund deckt. */
  border-bottom: 1px solid var(--border-primary);
  position: relative;
  width: 100%;
  z-index: 100;
}

.top-navigation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* hinter den Header-Inhalt, aber innerhalb des Header-Stacking-Contexts (über der Seite) */
  background-color: color-mix(in srgb, var(--background-primary) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Fallback ohne backdrop-filter (alte/abgeschaltete Engines): undurchsichtiger
   Hintergrund statt 70%-transparent, damit der Body-Gradient nicht durchscheint. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .top-navigation::before {
    background-color: var(--background-primary);
  }
}

.top-navigation .container {
  align-items: center;
  background-color: transparent;
  display: flex;
  flex-flow: row wrap;
  gap: var(--nav-row-gap);
}

/* Das Kopfband hat zwei Zustaende: ab 1360px stehen Logo-Zeile und Menuezeile
   nebeneinander, darunter das Menue in einer eigenen Zeile. Beide Zustaende
   werden hier ERZWUNGEN statt dem Flex-Umbruch ueberlassen.
   Grund: aus der Bandhoehe rechnen sich --sticky-header-*-height
   (main_layout_abstrakt.css) und damit das `top` aller Elemente, die unter dem
   Band kleben. Ein Umbruch "wenn der Platz zufaellig ausgeht" haengt an
   Fensterbreite, Schriftgroesse und Anzahl der Menuepunkte — die Rechnung dort
   kann so einen Zustand gar nicht treffen. Genau daran ist die Stundenleiste
   im Kalender gescheitert: sie klebte 29px zu hoch und verschwand hinter dem
   Band. Kommt ein Menuepunkt dazu und passt nicht mehr, laeuft die Zeile
   sichtbar ueber — besser als eine still falsche Klebehoehe. */
@media screen and (min-width: 1360px) {
  .top-navigation .container {
    flex-wrap: nowrap;
  }
}
/* Die Gegenrichtung (Menue in eigener Zeile erzwingen) steht weiter unten bei
   den uebrigen .top-navigation-main-Regeln — sie muss nach `flex: 1 1` kommen,
   sonst setzt dessen flex-basis: 0% sie wieder zurueck. */

.top-navigation .top-navigation-wrap {
  align-items: center;
  display: flex;
  flex: 1 1;
  height: var(--top-nav-height);
  justify-content: space-between;
}

@media screen and (min-width: 769px) {
  .top-navigation .container {
    background-color: transparent;
  }

  .top-navigation .top-navigation-wrap {
    flex: 0 1;
  }
}

/* --- Top-Navigation Main (Wrapper um Nav + Theme-Switch) ----------------- */

.top-navigation-main {
  display: none;
  justify-content: space-between;
  padding: 0;
  width: 100%;
}

.top-navigation-main .main-nav {
  order: 2;
}

.show-nav .top-navigation-main {
  display: flex;
  flex-direction: column;
}

/* Mobile: geöffnetes Menü als eigener Scroll-Container. Ohne das wächst der
   sticky Header über den Viewport hinaus; auf vertikal kleinen Displays scrollt
   dann die Seite dahinter statt das Menü, und die unteren Punkte sind nicht
   erreichbar. Höhe = Viewport minus Navi-Leiste (--top-nav-height) minus dem
   2rem row-gap der .container-Zeile. overscroll-behavior: contain unterbindet
   das Weiterscrollen auf die Seite, sobald das Menüende erreicht ist. */
@media screen and (max-width: 768px) {
  .show-nav .top-navigation-main {
    max-height: calc(100vh - var(--top-nav-height) - 2rem);
    max-height: calc(100dvh - var(--top-nav-height) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media screen and (min-width: 769px) {
  .top-navigation-main {
    align-items: center;
    display: flex;
    flex: 1 1;
    flex-direction: row;
    gap: .5rem;
    left: inherit;
    padding: 0;
    position: static;
    top: inherit;
    z-index: inherit;
  }

  .show-nav .top-navigation-main {
    flex-direction: row;
  }

  .top-navigation-main .main-nav {
    margin-right: auto;
    order: 0;
    width: max-content;
  }
}

/* Zweizeiliger Zustand: unterhalb von 1360px belegt das Menue IMMER eine
   eigene Zeile — nicht erst, wenn der Platz zufaellig ausgeht. Nur so ist die
   Bandhoehe in dieser Stufe die bekannte Zahl, aus der sich
   --sticky-header-*-height rechnet (main_layout_abstrakt.css). */
@media screen and (min-width: 769px) and (max-width: 1359px) {
  .top-navigation-main {
    flex-basis: 100%;
  }
}

/* --- Top-Level-Einträge -------------------------------------------------- */

.top-navigation-main .top-level-entry {
  background: none;
  border-top: 1px solid var(--border-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  padding: 1rem .5rem;
  text-align: left;
  width: 100%;
}

.top-navigation-main .top-level-entry:link,
.top-navigation-main .top-level-entry:visited {
  color: var(--text-secondary);
}

.top-navigation-main .top-level-entry.menu-toggle {
  min-height: 53px;
  padding: .5rem;
}

.top-navigation-main .top-level-entry-container {
  font-size: var(--top-level-front-size);
  position: relative;
}

.top-navigation-main .top-level-entry-container .submenu {
  z-index: var(--z-index-nav-menu);
}

@media screen and (max-width: 769px) {
  .top-navigation-main .top-level-entry.button {
    --button-color: var(--text-secondary);
    --button-padding: 0;
    --button-radius: 0;
  }

  .top-navigation-main .top-level-entry.button .button-wrap {
    background: none;
    border: none;
    gap: .5rem;
    justify-content: flex-start;
    padding: 0;
    text-transform: none;
  }

  .top-navigation-main .top-level-entry.button:focus {
    --button-focus-effect: none;
  }
}

@media screen and (min-width: 769px) {
  .top-navigation-main .top-level-entry {
    border-radius: var(--elem-radius);
    border-top: none;
    padding: .5rem;
    /* Kein Zeilenumbruch im Label. Das Kopfband ist genau --top-nav-height
       hoch — daraus rechnen sich --sticky-header-*-height und damit das `top`
       von allem, was darunter klebt (Stundenleiste im Kalender, Listenkopf der
       Projektliste, Seitenleiste, Inhaltsverzeichnis). Bricht ein einziges
       Label um, wird das Band hoeher als die Konstante und alle diese Elemente
       kleben zu hoch, also hinter dem Band. Genau das ist mit "E-Mail"
       passiert: der Bindestrich bot eine Umbruchstelle, das Band wuchs von
       105px auf 134px und die Stundenleiste verschwand beim Scrollen. */
    white-space: nowrap;
  }

  .top-navigation-main .top-level-entry:focus,
  .top-navigation-main .top-level-entry:hover {
    background-color: var(--category-color-background);
    color: var(--category-color);
    text-decoration: none;
  }

  .top-navigation-main .top-level-entry.button {
    padding: 0;
  }

  .top-navigation-main .button.action:hover {
    --button-bg: var(--border-secondary);
  }

  /* Hover-Bridge Teil 1: Container erweitert seine Hover-Fläche nach unten,
     damit der Mauszeiger beim Übergang Button->Submenü nicht in eine Lücke
     fällt und das :hover verliert. */
  .top-navigation-main .top-level-entry-container {
    padding-bottom: 12px;
  }
}

/* --- Menu-Toggle (Pfeil-Button) ----------------------------------------- */
/* Markup (aus update_navigation_cache.php): a.top-level-entry.menu-link (Ziel-Link)
   + button.top-level-entry.menu-toggle (reiner Icon-Button, kein Label-Text) als
   Geschwister. So bleiben auf Mobile Navigieren UND Untermenü-Aufklappen getrennt
   antippbar — vorher lag das Label NUR im Button, der Link war auf Mobile per
   CSS ausgeblendet und die Seite selbst dadurch nicht erreichbar. */

.top-navigation-main .menu-toggle {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 53px;
  position: relative;
}

.top-navigation-main .menu-toggle::after {
  background-color: var(--icon-primary);
  content: "";
  height: var(--icon-size);
  -webkit-mask-image: url("/static/icon/arrow-down.svg");
  mask-image: url("/static/icon/arrow-down.svg");
  width: var(--icon-size);
}

.top-navigation-main .menu-toggle[aria-expanded=true]::after,
.top-navigation-main .menu-toggle.show-sub::after {
  transform: rotate(180deg);
}

@media screen and (max-width: 768px) {

  /* Anker + Toggle-Button nebeneinander in einer Reihe; das Submenü (3. Kind)
     bricht per flex-wrap in die volle Breite darunter um, sobald es sichtbar ist. */
  .top-navigation-main .top-level-entry-container.has-submenu {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
  }

  .top-navigation-main .top-level-entry-container.has-submenu>.top-level-entry {
    width: auto;
  }

  .top-navigation-main .top-level-entry-container.has-submenu>.menu-link {
    flex: 1 1 auto;
    min-width: 0;
  }

  .top-navigation-main .top-level-entry-container.has-submenu>.menu-toggle {
    flex: 0 0 auto;
  }

  .top-navigation-main .top-level-entry-container.has-submenu>.submenu {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media screen and (min-width: 769px) {

  /* Die JS-gesteuerten Toggle-Buttons sind nur auf Mobile aktiv — auf Desktop
     werden Submenüs per :hover / :focus-within gesteuert (siehe unten). */
  ul.main-menu .menu-toggle,
  ul.main-menu .submenu,
  ul.main-menu .submenu.show {
    display: none;
  }

  .button.main-menu-toggle {
    display: none;
  }
}

/* --- Main Menu (ul.main-menu) ------------------------------------------- */

ul.main-menu {
  box-sizing: border-box;
  gap: 1rem;
  list-style: none;
  margin-top: 1rem;
  padding: 0;
  width: 100%;
}

ul.main-menu.show {
  display: block;
}

@media screen and (min-width: 769px) {
  ul.main-menu {
    align-items: center;
    display: flex;
    justify-content: space-around;
    margin: 0 auto 0 0;
    /* Feste Zeilenhoehe statt "so hoch wie der hoechste Eintrag": nur so ist
       die Bandhoehe in der zweizeiligen Stufe eine bekannte Zahl (siehe
       --nav-menu-row-height in main_layout_abstrakt.css). */
    height: var(--nav-menu-row-height);
  }

  ul.main-menu li:last-child {
    flex-basis: inherit;
  }

  /* Submenü per Hover/Focus auf dem Container sichtbar machen. */
  ul.main-menu .top-level-entry-container:focus-within .submenu,
  ul.main-menu .top-level-entry-container:hover .submenu {
    display: block;
  }
}

/* --- Submenu ------------------------------------------------------------ */

.submenu {
  background-color: var(--background-primary);
  list-style: none;
  margin: 0;
  padding: 0;
}

.submenu li {
  width: 100%;
}

.submenu .submenu-item,
.submenu a {
  align-items: center;
  border: 1px solid transparent;
  color: var(--text-primary);
  display: flex;
  height: 100%;
  padding: .5rem;
  width: 100%;
}

.submenu .submenu-item:hover,
.submenu a:hover {
  background-color: var(--background-secondary);
  text-decoration: none;
  color: var(--accent-primary);
}

.main-menu .submenu .submenu-item:hover,
.main-menu .submenu a:hover {
  background-color: var(--background-secondary);
}

.submenu .submenu-item:focus,
.submenu a:focus {
  border: 1px solid var(--button-secondary-border-focus);
  box-shadow: var(--button-focus-effect);
}

.submenu .submenu-item .icon,
.submenu a .icon {
  margin-right: .5rem;
}

.submenu-item,
.submenu-item-heading {
  font-size: var(--type-smaller-font-size);
}

.submenu-header .submenu-item {
  padding: 0;
}

.submenu-header .submenu-item:hover {
  background: none;
}

.submenu .submenu-item-heading {
  font-size: var(--sub-level-front-size);
  font-weight: 400;
}

li:last-child .submenu .submenu-item:not(:focus),
li:last-child .submenu a:not(:focus) {
  border-bottom-color: transparent;
}

/* Mobile: Unterpunkte gegenüber dem Top-Level-Eintrag (sitzt bei .5rem) einrücken,
   damit die Hierarchie im aufgeklappten Menü sichtbar wird. Nur Navigation, denn
   .submenu wird auch außerhalb (calculation_edit, customer_edit …) verwendet. */
@media screen and (max-width: 768px) {

  .top-navigation-main .submenu .submenu-item,
  .top-navigation-main .submenu a {
    padding-left: 1.75rem;
  }
}

@media screen and (min-width: 769px) {

  /* Desktop-Flyout: gilt für alle Submenüs. Die ursprüngliche Trennung in
     .inline-submenu-lg und :not(.inline-submenu-lg) war identisch — alle
     Submenüs im Markup tragen inline-submenu-lg, die Regeln werden daher
     zusammengefasst. */
  .submenu {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-02);
    max-width: 25rem;
    padding: .5rem;
    position: absolute;
    top: 100%;
    width: max-content;
    z-index: var(--z-index-mid);
  }

  .main-menu .submenu {
    background-color: color-mix(in srgb, var(--background-primary) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Fallback ohne backdrop-filter: opaker Hintergrund, sonst wäre das Flyout
     halbtransparent und der dahinterliegende Inhalt schimmert durch. */
  @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .main-menu .submenu {
      background-color: var(--background-primary);
    }
  }

  /* Kein Clipping/Scroll-Container: ein overflow ≠ visible würde die seitlich
     austretenden Sub-Flyouts (.submenu-sub, 4. Ebene) und die Hover-Brücke
     (.submenu::before) abschneiden. Die Panels sind dank Gruppen + Aufklapp-
     Punkten kurz genug, dass sie nicht aus dem Viewport laufen. */
  .top-navigation-main .submenu {
    overflow: visible;
  }

  .submenu .submenu-item {
    border-radius: var(--elem-radius);
    padding: .75rem;
  }

  /* Hover-Bridge Teil 2: unsichtbare 12px-Brücke oberhalb des Submenüs,
     damit der Hover beim Übergang vom Top-Entry zum Submenü erhalten bleibt.
     Zusammen mit dem padding-bottom:12px am top-level-entry-container
     entsteht ein durchgehender Hover-Bereich ohne Lücke. */
  .submenu::before {
    content: "";
    display: block;
    height: 12px;
    left: -12px;
    position: absolute;
    right: -12px;
    top: -12px;
  }

  .submenu-header {
    border-bottom: 1px solid var(--border-primary);
  }

  .submenu-item-heading:not(:only-child),
  .submenu-item:not(:only-child) {
    font-weight: var(--font-body-strong-weight);
  }
}

/* --- Mega-Panel: Top-Level mit Untergruppen (3 Ebenen) ------------------- */
/* Markup (aus scripts/update_navigation_cache.php, sobald ein Top-Level-Kind
   selbst Kinder hat):
     div.submenu.submenu-mega
       > div.submenu-group
           > div.submenu-group-heading
           > ul.submenu-group-list > li > a.submenu-item
   Desktop: Gruppen als Spalten nebeneinander (ein Hover). Mobile: jede Gruppe
   ein aufklappbares Akkordeon (Toggle via .open, gesetzt im Template-JS). */

.submenu-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.submenu-group-heading {
  color: var(--text-secondary);
  font-size: var(--type-smaller-font-size);
  font-weight: var(--font-body-strong-weight);
  letter-spacing: .03em;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {

  /* Gruppen-Überschrift = Akkordeon-Toggle */
  .top-navigation-main .submenu-group-heading {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: .6rem 1.75rem;
  }

  .top-navigation-main .submenu-group-heading::after {
    background-color: var(--icon-primary);
    content: "";
    height: var(--icon-size);
    -webkit-mask-image: url("/static/icon/arrow-down.svg");
    mask-image: url("/static/icon/arrow-down.svg");
    transition: transform .15s ease;
    width: var(--icon-size);
  }

  .top-navigation-main .submenu-group.open>.submenu-group-heading::after {
    transform: rotate(180deg);
  }

  /* Gruppen-Inhalt standardmäßig eingeklappt, .open klappt auf */
  .top-navigation-main .submenu-group-list {
    display: none;
  }

  .top-navigation-main .submenu-group.open>.submenu-group-list {
    display: block;
  }

  /* Blattgruppe ohne Überschrift (einzelner Punkt direkt im Mega-Panel, s.
     update_navigation_cache.php) hat keinen Klick-Trigger zum Aufklappen —
     ohne diese Regel bliebe sie permanent unsichtbar/unerreichbar. */
  .top-navigation-main .submenu-group-flat>.submenu-group-list {
    display: block;
  }

  /* Blätter tiefer einrücken als die Gruppen-Überschrift */
  .top-navigation-main .submenu-mega .submenu-item {
    padding-left: 2.75rem;
  }
}

@media screen and (min-width: 769px) {

  /* Sichtbares Mega-Panel ist flex (Spalten) statt block. Gleiche Spezifität wie
     die :hover .submenu{display:block}-Regel weiter oben → diese steht später und
     gewinnt für .submenu-mega. */
  ul.main-menu .top-level-entry-container:focus-within .submenu-mega,
  ul.main-menu .top-level-entry-container:hover .submenu-mega {
    display: block;
  }

  /* Das Panel haengt am FENSTER, nicht am Menuepunkt.
     Vorher: mittig unter dem Punkt (left:50% + translateX(-50%)). Das ging
     schief, sobald der Punkt weit rechts steht — beim alten „System" wurde die
     letzte Spalte am Fensterrand abgeschnitten. Ein Panel dieser Breite ist
     ohnehin eine Schublade unter dem Kopfband und kein Tooltip am Punkt.
     `top` kommt aus derselben gemessenen Bandhoehe, an der auch alles andere
     klebt — damit sitzt es in beiden Kopfband-Stufen richtig.
     flex-wrap: bei schmalen Fenstern rutschen die Spalten untereinander statt
     zu quetschen; max-height + Scroll fangen den Fall ab, dass sie dabei
     laenger werden als der Bildschirm. */
  /* Spalten per Mehrspalten-Satz statt Flex. Flex legt Reihen an, deren Hoehe
     die hoechste Spalte bestimmt — brach „System" um, klaffte darueber eine
     Luecke von der Hoehe der Kalkulations-Spalte. Der Mehrspalten-Satz fuellt
     dagegen Spalte fuer Spalte auf und balanciert selbst; die Anzahl ergibt
     sich aus der Fensterbreite, ohne eine einzige Zahl im CSS. */
  .submenu-mega {
    column-width: 14rem;
    column-gap: 1.5rem;
    position: fixed;
    top: var(--sticky-header-without-actions-height);
    left: 0;
    right: 0;
    transform: none;
    max-width: none;
    /* Die Basis-Regel fuer .submenu setzt `width: max-content` — damit waere
       das Panel so breit wie seine Spalten und `left/right` blieben wirkungslos
       (gemessen: 1492px in einem 1376px-Fenster). `auto` gibt die Breite an die
       beiden Kanten zurueck, erst dadurch greift flex-wrap. */
    width: auto;
    padding: 1rem clamp(1rem, 4vw, 4rem);
    /* BEWUSST kein max-height + overflow: auto. `.top-navigation-main .submenu`
       setzt `overflow: visible`, damit seitliche Sub-Flyouts (.submenu-sub) aus
       dem Panel herausragen duerfen — ein Scroll-Container wuerde sie abschneiden.
       Beides geht nicht gleichzeitig. Gemessen passt das Panel bis hinunter zu
       1024×640 vollstaendig ins Fenster (Unterkante max. 715px); wird es durch
       neue Eintraege hoeher, muss man sich zwischen Scrollen und Sub-Flyouts
       entscheiden. */
  }

  /* Eine Gruppe darf nicht mitten in ihrer Liste umbrechen — sonst stuenden
     Ueberschrift und Eintraege in verschiedenen Spalten. */
  .submenu-mega .submenu-group {
    break-inside: avoid;
    margin-bottom: 1.25rem;
  }

  .submenu-mega .submenu-group-heading {
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: .35rem;
    padding: .25rem .75rem .4rem;
  }
}

/* --- Aufklappbare Sub-Punkte (4. Ebene) — Hover-Reveal, KEIN <details> ----- */
/* Markup: li.submenu-sub > (span.submenu-sub-summary + ul.submenu-sub-flyout).
   Bewusst kein <details>: dessen Inhalt bleibt ohne open-Attribut nativ unsichtbar
   (content-visibility / ::details-content), auch bei display:block am Kind.
   Stattdessen wie das Hauptpanel: Desktop = seitliches Hover-Flyout, Mobile =
   eingerückt dauerhaft sichtbar. */

.submenu-sub {
  list-style: none;
}

/* "Summary" ist ein <span> und sieht aus wie ein submenu-item, plus Pfeil rechts (▸). */
.submenu-sub-summary {
  justify-content: space-between;
}

.submenu-sub-summary::after {
  background-color: var(--icon-primary);
  content: "";
  flex: none;
  height: var(--icon-size);
  margin-left: .5rem;
  -webkit-mask-image: url("/static/icon/arrow-down.svg");
  mask-image: url("/static/icon/arrow-down.svg");
  transform: rotate(-90deg);
  /* ▸ zur Seite */
  width: var(--icon-size);
}

.submenu-sub-flyout {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {

  /* Mobile: Sub-Einträge eingerückt, dauerhaft sichtbar (kein Toggle nötig, JS-frei) */
  .top-navigation-main .submenu-sub-summary::after {
    display: none;
  }

  .top-navigation-main .submenu-sub-flyout .submenu-item {
    padding-left: 2.75rem;
  }

  .top-navigation-main .submenu-mega .submenu-sub-flyout .submenu-item {
    padding-left: 3.75rem;
  }
}

@media screen and (min-width: 769px) {

  /* Desktop: seitliches Sub-Flyout-Fenster, öffnet per Hover neben dem Elternteil.
     Richtung NACH RECHTS — nach links lief es unter dem linkesten Hauptpunkt aus
     dem Fenster („Projekte ▸ Grundlagen" war halb abgeschnitten). Gilt nur in der
     einzeiligen Kopfband-Stufe, s. die Regel unter diesem Block. */
  .submenu-sub {
    position: relative;
  }

  .submenu-sub-flyout {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-02);
    display: none;
    max-height: calc(100dvh - 6rem);
    min-width: 13rem;
    overflow: hidden auto;
    padding: .5rem;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: var(--z-index-mid);
  }

  .submenu-sub:hover>.submenu-sub-flyout,
  .submenu-sub:focus-within>.submenu-sub-flyout {
    display: block;
  }
}

/* Mittlere Breiten (zweizeiliges Kopfband): das Menü füllt hier die ganze Zeile,
   der linkeste und der rechteste Hauptpunkt stehen also an beiden Rändern. Eine
   feste Öffnungsrichtung kann es dann prinzipiell nicht geben — nach rechts lief
   „Einstellungen ▸ Wartung" hinaus, nach links „Projekte ▸ Grundlagen".
   Darum klappt das Untermenü hier NACH UNTEN auf, eingerückt im selben Fenster
   wie auf dem Handy. Seitwärts kann nichts mehr herauslaufen, und das Panel hat
   ohnehin schon max-height plus Scroll. */
@media screen and (min-width: 769px) and (max-width: 1359px) {
  .submenu-sub-flyout {
    background: none;
    border: none;
    box-shadow: none;
    max-height: none;
    min-width: 0;
    overflow: visible;
    padding: 0;
    position: static;
  }

  .top-navigation-main .submenu-sub-flyout .submenu-item {
    padding-left: 2.75rem;
  }
}