/* TrioConsens · Wortmarke — eine Schreibweise für alle Seiten
 * ===========================================================================
 * Bestandsaufnahme vom 08.09.2026 über 62 Seiten:
 *
 *   35 Seiten  TRIO + CONSENS      (Großbuchstaben, kein Logo)
 *    3 Seiten  Trio + Consens      (dritte Variante)
 *    2 Seiten  Trio + CONSENS      (Landingpage, richtig)
 *   22 Seiten  gar keine Wortmarke
 *
 * Es war also nicht eine Schreibweise mit Ausreißern, sondern vier
 * Schreibweisen, von denen die richtige die seltenste war. Der Grund: jede
 * Seite brachte ihre eigenen .brand- oder .logo-Regeln mit, und wer eine neue
 * Seite anlegte, kopierte die Nachbarseite statt die Landingpage.
 *
 * Deshalb hier eine Datei statt 62 Korrekturen. Wird sie eingebunden, sieht die
 * Marke überall gleich aus — und die nächste neue Seite erbt sie mit.
 *
 * Einbinden:  <link rel="stylesheet" href="/tc-marke.css">
 * Verwenden:  <a class="tc-marke" href="/">
 *               <span class="tc-marke__zeichen"></span>
 *               <span class="tc-marke__wort"><b>Trio</b><em>consens</em></span>
 *             </a>
 *
 * Die Klassennamen sind bewusst zweiteilig (.tc-marke__wort b statt .brand b):
 * die alten Seitenregeln greifen auf .brand b und .logo .t zu, und ein
 * Selektor aus zwei Klassen sticht sie ohne !important aus.
 *
 * Größe steuert --tc-marke-h (Standard 28px); das Zeichen skaliert mit.
 */

.tc-marke {
  --tc-marke-h: 28px;
  --tc-marke-navy: #0A1E33;
  --tc-marke-gold: #B0872C;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  line-height: 1;
}

.tc-marke .tc-marke__zeichen {
  display: block;
  flex: 0 0 auto;
  /* Seitenverhältnis der Datei — nicht raten, sondern aus assets/logo.svg. */
  width: calc(var(--tc-marke-h) * 0.898);
  height: var(--tc-marke-h);
  background: url("/assets/logo.svg") no-repeat center / contain;
}

.tc-marke .tc-marke__wort {
  display: inline-flex;
  align-items: baseline;
  /* Kein Abstand: auf der Visitenkarte ist es EIN Wort, in dem nur die Farbe
     wechselt. Zwei Pixel Luft dazwischen machten daraus zwei Wörter. */
  gap: 0;
  line-height: 1;
}

/* ── Die Schrift der Wortmarke ────────────────────────────────────────────
 *
 * Vorlage ist die Visitenkarte: EIN Serifenschnitt in Kapitälchen, großes „T",
 * alles Übrige auf Kapitälchenhöhe — der Wechsel liegt allein in der Farbe.
 *
 * Der erste Anlauf hier mischte zwei Schriften in zwei Größen (Fraunces für
 * „Trio", Inter für „CONSENS"). Das las sich wie zwei aneinandergestellte
 * Wörter statt wie eine Marke, und genau das ist im Dashboard aufgefallen.
 *
 * Deshalb: beide Hälften dieselbe Familie, dieselbe Größe, font-variant
 * small-caps. Geschrieben wird „Trio" + „consens" in Kleinbuchstaben — das
 * große T bleibt stehen, alles andere fällt auf Kapitälchenhöhe. Wer „CONSENS"
 * in Versalien schreibt, bekommt dort wieder Großbuchstaben in voller Höhe,
 * denn Kapitälchen wirken nur auf Kleinbuchstaben. */
.tc-marke .tc-marke__wort b,
.tc-marke .tc-marke__wort em {
  font-family: var(--dsp, "Fraunces", Georgia, "Times New Roman", serif);
  font-weight: 600;
  font-style: normal;
  font-variant-caps: small-caps;
  font-variant: small-caps;          /* Rückfall für ältere Browser */
  letter-spacing: 0.03em;
  font-size: calc(var(--tc-marke-h) * 0.62);
  text-transform: none;   /* gegen geerbte uppercase-Regeln älterer Seiten */
  line-height: 1;
}
.tc-marke .tc-marke__wort b { color: var(--tc-marke-navy); }
.tc-marke .tc-marke__wort em { color: var(--tc-marke-gold); }

/* Auf dunklem Grund (Fußzeilen, Admin-Seitenleiste): Navy verschwände dort. */
.tc-marke--dunkel .tc-marke__wort b { color: #fff; }
.tc-marke--dunkel .tc-marke__wort em { color: var(--gold-lt, #D9B45B); }

/* Dunkelmodus. Ohne diese beiden Blöcke stünde „Trio" in Navy (#0A1E33) auf
   dem dunklen Grund mancher Seiten (creators.html schaltet auf #0A0E1A) —
   praktisch unsichtbar, und niemand hätte es gemeldet, weil man die Marke im
   Kopf trotzdem liest. Die Seiten kennen beide Schreibweisen des Umschalters:
   das Systemthema und die ausdrückliche Wahl über data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tc-marke .tc-marke__wort b { color: #F2F5F8; }
  :root:not([data-theme="light"]) .tc-marke .tc-marke__wort em { color: var(--gold-lt, #D9B45B); }
}
:root[data-theme="dark"] .tc-marke .tc-marke__wort b { color: #F2F5F8; }
:root[data-theme="dark"] .tc-marke .tc-marke__wort em { color: var(--gold-lt, #D9B45B); }

/* Ohne Bildzeichen — für enge Kopfzeilen und Druckseiten. */
.tc-marke--nurwort .tc-marke__zeichen { display: none; }

@media print {
  /* Hintergrundbilder druckt der Browser oft nicht; dann stünde ein leerer
     Kasten neben dem Wort. Im Druck trägt das Wort allein. */
  .tc-marke .tc-marke__zeichen { display: none; }
  .tc-marke .tc-marke__wort b { color: #0A1E33; }
  .tc-marke .tc-marke__wort em { color: #8A6520; }
}