/* Suitebalk: dunne strip bovenaan elke dienst, om ertussen te springen.
   Bewust donkerder dan de kop eronder, zodat hij leest als een laag erboven en
   niet concurreert met de navigatie van de dienst zelf. */
.stbalk{background:#0B1319;color:#fff;font-size:13px;line-height:1}
/* min-height en niet height: bij 200% tekstzoom op een smal scherm past de
   merkregel naast de dienstlinks niet meer, en dan moet de balk ombreken in
   plaats van de links buiten beeld duwen. */
.stbalk-in{max-width:1000px;margin:0 auto;padding:4px 24px;min-height:36px;
  display:flex;flex-wrap:wrap;align-items:center;align-content:center;
  justify-content:space-between;gap:4px 16px}
/* Geen beeldmerk in deze strip. De dienst eronder voert hetzelfde kopje al, en
   twee dezelfde merktekens onder elkaar leest als een fout. Dit is een stille
   contextregel, geen tweede logo. */
.stbalk-merk{color:rgba(255,255,255,.52);text-decoration:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase}
.stbalk-merk:hover{color:#fff}
/* De diensten hebben zelf ook een <nav>, vaak sticky en met een witte
   achtergrond. Zonder deze drie regels erft de balk dat en zie je een wit
   blok in een donkere strip. */
.stbalk-nav{display:flex;flex-wrap:wrap;gap:4px;background:none;border:0;position:static;height:auto;max-width:none;padding:0;margin:0}
.stbalk-nav a{color:rgba(255,255,255,.62);text-decoration:none;padding:6px 10px;border-radius:3px}
.stbalk-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.stbalk-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12);font-weight:600}
/* Op een telefoon moeten de dienstlinks en de merkregel groot genoeg zijn om
   met een duim te raken. Op een muisscherm blijft de strip dun. */
@media(max-width:700px){
  .stbalk-in{padding:0 14px;gap:0 8px}
  .stbalk-merk{display:inline-block;padding:16px 0}
  .stbalk-nav a{padding:15px 9px}
}