/* ============================================================
   Hinweisbalken
   ============================================================
   Teil der nach Funktion aufgeteilten Gestaltung (29.08.2026).

   Vorher lag alles in einer seite.css mit 1.940 Zeilen, und jede neue
   Funktion wurde hinten drangehaengt. Max am 29.08.2026: "dass nicht
   alles in App.js reinkommt und in CSS, sondern dass das nach Funktion
   getrennt wird." Beim JavaScript war das laengst so, beim CSS nicht.

   Neue Regeln gehoeren in die Datei ihrer Funktion, nicht ans Ende der
   naechstbesten. Die Einbindereihenfolge in den HTML-Dateien entspricht
   der Reihenfolge, in der die Bloecke vorher in seite.css standen -
   daran haengt die Kaskade. tests/frontend-architecture.test.js prueft
   beides.
   ============================================================ */

/* ---------- Hinweisbalken ---------- */

/* Vom flaechig gelben Alarmkasten auf einen weissen Karten-Look mit
   Farbakzent umgestellt (29.08.2026, Max: "Hinweisbalken sehen ein
   bisschen blöd aus"). Die Seite arbeitet sonst durchgehend mit weissen
   Karten plus Farbakzenten (.rk, .lz, Abzeichen) statt mit flaechigen
   Farbflaechen - der alte Balken war der einzige Bruch damit. */
.hinweisbalken {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fffdf6;
  border: 1px solid var(--border);
  border-left: 4px solid #f2b90c;
  border-radius: var(--radius-sm);
  padding: 14px 17px;
  font-size: .84rem; line-height: 1.6; color: var(--text);
  margin-bottom: 20px;
}
.hinweisbalken strong { color: var(--marke-dunkel); }
.hinweisbalken .sym { flex: none; font-size: 1rem; line-height: 1.4; }