/* ---- Unterseiten-Navigation -----------------------------------------------------------------
   Gehört zu den acht Rechts- und Infoseiten (ueber-uns, kontakt, status, impressum, datenschutz,
   agb, widerruf, auftragsverarbeitung). Stand bis dokumi-g4a1 achtmal wortgleich im <style>-Block
   der jeweiligen Seite; jede Änderung war damit eine Achtfach-Änderung, die byte-genau gleich
   bleiben musste, sonst wären die Seiten optisch auseinandergelaufen. Jetzt einmal hier.
   Eingebunden über staticFiles in Build/BuildLanding.mjs, verlinkt aus dem <helmet> jeder Seite.

   Ab 768px die waagerechte Registerkarten-Reihe, darunter die Auswahl: auf schmalen Viewports
   ist die Reihe eine waagerecht scrollende Leiste, deren Überlauf man leicht übersieht.
   Die Umschaltung steht hier und nicht inline, weil ein Inline-Style jede Media Query schlägt.

   Die Auswahl ist ein NACHBAU von DkSelect / DkMenuItem / DkPopover aus Dokumi.Web, nicht ein
   natives <select>. Ein natives Feld sah geschlossen richtig aus, zeichnet seine geöffnete
   Liste aber vom Betriebssystem: Systemschrift, systemblau markierte Zeile, fremde Ecken neben
   den Steuerelementen der Anwendung. Im Web-Client ist genau dieser Fehler schon einmal
   passiert und steht seitdem unter einer Regel mit eigenem Test,
   components/__tests__/SelectComponentConvention.spec.ts; sie gilt hier genauso.
   Die Maße und Farben unten sind die von dort. Die Token des Web-Clients entsprechen 1:1 den
   --wa-*: --border/--wa-border #e9edef, --header/--wa-surface-panel #f0f2f5,
   --hover/--wa-surface-hover, --text-3/--wa-text-3 #8696a0,
   --accent-soft/--wa-accent-soft rgba(37,211,102,.16), --accent-strong/--wa-accent-strong.

   box-sizing steht hier nirgends: die Seiten setzen es global über `* { box-sizing: border-box; }`.
   outline ebenso wenig: die globale Regel für :focus-visible zeichnet den Rahmen, hier steht nur
   der abweichende Abstand. */
[data-subnav-tabs] { display: flex; }
[data-subnav-select] { display: none; position: relative; }
@media (max-width: 767px) {
  [data-subnav-tabs] { display: none; }
  [data-subnav-select] { display: block; }
}

/* Ein einziges Attribut, data-open, schaltet Fangfläche, Liste und Pfeilrichtung. */
[data-subnav-catcher] { display: none; position: fixed; inset: 0; z-index: 60; }
[data-subnav-panel] { display: none; }
[data-subnav-select][data-open] [data-subnav-catcher] { display: block; }
[data-subnav-select][data-open] [data-subnav-panel] { display: block; }

/* DkSelect: das 42px-Feldrezept des Auslösers. */
[data-subnav-trigger] {
  display: flex; align-items: center; justify-content: center; position: relative;
  width: 100%; height: 42px; padding: 0 13px;
  border: 1px solid var(--wa-border); border-radius: 9px;
  background: var(--wa-surface-panel); color: var(--wa-text);
  font-family: inherit; font-size: 14px; cursor: pointer; outline: none;
}
[data-subnav-trigger]:hover { border-color: var(--wa-accent); }
[data-subnav-trigger]:focus-visible { outline-offset: 2px; }
/* Mittig über die GANZE Breite, nicht nur über den Rest neben Pfeil beziehungsweise Haken: beide
   liegen deshalb absolut am Rand und nehmen keine Breite aus dem Fluss. Die 46px Reserve hält die
   Beschriftung von ihnen frei, bevor sie mit Auslassungspunkten gekürzt wird. Dass für Auslöser
   und Zeile derselbe Wert passt, ist Zufall der Maße (Pfeil 17px bei right:13px, Haken 15px bei
   right:10px) und keine gemeinsame Größe; wer eines davon ändert, prüft das andere. */
[data-subnav-value],
[data-subnav-label] {
  max-width: calc(100% - 46px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
[data-subnav-chevron] { display: flex; align-items: center; position: absolute; right: 13px; top: 0; bottom: 0; color: var(--wa-text-3); transition: transform .15s var(--wa-ease); }
[data-subnav-select][data-open] [data-subnav-chevron] { transform: rotate(180deg); }

/* DkPopover: die schwebende Fläche, auf die Breite des Feldes gezogen.
   ABWEICHUNG: DkSelect deckelt die Höhe bei 240px, hier sind es 280. Dort sind die Einträge
   eine Liste unbekannter Länge (Kategorien, Zuständige), hier sind es sieben feste Seiten.
   7 x 36px Zeile plus 2 x 5px Innenabstand plus Rahmen sind 264px: bei 240 müsste man für die
   letzten beiden Seiten scrollen, ohne dass die Liste dadurch je kürzer würde. */
[data-subnav-panel] {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 61;
  max-height: 280px; overflow-y: auto;
  background: var(--wa-surface); border: 1px solid var(--wa-border);
  border-radius: 12px; padding: 5px; box-shadow: 0 18px 54px rgba(0,0,0,.24);
  animation: dkPop .16s var(--wa-ease);
}

/* DkMenuItem auf der Stufe sm. Die gewählte Zeile behält ihren Akzentton auch beim
   Überfahren, und aria-current ist zugleich die Bedeutung und der Auslöser der Optik:
   applyPage() setzt nur dieses eine Attribut, alles Sichtbare hängt daran. */
[data-subnav-option] {
  display: flex; align-items: center; justify-content: center; position: relative;
  width: 100%; height: 36px; padding: 0 10px; border-radius: 8px;
  background: transparent; color: var(--wa-text); font-size: 13.5px; line-height: 1.2;
}
/* color wiederholt hier den Ruhewert: die globale Regel a:hover färbt sonst jede Zeile grün. */
[data-subnav-option]:hover { background: var(--wa-surface-hover); color: var(--wa-text); }
[data-subnav-option]:focus-visible { outline-offset: -2px; }
/* Das :hover-Paar spiegelt DkMenuItem, wo die gewählte Zeile ihren Ton ausdrücklich behält. */
[data-subnav-option][aria-current="page"],
[data-subnav-option][aria-current="page"]:hover { background: var(--wa-accent-soft); }
[data-subnav-option][data-off] { display: none; }
/* Wie beim Auslöser absolut am Rand. Bliebe der Haken im Fluss, stünde die gewählte Zeile als
   einzige um seine halbe Breite versetzt und die Liste liefe nicht mehr auf einer Achse. */
[data-subnav-check] { display: none; position: absolute; right: 10px; top: 0; bottom: 0; align-items: center; }
[data-subnav-option][aria-current="page"] [data-subnav-check] { display: flex; }

@keyframes dkPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }