/* smopi Maintenance — Wortmarke
   ==========================================================================

   URSACHE DES ABSTANDS ZWISCHEN "sm" UND "opi"
   --------------------------------------------
   admin.css setzt auf den Träger der Wortmarke:

       .brand { display: flex; align-items: baseline; gap: 7px; }

   `gap` gilt in einem Flex-Container zwischen ALLEN Geschwistern. Das
   Markup

       <span class="b-sm">sm</span><span class="b-opi">opi</span>
       <span class="reg">®</span> <small>- Maintenance</small>

   besteht aus vier Flex-Elementen — also setzt der Browser 7 px zwischen
   "sm" und "opi", nochmals 7 px vor dem "®" und 7 px vor "- Maintenance".
   Der Wortmarke fehlt damit genau das, was sie zur Wortmarke macht: Sie
   liest sich als drei getrennte Silben.

   Kein Zeichenabstand (`letter-spacing`), kein Leerzeichen im Quelltext —
   deshalb war die Ursache am Markup nicht zu sehen.

   BEHEBUNG
   --------
   1. `gap: 0` — die Wortmarke schließt zusammen, "®" sitzt direkt an "opi".
   2. Der einzige Abstand, der bleiben soll, wird gezielt gesetzt:
      `margin-left` auf `small` ("- Maintenance").
   3. `.reg` steht hochgestellt über `align-self: flex-start`.
      `vertical-align` wäre hier wirkungslos: Auf Flex-Elemente hat die
      Eigenschaft keinen Einfluss. Das ist der zweite, seltener bekannte
      Teil derselben Ursache.

   FARBE DES ®  (geändert in Anpassung 13)
   ---------------------------------------
   Das ® trägt jetzt das Orangegelb der Wortmarke (#FBB016, identisch zu
   "opi") statt der Grauabstufung von "- Maintenance". Es gehört damit
   sichtbar zur Marke und nicht zum beschreibenden Zusatz — was es rechtlich
   auch ist: Der Schutzrechtshinweis bezieht sich auf "smopi", nicht auf
   "Maintenance".

   Der Wert steht bewusst als Literal und nicht als CSS-Variable: Die
   Logofarben sind aus der Bildmarke gesampelt und keine Tokens des
   Oberflächen-Farbsystems in admin.css. Wer sie ändert, ändert die Marke —
   dann sollen alle drei Stellen hier zusammen in den Blick fallen.

   WARUM EIN EIGENES STYLESHEET
   ----------------------------
   Die Regeln stehen bewusst NICHT in admin.css. Sie gehören inhaltlich
   zusammen, sind an einer Stelle zu pflegen, und die Ladereihenfolge
   (admin.css, danach brand.css) sorgt bei gleicher Spezifität dafür, dass
   sie gewinnen. Das Markup in den Layouts bleibt dadurch unverändert —
   es gibt keinen zweiten Ort, an dem die Wortmarke „richtig“ aussehen
   müsste.

   Eingebunden in: layouts/app.blade.php, layouts/field.blade.php,
   auth/login.blade.php — jeweils NACH admin.css.
   ========================================================================== */

.brand {
  gap: 0;
}

/* Wortmarke in den Logofarben: "sm" grün, "opi" orange (aus dem Logo gesampelt) */
.brand .b-sm  { color: #93BE30; }
.brand .b-opi { color: #FBB016; }

/* Das ® gehört zur Marke — deshalb dieselbe Farbe wie "opi". */
.brand .reg {
  color: #FBB016;
  font-weight: 700;
  font-size: .58em;
  line-height: 1;
  align-self: flex-start;
}

/* Der einzige gewollte Abstand der Zeile. */
.brand small {
  margin-left: 7px;
}