/* Charakterbogen im Stil des offiziellen deutschen D&D-5e-Bogens */

:root {
  --ink: #231f20;
  --ink-soft: #58595b;
  --muted: #8a8a8a;
  --paper: #ffffff;
  --page-bg: #f3f2ef;
  --panel: #e3e3e3;
  --field: #f1f1f1;
  --line: #b9b9b9;
  --accent: #9b1c1c;
  --accent-ink: #ffffff;
  --ok: #2f6b3a;
  --radius: 12px;
  --border: 2px solid var(--ink);
  --font: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  /* Kontrastfarbe für Text auf mit --ink gefüllten Flächen (Topnav, aktiver Tab) */
  --ink-contrast: #ffffff;
  /* Hervorhebung fokussierter Felder */
  --focus: #fff8e1;
  --focus-strong: #fffbee;
  /* Warnhinweis (z. B. „Werte noch nicht geprüft“) auf themenfähigem Untergrund wie --panel */
  --warn-text: #8a5d00;
  /* Schaden/Heilung aus dem Kampf-Tracker am TP-Kasten (live.js) */
  --hp-damage: #9b1c1c;
  --hp-heal: #2f6b3a;
  --die-crit: #c79a1e;
  /* Wald-Karte des Dungeongenerators: Waldboden, Baumkronen in drei Tönen, Äste */
  --forest-floor: #e9e4cf;
  --forest-dark: #24391f;
  --forest-crown-0: #3f6b2f;
  --forest-crown-1: #4d7d36;
  --forest-crown-2: #365c2b;
  --forest-branch: #5a4128;
  /* Bogen-Akzentfarbe je Startklasse (siehe views.CLASS_ACCENT_COLORS) – ohne gewählte Klasse
     neutral wie der Rest der Kopfzeile. Gesetzt per Inline-Style auf #sheet, serverseitig beim
     ersten Rendern und live per JS (sheet.js: updateClassTheme()) bei jedem Klassenwechsel. */
  --class-color: var(--ink-soft);
  /* App-Oberfläche außerhalb des Bogens (Karten, Knöpfe, Menüs): feine Linien und weiche
     Schatten statt der kräftigen Bogenrahmen (--border bleibt für die Kästen des Bogens) */
  --line-soft: #e4e1dc;
  --ui-border: 1px solid var(--line-soft);
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(35, 31, 32, .06), 0 1px 3px rgba(35, 31, 32, .08);
  --shadow-2: 0 12px 32px rgba(35, 31, 32, .16);
  --accent-soft: rgba(155, 28, 28, .08);
  /* Text in Akzentfarbe (Links, Hinweise) – im Dark Mode heller, sonst zu wenig Kontrast */
  --link: var(--accent);
  /* Schwarzes Brett: Korkwand und vier Papierfarben der Zettel */
  --board-bg: #b9905f;
  --note-0: #fffdf6;
  --note-1: #fff3c2;
  --note-2: #e9f1fb;
  --note-3: #fbe6e1;
  --note-ink: #231f20;
}

/* Dark Mode: Profil-Einstellung (Profile.dark_mode), base.html setzt data-theme serverseitig;
   nicht an das Betriebssystem gekoppelt. Beim Drucken wird unten immer die helle Palette
   erzwungen, unabhängig vom Schalter. */
:root[data-theme="dark"] {
  --ink: #e8e6e3;
  --ink-soft: #b9b6b1;
  --muted: #8f8b86;
  --paper: #242322;
  --page-bg: #181716;
  --panel: #2e2c2a;
  --field: #322f2d;
  --line: #4a4744;
  --ink-contrast: #181716;
  --focus: #4a3d10;
  --focus-strong: #423610;
  --warn-text: #e0b84d;
  --hp-damage: #f08a8a;
  --hp-heal: #7fcf8e;
  --line-soft: #3a3735;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .5);
  --accent-soft: rgba(240, 138, 138, .12);
  --link: #f08a8a;
  --board-bg: #4b3a27;
  --note-0: #3a3733;
  --note-1: #463f2a;
  --note-2: #2f3a46;
  --note-3: #47332f;
  --note-ink: #ece9e4;
  --forest-floor: #3b3a2c;
  --forest-dark: #121c10;
  --forest-crown-0: #2c4a22;
  --forest-crown-1: #355a28;
  --forest-crown-2: #264019;
  --forest-branch: #6e5435;
}

* { box-sizing: border-box; }
html { background: var(--page-bg); }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 30px; letter-spacing: -.01em; line-height: 1.15; }
a { color: var(--link); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.inline { display: inline; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ Grundgerüst */
.topnav {
  position: relative; z-index: 20;  /* Menüs liegen über der klebenden Bogen-Werkzeugleiste (z-index 10) */
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  padding: 8px 20px; background: var(--ink); color: var(--ink-contrast);
  border-bottom: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.topnav .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 16px;
  color: var(--ink-contrast); text-decoration: none;
}
.brand-badge {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  background: var(--accent); color: var(--accent-ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  transition: transform .2s;
}
.topnav .brand:hover .brand-badge { transform: rotate(30deg); }
.brand-sub { font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.nav-main { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; flex: 1; }
.nav-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Kategorie-Knöpfe und einfache Links in der Leiste */
.nav-menu { position: relative; }
.nav-menu > summary, .nav-link {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  color: var(--ink-contrast); text-decoration: none; padding: 7px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid transparent; user-select: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .7; transition: transform .15s;
}
.nav-menu[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-menu > summary:hover, .nav-link:hover, .nav-menu[open] > summary { background: rgba(155, 28, 28, .25); }
.nav-menu.active > summary, .nav-link.active { border-bottom-color: var(--accent); }
.nav-menu > summary:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Aufgeklapptes Menü */
.nav-panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px; padding: 6px;
  background: var(--paper); color: var(--ink); border: var(--ui-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 2px;
}
.nav-panel-end { left: auto; right: 0; min-width: 190px; }
.nav-panel a {
  display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px;
  border-left: 3px solid transparent;
}
.nav-panel a small { font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--field); border-left-color: var(--accent); outline: none; }
.nav-panel a.nav-compact { padding: 5px 10px; font-weight: 400; }
.nav-panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; width: auto; }
.nav-panel form { margin: 0; }
.nav-note { margin: 4px 10px; font-size: 12px; color: var(--ink-soft); }
.nav-button {
  width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px;
  font: inherit; font-weight: 700; font-size: 14px; color: var(--accent); cursor: pointer;
}
.nav-button:hover { background: var(--field); }
.nav-user > summary { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Große Kategorie-Menüs (base.html, Daten in context_processors.NAV_MENUS): am Desktop ein Panel
   über die volle Breite unter der Leiste, darin Kacheln mit Farbverlauf je Kategorie und einem
   großen eigenen Motiv (static/img/nav-icons.svg) als Hintergrundbild. */
.nav-mega-charaktere, .nav-tile.tile-charaktere { --tile-a: #b02a2a; --tile-b: #5a0f12; }
.nav-mega-kampagnen, .nav-tile.tile-kampagnen { --tile-a: #b8731c; --tile-b: #5c3307; }
.nav-mega-nachschlagen, .nav-tile.tile-nachschlagen { --tile-a: #23826f; --tile-b: #0e3f37; }
.nav-mega-generatoren, .nav-tile.tile-generatoren { --tile-a: #7446ad; --tile-b: #321a55; }
.nav-mega-inner {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
  max-width: 1180px; margin: 0 auto;
}
a.nav-tile {
  --tile-bg:
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .22), transparent 55%),
    linear-gradient(var(--tile-angle, 135deg), var(--tile-a, #555), var(--tile-b, #222));
  position: relative; overflow: hidden; isolation: isolate; min-height: 100px; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  border: 0; border-radius: 14px; color: #fff; text-decoration: none; font-weight: 700;
  background: var(--tile-bg); box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .15s, box-shadow .15s;
}
a.nav-tile:nth-child(3n + 2) { --tile-angle: 160deg; }
a.nav-tile:nth-child(3n) { --tile-angle: 110deg; }
.nav-tile strong { font-size: 17px; line-height: 1.15; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
a.nav-tile small { color: rgba(255, 255, 255, .85); font-size: 12.5px; font-weight: 400; }
.nav-tile-art {
  position: absolute; z-index: -1; right: -10px; top: -8px; width: 96px; height: 96px;
  color: rgba(255, 255, 255, .26); transform: rotate(-10deg); transition: transform .2s, color .2s;
}
/* .nav-panel a:hover setzt sonst einen einfarbigen Hintergrund */
a.nav-tile:hover, a.nav-tile:focus-visible, .nav-panel a.nav-tile:hover, .nav-panel a.nav-tile:focus-visible {
  transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .28); background: var(--tile-bg);
}
a.nav-tile:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.nav-tile:hover .nav-tile-art, .nav-tile:focus-visible .nav-tile-art { transform: rotate(0) scale(1.08); color: rgba(255, 255, 255, .4); }
.nav-mega-foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  padding: 2px 4px; font-size: 13px; color: var(--ink-soft);
}
.nav-panel .nav-mega-foot a { display: inline; padding: 0; border: 0; color: var(--link); font-size: 13px; }
.nav-panel .nav-mega-foot a:hover { background: none; text-decoration: underline; }
@keyframes nav-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 721px) {
  .nav-main .nav-menu-mega { position: static; }   /* Panel richtet sich an der ganzen Leiste aus */
  .nav-panel.nav-mega {
    top: calc(100% + 3px); left: 0; right: 0; padding: 20px 24px 22px;
    border: 0; border-bottom: var(--ui-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    animation: nav-mega-in .16s ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel.nav-mega, a.nav-tile, .nav-tile-art { animation: none; transition: none; }
}

/* Globale Suche in der Navigation (base.html) und Ergebnisseite (search.html) */
.nav-search { position: relative; margin: 0; }
.nav-search input {
  width: 200px; padding: 6px 10px 6px 30px; border-radius: 999px; font: inherit; font-size: 13px;
  border: 1px solid rgba(127, 127, 127, .45); background: rgba(127, 127, 127, .15); color: var(--ink-contrast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center; background-size: 14px;
  transition: background-color .2s, border-color .2s;
}
.nav-search input::placeholder { color: rgba(127, 127, 127, .9); }
/* Bis 1400 px etwas schmaler, damit Kategorien, Suche und Konto in eine Zeile passen */
@media (max-width: 1400px) and (min-width: 721px) {
  .nav-search input { width: 150px; }
  .nav-menu > summary, .nav-link { padding-left: 9px; padding-right: 9px; }
  .topnav { column-gap: 14px; }
}
/* Gleiche Breite im Fokus – ein breiteres Feld ließ die Navigation umbrechen */
.nav-search input:focus { outline: none; border-color: var(--accent); background-color: rgba(127, 127, 127, .25); }
.nav-search-results {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 340px; max-height: 70vh; overflow-y: auto;
  padding: 6px; background: var(--paper); color: var(--ink); border: var(--ui-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.nav-search-group {
  margin: 8px 10px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft);
}
.nav-search-results a {
  display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.nav-search-results a small { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.nav-search-results a:hover, .nav-search-results a:focus-visible { background: var(--field); outline: none; }
.nav-search-results a.nav-search-all { margin-top: 4px; border-top: var(--ui-border); border-radius: 0 0 8px 8px; color: var(--link); font-weight: 700; }
.nav-search-results a.nav-search-texts { margin-top: 4px; color: var(--ink-soft); font-style: italic; }
.nav-search-empty { margin: 8px 10px; color: var(--ink-soft); font-size: 14px; }
.search-page-form { display: flex; gap: 10px; margin-bottom: 20px; }
.search-page-form input { flex: 1; font-size: 17px; }
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.dash-list.search-list { padding: 0; border: 0; box-shadow: none; background: none; }
.search-more { font-size: 13px; margin: 8px 0 0; }
.search-stage { margin: 28px 0 4px; font-size: 20px; }
.search-text-list { list-style: none; margin: 0; padding: 0; }
.search-text-list li { padding: 10px 0; border-bottom: var(--ui-border); }
.search-text-list li:last-child { border-bottom: 0; }
.search-text-list a { font-weight: 700; text-decoration: none; color: var(--ink); }
.search-text-list a:hover { color: var(--link); }
.search-snippet { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.search-snippet mark { background: var(--focus); color: inherit; font-weight: 700; }
@media (max-width: 720px) {
  .nav-search { flex-basis: 100%; }
  .nav-search input, .nav-search input:focus { width: 100%; font-size: 16px; }
  .nav-search-results { left: 0; right: 0; width: auto; }
}

/* Dark-Mode-Schalter rechts in der Navigation (views.theme) */
.theme-form { margin: 0; }
.theme-switch {
  display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--ink-contrast); cursor: pointer; font: inherit; font-size: 13px;
}
.theme-switch:hover { background: rgba(155, 28, 28, .25); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-switch-icon { opacity: .55; line-height: 1; }
.theme-switch[aria-checked="false"] .theme-switch-icon:first-child,
.theme-switch[aria-checked="true"] .theme-switch-icon:last-child { opacity: 1; }
.theme-switch-track {
  position: relative; width: 32px; height: 18px; border-radius: 9px;
  background: rgba(127, 127, 127, .45); transition: background .15s;
}
.theme-switch[aria-checked="true"] .theme-switch-track { background: var(--accent); }
.theme-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.theme-switch[aria-checked="true"] .theme-switch-knob { transform: translateX(14px); }
.nav-avatar {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700;
}
.linklike {
  background: none; border: 0; padding: 0; font: inherit; color: var(--link);
  cursor: pointer; text-decoration: underline;
}
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.container-wide { max-width: none; }
.sheet-main { max-width: 1280px; margin: 0 auto; padding: 0 16px 48px; }

.messages { max-width: 1280px; margin: 12px auto 0; padding: 0 16px; }
.msg {
  padding: 10px 14px; border-radius: 12px; margin-bottom: 8px; background: var(--paper);
  border-left: 4px solid var(--ink); box-shadow: var(--shadow-1);
}
.msg-success { border-color: var(--ok); }
.msg-error { border-color: var(--accent); color: var(--accent); }
.msg-warning { border-color: #c98a00; }
.msg-foreign { border-color: #c98a00; background: #fff4d6; color: #6b4700; }
.msg-readonly { border-color: #2f6fa8; background: #eaf1f9; color: #1f4d7a; }
/* Nur-Lese-Ansicht (öffentlich freigegebener Bogen, siehe views.public_detail()): Formularfelder
   sind serverseitig disabled (Browser stellt sie automatisch abgeblasst/nicht fokussierbar dar),
   aber die Kreise (Pips) und Fertigkeits-Punkte sind eigene <button>-Elemente ohne disabled-Attribut
   (siehe sheet.js renderPips()) – ohne das hier blieben sie in der Nur-Lese-Ansicht anklickbar. */
.sheet-read-only .pips, .sheet-read-only .prof-dot { pointer-events: none; }
.errorlist { color: var(--accent); margin: 2px 0; padding: 0; list-style: none; font-size: 12px; }

.btn {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-1);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn:hover { background: var(--field); border-color: var(--ink-soft); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #7f1616; border-color: #7f1616; }
.btn-danger { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-small { padding: 4px 11px; font-size: 13px; border-radius: 8px; margin: 6px 0; box-shadow: none; }
.btn:disabled, .btn:disabled:hover {
  background: var(--field); border-color: var(--line); color: var(--muted);
  cursor: not-allowed;
}

.card {
  background: var(--paper); border: var(--ui-border); border-radius: var(--radius-lg); padding: 20px 24px;
  box-shadow: var(--shadow-1);
}
.card.narrow { max-width: 460px; margin: 40px auto; }
.card input:not([type=checkbox]) { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
/* Einheitlicher Fokusring für Eingaben außerhalb des Bogens */
.card input:focus-visible, .card select:focus-visible, .card textarea:focus-visible,
.spell-filter-field input:focus-visible, .spell-filter-field select:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.card .helptext, .card ul { font-size: 13px; color: var(--ink-soft); }
.card.empty { text-align: center; }

/* ------------------------------------------------------------ Übersicht */
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.char-card {
  background: var(--paper); border: var(--ui-border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-1); transition: box-shadow .2s, transform .2s;
}
.char-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.char-card-main { display: flex; gap: 14px; padding: 16px; color: inherit; text-decoration: none; }
.char-card-main img, .char-card-initial {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--line-soft);
}
.char-card-initial {
  display: grid; place-items: center; font-size: 28px; font-weight: 700;
  background: var(--accent-soft); color: var(--link);
}
.char-card h2 { margin: 0 0 4px; font-size: 20px; }
.char-card p { margin: 0 0 2px; }
.char-card-actions { display: flex; gap: 16px; padding: 8px 16px; border-top: var(--ui-border); font-size: 14px; }
.char-card-actions .danger { color: var(--accent); }
.char-card-owner { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.list-section { margin-top: 36px; }

/* ------------------------------------------------------------ Startseite (home.html, home_guest.html) */
.dash-hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin: 8px 0 24px;
}
.dash-hero h1 { margin: 0; }
.dash-kicker {
  margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--link);
}
.dash-hero-guest {
  align-items: center; padding: 32px; border-radius: var(--radius-lg); color: #fff;
  background: linear-gradient(135deg, #231f20 0%, #3a1414 60%, var(--accent) 140%);
  box-shadow: var(--shadow-2);
}
.dash-hero-guest h1 { font-size: 34px; max-width: 640px; }
.dash-hero-guest .dash-kicker { color: #f3b1b1; }
.dash-lead { max-width: 640px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .85); margin: 12px 0 0; }
.dash-hero-guest .btn:not(.btn-primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.dash-alert {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px;
  border-radius: var(--radius-lg); background: var(--paper); border: 1px solid #e9c46a;
  border-left: 5px solid #c98a00; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1);
}
.dash-alert:hover { box-shadow: var(--shadow-2); }
.dash-alert-icon { font-size: 20px; }
.dash-alert-go { margin-left: auto; font-weight: 700; color: var(--link); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.dash-wide { grid-column: 1 / -1; }
.dash-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.dash-section-head h2 { margin: 0; font-size: 20px; }
.dash-section-head a { font-size: 14px; font-weight: 700; text-decoration: none; }
.dash-session { margin-bottom: 12px; }
.dash-session .session-title { margin: 0; font-size: 17px; }
.dash-meta { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.dash-meta a { text-decoration: none; font-weight: 700; }
.dash-more { margin: 12px 0 0; }
.dash-list {
  list-style: none; margin: 0; padding: 4px 16px; background: var(--paper); border: var(--ui-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.dash-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: var(--ui-border); }
.dash-list li:last-child { border-bottom: 0; }
.dash-list li a { font-weight: 700; text-decoration: none; color: var(--ink); }
.dash-list li a:hover { color: var(--link); }
.dash-list .muted { margin-left: auto; font-size: 13px; }
.dash-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
}
.dash-badge-soft { background: var(--accent-soft); color: var(--link); }
/* Kacheln der Startseite: dieselben wie in der Navigation (a.nav-tile, oben) */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 32px; }
.feature h2 { margin: 0 0 6px; font-size: 18px; }
.feature p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-hero-guest { padding: 22px 18px; }
  .dash-hero-guest h1 { font-size: 26px; }
}

/* ------------------------------------------------------------ Menü-Knopf (Handy, base.html) */
.nav-collapse { display: contents; }
.nav-toggle {
  display: none; align-items: center; gap: 8px; margin-left: auto; padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; background: none;
  color: var(--ink-contrast); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

/* „Mehr“ in der Werkzeugleiste des Bogens (Optionen, Drucken, Zauberkarten, JSON-Export) */
.toolbar-more { position: relative; }
.toolbar-more > summary { list-style: none; }
.toolbar-more > summary::-webkit-details-marker { display: none; }
.toolbar-more > summary::after { content: " ▾"; font-size: 11px; }
.toolbar-more-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; min-width: 240px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--paper); border: var(--ui-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.toolbar-more-panel button, .toolbar-more-panel a {
  display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; text-decoration: none;
  text-align: left; cursor: pointer;
}
.toolbar-more-panel small { font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.toolbar-more-panel button:hover, .toolbar-more-panel a:hover { background: var(--field); }

/* ------------------------------------------------------------ Zauber-Übersicht */
.spell-filter { margin-bottom: 16px; }
.spell-filter-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.spell-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.spell-filter-field span { text-transform: uppercase; color: var(--ink-soft); }
.spell-filter-field input, .spell-filter-field select {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font: inherit;
  background: var(--paper); color: var(--ink); min-width: 160px;
}
.spell-table-wrap { padding: 5px 0 0 10px; overflow-x: auto; }
.spell-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.spell-table th, .spell-table td { padding: 9px 12px; text-align: left; border-bottom: var(--ui-border); }
.spell-table th {
  background: var(--field); color: var(--ink-soft); text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
  position: sticky; top: 0;
}
.spell-table th:first-child { border-top-left-radius: 10px; }
.spell-table th:last-child { border-top-right-radius: 10px; }
.spell-table th a { color: inherit; text-decoration: none; }
.spell-table th a:hover { color: var(--accent); }
.spell-table th a.spell-sort-active { color: var(--accent); font-weight: 700; }
.spell-table tbody tr:hover { background: var(--field); }
.spell-table td:first-child { font-weight: 700; white-space: normal; }
.spell-table td:nth-child(6) { white-space: normal; }

.spell-detail h1 { margin: 0 0 4px; }
.spell-detail-sub { margin: 0 0 12px; text-transform: uppercase; font-size: 12px; letter-spacing: .03em; }
.spell-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px;
  margin: 0 0 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.spell-detail-grid dt { font-size: 11px; text-transform: uppercase; color: var(--ink-soft); }
.spell-detail-grid dd { margin: 2px 0 0; font-size: 15px; }
.spell-detail-classes { margin-bottom: 16px; }
.spell-detail-note { font-size: 12px; }
.list-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.import-form { display: inline-flex; gap: 6px; align-items: center; }
.import-form input[type="file"] { display: none; }
/* Bestiarium: Wertekasten (/bestiarium/<pk>/) im Stil der Monsterhandbuch-Kästen */
.stat-block { max-width: 760px; border-top: 4px solid var(--accent); border-bottom: 4px solid var(--accent); }
.stat-block h1 { margin: 0; color: var(--accent); font-variant: small-caps; letter-spacing: .02em; }
.stat-block-type { margin: 2px 0 0; font-style: italic; }
.stat-block-rule { height: 3px; margin: 10px 0; background: linear-gradient(90deg, var(--accent), transparent); }
.stat-block-lines { margin: 0; }
.stat-block-lines > div { margin: 2px 0; }
.stat-block-lines dt { display: inline; font-weight: 700; color: var(--accent); }
.stat-block-lines dt::after { content: " "; }
.stat-block-lines dd { display: inline; margin: 0; }
.stat-block-abilities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; text-align: center; }
.stat-block-abilities strong { display: block; color: var(--accent); }
.stat-block-section {
  margin: 16px 0 6px; font-size: 18px; font-variant: small-caps; color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.stat-block-action { margin: 6px 0; line-height: 1.45; }
@media (max-width: 720px) {
  .stat-block-abilities { grid-template-columns: repeat(3, 1fr); }
}

/* Dungeongenerator (/generatoren/dungeon/): SVG-Karte, Farben aus den :root-Variablen (Dark Mode) */
.dungeon-map-wrap { margin-top: 12px; overflow-x: auto; }
.dungeon-map { display: block; width: 100%; max-width: 960px; height: auto; border-radius: 6px; }
.dungeon-rock { fill: var(--ink-soft); }
.dungeon-floor { fill: var(--paper); }
.dungeon-gridline { fill: none; stroke: var(--line); stroke-width: 0.6; }
.dungeon-room { stroke: var(--ink); stroke-width: 1.5; }
.dungeon-stairs { stroke: var(--ink); stroke-width: 2; }
.dungeon-door { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.dungeon-door-verschlossen { fill: var(--accent); }
.dungeon-door-geheim { fill: none; stroke-dasharray: 2 2; }
.dungeon-door-mark { font-size: 9px; font-weight: 700; text-anchor: middle; fill: var(--accent); }
.dungeon-label { font-size: 14px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.dungeon-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.dungeon-key {
  display: inline-grid; place-items: center; width: 14px; height: 8px; margin-right: -8px;
  border: 1px solid var(--ink); background: var(--paper); font-size: 8px; color: var(--accent);
}
.dungeon-key-verschlossen { background: var(--accent); }
.dungeon-key-geheim { border-style: dashed; background: none; }
.dungeon-key-stairs { font-weight: 700; margin-right: -8px; }
.dungeon-room-size { font-size: 12px; font-weight: 400; }
/* Wald: Lichtungen auf Waldboden, dazwischen Baumkronen; Randbäume strecken Äste über den Boden */
.dungeon-forest .dungeon-rock { fill: var(--forest-dark); }
.dungeon-forest .dungeon-floor { fill: var(--forest-floor); }
.forest-crown { stroke: var(--forest-dark); stroke-width: 1.2; }
.forest-crown-0 { fill: var(--forest-crown-0); }
.forest-crown-1 { fill: var(--forest-crown-1); }
.forest-crown-2 { fill: var(--forest-crown-2); }
.forest-light { fill: #fff; opacity: .08; pointer-events: none; }
.forest-branch, .forest-twig { fill: none; stroke: var(--forest-branch); stroke-linecap: round; }
.forest-branch { stroke-width: 3; }
.forest-twig { stroke-width: 1.6; }
.forest-leaf { stroke: var(--forest-dark); stroke-width: .6; opacity: .92; }
.forest-trees { pointer-events: none; }
.dungeon-forest .dungeon-label { paint-order: stroke; stroke: var(--forest-floor); stroke-width: 3px; }
.dungeon-key-baum { width: 10px; height: 10px; border-radius: 50%; border-color: var(--forest-dark);
  background: var(--forest-crown-1); }
@media print {
  .dungeon-rock { fill: #bbb; }
  .dungeon-forest .dungeon-rock { fill: #7d9a6f; }
}

/* Tavernengenerator (/generatoren/taverne/) */
.tavern { margin-top: 16px; }
.tavern-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.tavern-name { margin: 0; font-size: 26px; color: var(--accent); font-variant: small-caps; }
.tavern-options { margin: 2px 0 0; font-size: 13px; }
.tavern-section { margin-top: 16px; }
.tavern-section h3 {
  margin: 0 0 6px; display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.tavern-section p { margin: 0 0 4px; line-height: 1.5; }
.tavern-reroll { font-size: 12px; font-weight: 400; }
.tavern-list { margin: 0; padding-left: 20px; line-height: 1.5; }
/* Reisegenerator (/generatoren/reise/): je Tag Wetter und zwei Ereignisse */
.journey-weather { font-size: 14px; font-weight: 400; }
.journey-event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.journey-part { min-width: 48px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); }
@media print { .journey-day { break-inside: avoid; } }
/* Dungeon mit mehreren Ebenen: Überschrift je Ebene, im Druck jede Ebene auf neuer Seite */
.dungeon-level-title { margin: 24px 0 8px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
@media print { .dungeon-level-title:not(#ebene-1) { break-before: page; border-top: 0; } }
.settlement-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; line-height: 1.5; }
.settlement-facts dt { font-weight: 700; }
.settlement-facts dd { margin: 0; }
@media print { .settlement .tavern-section { break-inside: avoid; } }
/* Namensgenerator (/generatoren/namen/): Namen in Spalten */
.name-list { margin: 16px 0 0; padding-left: 24px; columns: 3 200px; column-gap: 24px; font-size: 18px; line-height: 1.7; }
/* NSC-Generator (/generatoren/nsc/): eine Karte je NSC */
.npc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.npc-card h2 { margin: 0; font-size: 22px; color: var(--accent); font-variant: small-caps; }
.npc-card dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; line-height: 1.4; }
.npc-card dt { font-size: 11px; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.npc-card dd { margin: 0; }
@media print {
  .npc-card { break-inside: avoid; }
}
.tavern-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.tavern-menu th { text-align: left; }
.tavern-menu td:last-child { text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .tavern-columns { grid-template-columns: 1fr; }
}
@media print {
  .tavern-reroll { display: none; }
}

/* Ladengenerator (/generatoren/laden/) */
.shop-hint, .shop-seed { margin: 8px 0 0; font-size: 13px; }
.shop-result-head { margin-top: 20px; }
.shop-result-head h2 { margin: 0; }
.shop-specials { margin-bottom: 16px; }
.shop-owner { margin-bottom: 16px; }
.shop-owner h3 { margin: 0 0 2px; }
.shop-specials h3, .spell-table-wrap > h3 { margin: 0 0 8px; }
.shop-group { margin: 16px 0 4px; font-size: 14px; }
.shop-unavailable { margin: 16px 0 0; font-size: 13px; }
.shop-rarity-ungewoehnlich td:first-child { border-left: 3px solid #2e8b57; }
.shop-rarity-selten td:first-child { border-left: 3px solid #2f6fa8; }
.shop-rarity-sehr_selten td:first-child { border-left: 3px solid #7a5ea8; }
.shop-rarity-legendaer td:first-child { border-left: 3px solid #c07a1e; }
.shop-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.shop-type { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.shop-type:hover { border-color: var(--accent); }
.beast-filter-hint { margin: 8px 0 0; font-size: 13px; }  /* Tiergestalten: Druidenstufen-Filter */

/* ------------------------------------------------------------ Verwaltung (Stammdaten) */
.ref-breadcrumb { font-size: 13px; margin: 0 0 8px; color: var(--muted); }
.ref-breadcrumb a { text-decoration: none; }
/* Verwaltung (reference/index.html, _layout.html): Gruppen mit Farbe, Karten je Stammdatenart,
   Seitenleiste auf Liste, Formular und Import */
.ref-group-regelwerk { --ref-a: #23826f; }
.ref-group-ausruestung { --ref-a: #b8731c; }
.ref-group-kreaturen { --ref-a: #b02a2a; }
.ref-group-generatoren { --ref-a: #7446ad; }
/* Dark Mode: hellere Töne, sonst verschwinden Überschriften und Ränder auf dunklem Grund */
:root[data-theme="dark"] .ref-group-regelwerk { --ref-a: #2fa088; }
:root[data-theme="dark"] .ref-group-ausruestung { --ref-a: #d08a2c; }
:root[data-theme="dark"] .ref-group-kreaturen { --ref-a: #d24545; }
:root[data-theme="dark"] .ref-group-generatoren { --ref-a: #9466d0; }
.ref-intro { margin: 4px 0 0; }
.ref-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ref-quick { width: 200px; padding: 6px 12px; border-radius: 999px; border: var(--ui-border); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.ref-group { margin-top: 26px; }
.ref-group-title { margin: 0 0 10px; font-size: 20px; padding-left: 10px; border-left: 4px solid var(--ref-a); }
.ref-group-title .muted { font-size: 14px; font-weight: 400; margin-left: 6px; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ref-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-top: 3px solid var(--ref-a); }
.ref-card-head { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ref-card-head strong { display: block; font-size: 17px; }
.ref-card-head:hover strong { color: var(--link); }
.ref-card-icon { flex: none; width: 38px; height: 38px; padding: 6px; border-radius: 10px; color: #fff; background: var(--ref-a); }
.ref-count { display: block; font-size: 13px; color: var(--ink-soft); }
.ref-status { margin: 0; font-size: 13px; }
.ref-card-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 700; }
.ref-card-actions a { text-decoration: none; }
.ref-card-actions a:hover { text-decoration: underline; }
.ref-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.ref-sidebar {
  position: sticky; top: 12px; display: flex; flex-direction: column; gap: 1px; padding: 10px;
  background: var(--paper); border: var(--ui-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.ref-sidebar a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.ref-sidebar a svg { flex: none; width: 18px; height: 18px; color: var(--ref-a, var(--ink-soft)); }
.ref-sidebar a:hover { background: color-mix(in srgb, var(--ref-a, var(--ink)) 14%, transparent); }
.ref-sidebar a.active { background: var(--ref-a, var(--ink)); color: #fff; font-weight: 700; }
.ref-sidebar a.active svg { color: inherit; }
.ref-sidebar-home { font-weight: 700; }
/* Bereiche mit eigener Hintergrundfarbe (Farbe aus .ref-group-<key>) */
.ref-sidebar-section {
  display: flex; flex-direction: column; gap: 1px; margin-top: 8px; padding: 4px 4px 6px;
  border-radius: 10px; border-left: 3px solid var(--ref-a);
  background: color-mix(in srgb, var(--ref-a) 9%, var(--paper));
}
.ref-sidebar-group { margin: 6px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ref-a); }
.ref-main > .card.narrow { margin-top: 0; }
@media (max-width: 1050px) {
  /* schmal: Seitenleiste wird eine wischbare Zeile über dem Inhalt */
  .ref-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ref-sidebar { position: relative; flex-direction: row; overflow-x: auto; max-height: none; scrollbar-width: none; padding: 6px; }
  .ref-sidebar::-webkit-scrollbar { display: none; }
  .ref-sidebar a { white-space: nowrap; }
  .ref-sidebar-section { flex-direction: row; flex: none; margin: 0 0 0 6px; padding: 3px; border-left-width: 3px; }
  .ref-sidebar-group { display: none; }
}
@media print { .ref-sidebar { display: none; } .ref-layout { display: block; } }
.nav-panel-admin { min-width: 400px; }
.nav-admin-group {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; margin: 3px 0; padding: 2px 4px 4px;
  border-radius: 10px; border-left: 3px solid var(--ref-a);
  background: color-mix(in srgb, var(--ref-a) 9%, var(--paper));
}
.nav-admin-group .nav-group { grid-column: 1 / -1; color: var(--ref-a); }
.nav-panel .nav-admin-group a:hover, .nav-panel .nav-admin-group a:focus-visible {
  background: color-mix(in srgb, var(--ref-a) 18%, var(--paper)); border-left-color: var(--ref-a);
}
.nav-group { margin: 6px 6px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) { .nav-panel-admin { min-width: 0; } }
.ref-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ref-actions .btn-small { margin: 0; }
.ref-total { font-size: 16px; font-weight: 400; }
.ref-table td { white-space: normal; }
.ref-table td a { font-weight: 700; }
.ref-row-actions { text-align: right; white-space: nowrap !important; }
.ref-row-actions a { font-weight: 400 !important; margin-left: 10px; font-size: 12px; }
.ref-row-actions .danger, .ref-delete-link { color: var(--accent); }
.ref-delete-link { margin-left: auto; }
.ref-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0; }
.ref-form fieldset { border: 0; border-top: 1px solid var(--line); margin: 0 0 12px; padding: 12px 0 0; }
.ref-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.ref-form legend { font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .03em; color: var(--ink-soft); padding: 0 8px 0 0; }
.ref-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.ref-field { display: flex; flex-direction: column; gap: 4px; }
.ref-field > label, .ref-field-label { font-size: 12px; text-transform: uppercase; color: var(--ink-soft); }
.ref-field input:not([type=checkbox]), .ref-field select {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; font: inherit;
  background: var(--paper); color: var(--ink); width: 100%;
}
.ref-field-checkbox { justify-content: flex-end; }
.ref-field-checkbox > label { font-size: 15px; text-transform: none; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.ref-field-checkboxselectmultiple { grid-column: 1 / -1; }
.ref-field-checkboxselectmultiple > div {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px;
}
.ref-field-checkboxselectmultiple > div label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ref-field.has-error input, .ref-field.has-error select { border-color: var(--accent); }
.ref-inline td { white-space: normal; vertical-align: top; }
.ref-inline input:not([type=checkbox]), .ref-inline select {
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit;
  background: var(--paper); color: var(--ink); width: 100%; min-width: 140px;
}
.ref-inline tr.has-error input { border-color: var(--accent); }
.ref-inline-hint { font-size: 12px; }
.ref-errors { color: var(--accent); max-height: 320px; overflow-y: auto; font-size: 13px; }
.ref-import-result { margin-bottom: 16px; }
.ref-import-result h2 { margin-top: 0; font-size: 18px; }
.ref-import-rules { font-size: 13px; }
.ref-kind-new { background: var(--accent); }
.ref-kind-changed { background: #2f6fa8; }

/* ------------------------------------------------------------ Änderungsprotokoll */
.changelog-intro { margin-top: -8px; }
.changelog-release { margin-bottom: 12px; padding-top: 14px; padding-bottom: 14px; }
.changelog-release > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none;
}
.changelog-release > summary::-webkit-details-marker { display: none; }
.changelog-release > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .15s;
}
.changelog-release[open] > summary::after { transform: rotate(-135deg); }
.changelog-release[open] > summary { margin-bottom: 8px; }
.changelog-summary { display: flex; flex-direction: column; gap: 2px; }
.changelog-title { font-size: 18px; font-weight: 700; }
.changelog-date { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.changelog-new {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--accent-soft); color: var(--link); white-space: nowrap;
}
@media print { .changelog-release > summary::after { display: none; } }
.changelog-group h3 { margin: 12px 0 4px; font-size: 13px; }
.changelog-group ul { margin: 0; padding-left: 20px; }
.changelog-group li { margin: 3px 0; line-height: 1.4; }
.changelog-kind {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink); background: var(--ink-soft);
}
.changelog-neu .changelog-kind { background: var(--accent); }
.changelog-verbessert .changelog-kind { background: #2f6fa8; }
.changelog-behoben .changelog-kind { background: var(--ok); }
/* Neue Einträge seit dem letzten Besuch (base.html) */
.topnav a.has-news::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  border-radius: 50%; background: #e5533d; vertical-align: super;
}

/* Info-Modal an den Zauberzeilen des Bogens (natives <dialog>, siehe sheet.js): zeigt dieselben
   .spell-detail-* Bausteine wie die eigenständige Detailseite, nur ohne .spell-detail-note (die
   verweist auf „diese Seite“, passt im Modal nicht) und ohne .card (das Dialog-Element liefert
   schon Rahmen/Hintergrund). */
.spell-modal {
  max-width: 480px; width: calc(100% - 32px); padding: 24px; border: var(--border);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.spell-modal::backdrop { background: rgba(0, 0, 0, .5); }
.spell-modal-close {
  position: absolute; top: 10px; right: 10px; border: none; background: none; padding: 4px 8px;
  font-size: 16px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
#spell-modal-body .spell-detail-note { display: none; }
#spell-modal-body .spell-detail-loading { color: var(--muted); }

/* ------------------------------------------------------------ Toolbar */
.toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; background: var(--page-bg);
  background: color-mix(in srgb, var(--page-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tabs {
  display: flex; gap: 2px; flex-wrap: wrap; padding: 4px; border-radius: 12px;
  background: var(--paper); border: var(--ui-border); box-shadow: var(--shadow-1);
}
.tabs a {
  padding: 6px 12px; border-radius: 9px; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
  transition: background .15s, color .15s;
}
.tabs a:hover { color: var(--ink); background: var(--field); }
.tabs a.active { background: var(--ink); color: var(--ink-contrast); }
.toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Autosave (sheet.js): „Gespeichert 14:32“ / „Speichert …“ / Fehler */
.autosave-status { font-size: 13px; color: var(--muted); }
.autosave-status[data-state="error"] { color: var(--accent); }
.stale-banner { flex-basis: 100%; margin: 0; }
.stale-banner .btn { margin-left: 8px; }

/* ------------------------------------------------------------ Blatt */
.page {
  display: none;
  background-color: var(--paper);
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  /* Sprung zum Seitenanfang landet unter der klebenden Werkzeugleiste (Höhe aus pages.js) */
  scroll-margin-top: calc(var(--toolbar-h, 120px) + 8px);
}
.page.active { display: block; }
/* Altes Papier: dezente Fleckenmaserung plus ein Hauch der Klassen-Akzentfarbe in den Ecken
   (siehe --class-color) – bewusst sehr blass, damit der Text überall lesbar bleibt. Beim Drucken
   abgeschaltet (spart Tinte, siehe @media print unten). Auch auf .box, nicht nur .page: .box
   deckt mit seiner eigenen flachen --paper-Füllung fast die gesamte Bogenfläche ab, ohne das hier
   wäre von der Papierstruktur praktisch nichts zu sehen. */
.page, .box {
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--class-color) 20%, transparent), transparent 42%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--class-color) 18%, transparent), transparent 46%),
    radial-gradient(ellipse at 50% 0%, rgba(120, 100, 60, .07), transparent 60%),
    radial-gradient(ellipse at 18% 92%, rgba(120, 100, 60, .06), transparent 55%),
    radial-gradient(ellipse at 92% 12%, rgba(120, 100, 60, .06), transparent 55%);
}
:root[data-theme="dark"] .page,
:root[data-theme="dark"] .box {
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--class-color) 14%, transparent), transparent 42%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--class-color) 12%, transparent), transparent 46%),
    radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, .3), transparent 60%),
    radial-gradient(ellipse at 18% 92%, rgba(0, 0, 0, .25), transparent 55%);
}

.page input, .page select, .page textarea {
  font: inherit; color: var(--ink); background: transparent; border: 0; outline: none;
}
.page input:focus, .page select:focus, .page textarea:focus { background: var(--focus); }
.page textarea {
  width: 100%; resize: vertical; display: block;
  line-height: 24px; min-height: 120px; padding: 0 4px;
  background-image: repeating-linear-gradient(transparent 0 23px, var(--line) 23px 24px);
  background-attachment: local;
}
.page textarea:focus { background-color: var(--focus-strong); }
.page input[type="number"] { -moz-appearance: textfield; }
.page input[type="number"]::-webkit-inner-spin-button { opacity: .4; }

.box {
  position: relative; border: var(--border); border-color: var(--class-color);
  border-radius: var(--radius); background-color: var(--paper); padding: 10px 10px 26px;
}
.box-gray { background: var(--panel); border-radius: var(--radius); padding: 10px; }
.box-title {
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: .03em;
}
/* Aktionen eines Kastens (Übernehmen, Auswahl-Panel öffnen, Zauberkarten): immer oben rechts in
   seiner Kopfzeile, alle im selben kleinen Pillen-Stil; nicht gedruckt. Knöpfe mit aria-expanded
   öffnen ein Panel und zeigen dessen Zustand als Pfeil (pages.js initPanels). */
.box-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 6px; margin: -4px -4px 6px; }
.box-action {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid var(--class-color);
  border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700;
  line-height: 1.5; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.box-action:hover { background: var(--field); }
.box-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.box-action[aria-expanded]::after { content: "▾"; font-size: 10px; transition: transform .15s; }
.box-action[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-contrast); }
.box-action[aria-expanded="true"]::after { transform: rotate(180deg); }
.box-action[hidden] { display: none; }
.box-action-status { font-size: 12px; margin-right: auto; }

/* ---------- Kopf ---------- */
.sheet-head {
  display: grid; grid-template-columns: minmax(260px, 1fr) 1.6fr; gap: 16px;
  align-items: end; margin-bottom: 18px;
}
.logo {
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 22px;
  margin-bottom: 6px; color: var(--class-color); transition: color .2s;
}
.banner-field {
  border: var(--border); border-color: var(--class-color); border-left-width: 8px;
  border-radius: 4px 20px 20px 4px; padding: 8px 12px 4px; background: var(--paper);
  transition: border-left-color .2s;
}
.banner-field input, .banner-mirror {
  width: 100%; font-size: 26px; font-weight: 700; min-height: 34px;
  border-bottom: 1px solid var(--ink) !important;
}
.banner-field label, .head-field label {
  display: block; text-transform: uppercase; font-size: 11px; margin-top: 3px;
}
.head-box {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px;
  border: var(--border); border-color: var(--class-color); border-radius: var(--radius);
  padding: 12px 16px;
}
.head-box.gray { background: var(--panel); display: block; }
.head-field input, .class-summary {
  width: 100%; border-bottom: 1px solid var(--ink-soft) !important; padding: 3px 2px;
}
.class-summary {
  text-align: left; font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--ink); min-height: 27px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.background-skills { display: block; font-size: 10px; margin-top: 2px; }
.background-skills:empty { display: none; }
.background-details { font-size: 12px; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }

/* Auswahl + Freitext, z. B. Volk und Hintergrund */
.picker-field { display: flex; gap: 6px; }
.picker-field select {
  flex: 1; min-width: 0; padding: 3px 0; border-bottom: 1px solid var(--ink-soft) !important;
}
.picker-field.custom select { flex: 0 1 40%; }
.picker-field input { flex: 1; min-width: 0; }
.class-summary:hover { background: var(--field); }

/* ---------- Volk ---------- */
.race-info {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  margin: -8px 0 16px; padding: 8px 12px; font-size: 13px;
  background: var(--panel); border-radius: var(--radius);
}
.race-info b { font-weight: 700; }
.race-review { color: var(--warn-text); font-size: 12px; }
.race-bonus-controls { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.race-choice-opt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.race-choice { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.race-manual { color: var(--ink-soft); font-size: 12px; }
.ability-race {
  position: absolute; top: -8px; right: -6px; padding: 0 5px; border-radius: 8px;
  font-size: 11px; font-weight: 700; background: #fff4d6; border: 1px solid #c98a00; color: #6b4700;
}

/* ---------- Aufklappbares Panel (Klassen, Optionen) ---------- */
.panel {
  display: none; margin: -6px 0 18px; padding: 12px 14px;
  border: 1px dashed var(--ink-soft); border-radius: var(--radius); background: var(--field);
}
.panel.open { display: block; }
.panel-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.option-row { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 0; }
.weapon-prof-group { margin-bottom: 10px; }
.weapon-prof-group:last-child { margin-bottom: 0; }
.weapon-prof-all { padding-bottom: 2px; }
.weapon-prof-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px 12px; margin-left: 20px;
}
.class-row {
  display: grid; grid-template-columns: 1fr 1.4fr 90px 28px; gap: 10px; align-items: end;
  padding: 4px 0;
}
.class-row label { font-size: 11px; text-transform: uppercase; display: flex; flex-direction: column; gap: 2px; }
.class-row select, .class-row input {
  border: 1px solid var(--line) !important; border-radius: 6px; padding: 5px; background: var(--paper);
  text-transform: none; font-size: 15px;
}
.row-errors { grid-column: 1 / -1; }
.row-remove {
  border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 4px;
}
.row-remove:hover { color: var(--accent); }

/* ---------- Seite 1 Raster ---------- */
.p1-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.col-left, .col-mid, .col-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.left-top { display: grid; grid-template-columns: 104px 1fr; gap: 10px; }
.left-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.abilities { display: flex; flex-direction: column; gap: 16px; padding: 10px 8px 16px; }
.ability {
  position: relative; background: var(--paper); border: var(--border); border-radius: 10px;
  text-align: center; padding: 6px 4px 20px;
}
.ability-label { font-size: 11px; text-transform: uppercase; line-height: 1.1; min-height: 24px; }
.ability-mod { font-size: 30px; font-weight: 700; line-height: 1.1; }
.ability-score {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  width: 52px; height: 28px; background: var(--paper); border: var(--border); border-radius: 50%;
}
.ability-score input { width: 100%; height: 100%; text-align: center; font-weight: 700; border-radius: 50%; }
/* Zeigt den Gesamtwert (Grundwert + Volksbonus) anstelle des Grundwerts, solange nicht bearbeitet
   wird – Klicken/Fokussieren blendet die Überlagerung aus und gibt den Grundwert zum Bearbeiten frei. */
.ability-total {
  display: grid; place-items: center; position: absolute; inset: 0;
  font-weight: 700; border-radius: 50%; background: var(--paper); pointer-events: none;
}
.ability-score input:focus + .ability-total { display: none; }

.pill { display: flex; align-items: center; }
.pill-value {
  flex: none; width: 46px; height: 42px; display: grid; place-items: center;
  border: var(--border); background: var(--paper); font-size: 20px; font-weight: 700; z-index: 1;
}
.pill-value.round { border-radius: 50%; }
.pill-value.check-square { border-radius: 8px; cursor: pointer; }
.pill-value.check-square input { width: 22px; height: 22px; accent-color: var(--ink); cursor: pointer; }
.pill-label {
  flex: 1; margin-left: -8px; padding: 8px 10px 8px 16px; border: var(--border); border-left: 0;
  border-radius: 0 10px 10px 0; text-transform: uppercase; font-size: 12px; text-align: center;
}
.pill.wide .pill-label { font-size: 11px; }

.list-box { padding-bottom: 28px; }
.prof-line { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 14px; }
.prof-line .val {
  width: 30px; flex: none; text-align: center; border-bottom: 1px solid var(--ink); font-weight: 700;
}
.prof-line .lbl small { color: var(--muted); }

.dot-check { display: inline-grid; flex: none; cursor: pointer; }
.dot-check input, .prof-dot {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 14px; height: 14px; border: 1.5px solid var(--ink); border-radius: 50%;
  background: var(--paper); cursor: pointer; flex: none; padding: 0;
}
.dot-check input:checked, .prof-dot[data-state="1"] { background: var(--ink); }
.prof-dot[data-state="2"] { background: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }

/* ---------- Kampfwerte ---------- */
.combat { display: flex; flex-direction: column; gap: 10px; }
.combat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.combat-row.two { grid-template-columns: 1fr 1fr; }
.shield, .stat-box {
  background: var(--paper); border: var(--border); text-align: center; padding: 8px 4px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 92px;
}
.shield { border-radius: 10px 10px 50% 50% / 10px 10px 36% 36%; padding-bottom: 14px; }
.stat-box { border-radius: 10px; }
.shield input, .stat-box > input, .stat-value {
  width: 100%; text-align: center; font-size: 26px; font-weight: 700;
}
.shield label, .stat-box label { font-size: 10px; text-transform: uppercase; line-height: 1.1; }
.stat-extra { font-size: 10px; color: var(--muted); }
.stat-extra input { width: 34px; text-align: center; border-bottom: 1px solid var(--line) !important; font-size: 12px; }

.armor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; }
.armor-row select {
  flex: 1; min-width: 140px; border: 1px solid var(--line) !important; border-radius: 6px;
  padding: 5px; background: var(--paper);
}
.armor-hint { flex-basis: 100%; font-size: 11px; color: var(--ink-soft); }
.armor-warning { color: var(--accent); }

.hp { padding-top: 6px; }
.hp-max { display: flex; align-items: baseline; gap: 6px; font-size: 11px; flex-wrap: wrap; }
.hp-max input { width: 60px; border-bottom: 1px solid var(--ink) !important; font-size: 14px; }
.hp-max .hint { color: var(--muted); }
.hp > input { width: 100%; text-align: center; font-size: 34px; font-weight: 700; padding: 6px 0; }
/* Schaden/Heilung aus dem Kampf-Tracker (live.js): Kasten blinkt kurz, Betrag oben rechts */
.box.hp { position: relative; }
.hp-toast {
  position: absolute; top: 4px; right: 8px; font-size: 15px; font-weight: 700;
  color: var(--hp-damage);
}
.hp-toast[data-kind="heal"] { color: var(--hp-heal); }
.hp-flash-damage { animation: hp-flash-damage 1.6s ease-out; }
.hp-flash-heal { animation: hp-flash-heal 1.6s ease-out; }
@keyframes hp-flash-damage {
  0%, 35% { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--hp-damage) 30%, transparent), 0 0 0 3px var(--hp-damage); }
  100% { box-shadow: none; }
}
@keyframes hp-flash-heal {
  0%, 35% { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--hp-heal) 30%, transparent), 0 0 0 3px var(--hp-heal); }
  100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* ohne Animation bleibt nur der Rahmen kurz sichtbar (live.js entfernt die Klasse) */
  .hp-flash-damage { animation: none; box-shadow: 0 0 0 3px var(--hp-damage); }
  .hp-flash-heal { animation: none; box-shadow: 0 0 0 3px var(--hp-heal); }
}

.box.small { padding: 8px 8px 30px; font-size: 12px; }
.hd-total { color: var(--ink-soft); font-size: 11px; margin-bottom: 4px; }
.box.small > input { width: 100%; text-align: center; font-size: 18px; border-bottom: 1px solid var(--line) !important; }
.death-line { display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; margin: 6px 0; }

/* Vorteile bei Rettungswürfen, Resistenzen und Immunitäten (rules.defenses + eigene Eingaben),
   Barden-Werte (rules.bard) */
.save-notes { margin-top: 6px; }
.save-notes input, .defense-row input {
  width: 100%; font-size: 12px; border-bottom: 1px solid var(--line) !important;
}
.defense-hint { display: block; margin: 2px 0; color: var(--ink-soft); font-size: 11px; line-height: 1.3; }
.box.defenses, .box.bard-box { padding: 8px 10px 30px; font-size: 12px; }
.defense-row + .defense-row { margin-top: 6px; }
.defense-label { display: block; font-size: 10px; text-transform: uppercase; color: var(--ink-soft); }
.bard-line { color: var(--ink-soft); line-height: 1.6; }
.bard-line .pips { vertical-align: middle; margin-left: 4px; }
.bard-line strong { color: var(--ink); }
.bard-line + .bard-line { margin-top: 6px; }

.pips { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pip {
  width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: var(--paper); padding: 0; cursor: pointer;
}
.pip.on { background: var(--ink); }
.pips.fail .pip.on { background: var(--accent); border-color: var(--accent); }

/* ---------- Angriffe ---------- */
.attack-head, .attack-row {
  display: grid; grid-template-columns: 1.2fr .5fr 1.15fr .7fr 22px; gap: 5px 4px; align-items: center;
}
.attack-head { font-size: 11px; text-transform: uppercase; text-align: center; margin-bottom: 4px; }
.attack-fighting-style {
  display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 8px;
}
.attack-fighting-style select { flex: none; width: auto; }
.attack-row { margin-bottom: 8px; }
.attack-row input { background: var(--field) !important; border-radius: 3px; padding: 5px; width: 100%; min-width: 0; }
.attack-row input:focus { background: var(--focus) !important; }
/* Vorschlagszeile unter dem Angriff (Waffe erkannt): Angriffsbonus + Schaden, nur Hinweis */
.attack-suggestion { grid-column: 1 / 5; margin: -2px 0 2px; }
/* Munitionszeile (nur bei Waffen mit der Eigenschaft „Munition“, siehe needs_ammo) */
.attack-ammo {
  grid-column: 1 / 5; margin: 0 0 2px; display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-soft);
}
.attack-ammo label { display: flex; align-items: center; gap: 4px; text-transform: none; }
.attack-ammo input[type="number"] { width: 48px !important; padding: 2px 4px !important; }
.attack-ammo .pips { gap: 3px; }
.attack-ammo .pip { width: 12px; height: 12px; }
/* Magischer Waffenbonus (immer sichtbar) + Zweihändig-Kästchen (nur bei "vielseitig") */
.attack-extra {
  grid-column: 1 / 5; margin: 0 0 2px; display: flex; align-items: center; gap: 14px;
  font-size: 11px; color: var(--ink-soft);
}
.attack-extra label { display: flex; align-items: center; gap: 4px; text-transform: none; }
.attack-magic-bonus input[type="number"] { width: 40px !important; padding: 2px 4px !important; }
/* Zusatzzeile unter dem Angriff: schmaler, kleiner, über die Eingabespalten */
.attack-notes { grid-column: 1 / 5; margin-top: -2px; }
.attack-row .attack-notes input {
  padding: 2px 5px; font-size: 12px; color: var(--ink-soft); background: transparent !important;
  border-bottom: 1px dotted var(--line) !important; border-radius: 0;
}
.attack-row .attack-notes input:focus { background: var(--focus) !important; }
/* Erkannte Gifte im Feld „Zusatz“ (attacks.js initPoisonLinks) */
.attack-poison-links { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; margin-top: 1px; }
.attack-poison-links a { color: var(--link); text-decoration: none; }
.attack-poison-links a:hover { text-decoration: underline; }
@media print { .attack-poison-links { display: none; } }

/* ---------- Ausrüstung ---------- */
/* Münzen als Zeile über der Liste – so bleibt den Gegenstandsnamen die volle Kastenbreite */
.equipment { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
.equipment > .box-actions { grid-column: 1 / -1; margin-bottom: 0; }
.equipment-list { min-width: 0; }
.equipment-head, .equipment-row {
  display: grid; grid-template-columns: 1fr 42px 52px 34px 22px; gap: 4px; align-items: center;
}
.attune-check { display: flex; justify-content: center; cursor: pointer; }
.attune-check input { width: auto; }
.equipment-head { font-size: 11px; text-transform: uppercase; text-align: center; margin-bottom: 4px; }
.equipment-head span:first-child { text-align: left; padding-left: 4px; }
.equipment-row { border-bottom: 1px solid var(--line); padding: 2px 0; }
.equipment-row input { width: 100%; min-width: 0; padding: 3px 4px; }
.equipment-row input[name$="-quantity"], .equipment-row input[name$="-weight"] { text-align: center; }
.equipment-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px;
}
.carry-extra { font-size: 11px; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.overloaded { color: var(--accent); }
.coins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.coin { display: flex; align-items: center; min-width: 0; font-size: 11px; font-weight: 700; }
.coin span {
  width: 26px; height: 26px; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); z-index: 1;
}
.coin input {
  width: 100%; min-width: 0; margin-left: -6px; padding: 5px 4px 5px 9px; text-align: center;
  border: 1.5px solid var(--ink) !important; border-radius: 0 12px 12px 0; font-size: 13px;
}
/* Ohne Pfeile: in der schmalen Zeile bliebe sonst kaum Platz für die Zahl */
.page .coin input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.page .coin input[type="number"]::-webkit-inner-spin-button,
.page .coin input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.traits { display: flex; flex-direction: column; gap: 10px; }
.traits textarea { min-height: 96px; }
.features textarea { min-height: 700px; }
/* Merkmal-Tabelle über dem Freitext: Name und Herkunft je Zeile, Antippen öffnet das Fenster */
.features > .box-actions { margin-bottom: 2px; }
.feature-table { margin-bottom: 8px; }
.features:has(.feature-row:not([hidden])) textarea { min-height: 360px; }
.feature-head, .feature-row {
  display: grid; grid-template-columns: 1fr minmax(0, 40%) 22px; gap: 4px; align-items: center;
}
.feature-head { font-size: 11px; text-transform: uppercase; margin-bottom: 2px; }
.feature-head span { padding-left: 4px; }
.feature-row { border-bottom: 1px solid var(--line); }
.feature-open {
  grid-column: 1 / 3; display: grid; grid-template-columns: subgrid; align-items: baseline;
  width: 100%; min-width: 0; padding: 4px; border: 0; background: none; color: inherit;
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.feature-open:hover, .feature-open:focus-visible { background: var(--field); }
.feature-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.feature-name { font-weight: 700; overflow-wrap: anywhere; }
.feature-name:empty::before { content: "(ohne Namen)"; font-weight: 400; color: var(--muted); }
.feature-source { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.feature-table [data-add-feature] { margin-top: 6px; }
.feature-modal { max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; }
.feature-modal h2 { margin: 0 24px 4px 0; font-size: 20px; }
.feature-modal-sub { margin: 0 0 8px; }
.feature-fields { display: grid; gap: 10px; margin-right: 20px; }
.feature-fields label { display: grid; gap: 3px; font-size: 11px; text-transform: uppercase; color: var(--ink-soft); }
.feature-fields input, .feature-fields textarea {
  width: 100%; min-height: 0; padding: 6px 8px; border: 1px solid var(--line) !important;
  border-radius: 6px; background: var(--paper); font-size: 15px; text-transform: none; color: var(--ink);
}
.feature-fields textarea { min-height: 220px !important; background-image: none !important; line-height: 1.45; }
.feature-modal-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---------- Seite 2 ---------- */
.p2-grid {
  display: grid; grid-template-columns: 1fr 2fr; gap: 16px;
  grid-template-areas:
    "appearance allies"
    "backstory more"
    "backstory history";
}
.p2-top { display: contents; }   /* nur für den Druck eine eigene Zeile */
.appearance { grid-area: appearance; }
.allies { grid-area: allies; }
.backstory { grid-area: backstory; }
.more-features { grid-area: more; }
.history { grid-area: history; }
.backstory textarea { min-height: 760px; }
.more-features textarea, .history textarea { min-height: 330px; }
.appearance textarea { min-height: 120px; }
.allies textarea { min-height: 330px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.image-slot {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-height: 180px; justify-content: center;
}
.image-slot img { max-width: 100%; max-height: 300px; object-fit: contain; }
.image-slot input[type="file"] { font-size: 12px; max-width: 100%; }
.image-slot a { font-size: 12px; }
.ai-portrait { margin-bottom: 10px; font-size: 13px; }
.ai-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-portrait[aria-busy="true"] .btn:disabled { cursor: progress; }
.ai-status:empty { display: none; }
.ai-status {
  flex-basis: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; border-left: 4px solid var(--ink-soft);
  background: var(--field); color: var(--ink); font-size: 14px;
}
.ai-status[data-state="busy"] {
  background: #fff4d6; border-left-color: #c98a00; color: #6b4700; font-weight: 700;
}
.ai-status[data-state="busy"]::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid #e8c774; border-top-color: #8a5d00;
  animation: ai-spin .8s linear infinite;
}
.ai-status[data-state="error"] { background: #fbe9e9; border-left-color: var(--accent); color: var(--accent); }
.ai-status[data-state="ok"] { background: #e8f3ea; border-left-color: var(--ok); color: var(--ok); }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ai-status[data-state="busy"]::before { animation: none; border-top-color: #e8c774; }
}
.ai-preview { border: 1px dashed var(--ink-soft); border-radius: 8px; padding: 8px; margin-top: 6px; }
.ai-preview img { display: block; max-width: 100%; max-height: 420px; margin: 0 auto 6px; }
.ai-preview summary { cursor: pointer; color: var(--ink-soft); }
.ai-prompt { font-size: 12px; color: var(--ink-soft); margin: 4px 0 0; }
.ai-note { font-size: 11px; margin: 4px 0 0; }
.symbol-box { background: var(--panel); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; }
.symbol-box > label { font-size: 11px; text-transform: uppercase; }
.symbol-box > input { background: var(--paper); border-radius: 4px; padding: 5px; margin-bottom: 8px; }
.symbol-box .image-slot { background: var(--paper); flex: 1; }
.symbol-caption { text-align: center; font-size: 11px; text-transform: uppercase; color: var(--muted); }

/* ---------- Seite 3 ---------- */
.spell-head .head-box.gray { padding: 10px 14px; }
.spell-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.spell-stat-row + .spell-stat-row { margin-top: 10px; }
.octa {
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.octa b {
  display: grid; place-items: center; width: 100%; max-width: 150px; height: 44px; font-size: 20px;
  background: var(--paper); border: var(--border);
  border-radius: 6px;
}
.octa label { font-size: 10px; text-transform: uppercase; margin-top: 4px; line-height: 1.15; }

.pact-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px; }

.spell-capacity-row {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 14px;
  margin-bottom: 16px; font-size: 13px;
}
.spell-capacity-warning { color: var(--accent); }
.spell-capacity-hint { color: var(--ink-soft); }
.class-warning { color: var(--accent); font-size: 13px; margin: 0 0 8px; }
.class-warning .muted { margin-left: 6px; }
.class-warning-mark { display: block; color: var(--accent); font-size: 11px; font-weight: 700; margin-top: 2px; }
.spell-row.spell-duplicate input[name$="-name"] { border-color: var(--accent); color: var(--accent); }

/* Volkszauber (Seite 3): berechnet aus Volk und Charakterstufe, eigene Zeile je Zauber */
.racial-spells { padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
.racial-spells > .muted { margin-left: 8px; }
.racial-spell-list { margin-top: 6px; }
.racial-spell {
  display: grid; grid-template-columns: minmax(160px, 1.4fr) 1.2fr auto auto auto; gap: 12px;
  align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line);
}
.racial-spell:last-child { border-bottom: 0; }
.racial-spell-name { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.racial-spell-name select { font-weight: 400; max-width: 100%; }
.racial-spell-meta { color: var(--ink-soft); }
.racial-spell-locked { color: var(--muted); font-style: italic; }
.racial-spell:has(.racial-spell-locked:not([hidden])) > :not(.racial-spell-locked) { opacity: .55; }
.racial-spell-used { display: flex; align-items: center; gap: 4px; cursor: pointer; }

.p3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.spell-col { display: flex; flex-direction: column; gap: 18px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.spell-level-head { display: flex; align-items: stretch; height: 40px; }
.lvl-badge {
  width: 36px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 20px;
  background: var(--panel); border: var(--border);
  border-radius: 4px 0 0 4px; padding-right: 6px;
}
.lvl-title, .lvl-total, .lvl-used {
  display: flex; align-items: center; justify-content: center;
  border: var(--border); border-left: 0;
}
.lvl-title { flex: 1; text-transform: uppercase; font-size: 13px; border-radius: 0 20px 20px 0; }
.lvl-total { width: 60px; font-size: 20px; font-weight: 700; }
.lvl-used { flex: 1; border-radius: 0 20px 20px 0; padding: 0 8px; }
.lvl-captions { display: flex; font-size: 9px; text-transform: uppercase; color: var(--muted); gap: 20px; padding: 2px 0 0 38px; }
.spell-list { margin-top: 6px; }
.spell-row {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center;
  border-bottom: 1px solid var(--ink); border-left: 3px solid var(--spell-school-color, transparent);
  padding: 3px 0 3px 4px; transition: border-left-color .2s;
  background-color: var(--spell-school-color, transparent);
}
.spell-row input[type="text"] { width: 100%; }
.spell-level[data-level="0"] .dot-check { visibility: hidden; }
.spell-row-actions { display: flex; align-items: center; gap: 4px; }
/* Zauberformel und Gestik: je eine eigene, helle Zeile unter dem Namen – heben sich von der
   Schulfarbe der Zeile ab; Beschriftungen gleich breit, damit die Felder bündig stehen */
.spell-note {
  grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; margin: 1px 0 2px;
  padding: 1px 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  cursor: text;
}
.spell-note + .spell-note { margin-top: 0; }
.spell-note[hidden] { display: none; }   /* Zauber ohne V bzw. G, siehe sheet.js */
.spell-note-label {
  flex: none; width: 3.8em; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft);
}
.spell-row .spell-note input { flex: 1; min-width: 0; font-size: 12px; font-style: italic; color: var(--ink); }
.spell-row .spell-note input::placeholder { color: var(--muted); font-style: normal; }

/* Tiergestalt (Seite 3, nur mit Druidenstufen): Grenzen aus rules.wild_shape(), gewählte Tiere */
.wild-shape { padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
.wild-shape-head { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
.wild-shape-limits { color: var(--ink-soft); flex: 1; }
.wild-shape-head .box-actions { margin: 0; }
.wild-shape-locked { color: var(--muted); font-style: italic; }
.wild-shape .panel { margin: 10px 0 0; }
.beast-group { margin-bottom: 8px; }
.beast-group:last-child { margin-bottom: 0; }
.beast-group-title { display: block; font-size: 12px; }
.beast-table-wrap { margin-top: 8px; overflow-x: auto; }
.beast-table { width: 100%; border-collapse: collapse; }
.beast-table th, .beast-table td {
  text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top;
}
.beast-table th { font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.beast-table tr:last-child td { border-bottom: 0; }
.beast-name { font-weight: 700; min-width: 140px; }
.beast-traits { display: block; font-weight: 400; font-size: 11px; color: var(--ink-soft); }
.beast-blocked { display: block; font-weight: 400; font-size: 11px; color: var(--accent); }
.beast-row:has(.beast-blocked:not([hidden])) > :not(.beast-name) { opacity: .55; }
.beast-table-wrap:not(:has(.beast-row:not([hidden]))) .beast-table { display: none; }
.beast-table-wrap:has(.beast-row:not([hidden])) .beast-empty { display: none; }
.beast-empty { margin: 4px 0 0; }
.spell-info {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--ink-contrast); color: var(--ink-contrast); font-size: 11px; font-style: italic;
  text-decoration: none; font-weight: 700; flex: none;
}
.spell-info:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Seite 4: Questbuch & NPC-Buch ---------- */
.p4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.quest-head, .quest-row {
  display: grid; grid-template-columns: 1fr 120px 22px; gap: 5px 4px; align-items: center;
}
.npc-head, .npc-row {
  display: grid; grid-template-columns: 1fr 1fr 22px; gap: 5px 4px; align-items: center;
}
.quest-head, .npc-head { font-size: 11px; text-transform: uppercase; text-align: center; margin-bottom: 4px; }
.quest-head span:first-child, .npc-head span:first-child { text-align: left; padding-left: 4px; }
.quest-row, .npc-row { margin-bottom: 8px; }
.quest-row input, .quest-row select, .npc-row input {
  background: var(--field) !important; border-radius: 3px; padding: 5px; width: 100%; min-width: 0;
}
.quest-row input:focus, .quest-row select:focus, .npc-row input:focus { background: var(--focus) !important; }
/* Notizzeile unter Titel/Name, über die Eingabespalten */
.quest-text, .npc-notes { grid-column: 1 / 4; margin-top: 4px; }
.quest-row .quest-text textarea, .npc-row .npc-notes textarea { min-height: 70px; }

/* ---------- Seite 5: Mitschriften (static/js/sheet/notes.js) ---------- */
.notebook { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.note-list { list-style: none; margin: 0; padding: 0; }
.note-link {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 6px 4px; cursor: pointer;
}
.note-link small { color: var(--muted); white-space: nowrap; }
.note-link:hover { background: var(--field); }
.note-link[aria-current="page"] { font-weight: 700; background: var(--focus); }
.note-privacy { font-size: 12px; margin: 4px 0 0; }
.note-search {
  width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 5px 8px; font: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink);
}
.note-search-status { font-size: 12px; margin: 0 0 6px; }
.note-link { flex-wrap: wrap; }
.note-link .note-snippet { flex-basis: 100%; font-size: 12px; font-weight: 400; color: var(--ink-soft); white-space: normal; }
.note-snippet mark { background: var(--focus); color: inherit; font-weight: 700; }
.note-tools { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-bottom: 8px; }
.note-modes, .note-pens { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.note-tools .btn { margin: 0; }
.note-tools .btn[aria-pressed="true"] { background: var(--ink); color: var(--ink-contrast); }
.note-color {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--paper); padding: 0;
  background: var(--pen); box-shadow: 0 0 0 1px var(--line); cursor: pointer;
}
/* Grundfarbe = Schriftfarbe des Themas (im Dark Mode hell, siehe notes.js) */
.note-color:first-child { background: var(--ink); }
.note-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.note-page { display: none; }
.note-page.current, .note-book.printing .note-page:not([hidden]) { display: block; }
.note-head {
  display: grid; grid-template-columns: 1fr 150px auto 22px; gap: 4px 8px; align-items: center;
  margin-bottom: 6px;
}
.note-head input[type="text"], .note-head input[type="date"] {
  background: var(--field) !important; border-radius: 3px; padding: 5px; width: 100%; min-width: 0;
}
.note-head input[name$="-title"] { font-weight: 700; }
.note-share { font-size: 12px; white-space: nowrap; }
.note-delete {
  border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; display: grid;
  place-items: center;
}
.note-delete:hover { color: var(--accent); }
/* Feste Seitengröße (Koordinaten der Handschrift), Schrift und Linien wachsen mit */
.note-sheet {
  position: relative; container-type: inline-size; aspect-ratio: 1000 / 1414;
  border: 1px solid var(--line); border-radius: 4px;
}
.page .note-sheet textarea {
  position: absolute; inset: 0; height: 100%; min-height: 0; resize: none;
  font-size: clamp(12px, 2.2cqw, 22px); line-height: 1.6em; padding: 0.4em 0.8em;
  background-image: repeating-linear-gradient(transparent 0 calc(1.6em - 1px), var(--line) calc(1.6em - 1px) 1.6em);
  background-position: 0 0.4em;
}
.note-ink { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.note-book[data-mode="text"] .note-ink { pointer-events: none; }
.note-book[data-mode="ink"] .note-sheet { cursor: crosshair; touch-action: none; }
.note-book[data-mode="erase"] .note-sheet { cursor: cell; touch-action: none; }
.note-book:has(.note-page:not([hidden])) .note-empty { display: none; }

/* ---------- Seite 6: Begleiter (static/js/sheet/companions.js) ----------
   Jeder Begleiter ist ein kleiner Bogen aus den Bausteinen von Seite 1 (.sheet-head, .p1-grid,
   .abilities, .combat, .shield, .box.hp …); hier stehen nur die Abweichungen. */
.companion-summon { display: block; }
.companion-summon-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.companion-summon-row .companion-field.wide { flex: 1 1 220px; }
.companion-summon-status { font-size: 12px; margin: 6px 0 0; }
.companion-field, .companion-line { display: flex; flex-direction: column; min-width: 0; }
.companion-field input, .companion-field select, .companion-line input {
  width: 100%; min-width: 0; border-bottom: 1px solid var(--ink-soft) !important; padding: 3px 2px;
}
.companion-field > span, .companion-line > span {
  display: block; text-transform: uppercase; font-size: 11px; margin-top: 3px;
}
.companion-list:has(.companion:not([hidden])) + template + .companion-empty { display: none; }
.companion + .companion { margin-top: 28px; padding-top: 24px; border-top: 2px dashed var(--line); }
.companion-logo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.companion-delete {
  border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px;
  font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400;
}
.companion-delete:hover { color: var(--accent); }
.companion-head .head-field select {
  width: 100%; border-bottom: 1px solid var(--ink-soft) !important; padding: 3px 0;
}
.companion-hint { margin: -8px 0 14px; font-size: 13px; color: var(--warn-text); }
.companion-hint[hidden], .companion-bonus[hidden], .companion-total[hidden] { display: none; }
.companion .list-box textarea { min-height: 96px; }
.companion-senses { display: flex; flex-direction: column; gap: 8px; }
.companion-speed > input { font-size: 15px; }
.companion-temp > input { font-size: 24px; }
.companion-photo .image-slot { min-height: 220px; margin-bottom: 4px; }
.companion-monster-link { font-size: 12px; }
.companion-monster-link[hidden] { display: none; }
.companion-attacks textarea { min-height: 264px; }
.companion-traits textarea { min-height: 192px; }

/* ------------------------------------------------------------ Responsiv */
@media (max-width: 1050px) {
  .p1-grid { grid-template-columns: 1fr 1fr; }
  .col-right { grid-column: 1 / -1; }
  .features textarea { min-height: 300px; }
  .p3-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .coins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topnav { padding: 8px 12px; }
  /* Menü-Knopf: Navigation nur aufgeklappt zeigen (ohne JS bleibt sie wie bisher offen) */
  .nav-toggle { display: flex; }
  .nav-collapse { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; padding-bottom: 6px; }
  .topnav.js-nav:not(.nav-open) .nav-collapse { display: none; }
  .nav-main { flex-direction: column; align-items: stretch; flex-basis: 100%; }
  .nav-side { justify-content: space-between; border-top: 1px solid rgba(127, 127, 127, .35); padding-top: 8px; }
  .nav-main .nav-menu, .nav-main > .nav-link { flex: 1 1 100%; }
  .nav-main .nav-panel { position: static; margin: 4px 0 8px; box-shadow: none; }
  .nav-mega-inner, .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  a.nav-tile { min-height: 74px; padding: 10px 12px; }
  .nav-tile strong { font-size: 15px; }
  .nav-tile-art { width: 64px; height: 64px; }
  /* Werkzeugleiste des Bogens: Reiter in einer wischbaren Zeile, Knöpfe kompakt */
  .toolbar { gap: 8px; padding: 8px 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; order: 3; flex-basis: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .toolbar-right { gap: 6px; }
  .toolbar .btn { padding: 7px 11px; }
  .page { padding: 14px 10px; }
  .sheet-head { grid-template-columns: 1fr; }
  .head-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-head > * { min-width: 0; }
  .p1-grid, .p3-grid { grid-template-columns: 1fr; }
  .p2-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "appearance" "allies" "backstory" "more" "history";
  }
  .backstory textarea { min-height: 300px; }
  .two-col { grid-template-columns: 1fr; }
  .p4-grid { grid-template-columns: 1fr; }
  .notebook { grid-template-columns: 1fr; }
  .note-head { grid-template-columns: 1fr 22px; }
  .note-head input[name$="-date"], .note-share { grid-column: 1; }
  .quest-head, .quest-row { grid-template-columns: 1fr 90px 22px; }
  .class-row { grid-template-columns: 1fr 1fr; }
  .class-row .lvl { grid-column: 1; }
  .spell-stat-row { gap: 6px; }
  .racial-spell { grid-template-columns: 1fr auto; gap: 2px 8px; }
  .racial-spell-meta, .racial-spell-stats { grid-column: 1; }
  .toolbar { position: static; }
}
@media (max-width: 380px) {
  .left-top { grid-template-columns: 1fr; }
  .abilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 8px; }
}

/* ------------------------------------------------------------ Druck */
@media print {
  /* Immer die helle Palette drucken, unabhängig vom Dark-Mode-Schalter (spart Tinte, bleibt lesbar) */
  :root, :root[data-theme="dark"] {
    --ink: #231f20; --ink-soft: #58595b; --muted: #8a8a8a; --paper: #ffffff; --page-bg: #efefef;
    --panel: #e3e3e3; --field: #f1f1f1; --line: #b9b9b9; --ink-contrast: #ffffff;
    --focus: #fff8e1; --focus-strong: #fffbee;
    --link: #9b1c1c; --line-soft: #e4e1dc; --shadow-1: none; --shadow-2: none;
  }
  /* Klassen-Akzentfarbe (Rahmen, Papierstruktur) nicht drucken – wie oben, spart Tinte und
     entspricht dem offiziellen Bogen. #sheet trägt die Farbe als Inline-Style (siehe
     views.sheet()), deshalb hier gezielt überschrieben statt nur auf :root. */
  #sheet { --class-color: var(--ink) !important; }
  @page { size: A4 portrait; margin: 8mm; }
  /* Desktop-Layout (~1150 px) auf die A4-Druckbreite (194 mm) */
  :root { --print-zoom: .64; }
  html, body { background: #fff; }
  .ability-score input { display: none; }
  .race-bonus-controls,
  .topnav, .toolbar, .messages, .msg-foreign, .msg-readonly, .panel, .race-review, .ability-race, .btn, .row-remove, .note-delete, .companion-delete,
  .box-actions,
  .class-warning-mark,
  .spell-info, .image-slot input[type="file"], .stat-extra, .ai-portrait { display: none !important; }
  .sheet-main { padding: 0; margin: 0; max-width: none; }

  /* Jede Bogenseite auf ein eigenes A4-Blatt: gedruckt wird das Desktop-Layout (drei Spalten wie
     der offizielle Bogen), verkleinert per zoom auf die Blattbreite. Die Breakpoints unten
     (1050/720 px) greifen beim Druck sonst schon, weil A4 nur ~730 px breit ist – deshalb werden
     die Raster hier ausdrücklich auf das Desktop-Layout zurückgesetzt. Jede Seite beginnt ein neues
     Blatt (break-before statt break-after: kein leeres Blatt am Ende). */
  .page {
    display: block !important; box-shadow: none; padding: 0; border-radius: 0;
    zoom: var(--print-zoom); break-before: page;
  }
  .page:first-of-type { break-before: auto; }
  .page, .box { background-image: none; }
  /* Nur kleine Einheiten zusammenhalten – große Kästen (Merkmale, Ausrüstung, Zaubergrade) dürfen
     über das Blatt hinaus weiterlaufen, sonst springen sie ganz auf das nächste und hinterlassen
     eine Lücke */
  .pill, .ability, .combat-row, .head-box, .traits > .box, .attack-row, .equipment-row, .spell-row,
  .quest-row, .npc-row, .racial-spell, .wild-shape, .pact-row, .spell-stat-row { break-inside: avoid; }
  .sheet-head { break-after: avoid; }
  .page textarea { resize: none; overflow: hidden; }
  /* Druckfassung der Textfelder (print.js): gleiche Linien, bricht über Blätter um */
  .page textarea:has(+ .print-text) { display: none; }
  .print-text {
    white-space: pre-wrap; overflow-wrap: anywhere; line-height: 24px; padding: 0 4px;
    background-image: repeating-linear-gradient(transparent 0 23px, var(--line) 23px 24px);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Keine Bedienelemente auf Papier: Pfeile der Auswahlfelder und Zahlenfelder */
  .page select { -webkit-appearance: none; appearance: none; background-image: none; }
  .page input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  .page input[type="number"]::-webkit-inner-spin-button,
  .page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; display: none; }
  /* Linien der Textfelder auch ohne „Hintergrundgrafiken drucken“ – man schreibt darauf */
  .page textarea { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page ::placeholder { color: transparent; }

  .sheet-head { grid-template-columns: minmax(260px, 1fr) 1.6fr; }
  .head-box { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p1-grid { grid-template-columns: 1fr 1fr 1fr; }
  .col-right { grid-column: auto; }
  .two-col { grid-template-columns: 1fr 1fr; }
  .p3-grid { grid-template-columns: repeat(3, 1fr); }
  .p4-grid { grid-template-columns: 1fr 1fr; }
  /* Seite 6: jeder Begleiter ein eigenes Blatt wie Seite 1 (die Spalten füllen es, siehe unten);
     der Seitenkopf mit Charaktername und „Beschwören“ entfällt, ohne Begleiter das ganze Blatt */
  #seite-6 > .sheet-head, .companion-empty, .companion-monster-link { display: none !important; }
  #seite-6:not(:has(.companion:not([hidden]))) { display: none !important; }
  .companion + .companion { break-before: page; margin-top: 0; padding-top: 0; border-top: 0; }
  .companion-total.stat-extra:not([hidden]) { display: block !important; }   /* RK gesamt mitdrucken */
  .class-row { grid-template-columns: 1fr 1.4fr 90px 28px; }

  /* Seite 1 füllt genau ein Blatt: jede Spalte ist mindestens so hoch wie der Platz unter dem Kopf
     (Blatt 279 mm, Maße vor dem zoom), und ihr Kasten mit Textfeld (Weitere Übung, Angriffe,
     Merkmale) nimmt den Rest ein – mit mehr Angriffen oder Gegenständen wird er kleiner. Bewusst kein
     Strecken der Spalten auf gleiche Höhe: sonst zöge eine lange Spalte (viele Merkmale) die anderen
     blattweise mit leeren Linien nach; längerer Inhalt läuft nur in seiner Spalte weiter. Die
     Infozeile des Volks entfällt, damit der Kopf immer gleich hoch ist. */
  .race-info, .background-details { display: none !important; }
  .p1-grid { align-items: start; }
  .col-left, .col-mid, .col-right { min-height: calc(279mm / var(--print-zoom) - 150px); }
  .col-left > .box:has(> textarea), .col-mid > .box:has(> textarea), .col-right > .features {
    flex: 1 0 auto; display: flex; flex-direction: column;
  }
  .col-left > .box:has(> textarea) > :is(textarea, .print-text),
  .col-mid > .box:has(> textarea) > :is(textarea, .print-text),
  .col-right > .features > :is(textarea, .print-text) { flex: 1 0 auto; min-height: 96px !important; }
  /* Seite 2: Ein längerer Text läuft nach dem Nachbarkasten über die volle Breite weiter. Dafür
     schweben die rechten Kästen (Verbündete; Weitere Merkmale und Geschichte) rechts, und der Text
     links umfließt sie: „Aussehen“ bzw. die Hintergrundgeschichte – im HTML stehen diese deshalb
     danach. .p2-top ist ein eigener Block (flow-root), damit die untere Hälfte erst nach dem
     längeren der beiden oberen Kästen beginnt. Die schwebenden Kästen liegen weiß mit weißem Rand im
     Abstand über dem umfließenden (sie sind positioniert, dieser bleibt statisch), damit dessen
     Rahmen dort nicht durchscheint; dessen Titel steht links. Die Mindesthöhen sind so gewählt,
     dass bei kurzem Text alles bündig endet – Seite 2 dann auf einem Blatt. */
  .p2-grid { display: block; }
  .p2-top { display: flow-root; margin-bottom: 16px; }
  .p2-top > .box, .p2-grid > .box { grid-area: auto; }
  /* Rand links 26 px = Abstand 16 + Innenabstand 10 des umfließenden Kastens. ::before zeichnet
     dessen rechten Rahmen an der Spaltengrenze (2 px, direkt links vom weißen Rand), so weit der
     schwebende Kasten reicht; bei „Geschichte“ auch über den Abstand zu „Weitere Merkmale“. */
  .allies, .more-features, .history {
    float: right; clear: right; width: calc((100% - 16px) * 2 / 3); margin: 0 0 16px 26px;
    background-color: var(--paper); outline: 16px solid var(--paper);
  }
  .allies::before, .more-features::before, .history::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -18px; width: 2px;
    background: var(--class-color); -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .history::before { top: -16px; }
  .appearance, .backstory { position: static; padding-bottom: 8px; }
  .appearance > .box-title, .backstory > .box-title {
    position: static; width: calc((100% - 16px) / 3 - 10px); margin-top: 6px; height: 14px; line-height: 14px;
  }
  /* Obere Zeile immer gleich hoch (Maß von „Verbündete“), damit die Höhen darunter passen: das
     Porträt bekommt eine feste Höhe, ein kurzes „Aussehen“ endet bündig mit „Verbündete“ */
  .allies, .appearance { min-height: 370px; }
  .appearance .image-slot { min-height: 0; height: 190px; }
  .appearance .image-slot img { max-height: 172px; }
  /* Datei-Feld des Porträts/Symbols: nur das Bild, nicht „Derzeit: …, Zurücksetzen, Ändern“ */
  .image-slot { font-size: 0; }
  .image-slot > :not(img) { display: none !important; }
  .more-features > :is(textarea, .print-text),
  .history > :is(textarea, .print-text) { min-height: 505px !important; }
  /* bündig mit „Geschichte“: 2 × (505 + 40 Rahmen/Innenabstand) + 16 Abstand
     − 42 (Rahmen 4, Innenabstand 10 + 8, Titel 6 + 14) */
  .backstory > :is(textarea, .print-text) { min-height: 1064px !important; }

  /* Ausrüstung: ohne die leere Entfernen-Spalte, noch mehr Platz für die Namen */
  .equipment-head, .equipment-row { grid-template-columns: 1fr 34px 44px 30px; }
  .equipment-head span:last-child { display: none; }

  /* Mitschriften: nur wenn es Seiten gibt, jede auf eigenem Blatt */
  #seite-5:not(:has(.note-page:not([hidden]))) { display: none !important; }
  .notebook { display: block; }
  .note-index, .note-tools, .note-empty { display: none !important; }
  .note-page:not([hidden]) { display: block !important; break-before: page; }
  .note-page:not([hidden]) ~ .note-page { break-before: page; }
  .note-pages > .note-page:first-child { break-before: auto; }
  /* Das Notizblatt hat das Seitenverhältnis von A4 – in voller Breite passte es samt Titelzeile
     (und auf dem ersten Blatt dem Kopf) nicht aufs Blatt. Handschrift skaliert mit (notes.js). */
  .note-sheet { width: 85%; margin: 0 auto; }
}

/* ------------------------------------------------------------ Kampagnen (campaign_views) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Tabellen am Handy (.table-cards: Zauber, Bestiarium, Gruppenansicht): eine Karte je Zeile, die
   erste Zelle als Titel, die übrigen als „Beschriftung: Wert“ (data-label). Bei sortierbaren
   Tabellen (.table-cards-sortable) werden die Spaltenköpfe zu einer Zeile „Sortieren nach“. */
@media (max-width: 720px) {
  .table-cards, .table-cards tbody { display: block; }
  .table-cards thead { display: none; }
  .table-cards tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
    padding: 12px 6px; border-bottom: var(--ui-border);
  }
  .table-cards tbody tr:last-child { border-bottom: 0; }
  .table-cards tbody td, .table-cards tbody th {
    display: block; padding: 0; border: 0; text-align: left; white-space: normal; font-size: 14px;
  }
  .table-cards tbody tr > :first-child { flex-basis: 100%; font-size: 16px; font-weight: 700; }
  .table-cards td[data-label]::before {
    content: attr(data-label) " "; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--ink-soft);
  }
  .table-cards td[colspan] { flex-basis: 100%; }
  /* Langtext-Zeile (Völker) gehört zur Karte darüber */
  .table-cards tbody tr.ref-row:has(+ .ref-detail) { border-bottom: 0; padding-bottom: 2px; }
  .table-cards tbody tr.ref-detail { padding-top: 0; }
  .table-cards tbody tr.ref-detail > td { font-size: 14px; font-weight: 400; }
  .table-cards-sortable thead { display: block; }
  .table-cards-sortable thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 10px; border-bottom: var(--ui-border); }
  .table-cards-sortable thead tr::before {
    content: "Sortieren nach"; flex-basis: 100%; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
  }
  .table-cards-sortable thead th { position: static; padding: 3px 10px; border: var(--ui-border); border-radius: 999px; background: var(--paper); }
  .table-cards-sortable thead th:not(:has(a)) { display: none; }
  .table-cards .party-hpbar { flex-basis: 100%; }
  .spell-table-wrap:has(.table-cards), .party-wrap:has(.table-cards) { overflow-x: visible; padding: 8px 12px; }
}

/* Leiste aller Kampagnenseiten (_campaign_nav.html): Pfad + Reiter wie die Bogen-Reiter */
/* Kampagne als eigener Bereich (_campaign_layout.html): Seitenleiste wie in der Verwaltung, oben
   Name und „Spiel starten“, darunter „Kampagne“ und „Vorbereitung“ in eigenen Farben */
.camp-group-kampagne { --ref-a: #1f5f8b; }
.camp-group-vorbereitung { --ref-a: #7446ad; }
.camp-layout { grid-template-columns: 230px minmax(0, 1fr); }
.camp-sidebar-head { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px 8px; }
.ref-sidebar .camp-back { padding: 0; font-size: 12px; color: var(--ink-soft); }
.ref-sidebar .camp-back:hover { background: none; color: var(--ink); }
.ref-sidebar .camp-name { padding: 0; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.ref-sidebar .camp-name:hover { background: none; color: var(--accent); }
.camp-sub { font-size: 13px; color: var(--ink-soft); }
.ref-sidebar .camp-play { justify-content: center; margin-top: 6px; padding: 9px 12px; color: #fff; font-size: 15px; }
.ref-sidebar .camp-play:hover { background: var(--accent); color: #fff; filter: brightness(1.08); }
@media (max-width: 1050px) {
  .camp-layout { grid-template-columns: minmax(0, 1fr); }
  .camp-sidebar-head { flex-direction: row; flex: none; align-items: center; padding: 0 4px; }
  .ref-sidebar .camp-back, .camp-sub { display: none; }
  .ref-sidebar .camp-name { white-space: nowrap; font-size: 15px; }
  .ref-sidebar .camp-play { margin: 0; padding: 5px 12px; font-size: 13px; }
}
@media print { .camp-sidebar { display: none; } .camp-layout { display: block; } }
.camp-hero {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 26px 28px; margin-bottom: 16px; border-radius: var(--radius-lg); color: #f5efe2;
  background: radial-gradient(circle at 85% 20%, rgba(255, 213, 74, .18), transparent 45%),
    linear-gradient(135deg, #2a1d2f 0%, #3b1f1f 55%, #6b1b1b 100%);
  box-shadow: var(--shadow-2);
}
.camp-hero h1 { margin: 2px 0 10px; font-size: 34px; color: #fff; }
.camp-hero a { color: #ffd54a; }
.camp-hero-kicker { margin: 0; font-size: 13px; letter-spacing: .04em; opacity: .8; }
.camp-hero-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.camp-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.camp-hero-actions .btn-small { background: rgba(255, 255, 255, .1); color: #f5efe2; border-color: rgba(255, 255, 255, .25); }
.camp-hero .camp-hero-play { padding: 14px 28px; font-size: 20px; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.camp-prep { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.camp-prep-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; text-decoration: none; color: var(--ink);
  border-top: 3px solid #7446ad; transition: transform .15s, box-shadow .15s;
}
.camp-prep-tile span { font-size: 13px; color: var(--ink-soft); }
.camp-prep-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* Spielbereich (campaign_table.html, body.game-mode): Vollbild ohne Seitennavigation – Spielleiste,
   Karte in der Mitte, Reiter rechts, Schublade für Bögen und Handouts */
body.game-mode { height: 100vh; overflow: hidden; background: #17141c; }
.game-mode .topnav { display: none; }
.game-mode .messages {
  position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(560px, 92vw);
  animation: game-toast 5s ease forwards; pointer-events: none;
}
@keyframes game-toast { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
main.game { display: flex; flex-direction: column; height: 100vh; max-width: none; margin: 0; padding: 0; }
.game-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; flex: none;
  background: linear-gradient(90deg, #2a1d2f, #3b1f1f 60%, #5a1a1a); color: #f5efe2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4); z-index: 5;
}
.game-bar form { display: flex; gap: 6px; align-items: center; margin: 0; }
.game-bar .btn-small { margin: 0; }
.game-exit { color: #ffd54a; font-weight: 700; text-decoration: none; white-space: nowrap; }
.game-exit:hover { text-decoration: underline; }
.game-title { font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.game-scene-name { opacity: .9; }
.game-scene-pick select { width: auto; max-width: 260px; padding: 4px 8px; font-weight: 700; }
.game-turn { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 3px 4px 3px 12px; border-radius: 999px; background: rgba(255, 213, 74, .16); box-shadow: inset 0 0 0 1px rgba(255, 213, 74, .5); }
.game-turn[hidden] { display: none; }
.game-turn-buttons { display: flex; gap: 4px; }
.game-spacer { flex: 1; }
.game-bar .game-ghost { background: transparent; color: #f5efe2; border-color: rgba(255, 255, 255, .3); }
.game-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; flex: 1; min-height: 0; }
.game-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 8px 10px 10px; }
.game-toolbar { color: #d9d2c4; }
.game-toolbar .vtt-status { color: #b9b1a3; }
.game-board { flex: 1; max-height: none; min-height: 0; border-color: #2e2a36; background: #24202b; }
.game-empty { margin: auto; max-width: 460px; padding: 30px; text-align: center; color: #f5efe2; }
.game-empty h2 { color: #fff; }
.game-panel {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 0 12px 16px;
  background: var(--paper); border-left: 1px solid #2e2a36;
}
.game-tabs {
  position: sticky; top: 0; z-index: 2; display: flex; gap: 2px; margin: 0 -12px 10px; padding: 6px 6px 0;
  background: var(--field); border-bottom: 1px solid var(--line);
}
.game-tabs button {
  flex: 1; padding: 8px 4px; border: 0; border-radius: 8px 8px 0 0; background: none; color: var(--ink-soft);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.game-tabs button:hover { color: var(--ink); }
.game-tabs button.is-on { background: var(--paper); color: var(--ink); box-shadow: inset 0 3px 0 var(--accent); }
.game-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; }
.game-pane { display: grid; gap: 10px; align-content: start; }
.game-pane h2 { margin: 0; font-size: 18px; }
.game-callout { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: var(--field); }
.game-callout p { margin: 0; }
.game-inline { margin: 0; }
.game-order li.is-own .vtt-name { color: var(--accent); font-weight: 700; }
.game-party { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.game-party li { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--field); }
.game-party li.is-own { box-shadow: inset 3px 0 0 #e0b33a; }
.game-party-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.game-party-sub { font-size: 13px; }
.game-party-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.game-party .btn-small { justify-self: start; margin: 2px 0 0; }
.game-handouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.game-handouts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.game-handouts form { margin: 0 0 0 auto; }
.game-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column;
  width: min(820px, 100vw); background: var(--paper); box-shadow: -8px 0 30px rgba(0, 0, 0, .45);
}
.game-drawer[hidden] { display: none; }
.game-drawer-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.game-drawer-head strong { flex: 1; font-size: 17px; }
.game-drawer-head .btn-small { margin: 0; }
.game-drawer iframe { flex: 1; width: 100%; border: 0; }
/* Eingebettet in die Schublade (?eingebettet=1): ohne Seitennavigation */
.embedded .topnav { display: none; }
@media (max-width: 1050px) {
  body.game-mode { height: auto; overflow: auto; }
  main.game { height: auto; }
  .game-body { grid-template-columns: minmax(0, 1fr); }
  .game-board { flex: none; height: 62vh; }
  .game-panel { border-left: 0; border-top: 1px solid #2e2a36; overflow: visible; }
}
.campaign-join-inline { display: flex; gap: 6px; align-items: center; }
.campaign-join-inline input {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; font: inherit;
  background: var(--paper); color: var(--ink); width: 150px; text-transform: uppercase;
}
.campaign-sub { margin: -8px 0 0; }
.campaign-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.campaign-main, .campaign-side { display: grid; gap: 16px; }
.campaign-heading { margin: 0 0 8px; font-size: 18px; }
.campaign-heading small { font-size: 13px; font-weight: 400; }
.campaign-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.campaign-heading-row .btn-small { margin: 0 0 8px; }
.campaign-text p:first-child { margin-top: 0; }
.campaign-text p:last-child { margin-bottom: 0; }
.campaign-handouts, .campaign-members { list-style: none; margin: 0; padding: 0; }
.card .campaign-handouts, .card .campaign-members { font-size: 15px; color: var(--ink); }
.campaign-handouts li, .campaign-members li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.campaign-handouts li:last-child, .campaign-members li:last-child { border-bottom: 0; }
.campaign-handouts a { font-weight: 700; }
.campaign-share { font-size: 13px; margin-left: auto; }
.campaign-members .danger { color: var(--accent); font-size: 13px; }
.campaign-gm-list { list-style: none; padding: 0; margin: 0 0 8px; }
.campaign-gm-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; }
.campaign-gm-actions { display: flex; gap: 6px; }
.campaign-code {
  display: inline-block; font-size: 26px; font-weight: 700; letter-spacing: .15em; margin: 8px 0;
  padding: 4px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--link); font-family: monospace;
}
.card input.campaign-invite-url { font-size: 12px; margin-bottom: 4px; }
.campaign-field-wide { grid-column: 1 / -1; }
.campaign-form textarea, .ref-field textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; font: inherit;
  background: var(--paper); color: var(--ink); width: 100%; resize: vertical;
}
.campaign-side .ref-field { margin-bottom: 8px; }
.campaign-hint { font-size: 13px; margin: 0 0 8px; }
.handout-matrix .handout-cell { text-align: center; }
.handout-matrix td.handout-cell { font-weight: 400; }
.handout h1 { margin-top: 0; }
.handout-image { display: block; max-width: 100%; max-height: 80vh; margin: 12px auto; border-radius: 6px; }
.handout-text { font-size: 16px; line-height: 1.5; }
.handout-pdf { display: block; width: 100%; height: 80vh; margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 6px; }
.handout-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--ink-soft); vertical-align: middle;
}
@media (max-width: 720px) {
  .campaign-layout { grid-template-columns: 1fr; }
  .campaign-join-inline { width: 100%; }
  .campaign-join-inline input { flex: 1; }
}
@media print {
  .campaign-side, .ref-breadcrumb, .campaign-join-inline, .handout-pdf { display: none !important; }
  .campaign-layout { grid-template-columns: 1fr; }
}
/* Gruppenansicht: eine Zeile je Charakter, Zahlen mittig und gleich breit */
.party-wrap { padding: 8px 12px; overflow-x: auto; }
.party-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.party-table th, .party-table td { padding: 5px 8px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.party-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); border-bottom-width: 2px; }
.party-table thead th[title] { cursor: help; }
.party-table .party-groups th { border-bottom: 0; padding-bottom: 0; color: var(--muted); }
.party-table .party-groups th[colspan] { border-bottom: 1px solid var(--line); }
.party-table tbody tr:last-child > * { border-bottom: 0; }
.party-table tbody tr:hover { background: var(--field); }
.party-name { text-align: left !important; font-weight: 700; }
.party-name a { color: inherit; }
.party-name small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.party-insp { color: #c98a00; }
.party-big { font-size: 17px; font-weight: 700; }
.party-hp { min-width: 72px; }
.party-temp { font-size: 12px; color: var(--ok); font-weight: 700; }
.party-hpbar { display: block; height: 3px; margin-top: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.party-hpbar span { display: block; height: 100%; background: var(--ok); }
.party-sep { border-left: 1px solid var(--line); }
.party-best { color: var(--accent); font-weight: 700; }
.party-note { font-size: 13px; margin: 8px 2px; }
@media print { .party-hpbar { display: none; } .party-wrap { padding: 0; border: 0; } }

/* Sitzungen (sessions.html, Box „Nächste Sitzung“ auf der Kampagnenseite) */
.session-card { margin-bottom: 12px; }
.session-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.session-title { margin: 0; font-size: 18px; }
.session-when { margin: 2px 0 8px; }
.session-counts { margin: 4px 0 8px; font-size: 14px; }
.session-status-ja { color: var(--ok); }
.session-status-nein { color: var(--accent); }
.session-status-vielleicht { color: #c98a00; }
.card .session-players { list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; color: var(--ink); }
.session-players li { padding: 2px 0; }
.session-players li strong { font-size: 12px; margin-left: 4px; }
.session-players .session-status-offen strong { color: var(--muted); font-weight: 400; }
.session-respond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.session-respond .btn-small { margin: 0; }
.card .session-respond input[type=text] { flex: 1 1 140px; width: auto; padding: 5px 8px; }
/* position: relative hält die unsichtbaren Radio-Knöpfe im Rahmen – sonst ragen sie rechts aus der
   Seite und machen sie breiter als den Bildschirm */
.session-choice { display: inline-flex; position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.session-choice label { position: relative; }
.session-choice label { cursor: pointer; }
.session-choice input { position: absolute; opacity: 0; pointer-events: none; }
.session-choice span { display: block; padding: 4px 10px; font-size: 13px; font-weight: 700; }
.session-choice label + label span { border-left: 1px solid var(--line); }
.session-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.session-choice-ja input:checked + span { background: var(--ok); color: #fff; }
.session-choice-vielleicht input:checked + span { background: #c98a00; color: #fff; }
.session-choice-nein input:checked + span { background: var(--accent); color: var(--accent-ink); }
.session-gm { margin-top: 8px; padding: 8px 12px; background: var(--field); border-radius: 6px; font-size: 14px; }
.session-gm p { margin: 4px 0 0; }
.session-attended { font-size: 13px; margin: 8px 0 0; }
.session-links { margin: 8px 0 0; font-size: 13px; }

/* Kampf-Tracker (encounter_detail.html) – nutzt die Tabellen-Bausteine der Gruppenansicht */
.tracker-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; }
.tracker-bar .btn-small { margin: 0; }
.tracker-round { font-size: 18px; }
.tracker-spacer { flex: 1; }
.tracker-table td { vertical-align: middle; }
.tracker-table input {
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit;
  background: var(--paper); color: var(--ink);
}
/* input.… statt nur .…: sonst gewinnt „.card input:not([type=checkbox]) { width: 100% }“ und die
   Knöpfe −/+ rutschen unter die Spalte „Zustände“ */
.tracker-table input.tracker-init { width: 56px; text-align: center; font-weight: 700; }
.tracker-table input.tracker-amount { width: 64px; }
.tracker-table input.tracker-conditions { width: 100%; min-width: 120px; }
.tracker-condition-links { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; font-size: 12px; }
.tracker-condition-links a { color: var(--link); text-decoration: none; }
.tracker-condition-links a:hover { text-decoration: underline; }
.tracker-table .tracker-alias { display: block; width: 100%; max-width: 220px; margin-top: 4px; font-size: 13px; font-weight: 400; }
.tracker-reveal { display: flex; gap: 10px; margin-top: 2px; font-size: 12px; font-weight: 400; }
.tracker-hp { white-space: nowrap; }
.tracker-hp .btn-small { margin: 0; min-width: 30px; }
.tracker-damage { color: var(--accent); }
.tracker-heal { color: var(--ok); }
.tracker-current { background: var(--focus) !important; }
.tracker-current .party-name { box-shadow: inset 4px 0 0 var(--accent); }
.tracker-marker { color: var(--accent); }
.tracker-down { opacity: .55; }
.tracker-down .party-name a, .tracker-down .party-name { text-decoration: line-through; }
.tracker-add { display: grid; gap: 10px; margin-top: 16px; }
.tracker-add .ref-fields { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tracker-add-monster { display: grid; grid-template-columns: minmax(200px, 2fr) 90px auto; gap: 8px 12px; align-items: end; }
.tracker-add-monster .tracker-add-more { grid-column: 1 / -1; }
.tracker-add-party { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tracker-add-more summary, .tracker-help summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.tracker-help { margin: 6px 0 0; }
.tracker-menu { position: relative; }
.tracker-menu summary { list-style: none; }
.tracker-menu summary::-webkit-details-marker { display: none; }
.tracker-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 6px;
  min-width: 240px; padding: 10px; background: var(--paper); border: var(--ui-border);
  border-radius: 8px; box-shadow: var(--shadow-2);
}
.tracker-menu-panel .btn { text-align: left; }
@media (max-width: 720px) { .tracker-add-monster { grid-template-columns: 1fr 80px; } }
/* Monsteraktionen: Popover am Namen, damit die Tabelle beim Aufklappen nicht breiter wird */
.tracker-actions { position: relative; font-weight: 400; }
.tracker-actions summary { font-size: 12px; color: var(--accent); cursor: pointer; width: max-content; }
.tracker-actions-panel {
  position: absolute; z-index: 5; left: 0; top: 100%; width: min(34rem, 85vw); max-height: 60vh;
  overflow-y: auto; white-space: normal; text-align: left; padding: 8px 12px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  font-size: 13px;
}
.tracker-actions-panel .stat-block-section { font-size: 14px; margin: 8px 0 2px; }
.tracker-actions-panel .stat-block-action { margin: 4px 0; }
@media (max-width: 720px) { .tracker-actions-panel { position: static; width: auto; box-shadow: none; } }
/* Tracker am Handy: eine Karte je Teilnehmer statt einer seitlich scrollenden Tabellenzeile –
   oben Initiative, Name und ✕, darunter RK und TP, dann Schaden/Heilung mit großen Knöpfen und
   die Zustände */
@media (max-width: 720px) {
  .tracker-table, .tracker-table tbody { display: block; }
  .tracker-table thead { display: none; }
  .tracker-table tr {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; gap: 8px 12px;
    grid-template-areas: "init name remove" "ac hp hp" "change change change" "cond cond cond";
    padding: 12px 6px; border-bottom: var(--ui-border);
  }
  .tracker-table tr:last-child { border-bottom: 0; }
  .tracker-table td, .tracker-table th {
    display: block; padding: 0; border: 0; text-align: left; white-space: normal;
  }
  .tracker-cell-init { grid-area: init; }
  .tracker-table .party-name { grid-area: name; }
  .tracker-cell-remove { grid-area: remove; text-align: right !important; }
  .tracker-cell-ac { grid-area: ac; }
  .tracker-cell-hp { grid-area: hp; }
  .tracker-cell-change { grid-area: change; display: flex !important; gap: 8px; align-items: center; }
  .tracker-cell-cond { grid-area: cond; }
  .tracker-cell-ac::before, .tracker-cell-hp::before, .tracker-cell-change::before, .tracker-cell-cond::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 2px;
  }
  .tracker-cell-change::before { flex-basis: 100%; }
  .tracker-cell-change { flex-wrap: wrap; }
  .tracker-table input.tracker-init { width: 100%; font-size: 18px; padding: 8px 4px; }
  .tracker-table input.tracker-amount { flex: 1 1 0; min-width: 0; width: auto; font-size: 16px; padding: 8px; }
  .tracker-hp .btn-small { min-width: 48px; min-height: 40px; font-size: 18px; }
  .tracker-table .tracker-alias { max-width: none; }
  .tracker-current .party-name { box-shadow: none; }
  .tracker-current { box-shadow: inset 4px 0 0 var(--accent); }
}
@media print { .tracker-bar, .tracker-add, .tracker-hp, .tracker-actions { display: none !important; } }

/* Kampf-Reihenfolge für Spieler (encounter_order.html) */
.order-card { max-width: 560px; }
.campaign-fight { margin: 12px 0 0; }
.order-list { list-style: none; margin: 0; padding: 0; font-size: 17px; }
.order-list li { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.order-list li:last-child { border-bottom: 0; }
.order-marker { width: 1em; color: var(--accent); }
.order-name { flex: 1; font-weight: 700; }
.order-other .order-name { font-weight: 400; }
.order-name small { font-weight: 400; color: var(--muted); }
.order-init { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.order-hp { font-size: 14px; font-weight: 700; color: var(--ok); }
.order-active { background: var(--focus); box-shadow: inset 4px 0 0 var(--accent); }
.order-own .order-name { color: var(--accent); }

/* Regeltexte aus Regelwerk-Importen und ihre Pflicht-Namensnennung */
.rule-text { margin-top: 12px; line-height: 1.5; }
.rule-text p { margin: 0 0 8px; white-space: pre-line; }
/* Tabellen in Regeltexten (condition_links.paragraphs: Zeilen „a | b | c“) */
.rule-table { border-collapse: collapse; margin: 4px 0 12px; font-size: 14px; }
.rule-table th, .rule-table td { padding: 4px 12px 4px 0; border-bottom: var(--ui-border); text-align: left; vertical-align: top; }
.rule-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.text-source { margin: 12px 0 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
/* Zustände (/zustaende/): Sprungleiste und Karten; Ziel einer Sprungmarke kurz hervorgehoben */
.condition-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.condition-index a {
  padding: 3px 11px; border: var(--ui-border); border-radius: 999px; background: var(--paper);
  color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none;
}
.condition-index a:hover { background: var(--field); color: var(--link); }
/* Nachschlagetabellen (Zustände, Völker, Gefahren): Text bricht um, Zeilen oben bündig, die
   angesprungene Zeile ist markiert; am Handy Karten (.table-cards) */
.ref-table td { white-space: normal; vertical-align: top; }
.ref-table .rule-text { font-size: 14px; }
.ref-table .rule-text > :first-child { margin-top: 0; }
@media (min-width: 721px) {
  .ref-table td:first-child { min-width: 140px; }
  .ref-table .ref-wide { min-width: 280px; }
  .ref-text-cell { width: 40%; min-width: 220px; }
}
.ref-sub { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--muted); }
.ref-row { scroll-margin-top: 80px; }
.ref-row:target, .ref-row:target + .ref-detail { background: var(--focus); }
/* Zeile mit aufklappbarem Langtext unter einer Tabellenzeile (Völker): ohne Trennlinie dazwischen */
.ref-table tr.ref-row:has(+ .ref-detail) > td { border-bottom: 0; padding-bottom: 2px; }
.ref-table .ref-detail > td { padding-top: 0; font-weight: 400; }
.ref-table .ref-detail .rule-text { max-width: 900px; }
.hazard-text > summary { cursor: pointer; color: var(--link); font-weight: 700; font-size: 13px; }
.hazard-text .rule-text { margin-top: 6px; }
/* Reiter mit Panels (ref_tabs.js, z. B. Gefahren): Aussehen wie die Kampagnen-Reiter; ohne
   JavaScript stehen alle Panels untereinander */
.ref-tab-list {
  display: inline-flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 12px; border-radius: 12px; background: var(--paper); border: var(--ui-border); box-shadow: var(--shadow-1);
}
.ref-tab-list::-webkit-scrollbar { display: none; }
.ref-tab-list a {
  padding: 6px 14px; border-radius: 9px; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 13px;
}
.ref-tab-list a:hover { color: var(--ink); background: var(--field); }
.ref-tab-list a[aria-selected="true"] { background: var(--ink); color: var(--ink-contrast); }
.ref-tab-count { margin-left: 4px; font-weight: 400; opacity: .7; }
.ref-panel + .ref-panel { margin-top: 16px; }
.ref-tabs-ready .ref-panel-title { display: none; }
.ref-panel-title { margin: 0 0 8px; }
.ref-panel-sub { margin: 4px 0 4px; font-size: 16px; }
.ref-panel-sub ~ .ref-panel-sub { margin-top: 20px; }
.ref-panel .spell-table-wrap { padding-left: 0; }
@media print {
  .ref-tab-list { display: none; }
  .ref-panel[hidden] { display: block !important; }
  .ref-tabs-ready .ref-panel-title { display: block; }
}
.race-info .race-link { font-size: 13px; color: var(--link); }
.background-link { font-size: 12px; color: var(--link); margin-left: 6px; }
/* Zustände und Regelbegriffe in Regeltexten (condition_links): lesbar wie der Text, nur gepunktet unterstrichen */
.condition-link, .rule-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.condition-link:hover, .rule-link:hover { color: var(--link); text-decoration-style: solid; }
@media print { .condition-link, .rule-link { text-decoration: none; } }

/* Zauberkarten (spell_cards.html): Spielkartenformat 63 × 88 mm, auf dem Bildschirm in
   derselben Größe wie gedruckt; lange Zauber doppelt breit, noch längere wachsen in der Höhe.
   Die Schulfarbe (rules.SPELL_SCHOOL_COLORS) steht als Rahmen oben, damit sie auch ohne
   Hintergrundgrafiken gedruckt wird. */
.spell-cards-link { margin: 0 0 8px; } /* Knopf auf Seite 3 des Bogens (.box-actions) */
.spell-cards-title { margin: 0; font-size: 22px; }
.spell-cards-hint { font-size: 13px; margin: 8px 0 0; }
.spell-cards { display: flex; flex-wrap: wrap; gap: 2mm; margin-top: 16px; align-items: flex-start; }
.spell-card {
  --school: var(--ink-soft);
  width: 63mm; min-height: 88mm; box-sizing: border-box; padding: 2.5mm 3mm;
  display: flex; flex-direction: column; gap: 1.5mm;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  border-top: 2.5mm solid var(--school); border-radius: 3mm;
  font-size: 7.5pt; line-height: 1.25; break-inside: avoid;
}
.spell-card-wide { width: calc(126mm + 2mm); }
.spell-card-head h2 { margin: 0; font-size: 11pt; line-height: 1.1; font-variant: small-caps; }
.spell-card-head p { margin: .5mm 0 0; font-size: 7pt; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.spell-card-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0;
  background: var(--line); border: 1px solid var(--line); border-radius: 1.5mm; overflow: hidden;
}
.spell-card-stats div { background: var(--field); padding: .8mm 1.2mm; }
.spell-card-stats dt { font-size: 5.5pt; text-transform: uppercase; color: var(--ink-soft); }
.spell-card-stats dd { margin: 0; font-weight: 700; }
.spell-card-text { flex: 1; text-align: justify; hyphens: auto; }
.spell-card-text p { margin: 0 0 1mm; white-space: pre-line; }
.spell-card-ref { font-style: italic; color: var(--ink-soft); }
.spell-card-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2mm;
  border-top: 1px solid var(--line); padding-top: 1mm; font-size: 6pt; color: var(--ink-soft);
}
.spell-card-tags { font-weight: 700; color: var(--school); }
.spell-card-source { flex-basis: 100%; font-size: 5.5pt; color: var(--muted); }
@media (max-width: 720px) {
  .spell-card-wide { width: 63mm; }
}
@media print {
  .spell-cards-controls, .spell-cards-hint, .spell-cards-link { display: none !important; }
  .spell-cards-body main.container { margin: 0; padding: 0; max-width: none; }
  .spell-cards { margin: 0; }
  .spell-card { border-top-color: var(--school); }
  .spell-cards-body .text-source { font-size: 8pt; }
}

/* Schwarzes Brett (board_generator.html): Zettel auf Kork, leicht schräg gepinnt; Aufträge mit
   Akzentrand. Im Druck nur das Brett, ohne Spielleitungs-Notizen – zum Aushändigen. */
.board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 18px;
  align-items: start; margin-top: 16px; padding: 26px 22px; border-radius: var(--radius-lg);
  background: var(--board-bg); box-shadow: inset 0 2px 12px rgba(0, 0, 0, .25);
}
.board-note {
  position: relative; margin: 0; padding: 22px 16px 14px; color: var(--note-ink);
  background: var(--note-0); box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  transform: rotate(calc(var(--tilt, 0) * 1deg)); line-height: 1.45; overflow-wrap: anywhere;
}
.board-note::before {          /* Reißzwecke */
  content: ""; position: absolute; top: 7px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 2px 2px rgba(0, 0, 0, .35);
}
.board-paper-1 { background: var(--note-1); }
.board-paper-2 { background: var(--note-2); }
.board-paper-3 { background: var(--note-3); }
.board-quest { border-top: 4px solid var(--accent); }
.board-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.board-text { margin: 0; }
.board-quest dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 8px 0 0; font-size: 13px; }
.board-quest dt { font-weight: 700; }
.board-quest dd { margin: 0; }
.board-translation { margin-top: 8px; font-size: 13px; }
.board-translation > summary { cursor: pointer; color: inherit; opacity: .7; }
/* Schriftstücke (letter_generator.html): ein Blatt Papier – auch im Dark Mode hell wie gedruckt */
.letter { max-width: 640px; margin: 0 auto 16px; padding: 40px 48px; color: #2b2118;
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-size: 18px;
  line-height: 1.55; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); border-radius: 2px; }
.letter p { margin: 0 0 12px; }
.letter-pergament { background: #f3e6c4; }
.letter-buetten { background: #fbf8f0; }
.letter-fleckig { background: radial-gradient(circle at 20% 30%, rgba(120, 90, 40, .12), transparent 40%), radial-gradient(circle at 80% 75%, rgba(120, 90, 40, .1), transparent 35%), #efe3c8; }
.letter-leder { background: #d9bf96; }
.letter-salutation { font-style: italic; }
.letter-closing { margin-top: 24px; }
.letter-signature { font-style: italic; font-size: 22px; }
.letter-note { font-size: 14px; font-style: italic; opacity: .75; }
.letter-wanted { text-align: center; font-size: 34px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.letter-wanted-name { text-align: center; font-size: 26px; font-weight: 700; }
.letter-center { text-align: center; }
.letter-reward { text-align: center; font-size: 22px; font-weight: 700; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; padding: 6px 0; }
.letter-ending { font-style: italic; }
@media (max-width: 720px) { .letter { padding: 24px 20px; font-size: 16px; } }
@media print { .letter { box-shadow: none; max-width: none; } }
.board-gm { margin-top: 16px; }
.board-gm > summary { cursor: pointer; font-weight: 700; }
.board-gm li { margin-bottom: 6px; }
@media (max-width: 720px) {
  .board { grid-template-columns: 1fr; padding: 18px 14px; }
}
@media print {
  .board { box-shadow: none; background: none; padding: 0; gap: 14px; grid-template-columns: repeat(3, 1fr); }
  .board-note { transform: none; box-shadow: none; border: 1px dashed #999; break-inside: avoid; background: #fff; }
  .board-note::before { display: none; }
  .board-gm, .board-actions, .board-form { display: none; }
}

/* API-Schlüssel im Profil (registration/profile.html) */
.api-keys { margin-top: 16px; }
.api-keys h2 { margin-top: 0; }
.api-key-new { margin: 12px 0; padding: 10px 12px; border-radius: var(--radius); background: var(--focus); }
.api-key-value { display: block; margin-top: 6px; overflow-wrap: anywhere; user-select: all; font-size: 14px; }
.api-key-list { list-style: none; margin: 12px 0; padding: 0; }
.api-key-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: var(--ui-border); }
.api-key-list li small { display: block; }
.api-key-list form { margin: 0; }
.api-key-create { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* „In Kampagne speichern“ unter Generator-Ergebnissen (_save_to_campaign.html) */
.save-campaign {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 16px;
  padding-top: 14px; padding-bottom: 14px;
}
.save-campaign-title { flex-basis: 100%; font-size: 15px; }
.save-campaign-target { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0 0 6px; border: 0; }
.save-campaign-target label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.save-campaign .save-campaign-target input[type="radio"] { width: auto; margin: 0; padding: 0; }
@media print { .save-campaign { display: none; } }
.settlement-board-link { margin: 16px 0 0; }
.board-place { font-weight: 400; }
@media print { .settlement-board-link { display: none; } }

/* Gespeicherte Siedlungen und Dungeons einer Kampagne (campaign_locations.html, campaign_location.html) */
.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.location-card { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.location-card strong { font-size: 17px; }
.location-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* Spieltisch (/kampagnen/<pk>/spieltisch/, static/js/vtt/): Karte als SVG, Figuren darüber */
.table-send { display: flex; gap: 6px; align-items: center; margin: 0; }
.table-send select { width: auto; }
.vtt-toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.vtt-status { font-size: 13px; margin-left: 6px; }
.vtt-board-wrap {
  overflow: auto; max-height: 80vh; border: 1px solid var(--line); border-radius: 8px;
  background: var(--ink-soft);
}
.vtt-board { display: block; width: 100%; height: auto; }
.vtt-gridline { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vtt-token .vtt-body { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.vtt-token text {
  fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central;
  pointer-events: none; user-select: none;
}
.vtt-token.is-light .vtt-body { stroke: #333; }
.vtt-token.is-light text { fill: #222; }
.vtt-token.is-own .vtt-body { stroke: #e0b33a; stroke-width: 3; }
.vtt-token.is-hidden { opacity: .5; }
.vtt-token.is-hidden .vtt-body { stroke-dasharray: 4 3; }
.vtt-token.is-down .vtt-body { filter: grayscale(1) brightness(.7); }
.vtt-turn { fill: none; stroke: #ffd54a; stroke-width: 3; vector-effect: non-scaling-stroke; animation: vtt-pulse 1.6s ease-in-out infinite; }
@keyframes vtt-pulse { 50% { stroke-opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .vtt-turn { animation: none; } }
.vtt-hp-back { fill: rgba(0, 0, 0, .65); }
.vtt-hp-fill.ok { fill: #43a047; }
.vtt-hp-fill.hurt { fill: #f9a825; }
.vtt-hp-fill.low { fill: #e53935; }
.vtt-token.is-movable { cursor: grab; touch-action: none; }
.vtt-fog { fill: rgba(16, 14, 24, .55); pointer-events: none; }
.vtt-select { fill: rgba(255, 213, 74, .25); stroke: #ffd54a; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.vtt-select.is-hide { fill: rgba(16, 14, 24, .35); stroke: #90a4ae; }
.vtt-board.is-fogging { cursor: crosshair; touch-action: none; }
.vtt-board.is-fogging .vtt-token { pointer-events: none; }
.vtt-tools { display: inline-flex; gap: 0; margin-right: 6px; }
.vtt-tools .btn { border-radius: 0; }
.vtt-tools .btn:first-child { border-radius: 999px 0 0 999px; }
.vtt-tools .btn:last-child { border-radius: 0 999px 999px 0; }
.vtt-tools .btn.is-on, .vtt-tools .btn.is-on:hover { background: var(--ink); color: var(--ink-contrast); border-color: var(--ink); }
.vtt-fog-all { display: inline-flex; gap: 6px; margin-right: 6px; }
.vtt-fog-all[hidden] { display: none; }
.vtt-fog-all form { margin: 0; }
.vtt-board.is-measuring { cursor: crosshair; }
.vtt-measure { pointer-events: none; }
.vtt-measure line { stroke: #ffd54a; stroke-width: 3; stroke-dasharray: 8 5; }
.vtt-measure circle { fill: #ffd54a; }
.vtt-measure text { fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 3px; font-weight: 700; }
/* Würfel im Spielbereich (_game_panel.html, Reiter „Würfel“) */
.dice-form { display: grid; gap: 8px; margin-bottom: 12px; }
.dice-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.dice-free { display: flex; flex-wrap: wrap; gap: 4px; }
.dice-free input { flex: 1 1 120px; min-width: 0; padding: 4px 8px; }
.dice-sheet { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.dice-sheet select[name=probe] { flex: 1 1 160px; min-width: 0; }
.dice-secret { font-size: 13px; color: var(--ink-soft); }
.dice-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dice-log li { display: flex; gap: 10px; align-items: center; }
.dice-log li.is-secret { opacity: .75; }
.dice-total { min-width: 42px; text-align: center; font-size: 20px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--ink); }
.dice-what small { display: block; }
/* Flächen von Zaubern (table.js): bedeckte Felder unter den Figuren, eigene kräftiger */
.vtt-areas { pointer-events: none; }
.vtt-area rect { fill: rgba(230, 81, 0, .28); stroke: rgba(230, 81, 0, .7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vtt-area.is-own rect { fill: rgba(255, 152, 0, .38); }
.vtt-area text { fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 3px; font-weight: 700; }
.vtt-area-preview { fill: rgba(255, 213, 74, .2); stroke: #ffd54a; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.vtt-area-bar { flex-wrap: wrap; gap: .4rem .8rem; }
.vtt-area-bar label { display: inline-flex; gap: .3rem; align-items: center; }
.vtt-area-bar input[type=number] { width: 4.5rem; }
.vtt-area-list { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.vtt-ping { pointer-events: none; }
.vtt-ping circle { fill: rgba(255, 213, 74, .35); stroke: #ffd54a; stroke-width: 3; }
.vtt-ping .vtt-ping-wave { fill: none; transform-box: fill-box; transform-origin: center; animation: vtt-ping 1s ease-out 3; }
.vtt-ping text { fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 3px; font-weight: 700; }
@keyframes vtt-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vtt-ping .vtt-ping-wave { animation: none; } }
#vtt-ping.is-on, #vtt-ruler.is-on { background: #ffd54a; color: #231f20; }
.vtt-token.is-dragging { cursor: grabbing; opacity: .8; }
.vtt-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vtt-start, .vtt-fight { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.vtt-start .muted, .vtt-fight .muted { font-size: 13px; }
.vtt-fight select { width: auto; flex: 1 1 140px; }
.vtt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vtt-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; }
.vtt-list form { margin: 0; }
.vtt-order li { display: grid; grid-template-columns: 24px 14px minmax(0, 1fr) auto; gap: 2px 8px; }
.vtt-order .vtt-actions { grid-column: 4; grid-row: 1; }
.vtt-order .vtt-quick-hp { grid-column: 3 / -1; grid-row: 2; }
.vtt-order .vtt-conditions { grid-column: 3 / -1; grid-row: 3; font-size: 13px; }
.vtt-conditions summary { cursor: pointer; color: var(--accent); }
.vtt-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.vtt-chip { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.vtt-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.vtt-condition-text { display: flex; gap: 4px; }
.vtt-condition-text input { flex: 1; min-width: 0; padding: 3px 6px; }
.vtt-order li.is-active { background: rgba(255, 213, 74, .22); box-shadow: inset 4px 0 0 #ffd54a; }
.vtt-order li.is-down .vtt-name { text-decoration: line-through; color: var(--ink-soft); }
.vtt-init { width: 24px; text-align: center; font-weight: 700; }
.vtt-order-gm li { grid-template-columns: 44px 14px minmax(0, 1fr) auto; }
.vtt-init-input { width: 44px; padding: 2px; }
.vtt-name { flex: 1 1 110px; min-width: 0; }
.vtt-hp-text { display: block; color: var(--ink-soft); }
.vtt-quick-hp { display: flex; gap: 3px; align-items: center; }
.game-panel .vtt-quick-hp input[type=number] { width: 64px; padding: 3px 6px; }
.vtt-actions { display: flex; gap: 4px; margin-left: auto; }
.vtt-eye.is-off { opacity: .55; }
.vtt-more summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 4px 0; }
.vtt-more form { margin-top: 6px; }
.vtt-unlink { margin: 0; font-size: 13px; }
.scene-card { display: flex; flex-direction: column; gap: 6px; }
.scene-card.is-live { box-shadow: inset 4px 0 0 var(--accent), var(--shadow-1); }
.scene-card .vtt-state { align-self: flex-start; }
.scene-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.scene-card-actions form { margin: 0; }
.vtt-state {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--line); color: var(--ink);
}
.vtt-state.vtt-live { background: var(--accent); color: #fff; }
.vtt-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink); flex: none; }
.vtt-token-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vtt-token-form input[type=text] { grid-column: 1 / -1; }
.vtt-check { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.vtt-preview { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.vtt-preview p { margin: 6px 10px; font-size: 13px; }
.location-notes { font-size: 14px; }
/* Bearbeiten gespeicherter Orte: Einträge mit mehreren Feldern (campaign_location_edit.html) */
.loc-records { border: var(--ui-border); border-radius: 8px; padding: 8px 12px 12px; }
.loc-records legend { font-weight: 700; padding: 0 4px; }
.loc-record { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 12px; padding: 10px 0; border-bottom: var(--ui-border); }
.loc-record:last-child { border-bottom: 0; }
.loc-record > strong { grid-column: 1 / -1; }
.loc-record-cell { display: grid; gap: 2px; font-size: 13px; }
.loc-record-cell span { color: var(--ink-soft); }
.loc-record-delete { align-self: end; font-size: 13px; color: var(--hp-damage); }
/* Orte-Baum (campaign_locations.html, _location_node.html, location_tree.js) */
.loc-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.loc-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: var(--ui-border); border-radius: 6px; background: var(--paper); }
.loc-search svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.loc-search input { flex: 1; border: 0; background: transparent; padding: 12px 0; font: inherit; color: var(--ink); outline: none; }
.loc-search:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.loc-filter-toggle { width: 40px; height: 40px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 6px; }
.loc-filter-toggle svg { width: 24px; height: 24px; }
.loc-filter-toggle.is-on, .loc-filter-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.loc-tree, .loc-children { list-style: none; margin: 0; padding: 0; }
.loc-tree { padding: 8px 12px; margin-bottom: 12px; }
.loc-children { padding-left: 28px; }
.loc-node[hidden], .loc-children[hidden] { display: none; }
.loc-row { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 2px 4px; border-radius: 6px; }
.loc-row:hover { background: var(--accent-soft); }
.loc-node.is-hit > .loc-row .loc-name { text-decoration: underline; text-decoration-color: var(--accent); }
.loc-toggle, .loc-toggle-space { width: 22px; flex: none; }
.loc-toggle { border: 0; background: none; padding: 0; color: var(--ink-soft); cursor: pointer; font-size: 16px; line-height: 1; transition: transform .15s; }
.loc-toggle[aria-expanded="false"] { transform: rotate(-90deg); }
.loc-icon { width: 20px; height: 20px; flex: none; }
.loc-name { font-size: 17px; color: var(--ink); text-decoration: none; }
.loc-name:hover { color: var(--link); }
.loc-summary { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.loc-type { margin-left: auto; flex: none; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(214, 160, 106, .18); color: #b8763a; }
.loc-actions { display: flex; gap: 2px; flex: none; }
.loc-actions a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--ink-soft); }
.loc-actions a:hover { background: var(--accent-soft); color: var(--ink); }
.loc-actions a:nth-child(3) { color: #c98a4b; }
.loc-actions .loc-delete { color: #d23b3b; }
.loc-actions svg { width: 17px; height: 17px; }
.loc-row:not(:has(.loc-type)) .loc-actions { margin-left: auto; }
.place-welt { color: #16a39a; } .place-reich { color: #d9a400; } .place-region { color: #7f8fa6; }
.place-kampf { color: #d23b3b; } .place-siedlung { color: #9b59b6; } .place-posten { color: #e07b00; }
.place-natur { color: #3c9d4a; } .place-stein { color: #9a8f84; } .place-wasser { color: #3b8fd9; }
.place-unterwelt { color: #8d5a2b; } .place-tod { color: #8a8a8a; } .place-heilig { color: #2aa198; }
.place-handel { color: #c98a4b; } .place-ort { color: #b07a4a; }
@media (max-width: 720px) {
  .loc-children { padding-left: 16px; }
  .loc-summary { display: none; }
  .loc-actions a:nth-child(2), .loc-actions a:nth-child(3) { display: none; }
}
.location-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.location-type { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--line-soft); color: var(--ink); }
.location-path { margin: 0 0 2px; font-size: 13px; color: var(--ink-soft); }
.location-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; }
.location-fields > div { display: grid; gap: 4px; }
.location-children ul { margin: 4px 0 12px; padding-left: 20px; }
.location-notes-form { display: grid; gap: 4px; max-width: 760px; margin: 12px 0 4px; }
.location-notes-form label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-top: 6px; }
@media print { .location-notes-form button { display: none; } }

/* Fundstücke, Wildnis-Orte, Fraktionen (trinket_/wild_/faction_generator.html) */
.trinket-table { margin-top: 12px; }
.wild-impression { margin: 14px 0 0; font-size: 17px; font-style: italic; }
.faction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 10px; align-items: start; }
.faction-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.faction-head h2 { margin: 0; font-size: 19px; line-height: 1.2; }
.faction-head p { margin: 2px 0 0; }
.faction-crest { flex: none; width: 58px; height: 70px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.faction-relations { margin-top: 16px; }
.faction-relations h2 { margin: 0 0 8px; font-size: 18px; }

/* Deck der vielen Dinge (deck_generator.html) */
.deck-draws { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.deck-draw { border: var(--ui-border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; background: var(--paper); }
.deck-draw h3 { margin: 0 0 6px; font-size: 18px; }
.deck-turn { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.deck-text p { margin: 0 0 6px; }
.deck-note { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--link); }
.deck-cards { margin-top: 14px; font-size: 14px; }
.deck-cards ul { columns: 2 220px; margin: 6px 0 0; padding-left: 20px; }
@media print { .deck-draw { break-inside: avoid; } }

/* Würfelgenerator (dice_generator.html, static/js/dice.js): Würfelformen per clip-path */
.dice-expression { flex: 1 1 220px; }
.dice-expression input { font-size: 18px; letter-spacing: .02em; }
.dice-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dice-add, .dice-clear { cursor: pointer; font: inherit; font-weight: 700; }
.dice-clear { margin-left: auto; }
.dice-error { border-left: 4px solid var(--accent); }
.dice-rolls { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.dice-roll { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  border: var(--ui-border); border-radius: var(--radius); padding: 12px 14px; background: var(--paper); }
.dice-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dice-total { font-size: 34px; line-height: 1; white-space: nowrap; }
.dice-total strong { transition: opacity .2s; }
.dice-detail { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.die { --die-bg: var(--accent); --die-ink: var(--accent-ink); position: relative; display: inline-grid;
  place-items: center; width: 52px; height: 52px; color: var(--die-ink); font-weight: 700;
  font-size: 20px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.die::before { content: ""; position: absolute; inset: 0; background: var(--die-bg); }
.die-value { position: relative; }
.die-2::before { border-radius: 50%; }
.die-3::before, .die-6::before { border-radius: 9px; }
.die-4::before { clip-path: polygon(50% 0, 100% 92%, 0 92%); }
.die-4 .die-value { top: 8px; font-size: 18px; }
.die-8::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.die-10::before, .die-100::before { clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); }
.die-100 { font-size: 17px; }
.die-12::before { clip-path: polygon(50% 0, 98% 36%, 80% 96%, 20% 96%, 2% 36%); }
.die-20::before { clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); }
.die-crit { --die-bg: var(--die-crit); --die-ink: #1d1600; }
.die-fumble { --die-bg: var(--ink); --die-ink: var(--paper); }
.die-dropped { --die-bg: var(--panel); --die-ink: var(--muted); }
.die-dropped .die-value { text-decoration: line-through; }
.die-modifier { font-size: 22px; font-weight: 700; color: var(--ink-soft); }
.is-rolling .die { animation: die-roll .7s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(min(var(--i), 12) * 60ms); }
.is-rolling .dice-total strong, .is-rolling [data-dice-count] { opacity: 0; }
@keyframes die-roll {
  0% { transform: translate(-40px, -18px) rotate(-260deg) scale(.6); opacity: 0; }
  60% { transform: translate(4px, 3px) rotate(18deg) scale(1.05); opacity: 1; }
  80% { transform: translate(-2px, 0) rotate(-6deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .is-rolling .die { animation: none; } }
@media (max-width: 720px) {
  .dice-total { font-size: 28px; }
  .die { width: 44px; height: 44px; font-size: 17px; }
}
@media print { .dice-picker { display: none; } .dice-roll { break-inside: avoid; } }
@media print { .faction, .faction-relations { break-inside: avoid; } }

/* Begegnungsschwierigkeit im Kampf-Tracker (encounter_detail.html) */
.encounter-difficulty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; font-size: 14px; cursor: help; }
.difficulty-badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.difficulty-leicht { background: #2f6b3a; }
.difficulty-angemessen { background: #23826f; }
.difficulty-fordernd { background: #b8731c; }
.difficulty-tödlich { background: #9b1c1c; }

/* Klassenmerkmale (class_detail.html) */
.class-level-table td:first-child { width: 70px; }
.class-sub-link { font-style: italic; }
.class-section { margin: 26px 0 10px; }
.class-section .muted { font-size: 15px; font-weight: 400; }
.class-feature { margin-bottom: 12px; scroll-margin-top: 80px; }
.class-feature h3 { margin: 0 0 6px; font-size: 18px; }
.class-feature-level { font-size: 13px; font-weight: 400; margin-left: 6px; }
.class-feature:target { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { .class-feature { break-inside: avoid; } }

/* „Merkmale ↗“ in der Klassenzeile des Bogens (_class_row.html, formsets.js syncClassLink) */
.class-features-link { align-self: center; font-size: 13px; white-space: nowrap; }
@media print { .class-features-link { display: none; } }

/* Stufenaufstieg-Assistent (level_up.html) */
.levelup-form { display: grid; gap: 14px; }
.levelup-step h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; }
.levelup-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 14px; }
.levelup-radio { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
.levelup-form .levelup-radio input[type="radio"] { width: auto; margin: 0; }
.card.levelup-form input.levelup-roll { width: 80px; flex: none; }
.levelup-form select { max-width: 460px; }
.levelup-gain { margin: 6px 0 0; font-size: 16px; }
.levelup-xp { margin: 6px 0 0; }
.levelup-refresh { justify-self: start; }
/* Geführte Charaktererstellung (character_wizard.html): Auswahlkarten mit Radioknopf */
.wizard-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wizard-form legend { padding: 0; }
.wizard-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.wizard-group { margin: 12px 0 6px; font-size: 15px; }
.wizard-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.wizard-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; padding: 8px 10px; border: var(--ui-border); border-radius: var(--radius); cursor: pointer; background: var(--paper); }
.wizard-card input[type="radio"] { grid-row: span 2; width: auto; margin: 3px 0 0; }
.wizard-card small { grid-column: 2; }
.wizard-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wizard-card:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }

/* Erstellung als Geschichte: Kammer (_creation_room.html) links, Kapitel rechts; static/js/wizard.js
   zeigt die Kapitel nacheinander (.is-story) und blendet Teile der Kammer um (.room-off) */
.wizard-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.wizard-scene { position: sticky; top: 12px; padding: 12px; }
.wizard-intro { margin: 10px 0 6px; font-style: italic; color: var(--ink-soft); }
.wizard-tale { margin: 0 0 10px; font-size: 16px; font-style: italic; line-height: 1.45; }
.wizard-progress { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.wizard-name { max-width: 360px; }
.wizard-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.wizard-nav [data-next] { margin-left: auto; }
.wizard-form.is-story .levelup-apply { margin-top: 10px; }
.wizard-more { grid-column: 2; justify-self: start; font-size: 13px; }
/* „Mehr erfahren“ (_wizard_info.html im .spell-modal-Dialog) */
.wizard-info-modal { max-width: 640px; max-height: calc(100vh - 48px); overflow: auto; }
.wizard-info h2 { margin: 0 28px 6px 0; font-size: 22px; }
.wizard-info h3 { margin: 16px 0 6px; font-size: 16px; }
.wizard-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0 0; }
.wizard-facts dt { font-weight: 700; color: var(--ink-soft); }
.wizard-facts dd { margin: 0; }
.wizard-feature { margin: 0 0 6px; }
.wizard-feature summary { cursor: pointer; font-weight: 700; }
.wizard-later { margin: 0; padding-left: 18px; }
.wizard-info-more { margin: 16px 0 0; }
@media (max-width: 720px) { .wizard-facts { grid-template-columns: 1fr; } .wizard-facts dd { margin-bottom: 4px; } }
.wizard-form.is-story .wizard-chapter { animation: wizard-turn .45s ease-out; }
@keyframes wizard-turn { from { opacity: 0; transform: translateY(8px); } }
.room-chronicle { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
.room-chronicle li.is-new { animation: chronicle-new 1.4s ease-out; }
@keyframes chronicle-new { from { background: var(--accent-soft); } }

.room-scene { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #2b231c;
  --room-wall: #d9d2c5; --room-floor: #9a8f80; --room-beam: #6b4a2b; --room-sky: #c9d3dc; }
.room-ink { stroke: #3b2f27; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.room-wall { fill: var(--room-wall); transition: fill .8s ease; }
.room-floor { fill: var(--room-floor); transition: fill .8s ease; }
.room-beam { fill: var(--room-beam); transition: fill .8s ease; }
.room-sky { fill: var(--room-sky); transition: fill .8s ease; }
.room-line { fill: none; stroke-opacity: .35; }
.room-timber { stroke: #5b3d22; }
.room-name { font: 700 10px var(--font); fill: #3b2f27; stroke: none; }
.room-part, .room-door { transition: opacity .7s ease, transform .7s ease; transform-box: fill-box; transform-origin: center bottom; }
.room-off { opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none; }
.room-scene[data-room="fachwerk"] { --room-wall: #ead9b8; --room-floor: #a87c50; }
.room-scene[data-room="stein"] { --room-wall: #9a958c; --room-floor: #6f6a62; --room-beam: #4f4a44; }
.room-scene[data-room="wald"] { --room-wall: #cdbb8f; --room-floor: #7d8b4f; }
.room-scene[data-room="unterreich"] { --room-wall: #4a4458; --room-floor: #39343f; --room-beam: #2c2834; --room-sky: #2c2834; }
.room-scene[data-room="halbling"] { --room-wall: #f0deb2; --room-floor: #b0864f; }
.room-scene[data-room="werkstatt"] { --room-wall: #d8cdb8; --room-floor: #8b7355; }
.room-scene[data-room="drache"] { --room-wall: #c9b9a0; --room-floor: #7a5c45; }
.room-scene[data-room="hoellisch"] { --room-wall: #6a4040; --room-floor: #3f2a2a; --room-beam: #2e1d1d; }
.room-scene[data-room="himmlisch"] { --room-wall: #f3ead2; --room-floor: #c8b07a; --room-beam: #a8875a; }
.room-scene[data-room="lager"] { --room-wall: #a88d6a; --room-floor: #6d5238; }
.room-scene[data-room="meer"] { --room-wall: #b9cfd1; --room-floor: #8a7a5e; }
.room-scene[data-room="glut"] { --room-wall: #c98d5c; --room-floor: #6b4630; }
.room-scene[data-room="wind"] { --room-wall: #d6e1e8; --room-floor: #9a8f80; }
.room-scene[data-sky="gut"] { --room-sky: #9fd0f0; }
.room-scene[data-sky="neutral"] { --room-sky: #f2b88c; }
.room-scene[data-sky="boese"] { --room-sky: #1f2a44; }
.room-flicker { animation: room-flicker 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center bottom; }
@keyframes room-flicker { 50% { opacity: .75; transform: scaleY(.92); } }
.room-glowing { animation: room-glow 2.6s ease-in-out infinite alternate; }
@keyframes room-glow { to { opacity: .55; } }
.room-twinkle path { animation: room-glow 1.2s ease-in-out infinite alternate; }
.room-twinkle path:nth-child(2n) { animation-delay: .6s; }
.room-turn, .room-turn-back { transform-box: fill-box; transform-origin: center; animation: room-turn 14s linear infinite; }
.room-turn-back { animation-direction: reverse; }
@keyframes room-turn { to { transform: rotate(360deg); } }
.room-sway { transform-box: fill-box; transform-origin: center top; animation: room-sway 3s ease-in-out infinite alternate; }
@keyframes room-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .room-flicker, .room-glowing, .room-twinkle path, .room-turn, .room-turn-back, .room-sway,
  .wizard-form.is-story .wizard-chapter, .room-chronicle li.is-new { animation: none; }
  .room-wall, .room-floor, .room-beam, .room-sky, .room-part, .room-door { transition: none; }
}
@media (max-width: 1050px) {
  .wizard-story { grid-template-columns: 1fr; }
  .wizard-scene { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; align-items: start; }
  .wizard-scene .room-scene { grid-row: span 2; }
  .wizard-intro { margin: 0; }
}
@media (max-width: 720px) {
  .wizard-scene { grid-template-columns: 1fr; }
  .wizard-scene .room-scene { grid-row: auto; }
  .wizard-intro { display: none; }
  /* nur die neueste Zeile, damit das Kapitel nah unter der Kammer bleibt */
  .room-chronicle { padding-left: 0; list-style: none; }
  .room-chronicle li:not(:last-child) { display: none; }
}
@media print { .wizard-story { display: block; } .wizard-scene { position: static; break-inside: avoid; } }
.levelup-preview { margin-top: 16px; }
.levelup-preview h2 { margin-top: 0; }
.levelup-slot { display: inline-block; margin-right: 12px; }
.levelup-slot.changed { color: var(--link); }
.levelup-feature { margin: 6px 0; padding: 8px 12px; border: var(--ui-border); border-radius: var(--radius); }
.levelup-feature > summary { cursor: pointer; font-weight: 700; }
.levelup-apply { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.levelup-apply p { flex-basis: 100%; margin: 4px 0 0; }

/* Allgemeine Regeln (rules_reference.html): Inhaltsverzeichnis links, Abschnitte rechts */
.rules-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.rules-toc { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 12px 14px; font-size: 14px; }
.rules-toc ol { margin: 0; padding-left: 0; list-style: none; }
.rules-toc ol ol { padding-left: 12px; margin: 2px 0 6px; font-size: 13px; }
.rules-toc li { margin: 3px 0; }
.rules-toc a { text-decoration: none; }
.rules-toc a:hover { text-decoration: underline; }
.rules-section { margin-bottom: 10px; scroll-margin-top: 80px; }
.rules-section h3 { margin: 0 0 6px; font-size: 20px; }
.rules-section h4 { margin: 0 0 6px; font-size: 17px; }
.rules-section h4 .muted { font-size: 13px; font-weight: 400; margin-left: 6px; }
.rules-depth-4 { margin-left: 18px; }
.rules-section:target { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1050px) {
  .rules-layout { grid-template-columns: minmax(0, 1fr); }
  .rules-toc { position: static; max-height: 260px; }
  .rules-depth-4 { margin-left: 0; }
}
@media print { .rules-toc { display: none; } .rules-layout { display: block; } .rules-section { break-inside: avoid; } }

/* Anleitung der geführten Charaktererstellung (static/js/sheet/guide.js): Karte unten rechts,
   hervorgehobene Kästen des aktuellen Schritts */
.guide-card { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: 45vh; overflow: auto; padding: 14px 16px 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--accent); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
.guide-card h2 { margin: 0 0 6px; font-size: 18px; }
.guide-counter { margin: 0 0 2px; font-size: 13px; }
.guide-text p { margin: 0 0 8px; line-height: 1.4; }
.guide-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.guide-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--ink-soft); font-size: 18px; cursor: pointer; }
/* Der Rahmen leuchtet sanft auf, solange der Schritt offen ist */
.guide-target { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 7px var(--accent-soft); animation: guide-pulse 1.8s ease-in-out infinite; }
@keyframes guide-pulse {
  50% { outline-color: color-mix(in srgb, var(--accent) 35%, transparent);
        box-shadow: 0 0 0 10px var(--accent-soft), 0 0 18px 4px color-mix(in srgb, var(--accent) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .guide-target { animation: none; } }
body.has-guide .sheet-main { padding-bottom: 45vh; }
@media (max-width: 720px) {
  .guide-card { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 40vh; }
}
@media print { .guide-card { display: none; } .guide-target { outline: none; box-shadow: none; } }