/*
  BOS-Portal — gemeinsames Erscheinungsbild
  =========================================

  Die eine Stelle, an der Farben, Schriften und Abstände stehen. Vorher trug
  jede Seite ihre eigene Kopie derselben sechs Farbwerte; wer den Rotton
  ändern wollte, musste fünf Dateien anfassen und übersah eine.

  Palette übernommen von krueger.studio — dieselbe wie im Spiel
  (ReplicatedStorage.BRP_UI). Wer hier etwas ändert, ändert es dort mit.

  Seiten dürfen eigene Regeln ergänzen, aber keine Farbe neu erfinden: Was
  hier keinen Namen hat, gehört nicht ins Portal.
*/

:root {
  --grund: #171717;
  --flaeche: #191919;
  --erhoben: #202020;
  --rand: #303030;
  --akzent: #f91b24;
  --text: #fff;
  --leise: #a0a0a0;
  --schwach: #6e6e6e;
  --gut: #40be78;
  --warn: #f0aa28;
  --blau: #3d8bd4;

  --ecke: 8px;
  --ecke-klein: 6px;
}

* { box-sizing: border-box; }

/*
  Das hidden-Attribut setzt display:none - aber nur mit der Stärke einer
  Elementregel. Sobald einem Element per Typ oder Klasse ein display
  zugewiesen wird (etwa main{display:grid}), gewinnt das, und "hidden" wirkt
  nicht mehr. Ohne diese Zeile stünde eine geschützte Seite für jeden offen,
  der die Adresse kennt - leer zwar, aber sichtbar.
*/
[hidden] { display: none !important; }

/*
  Hier steht bewusst KEINE Regel fuer <body>.

  Der erste Entwurf setzte hier Schrift, Farbe und Layout fuer alle Seiten -
  und hat damit der Patientenakte ihr eigenes Erscheinungsbild genommen: Sie
  folgt dem BRK-Corporate-Design mit Inter und Poppins, nicht der Hausschrift
  des Spiels. Eine gemeinsame Datei darf Werkzeug sein, nicht Vorschrift.

  Was hier steht, sind Namen (die Farbtokens oben) und Bausteine, die eine
  Seite benutzen KANN. Was eine Seite selbst mitbringt, bleibt ihres.
*/

/* ===== Portalleiste ====================================================== */
/*
  Sitzt auf jeder Seite ganz oben und ist der einzige Weg zwischen den
  Bereichen. Sie wird von brp-nav.js eingesetzt, nicht von Hand geschrieben -
  sonst hätte eine neue Seite eine unvollständige Leiste, und niemand merkt
  es, weil man von dort ja weiterkommt.
*/
.brp-leiste {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 18px;
  background: #131313;
  border-bottom: 1px solid var(--rand);
  overflow-x: auto;
  flex: none;
}

.brp-leiste .marke {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  padding: 11px 16px 11px 0;
  margin-right: 8px;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}
.brp-leiste .marke::before {
  content: "";
  width: 4px;
  height: 18px;
  background: var(--akzent);
  border-radius: 2px;
}

.brp-leiste a.eintrag {
  color: var(--leise);
  text-decoration: none;
  font-size: 14px;
  padding: 12px 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.brp-leiste a.eintrag:hover { color: var(--text); }
.brp-leiste a.eintrag.aktiv {
  color: var(--text);
  border-bottom-color: var(--akzent);
}

/* ===== Bausteine ========================================================= */

.brp-knopf {
  background: var(--erhoben);
  border: 1px solid var(--rand);
  border-radius: 500px;
  color: var(--text);
  padding: 6px 15px;
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;
}
.brp-knopf:hover:not(:disabled) { border-color: var(--leise); }
.brp-knopf:disabled { opacity: .45; cursor: default; }
.brp-knopf.haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  font-weight: 500;
}
.brp-knopf.haupt:hover:not(:disabled) { background: #d81620; }

.brp-karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--ecke);
  overflow: hidden;
}