/*
 * PixelHobel – gemeinsame Bereichsnavigation (.phx-nav)
 *
 * Ein Ausklappmenü statt einer Reiterleiste: Zugeklappt steht dort der
 * Bereich, in dem man ist, offen alle Bereiche untereinander. Getragen von
 * <details> – Auf- und Zuklappen, Tastatur und Fokus macht der Browser.
 *
 * Die Form stammt aus der Nachmittagsbetreuung (com_phbetreuung) und liegt
 * hier ohne Komponentenbezug, damit alle Arbeitsbereiche der Schule gleich
 * bedienbar sind. Farben kommen aus den Template-Variablen (--ars-*), damit
 * Hell- und Dunkelmodus ohne eigene Regeln stimmen.
 *
 * ACHTUNG bei den Zeichen: Font Awesome wird NACH den Komponenten-Stilen
 * geladen und setzt `display` selbst. Jede Regel, die einem <i> ein display
 * gibt, trägt darum den Elementnamen mit (i.phx-nav__icon) – sonst verliert
 * sie und das Zeichen sitzt schief im Kreis.
 */

.phx-nav { margin: 0 0 1rem; }
.phx-nav__box { position: relative; max-width: 24rem; }

/* Der Ausklapper ist der Hauptgriff der Seite – er trägt darum die Hausfarbe
   statt eines weißen Kastens, der wie ein Eingabefeld aussähe. */
/* Genau die Standardhöhe der übrigen Bedienelemente (button.css/form.css:
   50px). Mit box-sizing, sonst käme der Rahmen obendrauf und der Griff
   stünde drei Pixel höher als jeder Knopf daneben. */
.phx-nav__knopf {
  display: flex; align-items: center; gap: .6rem; padding: 0 .9rem;
  height: 50px; box-sizing: border-box;
  border: 1px solid var(--ars-bordeaux, #94132f); border-radius: 8px;
  background: var(--ars-bordeaux, #94132f); color: #fff; cursor: pointer;
  font-weight: 700; list-style: none;
}
.phx-nav__knopf::-webkit-details-marker { display: none; }
.phx-nav__knopf:hover { background: color-mix(in srgb, var(--ars-bordeaux, #94132f) 86%, #000); }
.phx-nav__knopf:focus-visible { outline: 2px solid var(--ars-bordeaux, #94132f); outline-offset: 2px; }

/* Auf farbigem Grund braucht das Zeichen einen hellen Kreis, sonst verschwindet es. */
i.phx-nav__icon {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgb(255 255 255 / 22%); color: #fff; font-size: .9rem;
}
.phx-nav__titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.phx-nav__knopf .phx-nav__count { background: rgb(255 255 255 / 25%); color: #fff; }
i.phx-nav__pfeil { flex: 0 0 auto; display: inline-block; color: rgb(255 255 255 / 85%); transition: transform .15s; }
.phx-nav__box[open] i.phx-nav__pfeil { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { i.phx-nav__pfeil { transition: none; } }

/* Die Liste liegt ÜBER dem Inhalt – sonst schöbe jedes Öffnen die Seite nach unten. */
.phx-nav__liste {
  position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; right: 0; margin: 0; padding: .25rem;
  list-style: none; border: 1px solid var(--ars-border, #d9dedf); border-radius: 8px;
  background: var(--ars-bg, #fff); box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}
.phx-nav__punkt {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 6px;
  min-height: 44px; text-decoration: none; color: inherit; font-weight: 600;
}
.phx-nav__punkt > i:first-child { width: 1.4rem; text-align: center; color: var(--ars-text-soft, #5b6670); }
.phx-nav__punkt:hover { background: var(--ars-bg-soft, #f1f6f5); }
.phx-nav__punkt.is-active {
  background: color-mix(in srgb, var(--ars-bordeaux, #94132f) 12%, var(--ars-bg, #fff));
  color: var(--ars-bordeaux, #94132f);
}
.phx-nav__punkt.is-active > i:first-child { color: var(--ars-bordeaux, #94132f); }
i.phx-nav__haken { margin-left: auto; display: inline-block; color: var(--ars-bordeaux, #94132f); }

/* Die Zahl am Bereich: wie viele Anmeldungen, wie viele Vorlagen. */
.phx-nav__count {
  flex: 0 0 auto; min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px;
  background: var(--ars-bg-soft, #f1f6f5); color: var(--ars-text-soft, #5b6670);
  font-size: .8rem; font-weight: 700; text-align: center;
}