/* Soulbound · WoE — Aussehen.
   =====================================================================
   Eine Gaming-Seite bei Nacht, in den Farben der Seelenflamme: Nachtblau,
   Stahlblau, Eisblau und das Cyan ihres Kerns. Hinter allem steht ein Bild aus Splittern
   (hintergrund.svg); davor liegt in der Mitte die Bühne, eine dunkle Spalte
   mit Kopfleiste, Inhalt und Fuß. Jede Seite beginnt mit einem Kopfband
   über die volle Bühnenbreite (kopfbild.svg), die Burgenseite mit einem
   großen Bühnenbild samt Seelenflamme. Tafeln sind flach und dunkel, die
   Überschriften fett und schmal. Das Erkennungszeichen ist die Schräge:
   der gewählte Menüpunkt, der Hauptknopf, die Kennzahlen und die Marke
   vor jeder Überschrift sind Parallelogramme.

   Die zwei Bilder baut werkzeug/bilder-bauen.js.

   Cyan (--akzent) ist die Farbe der Bedienung: Hauptknopf, gewählter
   Reiter, Auswahl, Fokus. Das Soulbound-Blau (--unser, #4f8dff) steht nur
   für das, was der Gilde gehört: unsere Burgen, unsere Zeilen, Gewinne.

   Beide Farben haben zwei Rollen: als Fläche und als Schrift. Als Schrift
   müssen sie im Dunkeln heller und im Hellen dunkler sein als die Fläche —
   darum gibt es --akzent-text und --unser-text getrennt.

   Dunkel ist der Normalfall — gespielt wird abends. Farben stehen als Token
   in :root und werden für Hell zweimal gesetzt: für die Systemeinstellung
   und für die Wahl im Menü.

   Aufbau der Datei: Token · Grundelemente · Bausteine · Kopf und Fuß ·
   Burgen · Statistik · Planer und Ausrüstung · Bibliothek · Verwaltung ·
   Live-Modus · schmale Bildschirme. */

@font-face {
  font-family: "Jakarta";
  src: url("fonts/jakarta-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */

:root {
  color-scheme: dark;
  --grund: #080d18;
  --flaeche: #101a2c;
  --flaeche-2: #16233a;
  --flaeche-3: #1f3150;
  --rand: rgba(150, 200, 255, 0.12);
  --rand-stark: rgba(150, 200, 255, 0.28);
  --fenster: rgba(150, 200, 255, 0.12);
  --text: #ffffff;
  --text-2: #c3d3e6;
  --text-3: #8a9db5;
  --akzent: #1fd2ee;
  --akzent-text: #6fe6ff;
  --akzent-matt: rgba(31, 210, 238, 0.14);
  --akzent-linie: rgba(31, 210, 238, 0.6);
  --auf-akzent: #04202b;
  --gold: #6fe6ff;
  --unser: #4f8dff;
  --unser-text: #8fb8ff;
  --unser-matt: rgba(79, 141, 255, 0.16);
  --unser-linie: rgba(79, 141, 255, 0.65);
  --auf-unser: #04112b;
  /* Der Kopf einer Tafel: nur ein Hauch heller als die Tafel selbst. */
  --titel-a: rgba(255, 255, 255, 0.04);
  --titel-b: rgba(255, 255, 255, 0.04);
  --titel-rand: rgba(150, 200, 255, 0.12);
  --titel-text: #ffffff;
  --knopf-a: rgba(255, 255, 255, 0.07);
  --knopf-b: rgba(255, 255, 255, 0.07);
  --kante: transparent;
  --fall: transparent;
  /* Die zwei Farbschleier hinter der Seite. */
  --schleier-1: rgba(51, 102, 153, 0.5);
  --schleier-2: rgba(34, 34, 85, 0.7);
  --bild: url("hintergrund.svg");
  --buehne: rgba(8, 13, 24, 0.93);
  --slot: #16233a;
  --slot-rand: rgba(150, 200, 255, 0.2);
  --karte: #0c1422;
  --karte-punkt: rgba(150, 200, 255, 0.07);
  --hoehe: rgba(150, 200, 255, 0.08);
  --weg: rgba(150, 200, 255, 0.22);
  --gut: #5fd68a;
  --gut-matt: rgba(95, 214, 138, 0.13);
  --schlecht: #ff7468;
  --schlecht-matt: rgba(255, 116, 104, 0.14);
  --warn: #f0c12b;
  --warn-matt: rgba(240, 193, 43, 0.13);
  --auf-siegel: #ffffff;
  --schatten: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 60px -18px rgba(0, 0, 0, 0.8);

  --sans: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Überschriften: fett und schmal. Bahnschrift bringt Windows mit, DIN Alternate Apple; sonst Jakarta. */
  --kopfschrift: "Bahnschrift", "DIN Alternate", "Jakarta", system-ui, sans-serif;
  /* Zahlen stehen in der Grundschrift (mit gleich breiten Ziffern); Festbreite nur für Code. */
  --mono: var(--sans);
  --code: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --schraeg: -12deg;
  --r: 2px;
  --r-klein: 2px;
  --r-rund: 999px;
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px;
  --s-xs: 11px; --s-s: 12.5px; --s-m: 14px; --s-l: 16px; --s-xl: 20px; --s-xxl: 32px;
  --kopfhoehe: 50px;
  --breite: 1240px;
  /* Der Rand der Bühne links und rechts; Kopfbänder ragen genau so weit hinaus. */
  --pad: 28px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --grund: #edf3f9; --flaeche: #ffffff; --flaeche-2: #f1f6fb; --flaeche-3: #dde8f3;
    --rand: rgba(20, 45, 80, 0.13); --rand-stark: rgba(20, 45, 80, 0.3); --fenster: rgba(20, 45, 80, 0.13);
    --text: #0f1b2b; --text-2: #45566b; --text-3: #5e6f84;
    --akzent: #19b8d6; --akzent-text: #0a6f86; --akzent-matt: rgba(25, 184, 214, 0.13); --akzent-linie: rgba(10, 111, 134, 0.6);
    --auf-akzent: #04202b; --gold: #0a6f86;
    --unser: #2a62c8; --unser-text: #1d4fb0; --unser-matt: rgba(42, 98, 200, 0.1); --unser-linie: rgba(42, 98, 200, 0.55); --auf-unser: #ffffff;
    --titel-a: rgba(20, 45, 80, 0.04); --titel-b: rgba(20, 45, 80, 0.04); --titel-rand: rgba(20, 45, 80, 0.13); --titel-text: #0f1b2b;
    --knopf-a: #ffffff; --knopf-b: #ffffff;
    --schleier-1: rgba(85, 153, 204, 0.22); --schleier-2: rgba(102, 153, 238, 0.16); --bild: none; --buehne: rgba(250, 252, 254, 0.95);
    --slot: #f1f6fb; --slot-rand: rgba(20, 45, 80, 0.2);
    --karte: #e3ecf5; --karte-punkt: rgba(20, 45, 80, 0.1); --hoehe: rgba(20, 45, 80, 0.09); --weg: rgba(20, 45, 80, 0.26);
    --gut: #17703f; --gut-matt: rgba(23, 112, 63, 0.11); --schlecht: #c0322b; --schlecht-matt: rgba(192, 50, 43, 0.1);
    --warn: #7d5a00; --warn-matt: rgba(125, 90, 0, 0.13);
    --schatten: 0 0 0 1px rgba(20, 45, 80, 0.08), 0 20px 50px -20px rgba(20, 45, 80, 0.45);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --grund: #edf3f9; --flaeche: #ffffff; --flaeche-2: #f1f6fb; --flaeche-3: #dde8f3;
  --rand: rgba(20, 45, 80, 0.13); --rand-stark: rgba(20, 45, 80, 0.3); --fenster: rgba(20, 45, 80, 0.13);
  --text: #0f1b2b; --text-2: #45566b; --text-3: #5e6f84;
  --akzent: #19b8d6; --akzent-text: #0a6f86; --akzent-matt: rgba(25, 184, 214, 0.13); --akzent-linie: rgba(10, 111, 134, 0.6);
  --auf-akzent: #04202b; --gold: #0a6f86;
  --unser: #2a62c8; --unser-text: #1d4fb0; --unser-matt: rgba(42, 98, 200, 0.1); --unser-linie: rgba(42, 98, 200, 0.55); --auf-unser: #ffffff;
  --titel-a: rgba(20, 45, 80, 0.04); --titel-b: rgba(20, 45, 80, 0.04); --titel-rand: rgba(20, 45, 80, 0.13); --titel-text: #0f1b2b;
  --knopf-a: #ffffff; --knopf-b: #ffffff;
  --schleier-1: rgba(85, 153, 204, 0.22); --schleier-2: rgba(102, 153, 238, 0.16); --bild: none; --buehne: rgba(250, 252, 254, 0.95);
  --slot: #f1f6fb; --slot-rand: rgba(20, 45, 80, 0.2);
  --karte: #e3ecf5; --karte-punkt: rgba(20, 45, 80, 0.1); --hoehe: rgba(20, 45, 80, 0.09); --weg: rgba(20, 45, 80, 0.26);
  --gut: #17703f; --gut-matt: rgba(23, 112, 63, 0.11); --schlecht: #c0322b; --schlecht-matt: rgba(192, 50, 43, 0.1);
  --warn: #7d5a00; --warn-matt: rgba(125, 90, 0, 0.13);
  --schatten: 0 0 0 1px rgba(20, 45, 80, 0.08), 0 20px 50px -20px rgba(20, 45, 80, 0.45);
}

/* ---------- Grundelemente ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 12% -6%, var(--schleier-1), transparent 70%),
    radial-gradient(900px 640px at 96% 8%, var(--schleier-2), transparent 70%),
    var(--bild) center / cover,
    var(--grund);
  background-attachment: fixed;
  color: var(--text);
  font: var(--s-m)/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  -webkit-font-smoothing: antialiased;
}
/* Die Bühne: Kopf, Inhalt und Fuß teilen sich eine Spalte in der Mitte. */
.kopf, main, .fuss { width: min(var(--breite), 100%); background: var(--buehne); }
main { flex: 1; padding: 0 var(--pad) 72px; outline: none; }
main > :first-child:not(.seitenkopf, .lage) { margin-top: var(--a5); }
main > div:has(> .seitenkopf:first-child) { margin-top: 0; }
a { color: var(--akzent-text); text-underline-offset: 3px; }
h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font: 700 clamp(32px, 5vw, 54px)/1 var(--kopfschrift); font-stretch: 85%; text-transform: uppercase; }
/* h2 trägt eine schräge Marke davor. */
h2 {
  display: flex; align-items: center; gap: var(--a2);
  font-size: var(--s-m); color: var(--text); margin-bottom: var(--a3);
}
h2::before { content: ""; flex: none; width: 5px; height: 15px; transform: skewX(var(--schraeg)); background: var(--akzent); }
h3 { font-size: var(--s-m); margin: var(--a4) 0 var(--a2); }
code, .mono { font-family: var(--code); font-size: 0.9em; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* main bekommt nach jedem Seitenwechsel den Fokus (für Vorleser) — ohne Rahmen. */
main:focus-visible { outline: none; }

.leise { color: var(--text-2); }
.klein { font-size: var(--s-s); }
.fehler { color: var(--schlecht); }
.mitte { text-align: center; }
.sieg { color: var(--gut); font-weight: 800; }
.niederlage { color: var(--schlecht); font-weight: 800; }
.hinweis { color: var(--text-3); font-size: var(--s-s); margin: var(--a3) 0 0; }
.hinweis.band {
  color: var(--text); background: var(--akzent-matt); border: 1px solid var(--akzent-linie); border-left-width: 3px;
  padding: var(--a2) var(--a3); border-radius: var(--r-klein); font-size: var(--s-m); margin: 0 0 var(--a3);
}

.sprungmarke { position: absolute; left: -999px; }
.sprungmarke:focus { left: 12px; top: 12px; z-index: 10; background: var(--flaeche); padding: 8px 12px; border-radius: var(--r); }

/* ---------- Bausteine: Knöpfe und Felder ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 var(--s-m) var(--sans); color: var(--text); text-decoration: none;
  background: var(--knopf-a); border: 1px solid var(--rand-stark); border-radius: var(--r-klein);
  padding: 7px 14px; cursor: pointer; min-height: 36px;
  transition: border-color .15s, filter .15s, transform .1s;
}
.knopf:hover { border-color: var(--akzent-linie); filter: brightness(1.06); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: 0.4; cursor: not-allowed; }
/* Der Hauptknopf ist ein Parallelogramm. Die Schräge liegt auf ::before, damit der Fokusrahmen ganz bleibt. */
.knopf.haupt { position: relative; isolation: isolate; background: none; border-color: transparent; color: var(--auf-akzent); padding-left: 18px; padding-right: 18px; }
.knopf.haupt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--akzent); transform: skewX(var(--schraeg)); }
.knopf.haupt.rund::before { transform: none; }
.knopf.haupt:hover { filter: brightness(1.1); }
.knopf.leise { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.knopf.leise:hover { background: var(--flaeche-2); color: var(--text); border-color: var(--rand); }
.knopf.gefahr { color: var(--schlecht); }
.knopf.an { color: var(--akzent-text); border-color: var(--akzent-linie); background: var(--akzent-matt); }
.knopf.klein { min-height: 30px; padding: 4px 10px; font-size: var(--s-s); }
.knopf.rund { width: 34px; min-height: 34px; padding: 0; }
.knopf.breit { width: 100%; min-height: 42px; }

input, select, textarea {
  font: var(--s-m) var(--sans); color: var(--text); background: var(--flaeche-2);
  border: 1px solid var(--rand-stark); border-radius: var(--r-klein); padding: 7px 10px; min-height: 38px;
  width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-matt); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { resize: vertical; line-height: 1.5; }
input[type="checkbox"] { width: auto; min-height: 0; }
input[type="color"] { width: 42px; padding: 3px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > span { font-size: var(--s-xs); font-weight: 700; color: var(--text-3); }
.feld.breit { margin-bottom: var(--a4); }
.feld.klein input { min-height: 34px; padding: 5px 8px; }
.zeile { display: flex; gap: var(--a2); align-items: center; }
.zeile.umbruch { flex-wrap: wrap; align-items: end; }
.zeile.umbruch .feld { flex: 1 1 140px; }
.haken { display: flex; align-items: center; gap: 10px; font-size: var(--s-m); cursor: pointer; }
.haken input { width: 18px; height: 18px; accent-color: var(--akzent); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative;
  border: 1px solid var(--rand-stark); border-radius: var(--r-klein); padding: 4px 11px;
  font: 700 var(--s-s) var(--sans); color: var(--text-2); background: transparent; transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { color: var(--text); border-color: var(--text-3); }
.chip.an, .chip:has(input:checked) { background: var(--akzent-matt); border-color: var(--akzent-linie); color: var(--akzent-text); }
.chip.klein { padding: 1px 8px; font-size: var(--s-xs); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.chip.food { cursor: default; padding: 2px 4px 2px 11px; }
.chip.food select { width: auto; min-height: 28px; padding: 2px 6px; font-size: var(--s-s); }
.chip.angreifer { border-color: color-mix(in srgb, var(--gilde) 55%, transparent); color: var(--text); cursor: default; }
.chip.angreifer small { color: var(--text-3); }

/* Zwei bis vier Möglichkeiten nebeneinander: Sprache, Farbschema, Zeitraum. */
.umschalter { display: inline-flex; padding: 2px; gap: 2px; background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--r-klein); }
.umschalter button {
  border: 0; background: transparent; color: var(--text-3); font: 700 var(--s-xs) var(--sans);
  padding: 4px 9px; cursor: pointer; border-radius: 2px;
}
.umschalter button:hover { color: var(--text); }
.umschalter button.an { background: var(--akzent); color: var(--auf-akzent); }

/* ---------- Bausteine: Tafel, Kennzahl, Reiter ---------- */

/* Kopfband und Bühnenbild sind Bilder: Sie bleiben auch im hellen Modus dunkel
   und bringen dafür ihre eigenen Farben mit. */
.seitenkopf, .buehnenbild {
  --text: #ffffff; --text-2: #d6e4f2; --text-3: #a9bdd3; --akzent-text: #8feaff;
  --rand-stark: rgba(255, 255, 255, 0.55); --knopf-a: rgba(4, 8, 16, 0.35);
  color: var(--text); margin: 0 calc(-1 * var(--pad)); overflow: hidden;
}
.seitenkopf {
  margin-bottom: var(--a5); padding: 46px clamp(20px, 5vw, 64px) 38px;
  background:
    linear-gradient(90deg, rgba(8, 13, 24, 0.9) 20%, rgba(8, 13, 24, 0.25)),
    url("kopfbild.svg") center / cover,
    linear-gradient(120deg, #14365f, #0a1222);
}
.seitenkopf h1, .buehnenbild h1 { text-shadow: 0 2px 18px rgba(4, 8, 16, 0.6); }
.dachzeile { margin: 0 0 4px; font-size: var(--s-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--akzent-text); }
.einleitung { color: var(--text-2); font-size: var(--s-l); margin: var(--a2) 0 0; max-width: 640px; }
.zurueck { display: inline-flex; margin-bottom: var(--a4); font-weight: 700; font-size: var(--s-s); text-decoration: none; color: var(--text-2); }
.zurueck:hover { color: var(--text); }
.abschnittskopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--a4); flex-wrap: wrap;
  margin: 44px 0 var(--a4);
}
.abschnittskopf h2 { margin: 0; font: 700 30px var(--kopfschrift); font-stretch: 85%; }
.abschnittskopf p { margin: 0; font-size: var(--s-s); }
.abschnittskopf.erster { margin-top: 0; }

/* Die Tafel: eine flache dunkle Fläche. Beginnt sie mit einer Überschrift,
   wird die zur Kopfzeile; --tp-y/--tp-x sind der Innenabstand, damit die
   Leiste bis an den Rahmen reicht. */
.tafel {
  --tp-y: var(--a4); --tp-x: 18px;
  background: var(--flaeche); border: 1px solid var(--fenster); border-radius: var(--r);
  padding: var(--tp-y) var(--tp-x);
}
.tafel > h2:first-child, .tafel > .tafelkopf:first-child {
  margin: calc(-1 * var(--tp-y)) calc(-1 * var(--tp-x)) var(--a3); padding: 10px 16px;
  background: var(--titel-a); border-bottom: 1px solid var(--titel-rand);
}
.tafel > h2:first-child, .tafel > .tafelkopf:first-child h2 { font: 700 18px var(--kopfschrift); font-stretch: 85%; color: var(--titel-text); }

/* Was uns betrifft, bekommt einen blauen Rahmen und einen blauen Hauch — empfohlene Builds einen in Cyan. */
.tafel.unsere, .besitzer.unsere, .abend.mitburg {
  border-color: var(--unser);
  background: linear-gradient(180deg, var(--unser-matt), transparent 140px), var(--flaeche);
}
.buildkarte.empfohlen { border-color: var(--akzent); background: linear-gradient(180deg, var(--akzent-matt), transparent 140px), var(--flaeche); }
.tafelkopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a3); flex-wrap: wrap; margin-bottom: var(--a3); }
.tafelkopf h2 { margin: 0; }
.tafelkopf .umschalter { flex: none; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a4); margin-top: var(--a5); }
.tabellenrahmen { --tp-y: 0px; --tp-x: 0px; padding: 0; overflow-x: auto; }

/* Kennzahlen: ein Etikett, eine große Zahl, darunter das Kleingedruckte.
   Mehrere stehen als Reihe schräger Felder nebeneinander; die Schräge liegt
   auf ::before, damit die Schrift gerade bleibt. */
.kennzahlen {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px;
  margin-inline: 12px;
}
.kennzahl { display: grid; gap: 2px; align-content: start; justify-items: center; text-align: center; padding: 18px 22px; position: relative; isolation: isolate; min-width: 0; }
.kennzahl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--flaeche); border: 1px solid var(--rand); transform: skewX(-8deg); }
.kennzahl-etikett { display: flex; align-items: center; gap: 6px; font-size: var(--s-xs); font-weight: 800; color: var(--text-3); }
.kennzahl-wert { max-width: 100%; font: 700 30px/1.15 var(--kopfschrift); font-stretch: 85%; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kennzahl-unter { max-width: 100%; font-size: var(--s-s); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kennzahl.akzent .kennzahl-wert { color: var(--unser-text); }
.kennzahl.gut .kennzahl-wert { color: var(--gut); }
.kennzahl.schlecht .kennzahl-wert, .kennzahl.schlecht .kennzahl-unter { color: var(--schlecht); }
.kennzahl.warn .kennzahl-wert { color: var(--warn); }
.kennzahl.live::before { background: linear-gradient(180deg, var(--schlecht-matt), transparent), var(--flaeche); }
.kennzahl.live .kennzahl-etikett { color: var(--schlecht); }
.kennzahl.live .kennzahl-etikett::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--schlecht);
  box-shadow: 0 0 0 4px var(--schlecht-matt); animation: puls 1.6s ease-in-out infinite;
}
@keyframes puls { 50% { box-shadow: 0 0 0 9px transparent; } }

/* Reiter: Planer und Statistik. Der gewählte ist ein Parallelogramm in Cyan. */
.reiterleiste { display: flex; gap: 4px; margin-bottom: var(--a4); padding: 0 6px; overflow-x: auto; border-bottom: 2px solid var(--akzent); }
.reiter {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--a2); white-space: nowrap;
  border: 0; padding: 10px 18px; cursor: pointer;
  font: 700 var(--s-m) var(--sans); color: var(--text-2); background: none;
  transition: color .15s;
}
.reiter::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--flaeche); transform: skewX(var(--schraeg)); }
.reiter:hover { color: var(--text); }
.reiter:hover::before { background: var(--flaeche-2); }
.reiter.an { color: var(--auf-akzent); }
.reiter.an::before { background: var(--akzent); }
.reiterzahl { font: 700 var(--s-xs) var(--mono); letter-spacing: 0; padding: 1px 6px; border-radius: var(--r-klein); background: var(--flaeche-3); color: var(--text-2); }
.reiter.an .reiterzahl { background: var(--auf-akzent); color: var(--akzent); }

.aktionsleiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; padding: var(--a3) 0; }
.aktionsleiste.links { justify-content: flex-start; padding: 0; margin: 0 0 var(--a4); }
main > div:last-child > .aktionsleiste {
  position: sticky; bottom: 12px; padding: 10px 12px; border-radius: var(--r);
  background: color-mix(in srgb, var(--flaeche) 88%, transparent); border: 1px solid var(--rand-stark);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--schatten);
}

/* Listen mit Trennlinien — Mitglieder, Einladungen, Protokoll. */
.liste { list-style: none; margin: var(--a3) 0 0; padding: 0; }
.liste li { display: flex; gap: var(--a2); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.liste li > div { flex: 1; min-width: 0; }
.liste li.gesperrt { opacity: 0.5; }
.protokoll li { padding: 7px 0; }

.fortschritt { position: relative; display: flex; align-items: center; gap: var(--a2); height: 8px; margin: 6px 0; border-radius: var(--r-rund); background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--rand-stark); }
.fortschritt > span { display: block; height: 100%; border-radius: var(--r-rund); background: var(--gut); }
.fortschritt > b { position: absolute; right: 0; top: -20px; font: 700 var(--s-xs) var(--mono); color: var(--text-2); }
.fortschritt.gross { height: 12px; margin: 10px 0 4px; }

/* Statt „Lade …" drei Balken in der Form dessen, was gleich kommt — die
   Seite springt beim Wechseln nicht von einer Zeile Text auf volle Höhe. */
.geruest { display: grid; gap: var(--a3); padding: var(--a2) 0; }
.geruest span {
  display: block; height: 120px; border-radius: var(--r); border: 1px solid var(--rand);
  background: linear-gradient(100deg, var(--flaeche) 30%, var(--flaeche-2) 50%, var(--flaeche) 70%);
  background-size: 300% 100%; animation: schimmer 1.4s ease-in-out infinite;
}
.geruest span:first-child { height: 64px; width: min(420px, 70%); }
.geruest span:last-child { height: 220px; }
@keyframes schimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

#meldung {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--flaeche); color: var(--text); padding: 10px 16px; border-radius: var(--r-klein);
  border: 1px solid var(--gut); box-shadow: inset 3px 0 0 var(--gut), var(--schatten);
  font-weight: 700; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 20; max-width: calc(100% - 32px);
}
#meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }
#meldung[data-art="schlecht"] { border-color: var(--schlecht); box-shadow: inset 3px 0 0 var(--schlecht), var(--schatten); }

/* ---------- Siegel und Embleme ---------- */

.siegel {
  --gilde: var(--text-3);
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-klein);
  background: var(--gilde);
  color: var(--auf-siegel); font: 800 var(--s-xs) var(--sans);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.siegel.leer { background: var(--flaeche-2); color: var(--text-3); text-shadow: none; box-shadow: inset 0 0 0 1px var(--rand-stark); }
.siegel.klein { width: 24px; height: 24px; font-size: 9.5px; }
.siegel.gross { width: 56px; height: 56px; font-size: 18px; border-radius: var(--r); }
.siegel.mitbild { background: var(--flaeche-2); padding: 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rand-stark), 0 0 0 1.5px var(--gilde); }
.siegel.mitbild img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
/* Auf der Karte und in Siegeln steht das Logo auf dunklem Grund, damit die
   helle Flamme auch im hellen Farbmodus zu sehen ist. */
.siegel.mitbild:has(img[src^="logo"]) { background: #0c1222; }
.siegel.mitbild img[src^="logo"] { image-rendering: auto; object-fit: contain; padding: 8%; }
.logo { display: block; object-fit: contain; user-select: none; }

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

.kopf {
  display: flex; align-items: stretch; gap: var(--a5); min-height: var(--kopfhoehe);
  padding: 0 var(--pad); position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--grund) 96%, transparent);
  border-bottom: 1px solid var(--rand);
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.marke strong { display: block; font: 700 19px/1.1 var(--kopfschrift); font-stretch: 85%; text-transform: uppercase; }
.marke small { display: none; }
.markenzeichen { display: grid; place-items: center; width: 30px; height: 30px; }
.markenzeichen .zeichen { width: 30px; height: 30px; }

.kopf nav { display: flex; align-items: stretch; gap: 2px; min-width: 0; }
.kopf nav a {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text-2); padding: 0 14px; white-space: nowrap;
  font: 700 12.5px var(--sans); text-transform: uppercase; letter-spacing: 0.05em; transition: color .15s;
}
.kopf nav a:hover { color: var(--text); }
/* Die gewählte Seite ist ein Parallelogramm in Cyan. */
.kopf nav a.aktiv { color: var(--auf-akzent); }
.kopf nav a.aktiv::before { content: ""; position: absolute; inset: 9px 0; z-index: -1; background: var(--akzent); transform: skewX(var(--schraeg)); }
/* Die Zeichen stehen nur in der Leiste am Handy; oben ist dafür kein Platz. */
.navzeichen { display: none; width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kopfwerkzeug { margin-left: auto; display: flex; align-items: center; gap: var(--a2); }

.suche { position: relative; }
.suchfeld { width: 150px; min-height: 34px; padding: 5px 10px; font-size: var(--s-s); background: var(--flaeche); }
.suchfeld:focus { width: 220px; }
.suchtreffer {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, 86vw); max-height: 60vh; overflow-y: auto; z-index: 8;
  padding: 6px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--rand-stark); box-shadow: var(--schatten);
}
.suchtreffer[hidden] { display: none; }
.suchzeile { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--a2); align-items: center; padding: 8px 10px; border-radius: var(--r-klein); text-decoration: none; color: var(--text); }
.suchzeile:hover, .suchzeile.markiert { background: var(--akzent-matt); box-shadow: inset 2px 0 0 var(--akzent); }
.suchart { color: var(--akzent-text); text-align: center; }
.suchtext { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suchleer { margin: 0; padding: 8px 10px; }

/* Das Menü hinter dem Namen: Sprache, Farbschema, Abmelden. */
.profil { position: relative; }
.profil > summary {
  list-style: none; display: flex; align-items: center; gap: var(--a2); cursor: pointer; min-height: 34px; padding: 3px 10px 3px 4px;
  border: 1px solid var(--rand-stark); border-radius: var(--r-klein); background: var(--flaeche); font-weight: 700; font-size: var(--s-s);
}
.profil > summary::-webkit-details-marker { display: none; }
.profil > summary:hover, .profil[open] > summary { border-color: var(--akzent-linie); background: var(--flaeche-2); }
.profilbild {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 2px;
  background: var(--akzent-matt); color: var(--akzent-text); font: 800 var(--s-xs) var(--sans); box-shadow: inset 0 0 0 1px var(--akzent-linie);
}
.profilname { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilmenue {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 8; width: 240px; display: grid; gap: var(--a3); padding: var(--a3);
  border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--rand-stark); box-shadow: var(--schatten);
}
.profilzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); font-size: var(--s-s); color: var(--text-2); }
.profilwer { margin: 0; padding-bottom: var(--a3); border-bottom: 1px solid var(--rand); font-size: var(--s-s); color: var(--text-2); }
.profilwer strong { display: block; font-size: var(--s-m); color: var(--text); }
.profilmenue .knopf { justify-content: flex-start; }

.fuss { border-top: 1px solid var(--rand); padding: var(--a5) var(--pad) var(--a6); text-align: center; font-size: var(--s-xs); color: var(--text-3); }
.fuss p { margin: 2px 0; }
.fuss a { color: var(--text-2); }

/* ---------- Burgen: Lage ---------- */

.lage { display: grid; gap: var(--a4); }
/* Das Bühnenbild: links Titel und zwei Knöpfe, rechts die Seelenflamme im eigenen Licht.
   Dahinter liegt, blau eingefärbt, das Gildenfoto (banner.png) — als Stimmung, nicht als Bild
   zum Hinsehen; die Lichtspur und die Splitter des Kopfbilds fallen hier weg. */
.buehnenbild {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--a5);
  min-height: 380px; padding: 44px clamp(20px, 5vw, 64px);
  background:
    linear-gradient(0deg, rgba(8, 13, 24, 0.95), transparent 34%),
    radial-gradient(46% 80% at 78% 48%, rgba(0, 255, 255, 0.22), transparent 70%),
    linear-gradient(rgba(16, 52, 96, 0.72), rgba(8, 13, 24, 0.72)),
    url("banner.png") center 38% / cover,
    linear-gradient(120deg, #17406e, #0a1222 70%);
}
.buehnentext { display: grid; gap: var(--a3); justify-items: start; min-width: 0; }
.buehnentext h1 { font-size: clamp(38px, 7vw, 76px); }
.buehnentext .dachzeile { margin: 0; font-size: var(--s-s); }
.buehnenknoepfe { display: flex; flex-wrap: wrap; gap: var(--a3); margin-top: var(--a2); }
.buehnenknoepfe .knopf { min-height: 42px; padding: 9px 22px; }
.lage-zeichen { width: clamp(130px, 24vw, 290px); height: auto; flex: none; margin-right: clamp(0px, 4vw, 60px); filter: drop-shadow(0 0 34px rgba(60, 200, 255, 0.7)); }

.unsere-burgen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.unsere-burgen p { margin: 0; }
.burgchip {
  display: inline-flex; align-items: center; gap: var(--a2); text-decoration: none;
  padding: 4px 4px 4px 10px; border-radius: var(--r-klein); color: var(--text);
  background: var(--unser-matt); border: 1px solid var(--unser-linie); font-weight: 700; font-size: var(--s-s);
  transition: background .15s, box-shadow .15s;
}
.burgchip:hover { }
.burgchip-seit { font: 700 var(--s-xs) var(--mono); color: var(--auf-unser); background: var(--unser); padding: 1px 6px; border-radius: 2px; }
.melderalarm { margin: 0; padding: var(--a2) var(--a3); border-radius: var(--r-klein); border: 1px solid var(--schlecht); background: var(--schlecht-matt); color: var(--schlecht); font-weight: 700; font-size: var(--s-s); }

/* Oben die vier Karten groß, darunter nebeneinander Rangliste und Eroberungen. */
.lagegitter { display: grid; gap: var(--a5); }

.lageseite { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a4); align-items: start; }

/* ---------- Burgen: Reichskarten ---------- */

.reichsgitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a4); }
.reich {
  margin: 0; padding: 0; background: var(--flaeche); border: 1px solid transparent; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.reich:hover { border-color: var(--akzent-linie); transform: translateY(-2px); }
.reich.gross { padding: var(--a2); }
.reich figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a2); padding: 10px 14px; }
.reichsname { font: 700 18px var(--kopfschrift); font-stretch: 85%; text-transform: uppercase; }
.reich figcaption .leise { font: var(--s-s) var(--mono); font-variant-numeric: tabular-nums; }
.reichskarte {
  display: block; width: 100%; height: auto;
  background-color: var(--karte);
  background-image: radial-gradient(var(--karte-punkt) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
.reichskarte .grund { fill: transparent; }
.reichskarte .hoehe { fill: none; stroke: var(--hoehe); stroke-width: 0.4; }
.reichskarte .weg { fill: none; stroke: var(--weg); stroke-width: 0.45; stroke-dasharray: 0.4 1.4; stroke-linecap: round; }
.reichskarte .tor { fill: none; stroke: var(--text-3); stroke-width: 0.6; stroke-linecap: round; stroke-linejoin: round; }
.reichskarte a { outline: none; }
.reichskarte .emblem { image-rendering: pixelated; }
.reichskarte .emblem[href^="logo"] { image-rendering: auto; }
.burgpunkt .hof { fill: var(--flaeche-2); stroke: var(--rand-stark); stroke-width: 0.45; transition: stroke .15s; }
.burgpunkt.besetzt .hof { fill: var(--gilde); stroke: rgba(255, 255, 255, 0.18); }
.burgpunkt .turm { fill: var(--text-3); }
.burgpunkt.besetzt .turm { fill: #fff; }
.burgpunkt.unsere .hof { fill: var(--unser); stroke: #cfe0ff; stroke-width: 0.6; }
.burgpunkt.unsere .turm { fill: var(--auf-unser); }
/* Unsere Burgen tragen das Logo: dunkler Hof mit blauem Rand, damit die
   helle Flamme nicht auf hellblauem Grund verschwindet. */
.burgpunkt.unsere:has(.emblem) .hof { fill: #0c1222; stroke: var(--unser); stroke-width: 0.9; }
.burgpunkt .burgname { font: 700 3.4px var(--sans); fill: var(--text); }
.burgpunkt .burggilde { font: 650 2.8px var(--sans); fill: var(--text-3); }
.burgpunkt.unsere .burggilde { fill: var(--unser-text); font-weight: 800; }
.burgpunkt.neu .hof { animation: neuRing 2.4s ease-out infinite; }
.burgpunkt.markiert .hof { stroke: var(--akzent); stroke-width: 1.2; }
.reichskarte a:hover .hof, .reichskarte a:focus-visible .hof { stroke: var(--text); stroke-width: 1; }
.reichskarte.gross .burgname { font-size: 3px; }
@keyframes neuRing { 0%, 100% { stroke-width: 0.45; } 40% { stroke-width: 2.4; stroke: var(--akzent); } }

/* Liegt die Originalkarte darunter, entfällt das Punktraster, und die
   Beschriftung bekommt einen dunklen Rand — die Karten aus dem Spiel sind
   bunt und hell, weiße Schrift ohne Rand ginge darauf unter. In beiden
   Farbmodi gleich, denn das Bild ändert sich ja nicht mit. */
.reichskarte.mitkarte { background-image: none; background-color: #0b0f17; }
.reichskarte .kartenbild { image-rendering: auto; }
.reichskarte .kartenschleier { fill: rgba(8, 11, 18, 0.28); pointer-events: none; }
.reichskarte.mitkarte .burgpunkt .hof { stroke: rgba(8, 11, 18, 0.85); stroke-width: 0.7; }
.reichskarte.mitkarte .burgpunkt.frei .hof { fill: rgba(20, 26, 40, 0.85); stroke: rgba(255, 255, 255, 0.6); stroke-dasharray: 1 0.8; }
.reichskarte.mitkarte .burgpunkt.frei .turm { fill: #cfd6e6; }
.reichskarte.mitkarte .burgpunkt.unsere .hof { stroke: #fff; stroke-width: 0.8; filter: drop-shadow(0 0 2.6px var(--unser)); }
.reichskarte.mitkarte .burgname { fill: #fff; font-size: 3.3px; paint-order: stroke; stroke: rgba(8, 11, 18, 0.92); stroke-width: 1.1px; stroke-linejoin: round; }
.reichskarte.mitkarte .burggilde { fill: #dfe6f5; paint-order: stroke; stroke: rgba(8, 11, 18, 0.92); stroke-width: 0.9px; stroke-linejoin: round; }
.reichskarte.mitkarte .burgpunkt.unsere .burggilde { fill: #a9c8ff; }
.reichskarte.ziehbar .burgpunkt { cursor: grab; touch-action: none; }
.reichskarte.ziehbar .burgpunkt.gezogen { cursor: grabbing; }
.reichskarte.ziehbar .burgpunkt.gezogen .hof { stroke: var(--akzent); stroke-width: 1.2; }

/* ---------- Burgen: Rangliste und Verlauf ---------- */

.rangliste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rangliste li {
  display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto 4px; column-gap: 10px; row-gap: 4px;
  align-items: center; padding: 6px 8px; border-radius: var(--r-klein);
}
.rangliste li.unsere { background: var(--unser-matt); box-shadow: inset 2px 0 0 var(--unser); }
.rangliste .siegel { grid-row: span 2; }
.rangliste .gildenname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rangliste li.unsere .gildenname { color: var(--unser-text); }
.rangliste .zahl { font: 700 var(--s-s) var(--mono); color: var(--text-2); grid-row: 1; grid-column: 3; font-variant-numeric: tabular-nums; }
.rangliste .balken { grid-column: 2 / 4; height: 4px; background: var(--flaeche-3); position: relative; overflow: hidden; }
.rangliste .balken::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--anteil); background: var(--gilde); }

.verlauffilter { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-bottom: var(--a2); }
.verlauffilter select { width: auto; flex: 1 1 110px; min-height: 30px; padding: 3px 8px; font-size: var(--s-s); }
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--r-klein); font-size: var(--s-s); }
.verlauf li + li { border-top: 1px solid var(--rand); }
.verlauf li.unsere { background: var(--unser-matt); box-shadow: inset 2px 0 0 var(--unser); border-top-color: transparent; }
.verlauf li.verlust { background: var(--schlecht-matt); box-shadow: inset 2px 0 0 var(--schlecht); border-top-color: transparent; }
.verlauf li.unsere + li, .verlauf li.verlust + li { border-top-color: transparent; }
.verlauf li > div { flex: 1; min-width: 0; }
.verlauf li strong { font-size: var(--s-m); }
.verlauf a { color: inherit; text-decoration: none; }
.verlauf a:hover { text-decoration: underline; }

/* ---------- Burgen: eine Burg im Einzelnen ---------- */

.burgdetail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--a4); margin-bottom: var(--a4); align-items: start; }
.burginfo { display: grid; gap: var(--a4); }
.besitzzeile { display: flex; gap: var(--a4); align-items: center; margin-bottom: var(--a4); }
.gross-text { font-size: 24px; font-weight: 800; }
.besitzer .kennzahlen { margin-bottom: var(--a3); }
.besitzer .kennzahl::before { background: var(--flaeche-2); }
.besitzer .kennzahl-wert { font-size: 18px; }
.fakten { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 var(--a3); }
.fakten dt { color: var(--text-3); font-size: var(--s-s); }
.fakten dd { margin: 0; }
.notiz { white-space: pre-wrap; margin: 0; }
.aussen { font-size: var(--s-s); font-weight: 700; }
main > .tafel + .tafel, main > .tafel + .taktik, main > .taktik + .tafel { margin-top: var(--a4); }

/* Der Wegeplan: ein Bild in voller Breite, Klick öffnet es groß. */
.wegebild { display: block; border-radius: var(--r-klein); overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px var(--rand); }
.wegebild img { display: block; width: 100%; max-height: 85vh; object-fit: contain; margin: 0 auto; }

/* ---------- Zeitleisten ---------- */

.zeitleiste { margin: 4px 0 var(--a3); }
.zl-balken {
  position: relative; height: 24px; border-radius: var(--r-klein); overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--flaeche-2) 0 6px, transparent 6px 12px), var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--rand);
}
.zl-stueck { position: absolute; top: 3px; bottom: 3px; background: var(--gilde); border-radius: 2px; opacity: 0.85; }
.zl-stueck.unsere { opacity: 1; }
.zl-stueck.offen { border-radius: 2px 0 0 2px; }
.zl-stueck:hover { opacity: 1; filter: brightness(1.15); }
.zl-woche { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rand-stark); pointer-events: none; }
.zl-achse { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); }
.zl-achse.breit { margin-top: 10px; padding: 0 4px; }
.zl-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--s-s); }
.zl-legende li { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.zl-legende li.unsere { color: var(--unser-text); }
.zl-legende .leise { font: 500 var(--s-s) var(--mono); }
.zl-farbe { width: 10px; height: 10px; background: var(--gilde); }
.zl-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a4); }
.zl-reich { margin: 0 0 10px; font-size: var(--s-m); }
.zl-zeile { display: grid; grid-template-columns: 128px 1fr; gap: var(--a3); align-items: center; padding: 4px 0; text-decoration: none; color: var(--text); }
.zl-zeile:hover .zl-name { color: var(--akzent-text); }
.zl-zeile .zl-balken { height: 18px; }
.zl-name { font-size: var(--s-s); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Taktik ---------- */

.taktik { margin-bottom: var(--a4); }
.taktik-werkzeug { display: grid; gap: 10px; margin-bottom: var(--a3); padding: var(--a3); border-radius: var(--r); background: var(--flaeche-2); }
.taktik-flaeche {
  position: relative; border-radius: var(--r); overflow: hidden; user-select: none; touch-action: none;
  background: var(--karte); box-shadow: inset 0 0 0 1px var(--rand);
}
.taktik-flaeche img { display: block; width: 100%; height: auto; pointer-events: none; }
.taktik-flaeche.ohnebild {
  aspect-ratio: 4 / 3;
  background-image: linear-gradient(var(--rand) 1px, transparent 1px), linear-gradient(90deg, var(--rand) 1px, transparent 1px);
  background-size: 8.333% 11.111%;
}
.taktik-flaeche.bearbeiten { cursor: crosshair; box-shadow: inset 0 0 0 2px var(--akzent-linie); overflow: visible; }
.taktik-leer { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; pointer-events: none; }
.taktik-marker { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; z-index: 1; }
.taktik-flaeche.bearbeiten .taktik-marker { cursor: grab; }
.taktik-marker.offen { z-index: 3; }
.taktik-punkt {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--art); color: #fff; font-size: 13px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.taktik-punkt.klein { width: 18px; height: 18px; font-size: 11px; box-shadow: none; }
.taktik-text {
  font-size: 12px; font-weight: 700; color: #fff; background: rgba(8, 11, 18, 0.78);
  padding: 2px 8px; border-radius: var(--r-klein); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}
.taktik-feld {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 240px;
  display: grid; gap: 6px; padding: 10px; border-radius: var(--r); cursor: default;
  background: var(--flaeche); border: 1px solid var(--rand-stark); box-shadow: var(--schatten);
}
.taktik-feld input, .taktik-feld select { min-height: 34px; padding: 5px 8px; font-size: var(--s-s); }
.taktik-legende { list-style: none; margin: var(--a3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--s-s); color: var(--text-2); }
.taktik-legende li { display: flex; align-items: center; gap: 6px; }
.taktik-legende .taktik-punkt { width: 18px; height: 18px; font-size: 11px; box-shadow: none; }
.taktik-gesperrt { margin-bottom: var(--a4); border-style: dashed; }
.taktik-gesperrt h2 { margin-bottom: 6px; }

/* ---------- Statistik ---------- */

.statkopf { display: grid; gap: var(--a3); margin-bottom: var(--a5); }
.abendliste { display: grid; gap: var(--a3); }
.abend { padding: 0; overflow: hidden; }
.abend > summary { list-style: none; cursor: pointer; padding: var(--a3) 18px; }
.abend > summary::-webkit-details-marker { display: none; }
.abend[open] > summary { border-bottom: 1px solid var(--rand); }
.abendkopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a4); flex-wrap: wrap; }
.abendkopf .dachzeile { margin-bottom: 4px; }
.abendkopf h3 { margin: 0; font-size: var(--s-l); }
.abendzahlen { display: flex; gap: 1px; background: var(--rand); border: 1px solid var(--rand); border-radius: var(--r-klein); overflow: hidden; }
.abendzahlen span {
  display: grid; justify-items: center; min-width: 76px; padding: 5px 10px; background: var(--flaeche-2);
  font-size: 11px; color: var(--text-3); font-weight: 800;
}
.abendzahlen strong { font: 700 var(--s-xl)/1.2 var(--mono); color: var(--text); }
.abendzahlen .verlust strong { color: var(--schlecht); }
.abendinhalt { padding: var(--a4) 18px; }
.abendreihen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a3); margin-bottom: var(--a4); }
.abendreihen > div { display: grid; gap: 6px; align-content: start; }
.abendchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-klein); text-decoration: none;
  font-size: var(--s-s); font-weight: 700; color: var(--text); background: var(--flaeche-2); border: 1px solid var(--rand-stark);
}
.abendchip.gewinn { border-color: var(--unser-linie); background: var(--unser-matt); color: var(--unser-text); }
.abendchip.verlust { border-color: color-mix(in srgb, var(--schlecht) 55%, transparent); background: var(--schlecht-matt); color: var(--schlecht); }
.abendchip small { font-weight: 600; opacity: 0.85; }
.endstand { display: flex; gap: 2px; height: 24px; margin: 6px 0 10px; border-radius: var(--r-klein); overflow: hidden; }
.endstand span {
  display: grid; place-items: center; min-width: 4px; background: var(--gilde); color: #fff; font-size: var(--s-xs); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.endstand span.unsere { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.abendfuss { margin: 0 0 var(--a2); }
.abendliste-ereignisse > summary { cursor: pointer; padding: 4px 0; }
.abendliste-ereignisse .verlauf { margin-top: 6px; }

.gildentabelle { width: 100%; border-collapse: collapse; font-size: var(--s-m); }
.gildentabelle th, .gildentabelle td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rand); white-space: nowrap; }
.gildentabelle thead th { font-size: var(--s-xs); font-weight: 800; color: var(--text-3); background: var(--flaeche-2); }
.gildentabelle tbody tr:last-child > * { border-bottom: 0; }
.gildentabelle tbody tr:hover { background: var(--flaeche-2); }
.gildentabelle tr.unsere { background: var(--unser-matt); box-shadow: inset 2px 0 0 var(--unser); }
.gildentabelle tr.unsere th { color: var(--unser-text); }
.gildentabelle .zahl { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gildentabelle .stark { font-weight: 800; }
.gildenzelle { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.sortierer { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.sortierer:hover { color: var(--text); }
.sortierer.an { color: var(--akzent-text); }

.risiko { display: flex; align-items: center; gap: 10px; font-family: var(--mono); }
.risikobalken { width: 90px; height: 6px; background: var(--flaeche-3); overflow: hidden; }
.risikobalken span { display: block; height: 100%; background: var(--stufe); }

.heatmap { overflow-x: auto; }
.heat-zeile { display: grid; grid-template-columns: 150px repeat(var(--spalten), minmax(22px, 1fr)); gap: 2px; margin-bottom: 2px; min-width: max-content; }
.heat-zeile.kopf { margin-bottom: 6px; }
.heat-achse { font: 700 var(--s-xs) var(--mono); color: var(--text-3); }
.heat-name { font-size: var(--s-s); font-weight: 700; padding-right: var(--a2); white-space: nowrap; align-self: center; }
.heat-feld {
  display: grid; place-items: center; height: 28px; border-radius: 2px; font: 700 var(--s-xs) var(--mono);
  background: color-mix(in srgb, var(--akzent) calc(var(--staerke) * 85%), var(--flaeche-2));
  color: color-mix(in srgb, #fff calc(var(--staerke) * 100%), var(--text-3));
}
.heat-zeile.verlust .heat-feld { background: color-mix(in srgb, var(--schlecht) calc(var(--staerke) * 85%), var(--flaeche-2)); }
.heat-zeile.unsere .heat-name { color: var(--unser-text); }
.heat-zeile.verlust .heat-name { color: var(--schlecht); }
.heat-zeile.unsere { margin-top: 10px; }

/* Rivalen: wir gegen eine Gilde. */
.rivalenkopf {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--a5); align-items: center; padding: var(--a5); margin-bottom: var(--a4);
  border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--rand);
}
.rivale-seite { display: grid; justify-items: center; gap: 10px; font-size: var(--s-l); text-align: center; }
.rivale-seite.unsere strong { color: var(--unser-text); }
.rivale-bilanz { display: grid; justify-items: center; gap: var(--a2); min-width: 220px; text-align: center; }
.rivale-bilanz .dachzeile { margin: 0; }
.bilanzzahl { display: flex; gap: var(--a3); align-items: baseline; font: 700 48px/1 var(--mono); }
.bilanzbalken { display: flex; width: 100%; height: 8px; overflow: hidden; gap: 2px; }
.bilanzbalken .sieg { background: var(--gut); }
.bilanzbalken .niederlage { background: var(--schlecht); }

/* ---------- Planer ---------- */

.planer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--a4); align-items: start; }
.planer-haupt { min-width: 0; }
.planer-uebersicht {
  position: sticky; top: calc(var(--kopfhoehe) + var(--a4)); display: grid; gap: var(--a3); padding: var(--a4);
  background: var(--flaeche); border: 1px solid var(--fenster); border-radius: var(--r);
  max-height: calc(100vh - var(--kopfhoehe) - var(--a6)); overflow-y: auto; scrollbar-width: thin;
}
.planer-uebersicht .hinweis { margin: 0; }
.uebersicht-kopf { display: flex; gap: var(--a3); align-items: center; }
.uebersicht-kopf .klassenwappen { width: 44px; height: 44px; font-size: 22px; flex: none; }
.uebersicht-kopf .dachzeile { margin-bottom: 2px; }
.uebersicht-titel { display: block; font-size: var(--s-l); font-weight: 800; line-height: 1.2; }
.levelzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.levelzeile .zahlfeld { display: grid; grid-template-columns: 30px 1fr 30px; gap: 4px; }
.levelzeile .zahlfeld input { width: 100%; min-width: 0; }
.uebersicht-aktionen { display: grid; gap: var(--a2); }
.uebersicht-aktionen .zeile { justify-content: space-between; }
.uebersicht-aktionen .zeile .knopf { flex: 1; }
.gearzeile { margin: -4px 0 0; }
.gearzeile:empty { display: none; }

.planerkopf {
  display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(2, minmax(150px, 1fr)) auto; gap: var(--a4); align-items: end;
  margin-bottom: var(--a4); padding: var(--a4) 18px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r);
}
.klassenwappen {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r);
  background: var(--akzent-matt); color: var(--akzent-text); font-size: 26px;
  box-shadow: inset 0 0 0 1px var(--akzent-linie);
}
.klassenwappen.gross { width: 76px; height: 76px; font-size: 36px; flex: none; }

.zahlfeld { display: inline-flex; align-items: center; gap: 4px; }
.zahlfeld input { width: 64px; text-align: center; padding: 6px 4px; -moz-appearance: textfield; font: 700 var(--s-m) var(--mono); font-variant-numeric: tabular-nums; }
.zahlfeld input::-webkit-inner-spin-button { -webkit-appearance: none; }
.zahlfeld .knopf.rund { width: 30px; min-height: 30px; font-size: 16px; }

.planergitter { display: grid; grid-template-columns: minmax(310px, 0.85fr) minmax(0, 1.6fr); gap: var(--a4); align-items: start; margin-bottom: var(--a4); }
.undoleiste { justify-content: space-between; }
.planerwarnung { padding: 10px 12px; border-radius: var(--r-klein); background: var(--schlecht-matt); border: 1px solid color-mix(in srgb, var(--schlecht) 55%, transparent); border-left-width: 3px; color: var(--text); font-size: var(--s-s); }
.planerwarnung[hidden] { display: none; }
.planerwarnung strong { color: var(--schlecht); }
.planerwarnung ul { margin: 4px 0 0; padding-left: 18px; }
.planerwarnung p { margin: 6px 0 0; color: var(--text-2); }

.restpunkte { display: flex; align-items: baseline; gap: var(--a2); font-size: var(--s-xs); font-weight: 800; color: var(--text-3); }
.restpunkte .leise { color: inherit; }
.rest { font: 700 24px/1 var(--mono); color: var(--akzent-text); font-variant-numeric: tabular-nums; }
.rest.ueber, .punkte.ueber { color: var(--schlecht); text-shadow: none; }

.statgitter { display: grid; grid-template-columns: 44px auto 62px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; margin: var(--a3) 0; }
.statname { font: 700 var(--s-s) var(--mono); color: var(--text-2); }
.bonusfeld { padding: 6px; text-align: center; min-height: 34px; font-family: var(--mono); }
.statrechts { display: flex; flex-direction: column; line-height: 1.25; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.statsumme { font-weight: 700; color: var(--gut); }
.statkosten { white-space: nowrap; color: var(--text-3); }
.statschnell { display: flex; gap: 2px; }
.statschnell .knopf { min-height: 28px; padding: 2px 8px; font: 700 var(--s-xs) var(--mono); }
.buffs { margin-bottom: 4px; }

.statkacheln, .wertgitter { display: grid; gap: 1px; background: var(--rand); border-radius: var(--r-klein); overflow: hidden; border: 1px solid var(--rand); }
.statkacheln { grid-template-columns: repeat(3, 1fr); }
.wertgitter { grid-template-columns: 1fr 1fr; }
.steckbrief .wertgitter { grid-template-columns: repeat(4, 1fr); }
.statkachel { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px; background: var(--flaeche-2); }
.statkachel .statname { font-size: var(--s-xs); }
.statwert { font: 700 18px var(--mono); font-variant-numeric: tabular-nums; }
.plus { color: var(--gut); font-weight: 700; font-size: 0.72em; }
b.plus { font-size: 1em; color: var(--akzent-text); }
.wertkachel { display: grid; gap: 2px; padding: 8px 10px; background: var(--flaeche-2); }
.wertname { font-size: 11px; font-weight: 800; color: var(--text-3); }
.wertzahl { font: 700 17px var(--mono); font-variant-numeric: tabular-nums; color: var(--akzent-text); }

.werte { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.werte dt, .werte dd { padding: 7px 0; border-bottom: 1px solid var(--rand); }
.werte dt { color: var(--text-2); font-size: var(--s-m); }
.werte dd { margin: 0; text-align: right; font: 700 var(--s-m) var(--mono); font-variant-numeric: tabular-nums; }

.skillfilter { flex-wrap: wrap; justify-content: flex-end; }
.skillsuche { width: 180px; min-height: 32px; padding: 4px 10px; }
.skillbaum + .skillbaum { margin-top: var(--a3); padding-top: 4px; border-top: 1px solid var(--rand); }
.baumkopf { display: flex; justify-content: space-between; align-items: baseline; }
.baumkopf h3 { font-size: var(--s-m); }
.baumkopf .punkte { font: 700 var(--s-xs) var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; background: var(--flaeche-2); padding: 2px 8px; border-radius: var(--r-klein); }
.skillgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.skill { border: 1px solid var(--rand); border-radius: var(--r-klein); padding: 9px 10px; background: var(--flaeche-2); transition: border-color .15s, background .15s; }
.skill.gelernt { border-color: color-mix(in srgb, var(--gut) 50%, transparent); background: var(--gut-matt); }
.skill.voll { border-color: var(--akzent-linie); background: var(--akzent-matt); }
.skill.gesperrt { opacity: 0.5; }
.skillname { font-weight: 700; font-size: var(--s-s); margin-bottom: var(--a2); }
.skillname .chip { margin-left: 6px; }
.stufenleiste { display: flex; gap: 2px; }
.stufe { flex: 1; min-width: 8px; max-width: 22px; height: 8px; padding: 0; cursor: pointer; border-radius: 1px; border: 0; background: var(--rand-stark); transition: background .1s; }
.stufe:hover { background: var(--text-3); }
.stufe.an { background: var(--gut); }
.skill.voll .stufe.an { background: var(--akzent); }
.skillfuss { display: flex; justify-content: space-between; gap: var(--a2); margin-top: 7px; font-size: var(--s-xs); }
.stufenzahl { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 700; }
.fehlt { color: var(--text-3); text-align: right; }

.buildtext { margin-bottom: var(--a4); }
.rollenwahl { border: 0; padding: 0; margin: 0 0 var(--a4); display: flex; flex-wrap: wrap; gap: 6px; }
.rollenwahl legend { font-size: var(--s-xs); font-weight: 700; color: var(--text-3); margin-bottom: var(--a2); padding: 0; }

/* ---------- Ausrüstung ---------- */

.ausruestung { margin-bottom: var(--a4); }
.ausruestung-reiter { display: grid; gap: var(--a3); }
.ausr-werkzeug { flex-wrap: wrap; }
.ausr-werkzeug select { width: auto; flex: 1 1 220px; min-height: 34px; }
.ausruestung-tafel { display: grid; gap: var(--a4); }
.slotgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--a3); }
.slot { border: 1px solid var(--rand); border-radius: var(--r); padding: 10px 12px 12px; margin: 0; min-width: 0; background: var(--flaeche-2); }
.slot legend { font-size: var(--s-xs); font-weight: 800; color: var(--text-3); padding: 0 6px; }
.slotkopf { display: grid; grid-template-columns: 70px 1fr; gap: 6px; }
.itemzeile { display: grid; grid-template-columns: 1fr 86px 34px; gap: 6px; align-items: center; }
.itemzeile input, .slot select { min-height: 36px; padding: 6px 9px; background: var(--flaeche); }
.kartenreihe { display: grid; gap: 6px; margin-top: var(--a2); padding-left: var(--a3); border-left: 2px solid var(--akzent-matt); }
.kartenreihe > span { margin-bottom: -2px; color: var(--text-3); }

/* Wie das Fenster im Spiel: Plätze links und rechts der Figur. */
.figurenansicht {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); gap: var(--a2); align-items: stretch;
  padding: var(--a3); border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--rand);
}
.plaetze { display: grid; gap: 6px; align-content: start; }
.platz {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center;
  width: 100%; min-height: 60px; padding: 7px 9px; text-align: left; font: inherit; color: var(--text);
  background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--r-klein); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
button.platz:hover { border-color: var(--akzent-linie); box-shadow: inset 2px 0 0 var(--akzent); }
button.platz:active { transform: translateY(1px); }
.platz.leer { border-style: dashed; border-color: var(--rand-stark); background: transparent; }
.platz.leer .itemsymbol { opacity: 0.7; }
.platz.mitbelegt { opacity: 0.55; cursor: default; border-style: dashed; }
.platz.unbekannt { border-color: color-mix(in srgb, var(--schlecht) 50%, transparent); }
.platztext { display: grid; gap: 1px; min-width: 0; }
.platzname { font-size: 11px; font-weight: 800; color: var(--text-3); }
.itemname { font-size: var(--s-m); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemwerte { font: 600 var(--s-xs) var(--mono); color: var(--akzent-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartenpunkte { position: absolute; right: 9px; top: 9px; display: flex; gap: 3px; }
.kartenpunkte i { width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px; border: 1.5px solid var(--text-3); }
.kartenpunkte i.an { background: var(--akzent); border-color: var(--akzent); }

.itemsymbol {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--r-klein); background: var(--slot); box-shadow: inset 0 0 0 1px var(--slot-rand);
}
.itemsymbol img { position: relative; z-index: 1; width: 30px; height: 30px; image-rendering: pixelated; object-fit: contain; }
.itemsymbol .ersatz { position: absolute; font-size: 18px; color: var(--text-3); }
.itemsymbol img.laedt { visibility: hidden; }
.itemsymbol.mitbild .ersatz { display: none; }
.itemsymbol.klein { width: 36px; height: 36px; }
.itemsymbol.klein img { width: 26px; height: 26px; }
.itemsymbol.gross { width: 72px; height: 72px; border-radius: var(--r); }
.itemsymbol.gross .ersatz { font-size: 30px; }

.figur {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  border-radius: var(--r-klein); padding: var(--a4) var(--a2);
  background-color: var(--karte);
  background-image: radial-gradient(70% 60% at 50% 40%, var(--akzent-matt), transparent 70%), radial-gradient(var(--karte-punkt) 1px, transparent 1.2px);
  background-size: auto, 14px 14px;
}
.figur-ring {
  display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%;
  background: var(--gold); padding: 2px;
}
.figur-zeichen {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--flaeche); color: var(--akzent-text); font-size: 52px; box-shadow: inset 0 0 30px var(--akzent-matt);
}
.figur strong { font-size: var(--s-l); }

.ausr-summe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: var(--a4) 18px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r);
}
.ausr-summe h3 { margin-top: 0; }
.ausr-summe .hinweis { grid-column: 1 / -1; margin: 0; }
.summenzeile { margin: 0; font: 700 var(--s-s)/1.7 var(--mono); color: var(--akzent-text); }
.effektliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--s-s); }
.effektliste li { display: grid; gap: 1px; }
.effektquelle { font-size: var(--s-xs); font-weight: 700; color: var(--text-3); }
.effekttext { white-space: pre-line; }
.effekttext.block { margin: 0; padding: 10px 12px; border-radius: var(--r-klein); background: var(--flaeche-2); font-size: var(--s-s); color: var(--text-2); }
.steck-ausruestung { margin-top: var(--a4); }
.steck-ausruestung .figurenansicht { padding: 0; border: 0; background: none; }

/* ---------- Dialoge: Item-Maske, Katalog-Editor ---------- */

dialog.maske {
  width: min(980px, calc(100% - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--fenster);
  border-radius: var(--r); background: var(--flaeche); color: var(--text); box-shadow: var(--schatten);
}
dialog.maske.katalogeditor { width: min(760px, calc(100% - 24px)); }
dialog.maske::backdrop { background: rgba(4, 8, 16, 0.72); }
dialog.maske[open] { animation: maskeAuf .18s ease-out; }
@keyframes maskeAuf { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.maske-rahmen { display: flex; flex-direction: column; max-height: calc(100vh - 42px); }
.maske-titel { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--a3); padding: var(--a3) 18px; border-bottom: 1px solid var(--rand); background: var(--flaeche-2); }
.maske-titel h2 { margin: 0; font: 700 20px var(--kopfschrift); font-stretch: 85%; }
.maske-titel h2::before { display: none; }
.maske-titel .dachzeile { margin-bottom: 2px; }
.maske-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 0; flex: 1; overflow: hidden; }
.maske-suche { display: flex; flex-direction: column; gap: 10px; padding: var(--a4); border-right: 1px solid var(--rand); min-height: 0; }
.trefferliste { display: grid; gap: 2px; align-content: start; overflow-y: auto; min-height: 220px; max-height: 58vh; padding-right: 4px; }
.treffer {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-klein); background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.treffer:hover, .treffer.markiert { background: var(--flaeche-2); border-color: var(--rand); }
.treffer.an { background: var(--akzent-matt); border-color: var(--akzent-linie); }
.treffertext { display: grid; min-width: 0; }
.treffername { font-weight: 700; font-size: var(--s-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leerhinweis { padding: var(--a2); }
.neuesitem { margin-top: 6px; justify-self: start; }
.maske-detail { padding: var(--a4) 18px; overflow-y: auto; display: grid; gap: var(--a3); align-content: start; }
.maske-leer { display: grid; place-items: center; gap: 10px; padding: 50px 20px; text-align: center; color: var(--text-3); }
.maske-kopf { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--a3); align-items: start; }
.maske-kopf h3 { margin: 0 0 4px; font-size: var(--s-l); }
.maske-kopf p { margin: 0; }
.maske-block { display: grid; gap: var(--a2); padding: var(--a3); border-radius: var(--r-klein); background: var(--flaeche-2); border: 1px solid var(--rand); }
.blockkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; font-size: var(--s-s); }
.plusanzeige { font: 700 var(--s-xl) var(--mono); color: var(--akzent-text); font-variant-numeric: tabular-nums; }
.plusregler { padding: 0; min-height: 0; border: 0; background: none; accent-color: var(--akzent); height: 26px; }
.plusregler:focus { box-shadow: none; }
.plusmarken { display: flex; justify-content: space-between; margin-top: -4px; font-family: var(--mono); }
.kartenplaetze { display: grid; gap: 6px; }
.kartenplatz { display: flex; gap: 6px; align-items: center; }
.kartenwahl {
  flex: 1; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--a2); align-items: center; text-align: left;
  padding: 7px 10px; border-radius: var(--r-klein); border: 1px dashed var(--rand-stark); background: var(--flaeche); color: var(--text-2);
  font: 600 var(--s-s) var(--sans); cursor: pointer;
}
.kartenwahl small { grid-column: 2; }
.kartenplatz.voll .kartenwahl { border-style: solid; color: var(--text); }
.kartenplatz.aktiv .kartenwahl { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-matt); }
.kartenraute { color: var(--text-3); grid-row: span 2; }
.kartenplatz.voll .kartenraute { color: var(--akzent); }
.zusatzzeile { display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; gap: 6px; }
.zusatzzeile select, .zusatzzeile input { min-height: 34px; padding: 5px 8px; background: var(--flaeche); }
.maske-fuss { display: flex; justify-content: flex-end; align-items: center; gap: var(--a2); padding: var(--a3) 18px; border-top: 1px solid var(--rand); }
.fussinfo { margin-right: auto; }

.editor { display: grid; gap: var(--a3); padding: var(--a4) 18px 0; overflow-y: auto; }
.editor h3 { margin: 4px 0 var(--a2); }
.editor .maske-fuss { margin: 0 -18px; position: sticky; bottom: 0; background: var(--flaeche); }
.editor-abruf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: end; padding: var(--a3); border-radius: var(--r-klein); background: var(--flaeche-2); }
.editor-gitter { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: end; }
.editor-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--a2); }
.rohtext pre { white-space: pre-wrap; font: var(--s-s)/1.5 var(--mono); padding: 10px 12px; border-radius: var(--r-klein); background: var(--flaeche-2); color: var(--text-2); max-height: 220px; overflow: auto; }

/* ---------- Bibliothek ---------- */

.filterleiste { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 240px); gap: 10px; margin-bottom: var(--a4); }
.filterleiste .chips { grid-column: 1 / -1; }
.buildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--a3); }
.buildkarten-huelle { position: relative; }
.buildkarte {
  display: flex; gap: var(--a3); text-decoration: none; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r); padding: var(--a4);
  transition: border-color .15s, box-shadow .15s;
}
.buildkarte:hover { border-color: var(--akzent-linie); }
.buildkarte .klassenwappen { flex: none; width: 44px; height: 44px; font-size: 22px; }
.buildkarten-huelle .buildkarte { height: 100%; padding-right: 52px; }
.buildkarten-huelle.gewaehlt .buildkarte { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-matt); }
.kartentext { min-width: 0; }
.kartentext .dachzeile { margin-bottom: 4px; }
.kartentext h3 { margin: 0 0 6px; font-size: var(--s-l); }
.kurz { margin: 0 0 10px; color: var(--text-2); font-size: var(--s-s); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kartenfuss { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.empfohlen-marke { color: var(--akzent-text); margin-right: var(--a2); }
.vergleichsknopf {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: var(--r-klein); cursor: pointer;
  border: 1px solid var(--rand-stark); background: var(--flaeche-2); color: var(--text-3); font-size: 16px;
}
.vergleichsknopf:hover { color: var(--text); border-color: var(--akzent-linie); }
.vergleichsknopf[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.vergleichsleiste {
  position: sticky; bottom: 16px; margin-top: var(--a4); display: flex; align-items: center; gap: var(--a3); justify-content: space-between; flex-wrap: wrap;
  padding: var(--a3) var(--a4); border-radius: var(--r); background: color-mix(in srgb, var(--flaeche) 90%, transparent);
  border: 1px solid var(--akzent-linie); backdrop-filter: blur(14px); box-shadow: var(--schatten);
}
.vergleichsleiste[hidden] { display: none; }
.vergleichsleiste > span { flex: 1; min-width: 0; }

.steckkopf {
  display: flex; gap: var(--a4); align-items: center; margin-bottom: var(--a4); padding: var(--a4) 18px; border-radius: var(--r);
  background: linear-gradient(90deg, var(--akzent-matt), transparent 60%), var(--flaeche);
  border: 1px solid var(--rand); box-shadow: inset 3px 0 0 var(--akzent);
}
.steckkopf .chips { margin-top: var(--a3); }
.steckkopf p { margin: 6px 0 0; }
.beschreibung { max-width: 760px; font-size: var(--s-l); margin: 6px 4px var(--a2); color: var(--text); }
.beschreibung p { margin: 0 0 10px; white-space: pre-wrap; }
.steckbrief > .aktionsleiste { justify-content: flex-start; margin-bottom: var(--a3); }
.steckgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--a4); align-items: start; }

.statsaeulen { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--a2); height: 170px; margin-bottom: var(--a3); }
.saeule { display: grid; grid-template-rows: auto 1fr auto; text-align: center; gap: 6px; }
.saeulenwert { font: 700 var(--s-m) var(--mono); font-variant-numeric: tabular-nums; }
.saeulenwert small { color: var(--gut); font-weight: 700; }
.saeulenbalken { position: relative; background: var(--flaeche-2); border-radius: var(--r-klein); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rand); }
.saeulenbalken::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hoehe);
  background: linear-gradient(180deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, transparent));
}
.saeulenname { font: 700 var(--s-xs) var(--mono); color: var(--text-3); }

.skillliste ul { list-style: none; margin: 0; padding: 0; }
.skillliste li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rand); }
.skillliste h3:first-child { margin-top: 0; }
.pips { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--gut); font-weight: 700; }
.pips.voll { color: var(--akzent-text); }
.ausliste { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; margin: 0; }
.ausliste dt, .ausliste dd { padding: var(--a2) 0; border-bottom: 1px solid var(--rand); }
.ausliste dt { color: var(--text-3); font-size: var(--s-s); }
.ausliste dd { margin: 0; font-weight: 700; }

.einladung { --tp-y: var(--a6); --tp-x: var(--a6); max-width: 520px; margin: 48px auto; }
.einladung .dachzeile { font-size: 24px; letter-spacing: 0; text-transform: none; }
.einladung form { margin-top: 18px; }

.versionen { margin-top: var(--a4); }
.versionsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.versionsliste li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--a3); align-items: center; padding: 10px; border-radius: var(--r-klein); }
.versionsliste li + li { border-top: 1px solid var(--rand); }
.versionsliste li.aktuell { background: var(--akzent-matt); box-shadow: inset 2px 0 0 var(--akzent); }
.versionsnr { font: 700 var(--s-m) var(--mono); color: var(--akzent-text); font-variant-numeric: tabular-nums; }

/* Vergleich zweier Builds. */
.vgl-koepfe { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--a4); align-items: center; margin-bottom: var(--a4); }
.vgl-kopf { display: flex; gap: var(--a3); align-items: center; padding: var(--a4); border-radius: var(--r); text-decoration: none; color: var(--text); background: var(--flaeche); border: 1px solid var(--rand); }
.vgl-kopf.a { box-shadow: inset 3px 0 0 var(--akzent); }
.vgl-kopf.b { box-shadow: inset 3px 0 0 #c084fc; }
.vgl-kopf strong { display: block; font-size: var(--s-l); }
.vgl-gegen { font: 700 var(--s-xl) var(--mono); color: var(--text-3); }
.vgl-tabelle { width: 100%; border-collapse: collapse; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vgl-tabelle th, .vgl-tabelle td { padding: var(--a2) 10px; border-bottom: 1px solid var(--rand); text-align: right; }
.vgl-tabelle th[scope="row"], .vgl-tabelle thead th:first-child { text-align: left; font-weight: 700; font-family: var(--sans); }
.vgl-tabelle thead th { font: 800 var(--s-xs) var(--sans); color: var(--text-3); }
.vgl-tabelle tr.abgeleitet th { color: var(--text-2); font-weight: 600; }
.diff { font-weight: 800; }
.diff.mehr { color: var(--gut); }
.diff.weniger { color: var(--schlecht); }
.vgl-gear { display: grid; gap: 4px; }
.vgl-gearzeile { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 10px; align-items: center; padding: var(--a2); border-radius: var(--r-klein); }
.vgl-gearzeile.anders { background: var(--flaeche-2); }
.vgl-gearzeile.gleich { opacity: 0.6; }
.vgl-teil { display: flex; gap: 10px; align-items: center; min-width: 0; }
.vgl-teil > div { min-width: 0; }
.vgl-teil.leer { padding-left: 10px; }

/* Figuren, Abgleich, Einkauf. */
.figurkarte .kurz { margin-bottom: var(--a3); }
.abgleich { display: grid; gap: var(--a4); margin-top: var(--a4); }
.abgleich .zweispaltig { margin-top: 0; }
.fortschrittstafel .gross-text { color: var(--akzent-text); font-family: var(--mono); }
.abgleichliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.abgleichliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--a3); align-items: center; padding: var(--a2) 6px; border-bottom: 1px solid var(--rand); font-variant-numeric: tabular-nums; }
.abgleichliste.gear li { grid-template-columns: 36px minmax(0, 1fr) auto; }
.abgleichliste li.ok { opacity: 0.6; }
.abstand { font: 700 var(--s-m) var(--mono); min-width: 34px; text-align: right; color: var(--akzent-text); }
.abgleichliste li.ok .abstand, .status-ok { color: var(--gut); }
.status-fehlt { color: var(--schlecht); }
.einkaufsliste { list-style: none; margin: 0 0 var(--a3); padding: 0; display: grid; gap: 2px; }
.einkaufsliste li { display: flex; justify-content: space-between; gap: var(--a3); align-items: center; padding: var(--a2) 4px; border-bottom: 1px solid var(--rand); }
.einkaufsliste .chip { margin-left: var(--a2); }
.einkaufsliste li:has(input:checked) span { text-decoration: line-through; opacity: 0.55; }

/* Katalog. */
.ungeprueft { display: inline-block; margin-left: var(--a2); padding: 0 6px; border-radius: 2px; font-size: 11px; font-weight: 800; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); vertical-align: middle; }
.geprueft { color: var(--gut); font-weight: 800; }
.katalogwerkzeug { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a3); align-items: center; margin-bottom: var(--a4); }
.katalogwerkzeug .hinweis { grid-column: 1 / -1; margin: 0; }
.katalogliste { display: grid; gap: 2px; }
.katalogzeile {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto minmax(110px, auto); gap: var(--a3); align-items: center; width: 100%;
  padding: 6px 12px; border-radius: var(--r-klein); border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); font: inherit; text-align: left;
}
button.katalogzeile { cursor: pointer; }
button.katalogzeile:hover { border-color: var(--akzent-linie); box-shadow: inset 2px 0 0 var(--akzent); }
.katalogname { display: grid; min-width: 0; }
.katalogname strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.katalogvon { text-align: right; }

/* ---------- Rezepte ---------- */

/* Eine Zeile wie in den alten Rezepttabellen: links das Produkt, in der
   Mitte die Zutaten mit Menge, rechts, was man sonst braucht. */
.rezeptliste { display: grid; gap: var(--a2); }
.rezeptzeile {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.2fr) minmax(220px, 1fr); gap: var(--a4);
  padding: var(--a3) var(--a4); border: 1px solid var(--rand); border-radius: var(--r); background: var(--flaeche);
}
.rezeptprodukt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--a3); align-content: start; }
.rezeptprodukt > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.rezeptprodukt strong { font-size: var(--s-l); line-height: 1.25; }
.rezeptprodukt .itemwerte { white-space: normal; }
.rezeptmarken { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rezeptmarken .ungeprueft { margin-left: 0; }
.chip.fest { cursor: default; }
.chip.fest:not(.an):hover { color: var(--text-2); border-color: var(--rand-stark); }
.chip small { font: 700 var(--s-xs) var(--mono); opacity: 0.75; }
.zutaten { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; align-content: start; }
.zutaten li { display: flex; align-items: center; gap: var(--a2); min-width: 0; }
.zutat { display: inline-flex; align-items: center; gap: var(--a2); min-width: 0; color: var(--text); text-decoration: none; font-weight: 600; }
.zutat:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.zutat .itemsymbol.klein, .einkaufsliste .itemsymbol.klein { width: 28px; height: 28px; }
.zutat .itemsymbol.klein img, .einkaufsliste .itemsymbol.klein img { width: 24px; height: 24px; }
.zutat .itemsymbol .ersatz, .einkaufsliste .itemsymbol .ersatz { font-size: 13px; }
.herstellbar { color: var(--akzent-text); font-size: var(--s-s); }
.menge { font: 700 var(--s-m) var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rezeptbedarf { display: grid; gap: 6px; align-content: start; min-width: 0; }
.bedarfkopf { font-size: var(--s-xs); font-weight: 800; color: var(--text-3); }
.bedarfkopf:not(:first-child) { margin-top: 4px; }
.rezeptskill { margin: 4px 0 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a2); }
.rezeptbedarf .hinweis { margin: 0; }
.rezeptaktionen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.zettelmenge { width: 68px; min-height: 30px; padding: 3px 6px; font-family: var(--mono); }
.chance { margin: 2px 0 0; display: flex; align-items: baseline; gap: var(--a2); font-size: var(--s-s); color: var(--text-2); }
.chance strong, .rezeptprodukt .chance strong { font: 700 var(--s-l) var(--mono); }
.chance.gut strong { color: var(--gut); }
.chance.mittel strong { color: var(--warn); }
.chance.schlecht strong { color: var(--schlecht); }
.chance.fehlt { color: var(--text-3); }

.rezeptwerte { margin-bottom: var(--a4); }
.rezeptwerte > summary { display: flex; align-items: baseline; gap: var(--a3); flex-wrap: wrap; cursor: pointer; }
.rezeptwerte > summary::before { content: "▸"; color: var(--akzent-text); }
.rezeptwerte[open] > summary::before { content: "▾"; }
.rezeptwerte[open] > summary { margin-bottom: var(--a3); }
/* Skillnamen sind lang („Smith Two-Handed Sword") — breitere Spalten, und die Felder stehen unten bündig. */
.rezeptwerte .editor-zahlen { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: end; }
.rezeptwerte .feld.klein select { min-height: 34px; padding: 5px 8px; }
.rezeptwerte .aktionsleiste { margin: var(--a3) 0 0; }
.rezeptwerte .figurwahl { width: auto; min-height: 30px; padding: 3px 8px; font-size: var(--s-s); }
.filterleiste.drei { grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(130px, 180px); }
.rezeptmasse { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin-bottom: var(--a3); }
.rezeptitem { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a4); }
.rezeptitem > div { flex: 1; min-width: 0; }
.rezeptitem .dachzeile { margin: 0; }

.zettel { margin-top: 0; align-items: start; }
.zettelliste { list-style: none; margin: 0 0 var(--a3); padding: 0; display: grid; gap: 2px; }
.zettelliste li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: var(--a2); align-items: center; padding: 4px 0; border-bottom: 1px solid var(--rand); }
.zettelname { display: grid; min-width: 0; }
.zettelname a { color: var(--text); font-weight: 700; text-decoration: none; }
.zettelname a:hover { text-decoration: underline; text-underline-offset: 3px; }
.zettel .einkaufsliste .haken { min-width: 0; }

/* Der Rezept-Editor: je Item eine Zeile aus ID, ⤓, Name, Menge. */
.rezeptfeld { display: grid; grid-template-columns: 96px auto minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.rezeptfeld.skill { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.rezeptfeld input { min-height: 34px; padding: 5px 8px; }
.rezeptfeld .mengefeld { width: 84px; }
.haken.klein { gap: 6px; white-space: nowrap; }

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

.verwaltungsgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--a4); align-items: start; }
.verwaltungsgitter .tafel > * + * { margin-top: var(--a3); }
.verwaltungsbreit { margin-top: var(--a4); }
.terminliste { display: grid; gap: var(--a2); }
.terminliste input[type="time"] { width: 116px; }
.terminliste select { width: 140px; }
.farbgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--a2); }
.farbzeile { display: flex; align-items: center; gap: var(--a2); }
.gildenliste input[type="color"] { flex: none; }
.reichskarten-verwaltung > * + * { margin-top: var(--a3); }
.kartenverwaltung { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--a4); }
.kartenfeld { display: grid; gap: var(--a2); align-content: start; }

/* ---------- Live-Modus ---------- */

body.livemodus .kopf, body.livemodus .fuss { display: none; }
body.livemodus main { width: 100%; max-width: none; padding: var(--a4); }
body.livemodus main > :first-child { margin-top: 0; }
.live { display: grid; gap: var(--a4); min-height: calc(100vh - 32px); grid-template-rows: auto 1fr; }
.live-kopf {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--a5); align-items: center;
  padding: var(--a3) 18px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--rand);
}
.live-marke { display: flex; align-items: center; gap: var(--a3); }
.live-marke strong { display: block; font-size: var(--s-xl); }
.live-zeichen { width: 52px; height: 52px; }
.live-badge { display: inline-block; font-size: var(--s-xs); font-weight: 800; padding: 1px 8px; border-radius: 2px; background: var(--flaeche-3); color: var(--text-2); }
.live.laeuft .live-badge { background: var(--schlecht); color: #fff; animation: puls 1.6s ease-in-out infinite; }
.live-uhr { display: grid; justify-items: center; }
.live-uhrtitel { font-size: var(--s-xs); font-weight: 800; color: var(--text-3); }
.live.laeuft .live-uhrtitel { color: var(--schlecht); }
.live-uhrzeit { font: 700 clamp(30px, 4vw, 52px)/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.live-halten { display: grid; justify-items: center; padding: 6px 18px; border-radius: var(--r-klein); background: var(--unser-matt); box-shadow: inset 0 0 0 1px var(--unser-linie); }
.live-zahl { font: 700 40px/1 var(--mono); color: var(--unser-text); }
.live-halten .leise { font-size: var(--s-xs); }
.live-knoepfe { display: flex; gap: var(--a2); }
.live-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--a4); min-height: 0; }
.live-karten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a4); align-content: start; }
.live-karten .reichskarte .burgname { font-size: 3.8px; }
.live-seite { padding: var(--a4); border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--rand); overflow-y: auto; max-height: calc(100vh - 150px); }
.live-ticker { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.live-ticker li { display: flex; gap: 10px; align-items: center; padding: var(--a2) 10px; border-radius: var(--r-klein); background: var(--flaeche-2); }
.live-ticker li.gewinn { background: var(--unser-matt); box-shadow: inset 3px 0 0 var(--unser); }
.live-ticker li.verlust { background: var(--schlecht-matt); box-shadow: inset 3px 0 0 var(--schlecht); }
.live-ticker li.frisch { animation: frisch 2.4s ease-out 2; }
@keyframes frisch { 0% { transform: scale(1.03); box-shadow: 0 0 0 3px var(--akzent); } 100% { transform: none; } }
.live.alarm .live-kopf { animation: alarm .8s ease-in-out 5; }
@keyframes alarm { 50% { box-shadow: 0 0 0 4px var(--schlecht), 0 0 40px var(--schlecht-matt); } }

/* ---------- Weniger Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .burgpunkt.neu .hof, .kennzahl.live .kennzahl-etikett::before, .geruest span, .live.laeuft .live-badge { animation: none; }
  * { transition: none !important; }
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 1560px) {
  .marke small { display: none; }
}
@media (max-width: 1300px) {
  .kopf { gap: var(--a4); }
  .kopf nav a { padding: 0 9px; }
}
@media (max-width: 1100px) {
  .kopf { gap: var(--a3); }
  .kopf nav a { padding: 0 7px; }
  .profilname { display: none; }
  .profil > summary { padding: 3px 4px; }
  .planer-layout { grid-template-columns: 1fr; }
  .planer-uebersicht { position: static; max-height: none; order: -1; }
  .figurenansicht { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); }
  .figur-ring { width: 92px; height: 92px; }
  .figur-zeichen { font-size: 40px; }
  .live-kopf { grid-template-columns: 1fr 1fr; }
  .live-inhalt { grid-template-columns: 1fr; }
  .live-seite { max-height: none; }
}
@media (max-width: 1000px) {
  .suchfeld, .suchfeld:focus { width: 150px; }
  .planergitter, .burgdetail { grid-template-columns: 1fr; }
  .zl-gitter { grid-template-columns: 1fr; }
  .katalogzeile { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .katalogzeile .chip, .katalogvon { display: none; }
  .rezeptzeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rezeptprodukt { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .figurenansicht { grid-template-columns: 1fr 1fr; padding: var(--a2); }
  .figur { grid-column: 1 / -1; grid-row: 1; flex-direction: row; padding: 10px 14px; justify-content: flex-start; text-align: left; }
  .figur-ring { width: 56px; height: 56px; }
  .figur-zeichen { font-size: 24px; }
  .platz { grid-template-columns: 36px minmax(0, 1fr); padding: 7px; min-height: 54px; }
  .platz .itemsymbol { width: 36px; height: 36px; }
  .ausr-summe { grid-template-columns: 1fr; }
  .maske-inhalt { grid-template-columns: 1fr; overflow-y: auto; }
  .maske-suche { border-right: 0; border-bottom: 1px solid var(--rand); }
  .trefferliste { max-height: 34vh; min-height: 120px; }
  .editor-gitter, .editor-abruf { grid-template-columns: 1fr; }
  .steckbrief .wertgitter { grid-template-columns: 1fr 1fr; }
  .reiter { padding: 9px 10px; }
  .vgl-koepfe, .rivalenkopf { grid-template-columns: 1fr; }
  .vgl-gegen { justify-self: center; }
  .vgl-gearzeile { grid-template-columns: 1fr 1fr; }
  .vgl-gearzeile .platzname { grid-column: 1 / -1; }
  .heat-zeile { grid-template-columns: 110px repeat(var(--spalten), 22px); }
}
@media (max-width: 900px) {
  /* Auf Handy und Tablet wandert die Navigation als feste Leiste nach
     unten — dort, wo der Daumen ist. Der Kopf verliert dafür seinen
     Weichzeichner: Der würde die Leiste an den Kopf binden statt an den
     Bildschirm. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.livemodus { padding-bottom: 0; }
  .kopf { background: var(--grund); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kopf nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--flaeche); border-top: 1px solid var(--rand-stark);
  }
  .kopf nav a {
    flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 2px;
    font-size: 10.5px; letter-spacing: 0; text-transform: none;
  }
  .kopf nav a.aktiv { color: var(--akzent-text); }
  .kopf nav a.aktiv::before { inset: 0; transform: none; background: linear-gradient(180deg, var(--akzent-matt), transparent 70%); border-top: 2px solid var(--akzent); }
  .navzeichen { display: block; width: 20px; height: 20px; }
  #meldung { bottom: calc(70px + env(safe-area-inset-bottom)); }
  main > div:last-child > .aktionsleiste, .vergleichsleiste { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .kennzahl-wert { font-size: 21px; white-space: normal; }
  .kennzahl-unter { white-space: normal; }
}
@media (max-width: 700px) {
  .kopf { gap: var(--a2); }
  .marke strong { display: none; }
  .kopfwerkzeug { flex: 1; min-width: 0; }
  .suche { flex: 1; min-width: 0; }
  .suchfeld, .suchfeld:focus { width: 100%; }
  .suchtreffer { left: 0; right: auto; }

  :root { --pad: 14px; }
  .buehnenbild { min-height: 0; padding-top: 30px; padding-bottom: 34px; }
  .lage-zeichen { width: 84px; margin: 0; align-self: flex-start; }
  .seitenkopf { padding-top: 30px; padding-bottom: 26px; }
  .kennzahlen { margin-inline: 4px; gap: 8px; }
  .tafel:not(.tabellenrahmen, .einladung) { --tp-y: var(--a3); --tp-x: 14px; }
  .abschnittskopf { margin-top: var(--a6); }
  .abschnittskopf h2 { font-size: 24px; }
  .kennzahlen { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .kennzahl { padding: var(--a3) var(--a4); }
  .kennzahl::before { transform: skewX(-5deg); }
  .kennzahl:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kennzahl-wert { font-size: 22px; }
  .lageseite { grid-template-columns: 1fr; }
  .zweispaltig { grid-template-columns: 1fr; }
  .planerkopf { grid-template-columns: 1fr 1fr; padding: var(--a4); }
  .planerkopf .feld:first-child { grid-column: 1 / -1; }
  .planerkopf .klassenwappen { display: none; }
  .statgitter { grid-template-columns: 36px auto 54px minmax(0, 1fr); }
  .statschnell { grid-column: 2 / -1; justify-content: flex-end; margin-top: -4px; }
  .slotgitter, .buildraster, .verwaltungsgitter { grid-template-columns: 1fr; }
  .filterleiste, .filterleiste.drei, .katalogwerkzeug { grid-template-columns: 1fr; }
  .rezeptzeile { grid-template-columns: 1fr; gap: var(--a3); padding: var(--a3) 14px; }
  .rezeptfeld { grid-template-columns: 70px auto minmax(0, 1fr) auto auto; }
  .rezeptfeld .mengefeld { width: 62px; }
  .rezeptfeld .haken span { display: none; }
  .zettelmenge { width: 56px; }
  .steckkopf { align-items: flex-start; }
  .klassenwappen.gross { width: 52px; height: 52px; font-size: 26px; }
  .abendreihen { grid-template-columns: 1fr; }
  .abendzahlen span { min-width: 58px; }
  .abend > summary, .abendinhalt { padding-left: 14px; padding-right: 14px; }
  .zl-zeile { grid-template-columns: 96px 1fr; }
  .taktik-text { max-width: 120px; }
  .live-karten { grid-template-columns: 1fr; }
  .live-knoepfe { flex-wrap: wrap; }
}
@media (max-width: 460px) {
  /* Die Leitung hat sieben Punkte in der Leiste — dann wird es für „Verwaltung" zu eng. */
  .kopf nav:has(a:nth-child(7)) a { font-size: 9.5px; padding-left: 0; padding-right: 0; }
  .reichsgitter { grid-template-columns: 1fr; }
  .itemzeile { grid-template-columns: 1fr 72px 34px; }
  .slotkopf { grid-template-columns: 62px 1fr; }
  .figurenansicht { grid-template-columns: 1fr; }
}