/* ===========================================================================
   DIE TITELMARKE — „Burgherr: A.D. 1157" und darunter die Ortszeile zwischen
   zwei Keilen. EINE Fassung für das ganze Spiel (25.09.2026).

   Ansage des Bro: „ich möchte einmal für das gesamte spiel festlegen wie der
   titel aussieht … dass diese striche links und rechts um ---- Mark
   Brandenburg ---- sich ausdünnen nach aussen hin also spitzer werden …
   dann wird es immer benutzt bei login bildschirm, hub oder
   charaktererstellung." Die Werte hat er auf der Probeseite eingestellt
   (server/public/titel-entwurf.html) und mit „bitte als standard übernehmen"
   abgenommen.

   Wer sie benutzt:
     Anmeldung        server/src/opener.ts    (titelmarkeHtml)
     Hub              server/src/hub.ts       (titelmarkeHtml)
     Charakterseite   server/src/charakter.ts (titelmarkeHtml)
     Ladeschirm       client/3d.html          (von Hand, dieselbe Form —
                                               titelmarke.test.ts hält beide
                                               gegeneinander)

   JEDE SEITE STELLT NUR DIE GRÖSSE (`--titelmarke-groesse`), alles andere
   rechnet in `em` davon — auch die Striche, damit sie auf einem kleineren
   Titel mitschrumpfen. Die Verhältnisse sind die abgenommenen (zweite Runde,
   25.09.2026): Titel 3,8 rem, Ortszeile 1,07, Abstand 0,77, Lücke zum Wort
   0,55, Strich 5,2 lang und 2,25 px dick, Deckkraft 0,65.
   Wer eine Zahl ändert, ändert sie hier und nirgends sonst; eine Seite, die an `.titelmarke__ort` selbst dreht, hat danach
   einen zweiten Titel.

   Die Striche sind SVG und kein clip-path: Ein Keil von drei Bildpunkten
   Höhe wird mit clip-path treppig, als Vektor bleibt die Spitze sauber.
   Außen (links) ist er eine Spitze, am Wort ein Drittel seiner Höhe dick.
   Die Ortszeile wird NICHT mehr auf Titelbreite gesperrt (das tat bis dahin
   ladeort.js) — die Keile haben eine feste Länge, die Sperrung bleibt fest.
   =========================================================================== */

.titelmarke {
  font-size: var(--titelmarke-groesse, 3.8rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  text-align: center;
}

.titelmarke__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1em;
  line-height: 1.06;
  letter-spacing: 0.02em;
  color: #cca75e;
  /* Der harte Schlagschatten ohne Weichzeichner — wie überall im Spiel. */
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}

.titelmarke__ortzeile {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 0,77 rem und 0,55 rem bei einem Titel von 3,8 rem */
  margin-top: 0.2026em;
  gap: 0.1447em;
}

.titelmarke__ort {
  /* 1,07 rem bei einem Titel von 3,8 rem */
  font-family: var(--font-body);
  font-size: 0.2816em;
  line-height: 1.2;
  letter-spacing: 0.44em;
  /* Die Sperrung hängt auch hinter dem letzten Buchstaben — ohne den
     Ausgleich stünde das Wort links von der Mitte, und die Lücke zum
     rechten Keil wäre breiter als die zum linken. */
  margin-right: -0.44em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8a7a58;
}

.titelmarke__strich {
  /* 5,2 rem lang und 6,75 px hoch bei einem Titel von 3,8 rem; der Keil
     selbst ist am Wort ein Drittel der Höhe dick (2,25 px) */
  flex: 0 0 1.3684em;
  width: 1.3684em;
  height: 0.111em;
  display: block;
  overflow: visible;
  color: #8a7a58;
  opacity: 0.65;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
}
.titelmarke__strich--rechts { transform: scaleX(-1); }