/* ════════════════════════════════════════════════════════════════════════════════════════════
   MELOGNITE — RICHTUNG A („Instrument"): die Abschnitts-Ueberschriften   Stand 2026-07-31
   Gegenstueck zu /shared/melognite-shell.js.

   Bewusst SEHR wenig: Richtung A sagt „ein Gehaeuse, fuenf Finishes" — die Finishes (Sperrholz,
   Beton) gehoeren weiterhin den Genre-Skins. Diese Datei liefert nur das, was ALLEN gemeinsam
   ist: die Gliederung. Sie setzt keine Farbe, die ein Skin ueberschreiben muesste, sondern erbt
   die Textfarbe und traegt die Trennung ueber eine Linie mit geringer Deckkraft — das
   funktioniert auf Beton wie auf Pergament.

   ⚠ Keine Mischmodi, keine Vollbild-Verlaeufe, keine Filter. t031b hat nachgewiesen, dass genau
   diese Klasse von Zierarbeit auf dem 2-Kern-Zielgeraet dem Ton die Rechenzeit stiehlt.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

html.mgn-ux .mgn-sec {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 8px;
  padding-top: 14px;
  border-top: 1px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height: 1.25;
  color: inherit;
  opacity: .95;
}

/* Der Hinweis erklaert den Abschnitt in Alltagssprache — er ist das, was heute fehlt:
   die Seite benennt Funktionen, aber sagt nie, wofuer sie da sind. */
html.mgn-ux .mgn-sec small {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .62;
}

/* Der erste Abschnitt braucht keine Linie nach oben — darueber steht der Stil-Wechsler,
   der ohnehin schon eine visuelle Zaesur ist. */
html.mgn-ux .mgn-sec:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Die Plan-Leiste steht jetzt am Ende. Dort darf sie ruhiger auftreten als im Kopf:
   sie informiert, sie verkauft nicht mehr als Erstes. */
html.mgn-ux [data-mgn-shell="1"] .tierpanel {
  margin-top: 8px;
}