// ────────────────────────────────────────────────────────────────
// Komponente · Marke
//
// Die Hausmarke in zwei Größen: `.brand` für Leisten und Kopfzeilen,
// `.masthead` für die große Bühne (Anmeldung, Startseite).
//
// WARUM SIE HIER STEHT UND NICHT AUF JEDER SEITE. Dieselbe Handschrift stand
// bisher an drei Stellen abgeschrieben: auf johannesbrunner.de, auf der
// Platzhalterseite darunter und nun in der Anwendung. Dreimal dieselben Zahlen
// heißen dreimal die Gelegenheit, sie unterschiedlich zu ändern.
//
// ALLES AUS TOKENS, KEINE ZAHL VON HAND. Die Vorlage hatte sich fuer Sperrung,
// Groesse und Gluehen eigene Werte erfunden — `letter-spacing: .34em`,
// `clamp(52px, 10vw, 92px)` und ein `--ember-soft`, das im hellen Thema falsch
// geblieben waere. Hier heissen dieselben Dinge `--tracking-widest`,
// `--display-lg` und `color-mix(in srgb, var(--ember) X%, transparent)`.
// ────────────────────────────────────────────────────────────────

.brand {
  font-family: var(--font-brand);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

// Die Ziffer traegt den Akzent — sie ist die Versionsangabe der Marke.
.brand b {
  font-weight: var(--fw-bold);
  color: var(--accent);
}

.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

// Eine Zeile, keine Umbrueche. Die Marke ist ein Eigenname; sie darf brechen,
// aber nicht umbrechen — sonst steht die „3" allein in der zweiten Zeile. Die
// Startseite schuetzt die Stelle mit einem geschuetzten Leerzeichen; hier steht
// der Schutz, wo er fuer alle gilt.
.masthead__title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--display-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-widest);
  text-indent: var(--tracking-widest);   // optische Zentrierung der gesperrten Schrift
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--ember) 55%, transparent),
    0 0 34px color-mix(in srgb, var(--ember) 32%, transparent),
    0 0 68px color-mix(in srgb, var(--ember) 16%, transparent);
}

.masthead__title b {
  font-weight: var(--fw-medium);
  color: var(--accent);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);
}

// Die Linie: in der Mitte satt, zu den Raendern durchsichtig.
.masthead__rule {
  width: 100%;
  height: 1px;
  margin: calc(var(--sp-3) * -1) auto 0;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--ember) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--ember) 30%, transparent);
}

// Kleine Buehne: in einer Karte, auf einem Telefon, in einer Randspalte. Die
// grosse Marke (`--display-lg`) sprengt eine 400px-Karte — `--display-sm` haelt
// dieselbe Handschrift in einer Groesse, die dort hinpasst.
.masthead--compact .masthead__title {
  font-size: var(--display-sm);
  letter-spacing: var(--tracking-wider);
  text-indent: var(--tracking-wider);
}

// Der Domainzug unter der Marke: die Zeichen werden ueber die volle Breite
// gespreizt — so, wie johannesbrunner.de es zeigt. Ohne die einzelnen
// `<span>`-Zeichen tut `justify-content` nichts: „johannesbrunner.de" hat keine
// Wortzwischenraeume, an denen eine Rechtfertigung ansetzen koennte. Die
// Zerlegung in Zeichen macht die Seite.
.masthead__sub {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: var(--sp-3) 0 0;
  color: var(--dim);
  font-size: var(--fs-sm);
  text-transform: uppercase;
}