/* ============================================================
   Plate (pl8) – Menüknopf
   ============================================================

   Der Knopf trug einen runden Rahmen mit heller Füllung. Neben Logo und
   Wortmarke war das ein drittes Element, das um Aufmerksamkeit bat, obwohl drei
   Striche für sich schon eindeutig sind. Der Kreis ist im Bündel entfernt; hier
   steht nur noch, was sich über Klassennamen nicht lösen ließ.

   Warum überhaupt eine eigene Datei: Das Stylesheet der Anwendung ist gebaut
   und enthält ausschließlich Klassen, die beim Bauen benutzt wurden. `space-y-1`
   und `translate-y-1.5` sind darin nicht vorhanden – ein Knopf, der sie nennt,
   bekäme gar keinen Abstand und gar keine Bewegung. Deshalb hier echte Regeln
   statt geratener Klassennamen.

   Die beiden Werte hängen zusammen: Die Striche sind 2px hoch. Bei 4px Lücke
   liegen ihre Mitten 6px auseinander – genau die Strecke, die der obere Strich
   nach unten und der untere nach oben zurücklegen muss, damit beim Öffnen ein
   sauberes X entsteht. Wer die Lücke ändert, muss den Weg mitändern.
   ============================================================ */

/* Der Menüknopf: das einzige Element in der Kopfzeile mit aria-expanded.
   4px statt 6px – die Striche rücken zusammen.

   Das `!important` ist hier kein Faulheitszeichen, sondern nötig: Die Regel der
   Anwendung lautet `.space-y-1\.5 > :not([hidden]) ~ :not([hidden])` und wiegt
   damit drei Klassen schwer. Jede Auswahl über Element- und Attributnamen bliebe
   darunter; sie künstlich aufzublähen (`[class]` mehrfach anhängen) wäre
   schlechter lesbar als dieses eine Wort. */
header button[aria-expanded] > div > span + span {
  margin-top: 0.25rem !important;
}

/* Geöffnet: die beiden äußeren Striche treffen sich in der Mitte.
   `transform` wird vollständig gesetzt, weil Verschiebung und Drehung in der
   Anwendung aus zwei getrennten Klassen kommen – eine davon allein zu
   überschreiben würde die andere verlieren. */
header button[aria-expanded="true"] > div > span:first-child {
  transform: translateY(0.375rem) rotate(45deg);
}

header button[aria-expanded="true"] > div > span:last-child {
  transform: translateY(-0.375rem) rotate(-45deg);
}