/* ============================================================
   sparkm — Kopfleiste, Standard für alle Seiten von sparkm.core
   Beschlossen am 19.08.2026. Werte hier ändern = überall ändern.

   Alle Klassen tragen das Präfix "tb-", damit sie sich nicht mit
   dem seiteneigenen CSS beißen (.topbar, .logo, .crumb existieren
   in den Altseiten noch in anderer Bedeutung).
   ============================================================ */

.tb{background:#0f1f4b;color:#fff;padding:14px 0}

/* Die Leiste hält immer dieselbe Breite — unabhängig davon, wie breit
   der Seiteninhalt darunter ist. Sonst wandert das Logo von App zu App. */
.tb-wrap{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:14px;min-height:29px}
/* min-height und line-height halten die Leiste auf exakt 57 px — sonst bestimmt die
   Zeilenhöhe der jeweiligen Seite die Höhe, und sie schwankt von App zu App. */

/* Ausnahme sparkm.finance: dort füllt der Inhalt samt Seitenleiste die ganze Fensterbreite.
   Eine mittig begrenzte Leiste würde darüber schweben, deshalb läuft sie dort mit.
   Höhe, Marke, Schriftgrößen und Pfad bleiben unverändert. */
.tb-voll .tb-wrap{max-width:none;padding:0 16px}

.tb-logo{font-weight:700;font-size:17px;line-height:1;display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;flex-shrink:0}
.tb-logo img{height:26px;width:26px}
/* Die visionm-Wortmarke ist breit statt quadratisch — sie braucht freie Breite. */
.tb-logo img.tb-wortmarke{height:23px;width:auto}
a.tb-logo:hover{opacity:.85}

.tb-pfad{font-size:13px;color:#9fb0d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-pfad a{color:#9fb0d8;text-decoration:none}
.tb-pfad a:hover{color:#fff}
.tb-sep{padding:0 6px;color:#7d8fbf}
.tb-now{color:#fff}

.tb-rechts{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px;color:#9fb0d8;flex-shrink:0}
.tb-abmelden{background:none;border:none;font-family:inherit;font-size:13px;color:#ffb3aa;cursor:pointer;padding:0}
.tb-abmelden:hover{color:#fff}

/* ---- Umschalter zwischen den Markenbereichen -------------------------------------
   Fuehrt in den jeweils anderen Markenbereich (sparkm.core <-> visionm) und zeigt
   dessen Marke. Als Pille mit Rahmen, damit sie als Schalter gelesen wird und
   nicht als zweites Logo. Bleibt auf dem Handy sichtbar: sie ist Navigation. */
.tb-wechsel{display:inline-flex;align-items:center;gap:8px;padding:4px 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;text-decoration:none;font-size:12.5px;font-weight:600;line-height:1;flex-shrink:0}
.tb-wechsel:hover{border-color:#fff;background:rgba(255,255,255,.10)}
.tb-wechsel svg{width:15px;height:15px;opacity:.7;flex-shrink:0}
.tb-wechsel:hover svg{opacity:1}
/* Beide Markenbereiche zeigen im Umschalter dasselbe: Icon-Marke, daneben der Schriftzug.
   Der leichte Radius sitzt auf der visionm-Marke (ein Quadrat), die sparkm-Marke
   ist rund und bleibt davon unberuehrt. */
.tb-wechsel img.tb-w-mark{height:16px;width:16px;border-radius:3px;display:block}

/* ---- Marke visionm --------------------------------------------------------
   Dieselbe Leiste im visionm-CI (#2f2951 / Limette #97d700, siehe
   public/pages/visionm.html). Nur Farben, kein anderer Aufbau: wer zwischen
   den Markenbereichen wechselt, findet alles am selben Platz. */
.tb-visionm{background:#2f2951}
.tb-visionm .tb-pfad,.tb-visionm .tb-pfad a,.tb-visionm .tb-rechts{color:#b5aed6}
.tb-visionm .tb-pfad a:hover{color:#fff}
.tb-visionm .tb-sep{color:#8f86bd}
.tb-visionm .tb-now{color:#fff}
.tb-visionm .tb-wechsel:hover{border-color:#97d700;background:rgba(151,215,0,.14)}

/* Freier Platz links vom Namen — heute für den Datenstand im Funnel-
   Reporting ("Stand: 19.08. 14:20 Uhr"), morgen für Ähnliches. Bleibt
   unsichtbar, solange ihn niemand füllt. */
.tb-stamp{opacity:.8}
.tb-stamp:empty{display:none}

@media(max-width:640px){
  .tb-pfad .tb-lvl,.tb-pfad .tb-sep{display:none}
  .tb-rechts .tb-user,.tb-rechts .tb-stamp{display:none}
  .tb-rechts{gap:12px}
  .tb-wrap{padding:0 16px;gap:10px}
}