/* ==========================================================================
   EMPIRE DISTRICT · Designsprache "Börsenzeitung"
   --------------------------------------------------------------------------
   Haltung: Das hier ist ein Spiel über Zahlen, Firmen und Geld. Es soll
   aussehen wie ein gedruckter Börsenbericht, nicht wie ein Dashboard von
   der Stange. Konkret heißt das:

     · warmes Tiefschwarz und Pergament statt Marineblau mit Blauschimmer
     · Messing als Stempelfarbe, sparsam - nicht auf jedem zweiten Element
     · Haarlinien und Weißraum statt Kästen mit Rahmen und Schlagschatten
     · keine Verläufe, kein Milchglas, kein Leuchten
     · Kanten fast ohne Rundung: gedruckt wirkt schärfer als weichgespült
     · eine Schriftfamilie in drei Stimmen: Serif für Titel, Sans für die
       Oberfläche, Mono für jede Zahl - Zahlen sollen als Zahlen lesbar sein

   Liegt als letzte Ebene über styles.css und styles-v2.css. Nimmt man die
   Zeile aus der index.html, ist das alte Aussehen zurück.
   ========================================================================== */

/* ---------- 1. Farben und Maße -------------------------------------------
   Die Variablen aus styles.css werden hier überschrieben. Dadurch dreht
   sich fast die ganze Oberfläche mit, ohne dass jede Regel angefasst
   werden muss. */
:root {
  /* Papier und Tinte */
  --ink-900: #100e0c;   /* Grundfläche, warmes Schwarz - kein Blau darin */
  --ink-800: #17140f;
  --ink-700: #1e1a15;   /* Flächen */
  --ink-600: #262019;   /* angehobene Flächen, Tabellenkopf */
  --ink-500: #332b21;

  --papier:   #f0e9dc;  /* Text, leicht cremig statt reinweiß */
  --papier-2: #cdc3b2;
  --grau:     #9a8f7f;  /* Nebentext */
  --grau-2:   #6f665a;

  --messing:      #c9a227;
  --messing-hell: #e6c65c;
  --messing-tief: #8a6d18;

  --gewinn:  #86a95f;   /* gedämpft, kein Neongrün */
  --verlust: #c4604c;
  --hinweis: #c99a3f;
  --notiz:   #7c93a8;

  --linie:          rgba(240, 233, 220, .13);
  --linie-fein:     rgba(240, 233, 220, .07);
  --linie-kraeftig: rgba(240, 233, 220, .26);

  /* Die alten Namen weiterreichen, damit vorhandene Regeln mitziehen */
  --navy-950: #100e0c;
  --navy-900: #17140f;
  --navy-850: #1e1a15;
  --navy-800: #262019;
  --gold: #c9a227;
  --gold-light: #e6c65c;
  --ink: #f0e9dc;
  --muted: #9a8f7f;
  --line: rgba(240, 233, 220, .13);
  --panel: #1e1a15;
  --green: #86a95f;
  --red: #c4604c;
  --blue: #7c93a8;
  --amber: #c99a3f;
  --shadow: none;

  --font-sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Gedruckt heißt: kaum Rundung */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;

  --s-1: 6px;
  --s-2: 10px;
  --s-3: 18px;
  --s-4: 26px;
  --s-5: 40px;

  --e-1: none;
  --e-2: none;
  --e-3: 0 24px 60px -30px rgba(0, 0, 0, .9);
  --edge: none;
  --edge-gold: none;
  --gold-glow: rgba(201, 162, 39, .2);
  --line-soft: rgba(240, 233, 220, .07);
  --line-strong: rgba(240, 233, 220, .26);
  --ease: cubic-bezier(.2, .6, .3, 1);

  color-scheme: dark;
}

/* ---------- 2. Grundfläche ------------------------------------------------
   Eine ruhige, gleichmäßige Fläche. Kein Farbverlauf, kein Lichtkegel -
   Papier leuchtet nicht. */
html, body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--ink-900);
  background-image: none;
  color: var(--papier);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- 3. Schrift ----------------------------------------------------
   Drei Stimmen aus einer Familie. Titel in der Serif, Oberfläche in der
   Sans, jede Zahl in der Mono - so unterscheidet das Auge Text von Zahl,
   ohne dass man es erklären muss. */
.metric-value, .data-table td, .mini-stat strong, .countdown strong,
.realm-stat strong, .profile-stats strong, .rival-stats strong,
.inventory-item strong, .progress-meta, .angebot-zeile strong,
.date-chip strong, .reiter b, .chart-labels, .depot-value,
.badge, .reward, .price-up, .price-down, .war-row, .such-ergebnis,
.metric-foot {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -.01em;
}

.section-heading h2,
.brand strong,
.auth-brand strong,
.profile-card h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--papier);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.section-heading {
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--linie);
}
.section-heading h2 { font-size: 30px; line-height: 1.1; margin: 0; }
.section-heading p {
  max-width: 68ch;
  color: var(--grau);
  font-size: 13.5px;
  line-height: 1.65;
}

.brand strong { font-size: 20px; letter-spacing: .04em; }
.brand small { letter-spacing: .34em; color: var(--grau-2); }

/* Abschnittstitel sind Marginalien, keine Schlagzeilen: klein, gesperrt,
   zurückhaltend. Die Aufmerksamkeit gehört den Zahlen darunter. */
.panel-head h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grau);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--messing);
  font-weight: 500;
}

.reason {
  color: var(--papier-2);
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 76ch;
}

.muted { color: var(--grau); }

/* ---------- 4. Flächen ----------------------------------------------------
   Kein Kasten-im-Kasten. Eine Fläche ist eine Fläche, getrennt durch eine
   Haarlinie - so wie Spalten in einer Zeitung. */
.panel, .metric-card {
  background: var(--ink-700);
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-md);
  box-shadow: none;
}

.panel-head {
  padding: 14px var(--s-3);
  border-bottom: 1px solid var(--linie);
  background: none;
  gap: 14px;
}
.panel-body { padding: var(--s-3); }

/* Karten reagieren mit der Linie, nicht mit Anheben und Schatten.
   Schwebende Karten sind das Erkennungszeichen jeder Baukasten-Oberfläche. */
.rival-card, .bank-card, .recipe-card, .building-card,
.immo-card, .etf-card, .region-card, .opportunity-card {
  background: var(--ink-700);
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.rival-card:hover, .bank-card:hover, .recipe-card:hover, .building-card:hover,
.immo-card:hover, .etf-card:hover, .region-card:hover, .opportunity-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--linie-kraeftig);
  background: var(--ink-600);
}
.region-card:after { display: none; }   /* der Lichtfleck muss weg */

/* ---------- 5. Seitenleiste ----------------------------------------------
   Eine Spalte, keine Insel. Der aktive Eintrag wird durch eine
   Messinglinie und mehr Schriftgewicht markiert, nicht durch eine
   eingefärbte Pille. */
.sidebar {
  background: var(--ink-800);
  border-right: 1px solid var(--linie);
  box-shadow: none;
  padding: var(--s-4) 10px var(--s-3);
}
.brand { padding: 0 10px var(--s-4); border-radius: 0; }
.brand img { border-radius: var(--r-sm); box-shadow: none; }

nav { gap: 1px; }
.nav-item {
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--papier-2);
  letter-spacing: .005em;
  transition: color .14s var(--ease), background .14s var(--ease);
}
.nav-item:hover { transform: none; background: rgba(240, 233, 220, .04); color: var(--papier); }
.nav-item.active {
  background: none;
  border-left-color: var(--messing);
  color: var(--papier);
  font-weight: 600;
  box-shadow: none;
}
.nav-item.active .nav-icon { color: var(--messing); filter: none; }
.nav-icon { font-size: 15px; width: 20px; color: var(--grau-2); opacity: 1; }

.realm-card {
  background: none;
  border: 0;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  box-shadow: none;
  padding: var(--s-3) 10px 0;
}
.crest { border-color: var(--messing-tief); color: var(--messing); border-radius: 0; }
.sidebar-foot { color: var(--grau-2); font-family: var(--font-mono); font-size: 10px; }

/* ---------- 6. Kopfleiste -------------------------------------------------
   Flach und ruhig. Milchglas ist der schnellste Weg, nach Vorlage
   auszusehen - deshalb hier nichts davon. */
.topbar {
  height: 66px;
  background: var(--ink-900);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: none;
  box-shadow: none;
}
.topbar h1 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.date-chip {
  border: 0;
  border-left: 1px solid var(--linie);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 4px 0 4px 14px;
}
.date-chip span { color: var(--messing); font-size: 15px; }
.date-chip strong { font-size: 13px; }
.date-chip small { color: var(--grau-2); }

.icon-button {
  border: 1px solid var(--linie);
  border-radius: var(--r-sm);
  background: none;
  color: var(--papier-2);
}
.icon-button:hover { background: rgba(240, 233, 220, .05); border-color: var(--linie-kraeftig); }
.icon-button b { background: var(--verlust); border-radius: var(--r-sm); font-family: var(--font-mono); }

.avatar {
  border-radius: var(--r-sm);
  background: none;
  border: 1px solid var(--messing-tief);
  color: var(--messing);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  box-shadow: none;
}
.avatar:hover { transform: none; background: rgba(201, 162, 39, .1); }

/* ---------- 7. Kennzahlen -------------------------------------------------
   Vier Spalten einer Kopfzeile, durch Linien getrennt. Runde Farbkreise
   mit Emoji darin sind das Klischee schlechthin - hier steht stattdessen
   die Zahl groß und das Etikett klein darüber. */
.metric-grid {
  gap: 1px;
  background: var(--linie-fein);
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-md);
  overflow: hidden;
}
.metric-card {
  border: 0;
  border-radius: 0;
  padding: 16px var(--s-3);
  gap: 0;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ink-700);
  min-width: 0;
}
.metric-card > div { min-width: 0; width: 100%; }
/* Die Zierzeichen vor den Kennzahlen (Wappen, Schwert, Sparschwein-Emoji)
   waren an der auffaelligsten Stelle der Oberflaeche das staerkste Signal
   fuer "zusammengewuerfelt". Ein Etikett und eine grosse Zahl genuegen. */
.metric-icon { display: none; }
.metric-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
}
.metric-value {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.03em;
  margin-top: 5px;
  color: var(--papier);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.metric-foot { font-size: 11px; color: var(--grau-2); margin-top: 3px; }
.metric-foot.negative { color: var(--verlust); }

/* ---------- 8. Tabellen ---------------------------------------------------
   Das Herzstück. Ein Kursblatt: Haarlinien, keine senkrechten Striche,
   Zahlen rechtsbündig in der Mono, Kopfzeile klein und gesperrt. */
.data-table { border-collapse: collapse; }
.data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink-600);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grau);
  border-bottom: 1px solid var(--linie-kraeftig);
  box-shadow: none;
  padding: 10px 14px;
}
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--linie-fein);
  font-size: 12.5px;
  color: var(--papier-2);
}
.data-table td strong { color: var(--papier); font-weight: 600; }
.data-table tbody tr { transition: background .1s var(--ease); }
.data-table tbody tr:hover { background: rgba(240, 233, 220, .035); }

/* Zahlenspalten rechtsbündig - so, wie Zahlen in jeder Bilanz stehen.
   Erste Spalte (Name) und letzte (Knöpfe) bleiben linksbündig. */
.data-table th:nth-child(n+2):not(:last-child),
.data-table td:nth-child(n+2):not(:last-child) { text-align: right; }
.data-table th:first-child, .data-table td:first-child,
.data-table th:last-child, .data-table td:last-child { text-align: left; }

.own-row { background: rgba(201, 162, 39, .08); box-shadow: inset 2px 0 0 var(--messing); }
.own-row td { font-weight: 500; color: var(--papier); }

.table-wrap { border-radius: 0; }

/* ---------- 9. Bedienelemente ---------------------------------------------
   Rechteckig, klar, ohne Leuchten. Die Hauptaktion trägt Messing,
   alles andere ist eine Umrisslinie. */
.button {
  border-radius: var(--r-sm);
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: .015em;
  border: 1px solid transparent;
  transition: background .13s var(--ease), border-color .13s var(--ease), color .13s var(--ease);
}
.button:active { transform: none; opacity: .82; }

.button.primary {
  background: var(--messing);
  color: #17130a;
  border-color: var(--messing);
  box-shadow: none;
  text-shadow: none;
}
.button.primary:hover { background: var(--messing-hell); border-color: var(--messing-hell); filter: none; }

.button.secondary {
  background: none;
  border-color: var(--linie-kraeftig);
  color: var(--papier-2);
  box-shadow: none;
}
.button.secondary:hover { background: rgba(240, 233, 220, .06); border-color: var(--papier-2); color: var(--papier); }

.button.danger { background: none; border-color: rgba(196, 96, 76, .5); color: #d98874; }
.button.danger:hover { background: rgba(196, 96, 76, .12); border-color: var(--verlust); }

.button[disabled] { opacity: .35; cursor: not-allowed; }
.button[disabled]:hover { background: none; }

.link-button, .panel-link, .text-button {
  color: var(--messing-hell);
  font-weight: 500;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid rgba(230, 198, 92, .3);
  border-radius: 0;
  padding: 0;
  background: none;
}
.link-button:hover, .panel-link:hover, .text-button:hover { border-bottom-color: var(--messing-hell); }

.search input, .toolbar select, dialog input, .inline-input, select {
  border-radius: var(--r-sm);
  border: 1px solid var(--linie);
  background: var(--ink-800);
  color: var(--papier);
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.search input:focus, .toolbar select:focus, dialog input:focus, select:focus {
  outline: none;
  border-color: var(--messing);
  box-shadow: none;
}
.search input::placeholder { color: var(--grau-2); }
input[type="range"] { accent-color: var(--messing); }
.toggle { background: var(--ink-500); border-radius: 2px; }
.toggle:after { border-radius: 1px; background: var(--papier-2); }

/* ---------- 10. Reiter ----------------------------------------------------
   Wie ein Register am Aktenordner: eine Linie darunter, der aktive Reiter
   hat einen Messingstrich. Keine Pillen, kein Milchglas. */
.reiter-leiste {
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  margin: 0 0 var(--s-3);
}
.reiter {
  flex: 0 1 auto;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 11px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--grau);
  background: none;
  margin-bottom: -1px;
}
.reiter:hover { background: none; color: var(--papier); }
.reiter.aktiv {
  background: none;
  color: var(--papier);
  font-weight: 600;
  border-bottom-color: var(--messing);
  box-shadow: none;
}
.reiter b {
  background: none;
  color: var(--grau-2);
  font-size: 11px;
  font-weight: 400;
  margin-left: 5px;
  padding: 0;
}
.reiter.aktiv b { background: none; color: var(--messing); }

.klapp-panel { border-radius: var(--r-md); }
.klapp-kopf { border-radius: 0; }
.klapp-kopf:hover { background: rgba(240, 233, 220, .035); }

/* ---------- 11. Kleinteile ------------------------------------------------
   Etiketten wie Stempel: eckig, klein, gesperrt. Keine bunten Pillen. */
.badge {
  border-radius: var(--r-sm);
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  background: none;
  border: 1px solid rgba(134, 169, 95, .4);
  color: var(--gewinn);
}
.badge.gold { border-color: rgba(201, 162, 39, .45); color: var(--messing-hell); background: none; }
.badge.blue { border-color: rgba(124, 147, 168, .45); color: var(--notiz); background: none; }
.badge.red { border-color: rgba(196, 96, 76, .45); color: #d98874; background: none; }

.chip {
  border-radius: var(--r-sm);
  border: 1px solid var(--linie);
  background: none;
  color: var(--grau);
  font-size: 12px;
}
.chip.active { border-color: var(--messing); color: var(--messing-hell); background: rgba(201, 162, 39, .08); }

.progress-track { height: 3px; background: var(--ink-500); border-radius: 0; box-shadow: none; }
.progress-bar { background: var(--messing); border-radius: 0; box-shadow: none; }

.mini-stat {
  border-radius: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--linie-fein);
  padding: 9px 0 0;
}
.mini-stat span {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau-2);
}
.mini-stat strong { font-size: 14px; font-weight: 500; margin-top: 3px; }
.niche-metrics { gap: 10px 18px; }

.product-glyph {
  border-radius: var(--r-sm);
  background: none;
  border: 1px solid var(--linie);
  font-size: 17px;
}
.niche-score {
  border-radius: var(--r-sm);
  background: none;
  border: 1px solid var(--linie);
  color: var(--messing);
  font-family: var(--font-mono);
}

.empty-state {
  border: 0;
  border-top: 1px solid var(--linie-fein);
  border-radius: 0;
  margin: 0;
  background: none;
  color: var(--grau-2);
  font-size: 13px;
  padding: 28px 0;
}

.rival-stats > div, .setting-row { border-color: var(--linie-fein); }
.war-row { border-color: var(--linie-fein); font-size: 12.5px; }
.recipe-chain { background: var(--ink-800); border-radius: var(--r-sm); color: var(--papier-2); }
.inventory-item, .profile-stats div {
  background: none;
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-sm);
}

.price-up, .positive { color: var(--gewinn) !important; }
.price-down { color: var(--verlust); }

/* ---------- 12. Meldungen und Dialoge ------------------------------------- */
.toast {
  border-radius: var(--r-sm);
  border: 1px solid var(--linie-kraeftig);
  border-left: 2px solid var(--messing);
  background: var(--ink-600);
  box-shadow: var(--e-3);
}
.toast strong { font-size: 13px; }
.toast span { color: var(--papier-2); }
.toast.success { border-left-color: var(--gewinn); }
.toast.error { border-left-color: var(--verlust); }

dialog {
  border-radius: var(--r-lg);
  border: 1px solid var(--linie-kraeftig);
  background: var(--ink-700);
  box-shadow: var(--e-3);
}
dialog::backdrop { background: rgba(8, 6, 4, .82); backdrop-filter: none; }
.trade-summary { background: var(--ink-800); border-radius: var(--r-sm); }

/* ---------- 13. Anmeldung -------------------------------------------------
   Der erste Eindruck: ein Titelkopf, kein Formularkasten. */
.auth-box {
  border-radius: var(--r-lg);
  border: 1px solid var(--linie);
  background: var(--ink-700);
  box-shadow: var(--e-3);
}
.auth-brand img { border-radius: var(--r-sm); box-shadow: none; }
.auth-brand strong { font-family: var(--font-serif); }
.auth-intro { color: var(--grau); font-size: 13px; }

/* ---------- 14. Übernahmeangebot und Warnungen ---------------------------- */
.angebot-alarm {
  background: var(--ink-700);
  border: 1px solid var(--messing-tief);
  border-left: 2px solid var(--messing);
  box-shadow: none;
}
.angebot-zeile { border-color: var(--linie-fein); }
.alarm-panel { background: var(--ink-700); border-color: rgba(196, 96, 76, .45); }
.warn-text { color: var(--hinweis); }

/* Wirtschaftsticker: eine Meldungsspalte, keine Kärtchenreihe */
.news-row { border-radius: 0; background: none; border-left-width: 2px; padding: 9px 12px; }
.news-row:hover { background: rgba(240, 233, 220, .035); }
.news-row strong { font-size: 12.5px; font-weight: 450; line-height: 1.5; }
.news-row small { font-family: var(--font-mono); font-size: 10px; color: var(--grau-2); }

/* ---------- 15. Diagramme ------------------------------------------------- */
.chart-line { stroke: var(--messing); stroke-width: 1.5; }
.chart-grid { stroke: var(--linie-fein); }
.chart-labels { font-size: 10px; color: var(--grau-2); }

/* ---------- 16. Bewegung --------------------------------------------------
   Bewusst keine Einblendung beim Zeichnen: der Client baut den Inhalt alle
   drei Sekunden neu auf, ein Fade würde dabei flackern. Bewegung gibt es
   nur dort, wo der Nutzer sie auslöst. */

/* ---------- 17. Telefon ---------------------------------------------------
   Gemessen an 375 px. Drei Dinge waren dort im Weg: zu kleine Tippflächen
   (34 px, der Finger trifft daneben), Eingabefelder unter 16 px (iOS zoomt
   dann die ganze Seite hinein) und fehlender Rand an den Gerätekanten. */
@media (max-width: 760px) {
  .section-heading h2 { font-size: 22px; }
  .panel, .metric-card { border-radius: var(--r-sm); }
  .data-table th { position: static; }

  .topbar {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .content {
    padding: 14px max(14px, env(safe-area-inset-right))
             calc(34px + env(safe-area-inset-bottom))
             max(14px, env(safe-area-inset-left));
  }
  .sidebar { padding-top: max(20px, env(safe-area-inset-top)); }
  .toast-region { bottom: calc(14px + env(safe-area-inset-bottom)); }

  .button, .toggle, .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-item { min-height: 44px; display: flex; align-items: center; }
  .icon-button, .mobile-menu { width: 44px; height: 44px; }
  .avatar { width: 42px; height: 42px; }
  .market-actions .button { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  .product-link { min-height: 38px; display: inline-flex; align-items: center; text-align: left; }
  .panel-link, .text-button { min-height: 32px; padding: 6px 0; }
  .row-actions { gap: 8px; }
  .row-actions .button { flex: 1 1 46%; }

  input, select, textarea { font-size: 16px !important; }

  /* Register scrollt seitlich statt umzubrechen - so bleibt es ein Register */
  .reiter-leiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .reiter-leiste::-webkit-scrollbar { display: none; }
  .reiter { min-height: 44px; flex: 0 0 auto; padding: 10px 14px; font-size: 12.5px; white-space: nowrap; }

  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
  }
  .data-table { min-width: 560px; }
  .data-table th, .data-table td { padding: 10px 11px; }

  .metric-grid { gap: 1px; }
  .metric-value { font-size: 18px; }
  .metric-card { padding: 12px 14px; }

  .angebot-zeile { flex-direction: column; align-items: stretch; }
  .angebot-zeile .row-actions { width: 100%; }
  .panel-head { flex-wrap: wrap; row-gap: 4px; }
  .such-zeile { flex-direction: column; align-items: stretch; }
  .such-zeile > * { width: 100%; }
}

/* Schublade: dunkler Schleier dahinter, damit ein Tipp daneben schließt. */
.drawer-schatten {
  position: fixed;
  inset: 0;
  z-index: 19;
  border: 0;
  padding: 0;
  background: rgba(8, 6, 4, .7);
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
body.menue-offen .drawer-schatten { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .drawer-schatten { display: none; } }

/* ---------- 18. Tablet und schmaler Laptop --------------------------------
   Der Umschaltpunkt lag bei 760 px, das Desktop-Layout braucht aber mehr:
   238 px Seitenleiste plus eine Kopfleiste mit rund 600 px Inhalt. Auf
   einem 768er Tablet blieben dem Inhalt 515 px und die Kopfleiste lief aus
   dem Bild. Bis 900 px ist die Navigation deshalb eine Schublade.
   Achtung: Media Queries messen inklusive Scrollbalken, clientWidth nicht. */
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 262px;
    transform: translateX(-102%);
    transition: transform .22s var(--ease);
    z-index: 20;
  }
  .sidebar.open { transform: none; }
  .mobile-menu { display: block; color: var(--papier-2); }
  .topbar > div:first-of-type { flex: 1; min-width: 0; margin-left: 8px; }
  .top-actions { flex: 0 1 auto; min-width: 0; }
  .date-chip { display: none; }
  .topbar h1 { font-size: 17px; }
  .content { max-width: none; }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-grid, .building-grid, .niche-grid, .world-grid,
  .rival-grid, .bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .section-heading h2 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item, .rival-card, .bank-card, .button, .data-table tbody tr,
  .drawer-schatten { transition: none !important; }
}

/* ---------- 19. Chefsache -------------------------------------------------
   Ein Vorgang, der entschieden werden will. Er bekommt einen Messingrand -
   das ist die einzige Stelle der Oberfläche, die den Spieler anspricht
   statt nur Zahlen zu zeigen. */
.chefsache {
  border: 1px solid var(--messing-tief);
  border-left: 2px solid var(--messing);
}
.chef-titel {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--papier);
}
.chef-optionen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.chef-option {
  display: block;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--linie);
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.chef-option:hover { border-color: var(--messing); background: rgba(201, 162, 39, .07); }
.chef-option strong { display: block; font-size: 13.5px; font-weight: 600; }
.chef-option small {
  display: block;
  margin-top: 5px;
  color: var(--grau);
  font-size: 12px;
  line-height: 1.5;
}

.effekt-liste { display: grid; gap: 0; }
.effekt-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie-fein);
}
.effekt-zeile:last-child { border-bottom: 0; }
.effekt-zeile strong { font-size: 13px; }
.effekt-zeile small {
  display: block;
  margin-top: 3px;
  color: var(--grau);
  font-size: 11.5px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .chef-optionen { grid-template-columns: 1fr; }
  .chef-option { min-height: 60px; }
}

/* ---------- 20. Weltkarte -------------------------------------------------
   Eine gestochene Seekarte. Alte Karten sind Druckgrafik - damit passt das
   Bild zur Haltung des Spiels, ohne dass eine Landkarte aufgeklebt wirkt.
   Wasser bekommt die klassische Liniengravur, die Kueste einen Saum aus
   drei Schichten, das Land Hachuren fuer Gebirge und Reihen fuer Acker. */
/* Der viewBox ist quadratisch - der Rahmen muss es auch sein, sonst
   bleiben links und rechts nackte Streifen und die Karte schwimmt in der
   Mitte. Das war der eigentliche Schoenheitsfehler. */
.weltkarte {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 720px;
  margin: 0 auto;
  display: block;
  background: #0c1418;
  border-radius: var(--r-sm);
}

.see { fill: #0c1418; }
.wasser-linie { stroke: rgba(160, 190, 200, .09); stroke-width: .28; }

/* Kuestensaum: aussen breit und blass, innen schmal und deutlich */
.saum { fill: none; stroke: rgba(150, 185, 195, .16); }
.saum-3 { stroke-width: 5.5; opacity: .3; }
.saum-2 { stroke-width: 3.2; opacity: .45; }
.saum-1 { stroke-width: 1.4; opacity: .6; }

.land { fill: #1d1913; }
.kueste { fill: none; stroke: var(--messing); stroke-width: .5; opacity: .75; }

.karte-berg { fill: none; stroke: var(--papier-2); stroke-width: .4; opacity: .5; }
.karte-wald { fill: none; stroke: var(--gewinn); stroke-width: .32; opacity: .45; }
.karte-feld line { stroke: var(--papier-2); stroke-width: .22; opacity: .3; }
.karte-fluss {
  fill: none;
  stroke: rgba(150, 185, 195, .45);
  stroke-width: .55;
  stroke-linecap: round;
}

.karte-weg {
  stroke: var(--messing);
  stroke-width: .3;
  stroke-dasharray: 1.2 1.8;
  opacity: .35;
}

.karte-ort { cursor: pointer; }
.karte-griff { fill: transparent; }
.karte-marke {
  stroke: var(--ink-900);
  stroke-width: .35;
  transition: opacity .14s var(--ease);
}
.karte-marke.dichte-ruhig { fill: var(--notiz); }
.karte-marke.dichte-mittel { fill: var(--hinweis); }
.karte-marke.dichte-hart { fill: var(--verlust); }
.karte-kern { fill: var(--ink-900); opacity: .55; }
.karte-filiale { fill: var(--ink-900); }
.karte-praesenz { fill: none; stroke: var(--messing); }
.karte-ort:hover .karte-marke { opacity: .85; }
.karte-ort.gewaehlt .karte-marke { stroke: var(--messing); stroke-width: .7; }
.karte-ort.gewaehlt .karte-name { fill: var(--papier); font-weight: 600; }

.karte-name {
  fill: var(--papier-2);
  font-family: var(--font-sans);
  font-size: 3px;
  letter-spacing: .04em;
  text-anchor: middle;
  pointer-events: none;
}
.karte-wert {
  fill: var(--messing);
  font-family: var(--font-mono);
  font-size: 2.5px;
  text-anchor: middle;
  pointer-events: none;
}

/* Kompassrose: das Zeichen, das ein Bild erst zur Karte macht */
.kompass-ring { fill: none; stroke: var(--messing); stroke-width: .25; opacity: .5; }
.kompass-nadel { fill: var(--messing); opacity: .65; }
.kompass-quer { fill: var(--papier-2); opacity: .3; }
.kompass-n {
  fill: var(--messing);
  font-family: var(--font-serif);
  font-size: 3.2px;
  text-anchor: middle;
  opacity: .8;
}

.karte-rahmen {
  fill: none;
  stroke: var(--messing);
  stroke-width: .35;
  opacity: .35;
}

.karte-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--grau);
}
.karte-legende span { display: flex; align-items: center; gap: 6px; }
.karte-legende .punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.karte-legende .punkt.ruhig { background: var(--notiz); }
.karte-legende .punkt.mittel { background: var(--hinweis); }
.karte-legende .punkt.hart { background: var(--verlust); }
.karte-legende .ring {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--messing); display: inline-block;
}
.karte-legende .quadrat {
  width: 8px; height: 8px; display: inline-block;
  background: var(--papier-2);
}

/* Kompasslinien, wie sie alte Seekarten ueber das ganze Blatt ziehen */
.rhumb { stroke: var(--messing); stroke-width: .12; opacity: .17; }

/* Tiefenangaben im Wasser */
.lotung {
  fill: rgba(160, 190, 200, .38);
  font-family: var(--font-mono);
  font-size: 2px;
  text-anchor: middle;
}

.gradstrich { stroke: var(--messing); stroke-width: .22; opacity: .5; }
.karte-rahmen.innen { opacity: .18; }

/* Titelfeld unten rechts */
.kartouche-feld {
  fill: #14100c;
  stroke: var(--messing);
  stroke-width: .3;
  opacity: .92;
}
.kartouche-titel {
  fill: var(--messing);
  font-family: var(--font-serif);
  font-size: 3.1px;
  letter-spacing: .12em;
  text-anchor: middle;
}
.kartouche-zeile {
  fill: var(--grau);
  font-family: var(--font-sans);
  font-size: 2.1px;
  letter-spacing: .05em;
  text-anchor: middle;
}

@media (max-width: 760px) {
  .weltkarte { aspect-ratio: 1 / 1; }
  .karte-name { font-size: 3.6px; }
  .karte-wert { font-size: 3px; }
  .karte-griff { r: 9; }
}

/* ---------- 21. Widersacher -----------------------------------------------
   Die einzige Flaeche im Spiel, die in der Verlustfarbe gerahmt ist. Wer
   sie sieht, soll wissen: hier greift jemand an. */
.widersacher-panel {
  border: 1px solid rgba(196, 96, 76, .55);
  border-left: 2px solid var(--verlust);
}
.widersacher-panel .panel-head h2 { color: #d98874; }
.widersacher-panel .progress-bar { background: var(--gewinn); }
.widersacher-panel .progress-track { background: var(--verlust); }

/* ---------- 22. Was ist neu -----------------------------------------------
   Einmalige Meldung nach einem Update. Messingrahmen wie bei der Chefsache,
   aber ohne Dringlichkeit - es ist eine Mitteilung, keine Aufgabe. */
.neuerung-panel {
  border: 1px solid var(--messing-tief);
  border-left: 2px solid var(--messing);
}
.neuerung-liste {
  margin: 6px 0 14px;
  padding-left: 18px;
  color: var(--papier-2);
  font-size: 13px;
  line-height: 1.65;
}
.neuerung-liste li { margin-bottom: 4px; }
.neuerung-liste li::marker { color: var(--messing); }
.neuerung-eintrag {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--linie-fein);
}
.neuerung-eintrag:last-child { border-bottom: 0; margin-bottom: 0; }
.neuerung-eintrag h4 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
}

/* ---------- 23. Einführung ------------------------------------------------
   Die einzige Fläche, die vor allem anderen steht. Fortschrittsleiste aus
   fünf Strichen: man sieht auf einen Blick, dass es endlich ist. */
.einfuehrung-panel {
  border: 1px solid var(--messing);
  border-left: 2px solid var(--messing);
}
.einfuehrung-leiste {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.einfuehrung-leiste i {
  flex: 1;
  height: 3px;
  background: var(--ink-500);
  border-radius: 1px;
}
.einfuehrung-leiste i.fertig { background: var(--gewinn); }
.einfuehrung-leiste i.jetzt { background: var(--messing); }

.einfuehrung-auftrag {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--ink-800);
  border-left: 2px solid var(--messing);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--papier);
}

.kette {
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--papier-2);
  font-size: 13.5px;
  line-height: 1.7;
}
.kette li { margin-bottom: 14px; }
.kette li::marker { color: var(--messing); font-family: var(--font-mono); }
.kette strong { display: block; color: var(--papier); margin-bottom: 3px; }

/* ---------- 24. Lieferverträge --------------------------------------------
   Der Fortschrittsbalken ist die wichtigste Angabe der Zeile: ob man es
   schafft, sieht man daran schneller als an zwei Zahlen nebeneinander. */
.vertrag-fortschritt {
  height: 4px;
  background: var(--ink-500);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 4px;
  min-width: 70px;
}
.vertrag-fortschritt div { height: 100%; background: var(--messing); }
.data-table td small { display: block; font-size: 11px; margin-top: 2px; }

/* ---------- 25. Rückkehrbericht -------------------------------------------
   Steht vor allem anderen. Die Bilanzfelder zeigen den Wert von heute gross
   und darunter, woher er kam - der Vergleich ist die eigentliche Aussage. */
.rueckkehr-panel {
  border: 1px solid var(--messing-tief);
  border-left: 2px solid var(--messing);
}
.rueckkehr-panel .mini-stat small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -.01em;
}

/* Muss zuletzt stehen: ausgeblendet heißt ausgeblendet. */
[hidden] { display: none !important; }

/* ============================================================
   Organigramm
   ------------------------------------------------------------
   Ein Schaubild, das etwas bedeutet: die Kette, die ein Problem
   hochlaeuft, bevor es beim Inhaber landet. Deshalb sind die
   Verbindungslinien keine Zierde - sie sind die Aussage. Und
   eine leere Karte ist die wichtigste Information ueberhaupt.
   ============================================================ */
.org { padding: 4px 0 8px; }

.org-spitze { display: flex; justify-content: center; }

/* Das Lot vom Inhaber zur Geschaeftsfuehrung */
.org-lot {
  width: 0; height: 20px; margin: 0 auto;
  border-left: 1px solid var(--linie-kraeftig);
}

/* Die Reihe der Ressorts haengt an einer Sammelschiene. Sie laeuft von
   der Mitte der ersten bis zur Mitte der letzten Spalte - bei vier
   gleich breiten Spalten also von 12,5 % bis 87,5 %. */
.org-reihe {
  display: flex; gap: 0; position: relative;
  padding-top: 42px; margin-top: 0;
}
.org-reihe::before {
  content: ""; position: absolute; top: 21px; left: 12.5%; right: 12.5%;
  border-top: 1px solid var(--linie-kraeftig);
}
.org-reihe::after {
  content: ""; position: absolute; top: 0; left: 50%; height: 21px;
  border-left: 1px solid var(--linie-kraeftig);
}
.org-ast { flex: 1 1 0; min-width: 0; position: relative; padding: 0 5px; }
.org-ast::before {
  content: ""; position: absolute; top: -21px; left: 50%; height: 21px;
  border-left: 1px solid var(--linie-kraeftig);
}

/* Die Fachkraefte haengen an ihrem Ressort */
.org-leute { position: relative; padding-top: 16px; }
.org-leute::before {
  content: ""; position: absolute; top: 0; left: 50%; height: 16px;
  border-left: 1px solid var(--linie);
}
.org-leute .org-karte { margin-bottom: 6px; }

.org-karte {
  border: 1px solid var(--linie); background: var(--ink-700);
  padding: 8px 10px; text-align: center;
  display: block; min-width: 0;
}
.org-karte strong {
  display: block; font-size: 13px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-karte small {
  display: block; color: var(--grau); font-size: 11px; line-height: 1.3;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-karte.inhaber {
  border-color: var(--messing); background: var(--ink-600);
  min-width: 210px;
}
.org-karte.inhaber strong { color: var(--messing-hell); }
.org-karte.ceo { border-color: var(--linie-kraeftig); min-width: 210px; }
.org-karte.kraft { background: var(--ink-800); }

/* Eine unbesetzte Stelle: gestrichelt, damit man die Luecke sieht,
   ohne dass sie wie ein Fehler aussieht. */
.org-karte.leer {
  border-style: dashed; background: transparent; color: var(--grau-2);
}
.org-karte.leer strong { color: var(--grau); font-weight: 500; }
.org-karte.leer.klein { padding: 6px 8px; }

/* Zufriedenheit als schmaler Balken - eine Zahl waere hier zu laut */
.org-laune {
  display: block; height: 2px; margin-top: 6px;
  background: var(--linie-fein);
}
.org-laune i { display: block; height: 2px; background: var(--grau-2); }
.org-laune.gut i { background: var(--gewinn); }
.org-laune.mittel i { background: var(--hinweis); }
.org-laune.schwach i { background: var(--verlust); }

.org-zahl {
  display: block; margin-top: 5px; font-style: normal;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--messing);
}

/* Das Protokoll dessen, was einem abgenommen wurde */
.org-protokoll { list-style: none; margin: 0; padding: 0; }
.org-protokoll li {
  padding: 9px 0; border-bottom: 1px solid var(--linie-fein); font-size: 13px;
}
.org-protokoll li:last-child { border-bottom: 0; }
.org-tag {
  display: inline-block; min-width: 82px; color: var(--grau);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.org-was { color: var(--papier-2); font-size: 12px; }

/* Auf dem Telefon wird aus dem Baum eine Liste. Vier Spalten
   nebeneinander waeren dort nicht mehr lesbar, und ein Schaubild,
   das man nicht lesen kann, ist schlimmer als keines. */
@media (max-width: 720px) {
  .org-reihe { flex-direction: column; gap: 14px; padding-top: 20px; }
  .org-reihe::before { display: none; }
  .org-reihe::after { height: 20px; }
  .org-ast { padding: 0; }
  .org-ast::before { display: none; }
  .org-leute { padding-top: 10px; padding-left: 18px; }
  .org-leute::before { left: 8px; height: 100%; top: 0; }
  .org-karte { text-align: left; }
  .org-karte.inhaber, .org-karte.ceo { min-width: 0; width: 100%; }
  .org-laune { max-width: 140px; }
}

/* --- Jahreszeittafel im Markt ---------------------------------------- */
.jz-liste { list-style:none; margin:0; padding:0; }
.jz-zeile {
  display:grid; grid-template-columns:132px 1fr 62px 150px;
  align-items:center; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--linie-fein); font-size:13px;
}
.jz-zeile:last-child { border-bottom:0; }
.jz-branche { color:var(--papier); }
.jz-balken { height:3px; background:var(--linie-fein); display:block; }
.jz-balken i { display:block; height:3px; background:var(--grau-2); }
.jz-balken.gut i { background:var(--gewinn); }
.jz-balken.schwach i { background:var(--verlust); }
.jz-wert {
  text-align:right; font-variant-numeric:tabular-nums;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; color:var(--grau);
}
.jz-wert.gut { color:var(--gewinn); }
.jz-wert.schwach { color:var(--verlust); }
.jz-aussicht { font-size:11px; }

/* Die Jahreszeit in der Kopfzeile */
#jahreszeitChip span { font-size:15px; }

@media (max-width:720px) {
  .jz-zeile { grid-template-columns:104px 1fr 54px; }
  .jz-aussicht { display:none; }
}

/* ============================================================
   Das Bezirksblatt
   ------------------------------------------------------------
   Hier darf die Zeitungsanmutung, die das ganze Spiel traegt,
   einmal woertlich werden: Kopfleiste, Schlagzeile, Spalten.
   Nirgends sonst im Spiel steht eine so grosse Ueberschrift -
   das ist der Punkt, sie soll sich wie eine Titelseite anfuehlen.
   ============================================================ */
.blatt { overflow: hidden; }

.blatt-kopf {
  padding: 18px 20px 14px;
  border-bottom: 3px double var(--linie-kraeftig);
  background: var(--ink-800);
}
.blatt-titel {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(24px, 4.5vw, 38px); font-weight: 600;
  letter-spacing: .04em; text-align: center; color: var(--papier);
  text-transform: uppercase;
}
.blatt-zeile {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 6px 20px; margin-top: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--grau);
}
.blatt-zeile span { white-space: nowrap; }

.blatt-schlagzeile {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(21px, 3.6vw, 31px); font-weight: 600; line-height: 1.18;
  margin: 6px 0 20px; text-wrap: balance; text-align: center;
  color: var(--papier); letter-spacing: -.01em;
}

/* Zwei Spalten wie im Satzspiegel - der Text ist kurz genug dafuer */
.blatt-spalten { columns: 2; column-gap: 30px; column-rule: 1px solid var(--linie-fein); }
.blatt-meldung { break-inside: avoid; margin: 0 0 15px; }
.blatt-rubrik {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--messing); margin-bottom: 3px;
}
.blatt-meldung p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--papier-2); }

.blatt-tafel .num { text-align: right; font-variant-numeric: tabular-nums; }
.blatt-ich { background: rgba(201, 162, 39, .07); }
.blatt-ich strong { color: var(--messing-hell); }

.blatt-blaettern {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--linie);
}

/* Der Punkt an der Navigation, solange eine Ausgabe ungelesen ist */
.nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--messing); margin-left: auto; flex: 0 0 auto;
}

@media (max-width: 720px) {
  /* Zwei Spalten auf 375 Pixeln waeren vier Woerter breit. */
  .blatt-spalten { columns: 1; }
  .blatt-schlagzeile { text-align: left; }
  .blatt-titel { letter-spacing: .02em; }
  .blatt-blaettern { flex-wrap: wrap; }
}