/* ==========================================================================
   Navigation
   --------------------------------------------------------------------------
   Aufgabenteilung:
     .abschnitt-leiste  Anker der aktuellen Seite im Seitenkopf (ab 52rem)
     .hauptmenue        Seiten + „Auf dieser Seite“ als Panel von rechts,
                        geöffnet über den Menü-Knopf – auf allen Breiten.
   Popover-API: Öffnen, Schließen, Escape, Klick daneben macht der Browser.
   Stellschrauben:
     --nav-farbe / --nav-farbe-aktiv   Linkfarben (Leiste und Panel)
     --nav-panel-breite                Breite des Panels
     --nav-panel-flaeche               Fläche des Panels
   ========================================================================== */

@layer sections {

  /* Abschnitt-Leiste ------------------------------------------------------
     Darf schrumpfen und intern umbrechen – die Aktionen rechts bleiben in der Zeile. */
  .abschnitt-leiste { flex: 1 1 auto; min-inline-size: 0; }
  .abschnitt-leiste ul { display: flex; flex-wrap: wrap; gap: var(--size-1) var(--size-4); list-style: none; margin: 0; padding: 0; }
  .abschnitt-leiste a { color: var(--nav-farbe, var(--text-muted)); text-decoration: none; }
  .abschnitt-leiste a:hover,
  .abschnitt-leiste a[aria-current="page"] { color: var(--nav-farbe-aktiv, var(--text-primary)); }
  .abschnitt-leiste a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
  @media (max-width: 51.99rem) {
    .abschnitt-leiste { display: none; }
  }

  /* Menü-Knopf ------------------------------------------------------------ */
  .nav-knopf { align-items: center; display: inline-flex; gap: var(--size-2); justify-content: center; }
  .nav-knopf svg { block-size: 1.25em; inline-size: 1.25em; }
  @media (max-width: 51.99rem) {
    .nav-knopf { aspect-ratio: 1; padding: var(--size-2); }
    .nav-knopf-text { display: none; }
  }

  /* Panel ------------------------------------------------------------------ */
  .hauptmenue:popover-open {
    background: var(--nav-panel-flaeche, var(--surface-elevated));
    block-size: 100dvh;
    border: 0;
    border-inline-start: var(--border-width) solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    inline-size: var(--nav-panel-breite, min(22rem, 85vw));
    inset: 0 0 0 auto;
    margin: 0;
    overflow-y: auto;
    padding: var(--size-4) var(--size-5) var(--size-7);
    position: fixed;
  }
  .hauptmenue::backdrop { background: oklch(0% 0 0 / .5); }
  .hauptmenue-kopf { align-items: center; display: flex; justify-content: space-between; margin-block-end: var(--size-3); }
  .hauptmenue-titel { color: var(--text-muted); font-size: var(--font-size-0); letter-spacing: .08em; text-transform: uppercase; }
  .hauptmenue-schliessen { background: none; border: 0; color: inherit; cursor: pointer; font-size: var(--font-size-3); line-height: 1; padding: var(--size-2); }
  .hauptmenue ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
  .hauptmenue li a {
    border-block-end: var(--border-width) solid var(--border-color);
    color: var(--nav-farbe, var(--text-muted));
    display: block;
    padding-block: var(--size-3);
    text-decoration: none;
  }
  .hauptmenue a:hover,
  .hauptmenue a[aria-current="page"] { color: var(--nav-farbe-aktiv, var(--text-primary)); }
  .hauptmenue a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
  .nav-seiten { font-size: var(--font-size-3); }
  .hauptmenue a[data-offen] { color: var(--nav-farbe-aktiv, var(--text-primary)); font-weight: 600; }
  .nav-unterseiten { font-size: var(--font-size-2); }
  .hauptmenue .nav-unterseiten a { padding-inline-start: var(--size-5); }
  .hauptmenue .nav-unterseiten a::before { content: "↳ "; opacity: .5; }
  .nav-gruppe { color: var(--text-muted); font-size: var(--font-size-0); letter-spacing: .08em; margin: var(--size-6) 0 0; text-transform: uppercase; }
  .nav-anker { font-size: var(--font-size-2); }
  .hauptmenue-fuss { border-block-start: var(--border-width) solid var(--border-color); margin-block-start: auto; padding-block-start: var(--size-4); }

  /* Browser ohne Popover-API: Menü als normale Liste im Kopf, kein Knopf */
  @supports not selector(:popover-open) {
    .hauptmenue { background: none; border: 0; display: block; inset: auto; margin: 0; padding: 0; position: static; }
    .hauptmenue-kopf, .nav-gruppe, .nav-anker { display: none; }
    .hauptmenue ul { flex-direction: row; flex-wrap: wrap; gap: var(--size-1) var(--size-4); }
    .hauptmenue li a { border: 0; padding: 0; }
    .nav-knopf { display: none !important; }
  }

  /* Sitemap im Fuß -------------------------------------------------------- */
  .sitemap ul { display: flex; flex-wrap: wrap; gap: var(--size-1) var(--size-3); list-style: none; margin: 0; padding: 0; }
  .sitemap a { color: inherit; }
  .sitemap-unterseite a::before { content: "↳ "; opacity: .6; }
}