/* ── Marke ────────────────────────────────────────────────────────────────
   Wortmarke „OFFER" in der Seitenleiste. Dieselbe Schrift wie das Mosh-Logo
   (Chakra Petch 700, selbst gehostet), damit die beiden Werkzeuge als Paar
   erkennbar sind.

   Liegt bewusst in public/css und nicht in resources/css: Diese Datei geht
   ohne Build-Schritt live, genau wie project-form.css.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch/chakra-petch-latin-700-normal.woff2') format('woff2');
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-s, .5rem);
  color: var(--foreground);
}

/* .dashboard__brand hat nur seitliches Padding (dashboard.css) – die Marke
   klebte dadurch oben am Rand und unten an der Trennlinie. */
.dashboard__brand {
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding-block: var(--spacing-m, .75rem);
}

/* Höher gewichtet als .dashboard__brand svg (3rem) aus custom.css. */
.dashboard__brand .brand .brand__mark {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 0;
  flex-shrink: 0;
  color: var(--primary);
}

.brand__word {
  font-family: 'Chakra Petch', 'Inter', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Login-Seite: gleiche Marke, etwas größer und zentriert. */
.login-brand { display: inline-block; padding-block: var(--spacing-m, .75rem); }
.login-brand .brand { justify-content: center; }
.login-brand .brand__mark { width: 2.25rem; height: 2.25rem; color: var(--primary); }
.login-brand .brand__word { font-size: 1.75rem; }