/* Kaiser: die Oberfläche als gedruckte Chronik.
 *
 * Grundschrift ist IM Fell English nach den englischen Fell-Typen um 1690,
 * Überschriften und Titel stehen in UnifrakturMaguntia. Beide Schriften liegen
 * unter der SIL Open Font License in client/schriften und werden selbst
 * ausgeliefert, nicht von einem fremden Dienst geladen.
 *
 * Der C64-Zeichensatz bleibt dort, wo er hingehört: auf dem Schlachtfeld.
 */

@font-face {
  font-family: 'IM Fell English';
  src: url('schriften/imfellenglish-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IM Fell English';
  src: url('schriften/imfellenglish-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'UnifrakturMaguntia';
  src: url('schriften/unifrakturmaguntia.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --papier: #e6dbc0;
  --papier-hell: #f1e9d6;
  --papier-tief: #dbcfb0;
  --tinte: #2a2118;
  --tinte-blass: #6b5d4a;
  --linie: #a8977a;
  --linie-fein: #c3b494;
  --rot: #8c2f21;
  --gruen: #40602f;
  --gold: #8a6a1f;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-block: 22px;
  padding-inline: 16px;
  background: #cdbf9e;
  color: var(--tinte);
  font-family: 'IM Fell English', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  /* IM Fell hat eine kleine x-Höhe; 21px lesen sich wie 17px einer
     gewöhnlichen Schrift. Wer es größer mag, stellt es im Browser ein,
     alle weiteren Größen hängen an dieser einen. */
  font-size: 23px;
  line-height: 1.55;
}

/* Der Satzspiegel: ein Bogen Papier mit doppelter Randlinie */
.rahmen {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--papier);
  border: 1px solid var(--linie);
  outline: 4px double var(--linie);
  outline-offset: 4px;
  padding: 28px 30px 34px;
  box-shadow: 0 2px 14px rgba(60, 46, 26, .3);
}

/* ------------------------------------------------------------- Überschriften */

h1, h2, h3 { margin: 0 0 .45em; font-weight: 400; }

h1 {
  font-family: 'UnifrakturMaguntia', 'IM Fell English', serif;
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--tinte);
}

h2 {
  font-family: 'UnifrakturMaguntia', 'IM Fell English', serif;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .2em;
  margin-bottom: .6em;
}

h3 {
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinte-blass);
  border-bottom: 1px dotted var(--linie-fein);
  padding-bottom: .2em;
  margin-top: 1.1em;
}

a { color: var(--rot); }
p { margin: .5em 0; }
code {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: .85em;
  background: var(--papier-tief);
  padding: 1px 4px;
}

/* -------------------------------------------------------------------- Kopf */

.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 3px double var(--linie);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.kopf .jahr {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: 2rem;
  line-height: 1;
}
.phase {
  display: inline-block;
  padding: 2px 12px;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .12em;
}
.phase.diplomatie { border-color: var(--rot); color: var(--rot); }
.phase.auswertung { border-color: var(--gruen); color: var(--gruen); }
.frist { color: var(--tinte-blass); font-size: .92rem; font-style: italic; }

/* ------------------------------------------------------------------ Spalten */

.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .spalten { grid-template-columns: minmax(0, 1fr); } }

.karte {
  border: 1px solid var(--linie);
  background: var(--papier-hell);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.karte.aktiv { border-color: var(--gold); }

/* ----------------------------------------------------------------- Tabellen */

table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--linie-fein); }
th {
  font-weight: 400;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--tinte-blass);
  border-bottom: 1px solid var(--linie);
}
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
tr.selbst td { color: var(--rot); }
.tabellenhuelle { overflow-x: auto; }

/* ------------------------------------------------------------------ Knöpfe */

button {
  font-family: inherit;
  font-size: .96rem;
  background: var(--papier-tief);
  color: var(--tinte);
  border: 1px solid var(--linie);
  padding: 5px 14px;
  cursor: pointer;
  margin: 3px 4px 3px 0;
  line-height: 1.3;
}
button:hover:not(:disabled) { background: var(--papier-hell); border-color: var(--tinte); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.gut { background: var(--gruen); color: var(--papier-hell); border-color: #2c4420; }
button.gut:hover:not(:disabled) { background: #4d7239; color: #fff; }
button.gefahr { background: var(--rot); color: var(--papier-hell); border-color: #6b2018; }
button.gefahr:hover:not(:disabled) { background: #a63a28; color: #fff; }

/* ----------------------------------------------------------------- Formulare */

input, select {
  font-family: inherit;
  font-size: 1rem;
  background: #fbf6e9;
  color: var(--tinte);
  border: 1px solid var(--linie);
  padding: 4px 8px;
  max-width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
input[type=number] { font-variant-numeric: tabular-nums lining-nums; }
label {
  display: block;
  margin: 8px 0 2px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinte-blass);
}
.reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

/* Zahlenfeld mit eigenen Knoepfen. Die Pfeile, die manche Browser selbst an
   ein Zahlenfeld malen, sind nicht verlaesslich -- Safari zeigt keine. Darum
   bringt das Feld seine eigenen mit, und die fremden werden abgeschaltet,
   damit nicht zweierlei Pfeile nebeneinanderstehen. */
.zahlenwahl .stufen { display: flex; align-items: stretch; }
.zahlenwahl input { text-align: right; }
.zahlenwahl input::-webkit-outer-spin-button,
.zahlenwahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zahlenwahl input[type=number] { -moz-appearance: textfield; appearance: textfield; }
button.stufe {
  margin: 0;
  padding: 4px 11px;
  font-size: 1.1rem;
  line-height: 1.1;
  min-width: 2.1em;
}
button.stufe:first-child { border-right: none; }
button.stufe:last-child { border-left: none; }
.reihe > * { flex: 0 1 auto; }
input[type=range] { accent-color: var(--rot); }

/* --------------------------------------------------------------- Meldungen */

.meldung {
  border-left: 4px solid var(--gold);
  padding: 8px 12px;
  margin: 10px 0;
  background: var(--papier-tief);
  font-size: 1rem;
}
.meldung.warnung { border-color: var(--rot); }
.meldung.gut { border-color: var(--gruen); }

/* ------------------------------------------------------------ Reichsübersicht */

.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.wert { border: 1px solid var(--linie-fein); padding: 6px 10px; background: var(--papier); }
.wert .name {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinte-blass);
}
.wert .zahl {
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.balken { height: 14px; background: var(--papier-tief); border: 1px solid var(--linie); margin-top: 5px; }
.balken > div { height: 100%; background: var(--gruen); }
.balken.knapp > div { background: var(--rot); }

.fertig { color: var(--gruen); }
.wartet { color: var(--tinte-blass); font-style: italic; }
.klein { font-size: .88rem; color: var(--tinte-blass); }
ul { margin: .3em 0; padding-left: 1.3em; }
li { margin: .2em 0; }
.verstecken { display: none !important; }

/* -------------------------------------------- Schrittleiste über voller Breite */

#schrittLeiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 3px double var(--linie);
}
.stufe {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--linie-fein);
  background: var(--papier-hell);
  color: var(--tinte-blass);
  font-family: inherit;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  margin: 0;
  min-width: 0;
}
.stufe .nr {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  line-height: 22px;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .86rem;
  font-variant-numeric: lining-nums;
}
.stufe .was { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stufe.jetzt { border-color: var(--gold); color: var(--gold); background: #f6efdb; }
.stufe.jetzt .nr { background: var(--gold); color: var(--papier-hell); border-color: var(--gold); }
.stufe.erledigt { border-color: var(--gruen); color: var(--gruen); }
.stufe.erledigt .nr { background: var(--gruen); color: var(--papier-hell); border-color: var(--gruen); }
.stufe.spaeter { opacity: .4; }
button.stufe { cursor: pointer; }
button.stufe:hover { border-color: var(--tinte); color: var(--tinte); background: #fbf6e9; }

@media (max-width: 540px) {
  #schrittLeiste { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .stufe { font-size: .78rem; padding: 6px 8px; gap: 6px; }
  .stufe .nr { width: 20px; height: 20px; line-height: 18px; }
}

/* Auf schmalen Schirmen etwas kleiner, sonst passt kaum eine Tabelle aufs
   Bild. Immer noch größer als die frühere Grundgröße. */
@media (max-width: 560px) {
  body { font-size: 20px; }
  .rahmen { padding: 16px 14px 22px; }
  .karte { padding: 12px 12px; }
  th, td { padding: 4px 5px; }
  /* Die breiten Tabellen dürfen hier schmaler werden, damit die Knöpfe
     nicht am Rand abgeschnitten stehen. */
  .karte.handlung table,
  .karte.handlung table.weit { min-width: 0; }
  .karte.handlung table td:not(.zahl) { padding-right: 6px; }
  .karte.handlung table.weit button { font-size: .8rem; padding: 3px 8px; }
}

/* ------------------------------------------- Handlungskarte über volle Breite */

/* Oben wird gehandelt, unten stehen die Auskünfte. Die Handlungskarte hebt
   sich dafür deutlicher ab als die Auskunftskarten. */
.karte.handlung {
  border-color: var(--gold);
  border-width: 2px;
  background: #f3ecda;
}

/* Tabellen in der Handlungskarte laufen sonst über die ganze Seite
   auseinander; Zahlenkolonnen liest man besser dicht beieinander. Sie
   schrumpfen auf ihre Inhaltsbreite, bleiben aber breit genug zum Lesen. */
.karte.handlung table { width: auto; min-width: 340px; max-width: 720px; }
.karte.handlung table td:not(.zahl) { padding-right: 28px; }
.karte.handlung .tabellenhuelle { max-width: 100%; }
.karte.handlung p { max-width: 78ch; }
.karte.handlung .balken { max-width: 720px; }

/* Die breiten Tabellen von Militär und Einkäufen dürfen mehr Platz nehmen */
.karte.handlung table.weit { width: 100%; max-width: 960px; }
.karte.handlung table.weit td:not(.zahl) { padding-right: 8px; }

/* --------------------------------------------------------------- Zugabschluss */

.abschluss {
  border-top: 3px double var(--linie);
  margin-top: 18px;
  padding-top: 12px;
}
.abschluss button { font-size: 1.05rem; padding: 8px 20px; }

/* ------------------------------------------------- Schlachtfeld und Aufstellung */

canvas { image-rendering: pixelated; max-width: 100%; display: block; }

/* Der C64-Zeichensatz bleibt schwarz hinterlegt, wie eine eingeklebte Tafel.
 *
 * Das Schlachtfeld ist 76 Zeichen hoch und 40 breit, also hochkant: in
 * Bildpunkten 320 auf 608. Am C64 rollte es durchs Bild, hier passt es ganz
 * hinein. Die Hoehe richtet sich nach dem Fenster, die Breite folgt von
 * selbst, damit die Zeichen quadratisch bleiben. Mehr als doppelte Groesse
 * braucht es nicht -- darueber wird nur die Treppe der Bildpunkte groesser.
 */
.feldhuelle {
  overflow: hidden;
  border: 1px solid var(--linie);
  outline: 3px double var(--linie);
  outline-offset: 3px;
  background: #000;
  margin: 10px 0 4px;
  display: flex;
  justify-content: center;
}
.feldhuelle canvas {
  height: min(74vh, 1216px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Liegt das Fenster quer und ist flach, bleibt die Hoehe der begrenzende Wert;
   ist es schmal, darf die Breite den Ausschlag geben. */
@media (max-width: 620px) {
  .feldhuelle canvas { height: auto; width: 100%; }
}

#titelbild {
  margin: 0 auto 18px;
  border: 1px solid var(--linie);
  outline: 3px double var(--linie);
  outline-offset: 3px;
  background: #000;
}

.truppenwahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.truppenwahl button.gewaehlt { background: var(--gold); color: var(--papier-hell); border-color: #6d5418; }
.truppenwahl .anzahl { font-variant-numeric: lining-nums; }

.hinweisleiste {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: .92rem; color: var(--tinte-blass);
}
.hinweisleiste b { color: var(--tinte); }

/* --------------------------------------------------------------------- Lobby */

.runde {
  border: 1px solid var(--linie-fein);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--papier);
}
.runde.meine { border-color: var(--gruen); border-left-width: 4px; }
.rundenkopf { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.rundenname {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: 1.35rem;
  line-height: 1;
}
.plaetze { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.platz { border: 1px solid var(--linie-fein); padding: 2px 9px; font-size: .9rem; background: var(--papier-hell); }
.platz.selbst { border-color: var(--gruen); color: var(--gruen); }
#lobbyKonto { display: block; margin-top: 5px; font-style: italic; }

/* ---------------------------------------------------------------- Verwaltung */

.nutzerliste td, .nutzerliste th { padding: 5px 7px; vertical-align: middle; }
.nutzerliste tr.gesperrt td { color: var(--rot); }
.nutzerliste .rolle {
  font-size: .76rem; border: 1px solid var(--gold); color: var(--gold);
  padding: 1px 7px; text-transform: uppercase; letter-spacing: .06em;
}
.nutzerliste button { font-size: .84rem; padding: 3px 9px; margin: 1px; }
.bremse { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.bremse .wert { border: 1px solid var(--linie-fein); padding: 7px 10px; }
.schalter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.schalter .lage { font-style: italic; }
.schalter .lage.offen { color: var(--gruen); }
.schalter .lage.zu { color: var(--rot); }

/* ------------------------------------------------------------------- Musik */

button.musik { padding: 3px 11px; font-size: .86rem; margin-left: 8px; }
button.musik.an { background: var(--gruen); color: var(--papier-hell); border-color: #2c4420; }
button.musik.fehlt { opacity: .45; }

/* Kopfzeile einer Karte mit Knopf rechts */
.kartenkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.kartenkopf h2 { flex: 1 1 auto; }
button.hilfe { flex: 0 0 auto; font-size: .86rem; padding: 3px 12px; }

/* Hilfe als aufgeschlagenes Blatt über der Seite */
#hilfeSchirm {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 16, .62);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  z-index: 50;
}
.hilfeblatt {
  background: var(--papier);
  border: 1px solid var(--linie);
  outline: 4px double var(--linie);
  outline-offset: 4px;
  box-shadow: 0 6px 28px rgba(30, 20, 8, .5);
  padding: 22px 26px 26px;
  max-width: 780px;
  width: 100%;
  margin: auto;
}
.hilfeblatt h2 { margin-bottom: .4em; }
.hilfeblatt li { margin: .35em 0; }
.hilfeblatt .meldung { margin-top: 14px; }
@media (max-width: 560px) { .hilfeblatt { padding: 16px 14px 20px; } }

/* Reichskarte */
.kartenhuelle {
  overflow-x: auto;
  border: 1px solid var(--linie);
  outline: 3px double var(--linie);
  outline-offset: 3px;
  background: #574200;     /* Braun wie im Original */
  margin: 8px 0 10px;
}
/* Die Karte ist 74 Kacheln zu je 16 Pixeln breit, also 1184 Pixel. Sie fuellt
   die Seite und faellt nie unter die halbe Groesse, sonst wird sie unlesbar. */
.kartenhuelle canvas { width: 100%; min-width: 592px; max-width: 1184px; }
#kartenlegende { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.legendeneintrag { display: inline-flex; align-items: center; }
.legendeneintrag canvas {
  background: #574200;
  padding: 2px;
  height: 20px;
  width: auto;
  margin-right: 7px;
  image-rendering: pixelated;
}

/* Legende der Truppengattungen unter dem Schlachtfeld */
.truppenlegende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 20px;
  margin-top: 10px;
}
.truppenlegende .gattung { display: flex; align-items: baseline; gap: 8px; }
.truppenlegende canvas { background: #000; padding: 2px; flex: 0 0 auto; align-self: center; }
.truppenlegende .name { font-variant: small-caps; letter-spacing: .04em; }
.truppenlegende .was { color: var(--tinte-blass); font-size: .88rem; }

/* Rat aus dem gedruckten Handbuch von 1984, deutlich abgesetzt von den Regeln */
.handbuch {
  border-left: 3px double var(--linie);
  padding: 2px 0 2px 14px;
  margin: 14px 0;
  font-style: italic;
  color: var(--tinte-blass);
}
.handbuch b {
  display: block;
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: .06em;
  color: var(--tinte);
}
.handbuch p { margin: .2em 0 0; }
.handbuch .quelle {
  font-style: normal;
  font-size: .82em;
  opacity: .75;
  margin-top: .4em;
}

/* Zeremonien: die Vollbildschirme des Originals */
#zeremonieSchirm {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 6, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  z-index: 60;
}
.zeremonieblatt {
  background: var(--papier);
  border: 1px solid var(--linie);
  outline: 4px double var(--linie);
  outline-offset: 5px;
  box-shadow: 0 8px 36px rgba(20, 12, 4, .6);
  padding: 30px 32px 26px;
  max-width: 640px;
  width: 100%;
  margin: auto;
  text-align: center;
}
.zeremonieblatt h2 { margin: 0 0 .5em; }
.zeremonieblatt p { margin: .45em 0; }
.zeremonieblatt canvas { margin: 14px auto 4px; display: block; image-rendering: pixelated; }
.zeremonieblatt button { margin-top: 18px; }
#zeremonieBildhuelle {
  background: #000;
  border: 1px solid var(--linie);
  margin: 16px 0 4px;
  padding: 4px;
}
#zeremonieBild { width: 100%; display: block; image-rendering: pixelated; }
.zeremonieblatt.bankrott h2, .zeremonieblatt.amtsenthebung h2 { color: var(--rot); }
@media (max-width: 560px) { .zeremonieblatt { padding: 20px 16px 20px; } }

/* Truppentafel ueber dem Schlachtfeld, wie das HUD des Originals */
.truppentafel th { font-variant: small-caps; letter-spacing: .04em; }
.truppentafel td.zahl.klein, .truppentafel th.klein { color: var(--tinte-blass); }
.truppentafel td:nth-child(2), .truppentafel th:nth-child(2) { border-left: 1px solid var(--linie); }
.truppentafel td:nth-child(4), .truppentafel th:nth-child(4) { border-left: 1px solid var(--linie); }

/* Verstorbene Regenten */
.tot { color: var(--rot); font-variant: small-caps; letter-spacing: .04em; }
tr.verstorben td { opacity: .55; }
.zeremonieblatt.tod h2 { color: var(--rot); }

/* Kornspeicher aus Bild 1 des Originals */
.speicherhuelle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 12px 0 4px;
  padding: 8px 10px;
  background: #b2643a;           /* der Grund, auf dem das Original ihn zeigt */
  border: 1px solid var(--linie);
  outline: 3px double var(--linie);
  outline-offset: 3px;
  max-width: 480px;
}
.speicherhuelle canvas { image-rendering: pixelated; flex: 0 0 auto; display: block; }
.speicherhuelle > div { color: #2a1c0c; }
.speicherhuelle .klein { color: #4a3316; }

/* Uebersicht des Reiches */
.reichsbild { width: 100%; max-width: 620px; height: auto; display: block; margin: 6px auto 10px; }
.reichsbild .grenze { stroke: var(--linie); stroke-width: 1.2; opacity: .55; }
.reichsbild .grenze.meine { stroke: var(--gruen); stroke-width: 2.4; opacity: 1; }
.reichsbild .grenze.einseitig { stroke-dasharray: 5 3; }
.reichsbild marker path { fill: var(--linie); }
.reichsbild .land circle { fill: var(--papier); stroke: var(--linie); stroke-width: 1.5; }
.reichsbild .land.besetzt circle { fill: var(--tinte-blass); }
.reichsbild .land.nachbar circle { stroke: var(--gruen); stroke-width: 2.5; }
.reichsbild .land.eigen circle { fill: var(--gruen); stroke: var(--gold); stroke-width: 3; }
.reichsbild .land.herrenlos circle { fill: var(--rot); opacity: .5; }
/* Die Beschriftung bekommt einen Saum in der Papierfarbe, damit die
   Grenzlinien nicht mitten durch die Namen laufen. */
.reichsbild text {
  paint-order: stroke;
  stroke: var(--papier);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.reichsbild .name {
  text-anchor: middle; font-size: 15px; font-variant: small-caps;
  letter-spacing: .05em; fill: var(--tinte);
}
.reichsbild .fuerst { text-anchor: middle; font-size: 13px; fill: var(--tinte-blass); font-style: italic; }

/* Hinweis auf eine neue Fassung. Steht ueber allem, bis man neu laedt. */
.neuefassung {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: -22px -16px 18px;
  padding: 10px 18px;
  background: var(--gold);
  color: var(--papier-hell);
  text-align: center;
}
.neuefassung button {
  margin-left: 10px;
  background: var(--papier-hell);
  border-color: var(--papier);
}