/* ===================== Charakterbogen: D&D-Beyond-inspiriertes Layout, an Ayocin-Tokens angeglichen ===================== */
.charsheet-overlay { align-items: flex-start; padding: 20px 0; overflow-y: auto; }
.charsheet-box {
  width: min(1240px, 97vw); max-height: 93vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(10,15,30,0.86);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  color: var(--parchment); font-family: var(--font-body);
  padding: 24px 28px;
}
.muted { color: var(--parchment-muted); font-size: 12px; }

/* -- Kopfbereich -- */
.csb-topbar { display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.csb-portrait {
  width: 110px; height: 110px; border-radius: var(--radius-sm); background: var(--ink-700); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: bold;
  color: var(--gold); overflow: hidden; flex-shrink: 0; position: relative;
}
.csb-portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Nutzerwunsch 2026-08-30: Portrait ist jetzt anklickbar (eigenes Bild
   hochladen statt nur Initiale) -- kleiner "Bild aendern"-Hinweis, der erst
   beim Hover erscheint, damit die Klickbarkeit nicht staendig ablenkt. */
.csb-portrait.is-editable { cursor: pointer; }
.csb-portrait.is-editable::after {
  content: "Bild aendern"; position: absolute; inset: auto 0 0 0; padding: 4px 2px;
  font-size: 10px; font-family: var(--font-body); text-align: center; color: var(--parchment);
  background: rgba(0,0,0,0.65); opacity: 0; transition: opacity 0.15s;
}
.csb-portrait.is-editable:hover::after { opacity: 1; }
.csb-title-block { flex: 1; min-width: 0; }
.cs-name-input {
  font-size: 22px; font-weight: 700; background: transparent; border: none; color: var(--gold-strong);
  border-bottom: 1px solid var(--border); padding: 4px 0; width: 100%; font-family: var(--font-display);
}
.cs-name-input:disabled { color: var(--parchment); border-bottom: none; }
.csb-subtitle-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.csb-header-actions { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }
.cs-close {
  background: var(--ink-700); border: 1px solid var(--border); color: var(--parchment); font-size: 18px;
  cursor: pointer; width: 30px; height: 30px; border-radius: 50%; line-height: 1;
}
.cs-close:hover { background: var(--ink-600); color: var(--gold-strong); }

.cs-field-label, .cs-owner-label {
  font-size: 10px; color: var(--parchment-muted); text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; flex-direction: column; gap: 4px; min-width: 100px;
}
.cs-field-label input, .cs-owner-label input {
  padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--ink-950); color: var(--parchment); font-size: 13px; font-family: var(--font-body);
}
.cs-field-label span, .cs-owner-label span { color: var(--parchment); font-size: 13px; padding: 6px 0; }
.cs-block-label { min-width: 100%; }
.cs-field-label textarea {
  width: 100%; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--ink-950); color: var(--parchment); font-size: 13px; resize: vertical; line-height: 1.5; font-family: var(--font-body);
}
.cs-readonly-block {
  background: var(--ink-950); border-radius: var(--radius-sm); padding: 8px; font-size: 13px;
  color: var(--parchment-dim); white-space: pre-wrap; line-height: 1.5;
}
.secondary-btn {
  padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--ink-700); color: var(--parchment); cursor: pointer; font-size: 12px; margin-top: 6px;
  font-family: var(--font-display);
}
.secondary-btn:hover { background: var(--ink-600); border-color: var(--accent); }

/* -- Badge-Reihe (Attribute, Uebungsbonus, Speed, Inspiration, HP, Initiative/AC-Hexagon, Abwehr/Zustaende) -- */
.csb-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.csb-ability-badge {
  background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; min-width: 64px;
}
.csb-badge-label { font-size: 9px; color: var(--parchment-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.csb-ability-mod { font-size: 22px; font-weight: 700; color: var(--gold-strong); font-family: var(--font-mono); }
.csb-ability-score {
  margin-top: 4px; width: 36px; text-align: center; background: var(--ink-950); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--parchment-muted); font-size: 12px; padding: 2px; font-family: var(--font-mono);
}
.csb-badge-box { background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; min-width: 70px; }
.csb-badge-value {
  width: 50px; text-align: center; background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--gold-strong); font-size: 16px; font-weight: 700; padding: 4px; font-family: var(--font-mono);
}
.csb-speed-row { display: flex; align-items: baseline; gap: 4px; justify-content: center; }
.csb-unit { font-size: 11px; color: var(--parchment-muted); }
.csb-inspiration-check { width: 26px; height: 26px; accent-color: var(--accent); margin-top: 4px; }

.csb-hex {
  width: 78px; height: 68px; position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ink-950); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.csb-hex-inner { text-align: center; }
.csb-hex-value { width: 46px; text-align: center; background: transparent; border: none; color: var(--gold-strong); font-size: 20px; font-weight: 700; font-family: var(--font-mono); }
.csb-hex-label { font-size: 8px; color: var(--parchment-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: -2px; }

.csb-hp-badge { background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; min-width: 230px; }
.csb-hp-row { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.csb-hp-field { text-align: center; }
.csb-hp-tag { display: block; font-size: 9px; color: var(--parchment-muted); text-transform: uppercase; }
.csb-hp-field input {
  width: 50px; text-align: center; background: var(--ink-900); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--gold-strong); font-size: 16px; font-weight: 700; padding: 3px; margin-top: 2px; font-family: var(--font-mono);
}
.csb-hp-extra { margin-top: 8px; font-size: 11px; color: var(--parchment-muted); display: flex; flex-direction: column; gap: 6px; }
.csb-hp-extra label { display: flex; align-items: center; gap: 6px; }
.csb-hitdice { width: 60px; background: var(--ink-900); border: 1px solid var(--border); border-radius: 4px; color: var(--parchment); padding: 2px 4px; font-family: var(--font-mono); }
.cs-death-saves { font-size: 11px; color: var(--parchment-dim); }
.ds-dot { cursor: pointer; color: var(--border); margin: 0 2px; font-size: 14px; }
.ds-dot.filled.ok { color: var(--success); }
.ds-dot.filled.bad { color: var(--danger); }

.csb-info-box { background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; flex: 1; min-width: 220px; }
.csb-info-textarea {
  width: 100%; background: var(--ink-900); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--parchment);
  font-size: 12px; padding: 6px; resize: vertical; margin-top: 4px; font-family: var(--font-body);
}

/* -- Section-Ueberschriften -- */
.cs-section-heading {
  font-size: 11px; color: var(--parchment-muted); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; font-weight: 600;
  font-family: var(--font-display);
}

/* -- Drei-Spalten-Koerper -- */
.csb-body { display: grid; grid-template-columns: 220px 260px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.csb-left-col, .csb-skills-col {
  background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px;
}
.csb-main-col { min-width: 0; }
.csb-side-col { min-width: 0; }

.csb-mini-abilities { display: flex; flex-direction: column; gap: 2px; }
.csb-mini-ability-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
}
.csb-mini-ab-label { width: 30px; color: var(--parchment-muted); font-size: 11px; }
.csb-mini-ab-mod { width: 30px; font-weight: 700; color: var(--gold-strong); font-family: var(--font-mono); }
.cs-save-row { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--parchment-dim); }
.cs-save-row input { accent-color: var(--accent); width: 13px; height: 13px; }

/* -- Wuerfel-Buttons + Modus-Auswahl -- */
.cs-roll-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 2px 5px; color: var(--parchment);
}
.cs-roll-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.csb-roll-mode-row {
  display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--parchment-muted);
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.csb-roll-mode-row label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.csb-roll-mode-row input { accent-color: var(--accent); }

.csb-passive-stack { display: flex; flex-direction: column; gap: 6px; }
.csb-passive-box {
  background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px;
  display: flex; align-items: baseline; gap: 8px;
}
.csb-passive-box b { font-size: 18px; color: var(--gold-strong); font-family: var(--font-mono); }
.csb-passive-box span { font-size: 11px; color: var(--parchment-muted); }

.cs-misc-fields { display: flex; flex-direction: column; gap: 8px; }
.cs-misc-fields textarea { min-height: 32px; }

/* -- Fertigkeiten-Spalte -- */
.csb-skills-header {
  display: grid; grid-template-columns: 18px 34px 1fr 36px 22px; font-size: 9px; color: var(--parchment-muted);
  text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.cs-skill-row {
  display: grid; grid-template-columns: 18px 34px 1fr 36px 22px; align-items: center; font-size: 12px;
  padding: 4px 0; border-bottom: 1px solid var(--border-soft);
}
.cs-skill-prof { cursor: pointer; color: var(--accent); text-align: center; font-size: 12px; }
.cs-skill-ability-col { color: var(--parchment-muted); font-size: 10px; }
.cs-skill-name { color: var(--parchment); }
.cs-skill-bonus { font-weight: 700; text-align: right; color: var(--gold-strong); font-family: var(--font-mono); }

/* -- Tabs wie Register -- */
.cs-tabs { display: flex; gap: 3px; flex-wrap: wrap; border-bottom: 2px solid var(--border); }
.cs-tab-btn {
  padding: 8px 14px; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0;
  background: var(--ink-900); color: var(--parchment-muted); cursor: pointer; font-size: 12px; font-weight: 600;
  letter-spacing: 0.3px; position: relative; top: 2px; text-transform: uppercase; font-family: var(--font-display);
}
.cs-tab-btn.active { background: var(--ink-700); color: var(--gold-strong); border-color: var(--accent); top: 0; }
.cs-tab-btn:hover:not(.active) { background: var(--ink-800); }
.cs-tab-content { min-height: 220px; padding-top: 12px; }

.cs-subfilter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-subfilter-btn {
  padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--ink-900);
  color: var(--parchment-muted); cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
}
.cs-subfilter-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.cs-subfilter-btn:hover:not(.active) { background: var(--ink-800); }

/* -- Tabellen -- */
.cs-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.cs-table th {
  text-align: left; font-size: 10px; color: var(--parchment-muted); text-transform: uppercase;
  letter-spacing: 0.5px; padding: 5px 6px; border-bottom: 1px solid var(--border); font-family: var(--font-display);
}
/* Etappe 37: Kopf-Checkbox zum gleichzeitigen An-/Ablegen aller Gegenstaende. */
.cs-equip-all-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.cs-table td { padding: 4px 6px; border-bottom: 1px solid var(--border-soft); }
.cs-table input, .cs-table select {
  width: 100%; background: var(--ink-950); border: 1px solid var(--border); border-radius: 4px;
  color: var(--parchment); padding: 4px 6px; font-size: 12px; font-family: var(--font-body);
}
.cs-table input:disabled, .cs-table select:disabled { border-color: transparent; background: transparent; color: var(--parchment-dim); }

.cs-carry-box {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
}
.cs-carry-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--parchment);
  font-family: var(--font-display);
}
.cs-carry-head span { color: var(--gold-strong); }
.cs-carry-bar {
  height: 8px;
  margin: 10px 0;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--ink-950);
  border: 1px solid var(--border-soft);
}
.cs-carry-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.cs-carry-box.warn .cs-carry-bar span { background: #c99d42; }
.cs-carry-box.heavy .cs-carry-bar span { background: #d06d3f; }
.cs-carry-box.over .cs-carry-bar span { background: #d94c4c; }
.cs-carry-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--parchment-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cs-carry-warning {
  margin-top: 8px;
  color: #ffb0a8;
  font-weight: 700;
}

/* -- Aktionen: 2-Spalten-Ansicht + automatische Vorschlaege -- */
.cs-actions-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cs-actions-columns h4, .cs-actions-tab > h4 {
  margin: 0 0 6px; font-size: 12px; color: var(--accent); text-transform: uppercase;
  letter-spacing: 1px; border-bottom: 1px solid var(--border); padding-bottom: 4px; font-weight: 700; font-family: var(--font-display);
}
.cs-action-derived-row { background: var(--accent-soft); }
.cs-action-derived-row td { color: var(--parchment-dim); font-size: 12px; }
@media (max-width: 900px) { .cs-actions-columns { grid-template-columns: 1fr; } }

/* -- Wizard: Freitext-Fallback fuer Startausruestung -- */
.wiz-equip-fallback-text {
  background: var(--ink-900); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  color: var(--parchment-dim); font-size: 13px; line-height: 1.5;
}

.cs-level-heading {
  margin: 14px 0 6px; font-size: 12px; color: var(--accent); text-transform: uppercase;
  letter-spacing: 1px; border-bottom: 1px solid var(--border); padding-bottom: 4px; font-weight: 700; font-family: var(--font-display);
}

.cs-search-row { position: relative; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.cs-search-row input[type=text], .cs-search-row select {
  padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--ink-950); color: var(--parchment);
  font-family: var(--font-body);
}
.cs-search-results { max-height: 220px; overflow-y: auto; background: rgba(0,0,0,0.25); border-radius: var(--radius-sm); }
.cs-search-result {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 10px;
  font-size: 12px; border-bottom: 1px solid var(--border-soft);
}
.cs-search-result button { padding: 3px 14px; border: none; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); cursor: pointer; font-weight: 600; }
.cs-search-result button:hover { background: var(--accent-hover); }
/* Etappe 35: Name-Button in Suchergebnissen (oeffnet Info-Popup) soll wie
   ein dezenter Link aussehen, nicht wie der "+"-Hinzufuegen-Button daneben -
   sonst konkurrieren zwei gleich auffaellige Pill-Buttons in einer Zeile. */
.cs-search-result .cs-detail-link {
  padding: 2px 5px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--ink-800); color: var(--gold-strong); font-weight: 400;
}
.cs-search-result .cs-detail-link:hover { border-color: var(--accent); background: var(--accent-soft); }

.cs-spellcasting-box { background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; }
.cs-spellcasting-box label {
  font-size: 11px; color: var(--parchment-muted); display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cs-spellcasting-box select { background: var(--ink-900); color: var(--parchment); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; }
.cs-spell-derived { margin: 10px 0; font-size: 14px; color: var(--parchment); }
.cs-spell-derived b { color: var(--gold-strong); font-family: var(--font-mono); }
.cs-spell-mode-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(216, 190, 120, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(216, 190, 120, 0.06);
  color: var(--parchment-dim);
  line-height: 1.45;
}
.cs-spell-mode-note b {
  flex: 0 0 auto;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cs-slots-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 10px; margin-top: 10px; }
.cs-slot-box {
  text-align: left; font-size: 10px; color: var(--parchment-muted); text-transform: uppercase;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px;
  background: rgba(255,255,255,0.025);
}
.cs-slot-box.has-slots { border-color: var(--border); }
.cs-slot-label { color: var(--gold-muted); font-family: var(--font-mono); margin-bottom: 6px; }
.cs-slot-count { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.cs-slot-box input { width: 38px; text-align: center; background: var(--ink-900); border: 1px solid var(--border); color: var(--gold-strong); border-radius: 4px; font-family: var(--font-mono); }

.cs-currency-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--parchment-muted); text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px;
}
.cs-currency-row input { background: var(--ink-900); border: 1px solid var(--border); color: var(--gold-strong); border-radius: 4px; padding: 4px; font-family: var(--font-mono); }
.cs-total-weight { margin-left: auto; color: var(--info); text-transform: none; font-size: 13px; }

.cs-feature-list { margin-bottom: 12px; }
.cs-feature-item { background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.cs-feature-head { display: flex; justify-content: space-between; align-items: center; }
.cs-feature-head b { color: var(--gold-strong); font-family: var(--font-display); }
.cs-feature-desc { font-size: 13px; color: var(--parchment-dim); margin-top: 5px; white-space: pre-wrap; line-height: 1.5; }

.cs-characteristics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.cs-char-field-label {
  font-size: 10px; color: var(--parchment-muted); text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; flex-direction: column; gap: 4px;
}
.cs-char-field-label input {
  padding: 6px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--ink-950); color: var(--parchment); font-family: var(--font-body);
}

@media (max-width: 900px) {
  .csb-body { grid-template-columns: 1fr; }
}

/* ===================== Charaktererstellungs-Assistent (Wizard) ===================== */
.wizard-box {
  width: min(760px, 95vw); max-height: 88vh; overflow-y: auto;
  background: rgba(10,15,30,0.88);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  color: var(--parchment); font-family: var(--font-body); padding: 24px 28px;
}
.wizard-header-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 18px;
}
.wizard-steps { display: flex; gap: 4px; flex-wrap: wrap; }
.wiz-cancel { flex-shrink: 0; }
.wizard-step-dot {
  padding: 6px 12px; border-radius: var(--radius-pill); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; font-family: var(--font-display); color: var(--parchment-muted);
  background: var(--ink-900); border: 1px solid var(--border);
}
.wizard-step-dot.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.wizard-step-dot.done { color: var(--success); border-color: #4a6b3a; }
.wizard-title {
  font-family: var(--font-display); font-size: 20px; color: var(--gold-strong); margin: 0 0 14px;
  letter-spacing: 0.5px;
}
.wizard-body { min-height: 320px; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.wizard-nav button {
  padding: 9px 22px; border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.5px; border: 1px solid var(--border);
}
.wizard-nav .wiz-back { background: var(--ink-900); color: var(--parchment-dim); }
.wizard-nav .wiz-back:hover { background: var(--ink-800); }
.wizard-nav .wiz-next { background: var(--accent); color: var(--on-accent); font-weight: 700; border-color: var(--accent); }
.wizard-nav .wiz-next:hover { background: var(--accent-hover); }
.wizard-nav .wiz-next:disabled { opacity: 0.4; cursor: not-allowed; }

.wiz-option-list { display: flex; flex-direction: column; gap: 8px; }
.wiz-option-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer;
  background: rgba(0,0,0,0.15); transition: background 0.1s;
}
.wiz-option-card:hover { background: rgba(255,255,255,0.04); }
.wiz-option-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.wiz-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wiz-opt-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.wiz-opt-portrait {
  flex: 0 0 132px;
  width: 132px;
  height: 72px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgb(0 0 0 / .18), rgb(0 0 0 / .52)),
    var(--wiz-portrait-image) center/cover no-repeat,
    linear-gradient(135deg, rgb(255 255 255 / .04), rgb(255 255 255 / .01));
  display: flex;
  align-items: end;
  justify-content: center;
  overflow: hidden;
}
.wiz-opt-portrait span {
  margin: 0 8px 8px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgb(255 255 255 / .72);
}
.wiz-option-card .wiz-opt-name { font-family: var(--font-display); font-size: 15px; color: var(--gold-strong); }
.wiz-option-card .wiz-opt-meta { font-size: 12px; color: var(--parchment-muted); margin-top: 2px; }
.wiz-option-card .wiz-opt-desc { font-size: 12px; color: var(--parchment-dim); margin-top: 6px; line-height: 1.4; max-height: 0; overflow: hidden; }
.wiz-option-card.selected .wiz-opt-desc { max-height: 400px; margin-top: 8px; }

@media (max-width: 640px) {
  .wiz-opt-row {
    align-items: stretch;
    flex-direction: column;
  }

  .wiz-opt-portrait {
    width: 100%;
    height: 108px;
    flex-basis: auto;
  }
}

.wiz-search-input {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--ink-900); color: var(--parchment); margin-bottom: 10px; font-family: var(--font-body);
}

.wiz-abilities-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.wiz-ability-card {
  text-align: center; background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 14px; min-width: 90px;
}
.wiz-ability-icon {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin: 0 auto 6px;
  border-radius: 50%;
}
.wiz-ability-card .wiz-ab-label { font-family: var(--font-display); font-size: 11px; color: var(--parchment-muted); }
.wiz-ability-card select, .wiz-ability-card input {
  width: 64px; text-align: center; margin: 6px 0; background: var(--ink-900); color: var(--gold-strong);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; font-family: var(--font-mono);
}
.wiz-ability-card .wiz-ab-mod { font-size: 13px; color: var(--parchment-dim); font-family: var(--font-mono); }
.wiz-ability-card .wiz-ab-bonus { font-size: 11px; color: var(--success); margin-top: 2px; }
.wiz-method-row { display: flex; gap: 10px; margin-bottom: 14px; }
.wiz-method-row button {
  padding: 7px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--ink-900); color: var(--parchment-dim);
  cursor: pointer; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.4px;
  text-transform: uppercase;
}
.wiz-method-row button:hover { background: var(--ink-700); color: var(--parchment); border-color: var(--border-strong); }
.wiz-method-row button.active, .wiz-method-btn.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600;
}
.wiz-points-remaining { font-family: var(--font-mono); color: var(--gold-strong); }
.wiz-pb-plus, .wiz-pb-minus {
  width: 26px; height: 26px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--ink-800); color: var(--parchment); cursor: pointer; line-height: 1;
}
.wiz-pb-plus:hover, .wiz-pb-minus:hover { background: var(--ink-600); border-color: var(--accent); }
.wiz-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.wiz-name-input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--ink-900); color: var(--parchment); font-family: var(--font-body); font-size: 15px;
}
.wiz-equip-group { margin-bottom: 12px; }
.wiz-equip-desc { font-size: 12px; color: var(--parchment-muted); margin-top: 4px; }
.wiz-equip-select, .wiz-equip-category-select, .wiz-array-select, .wiz-manual-input {
  background: var(--ink-900); color: var(--parchment); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 8px; font-family: var(--font-body);
}



/* ==========================================================================
   OPTIK-UEBERARBEITUNG (D&D-Beyond-inspiriert)
   Dieser Block steht bewusst am Ende und ueberschreibt aeltere Regeln weiter
   oben. Zwei Ziele:
   1) Der Charakterbogen ist im eigenen Tab eine echte Vollbild-Seite und
      kein schwebendes Fenster mehr.
   2) Modernere, ruhigere Optik: klare Panels, kraeftige Rot-Akzente,
      runde Wert-Scheiben und ein Schild fuer die Ruestungsklasse.
   ========================================================================== */

/* ---------- 1. Vollbild statt Fenster (eigener Tab) ---------- */
body.cs-standalone { background: var(--ink-950); }
body.cs-standalone .charsheet-overlay {
  position: static; inset: auto; z-index: auto;
  display: block; background: none;
  padding: 0; overflow: visible; min-height: 100vh;
}
body.cs-standalone .charsheet-box {
  width: 100%; max-width: none; max-height: none; overflow: visible;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 0; box-shadow: none;
  padding: 0; gap: 0;
}
/* Kopfleiste bleibt beim Scrollen oben stehen */
body.cs-standalone .csb-topbar {
  position: sticky; top: 0; z-index: 30;
  margin: 0; padding: 14px clamp(16px, 3.5vw, 44px);
  background: rgba(18, 19, 23, 0.92);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
body.cs-standalone .csb-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 55%);
}
body.cs-standalone .csb-content {
  max-width: none; margin: 0;
  padding: 22px 0 72px clamp(16px, 3.5vw, 44px);
}
.csb-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 392px;
  gap: 20px;
  align-items: start;
}
.csb-main-stack {
  min-width: 0;
}
.csb-shell > .csb-left-col,
.csb-shell > .csb-main-col {
  min-width: 0;
}
/* Im eigenen Tab gibt es nichts zu schliessen -> Kreuz weg, Rest bleibt */
body.cs-standalone .cs-close { display: none; }

/* ---------- 2. Fenster-Variante (Bogen im VTT eingeblendet) ---------- */
.charsheet-overlay { align-items: flex-start; padding: 24px 0; overflow-y: auto; background: rgba(0,0,0,0.72); }
.charsheet-box {
  width: min(1400px, 96vw); max-height: 92vh;
  background: var(--ink-900);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0; gap: 0; overflow: hidden;
}
.charsheet-box .csb-content { padding: 20px 24px 28px; overflow-y: auto; }
.charsheet-box .csb-topbar { padding: 16px 24px; margin: 0; }

/* ---------- 3. Kopfbereich ---------- */
.csb-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.csb-identity { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
.csb-identity-panel {
  position: sticky;
  top: 12px;
  padding: 24px 24px 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  min-height: 760px;
}
.csb-portrait {
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--ink-700); border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(208,70,74,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700; font-family: var(--font-display);
  color: var(--gold-strong); overflow: hidden; flex-shrink: 0; position: relative;
}
.csb-title-block { flex: 1; min-width: 0; }
.cs-name-input {
  font-family: var(--font-title); font-size: 30px; font-weight: 700; line-height: 1.15;
  background: transparent; border: none; border-bottom: 1px solid transparent;
  color: var(--gold-strong); padding: 2px 0; width: 100%;
  transition: border-color 0.15s;
}
.cs-name-input:hover:not(:disabled) { border-bottom-color: var(--border); }
.cs-name-input:focus { outline: none; border-bottom-color: var(--accent); }
.cs-name-input:disabled { color: var(--gold-strong); border-bottom: none; }

/* Untertitel-Zeile als kompakte Chips statt breiter Formularfelder */
.csb-subtitle-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: stretch; }
.csb-subtitle-row .cs-field-label {
  min-width: 0; gap: 0; flex-direction: row; align-items: baseline;
  background: var(--ink-800); border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill); padding: 3px 12px 3px 12px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1px;
  color: var(--parchment-muted); text-transform: uppercase;
}
.csb-subtitle-row .cs-field-label:focus-within { border-color: var(--accent); }
.csb-subtitle-row .cs-field-label input {
  border: none; background: transparent; padding: 0 0 0 8px;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0;
  color: var(--parchment); text-transform: none; min-width: 90px; width: auto;
}
.csb-subtitle-row .cs-field-label input:focus { outline: none; }
.csb-subtitle-row .cs-field-label span {
  padding: 0 0 0 8px; font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--parchment);
}
.csb-level-row {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 8px;
}
.csb-level-row .cs-field-label {
  flex-direction: row; align-items: baseline; gap: 8px;
  background: rgba(18, 20, 20, 0.9); border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill); padding: 4px 12px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1px;
  color: var(--parchment-muted); text-transform: uppercase;
}
.csb-level-row .cs-field-label input,
.csb-level-row .cs-field-label select {
  border: none; background: transparent; color: var(--parchment);
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0;
  text-transform: none; padding: 0; min-width: 70px;
}
.csb-level-row .cs-class-name-label input { min-width: 160px; }
.csb-level-row .cs-field-label input:focus,
.csb-level-row .cs-field-label select:focus { outline: none; }
.csb-edition-pill {
  display: inline-flex; align-items: center; border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill); padding: 4px 12px; color: var(--gold-muted);
  background: rgba(18, 20, 20, 0.72); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
}

.csb-header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; margin-left: auto; }
.cs-close {
  width: 34px; height: 34px; border-radius: 50%; line-height: 1; font-size: 18px;
  background: var(--ink-700); border: 1px solid var(--border); color: var(--parchment-dim);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.cs-close:hover { background: var(--ink-600); color: var(--gold-strong); }

/* Wuerfel-Modus jetzt als Segment-Schalter oben rechts */
.csb-roll-mode-row {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--ink-800); font-size: 12px; color: var(--parchment-muted);
}
.csb-roll-mode-title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1.2px;
  font-size: 11px; padding: 0 8px 0 10px; color: var(--parchment-muted);
}
.csb-roll-mode-row label {
  display: inline-flex; align-items: center; cursor: pointer;
  border-radius: var(--radius-pill); padding: 4px 12px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.4px;
  text-transform: uppercase; transition: background 0.15s, color 0.15s;
}
.csb-roll-mode-row label:hover { background: var(--ink-700); color: var(--parchment); }
.csb-roll-mode-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.csb-roll-mode-row label:has(input:checked) { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* ---------- 4. Werte-Leiste ---------- */
.csb-badges { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }

/* Rahmen um Attribute-Reihe + AC/INIT/PROF/MOVE/INSP */
.csb-topstats-frame {
  --csb-topstat-size: 92px;
  --csb-topstat-gap: 10px;
  /* Etappe 5 (Nutzer-Feedback 2026-09-10): 4px statt 12px zwischen der
     Attribut-Reihe und der AC/INIT/PROF/MOVE/INSP-Reihe darunter -- jedes
     Paar (z.B. STR+AC) soll als eine zusammengehoerige Spalte wirken, nicht
     als zwei separate Reihen mit deutlichem Abstand. */
  display: flex; flex-direction: column; gap: 4px;
  background: var(--ink-900); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm);
}
/* Etappe 5 (Nutzer-Feedback 2026-09-10): dieselbe 6-Spalten-Aufteilung wie
   .csb-ability-strip direkt darunter, damit AC/INIT/PROF/MOVE/INSP genau
   unter STR/DEX/CON/INT/WIS zu liegen kommen (5 Werte in den ersten 5 von 6
   Spalten, die 6. -- unter CHA -- bleibt leer). Vorher: eigenstaendiges Flex
   mit fester Breite pro Kachel, dadurch keine Spaltenausrichtung zur Reihe
   darueber. */
.csb-cstat-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--csb-topstat-gap);
  justify-items: center;
  padding-top: 8px;
}

/* Attribute: DDB-Stil - grosser Modifikator, Wert in einer Kapsel am Rand */
.csb-ability-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--csb-topstat-gap);
  justify-items: center;
}
.csb-ability-badge {
  position: relative; text-align: center; min-width: 0;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 8px 22px; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}
.csb-ability-icon {
  position: absolute;
  inset: 9px;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  object-fit: contain;
  opacity: 0.28;
  pointer-events: none;
}
.csb-ability-badge:hover { border-color: var(--border-strong); }
.csb-badge-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.6px; color: var(--parchment-muted); margin-bottom: 2px;
}
/* Etappe 5 (Nutzer-Feedback 2026-09-10): STR/DEX/... sitzen bei 2px Abstand
   fast auf der Zahl. Nur fuer die Attribut-Kacheln etwas mehr Luft -- bewusst
   auf .csb-ability-badge beschraenkt, .csb-badge-label wird auch fuer andere
   Ueberschriften (Abwehr, Trefferpunkte, ...) verwendet, die hier nicht
   veraendert werden sollen. */
.csb-ability-badge .csb-badge-label { margin-bottom: 7px; }
.csb-ability-mod {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono); font-size: 27px; font-weight: 600;
  color: var(--gold-strong); line-height: 1.1;
}
.csb-ability-score {
  z-index: 1;
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  width: 52px; height: 27px; margin: 0; padding: 0; text-align: center;
  background: var(--ink-700); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); color: var(--parchment);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.csb-ability-score:focus { outline: none; border-color: var(--accent); color: var(--gold-strong); }

/* Kampfwerte: Scheiben + Schild + Trefferpunkte */
.csb-combat-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.csb-cstat { display: flex; flex-direction: column; align-items: center; gap: 6px; width: var(--csb-topstat-size); margin: 0; }
.csb-disc {
  position: relative; width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--ink-700), var(--ink-900));
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: border-color 0.15s;
}
.csb-disc:hover, .csb-disc:focus-within { border-color: var(--accent); }
.csb-disc-value {
  width: 100%; text-align: center; background: transparent; border: none; padding: 0;
  color: var(--gold-strong); font-family: var(--font-mono); font-size: 25px; font-weight: 600;
}
.csb-disc-value:focus { outline: none; }
.csb-disc-unit {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--parchment-muted);
}
/* Ruestungsklasse als Schild */
.csb-disc-shield {
  border-radius: 0; border: none; width: 82px; height: 88px;
  background: none; box-shadow: none;
}
.csb-disc-shield::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0%, 100% 14%, 100% 58%, 50% 100%, 0% 58%, 0% 14%);
  background: var(--accent);
}
.csb-disc-shield::after {
  content: ""; position: absolute; inset: 2px;
  clip-path: polygon(50% 0%, 100% 14%, 100% 58%, 50% 100%, 0% 58%, 0% 14%);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
}
.csb-disc-shield .csb-disc-value { position: relative; z-index: 1; margin-bottom: 12px; }
.csb-disc-shield:hover::before { background: var(--accent-hover); }
/* Inspiration als anklickbare Scheibe */
.csb-disc-check { cursor: pointer; }
.csb-disc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.csb-disc-spark { font-size: 30px; color: var(--ink-600); transition: color 0.15s, text-shadow 0.15s; }
.csb-disc-check:has(input:checked) { border-color: var(--accent); }
.csb-disc-check:has(input:checked) .csb-disc-spark { color: var(--accent); text-shadow: 0 0 18px rgba(208,70,74,0.7); }
.csb-cstat-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.1px; color: var(--parchment-muted);
  text-align: center; line-height: 1.2;
}

/* Trefferpunkte-Panel mit Balken */
.csb-hp-badge {
  flex: 1; min-width: 300px;
  background: var(--ink-900); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-sm);
}
.csb-hp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.csb-hitdice-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--parchment-muted);
}
.csb-hitdice {
  width: 74px; background: var(--ink-800); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--parchment); padding: 3px 8px;
  font-family: var(--font-mono); font-size: 12px;
}
.csb-hp-bar {
  height: 9px; border-radius: var(--radius-pill); background: var(--ink-700);
  overflow: hidden; margin: 10px 0 12px; border: 1px solid var(--border-soft);
}
.csb-hp-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.25s ease; }
.csb-hp-bar-fill.ok { background: linear-gradient(90deg, #4f9d5f, #6cc47c); }
.csb-hp-bar-fill.warn { background: linear-gradient(90deg, #c08a2e, #e0aa48); }
.csb-hp-bar-fill.bad { background: linear-gradient(90deg, #a4302f, var(--accent)); }
.csb-hp-row { display: flex; align-items: flex-end; gap: 10px; }
.csb-hp-sep { font-family: var(--font-mono); font-size: 20px; color: var(--parchment-muted); padding-bottom: 6px; }
.csb-hp-field { text-align: center; }
.csb-hp-field.csb-hp-temp { margin-left: auto; }
.csb-hp-tag {
  display: block; font-family: var(--font-display); font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--parchment-muted);
}
.csb-hp-field input {
  width: 76px; text-align: center; margin-top: 3px; padding: 5px;
  background: var(--ink-800); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--gold-strong); font-family: var(--font-mono); font-size: 19px; font-weight: 600;
}
.csb-hp-field input:focus { outline: none; border-color: var(--accent); }
.cs-death-saves {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  font-size: 12px; color: var(--parchment-dim);
}
.ds-group {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--parchment-muted);
}
.ds-dot { cursor: pointer; color: var(--ink-600); font-size: 15px; margin: 0 1px; transition: color 0.12s, transform 0.12s; }
.ds-dot:hover { transform: scale(1.2); }
.ds-dot.filled.ok { color: var(--success); }
.ds-dot.filled.bad { color: var(--accent); }

/* Abwehr / Zustaende */
.csb-notes-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.csb-info-box {
  background: var(--ink-900); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px 12px; min-width: 0;
}
.csb-info-textarea {
  width: 100%; margin-top: 6px; padding: 8px 10px;
  background: var(--ink-800); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--parchment); font-family: var(--font-body); font-size: 13px; resize: vertical;
}
.csb-info-textarea:focus { outline: none; border-color: var(--accent); }

/* --- Etappe 26: strukturierte Abwehr-Eintraege (Dropdown + Chips) --- */
.cs-defense-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cs-defense-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: var(--radius-pill); background: var(--ink-800); border: 1px solid var(--border);
  font-size: 12px; color: var(--parchment);
}
.cs-defense-chip.cs-defense-kind-immunity { border-color: var(--accent-arcane); }
.cs-defense-chip.cs-defense-kind-vulnerability { border-color: var(--danger); }
.cs-defense-remove, .cs-condition-remove {
  background: none; border: none; color: var(--parchment-muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px;
}
.cs-defense-remove:hover, .cs-condition-remove:hover { color: var(--danger-text); }
.cs-defense-add-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.cs-defense-add-row select, .cs-defense-add-row input[type=text] {
  padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--ink-950); color: var(--parchment); font-family: var(--font-body); font-size: 12px;
}
.cs-defense-add-row .cs-defense-add-btn { margin: 0; padding: 5px 12px; font-size: 12px; }
.cs-defense-notes-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 10px; }

/* Etappe 27: kompakte Abwehr-Uebersicht direkt bei AC/HP (zusaetzlich zu den
   Chips weiter unten im Abwehr-Kasten - auf Wunsch als schneller Ueberblick
   ohne Scrollen). Nur sichtbar, wenn mindestens ein Eintrag existiert. */
.csb-defense-summary { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; margin-top: 2px; }
.csb-defense-summary-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
  border-radius: var(--radius-pill); background: var(--ink-800); border: 1px solid var(--border);
  font-size: 11px; color: var(--parchment-dim);
}
.csb-defense-summary-chip b { color: var(--accent); font-size: 10px; }
.csb-defense-summary-chip.cs-defense-kind-immunity { border-color: var(--accent-arcane); }
.csb-defense-summary-chip.cs-defense-kind-vulnerability { border-color: var(--danger); }

/* ---------- 5. Koerperlayout mit rechter Charakterkarte ---------- */
.csb-body { display: grid; grid-template-columns: 250px 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.csb-left-col, .csb-skills-col {
  background: var(--ink-900); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.csb-side-col {
  min-width: 0;
}
.cs-section-heading {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.6px; color: var(--parchment-dim);
  margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.cs-section-heading::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px; background: var(--accent);
}

.csb-mini-ability-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.csb-mini-ability-row:last-child { border-bottom: none; }
.csb-mini-ab-label {
  width: 34px; font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--parchment-muted);
}
.csb-mini-ab-mod { width: 32px; font-family: var(--font-mono); font-weight: 600; color: var(--gold-strong); }
.cs-save-row { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--parchment-dim); }
.cs-save-row input { accent-color: var(--accent); width: 14px; height: 14px; }

.csb-passive-box {
  background: var(--ink-800); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 7px 12px;
}
.csb-passive-box b { font-family: var(--font-mono); font-size: 18px; color: var(--gold-strong); }
.csb-passive-box span { font-size: 12px; color: var(--parchment-muted); }

/* Wuerfel-Knopf */
.cs-roll-btn {
  background: var(--ink-800); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 6px; color: var(--parchment-dim);
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.cs-roll-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cs-roll-btn:active { transform: scale(0.92); }

/* ---------- 6. Fertigkeiten ---------- */
.csb-skills-header {
  grid-template-columns: 20px 36px 1fr 44px 26px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 1.2px;
  color: var(--parchment-muted); padding: 4px 0 6px; border-bottom: 1px solid var(--border-soft); margin-bottom: 2px;
}
.cs-skill-row {
  grid-template-columns: 20px 36px 1fr 44px 26px; gap: 4px;
  font-size: 13px; padding: 5px 4px; border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); transition: background 0.12s;
}
.cs-skill-row:hover { background: var(--ink-800); }
.cs-skill-row:last-child { border-bottom: none; }
.cs-skill-prof { cursor: pointer; color: var(--accent); font-size: 13px; }
.cs-skill-ability-col { font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; color: var(--parchment-muted); }
.cs-skill-name { color: var(--parchment); }
.cs-skill-bonus { font-family: var(--font-mono); font-weight: 600; color: var(--gold-strong); text-align: right; }

/* ---------- 7. Register (Tabs) ---------- */
.cs-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.cs-tab-btn {
  position: relative; top: 0; padding: 10px 16px;
  background: transparent; border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--parchment-muted); cursor: pointer;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
}
.cs-tab-btn::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: transparent; border-radius: 2px; transition: background 0.15s;
}
.cs-tab-btn:hover:not(.active) { background: var(--ink-800); color: var(--parchment); }
.cs-tab-btn.active { background: transparent; color: var(--gold-strong); border-color: transparent; }
.cs-tab-btn.active::after { background: var(--accent); }
.cs-tab-content { min-height: 260px; padding-top: 16px; }

.cs-subfilter-btn {
  padding: 5px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--ink-800); color: var(--parchment-muted); cursor: pointer;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase;
}
.cs-subfilter-btn:hover:not(.active) { background: var(--ink-700); color: var(--parchment); }

/* ---------- 8. Tabellen & Bloecke im Bogen ---------- */
.cs-table th {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1.2px;
  color: var(--parchment-muted); border-bottom: 1px solid var(--border); padding: 7px 8px;
}
.cs-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); }
.cs-table tbody tr:hover { background: var(--ink-800); }
.cs-item-icon {
  width: 24px; height: 24px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border-soft);
  vertical-align: middle; margin-right: 6px;
}
.cs-search-result .cs-item-icon { width: 20px; height: 20px; }
.cs-table input, .cs-table select {
  background: var(--ink-800); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  color: var(--parchment); padding: 5px 8px; font-size: 13px;
}
.cs-table input:focus, .cs-table select:focus { outline: none; border-color: var(--accent); }

.cs-actions-columns h4, .cs-actions-tab > h4, .cs-level-heading {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 1.4px;
  color: var(--accent-text); border-bottom: 1px solid var(--border-soft); padding-bottom: 5px;
}
.cs-action-derived-row { background: var(--accent-soft); }

.cs-feature-item {
  background: var(--ink-900); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 10px; transition: border-color 0.15s;
}
.cs-feature-item:hover { border-color: var(--border-strong); }
.cs-feature-head b { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.4px; color: var(--gold-strong); }
.cs-feature-desc { font-size: 13.5px; color: var(--parchment-dim); line-height: 1.6; }

.cs-spellcasting-box, .cs-currency-row {
  background: var(--ink-900); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.cs-slot-box input, .cs-spellcasting-box select {
  background: var(--ink-800); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cs-search-results { background: var(--ink-900); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.cs-search-result:hover { background: var(--ink-800); }
.cs-search-row input[type=text], .cs-search-row select {
  background: var(--ink-900); border: 1px solid var(--border);
}
.cs-search-row input[type=text]:focus, .cs-search-row select:focus { outline: none; border-color: var(--accent); }
.cs-readonly-block { background: var(--ink-800); border: 1px solid var(--border-soft); }
.cs-field-label textarea, .cs-field-label input, .cs-owner-label input {
  background: var(--ink-800); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cs-field-label textarea:focus, .cs-field-label input:focus { outline: none; border-color: var(--accent); }

/* ---------- 9. Enge Bildschirme ---------- */
@media (max-width: 1280px) {
  .csb-shell { grid-template-columns: 1fr; gap: 18px; }
  .csb-body { grid-template-columns: 230px minmax(0, 1fr); padding-right: 0; }
  .csb-main-col { grid-column: 1 / -1; }
  .csb-side-col { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .csb-body { grid-template-columns: 1fr; padding-right: 0; }
  .csb-ability-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .csb-notes-strip { grid-template-columns: 1fr; }
  .cs-name-input { font-size: 24px; }
  .csb-identity { align-items: flex-start; flex-direction: column; }
  .csb-identity-panel { position: static; padding: 14px; min-height: 0; }
}

/* ---------- 10. Nachjustierung ---------- */
/* Der Bogen traegt bewusst nicht mehr die Klasse .modal-box (deren generische
   Formular-Regeln haben u.a. die Attributs-Kapseln auf volle Breite gezogen).
   Damit Eingabefelder trotzdem einheitlich aussehen, hier eigene Grundregeln. */
.charsheet-box input[type=text],
.charsheet-box input[type=number],
.charsheet-box select,
.charsheet-box textarea {
  background: var(--ink-800); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--parchment); font-family: var(--font-body); font-size: 13px; padding: 6px 8px;
}
.charsheet-box input:focus, .charsheet-box select:focus, .charsheet-box textarea:focus {
  outline: none; border-color: var(--accent);
}
.charsheet-box input:disabled, .charsheet-box select:disabled, .charsheet-box textarea:disabled {
  background: transparent; border-color: transparent; color: var(--parchment-dim);
}
/* Zahlenfelder ohne Pfeilchen - die Werte werden direkt eingetippt */
.charsheet-box input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.charsheet-box input[type=number]::-webkit-outer-spin-button,
.charsheet-box input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Wert-Kapsel unter dem Attribut wieder klein und mittig */
.charsheet-box .csb-ability-score {
  width: 54px; height: 28px; padding: 0; text-align: center;
  background: var(--ink-700); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--parchment);
}
.charsheet-box .csb-ability-score:disabled { background: var(--ink-700); border-color: var(--border); }
.charsheet-box .csb-disc-value {
  width: 100%; padding: 0; background: transparent; border: none;
  font-family: var(--font-mono); font-size: 25px; font-weight: 600; color: var(--gold-strong); text-align: center;
}
.charsheet-box .csb-disc-value:disabled { background: transparent; border: none; color: var(--gold-strong); }
.charsheet-box .csb-hp-field input {
  width: 78px; font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--gold-strong);
}
.charsheet-box .csb-info-textarea { width: 100%; }
.charsheet-box .cs-field-label textarea, .charsheet-box .cs-table input, .charsheet-box .cs-table select { width: 100%; }
.charsheet-box .cs-name-input {
  background: transparent; border: none; border-bottom: 1px solid transparent; padding: 2px 0;
  font-family: var(--font-title); font-size: 30px; font-weight: 700; color: var(--gold-strong);
}
.charsheet-box .csb-subtitle-row .cs-field-label input {
  background: transparent; border: none; padding: 0 0 0 8px; font-size: 13px;
}

/* Schild fuer die Ruestungsklasse: klassische Wappenform */
.csb-disc-shield { width: 84px; height: 92px; }
.csb-disc-shield::before,
.csb-disc-shield::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 50% 100%, 0% 58%);
}
.csb-disc-shield::before { background: var(--accent); }
.csb-disc-shield::after { inset: 3px; background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); }
.csb-disc-shield .csb-disc-value { margin-bottom: 20px; }

/* Inspirations-Scheibe etwas praesenter */
.csb-disc-check { border-color: var(--border); background: radial-gradient(circle at 50% 30%, var(--ink-800), var(--ink-900)); }
.csb-disc-spark { color: var(--ink-500); }

/* Attributsleiste nicht unnoetig in die Breite ziehen */
.csb-ability-strip { max-width: 1180px; }
.csb-ability-badge { padding: 10px 8px 24px; }

/* ---------- 11. Schild + Trefferpunkte-Panel final ---------- */
/* Das Schild wird als SVG gezeichnet (saubere Kontur, keine Clip-Path-Artefakte). */
.csb-disc-shield { width: 84px; height: 92px; background: none; border: none; box-shadow: none; }
.csb-disc-shield::before {
  content: ""; position: absolute; inset: 0; clip-path: none; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 92' preserveAspectRatio='none'%3E%3Cpath d='M3 3 H81 V50 C81 71.5 62 83.5 42 89.5 C22 83.5 3 71.5 3 50 Z' fill='%231e2026' stroke='%23d0464a' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
}
.csb-disc-shield::after { content: none; }
.csb-disc-shield .csb-disc-value { position: relative; z-index: 1; margin-bottom: 14px; }
.csb-disc-shield:hover::before { filter: brightness(1.15); }

/* Trefferpunkte: links Werte, rechts Trefferwuerfel + Rettungswuerfe */
.csb-hp-badge {
  display: grid; grid-template-columns: minmax(280px, 1.35fr) minmax(230px, 1fr);
  gap: 18px; align-items: start; padding: 14px 18px;
}
.csb-hp-main { min-width: 0; }
.csb-hp-side {
  min-width: 0; display: flex; flex-direction: column; gap: 12px;
  padding-left: 18px; border-left: 1px solid var(--border-soft);
}
.csb-hp-bar { margin: 8px 0 12px; }
.csb-hp-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.csb-hp-field.csb-hp-temp { margin-left: 14px; }
.csb-shield-note-label {
  display: flex; flex-direction: column; gap: 4px; margin-top: 10px;
  font-family: var(--font-display); font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--parchment-muted);
}
.csb-shield-note {
  font-family: var(--font-body); text-transform: none; letter-spacing: normal;
  padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--ink-800); color: var(--parchment); font-size: 13px;
}
.csb-hitdice-label { display: flex; align-items: center; gap: 10px; }
.cs-death-saves { margin-top: 0; padding-top: 0; border-top: none; display: block; }
.ds-groups { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 1100px) {
  .csb-hp-badge { grid-template-columns: 1fr; }
  .csb-hp-side { padding-left: 0; border-left: none; padding-top: 12px; border-top: 1px solid var(--border-soft); }
}

/* Aktionen-Tabellen duerfen nicht aus ihrer Spalte laufen */
.cs-actions-columns > .cs-actions-col { min-width: 0; overflow-x: visible; }
.cs-table { table-layout: fixed; }
.cs-table th, .cs-table td { overflow-wrap: anywhere; vertical-align: top; }
.cs-table .cs-action-field, .cs-table .cs-item-field { min-width: 0; }
.cs-action-roll-cell { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-use-tracker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-use-pips, .cs-slot-pips { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cs-use-pip, .cs-slot-pip {
  width: 15px; height: 15px; padding: 0; border: 1px solid var(--border);
  border-radius: 3px; background: transparent; cursor: pointer;
}
.cs-use-pip.used, .cs-slot-pip.used { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--ink-950); }
.cs-use-pip:disabled, .cs-slot-pip:disabled { cursor: default; opacity: 0.65; }
.cs-use-count { color: var(--parchment); font-family: var(--font-mono); font-size: 11px; }
.cs-use-tracker small { color: var(--parchment-muted); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.cs-damage-addons {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px;
}
.cs-damage-addon-btn {
  border: 1px solid var(--border-soft); border-radius: var(--radius-pill);
  background: rgba(217, 184, 111, 0.10); color: var(--gold-strong);
  padding: 4px 8px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.4px; white-space: nowrap; cursor: pointer;
}
.cs-damage-addon-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.cs-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 112px; }
.cs-row-actions .secondary-btn { padding: 4px 8px; white-space: nowrap; }
.cs-action-card-list { display: grid; gap: 10px; margin-bottom: 12px; }
.cs-empty-actions {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px;
  background: var(--ink-900);
}
.cs-action-card {
  background: var(--ink-900); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px;
}
.cs-action-card.cs-action-derived-row { background: rgba(88, 24, 34, 0.52); }
.cs-action-card-main { min-width: 0; display: flex; align-items: center; gap: 8px; }
.cs-action-title, .cs-action-name-field { font-weight: 700; }
.cs-action-name-field {
  width: 100%; background: var(--ink-800); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  color: var(--parchment); padding: 7px 9px;
}
.cs-action-card-grid {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(92px, 0.8fr) minmax(92px, 0.8fr) minmax(110px, 1fr) minmax(125px, 1fr) minmax(95px, 0.8fr) minmax(160px, 1.3fr);
  gap: 8px; align-items: stretch;
}
.cs-action-card-grid > div, .cs-action-card-grid > label {
  min-width: 0; display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 7px 8px;
}
.cs-action-card-grid span {
  font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.9px; color: var(--parchment-muted);
}
.cs-action-card-grid b { font-weight: 600; overflow-wrap: anywhere; }
.cs-action-card-grid input, .cs-action-card-grid select {
  width: 100%; min-width: 0; background: var(--ink-800); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  color: var(--parchment); padding: 5px 7px;
}
.cs-action-card > .cs-row-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; align-self: start; }
@media (max-width: 1250px) {
  .cs-action-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cs-action-card { grid-template-columns: 1fr; }
  .cs-action-card > .cs-row-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .cs-action-card-grid { grid-template-columns: 1fr; }
}
.cs-info-btn, .cs-detail-link {
  border: 1px solid var(--border-soft); background: var(--ink-800); color: var(--parchment);
  border-radius: var(--radius-sm); cursor: pointer;
}
.cs-info-btn {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; padding: 0;
}
.cs-detail-link {
  padding: 2px 5px; text-align: left; font: inherit; color: var(--gold-strong);
}
.cs-detail-link:hover, .cs-info-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.cs-item-name-edit { display: block; margin-top: 5px; }
.cs-info-dialog-backdrop {
  position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,0.58);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cs-info-dialog {
  width: min(680px, 94vw); max-height: 82vh; overflow-y: auto;
  background: var(--ink-900); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); color: var(--parchment); padding: 18px 20px;
}
.cs-info-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cs-info-dialog-head h3 { margin: 0; color: var(--gold-strong); font-family: var(--font-display); }
.cs-info-close { border: none; background: transparent; color: var(--parchment-muted); cursor: pointer; font-size: 24px; line-height: 1; }
.cs-info-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.cs-info-meta-row { background: var(--ink-800); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 7px 9px; }
.cs-info-meta-row span { display: block; color: var(--parchment-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; }
.cs-info-meta-row b { font-weight: 600; }
.cs-info-description { white-space: pre-wrap; line-height: 1.55; color: var(--parchment-dim); }
.cs-info-translation {
  margin-top: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  overflow: hidden;
}
.cs-info-translation-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--parchment);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.cs-info-translation-toggle:hover { background: rgb(255 255 255 / .04); }
.cs-info-translation-label { display: inline-flex; align-items: center; gap: 8px; }
.cs-info-translation-icon { color: var(--gold-strong); }
.cs-info-translation-body {
  padding: 0 12px 12px;
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--parchment-dim);
}
.cs-levelup-dialog { width: min(820px, 94vw); }
.cs-levelup-kicker {
  display: block; margin-bottom: 5px; color: var(--parchment-muted);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}
.cs-levelup-note { color: var(--parchment-dim); line-height: 1.5; margin: 14px 0 16px; }
.cs-levelup-list { display: grid; gap: 14px; }
.cs-levelup-section {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025); padding: 12px;
}
.cs-levelup-section h4 {
  margin: 0 0 10px; color: var(--gold-strong);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.9px; text-transform: uppercase;
}
.cs-levelup-entry {
  border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 10px;
}
.cs-levelup-entry:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.cs-levelup-entry-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.cs-levelup-entry strong { display: block; color: var(--parchment); font-size: 16px; margin-bottom: 4px; }
.cs-levelup-entry span {
  display: block; color: var(--gold-muted);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
}
.cs-levelup-entry p { color: var(--parchment-dim); line-height: 1.5; margin: 8px 0 0; }
.cs-levelup-add { white-space: nowrap; }
.cs-levelup-add:disabled { opacity: 0.62; cursor: default; }
.cs-levelup-choice {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.18); padding: 12px; margin-bottom: 12px;
}
.cs-levelup-choice-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.cs-levelup-choice-head strong { display: block; color: var(--parchment); font-size: 16px; }
.cs-levelup-choice-head span {
  display: block; color: var(--gold-muted); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
}
.cs-levelup-choice > p { color: var(--parchment-dim); line-height: 1.5; margin: 8px 0 12px; }
.cs-levelup-choice-options { display: grid; gap: 8px; }
.cs-levelup-choice-option {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px; background: rgba(255,255,255,0.025); cursor: pointer;
}
.cs-levelup-choice-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cs-levelup-choice-option input { margin-top: 4px; }
.cs-levelup-choice-option b { display: block; color: var(--parchment); }
.cs-levelup-choice-option small {
  display: block; color: var(--gold-muted); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; margin-top: 2px;
}
.cs-levelup-choice-option em {
  display: block; color: var(--parchment-dim); font-style: normal; line-height: 1.45; margin-top: 6px;
}
.cs-levelup-choice-grants {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px;
  color: var(--parchment-muted); font-size: 12px;
}
.cs-levelup-choice-grants b {
  border: 1px solid var(--border-soft); border-radius: var(--radius-pill);
  padding: 3px 8px; color: var(--parchment); background: rgba(255,255,255,0.03);
}
.cs-levelup-spells .cs-levelup-note { margin-top: 0; }
.cs-levelup-spell-group { margin-top: 12px; }
.cs-levelup-spell-group > strong {
  display: block; color: var(--gold-strong); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.9px; text-transform: uppercase; margin-bottom: 8px;
}
.cs-levelup-spell-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px;
}
.cs-levelup-spell {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025); padding: 9px 10px;
}
.cs-levelup-spell strong { display: block; color: var(--parchment); }
.cs-levelup-spell span {
  display: block; color: var(--parchment-muted); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; margin-top: 2px;
}
.cs-levelup-spell-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cs-levelup-add-spell { white-space: nowrap; }
.cs-levelup-add-spell:disabled { opacity: 0.62; cursor: default; }
.cs-levelup-spell-info {
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700;
}
.cs-rest-prep-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px;
}
.cs-rest-prep-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025); padding: 6px 8px;
}
.cs-rest-prep-check-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--parchment);
}
.cs-rest-spell-info {
  width: 22px; height: 22px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700;
}
.cs-asi-widget {
  margin-top: 10px; padding: 10px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); background: rgba(0,0,0,0.18);
}
.cs-asi-mode { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; color: var(--parchment-dim); font-size: 13px; }
.cs-asi-mode label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.cs-asi-selects { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cs-asi-select { flex: 1; min-width: 140px; }
.cs-asi-apply { white-space: nowrap; }
.cs-asi-apply:disabled { opacity: 0.62; cursor: default; }
.cs-levelup-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px;
}
.wiz-level-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 12px 0 4px; padding: 12px 14px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
}
.wiz-level-panel .wiz-opt-name { color: var(--gold-strong); font-family: var(--font-display); font-size: 16px; }
.wiz-level-panel .wiz-opt-meta { color: var(--parchment-muted); font-size: 12px; margin-top: 2px; }
.wiz-level-select-label {
  display: flex; align-items: center; gap: 8px; color: var(--parchment-muted);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.9px; text-transform: uppercase;
}
.wiz-start-level {
  min-width: 72px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--ink-800); color: var(--parchment); padding: 7px 9px;
}
@media (max-width: 700px) { .cs-info-meta { grid-template-columns: 1fr; } }

/* ---------- 12. Feinschliff (Charakterbogen-Anteil) ---------- */
/* Portraet buendig zur Namenszeile statt mittig zum ganzen Kopfblock */
.csb-identity { align-items: flex-start; }
.csb-portrait { margin-top: 2px; }

/* Aktionen: eine breite Spalte, sonst werden die Tabellen abgeschnitten.
   Erst auf sehr breiten Bildschirmen wieder zwei Spalten. */
.cs-actions-columns { grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1800px) { .cs-actions-columns { grid-template-columns: 1fr 1fr; } }
.cs-actions-columns.single { grid-template-columns: minmax(0, 1fr); }

/* ---------- 13. Letzte Korrekturen ---------- */
/* Einzeilige Textfelder in der linken Spalte haben Inhalt abgeschnitten */
.cs-misc-fields textarea { min-height: 56px; line-height: 1.45; }
.cs-misc-fields { gap: 10px; }
.cs-field-label.cs-block-label { gap: 5px; }
.cs-vtt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 8px;
}
.cs-vtt-field {
  min-width: 0;
}
.cs-vtt-note {
  margin-top: 8px;
  line-height: 1.45;
}
.cs-vtt-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.cs-vtt-actions .secondary-btn {
  width: 100%;
  margin-top: 0;
}

/* Etwas mehr Trennung zwischen Seitenhintergrund und Panels */
.csb-left-col, .csb-skills-col, .csb-hp-badge, .csb-info-box, .cs-feature-item {
  background: #15171c;
}
.csb-ability-badge { background: linear-gradient(180deg, #1b1e24, #131519); }


/* ===========================================================================
   Charakter-Assistent: Basislayout (ehem. "Restliche Oberflaeche"-Rest in
   style.css, direkt nach dem App-Chrome-Kopf). Gehoert inhaltlich zu den
   .wizard-* / .wiz-*-Klassen, die schon vorher hierher migriert wurden - blieb
   damals bewusst zurueck, weil noch weitere Vorkommen tief im "Unwritten
   Realm"-Block standen (siehe naechster Abschnitt unten) und eine Verschiebung
   ohne die dortigen Cross-Checks riskant gewesen waere.
   ========================================================================== */
/* Charakter-Assistent */
.wizard-box {
  background: var(--ink-900); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: min(820px, 95vw); padding: 26px 30px;
}
.wizard-header-row { border-bottom: 1px solid var(--border); }
.wizard-title { font-family: var(--font-title); font-size: 24px; }
.wizard-step-dot { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; border-radius: var(--radius-pill); }
.wizard-nav button { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.8px; text-transform: uppercase; border-radius: var(--radius-sm); }
.wiz-option-card {
  background: var(--ink-800); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  transition: background 0.12s, border-color 0.12s;
}
.wiz-option-card:hover { background: var(--ink-700); border-color: var(--border-strong); }
.wiz-option-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.wiz-option-card .wiz-opt-name { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.4px; }
.wiz-ability-card { background: var(--ink-800); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.wiz-choice-panel {
  background: var(--ink-800);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 10px 0;
}
.wiz-choice-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--parchment);
  margin-bottom: 10px;
}
.wiz-choice-head b {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--gold-strong);
}
.wiz-choice-head span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--parchment-muted);
}
.wiz-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.wiz-choice-chip {
  min-height: 34px;
  text-align: left;
  background: var(--ink-900);
  color: var(--parchment-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  font-family: var(--font-body);
}
.wiz-choice-chip:hover {
  border-color: var(--border-strong);
  color: var(--parchment);
}
.wiz-choice-chip.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--parchment);
}
.wiz-fighting-style-select,
.wiz-language-select {
  width: 100%;
  background: var(--ink-900);
  color: var(--parchment);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font-body);
}
.wiz-language-select + .wiz-language-select { margin-top: 8px; }
.wiz-choice-desc {
  margin: 10px 0 0;
  color: var(--parchment-dim);
  font-size: 12px;
  line-height: 1.45;
}

/* ==========================================================================
   The Unwritten Realm: Charakterbogen, Builder und Druckbasis
   Uebersetzt die Character-Blueprints in den schwarzen Realm/HUD-Stil.
   ========================================================================== */
body.cs-standalone {
  background:
    radial-gradient(circle at 72% 0%, rgb(217 184 111 / .13), transparent 28rem),
    radial-gradient(circle at 18% 42%, rgb(91 71 123 / .18), transparent 26rem),
    var(--realm-bg);
  color: var(--realm-text);
  font-family: var(--realm-font-body);
  font-weight: 300;
}

body.cs-standalone::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .18), #000 92%),
    url("/assets/unwritten-realm-hero.png");
  background-size: cover;
  background-position: center right;
  opacity: .34;
  pointer-events: none;
}

.charsheet-overlay {
  background:
    radial-gradient(circle at 68% 14%, rgb(217 184 111 / .16), transparent 28rem),
    rgb(0 0 0 / .82);
}

.charsheet-box {
  --theme-color: var(--realm-gold);
  --theme-background: rgb(7 9 11 / .88);
  --theme-background-solid: #07090b;
  --theme-line: rgb(217 184 111 / .38);
  --theme-fill: rgb(217 184 111 / .14);
  position: relative;
  background: var(--realm-panel);
  border: 1px solid var(--realm-line);
  border-radius: 8px;
  color: var(--realm-muted);
  font-family: var(--realm-font-body);
  box-shadow: none;
  overflow: hidden;
}

.charsheet-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .08), transparent 22rem),
    repeating-linear-gradient(135deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.realm-sheet-hud,
.realm-builder-hud {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--realm-faint);
  font: 300 .75rem/1.5 var(--realm-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.realm-sheet-hud { padding: .75rem 1rem 0; }
.realm-builder-hud { margin-bottom: 1rem; }

body.cs-standalone .charsheet-box {
  background: transparent;
  border: 0;
}
body.cs-standalone .charsheet-box::before { display: none; }
body.cs-standalone .realm-sheet-hud {
  position: fixed;
  inset: 6rem auto 2rem 4%;
  z-index: 2;
  flex-direction: column;
  padding: 0;
}

.csb-topbar {
  position: relative;
  border-bottom: 1px solid var(--realm-line);
  background: rgb(0 0 0 / .68);
  backdrop-filter: blur(2rem);
}
body.cs-standalone .csb-topbar {
  background: linear-gradient(rgb(0 0 0 / .82), rgb(0 0 0 / .52));
  border-bottom: 1px solid var(--realm-line);
  box-shadow: none;
}
body.cs-standalone .csb-topbar::after {
  height: 1px;
  background: linear-gradient(90deg, var(--realm-gold), transparent 58%);
  box-shadow: 0 0 14px rgb(217 184 111 / .44);
}

.csb-portrait {
  border-color: var(--realm-line);
  border-radius: 50%;
  background: rgb(255 255 255 / .05);
  color: var(--realm-gold);
  box-shadow: inset 0 0 24px rgb(217 184 111 / .10);
}

.csb-identity-panel {
  border-color: var(--realm-line);
  border-radius: var(--cs-window-radius, 8px);
  background:
    radial-gradient(circle at 90% 12%, rgb(217 184 111 / .12), transparent 14rem),
    linear-gradient(135deg, rgb(255 255 255 / .05), transparent 20rem),
    rgb(16 20 21 / var(--cs-window-alpha, .72));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
}

.cs-name-input,
.charsheet-box .cs-name-input {
  font-family: var(--realm-font-display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--realm-text);
}

.csb-subtitle-row .cs-field-label {
  background: var(--realm-surface);
  border-color: var(--realm-line-soft);
  border-radius: 999px;
  font-family: var(--realm-font-mono);
  color: var(--realm-faint);
}

.csb-roll-mode-row,
.csb-left-col,
.csb-skills-col,
.csb-main-col,
.csb-ability-badge,
.csb-badge-box,
.csb-info-box,
.csb-passive-box,
.cs-feature-item,
.cs-spellcasting-box,
.cs-currency-row {
  background: var(--realm-surface);
  border-color: var(--realm-line-soft);
  border-radius: 8px;
}

.csb-left-col,
.csb-skills-col,
.csb-main-col {
  position: relative;
  border: 1px solid var(--realm-line);
  padding: 13px 20px;
  backdrop-filter: blur(1.5rem);
}

.csb-left-col::before,
.csb-skills-col::before,
.csb-main-col::before,
.csb-ability-badge::before,
.csb-hp-badge::before,
.csb-topstats-frame::before,
.csb-identity-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  border: 1px solid rgb(217 184 111 / .32);
}

.csb-ability-badge,
.csb-hp-badge,
.csb-topstats-frame {
  position: relative;
  border: 1px solid var(--realm-line);
  background:
    radial-gradient(circle at 50% 0%, rgb(217 184 111 / .12), transparent 60%),
    var(--realm-surface);
  border-radius: var(--cs-window-radius, 8px);
}

.csb-hp-badge,
.csb-topstats-frame {
  background:
    radial-gradient(circle at 50% 0%, rgb(217 184 111 / .12), transparent 60%),
    rgb(16 20 21 / var(--cs-window-alpha, .72));
}

.csb-badge-label,
.cs-section-heading,
.cs-table th,
.csb-cstat-label,
.csb-hp-tag,
.csb-skills-header {
  font-family: var(--realm-font-mono);
  color: var(--realm-faint);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.csb-ability-mod,
.csb-disc-value,
.csb-passive-box b,
.cs-skill-bonus,
.cs-spell-derived b,
.cs-total-weight,
.csb-hp-field input,
.csb-ability-score {
  color: var(--realm-gold);
}

.cs-roll-btn,
.cs-tab-btn,
.cs-subfilter-btn {
  border-color: var(--realm-line);
  background: transparent;
  color: var(--realm-muted);
  border-radius: 4px;
}
.cs-roll-btn:hover,
.cs-tab-btn.active,
.cs-subfilter-btn.active {
  border-color: var(--realm-gold);
  background: rgb(217 184 111 / .14);
  color: var(--realm-text);
}
.cs-tabs { border-bottom: 1px solid var(--realm-line); }
.cs-subfilter-row {
  position: relative;
  z-index: 2;
}
.cs-subfilter-btn {
  pointer-events: auto;
}
.cs-actions-section-list {
  display: grid;
  gap: 16px;
}
.cs-actions-section {
  display: grid;
  gap: 8px;
}
.cs-actions-section h4 {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--realm-line);
  color: var(--realm-gold);
  font-family: var(--realm-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cs-tab-btn {
  font-family: var(--realm-font-mono);
  letter-spacing: .08em;
}
.cs-table td,
.cs-skill-row,
.csb-mini-ability-row {
  border-bottom-color: var(--realm-line-soft);
}

.cs-field-label input,
.cs-owner-label input,
.cs-field-label textarea,
.cs-table input,
.cs-table select,
.charsheet-box input[type=text],
.charsheet-box input[type=number],
.charsheet-box select,
.charsheet-box textarea {
  background: rgb(0 0 0 / .38);
  border-color: var(--realm-line-soft);
  color: var(--realm-text);
  border-radius: 4px;
  font-family: var(--realm-font-body);
}
.charsheet-box input:focus,
.charsheet-box select:focus,
.charsheet-box textarea:focus {
  border-color: var(--realm-gold);
  box-shadow: 0 0 0 2px rgb(217 184 111 / .20);
}

.wizard-box {
  position: relative;
  max-width: min(760px, 95vw);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .07), transparent 20rem),
    var(--realm-panel);
  color: var(--realm-muted);
  border: 1px solid var(--realm-line);
  border-radius: 8px;
  box-shadow: none;
  font-family: var(--realm-font-body);
  backdrop-filter: blur(2rem);
}
.wizard-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgb(217 184 111 / .22);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.wizard-header-row { border-bottom: 1px solid var(--realm-line); }
.wizard-title {
  font-family: var(--realm-font-display);
  font-style: italic;
  text-transform: uppercase;
  line-height: .9;
  color: var(--realm-text);
}
.wizard-step-dot {
  background: var(--realm-surface);
  border: 1px solid var(--realm-line-soft);
  color: var(--realm-faint);
  border-radius: 4px;
  font-family: var(--realm-font-mono);
}
.wizard-step-dot.active {
  background: rgb(217 184 111 / .16);
  border-color: var(--realm-gold);
  color: var(--realm-text);
  box-shadow: inset 0 -2px 0 var(--realm-gold);
}
.wizard-step-dot.done {
  color: var(--realm-gold);
  border-color: rgb(217 184 111 / .34);
}
.wiz-option-card,
.wiz-ability-card,
.wiz-choice-panel {
  background: var(--realm-surface);
  border: 1px solid var(--realm-line-soft);
  border-radius: 8px;
}
.wiz-option-card:hover,
.wiz-choice-chip:hover {
  border-color: var(--realm-line);
  background: var(--realm-surface-strong);
}
.wiz-option-card.selected,
.wiz-choice-chip.selected {
  border-color: var(--realm-gold);
  background: rgb(217 184 111 / .14);
}
.wiz-option-card .wiz-opt-name,
.wiz-choice-head b {
  color: var(--realm-text);
  font-family: var(--realm-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wizard-nav { border-top: 1px solid var(--realm-line); }
.wizard-nav .wiz-next {
  background: #fff;
  color: #000;
  border-color: #fff;
  box-shadow: 0 0 20px rgb(255 255 255 / .34);
}
.wizard-nav .wiz-back {
  background: var(--realm-surface);
  color: var(--realm-muted);
  border-color: var(--realm-line);
}

@media print {
  body,
  body.cs-standalone {
    background: #fff !important;
    color: #000 !important;
  }
  body.cs-standalone::before,
  .realm-sheet-hud,
  .realm-builder-hud,
  .csb-header-actions,
  .cs-close,
  .cs-tabs,
  .cs-subfilter-row,
  .modal-overlay:not(#character-sheet-modal) {
    display: none !important;
  }
  body.cs-standalone .charsheet-overlay,
  body.cs-standalone .charsheet-box {
    display: block !important;
    background: #fff !important;
    color: #000 !important;
  }
  .csb-topbar,
  .csb-left-col,
  .csb-skills-col,
  .csb-main-col,
  .csb-ability-badge,
  .csb-hp-badge,
  .csb-info-box,
  .csb-passive-box {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .csb-left-col::before,
  .csb-skills-col::before,
  .csb-main-col::before,
  .csb-ability-badge::before,
  .csb-hp-badge::before {
    border-color: #000 !important;
  }
  .cs-name-input,
  .csb-ability-mod,
  .csb-disc-value,
  .csb-passive-box b,
  .cs-skill-bonus,
  .csb-hp-field input {
    color: #000 !important;
  }
  .csb-content { padding: 0 !important; }
}

@media screen {
  /* ---------- 18. Realm-Polish: Charakterbogen + Builder freundlicher ---------- */
  :root {
    --realm-warm: #f1e2b7;
    --realm-warm-soft: rgb(241 226 183 / .15);
    --realm-green: #77c59a;
    --realm-rose: #b66774;
    --realm-card: rgb(16 20 21 / .68);
    --realm-card-strong: rgb(25 31 32 / .78);
  }

  .charsheet-overlay {
    background:
      radial-gradient(circle at 22% 18%, rgb(217 184 111 / .12), transparent 28rem),
      radial-gradient(circle at 82% 12%, rgb(119 197 154 / .10), transparent 26rem),
      rgb(0 0 0 / .78);
  }

  .charsheet-box,
  .wizard-box {
    border-color: rgb(217 184 111 / .26);
    background:
      linear-gradient(135deg, rgb(255 255 255 / .075), transparent 26rem),
      linear-gradient(180deg, rgb(14 17 18 / .88), rgb(5 7 8 / .92));
    box-shadow: 0 24px 70px rgb(0 0 0 / .42), inset 0 1px 0 rgb(255 255 255 / .08);
  }

  body.cs-standalone .charsheet-box {
    background: transparent;
    box-shadow: none;
  }

  .csb-topbar {
    background:
      linear-gradient(180deg, rgb(0 0 0 / .70), rgb(0 0 0 / .38)),
      linear-gradient(90deg, rgb(217 184 111 / .10), transparent 46%);
  }

  .cs-name-input,
  .charsheet-box .cs-name-input,
  .wizard-title {
    text-shadow: 0 12px 34px rgb(0 0 0 / .48);
  }

  .csb-left-col,
  .csb-skills-col,
  .csb-main-col,
  .csb-info-box,
  .csb-passive-box,
  .csb-roll-mode-row,
  .cs-spellcasting-box,
  .cs-currency-row,
  .cs-carry-box,
  .cs-feature-item,
  .wiz-option-card,
  .wiz-ability-card,
  .wiz-choice-panel {
    background:
      linear-gradient(135deg, rgb(255 255 255 / .055), transparent 18rem),
      var(--realm-card);
    border-color: rgb(255 255 255 / .12);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
  }

  .csb-left-col,
  .csb-skills-col,
  .csb-main-col {
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
  }

  .csb-ability-badge,
  .csb-badge-box {
    background:
      radial-gradient(circle at 50% 0%, rgb(241 226 183 / .18), transparent 64%),
      linear-gradient(180deg, rgb(255 255 255 / .055), rgb(255 255 255 / .025));
    border-color: rgb(241 226 183 / .24);
  }

  .csb-hp-badge,
  .csb-topstats-frame {
    background:
      radial-gradient(circle at 50% 0%, rgb(241 226 183 / .18), transparent 64%),
      linear-gradient(180deg, rgb(255 255 255 / .055), rgb(255 255 255 / .025)),
      rgb(16 20 21 / var(--cs-window-alpha, .72));
    border-color: rgb(241 226 183 / .24);
  }

  .csb-disc-shield,
  .csb-cstat-circle,
  .csb-portrait {
    filter: drop-shadow(0 10px 22px rgb(0 0 0 / .34));
  }

  .csb-ability-mod,
  .csb-disc-value,
  .csb-passive-box b,
  .cs-skill-bonus,
  .cs-spell-derived b,
  .csb-hp-field input,
  .csb-ability-score,
  .cs-carry-head span {
    color: var(--realm-warm);
  }

  .cs-section-heading::after,
  body.cs-standalone .csb-topbar::after {
    background: linear-gradient(90deg, var(--realm-warm), rgb(119 197 154 / .42), transparent 72%);
    box-shadow: 0 0 18px rgb(241 226 183 / .26);
  }

  .cs-tabs {
    gap: 8px;
    border-bottom-color: rgb(255 255 255 / .12);
  }

  .cs-tab-btn {
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    padding: 10px 15px;
    color: rgb(255 255 255 / .56);
    background: transparent;
  }

  .cs-tab-btn:hover:not(.active) {
    background: rgb(255 255 255 / .055);
    color: rgb(255 255 255 / .82);
  }

  .cs-tab-btn.active {
    color: #fff;
    background: rgb(241 226 183 / .12);
    border-color: rgb(241 226 183 / .22);
  }

  .cs-tab-btn.active::after {
    background: var(--realm-warm);
  }

  .cs-subfilter-row {
    gap: 8px;
    margin-bottom: 16px;
  }

  .cs-subfilter-btn,
  .cs-row-actions button,
  .wizard-nav button {
    border-radius: 6px;
  }

  .cs-subfilter-btn {
    background: rgb(255 255 255 / .035);
    border-color: rgb(255 255 255 / .12);
    color: rgb(255 255 255 / .62);
  }

  .cs-subfilter-btn:hover:not(.active) {
    background: rgb(255 255 255 / .07);
    border-color: rgb(241 226 183 / .22);
  }

  .cs-subfilter-btn.active {
    background: rgb(241 226 183 / .14);
    border-color: rgb(241 226 183 / .56);
    color: #fff;
  }

  .cs-action-card {
    border-color: rgb(255 255 255 / .10);
    background:
      radial-gradient(circle at 92% 8%, rgb(241 226 183 / .08), transparent 16rem),
      var(--realm-card);
  }

  .cs-action-card.cs-action-derived-row {
    background:
      radial-gradient(circle at 92% 8%, rgb(241 226 183 / .10), transparent 16rem),
      linear-gradient(135deg, rgb(119 197 154 / .075), rgb(255 255 255 / .035)),
      var(--realm-card);
    border-color: rgb(241 226 183 / .18);
  }

  .cs-action-card-grid > div,
  .cs-action-card-grid > label {
    background: rgb(0 0 0 / .20);
    border-color: rgb(255 255 255 / .08);
  }

  .cs-action-card-grid span,
  .cs-table th,
  .csb-badge-label,
  .csb-cstat-label,
  .csb-hp-tag,
  .csb-skills-header {
    color: rgb(255 255 255 / .44);
  }

  .cs-detail-link,
  .cs-action-title {
    background: rgb(6 10 12 / .72);
    border-color: rgb(255 255 255 / .08);
  }

  .cs-use-pip,
  .cs-slot-pip {
    border-color: rgb(241 226 183 / .28);
    background: rgb(255 255 255 / .035);
  }

  .cs-use-pip.used,
  .cs-slot-pip.used {
    background: var(--realm-green);
    border-color: var(--realm-green);
    box-shadow: inset 0 0 0 2px rgb(0 0 0 / .62);
  }

  .cs-damage-addon-btn {
    background: rgb(241 226 183 / .10);
    border-color: rgb(241 226 183 / .22);
    color: var(--realm-warm);
  }

  .cs-damage-addon-btn:hover {
    background: rgb(241 226 183 / .18);
    border-color: rgb(241 226 183 / .45);
  }

  .cs-field-label input,
  .cs-owner-label input,
  .cs-field-label textarea,
  .cs-table input,
  .cs-table select,
  .charsheet-box input[type=text],
  .charsheet-box input[type=number],
  .charsheet-box select,
  .charsheet-box textarea {
    background: rgb(0 0 0 / .30);
    border-color: rgb(255 255 255 / .11);
  }

  .charsheet-box input:focus,
  .charsheet-box select:focus,
  .charsheet-box textarea:focus,
  .wizard-box input:focus,
  .wizard-box select:focus,
  .wizard-box textarea:focus {
    border-color: rgb(241 226 183 / .72);
    box-shadow: 0 0 0 2px rgb(241 226 183 / .14);
  }

  .wizard-box {
    max-width: min(920px, 95vw);
  }

  .wizard-header-row {
    border-bottom-color: rgb(255 255 255 / .13);
  }

  .wizard-step-dot {
    background: rgb(255 255 255 / .045);
    border-color: rgb(255 255 255 / .12);
  }

  .wizard-step-dot.active,
  .wiz-option-card.selected,
  .wiz-choice-chip.selected {
    background: rgb(241 226 183 / .13);
    border-color: rgb(241 226 183 / .62);
  }

  .wizard-nav .wiz-next {
    background: var(--realm-warm);
    color: #08090a;
    border-color: var(--realm-warm);
    box-shadow: 0 12px 32px rgb(241 226 183 / .22);
  }

  .wizard-nav .wiz-back {
    background: rgb(255 255 255 / .05);
    border-color: rgb(255 255 255 / .14);
  }

  .csb-hp-bar-fill {
    background: linear-gradient(90deg, var(--realm-green), #a9ddb8);
  }

  .cs-carry-bar span {
    background: linear-gradient(90deg, var(--realm-green), var(--realm-warm));
  }

  /* ---------- 19. Combat-Badges als kleine Realm-Artefakte ---------- */
  .csb-combat-strip {
    align-items: end;
    gap: clamp(12px, 2vw, 24px);
  }

  .csb-cstat {
    min-width: 84px;
  }

  .csb-cstat-label {
    margin-top: 7px;
    color: rgb(255 255 255 / .52);
  }

  .csb-disc {
    position: relative;
    width: 76px;
    height: 76px;
    border: 1px solid rgb(241 226 183 / .26);
    background:
      radial-gradient(circle at 42% 24%, rgb(255 255 255 / .10), transparent 30%),
      linear-gradient(145deg, rgb(241 226 183 / .10), rgb(119 197 154 / .055) 54%, rgb(0 0 0 / .18)),
      rgb(10 14 15 / .44);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .12),
      inset 0 -18px 34px rgb(0 0 0 / .20),
      0 14px 28px rgb(0 0 0 / .22);
    overflow: visible;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }

  .csb-disc::before,
  .csb-disc::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .csb-disc::before {
    inset: 8px;
    border: 1px solid rgb(241 226 183 / .18);
    border-radius: inherit;
    background: linear-gradient(135deg, rgb(255 255 255 / .04), transparent 54%);
  }

  .csb-disc::after {
    opacity: .62;
  }

  .csb-disc-value {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 14px rgb(0 0 0 / .55);
  }

  .csb-stat-ac {
    width: 82px;
    height: 90px;
    border: 1px solid rgb(241 226 183 / .38);
    background:
      linear-gradient(180deg, rgb(74 124 156 / .24), rgb(8 12 13 / .48)),
      rgb(10 14 15 / .34);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .16),
      inset 0 -20px 28px rgb(0 0 0 / .24),
      0 16px 30px rgb(0 0 0 / .24);
    clip-path: polygon(9% 0, 91% 0, 91% 56%, 78% 80%, 50% 98%, 22% 80%, 9% 56%);
  }

  .csb-stat-ac::before {
    inset: 6px 8px 13px;
    border: 1px solid rgb(241 226 183 / .28);
    border-radius: 0;
    background:
      linear-gradient(180deg, rgb(255 255 255 / .08), transparent 38%),
      linear-gradient(135deg, rgb(119 197 154 / .10), rgb(0 0 0 / .12));
    clip-path: inherit;
    box-shadow: inset 0 0 22px rgb(241 226 183 / .07);
  }

  .csb-disc-shield.csb-stat-ac::before,
  .csb-disc-shield.csb-stat-ac:hover::before {
    background:
      linear-gradient(180deg, rgb(255 255 255 / .08), transparent 38%),
      linear-gradient(135deg, rgb(119 197 154 / .10), rgb(0 0 0 / .12));
    border-color: rgb(241 226 183 / .28);
  }

  .csb-disc-shield.csb-stat-ac:hover::before {
    filter: brightness(1.14);
    box-shadow:
      inset 0 0 28px rgb(241 226 183 / .12),
      0 0 24px rgb(241 226 183 / .20);
  }

  .csb-stat-ac::after {
    left: 50%;
    top: 10px;
    width: 34px;
    height: 20px;
    transform: translateX(-50%);
    border-top: 1px solid rgb(241 226 183 / .22);
    border-bottom: 1px solid rgb(241 226 183 / .12);
    background: linear-gradient(180deg, rgb(255 255 255 / .11), transparent);
  }

  .csb-stat-ac .csb-disc-value {
    margin-bottom: 14px;
  }

  .csb-stat-init {
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, rgb(241 226 183 / .09), transparent 34%),
      linear-gradient(145deg, rgb(241 226 183 / .09), rgb(0 0 0 / .24)),
      rgb(10 14 15 / .42);
  }

  .csb-stat-init::before {
    border-radius: 50%;
    background:
      radial-gradient(circle, transparent 48%, rgb(241 226 183 / .18) 49% 51%, transparent 52%),
      linear-gradient(90deg, transparent 48%, rgb(241 226 183 / .22) 49% 51%, transparent 52%),
      linear-gradient(0deg, transparent 48%, rgb(241 226 183 / .22) 49% 51%, transparent 52%);
  }

  .csb-stat-init::after {
    inset: 14px auto auto 50%;
    width: 10px;
    height: 30px;
    transform: translateX(-50%) rotate(34deg);
    transform-origin: 50% 100%;
    background: linear-gradient(180deg, var(--realm-warm), transparent);
    clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
  }

  .csb-stat-prof {
    border-radius: 50%;
  }

  .csb-stat-prof::before {
    inset: 9px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 7px rgb(241 226 183 / .055);
  }

  .csb-stat-prof::after {
    left: 50%;
    bottom: -8px;
    width: 34px;
    height: 28px;
    transform: translateX(-50%);
    background:
      linear-gradient(135deg, rgb(74 124 156 / .42) 0 48%, transparent 49%),
      linear-gradient(225deg, rgb(74 124 156 / .42) 0 48%, transparent 49%);
    clip-path: polygon(0 0, 45% 0, 50% 100%, 55% 0, 100% 0, 76% 82%, 50% 55%, 24% 82%);
    opacity: .46;
  }

  .csb-stat-speed {
    border-radius: 50%;
    background:
      radial-gradient(circle at 58% 56%, rgb(119 197 154 / .13), transparent 40%),
      linear-gradient(145deg, rgb(241 226 183 / .08), rgb(0 0 0 / .24)),
      rgb(10 14 15 / .42);
  }

  .csb-stat-speed::before {
    inset: 10px;
    border-radius: 50%;
    border-top-color: rgb(119 197 154 / .56);
    border-right-color: rgb(119 197 154 / .22);
  }

  .csb-stat-speed::after {
    right: 9px;
    bottom: 13px;
    width: 36px;
    height: 22px;
    border-bottom: 3px solid rgb(119 197 154 / .52);
    border-left: 8px solid rgb(119 197 154 / .22);
    border-radius: 5px 5px 15px 9px;
    transform: rotate(-10deg);
    box-shadow: -8px -7px 0 -5px rgb(119 197 154 / .34);
  }

  .csb-stat-speed .csb-disc-unit {
    position: relative;
    z-index: 2;
    color: rgb(255 255 255 / .62);
  }

  .csb-stat-inspiration {
    border-radius: 18px;
    transform: rotate(45deg);
    cursor: pointer;
  }

  .csb-stat-inspiration::before {
    border-radius: 14px;
    border-color: rgb(143 127 212 / .30);
  }

  .csb-stat-inspiration::after {
    inset: 50% auto auto 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle, rgb(241 226 183 / .24), transparent 36%),
      linear-gradient(135deg, rgb(143 127 212 / .34), transparent 50%),
      conic-gradient(from 45deg, transparent 0 10%, rgb(143 127 212 / .42) 10% 14%, transparent 14% 25%, rgb(241 226 183 / .42) 25% 29%, transparent 29%);
    clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
  }

  .csb-stat-inspiration .csb-disc-spark {
    position: relative;
    z-index: 2;
    transform: rotate(-45deg);
    color: rgb(255 255 255 / .30);
  }

  .csb-stat-inspiration:has(input:checked) {
    border-color: rgb(241 226 183 / .74);
    background:
      radial-gradient(circle at 50% 48%, rgb(241 226 183 / .22), transparent 46%),
      linear-gradient(180deg, rgb(143 127 212 / .20), rgb(255 255 255 / .035));
  }

  .csb-stat-inspiration:has(input:checked) .csb-disc-spark {
    color: var(--realm-warm);
    text-shadow: 0 0 22px rgb(241 226 183 / .62);
  }

  /* Style 4, transparenter: kleine Ausruestungs-Artefakte statt generischer Kreise. */
  .csb-combat-strip {
    gap: clamp(18px, 2.6vw, 34px);
  }

  .csb-cstat {
    min-width: 76px;
  }

  .csb-cstat-label {
    margin-top: 4px;
    color: rgb(232 202 128 / .82);
    font-family: var(--font-display);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1.1px;
    text-shadow: 0 1px 8px rgb(0 0 0 / .72);
  }

  .csb-disc {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-color: rgb(232 202 128 / .42);
    background:
      radial-gradient(circle at 42% 25%, rgb(255 255 255 / .16), transparent 28%),
      linear-gradient(145deg, rgb(232 202 128 / .16), rgb(9 12 16 / .24) 56%, rgb(0 0 0 / .12));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .22),
      inset 0 -18px 26px rgb(0 0 0 / .24),
      0 10px 24px rgb(0 0 0 / .28);
    backdrop-filter: blur(8px) saturate(128%);
    -webkit-backdrop-filter: blur(8px) saturate(128%);
  }

  .csb-disc-value {
    width: 38px;
    min-height: 25px;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: rgb(255 245 214 / .96);
    font-family: var(--font-title);
    font-size: 21px;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 7px rgb(0 0 0 / .9), 0 0 14px rgb(232 202 128 / .24);
  }

  .csb-stat-ac {
    width: 62px;
    height: 72px;
    border: 2px solid rgb(232 202 128 / .72);
    background:
      linear-gradient(180deg, rgb(37 92 135 / .58), rgb(12 20 30 / .58) 54%, rgb(5 8 13 / .48)),
      linear-gradient(90deg, transparent 0 38%, rgb(255 255 255 / .18) 39% 61%, transparent 62%);
    clip-path: polygon(7% 0, 93% 0, 93% 52%, 78% 78%, 50% 100%, 22% 78%, 7% 52%);
  }

  .csb-stat-ac::before {
    inset: 8px 9px 15px;
    border: 1px solid rgb(255 235 177 / .35);
    background:
      linear-gradient(180deg, rgb(255 255 255 / .14), transparent 32%),
      linear-gradient(90deg, transparent 0 47%, rgb(255 255 255 / .12) 48% 52%, transparent 53%);
    clip-path: inherit;
  }

  .csb-stat-ac::after {
    left: 50%;
    top: 8px;
    width: 28px;
    height: 10px;
    transform: translateX(-50%);
    border-top: 1px solid rgb(255 235 177 / .42);
    border-bottom: 1px solid rgb(0 0 0 / .34);
    background: linear-gradient(180deg, rgb(255 255 255 / .12), transparent);
  }

  .csb-stat-ac:hover {
    filter: brightness(1.08);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .24),
      inset 0 -18px 28px rgb(0 0 0 / .24),
      0 0 24px rgb(232 202 128 / .20);
  }

  .csb-stat-ac .csb-disc-value {
    margin-bottom: 10px;
  }

  .csb-stat-init {
    border-radius: 50%;
    border-color: rgb(232 202 128 / .64);
    background:
      radial-gradient(circle at 50% 50%, rgb(255 245 214 / .20) 0 10%, transparent 11%),
      radial-gradient(circle at 50% 50%, transparent 0 55%, rgb(232 202 128 / .22) 56% 59%, transparent 60%),
      linear-gradient(145deg, rgb(232 202 128 / .15), rgb(9 12 16 / .28));
  }

  .csb-stat-init::before {
    inset: 9px;
    border: 1px solid rgb(232 202 128 / .30);
    border-radius: 50%;
    background:
      linear-gradient(90deg, transparent 48%, rgb(232 202 128 / .28) 49% 51%, transparent 52%),
      linear-gradient(0deg, transparent 48%, rgb(232 202 128 / .28) 49% 51%, transparent 52%),
      conic-gradient(from 15deg, transparent 0 7%, rgb(232 202 128 / .24) 7% 8%, transparent 8% 25%, rgb(232 202 128 / .18) 25% 26%, transparent 26%);
  }

  .csb-stat-init::after {
    top: 12px;
    width: 9px;
    height: 31px;
    transform: translateX(-50%) rotate(32deg);
    background: linear-gradient(180deg, rgb(211 57 54 / .92), rgb(255 245 214 / .25));
  }

  .csb-stat-prof {
    border-radius: 50% 50% 44% 44%;
    background:
      radial-gradient(circle at 50% 46%, rgb(232 202 128 / .22), transparent 32%),
      linear-gradient(145deg, rgb(98 69 36 / .42), rgb(12 11 10 / .34));
  }

  .csb-stat-prof::before {
    inset: 11px;
    border-radius: 50%;
    border: 1px solid rgb(232 202 128 / .34);
    box-shadow: inset 0 0 0 7px rgb(232 202 128 / .06), 0 -10px 0 -7px rgb(44 81 122 / .42);
  }

  .csb-stat-prof::after {
    bottom: -10px;
    height: 32px;
    background:
      linear-gradient(135deg, rgb(45 78 120 / .66) 0 48%, transparent 49%),
      linear-gradient(225deg, rgb(37 69 112 / .66) 0 48%, transparent 49%);
    opacity: .75;
  }

  .csb-stat-speed {
    border-radius: 18px 22px 26px 18px;
    background:
      radial-gradient(circle at 62% 55%, rgb(119 197 154 / .18), transparent 38%),
      linear-gradient(145deg, rgb(94 65 38 / .38), rgb(8 10 12 / .34));
  }

  .csb-stat-speed::before {
    inset: auto 11px 14px 10px;
    height: 28px;
    border: 0;
    border-bottom: 4px solid rgb(128 88 48 / .72);
    border-left: 10px solid rgb(128 88 48 / .42);
    border-radius: 7px 9px 18px 10px;
    background:
      linear-gradient(180deg, rgb(232 202 128 / .12), transparent),
      linear-gradient(90deg, rgb(128 88 48 / .30), rgb(45 31 20 / .24));
    box-shadow: 10px -14px 0 -10px rgb(232 202 128 / .34);
    transform: rotate(-8deg);
  }

  .csb-stat-speed::after {
    right: 10px;
    bottom: 14px;
    width: 27px;
    height: 2px;
    border: 0;
    background: rgb(119 197 154 / .66);
    box-shadow: -8px -5px 0 rgb(119 197 154 / .24), 2px 5px 0 rgb(119 197 154 / .20);
  }

  .csb-stat-speed .csb-disc-unit {
    position: absolute;
    right: -18px;
    top: 32px;
    color: rgb(255 245 214 / .82);
    font-size: 11px;
    text-shadow: 0 2px 8px rgb(0 0 0 / .8);
  }

  .csb-stat-inspiration {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    border-color: rgb(190 166 255 / .48);
    background:
      radial-gradient(circle at 50% 50%, rgb(255 245 214 / .18), transparent 34%),
      linear-gradient(145deg, rgb(104 83 180 / .24), rgb(8 10 16 / .34));
  }

  .csb-stat-inspiration::before {
    inset: 7px;
    border-radius: 10px;
    border-color: rgb(190 166 255 / .36);
  }

  .csb-stat-inspiration::after {
    width: 46px;
    height: 46px;
    background:
      radial-gradient(circle, rgb(255 245 214 / .48), transparent 27%),
      conic-gradient(from 45deg, transparent 0 9%, rgb(190 166 255 / .58) 9% 14%, transparent 14% 24%, rgb(255 245 214 / .62) 24% 29%, transparent 29%);
    opacity: .78;
  }

  .csb-stat-inspiration:has(input:checked) {
    border-color: rgb(255 245 214 / .86);
    box-shadow: 0 0 26px rgb(190 166 255 / .26), inset 0 0 22px rgb(255 245 214 / .14);
  }

  /* Korrektur: ruhiger, transparenter Artefakt-Look ohne ueberladene Details. */
  .csb-combat-strip {
    gap: clamp(16px, 2.3vw, 30px);
  }

  .csb-cstat {
    min-width: 72px;
    display: grid;
    justify-items: center;
  }

  .csb-cstat-label {
    margin-top: 7px;
    color: rgb(238 208 128 / .78);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-shadow: 0 2px 10px rgb(0 0 0 / .72);
  }

  .csb-disc,
  .csb-stat-ac,
  .csb-stat-init,
  .csb-stat-prof,
  .csb-stat-speed,
  .csb-stat-inspiration {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgb(238 208 128 / .42);
    clip-path: none;
    transform: none;
    background:
      radial-gradient(circle at 35% 22%, rgb(255 255 255 / .16), transparent 30%),
      linear-gradient(145deg, rgb(238 208 128 / .13), rgb(23 29 35 / .38) 56%, rgb(4 6 9 / .28));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .18),
      inset 0 -16px 24px rgb(0 0 0 / .22),
      0 10px 24px rgb(0 0 0 / .26);
    backdrop-filter: blur(9px) saturate(125%);
    -webkit-backdrop-filter: blur(9px) saturate(125%);
  }

  .csb-disc::before,
  .csb-disc::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .csb-disc::before {
    inset: 7px;
    border: 1px solid rgb(238 208 128 / .24);
    border-radius: inherit;
    background: linear-gradient(135deg, rgb(255 255 255 / .07), transparent 62%);
  }

  .csb-disc::after {
    z-index: 1;
    opacity: .62;
  }

  .csb-disc-value {
    position: relative;
    z-index: 3;
    width: 38px;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(255 247 222 / .96);
    font-family: var(--font-title);
    font-size: 21px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    text-shadow: 0 2px 8px rgb(0 0 0 / .9), 0 0 12px rgb(238 208 128 / .20);
  }

  .csb-stat-ac {
    height: 72px;
    border-radius: 8px 8px 22px 22px;
    background:
      linear-gradient(180deg, rgb(52 96 116 / .46), rgb(10 16 18 / .44)),
      linear-gradient(90deg, transparent 0 44%, rgb(255 255 255 / .12) 45% 55%, transparent 56%);
  }

  .csb-stat-ac::before {
    inset: 8px 9px 13px;
    border-radius: 5px 5px 17px 17px;
    border-color: rgb(238 208 128 / .30);
    background:
      linear-gradient(180deg, rgb(255 255 255 / .10), transparent 38%),
      linear-gradient(90deg, transparent 0 47%, rgb(238 208 128 / .14) 48% 52%, transparent 53%);
    clip-path: none;
  }

  .csb-stat-ac::after {
    inset: auto 17px 11px;
    width: auto;
    height: 1px;
    transform: none;
    border: 0;
    background: rgb(238 208 128 / .30);
    box-shadow: 0 -32px 0 rgb(238 208 128 / .24);
  }

  .csb-stat-ac .csb-disc-value {
    margin: 0 0 4px;
  }

  .csb-stat-init,
  .csb-stat-prof,
  .csb-stat-speed {
    border-radius: 50%;
  }

  .csb-stat-init::before {
    border-radius: 50%;
    background:
      radial-gradient(circle, transparent 0 44%, rgb(238 208 128 / .28) 45% 47%, transparent 48%),
      linear-gradient(90deg, transparent 48%, rgb(238 208 128 / .20) 49% 51%, transparent 52%),
      linear-gradient(0deg, transparent 48%, rgb(238 208 128 / .20) 49% 51%, transparent 52%);
  }

  .csb-stat-init::after {
    inset: 12px auto auto 50%;
    width: 2px;
    height: 22px;
    transform: translateX(-50%) rotate(38deg);
    background: rgb(214 78 74 / .72);
    box-shadow: 0 0 10px rgb(214 78 74 / .28);
    clip-path: none;
  }

  .csb-stat-prof {
    background:
      radial-gradient(circle at 50% 50%, rgb(238 208 128 / .17), transparent 34%),
      linear-gradient(145deg, rgb(238 208 128 / .13), rgb(23 29 35 / .38) 56%, rgb(4 6 9 / .28));
  }

  .csb-stat-prof::before {
    inset: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 7px rgb(238 208 128 / .055);
  }

  .csb-stat-prof::after {
    left: 50%;
    bottom: 8px;
    width: 22px;
    height: 20px;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgb(77 103 139 / .48), rgb(44 61 92 / .34));
    clip-path: polygon(0 0, 40% 0, 50% 100%, 60% 0, 100% 0, 74% 84%, 50% 58%, 26% 84%);
    opacity: .58;
  }

  .csb-stat-speed {
    background:
      radial-gradient(circle at 58% 58%, rgb(119 197 154 / .15), transparent 38%),
      linear-gradient(145deg, rgb(238 208 128 / .12), rgb(23 29 35 / .38) 56%, rgb(4 6 9 / .28));
  }

  .csb-stat-speed::before {
    inset: 12px;
    border-radius: 50%;
    border-top-color: rgb(119 197 154 / .48);
    border-right-color: rgb(119 197 154 / .20);
    background: transparent;
    transform: none;
    box-shadow: none;
  }

  .csb-stat-speed::after {
    right: 13px;
    bottom: 17px;
    width: 27px;
    height: 15px;
    border: 0;
    border-bottom: 3px solid rgb(119 197 154 / .52);
    border-left: 7px solid rgb(119 197 154 / .22);
    border-radius: 4px 5px 13px 8px;
    background: transparent;
    box-shadow: -7px -5px 0 -5px rgb(119 197 154 / .35);
    transform: rotate(-8deg);
  }

  .csb-stat-speed .csb-disc-unit {
    position: absolute;
    right: -17px;
    top: 30px;
    z-index: 3;
    color: rgb(255 247 222 / .70);
    font-size: 11px;
    text-shadow: 0 2px 8px rgb(0 0 0 / .82);
  }

  .csb-stat-inspiration {
    border-radius: 16px;
    transform: rotate(45deg);
    border-color: rgb(182 159 255 / .45);
    background:
      radial-gradient(circle at 50% 50%, rgb(255 247 222 / .13), transparent 36%),
      linear-gradient(145deg, rgb(112 91 196 / .24), rgb(14 17 28 / .34));
  }

  .csb-stat-inspiration::before {
    inset: 8px;
    border-radius: 12px;
    border-color: rgb(182 159 255 / .28);
  }

  .csb-stat-inspiration::after {
    inset: 50% auto auto 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle, rgb(255 247 222 / .36), transparent 31%),
      conic-gradient(from 45deg, transparent 0 10%, rgb(182 159 255 / .46) 10% 14%, transparent 14% 25%, rgb(255 247 222 / .46) 25% 29%, transparent 29%);
    clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
    opacity: .7;
  }

  .csb-stat-inspiration .csb-disc-spark {
    position: relative;
    z-index: 3;
    transform: rotate(-45deg);
    color: transparent;
  }

  .csb-stat-inspiration:has(input:checked) {
    border-color: rgb(255 247 222 / .80);
    box-shadow: 0 0 24px rgb(182 159 255 / .24), inset 0 0 18px rgb(255 247 222 / .12);
  }

  /* ---------- 20. Spieler-Aussehen: linke aufklappbare Leiste ---------- */
  body.cs-standalone::before {
    background:
      linear-gradient(180deg, rgb(0 0 0 / .18), #000 92%),
      var(--cs-custom-bg, url("/assets/unwritten-realm-hero.png"));
    background-size: cover;
    background-position: center right;
    opacity: var(--cs-bg-opacity, .34);
    filter: brightness(var(--cs-bg-brightness, 1));
  }

  .charsheet-overlay::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(0 0 0 / .16), rgb(0 0 0 / .84)),
      var(--cs-custom-bg, url("/assets/unwritten-realm-hero.png"));
    background-size: cover;
    background-position: center right;
    opacity: calc(var(--cs-bg-opacity, .34) * .65);
    filter: brightness(var(--cs-bg-brightness, 1));
  }

  .cs-appearance-panel {
    position: fixed;
    left: 0;
    top: 152px;
    z-index: 220;
    display: flex;
    align-items: stretch;
    pointer-events: none;
  }

  .cs-appearance-toggle {
    pointer-events: auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    min-height: 118px;
    padding: 14px 8px;
    border: 1px solid rgb(241 226 183 / .24);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background:
      linear-gradient(180deg, rgb(241 226 183 / .12), rgb(255 255 255 / .045)),
      rgb(8 10 11 / .86);
    color: var(--realm-warm);
    font-family: var(--realm-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 34px rgb(0 0 0 / .32);
  }

  .cs-appearance-toggle:hover {
    background:
      linear-gradient(180deg, rgb(241 226 183 / .18), rgb(255 255 255 / .06)),
      rgb(12 15 16 / .92);
  }

  .cs-appearance-drawer {
    pointer-events: auto;
    width: 0;
    max-height: calc(100vh - 180px);
    overflow: hidden auto;
    padding: 0;
    border: 0 solid rgb(241 226 183 / .24);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background:
      radial-gradient(circle at 20% 0%, rgb(241 226 183 / .12), transparent 14rem),
      rgb(8 10 11 / .92);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow: 0 20px 60px rgb(0 0 0 / .44);
    transition: width .18s ease, padding .18s ease, border-width .18s ease;
  }

  .cs-appearance-panel.open .cs-appearance-drawer {
    width: min(286px, calc(100vw - 52px));
    padding: 16px;
    border-width: 1px;
  }

  .cs-appearance-head {
    display: grid;
    gap: 2px;
    margin-bottom: 14px;
  }

  .cs-appearance-head b {
    color: #fff;
    font-family: var(--realm-font-display);
    font-style: italic;
    text-transform: uppercase;
  }

  .cs-appearance-head span {
    color: rgb(255 255 255 / .46);
    font-family: var(--realm-font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .cs-appearance-panel label {
    display: grid;
    gap: 7px;
    margin: 12px 0;
    color: rgb(255 255 255 / .64);
    font-family: var(--realm-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .cs-appearance-panel input[type="range"] {
    accent-color: var(--realm-warm);
    width: 100%;
  }

  .cs-appearance-color {
    width: 52px;
    height: 32px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: 6px;
    background: transparent;
  }

  .cs-appearance-bg {
    width: 100%;
    color: rgb(255 255 255 / .54);
    font-family: var(--realm-font-body);
    font-size: 12px;
  }

  .cs-appearance-presets {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / .10);
  }

  .cs-appearance-preset-select {
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: 6px;
    background: rgb(0 0 0 / .34);
    color: #fff;
    font-family: var(--realm-font-body);
  }

  .cs-appearance-actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
  }

  .cs-appearance-actions.two {
    grid-template-columns: 1fr 1fr;
  }

  .cs-appearance-actions.two .cs-appearance-delete-preset {
    grid-column: 1 / -1;
  }

  .cs-appearance-actions .secondary-btn {
    width: 100%;
    justify-content: center;
  }

  .charsheet-box,
  .wizard-box,
  .csb-left-col,
  .csb-skills-col,
  .csb-main-col,
  .csb-info-box,
  .csb-passive-box,
  .csb-roll-mode-row,
  .cs-spellcasting-box,
  .cs-currency-row,
  .cs-carry-box,
  .cs-feature-item,
  .wiz-option-card,
  .wiz-ability-card,
  .wiz-choice-panel,
  .cs-action-card,
  .cs-action-card-grid > div,
  .cs-action-card-grid > label,
  .cs-search-result,
  .cs-slot-box,
  .cs-info-meta-row {
    border-radius: var(--cs-window-radius, 8px);
  }

  .csb-left-col,
  .csb-skills-col,
  .csb-main-col,
  .csb-info-box,
  .csb-passive-box,
  .cs-spellcasting-box,
  .cs-currency-row,
  .cs-carry-box,
  .cs-feature-item,
  .wiz-option-card,
  .wiz-ability-card,
  .wiz-choice-panel {
    background:
      linear-gradient(135deg, rgb(255 255 255 / .055), transparent 18rem),
      rgb(16 20 21 / var(--cs-window-alpha, .72));
  }

  .cs-action-card {
    padding: var(--cs-window-padding-y, 10px) var(--cs-window-padding-x, 12px);
    gap: var(--cs-window-gap, 10px) calc(var(--cs-window-gap, 10px) + 4px);
    background:
      radial-gradient(circle at 92% 8%, rgb(241 226 183 / .08), transparent 16rem),
      rgb(16 20 21 / var(--cs-window-alpha, .72));
  }

  .cs-action-card.cs-action-derived-row {
    background:
      radial-gradient(circle at 92% 8%, rgb(241 226 183 / .10), transparent 16rem),
      linear-gradient(135deg, rgb(119 197 154 / .075), rgb(255 255 255 / .035)),
      rgb(16 20 21 / var(--cs-window-alpha, .72));
  }

  .cs-action-card-list,
  .cs-actions-section-list {
    gap: var(--cs-window-gap, 10px);
  }

  .cs-action-card-grid {
    gap: calc(var(--cs-window-gap, 10px) * .8);
  }

  .cs-action-card-grid > div,
  .cs-action-card-grid > label {
    padding: calc(var(--cs-window-padding-y, 10px) * .7) calc(var(--cs-window-padding-x, 12px) * .7);
    background: rgb(0 0 0 / calc(var(--cs-window-alpha, .72) * .30));
  }

  .cs-tab-content {
    padding-top: calc(16px * var(--cs-window-density, 1));
  }

  .csb-body {
    gap: calc(16px * var(--cs-window-density, 1));
  }

  .csb-left-col,
  .csb-skills-col,
  .csb-main-col {
    padding: calc(13px * var(--cs-window-density, 1)) calc(20px * var(--cs-window-density, 1));
  }

  /* ---------- 20. Portrait als Blickfang + Hover-Glow an Kreisen ----------
     Ergaenzung zum bestehenden Realm-Umbau: das Portrait bekommt den
     staerksten, animierten Glow (einziger klarer Fokuspunkt), alle anderen
     Elemente nur ein dezentes Leuchten zur Zahl hin bei Hover -- Feedback
     aus der Design-Vorlage (Nutzerwunsch: "Licht hinter dem Bild etwas
     staerker", "Glow zur Zahl hin, nicht so dolle nach aussen"). */
  @keyframes csb-portrait-flicker {
    0%, 100% { opacity: 1; }
    45% { opacity: .86; }
    52% { opacity: 1; }
    78% { opacity: .93; }
  }
  .csb-portrait {
    box-shadow:
      0 0 10px 1px var(--realm-gold),
      0 0 30px 6px rgb(217 184 111 / .55),
      0 0 70px 16px rgb(217 184 111 / .32),
      0 0 130px 30px rgb(217 184 111 / .16);
    animation: csb-portrait-flicker 2.4s ease-in-out infinite;
  }

  .csb-ability-badge,
  .csb-disc {
    transition: box-shadow .2s ease, border-color .2s ease;
  }
  .csb-ability-badge:hover,
  .csb-disc:hover {
    border-color: rgb(217 184 111 / .7);
    box-shadow: 0 0 10px 1px rgb(217 184 111 / .28);
  }
  .csb-ability-mod,
  .csb-disc-value {
    transition: text-shadow .2s ease;
  }
  .csb-ability-badge:hover .csb-ability-mod,
  .csb-disc:hover .csb-disc-value {
    text-shadow: 0 0 8px rgb(217 184 111 / .85), 0 0 16px rgb(217 184 111 / .4);
  }
}

/* =====================================================================
   Charakterbogen: echter index.html-Look statt Fantasy-Gold-Rahmen
   =====================================================================
   Uebernimmt die Optik aus Charakterbogen-Redesign/1-realm-style-hell-neu:
   dieselben Tokens wie die Startseite (Archivo Black/Geist, Gold #d9b86f,
   duenne Glas-Panels ohne Eckenbeschnitt) statt der bisherigen, sehr
   ornamentalen Fantasy-Artefakt-Scheiben (Schild-Hexagon, Kompass-Zacken,
   Fluegel-Form) und der goldenen Eckenbeschnitt-Rahmen. Bewusst als
   letzter, spezifischerer Block: die aelteren "Realm"-Iterationen weiter
   oben bleiben unangetastet, hier werden nur die noch abweichenden Stellen
   uebersteuert (teils mit !important, weil mehrere aeltere Layer dieselben
   Selektoren mit Farbverlaeufen/Clip-Paths belegen). */

/* -- Panels: kein Eckenbeschnitt mehr, nur duenner Glas-Rand -- */
.charsheet-box .csb-left-col::before,
.charsheet-box .csb-skills-col::before,
.charsheet-box .csb-main-col::before,
.charsheet-box .csb-ability-badge::before,
.charsheet-box .csb-hp-badge::before,
.charsheet-box .csb-topstats-frame::before,
.charsheet-box .csb-identity-panel::before {
  content: none !important;
}
.charsheet-box .csb-left-col,
.charsheet-box .csb-skills-col,
.charsheet-box .csb-main-col,
.charsheet-box .csb-hp-badge,
.charsheet-box .csb-topstats-frame,
.charsheet-box .csb-info-box,
.charsheet-box .csb-passive-box,
.charsheet-box .cs-feature-item,
.charsheet-box .cs-spellcasting-box,
.charsheet-box .cs-currency-row,
.charsheet-box .cs-carry-box,
.charsheet-box .csb-roll-mode-row {
  border: 1px solid rgb(255 255 255 / .16) !important;
  box-shadow: none !important;
}

/* -- Section-Ueberschriften: Punkt + Label + Trennlinie, wie im Entwurf -- */
.charsheet-box .cs-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 0;
  margin: 0 0 12px;
  padding-bottom: 0;
  font-family: var(--realm-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .13em;
  color: rgb(255 255 255 / .7);
}
.charsheet-box .cs-section-heading::before {
  content: "";
  order: -1;
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--realm-gold);
}
.charsheet-box .cs-section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / .16);
  box-shadow: none;
}

/* -- Eingabe-Labels: kleine Mono-Kapitaelchen wie im Entwurf -- */
.charsheet-box .cs-field-label,
.charsheet-box .cs-owner-label,
.charsheet-box .csb-hitdice-label,
.charsheet-box .csb-shield-note-label {
  font-family: var(--realm-font-mono);
  letter-spacing: .08em;
}

/* -- Attribut-Kreise statt abgerundeter Kacheln -- */
.charsheet-box .csb-ability-badge {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / .05) !important;
  box-shadow: inset 0 0 22px rgb(0 0 0 / .35) !important;
}
.charsheet-box .csb-ability-icon {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .34;
  filter: saturate(.88) brightness(.9);
  z-index: 0;
}
.charsheet-box .csb-ability-badge:hover {
  box-shadow: inset 0 0 22px rgb(0 0 0 / .35), 0 0 10px 1px rgb(217 184 111 / .28) !important;
}
.charsheet-box .csb-badge-label {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--realm-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--realm-gold);
}
.charsheet-box .csb-info-box > .csb-badge-label,
.charsheet-box .csb-hp-badge .csb-badge-label {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  line-height: 1.35;
  text-align: left;
}
.charsheet-box .csb-info-box > .csb-badge-label .muted {
  font-size: 10px;
  line-height: 1.35;
}
.charsheet-box .csb-info-box > .csb-badge-label .cs-info-btn {
  flex: none;
}
.charsheet-box .csb-ability-mod {
  font-family: var(--realm-font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  margin-top: 18px;
  color: #fff;
}
.charsheet-box .csb-ability-score {
  position: static;
  transform: none;
  width: 40px;
  height: auto;
  margin: 5px auto 0;
  padding: 2px 0;
  border-radius: 3px;
  border: 1px solid rgb(255 255 255 / .18);
  background: rgb(0 0 0 / .35);
  color: #fff;
  font-family: var(--realm-font-mono);
  font-size: 11px;
  font-weight: 500;
}

/* -- Kampfwerte-Scheiben: schlichte Kreise statt Schild/Kompass/Fluegel -- */
.charsheet-box .csb-disc,
.charsheet-box .csb-disc-shield,
.charsheet-box .csb-stat-ac,
.charsheet-box .csb-stat-init,
.charsheet-box .csb-stat-prof,
.charsheet-box .csb-stat-speed,
.charsheet-box .csb-stat-inspiration {
  clip-path: none !important;
  transform: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 0 22px rgb(0 0 0 / .35) !important;
  backdrop-filter: none !important;
  overflow: hidden;
}
.charsheet-box .csb-disc-shield,
.charsheet-box .csb-stat-ac {
  border-radius: 50% !important;
}
.charsheet-box .csb-stat-inspiration {
  border-radius: 50% !important;
  transform: none !important;
}
.charsheet-box .csb-cstat-icon {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .58;
  pointer-events: none;
}
.charsheet-box .csb-disc::before,
.charsheet-box .csb-disc::after,
.charsheet-box .csb-disc-shield::before,
.charsheet-box .csb-disc-shield::after,
.charsheet-box .csb-stat-ac::before,
.charsheet-box .csb-stat-ac::after,
.charsheet-box .csb-stat-init::before,
.charsheet-box .csb-stat-init::after,
.charsheet-box .csb-stat-prof::before,
.charsheet-box .csb-stat-prof::after,
.charsheet-box .csb-stat-speed::before,
.charsheet-box .csb-stat-speed::after,
.charsheet-box .csb-stat-inspiration::before,
.charsheet-box .csb-stat-inspiration::after {
  content: none !important;
  display: none !important;
}
.charsheet-box .csb-disc:hover,
.charsheet-box .csb-stat-inspiration:has(input:checked) {
  box-shadow: inset 0 0 22px rgb(0 0 0 / .35), 0 0 10px 1px rgb(217 184 111 / .28) !important;
}
.charsheet-box .csb-stat-inspiration:has(input:checked) .csb-cstat-icon {
  opacity: .9;
  filter: saturate(1.05) brightness(1.28) drop-shadow(0 0 12px rgb(217 184 111 / .7));
}
.charsheet-box .csb-disc-value {
  position: relative;
  z-index: 1;
  transform: translateY(8px);
  width: 38px !important;
  margin: 0 !important;
  min-height: 22px;
  border: 0 !important;
  border-radius: 4px !important;
  background: rgb(0 0 0 / .5) !important;
  font-family: var(--realm-font-display) !important;
  font-style: italic;
  font-weight: 400 !important;
  color: #fff !important;
  text-shadow: none !important;
}
.charsheet-box .csb-disc-value:disabled {
  border: 0 !important;
  background: rgb(0 0 0 / .5) !important;
  color: #fff !important;
}
.charsheet-box .csb-stat-speed .csb-disc-unit {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  color: rgb(255 255 255 / .58);
}
.charsheet-box .csb-stat-inspiration .csb-disc-spark {
  display: none !important;
}
.charsheet-box .csb-stat-inspiration:has(input:checked) .csb-disc-spark {
  display: none !important;
}

/* -- Wuerfel-Modus-Schalter: weisse Pille statt rotem Akzent -- */
.charsheet-box .csb-roll-mode-row label:has(input:checked) {
  background: #fff;
  color: #000;
}

/* -- Register (Tabs): weisse Pille statt Gold-Tint, wie im Entwurf -- */
.charsheet-box .cs-tab-btn {
  border-radius: 999px;
  border: 1px solid transparent;
}
.charsheet-box .cs-tab-btn.active {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}
.charsheet-box .cs-tab-btn.active::after {
  content: none;
}

/* -- Fertigkeiten: Uebungs-Punkt in Gold statt Rot -- */
.charsheet-box .cs-skill-prof {
  color: var(--realm-gold);
}

/* -- Primaer-/Sekundaer-Knoepfe im Kopfbereich als Pillen -- */
.charsheet-box .cs-make-token,
.charsheet-box .cs-appearance-toggle {
  border-radius: 999px;
}

/* -- Linke und mittlere Spalte: nur noch Karten-Container ohne eigenen
   Rahmen, die einzelnen Abschnitte (Attribute, Passive Werte, Fertig-
   keiten, Sinne, Ausbildungen / Werte-Leiste, VTT, Register) sind jeweils
   eigene Karten (.csb-info-box), genau wie die ".rp"-Sektionen im Entwurf.
   Vorher war das eine einzige durchgehende Box mit nur Trennlinien. -- */
.charsheet-box .csb-left-col,
.charsheet-box .csb-main-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.charsheet-box .csb-left-col::before,
.charsheet-box .csb-main-col::before {
  content: none !important;
}
.charsheet-box .csb-main-col .csb-badges {
  margin-bottom: 0;
}
.charsheet-box .csb-tabs-box {
  padding: 16px 20px !important;
}

/* --- Rast-Bestaetigungsdialog (Etappe 22) --- */
.cs-rest-confirm-box { width: 380px; max-width: 90vw; }
.cs-rest-preview-list {
  margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--parchment);
}
.cs-rest-preview-list li { line-height: 1.4; }
.cs-rest-dice-roller {
  margin-top: 14px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--ink-950); display: flex; flex-direction: column; gap: 8px;
}
.cs-rest-dice-roller label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--parchment-muted); text-transform: uppercase; letter-spacing: 0.3px;
}
.cs-rest-dice-result { font-size: 13px; }

/* --- Bestiarium-Auswahl (Monster-NPC aus SRD-Statblock anlegen) --- */
.monster-picker-box { width: 420px; max-width: 90vw; }
.monster-picker-search {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--ink-950); color: var(--parchment); font-family: var(--font-body); margin-bottom: 10px;
}
.monster-picker-results {
  max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.monster-picker-results.muted { padding: 8px 2px; }
.monster-picker-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--ink-800); border: 1px solid var(--border); color: var(--parchment); cursor: pointer;
}
.monster-picker-row:hover { background: var(--ink-700); border-color: var(--gold-strong); }
.monster-picker-name { font-family: var(--font-display); letter-spacing: 0.3px; }
.monster-picker-meta { font-size: 12px; color: var(--parchment-muted); white-space: nowrap; }

/* Aus style.css verschoben (2026-09-05, CSS-Restaufteilung "Restliche Oberflaeche"):
   ueberschreibt kaskadierend die frueheren body.cs-standalone-background-Regeln
   weiter oben in dieser Datei (Zeile ~526 und ~1578) - deshalb bewusst ans Ende
   angehaengt, damit diese Override-Reihenfolge erhalten bleibt (character-sheet.css
   laedt weiterhin vor style.css, style.css selbst hat danach keine weitere
   body.cs-standalone-Regel mehr). */
body.cs-standalone {
  background:
    radial-gradient(1400px 700px at 50% -8%, rgba(208,70,74,0.10), transparent 60%),
    linear-gradient(180deg, #131519, #0a0b0e 55%);
  background-attachment: fixed;
}

/* ---------- Widget-Umbau Etappe 3: Editier-Modus fuer das Kachel-Layout
   (docs/CHARAKTERBOGEN_WIDGET_UMBAU_PLAN.md) ---------- */
.csb-shell.sheet-edit-mode .grid-stack-item-content {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  cursor: grab;
}
.csb-shell.sheet-edit-mode .grid-stack-item-content:active { cursor: grabbing; }
/* Gridstack setzt die Breiten-Resize-Handles selbst nur, wenn nicht
   staticGrid -- hier nur etwas deutlicher sichtbar machen als der
   Bibliotheks-Standard. */
.csb-shell.sheet-edit-mode .ui-resizable-handle {
  background: var(--accent);
  opacity: 0.55;
}

/* ---------- Widget-Umbau Etappe 4: Kachel-Aufteilung nach Nutzerwunsch
   (docs/CHARAKTERBOGEN_WIDGET_UMBAU_PLAN.md) ---------- */
/* "Sinne & Sprachen" und "Ausbildungen" bleiben bewusst in einer Kachel
   zusammen (siehe renderSinneAusbildungBox()), brauchen aber Abstand
   zwischeneinander, den vorher der jetzt entfernte .csb-left-col-Rahmen
   uebernommen hat. */
.csb-sinne-ausbildung-stack { display: flex; flex-direction: column; gap: 14px; }

/* Bugfix (2026-09-10, Nutzer-Feedback nach Freigabe der Hoehen-Griffe):
   .grid-stack-item-content bekommt seine Hoehe von Gridstack per Inline-
   Style gesetzt, aber sein einzelnes Kind (die eigentliche sichtbare Kachel
   -- .csb-info-box, .csb-topstats-frame usw.) ist ein normaler Block ohne
   eigene Hoehe und richtet sich nur nach seinem eigenen Inhalt. Beim
   manuellen Vergroessern einer Kachel wuchs deshalb nur der unsichtbare
   Aussen-Container, waehrend der sichtbare Rahmen gleich blieb -- es sah
   aus, als wuerde sich darunter nur Leerraum auftun statt die Kachel selbst
   zu wachsen. min-height:100% laesst den sichtbaren Rahmen immer mindestens
   die volle Kachel-Hoehe ausfuellen; ist der Inhalt hoeher als die gewaehlte
   Kachel-Groesse, waechst die Box trotzdem weiter (min-height, keine feste
   height) und das umgebende overflow-y:auto (Gridstacks eigene Basis-CSS)
   scrollt dann wie gewohnt. */
.grid-stack-item-content > * {
  min-height: 100%;
  box-sizing: border-box;
}

/* ---------- Identity-Kachel: Portraet praesent, Daten unten rechts ---------- */
.charsheet-box .csb-side-col {
  height: 100%;
  min-height: 100%;
}
.charsheet-box .csb-identity-panel {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 100%;
}
.charsheet-box .csb-identity {
  position: relative;
  display: block;
  height: 100%;
  min-height: 100%;
}
.charsheet-box .csb-identity .csb-portrait {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  width: auto;
  height: min(470px, calc(100% - 330px));
  min-height: 360px;
  border-radius: 10px;
  border: 1px solid rgb(217 184 111 / .62);
  background: rgb(0 0 0 / .22);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .12),
    0 0 38px 10px rgb(217 184 111 / .22),
    0 20px 42px rgb(0 0 0 / .5);
}
.charsheet-box .csb-identity .csb-portrait img {
  object-fit: cover;
}
.charsheet-box .csb-title-block {
  position: absolute;
  right: 24px;
  bottom: 28px;
  width: min(280px, calc(100% - 48px));
  display: grid;
  gap: 10px;
}
.charsheet-box .cs-name-input {
  width: 100%;
  font-size: 34px;
  line-height: 1;
  text-align: right;
}
.charsheet-box .csb-identity-meta {
  display: grid;
  gap: 8px;
}
.charsheet-box .csb-identity-meta .csb-subtitle-row,
.charsheet-box .csb-identity-meta .csb-level-row {
  justify-content: flex-end;
  margin-top: 0;
}
.charsheet-box .csb-identity-meta .cs-field-label,
.charsheet-box .csb-identity-meta .csb-edition-pill {
  min-width: min(100%, 250px);
  justify-content: space-between;
}
.charsheet-box .csb-identity-meta .cs-field-label input,
.charsheet-box .csb-identity-meta .cs-field-label span,
.charsheet-box .csb-identity-meta .cs-field-label select {
  text-align: right;
}
@media (max-width: 900px) {
  .charsheet-box .csb-identity .csb-portrait,
  .charsheet-box .csb-title-block {
    position: relative;
    inset: auto;
  }
  .charsheet-box .csb-identity .csb-portrait {
    width: 100%;
    height: auto;
    min-height: 260px;
    aspect-ratio: 4 / 5;
  }
  .charsheet-box .csb-title-block {
    width: 100%;
    margin-top: 18px;
  }
}