/* Echte Logoquelle und Namensbestandteile kommen aus site.json → branding. */
:root {
  /* Heller als das Signet-Rot, damit die kleine Schrift auf Dunkel lesbar bleibt. */
  --brand-red: var(--accent);
}

.brand { gap: 12px; flex-shrink: 0; }
.brand .brand-logo {
  display: block;
  width: auto;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
}
.brand .brand-wordmark { display: grid; gap: 2px; line-height: 1.05; }
.brand-first-name,
.brand-last-name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.brand-first-name { color: var(--brand-red); }
.brand-last-name { color: #fff; }
.about-mark { padding: 0; transform: none; }
.about-mark img { width: auto; height: 72%; max-width: 76%; object-fit: contain; }

@media (max-width: 800px) {
  .brand { gap: 10px; }
  .brand .brand-logo { height: 44px; }
  .brand-first-name,
  .brand-last-name { font-size: 13px; }
}
@media (max-width: 600px) {
  .brand .brand-logo { height: 42px; }
}
@media (max-width: 360px) {
  .brand { gap: 9px; }
  .brand-first-name,
  .brand-last-name { font-size: 12px; }
}