:root {
  color-scheme: dark;

  /* Schrift (nicht unter --color-) */
  --font-text: "Berlin", Georgia, "Times New Roman", serif;
  --font-heading: "MedievalSharp-Regular", Georgia, serif;

  /* ─── Basis · App-Hülle ─── */
  --color-bg-app: #0f0c08;
  --color-photo-overlay: rgba(14, 10, 7, 0.5);

  /* ─── Flächen · Panels & Karten ─── */
  --color-gradient-brown-toolbar-stop-end: rgba(12, 8, 4, 0.99);
  --color-gradient-brown-toolbar-stop-start: rgba(28, 20, 14, 0.98);
  --color-gradient-char-name-end-rich: rgba(123, 84, 48, 0.9);
  --color-gradient-char-name-mid-gold: rgba(232, 185, 90, 0.75);
  --color-gradient-char-name-mid-warm: rgba(232, 184, 106, 0.85);
  --color-sidenav-gradient-end: rgba(8, 5, 3, 0.99);
  --color-sidenav-gradient-start: rgba(20, 12, 6, 0.98);
  --color-surface-admin-row-hover-faint: rgba(255, 180, 60, 0.08);
  --color-surface-asset-modal-parchment-overlay: rgba(18, 12, 8, 0.95);
  --color-surface-asset-tile-hover: rgba(255, 220, 150, 0.35);
  --color-surface-asset-tile-rest: rgba(255, 250, 240, 0.35);
  --color-surface-brown-hover-strong: rgba(72, 58, 46, 0.95);
  --color-surface-char-card-btn-rest: rgba(18, 12, 8, 0.72);
  --color-surface-char-card-hover-soft: rgba(120, 70, 25, 0.2);
  --color-surface-char-card-selected: rgba(120, 70, 25, 0.35);
  --color-surface-char-placeholder-hover: rgba(55, 35, 18, 0.45);
  --color-surface-chip-icon: rgba(40, 26, 12, 0.72);
  --color-surface-copy-btn-hover: rgba(25, 55, 95, 0.45);
  --color-surface-copy-btn-rest: rgba(12, 28, 50, 0.55);
  --color-surface-danger-admin-hover-soft: rgba(90, 20, 12, 0.5);
  --color-surface-danger-admin-rest: rgba(50, 12, 8, 0.5);
  --color-surface-danger-delete-hover: rgba(90, 20, 12, 0.55);
  --color-surface-danger-delete-rest: rgba(50, 12, 8, 0.55);
  --color-surface-inset-strong: rgba(14, 10, 7, 0.88);
  --color-surface-link-pill-hover: rgba(120, 70, 25, 0.28);
  --color-surface-list-add-hover: rgba(102, 66, 34, 0.95);
  --color-surface-list-add-rest: rgba(83, 53, 28, 0.88);
  --color-surface-list-inset: rgba(10, 7, 4, 0.45);
  --color-surface-lock-pressed: rgba(90, 55, 18, 0.45);
  --color-surface-logout-hover: rgba(80, 25, 12, 0.9);
  --color-surface-logout-rest: rgba(55, 20, 10, 0.72);
  --color-surface-modal-solid: rgba(22, 14, 9, 0.92);
  --color-surface-nav-hover-faint: rgba(255, 180, 60, 0.12);
  --color-surface-note-editor-parchment-soft: rgba(250, 240, 220, 0.22);
  --color-surface-note-overlay-paper: rgba(252, 248, 240, 0.98);
  --color-surface-note-toast-shadow-warm: rgba(180, 100, 40, 0.2);
  --color-surface-note-toast-strip: rgba(255, 220, 160, 0.2);
  --color-surface-note-toolbar-muted: rgba(161, 110, 60, 0.24);
  --color-surface-panel-elevated: rgba(22, 14, 9, 0.8);
  --color-surface-panel-glass: rgba(22, 14, 9, 0.75);
  --color-surface-pill-muted: rgba(18, 12, 8, 0.45);
  --color-surface-pill-muted-deep: rgba(18, 12, 8, 0.55);
  --color-surface-place-tree-active-strong: rgba(140, 80, 30, 0.42);
  --color-surface-place-tree-descendant: rgba(12, 9, 6, 0.58);
  --color-surface-prolog-note-hover: rgba(55, 38, 22, 0.95);
  --color-surface-quill-composite-fill: rgba(250, 240, 220, 0.35);
  --color-surface-quill-picker-item-hover: rgba(255, 180, 80, 0.18);
  --color-surface-quill-picker-panel: rgba(16, 10, 5, 0.98);
  --color-surface-quill-toolbar-strip: rgba(30, 22, 16, 0.28);
  --color-surface-read-toolbar-shell: rgba(248, 237, 216, 0.88);
  --color-surface-read-toolbar-shell-strong: rgba(248, 237, 216, 0.9);
  --color-surface-remove-row-hover: rgba(98, 46, 30, 0.95);
  --color-surface-remove-row-rest: rgba(74, 38, 25, 0.88);
  --color-surface-sheet-muted: rgba(10, 7, 4, 0.75);
  --color-surface-sql-debug: rgba(30, 20, 12, 0.7);
  --color-surface-stepper-btn: rgba(58, 48, 38, 0.88);
  --color-surface-stepper-btn-hover: rgba(58, 48, 38, 0.95);
  --color-surface-table-hover-faint: rgba(255, 200, 100, 0.06);
  --color-surface-toolbar-muted: rgba(58, 48, 38, 0.5);

  /* ─── Navigation & Leisten ─── */
  --color-app-header-bg: rgba(10, 6, 3, 0.88);
  --color-nav-active-fill: rgba(180, 90, 20, 0.35);

  /* ─── Text · dunkles UI ─── */
  --color-text-attr-extra-label: #efd9b8;
  --color-text-body: #f8edd8;
  --color-text-char-name-gradient-end: #ffd7cc;
  --color-text-char-status: #4a311f;
  --color-text-list-add-strong: #fff1d2;
  --color-text-on-dark-highlight-strong: rgba(255, 230, 200, 0.72);
  --color-text-prolog-tile-dark: #2a1a0f;
  --color-text-remove-hover: #fff0ec;
  --color-text-settings-error: #ffb8a8;
  --color-text-sword: #ffc8be;

  /* ─── Text · Pergament & heller Editor ─── */
  --color-text-admin-table-cell: #f2ebe0;
  --color-text-blockquote-body: #5a3a25;
  --color-text-blockquote-dark: #291811;
  --color-text-button-primary: #fff4dc;
  --color-text-counter-muted: #d4c4a8;
  --color-text-danger-soft: #ff9a94;
  --color-text-danger-strong-read: #7a2f1f;
  --color-text-heading-bright: #fffefb;
  --color-text-heading-umber: #7a4a2a;
  --color-text-link-accent: #ffd9a0;
  --color-text-link-hover-accent: #ffe6c0;
  --color-text-login-muted-alt: #c9b898;
  --color-text-login-status: #ffe1a8;
  --color-text-login-subtle: #c9b896;
  --color-text-modal-title-soft: #f3e7cf;
  --color-text-muted-neutral: #6b7280;
  --color-text-note-editor-muted: #e8d9bc;
  --color-text-parchment-body: #2f1e11;
  --color-text-parchment-link: #70411f;
  --color-text-parchment-strong: #140c06;
  --color-text-placeholder-muted-brown: rgba(47, 30, 17, 0.45);
  --color-text-quill-picker-highlight: #fffdf6;
  --color-text-quill-picker-item: #ede4d0;
  --color-text-toolbar-hover-strong: #fff8e8;
  --color-text-toolbar-label-strong: #ffe9c4;
  --color-text-toolbar-tab-rest: #f2e6cc;

  /* ─── Akzent · Gold / Pfirsich-Ränder ─── */
  --color-border-asset-tile: rgba(80, 50, 30, 0.35);
  --color-border-brown-debug-hairline: rgba(120, 84, 46, 0.45);
  --color-border-butter-hairline: rgba(255, 230, 180, 0.15);
  --color-border-butter-soft: rgba(255, 230, 180, 0.2);
  --color-border-cream-strong: rgba(255, 238, 204, 0.45);
  --color-border-input-default: rgba(255, 230, 180, 0.35);
  --color-input-background: rgba(8, 5, 3, 0.55);
  --color-border-list-add-hover-strong: rgba(161, 110, 60, 0.95);
  --color-border-modal-warm: rgba(255, 220, 170, 0.45);
  --color-border-note-inner-soft: #d4cab0;
  --color-border-note-toolbar-brown-strong: rgba(140, 80, 30, 0.55);
  --color-border-note-toolbar-muted-strong: rgba(180, 140, 70, 0.45);
  --color-border-note-toolbar-strong: rgba(255, 233, 184, 0.9);
  --color-border-prolog-sheet-soft: rgba(255, 220, 170, 0.55);
  --color-border-quill-picker-expanded: rgba(120, 90, 60, 0.45);
  --color-border-quill-toolbar-bottom: rgba(120, 90, 60, 0.35);
  --color-border-remove-hover-strong: rgba(146, 66, 46, 0.95);
  --color-border-remove-strong: rgba(120, 58, 42, 0.85);
  --color-border-stepper-hover-strong: rgba(156, 92, 44, 0.75);
  --color-border-stepper-rest: rgba(50, 34, 20, 0.55);
  --color-border-toolbar-img-inner: rgba(200, 160, 100, 0.55);
  --color-border-toolbar-split-soft: rgba(50, 34, 20, 0.45);
  --color-outline-border-note-inline: rgba(255, 200, 120, 0.2);
  --color-outline-border-note-soft: rgba(255, 200, 120, 0.18);
  --color-outline-card-outline-soft: rgba(255, 200, 120, 0.26);
  --color-outline-char-card-soft: rgba(255, 220, 180, 0.35);
  --color-outline-char-item-selected-outline: rgba(255, 200, 120, 0.58);
  --color-outline-charsheet-feather-outline: rgba(255, 200, 120, 0.42);
  --color-outline-copy-hover-strong: rgba(180, 220, 255, 0.55);
  --color-outline-copy-soft: rgba(160, 210, 255, 0.38);
  --color-outline-coral-muted-strong: rgba(255, 160, 130, 0.55);
  --color-outline-danger-soft: rgba(255, 160, 120, 0.35);
  --color-outline-danger-strong: rgba(255, 130, 100, 0.55);
  --color-outline-danger-strong-read: rgba(255, 170, 130, 0.8);
  --color-outline-input-focus-outline: rgba(255, 200, 120, 0.65);
  --color-outline-interactive-strong: rgba(255, 220, 170, 0.65);
  --color-outline-link-underline-hover: rgba(255, 200, 120, 0.7);
  --color-outline-notice-strip-soft: rgba(255, 200, 120, 0.24);
  --color-outline-pill-outline: rgba(255, 200, 120, 0.4);
  --color-outline-pill-outline-muted: rgba(255, 200, 120, 0.28);
  --color-outline-place-tree-active-strong: rgba(255, 210, 140, 0.72);
  --color-outline-place-tree-soft: rgba(255, 220, 180, 0.22);
  --color-outline-quote-outline: rgba(255, 200, 120, 0.55);
  --color-outline-salmon-rest: rgba(255, 170, 130, 0.5);
  --color-outline-scrollbar-thumb: rgba(255, 200, 120, 0.3);
  --color-outline-scrollbar-thumb-strong: rgba(255, 200, 120, 0.32);
  --color-outline-scrollbar-track-subtle: rgba(255, 200, 120, 0.22);
  --color-outline-section-divider-soft: rgba(255, 200, 120, 0.15);
  --color-outline-soft-dim-gold: rgba(255, 200, 100, 0.28);
  --color-outline-stepper-strong: rgba(255, 210, 140, 0.75);
  --color-outline-toc-item-hover: rgba(255, 200, 120, 0.16);
  --color-outline-toc-row-hover-alt: rgba(255, 200, 120, 0.12);
  --color-outline-toolbar-outline: rgba(255, 200, 120, 0.38);
  --color-outline-ui-outline: rgba(255, 200, 120, 0.45);
  --color-outline-ui-outline-soft: rgba(255, 200, 120, 0.35);
  --color-shadow-admin-danger-soft: rgba(146, 66, 46, 0.2);
  --color-shadow-char-focus-soft: rgba(156, 92, 44, 0.2);
  --color-shadow-char-remove-soft-alt: rgba(156, 92, 44, 0.22);
  --color-shadow-focus-brown-soft: rgba(200, 140, 60, 0.2);
  --color-shadow-focus-gold-soft: rgba(255, 230, 200, 0.42);
  --color-shadow-note-toolbar-warm: rgba(180, 80, 50, 0.25);
  --color-shadow-remove-focused-brown: rgba(146, 66, 46, 0.28);
  --color-shadow-remove-focused-strong: rgba(200, 140, 60, 0.28);

  /* ─── Schwarz · Overlays & Schlagschatten ─── */
  --color-code-chip-bg-light: rgba(0, 0, 0, 0.08);
  --color-field-lock-muted: rgba(0, 0, 0, 0.28);
  --color-floating-shadow-strong: rgba(0, 0, 0, 0.35);
  --color-ghost-button-fill: rgba(0, 0, 0, 0.25);
  --color-hint-placeholder-backdrop: rgba(0, 0, 0, 0.04);
  --color-overlay-deep-soft: rgba(0, 0, 0, 0.4);
  --color-overlay-drawer-backdrop: rgba(0, 0, 0, 0.55);
  --color-overlay-heavy: rgba(0, 0, 0, 0.6);
  --color-overlay-modal-backdrop: rgba(0, 0, 0, 0.5);
  --color-overlay-scrim: rgba(0, 0, 0, 0.45);
  --color-shadow-feather: rgba(0, 0, 0, 0.1);
  --color-wys-quote-edge: rgba(0, 0, 0, 0.18);

  /* ─── Komponenten · Buttons & Listenaktionen ─── */
  --color-btn-danger-600: #8a2820;
  --color-btn-danger-700: #631a14;
  --color-btn-primary-600: #6b3a12;
  --color-btn-primary-700: #4a2408;

  /* ─── Komponenten · Gefahren / Admin-Aktionen ─── */
  --color-accent-danger-deep: #8a2010;
  --color-bg-danger-badge-soft: #fff4f2;

  /* ─── Komponenten · Quill / Assets ─── */
  --color-bg-note-toolbar-strip: #ffecb8;
  --color-bg-picker-brown-deep: #3d2615;
  --color-bg-picker-brown-mid: #4a301c;
  --color-icon-quill-picker-hover-stroke: #fff8ec;
  --color-icon-quill-picker-stroke: #e8dcc4;
  --color-icon-quill-toolbar: #4a3220;

  /* ─── Verläufe & Spezialflächen ─── */
  --color-accent-bullet-dot: #7a3a1a;
  --color-accent-editor-tag-blue-soft: #d6ebff;
  --color-accent-highlight-gold-soft: #e8b86a;
  --color-accent-highlight-gold-warm: #e8c97a;
  --color-accent-highlight-peach-soft: #e4cfa7;
  --color-accent-metal-gold-deep: #b8862b;
  --color-accent-slider-accent: #c4753d;
  --color-accent-tag-blue-shell: #f4f9ff;

  /* ─── Sonstiges / Fallback ─── */
  --color-accent-toolbar-indicator: #e8c56a;
  --color-bg-char-tooltip-dark: #1e1409;
  --color-bg-note-editor-shell: #e8dbc8;
  --color-bg-note-inline-soft: #f0dfc8;
  --color-bg-note-toolbar-highlight: #f7e7cb;
  --color-bg-note-toolbar-shell: #f0e6d8;
  --color-bg-note-toolbar-shell-alt: #fff9ee;
  --color-bg-note-toolbar-strong: #f0e8de;
  --color-bg-toggle-strong: #fff7e8;
  --color-bg-toolbar-admin-strong: #ffe9b8;
  --color-focus-ring-brown-inner: rgba(0, 0, 0, 0.2);
  --color-text-attr-counter-warning: #ff9a7a;
  --color-text-brown-muted-strong: rgba(35, 24, 14, 0.88);
  --color-text-label-muted: #e6d4b8;
  --color-text-nav-muted-brown: #e8d4b8;
  --color-text-table-header-muted: #e0c8a0;
}
@font-face {
  font-family: "MedievalSharp-Regular";
  src: url("/assets/fonts/MedievalSharp-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Berlin";
  src: url("/assets/fonts/Berlin.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-text);
  min-height: 100vh;
  color: var(--color-text-body);
  background: var(--color-bg-app);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.login-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  overflow: hidden;
}

.login-page::before {
  content: "";
  position: absolute;
  inset: -30px;
  background: url("/assets/images/dragon-turtle_SEPIA.webp") center / cover no-repeat;
  filter: blur(20px);
  transform: scale(1.04);
  z-index: 0;
}

.login-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-photo-overlay);
  z-index: 0;
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  border: 1px solid var(--color-border-cream-strong);
  border-radius: 18px;
  background: var(--color-surface-panel-glass);
  backdrop-filter: blur(3px);
  padding: 2.2rem;
  text-align: center;
  box-shadow: 0 12px 30px var(--color-overlay-scrim);
}

h1 {
  text-align: center;
  margin: 2rem 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: clamp(2rem, 5vw, 2.6rem);
}

h2,
h3,
h4,
h5,
h6,
.charsheet-h2,
.ce-list-title,
.prolog-toc-title,
.charsheet-sql-debug__title,
label,
.form-label,
.user-table th {
  font-family: var(--font-heading);
  font-weight: 700;
}

.subtitle {
  text-align: center;
  margin: 0 0 1.6rem;
  font-size: 1.05rem;
}

.login-status {
  margin-top: 1rem;
  min-height: 1.25rem;
  color: var(--color-text-login-status);
  text-align: left;
}

.auth-form {
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
}

.form-label {
  display: block;
  margin: 0.35rem 0 0.2rem;
  font-size: 0.9rem;
  color: var(--color-text-label-muted);
}

.form-input {
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-input-default);
  border-radius: 8px;
  background: var(--color-input-background);
  color: var(--color-text-body);
  font: inherit;
  font-size: 0.95rem;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-outline-input-focus-outline);
  box-shadow: 0 0 0 2px var(--color-shadow-focus-brown-soft);
}

.form-input--inline {
  margin-bottom: 0;
  width: auto;
  min-width: 6rem;
  max-width: 12rem;
}

.btn {
  display: inline-block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-outline-ui-outline);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--color-btn-primary-600) 0%, var(--color-btn-primary-700) 100%);
  color: var(--color-text-button-primary);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn-ghost {
  width: 100%;
  background: var(--color-ghost-button-fill);
  font-weight: 400;
}

.btn-sm {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

.form-links {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  text-align: center;
}

.form-links a {
  color: var(--color-text-link-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-outline-ui-outline-soft);
}

.form-links a:hover {
  color: var(--color-text-link-hover-accent);
  border-bottom-color: var(--color-outline-link-underline-hover);
}

.login-forgot-intro {
  margin: 1rem 0 0;
  text-align: center;
}

.login-forgot-intro .btn-forgot-toggle {
  margin-top: 0;
}

.login-forgot-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-butter-soft);
  text-align: left;
}

.login-forgot-lede {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-text-label-muted);
}

.login-forgot-panel .btn-forgot-send {
  margin-top: 0.5rem;
}

/* Admin */
.admin-card {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  border: 1px solid var(--color-border-cream-strong);
  border-radius: 18px;
  background: var(--color-surface-panel-glass);
  backdrop-filter: blur(3px);
  padding: 2.2rem;
  box-shadow: 0 12px 30px var(--color-overlay-scrim);
}

.admin-card h1,
.admin-card .subtitle {
  text-align: center;
}

.admin-denied {
  text-align: center;
  color: var(--color-text-sword);
  margin: 1rem 0;
}

.user-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.user-table th,
.user-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border-butter-hairline);
  text-align: left;
  vertical-align: middle;
}

.user-table th {
  color: var(--color-text-table-header-muted);
}

.user-table tr:hover td {
  background: var(--color-surface-table-hover-faint);
}

.date-cell {
  white-space: nowrap;
  color: var(--color-text-login-muted-alt);
  font-size: 0.85rem;
}

/* Benutzerverwaltung: optisch an Charaktereditor (ce-editor-card) */
.admin-user-card > .ce-admin-status {
  margin: 0 0 0.65rem;
  color: var(--color-text-login-status);
}

.admin-user-card .user-table-wrap {
  margin-top: 0;
}

.admin-user-card .user-table th {
  color: var(--color-text-heading-bright);
  border-bottom-color: var(--color-outline-toolbar-outline);
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
}

.admin-user-card .user-table td {
  color: var(--color-text-admin-table-cell);
  border-bottom-color: var(--color-outline-section-divider-soft);
}

.admin-user-card .user-table tr:hover td {
  background: var(--color-surface-admin-row-hover-faint);
}

.admin-user-card .date-cell {
  color: var(--color-text-counter-muted);
}

.admin-user-card .user-table .btn-sm {
  margin-top: 0;
  width: auto;
  min-width: 5rem;
  padding: 0.35rem 0.55rem;
  border: 2px solid var(--color-outline-danger-soft);
  border-radius: 8px;
  background: var(--color-surface-danger-admin-rest);
  color: var(--color-text-sword);
  font-weight: 600;
}

.admin-user-card .user-table .btn-sm:hover:not(:disabled),
.admin-user-card .user-table .btn-sm:focus-visible {
  border-color: var(--color-outline-danger-strong);
  background: var(--color-surface-danger-admin-hover-soft);
  color: var(--color-text-remove-hover);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-shadow-admin-danger-soft);
}

.admin-user-card .form-input.form-input--inline {
  background: var(--color-input-background);
  border-color: var(--color-outline-scrollbar-thumb-strong);
  color: var(--color-text-body);
}

/* App-Layout: Burger + seitliches Menue (eingeloggte Seiten) */
.app-page {
  position: relative;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  color: var(--color-text-body);
  background: var(--color-bg-app);
  overflow-x: hidden;
}

.app-page::before {
  content: "";
  position: fixed;
  top: -30px;
  left: -30px;
  /* lvh = „large“ viewport height (max. ohne Browser-Chrome); stabil beim Ein-/Ausblenden
     der mobilen Adressleiste, damit background-size: cover nicht neu skaliert. */
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  height: calc(100lvh + 60px);
  background: url("/assets/images/dragon-turtle_SEPIA.webp") center / cover no-repeat;
  filter: blur(20px);
  transform: scale(1.04);
  z-index: 0;
  pointer-events: none;
}

.app-page::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  background: var(--color-photo-overlay);
  z-index: 0;
  pointer-events: none;
}

.app-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0.4rem 0.75rem;
  background: var(--color-app-header-bg);
  border-bottom: 1px solid var(--color-surface-note-toast-strip);
  box-shadow: 0 2px 10px var(--color-ghost-button-fill);
  backdrop-filter: blur(6px);
}

.app-topbar__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(22rem, calc(100% - 13.5rem));
  padding: 0 0.25rem;
  font-family: var(--font-heading);
  font-size: clamp(0.92rem, 2.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--color-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Ankerziele: Abstand zur fixen Topbar (Inhaltsverzeichnis, #-Links) */
html {
  scroll-padding-top: 4.5rem;
}

.app-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--color-outline-ui-outline);
  border-radius: 10px;
  background: var(--color-surface-chip-icon);
  color: var(--color-bg-note-inline-soft);
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
}

.app-burger:hover,
.app-burger:focus-visible {
  outline: none;
  filter: brightness(1.08);
  border-color: var(--color-outline-stepper-strong);
  box-shadow: 0 0 0 2px var(--color-shadow-remove-focused-strong);
}

.app-burger__line {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* Topbar: Benutzerverwaltung — gleiches Layout wie .app-top-settings */
.app-top-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--color-outline-ui-outline);
  border-radius: 10px;
  background: var(--color-surface-chip-icon);
  color: var(--color-bg-note-inline-soft);
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
}

/* Erzwingt Verstecken: display:inline-flex wuerde sonst [hidden] ueberschreiben */
.app-top-admin[hidden] {
  display: none;
}

.app-top-admin:hover,
.app-top-admin:focus-visible {
  outline: none;
  filter: brightness(1.08);
  border-color: var(--color-outline-stepper-strong);
  box-shadow: 0 0 0 2px var(--color-shadow-remove-focused-strong);
}

.app-top-admin__icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.app-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: auto;
}

.app-top-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--color-outline-ui-outline);
  border-radius: 10px;
  background: var(--color-surface-chip-icon);
  color: var(--color-bg-note-inline-soft);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.app-top-settings__icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.app-top-settings:hover,
.app-top-settings:focus-visible {
  outline: none;
  filter: brightness(1.08);
  border-color: var(--color-outline-stepper-strong);
  box-shadow: 0 0 0 2px var(--color-shadow-remove-focused-strong);
}

.app-top-user-menu {
  position: relative;
}

.app-top-user-menu__trigger {
  font: inherit;
}

.app-top-user-menu__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 600;
  min-width: 12.5rem;
  padding: 0.35rem 0;
  border: 1px solid var(--color-outline-ui-outline);
  border-radius: 10px;
  background: var(--color-surface-modal-solid);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}

.app-top-user-menu__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.4rem;
  height: 0.4rem;
}

.app-top-user-menu:hover .app-top-user-menu__panel,
.app-top-user-menu:focus-within .app-top-user-menu__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.app-top-user-menu__item {
  display: block;
  padding: 0.5rem 0.85rem;
  color: var(--color-text-modal-title-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.35;
  white-space: nowrap;
}

.app-top-user-menu__item:hover,
.app-top-user-menu__item:focus-visible {
  background: var(--color-surface-char-card-hover-soft);
  outline: none;
}

.app-top-user-menu__item[aria-current="page"] {
  font-weight: 600;
}

.app-top-user-menu__item[hidden] {
  display: none !important;
}

.app-top-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0 0 0 0.2rem;
  border: 1px solid var(--color-outline-salmon-rest);
  border-radius: 10px;
  background: var(--color-surface-logout-rest);
  color: var(--color-text-sword);
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
}

.app-top-logout__icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}

.app-top-logout:hover,
.app-top-logout:focus-visible {
  outline: none;
  background: var(--color-surface-logout-hover);
  border-color: var(--color-outline-danger-strong-read);
  box-shadow: 0 0 0 2px var(--color-shadow-note-toolbar-warm);
}

.app-scrim {
  position: fixed;
  z-index: 300;
  left: 0;
  right: 0;
  top: 3.25rem;
  bottom: 0;
  background: var(--color-overlay-drawer-backdrop);
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.app-side-nav {
  position: fixed;
  z-index: 400;
  top: 3.25rem;
  left: 0;
  bottom: 0;
  width: min(16.5rem, 88vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--color-sidenav-gradient-start) 0%, var(--color-sidenav-gradient-end) 100%);
  border-right: 1px solid var(--color-outline-scrollbar-thumb);
  box-shadow: 8px 0 28px var(--color-overlay-scrim);
  transform: translateX(-102%);
  transition: transform 0.28s ease;
  padding: 0.5rem 0 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
}

.app-side-nav.is-open {
  transform: translateX(0);
}

.app-side-nav__list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.35rem 1rem;
  flex: 1;
  overflow-y: auto;
}

.app-side-nav__list li {
  margin: 0.15rem 0;
}

.app-side-nav__link {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  color: var(--color-text-body);
  text-decoration: none;
  font-size: 1.02rem;
  border: 1px solid transparent;
}

.app-side-nav__link:hover,
.app-side-nav__link:focus-visible {
  background: var(--color-surface-nav-hover-faint);
  color: var(--color-text-link-hover-accent);
  outline: none;
}

.app-side-nav__link.is-active {
  background: var(--color-nav-active-fill);
  border-color: var(--color-outline-pill-outline);
  color: var(--color-bg-note-toolbar-strip);
}

.app-side-nav__branch > .app-side-nav__link[data-nav="almanach"] {
  margin-bottom: 0.05rem;
}

/* Almanach-Kategorien im Burger-Menü immer sichtbar (nicht einklappbar) */
.app-side-nav__branch.is-expanded > .app-side-nav__sublist,
.app-side-nav__branch > .app-side-nav__sublist {
  display: block;
}

.app-side-nav__sublist {
  list-style: none;
  margin: 0 0 0.25rem 0;
  padding: 0.05rem 0 0.2rem 0.65rem;
  border-left: 2px solid var(--color-outline-scrollbar-track-subtle);
}

.app-side-nav__sublist > li {
  margin: 0.06rem 0;
}

.app-side-nav__sublink.app-side-nav__link {
  font-size: 0.93rem;
  font-weight: 600;
  padding: 0.52rem 0.72rem 0.52rem 0.6rem;
}

.app-side-nav__foot {
  margin-top: auto;
  padding: 0.75rem 0.4rem 0.25rem;
  border-top: 1px solid var(--color-outline-border-note-inline);
  flex-shrink: 0;
}

.app-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 0 0 2.5rem;
}

.app-main--padded {
  padding: 4rem 1.25rem 0.3rem;
}

.settings-account-card {
  position: relative;
  z-index: 1;
  max-width: 32rem;
  margin: 1rem auto 0;
}

.settings-account-form .btn.btn-primary {
  margin-top: 0.25rem;
}

.settings-status-line.settings-status--err {
  color: var(--color-text-settings-error);
}

.settings-session-log-card {
  position: relative;
  z-index: 1;
  max-width: 32rem;
  margin: 1.35rem auto 0;
}

.settings-session-log-lede {
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}

textarea.settings-session-log {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 14rem;
  resize: vertical;
}

.settings-session-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.app-panel {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  margin-top: 0.5rem;
  border: 1px solid var(--color-border-cream-strong);
  border-radius: 18px;
  background: var(--color-surface-panel-elevated);
  backdrop-filter: blur(3px);
  padding: 2rem 1.5rem;
  box-shadow: 0 12px 30px var(--color-overlay-deep-soft);
}

.app-panel h1 {
  margin: 0 0 0.5rem;
  text-align: left;
}

/* Admin: Karte in App-Seite, kein doppelter Vollbild-Background */
.app-main .admin-card {
  margin: 0 auto;
}

/* Prolog (WYSIWYG): kein äußerer Hauptrahmen; Kapitel in .prolog-section */
.app-panel.app-panel--prolog {
  max-width: 64rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  background: transparent;
  color: var(--color-text-parchment-body);
}

.prolog-section {
  position: relative;
  border: 1px solid var(--color-border-prolog-sheet-soft);
  border-radius: 14px;
  padding: 1.2rem 1.35rem 1.35rem;
  margin: 0 0 1.25rem;
  /* Papiergrafik dominiert; leichte Tönung für Lesbarkeit */
  background:
    url("/assets/images/simple-old-paper-1-transparent.webp") center / cover no-repeat,
    var(--color-surface-note-editor-parchment-soft);
  box-shadow: 0 8px 22px var(--color-focus-ring-brown-inner);
  /* Explizit dunkel: sonst erben Absätze var(--color-text-body) von .wys-content und verschwinden auf hellem Papier */
  color: var(--color-text-blockquote-dark);
}

.prolog-section > h2:first-child {
  margin-top: 0;
}

.prolog-section h2 + h2 {
  margin-top: 0.5rem;
}

.prolog-error {
  color: var(--color-text-danger-strong-read);
  margin: 0 0 0.75rem;
  text-align: left;
}

.prolog-body {
  min-height: 5rem;
}

.prolog-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 15.5rem) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
}

.prolog-toc-wrap {
  position: sticky;
  align-self: start;
  border: 1px solid var(--color-outline-toolbar-outline);
  border-radius: 10px;
  background: var(--color-surface-inset-strong);
  padding: 0.7rem 0.7rem 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  box-shadow: 0 6px 18px var(--color-floating-shadow-strong);
}

.prolog-toc-head {
  margin: 0 0 0.45rem;
  min-width: 0;
}

/* Platz fuer Icon-Button nur wenn Admin-Leiste sichtbar */
.prolog-toc-wrap:has(.prolog-toc-admin:not([hidden])) .prolog-toc-head {
  padding-right: calc(2.5rem + 0.35rem);
}

.prolog-toc-title {
  margin: 0;
  font-size: 0.98rem;
  color: var(--color-text-toolbar-tab-rest);
  text-shadow: 0 1px 1px var(--color-overlay-scrim);
}

.prolog-toc-admin {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

/* Wie Almanach .al-read-toolbar (einzelner Icon-Button) */
.prolog-toc-edit-btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.35rem;
  box-sizing: border-box;
  margin: 1px;
  border: 1px solid var(--color-border-stepper-rest);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-toolbar-muted);
  color: var(--color-text-toolbar-tab-rest);
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--color-floating-shadow-strong);
}

.prolog-toc-edit-btn:hover,
.prolog-toc-edit-btn:focus-visible {
  color: var(--color-text-toolbar-hover-strong);
  background: var(--color-surface-brown-hover-strong);
  outline: none;
  box-shadow: 0 2px 8px var(--color-floating-shadow-strong), inset 0 0 0 2px var(--color-shadow-char-remove-soft-alt);
}

.prolog-toc-edit-btn .prolog-toc-edit-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  display: block;
}

.prolog-toc-admin[hidden] {
  display: none;
}

.prolog-toc {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.prolog-toc__item {
  display: block;
  color: var(--color-text-note-editor-muted);
  text-decoration: none;
  border-radius: 6px;
  padding: 0.2rem 0.3rem;
  line-height: 1.28;
}

.prolog-toc__item:hover,
.prolog-toc__item:focus-visible {
  background: var(--color-outline-toc-item-hover);
  color: var(--color-icon-quill-picker-hover-stroke);
  outline: none;
}

.prolog-toc__item--l2 {
  padding-left: 0.55rem;
}

.prolog-toc__item--l3,
.prolog-toc__item--l4,
.prolog-toc__item--l5,
.prolog-toc__item--l6 {
  padding-left: 0.95rem;
  font-size: 0.95em;
}

.prolog-section > .prolog-h2-block:first-child h2 {
  margin-top: 0;
}

.prolog-h2-block {
  position: relative;
  margin: 0 0 0.35rem;
}

.prolog-section > .prolog-h2-admin-tools,
.prolog-body > .prolog-h2-block > .prolog-h2-admin-tools {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--color-bg-toolbar-admin-strong);
  border: 1px solid var(--color-gradient-char-name-mid-gold);
  border-radius: 10px;
  box-shadow: 0 2px 8px var(--color-floating-shadow-strong);
  overflow: hidden;
}

.prolog-h2-admin-tools .prolog-h2-note-btn,
.prolog-h2-admin-tools .prolog-h2-lock {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.35rem;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-brown-muted-strong);
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
}

.prolog-h2-admin-tools .prolog-h2-note-btn {
  border-right: 1px solid var(--color-border-note-toolbar-muted-strong);
}

.prolog-h2-admin-tools .prolog-h2-note-btn:hover,
.prolog-h2-admin-tools .prolog-h2-note-btn:focus-visible,
.prolog-h2-admin-tools .prolog-h2-lock:hover,
.prolog-h2-admin-tools .prolog-h2-lock:focus-visible {
  color: var(--color-text-toolbar-hover-strong);
  background: var(--color-surface-prolog-note-hover);
  outline: none;
}

.prolog-h2-admin-tools .prolog-h2-note-btn--has {
  position: relative;
}

.prolog-h2-admin-tools .prolog-h2-note-btn--has::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-bullet-dot);
  box-shadow: 0 0 0 1px var(--color-border-note-toolbar-strong);
}

.prolog-h2-admin-tools .prolog-visibility-icon,
.prolog-h2-admin-tools .prolog-note-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

.prolog-h2-note-tooltip {
  position: fixed;
  z-index: 2850;
  max-width: min(22rem, 92vw);
  max-height: 14rem;
  overflow: auto;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--color-outline-toolbar-outline);
  background: var(--color-surface-inset-strong);
  box-shadow: 0 6px 18px var(--color-floating-shadow-strong);
  pointer-events: none;
  text-align: left;
}

/* Hover-Notiz: gleiche Typografie wie Prolog (.wys-content), Farben wie dunkles Inhaltsverzeichnis */
.prolog-h2-note-tooltip.wys-content {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--color-text-note-editor-muted);
}

.prolog-h2-note-tooltip.wys-content p {
  margin: 0 0 0.9rem;
}

.prolog-h2-note-tooltip.wys-content p:last-child {
  margin-bottom: 0;
}

.prolog-h2-note-tooltip.wys-content h1,
.prolog-h2-note-tooltip.wys-content h2,
.prolog-h2-note-tooltip.wys-content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 1.1rem 0 0.45rem;
  scroll-margin-top: 2rem;
  color: var(--color-text-toolbar-tab-rest);
  text-shadow: 0 1px 1px var(--color-overlay-scrim);
}

.prolog-h2-note-tooltip.wys-content h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 1.1rem 0 0.45rem;
  scroll-margin-top: 2rem;
  font-size: 1.05rem;
  color: var(--color-text-nav-muted-brown);
  text-shadow: 0 1px 1px var(--color-overlay-scrim);
}

.prolog-h2-note-tooltip.wys-content > h1:first-child,
.prolog-h2-note-tooltip.wys-content > h2:first-child,
.prolog-h2-note-tooltip.wys-content > h3:first-child,
.prolog-h2-note-tooltip.wys-content > h4:first-child {
  margin-top: 0;
}

.prolog-h2-note-tooltip.wys-content h1 {
  font-size: 1.55rem;
}

.prolog-h2-note-tooltip.wys-content h2 {
  font-size: 1.3rem;
}

.prolog-h2-note-tooltip.wys-content h3 {
  font-size: 1.12rem;
}

.prolog-h2-note-tooltip.wys-content h5,
.prolog-h2-note-tooltip.wys-content h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0.85rem 0 0.35rem;
  color: var(--color-text-note-editor-muted);
  scroll-margin-top: 4.5rem;
  font-size: 1.02rem;
}

.prolog-h2-note-tooltip.wys-content blockquote {
  border-left: 3px solid var(--color-outline-pill-outline);
  margin: 0.5rem 0 1rem;
  padding: 0.2rem 0 0.2rem 0.9rem;
  color: var(--color-border-note-inner-soft);
}

.prolog-h2-note-tooltip.wys-content ul,
.prolog-h2-note-tooltip.wys-content ol {
  margin: 0 0 0.8rem 1.2rem;
  padding: 0;
}

.prolog-h2-note-tooltip.wys-content li {
  color: var(--color-text-note-editor-muted);
}

.prolog-h2-note-tooltip.wys-content a {
  color: var(--color-bg-toolbar-admin-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prolog-h2-note-tooltip.wys-content strong,
.prolog-h2-note-tooltip.wys-content b {
  font-weight: 700;
  color: var(--color-icon-quill-picker-hover-stroke);
}

.prolog-h2-note-tooltip.wys-content em,
.prolog-h2-note-tooltip.wys-content i {
  font-style: italic;
}

.prolog-h2-note-tooltip.wys-content u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prolog-h2-note-tooltip.wys-content s,
.prolog-h2-note-tooltip.wys-content strike {
  opacity: 0.88;
}

.prolog-h2-note-tooltip.wys-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: 6px;
  box-shadow: 0 3px 14px var(--color-floating-shadow-strong);
}

.prolog-h2-note-tooltip.wys-content .ql-align-center {
  text-align: center;
}

.prolog-h2-note-tooltip.wys-content .ql-align-right {
  text-align: right;
}

.prolog-h2-note-tooltip.wys-content .ql-align-justify {
  text-align: justify;
}

.prolog-h2-note-tooltip.wys-content p.ql-align-left img,
.prolog-h2-note-tooltip.wys-content h1.ql-align-left img,
.prolog-h2-note-tooltip.wys-content h2.ql-align-left img,
.prolog-h2-note-tooltip.wys-content h3.ql-align-left img,
.prolog-h2-note-tooltip.wys-content h4.ql-align-left img {
  display: block;
  margin: 0.85rem 0 0.85rem 0;
}

.prolog-h2-note-tooltip.wys-content p.ql-align-center img,
.prolog-h2-note-tooltip.wys-content h1.ql-align-center img,
.prolog-h2-note-tooltip.wys-content h2.ql-align-center img,
.prolog-h2-note-tooltip.wys-content h3.ql-align-center img,
.prolog-h2-note-tooltip.wys-content h4.ql-align-center img {
  display: block;
  margin: 0.85rem auto;
}

.prolog-h2-note-tooltip.wys-content p.ql-align-right img,
.prolog-h2-note-tooltip.wys-content h1.ql-align-right img,
.prolog-h2-note-tooltip.wys-content h2.ql-align-right img,
.prolog-h2-note-tooltip.wys-content h3.ql-align-right img,
.prolog-h2-note-tooltip.wys-content h4.ql-align-right img {
  display: block;
  margin: 0.85rem 0 0.85rem auto;
}

.prolog-h2-note-tooltip.wys-content p.ql-align-justify img,
.prolog-h2-note-tooltip.wys-content h1.ql-align-justify img,
.prolog-h2-note-tooltip.wys-content h2.ql-align-justify img,
.prolog-h2-note-tooltip.wys-content h3.ql-align-justify img,
.prolog-h2-note-tooltip.wys-content h4.ql-align-justify img {
  display: block;
  margin: 0.85rem auto;
}

.prolog-h2-note-tooltip[hidden] {
  display: none !important;
}

.prolog-h2-note-tooltip.prolog-h2-note-tooltip--empty {
  color: var(--color-text-login-subtle);
  font-style: italic;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
}

.prolog-h2-note-overlay {
  position: fixed;
  inset: 0;
  z-index: 2800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--color-overlay-modal-backdrop);
}

.prolog-h2-note-overlay[hidden] {
  display: none !important;
}

.prolog-h2-note-overlay__backdrop {
  position: absolute;
  inset: 0;
}

.prolog-h2-note-overlay__panel {
  position: relative;
  z-index: 1;
  width: min(44rem, 100%);
  max-height: min(88vh, 52rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow: hidden;
}

.prolog-h2-note-overlay__title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-text-modal-title-soft);
  font-family: var(--font-heading);
}

.prolog-h2-note-overlay__hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-login-subtle);
  line-height: 1.4;
}

.prolog-h2-note-overlay__editor {
  flex: 1;
  min-height: 11rem;
  max-height: min(46vh, 26rem);
  overflow: auto;
  border: 1px solid var(--color-outline-scrollbar-track-subtle);
  border-radius: 8px;
  background: var(--color-surface-note-overlay-paper);
}

.prolog-h2-note-overlay__editor .ql-container {
  min-height: 10rem;
}

/* Notiz-Editor: Schriftführung wie gelesener Prolog (.wys-content), Farbe wie Haupt-Quill (Pergament) */
.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-container.ql-snow {
  font-family: var(--font-text);
  font-size: 1.02rem;
  line-height: 1.5;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor {
  font-family: var(--font-text);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--color-text-parchment-body);
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor p {
  margin: 0 0 0.9rem;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h1,
.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h2,
.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h3 {
  font-family: var(--font-heading);
  color: var(--color-text-heading-umber);
  font-weight: 700;
  margin: 1.1rem 0 0.45rem;
  scroll-margin-top: 2rem;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h4 {
  font-family: var(--font-heading);
  color: var(--color-text-heading-umber);
  font-weight: 700;
  margin: 1.1rem 0 0.45rem;
  scroll-margin-top: 2rem;
  font-size: 1.05rem;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h1 {
  font-size: 1.55rem;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h2 {
  font-size: 1.3rem;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h3 {
  font-size: 1.12rem;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h5,
.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0.85rem 0 0.35rem;
  scroll-margin-top: 4.5rem;
  font-size: 1.02rem;
  color: var(--color-text-heading-umber);
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor blockquote {
  border-left: 3px solid var(--color-outline-pill-outline);
  margin: 0.5rem 0 1rem;
  padding: 0.2rem 0 0.2rem 0.9rem;
  color: var(--color-text-blockquote-body);
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor ul,
.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor ol {
  margin: 0 0 0.8rem 1.2rem;
  padding: 0;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor a {
  color: var(--color-text-parchment-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor .ql-align-center {
  text-align: center;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor .ql-align-right {
  text-align: right;
}

.prolog-h2-note-overlay__editor .quill-skin-diceroller .ql-editor .ql-align-justify {
  text-align: justify;
}

.prolog-h2-note-overlay__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.prolog-h2-block > h2 {
  margin-top: 0;
}

.prolog-toc__row {
  display: flex;
  align-items: flex-start;
  gap: 0.18rem;
  border-radius: 6px;
}

.prolog-toc__row:hover {
  background: var(--color-outline-toc-row-hover-alt);
}

.prolog-toc__row .prolog-toc__item {
  flex: 1;
  min-width: 0;
}

.prolog-toc-lock,
.prolog-h2-lock {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--color-accent-highlight-gold-warm);
  cursor: pointer;
  border-radius: 4px;
  line-height: 0;
}

.prolog-toc-lock:hover,
.prolog-h2-lock:hover,
.prolog-toc-lock:focus-visible,
.prolog-h2-lock:focus-visible {
  color: var(--color-text-toolbar-hover-strong);
  background: var(--color-outline-border-note-inline);
  outline: none;
}

.prolog-visibility-icon {
  display: block;
}

.prolog-toc-empty {
  margin: 0;
  color: var(--color-text-login-subtle);
  font-size: 0.9rem;
}

@media (max-width: 820px) {
  .prolog-layout {
    grid-template-columns: 1fr;
  }

  .prolog-toc-wrap {
    position: static;
    top: auto;
  }
}

.wys-content {
  text-align: left;
  line-height: 1.5;
  font-family: var(--font-text);
  font-size: 1.02rem;
  color: var(--color-text-body);
}

.wys-content p {
  margin: 0 0 0.9rem;
}

.wys-content h1,
.wys-content h2,
.wys-content h3,
.wys-content h4 {
  font-family: var(--font-heading);
  color: var(--color-text-heading-umber);
  font-weight: 700;
  margin: 1.1rem 0 0.45rem;
  scroll-margin-top: 2.0rem;
}

.wys-content h1 {
  font-size: 1.55rem;
}

.wys-content h2 {
  font-size: 1.3rem;
}

.wys-content h3 {
  font-size: 1.12rem;
}

.wys-content h5,
.wys-content h6 {
  scroll-margin-top: 4.5rem;
}

.wys-content blockquote {
  border-left: 3px solid var(--color-outline-pill-outline);
  margin: 0.5rem 0 1rem;
  padding: 0.2rem 0 0.2rem 0.9rem;
  color: var(--color-text-blockquote-body);
}

.wys-content ul,
.wys-content ol {
  margin: 0 0 0.8rem 1.2rem;
  padding: 0;
}

.wys-content a {
  color: var(--color-text-parchment-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wys-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: 6px;
  box-shadow: 0 3px 14px var(--color-wys-quote-edge);
}

/* In Kapitelkarten: kein Schatten hinter Bildern (optisch ruhiger neben H2) */
.wys-content.prolog-body .prolog-section img {
  box-shadow: none;
}

/* Ausrichtung: Quill setzt Klassen auf dem umgebenden Block (z. B. p) */
.wys-content p.ql-align-left img,
.wys-content h1.ql-align-left img,
.wys-content h2.ql-align-left img,
.wys-content h3.ql-align-left img,
.wys-content h4.ql-align-left img {
  display: block;
  margin: 0.85rem 0 0.85rem 0;
}

.wys-content p.ql-align-center img,
.wys-content h1.ql-align-center img,
.wys-content h2.ql-align-center img,
.wys-content h3.ql-align-center img,
.wys-content h4.ql-align-center img {
  display: block;
  margin: 0.85rem auto;
}

.wys-content p.ql-align-right img,
.wys-content h1.ql-align-right img,
.wys-content h2.ql-align-right img,
.wys-content h3.ql-align-right img,
.wys-content h4.ql-align-right img {
  display: block;
  margin: 0.85rem 0 0.85rem auto;
}

.wys-content p.ql-align-justify img,
.wys-content h1.ql-align-justify img,
.wys-content h2.ql-align-justify img,
.wys-content h3.ql-align-justify img,
.wys-content h4.ql-align-justify img {
  display: block;
  margin: 0.85rem auto;
}

/* Standard-Bild im Editor; Ausrichtung überschreibt darunter per Spezifität */
.quill-skin-diceroller .ql-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.6rem auto;
  border-radius: 6px;
}

.quill-skin-diceroller .ql-editor p.ql-align-left img,
.quill-skin-diceroller .ql-editor p.ql-align-center img,
.quill-skin-diceroller .ql-editor p.ql-align-right img,
.quill-skin-diceroller .ql-editor p.ql-align-justify img,
.quill-skin-diceroller .ql-editor h1.ql-align-left img,
.quill-skin-diceroller .ql-editor h1.ql-align-center img,
.quill-skin-diceroller .ql-editor h1.ql-align-right img,
.quill-skin-diceroller .ql-editor h2.ql-align-left img,
.quill-skin-diceroller .ql-editor h2.ql-align-center img,
.quill-skin-diceroller .ql-editor h2.ql-align-right img,
.quill-skin-diceroller .ql-editor h3.ql-align-left img,
.quill-skin-diceroller .ql-editor h3.ql-align-center img,
.quill-skin-diceroller .ql-editor h3.ql-align-right img,
.quill-skin-diceroller .ql-editor h4.ql-align-left img,
.quill-skin-diceroller .ql-editor h4.ql-align-center img,
.quill-skin-diceroller .ql-editor h4.ql-align-right img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.quill-skin-diceroller .ql-editor p.ql-align-left img,
.quill-skin-diceroller .ql-editor h1.ql-align-left img,
.quill-skin-diceroller .ql-editor h2.ql-align-left img,
.quill-skin-diceroller .ql-editor h3.ql-align-left img,
.quill-skin-diceroller .ql-editor h4.ql-align-left img {
  margin: 0.5rem 0 0.5rem 0;
}

.quill-skin-diceroller .ql-editor p.ql-align-center img,
.quill-skin-diceroller .ql-editor p.ql-align-justify img,
.quill-skin-diceroller .ql-editor h1.ql-align-center img,
.quill-skin-diceroller .ql-editor h1.ql-align-justify img,
.quill-skin-diceroller .ql-editor h2.ql-align-center img,
.quill-skin-diceroller .ql-editor h2.ql-align-justify img,
.quill-skin-diceroller .ql-editor h3.ql-align-center img,
.quill-skin-diceroller .ql-editor h3.ql-align-justify img,
.quill-skin-diceroller .ql-editor h4.ql-align-center img,
.quill-skin-diceroller .ql-editor h4.ql-align-justify img {
  margin: 0.5rem auto;
}

.quill-skin-diceroller .ql-editor p.ql-align-right img,
.quill-skin-diceroller .ql-editor h1.ql-align-right img,
.quill-skin-diceroller .ql-editor h2.ql-align-right img,
.quill-skin-diceroller .ql-editor h3.ql-align-right img,
.quill-skin-diceroller .ql-editor h4.ql-align-right img {
  margin: 0.5rem 0 0.5rem auto;
}

/* Quill: Blockausrichtung (gespeicherte Klassen nach Sanitize) */
.wys-content .ql-align-center {
  text-align: center;
}

.wys-content .ql-align-right {
  text-align: right;
}

.wys-content .ql-align-justify {
  text-align: justify;
}

.quill-skin-diceroller {
  min-height: 12rem;
  background:
    url("/assets/images/simple-old-paper-1-transparent.webp") center / cover no-repeat,
    var(--color-surface-quill-composite-fill);
  border-radius: 14px;
  box-shadow: 0 8px 22px var(--color-focus-ring-brown-inner);
  overflow: visible;
}

.quill-skin-diceroller .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--color-border-quill-toolbar-bottom);
  background: var(--color-surface-quill-toolbar-strip);
  border-radius: 14px 14px 0 0;
}

.quill-skin-diceroller .ql-snow .ql-stroke {
  stroke: var(--color-icon-quill-toolbar);
}

.quill-skin-diceroller .ql-snow .ql-fill {
  stroke: var(--color-icon-quill-toolbar);
  fill: var(--color-icon-quill-toolbar);
}

.quill-skin-diceroller .ql-container.ql-snow {
  border: none;
  min-height: 10rem;
  /* Tooltip (.ql-tooltip) liegt im Container — kein overflow hier, sonst Link-Dialog unsichtbar */
  overflow: visible;
  color: var(--color-text-parchment-body);
  font-family: var(--font-text);
  font-size: 1rem;
  background: transparent;
  border-radius: 0 0 14px 14px;
}

.quill-skin-diceroller .ql-editor {
  min-height: 9rem;
  max-height: max(12rem, calc(100vh - 18rem));
  max-height: max(12rem, calc(100dvh - 18rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--color-text-parchment-body);
}

.quill-skin-diceroller .ql-snow .ql-tooltip {
  z-index: 2600;
}

.quill-skin-diceroller .ql-editor.ql-blank::before {
  color: var(--color-text-placeholder-muted-brown);
  font-style: normal;
}

/* Dropdowns: Lesbar auf Papier */
.quill-skin-diceroller .ql-snow .ql-picker-label {
  color: var(--color-text-parchment-body);
}

.quill-skin-diceroller .ql-snow .ql-picker-label:hover {
  color: var(--color-text-parchment-strong);
}

.quill-skin-diceroller .ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--color-text-parchment-strong);
  border-color: var(--color-border-quill-picker-expanded);
}

.quill-skin-diceroller .ql-snow .ql-picker-options {
  background-color: var(--color-surface-quill-picker-panel);
  border: 1px solid var(--color-outline-toolbar-outline);
  border-radius: 8px;
  box-shadow: 0 10px 28px var(--color-overlay-modal-backdrop);
  padding: 4px 0;
}

.quill-skin-diceroller .ql-snow .ql-picker-item {
  color: var(--color-text-quill-picker-item);
}

.quill-skin-diceroller .ql-snow .ql-picker-item:hover,
.quill-skin-diceroller .ql-snow .ql-picker-item.ql-selected {
  color: var(--color-text-quill-picker-highlight);
  background-color: var(--color-surface-quill-picker-item-hover);
}

.quill-skin-diceroller .ql-snow .ql-picker-item.ql-selected {
  font-weight: 600;
}

/* Ausrichtungs-Picker: Icons im Menü sichtbar */
.quill-skin-diceroller .ql-snow .ql-picker-item svg .ql-stroke {
  stroke: var(--color-icon-quill-picker-stroke);
}

.quill-skin-diceroller .ql-snow .ql-picker-item svg .ql-fill {
  fill: var(--color-icon-quill-picker-stroke);
}

.quill-skin-diceroller .ql-snow .ql-picker-item:hover svg .ql-stroke,
.quill-skin-diceroller .ql-snow .ql-picker-item.ql-selected svg .ql-stroke {
  stroke: var(--color-icon-quill-picker-hover-stroke);
}

.quill-skin-diceroller .ql-snow .ql-picker-item:hover svg .ql-fill,
.quill-skin-diceroller .ql-snow .ql-picker-item.ql-selected svg .ql-fill {
  fill: var(--color-icon-quill-picker-hover-stroke);
}

.prolog-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
  justify-content: flex-start;
}

.prolog-editor-actions .btn {
  width: auto;
  min-width: 6.5rem;
  margin: 0;
}

/* Prolog: Bildauswahl /assets/images */
.prolog-asset-modal {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  box-sizing: border-box;
}

.prolog-asset-modal[hidden] {
  display: none !important;
}

.prolog-asset-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-heavy);
  cursor: pointer;
}

.prolog-asset-modal__card {
  position: relative;
  z-index: 1;
  width: min(48rem, 100%);
  max-height: min(90vh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-outline-ui-outline);
  border-radius: 14px;
  background:
    url("/assets/images/simple-old-paper-1-transparent.webp") center / cover no-repeat,
    var(--color-surface-asset-modal-parchment-overlay);
  box-shadow: 0 20px 50px var(--color-overlay-drawer-backdrop);
  color: var(--color-text-prolog-tile-dark);
  padding: 1rem 1.15rem 0.9rem;
}

.prolog-asset-modal__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-parchment-strong);
  text-align: center;
}

.prolog-asset-modal__hint {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-bg-char-tooltip-dark);
  text-align: center;
}

.prolog-asset-code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--color-code-chip-bg-light);
}

.prolog-asset-modal__err {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--color-accent-danger-deep);
  text-align: center;
}

.prolog-asset-modal__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.prolog-asset-modal__file {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.prolog-asset-modal__file-label {
  width: auto;
  min-width: 10rem;
  margin: 0;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.prolog-asset-modal__status {
  margin: 0.25rem 0 0.4rem;
  min-height: 1.2rem;
  font-size: 0.9rem;
  text-align: center;
  color: var(--color-bg-picker-brown-deep);
}

.prolog-asset-grid {
  flex: 1;
  min-height: 5rem;
  max-height: min(50vh, 20rem);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.55rem;
  padding: 0.25rem 0.1rem 0.5rem;
  border-top: 1px solid var(--color-shadow-feather);
  border-bottom: 1px solid var(--color-shadow-feather);
}

.prolog-asset-grid__empty {
  grid-column: 1 / -1;
  margin: 0.75rem 0.25rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-bg-picker-brown-mid);
}

.prolog-asset-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0.35rem;
  border: 1px solid var(--color-border-asset-tile);
  border-radius: 8px;
  background: var(--color-surface-asset-tile-rest);
  cursor: pointer;
  font: inherit;
  text-align: center;
  color: var(--color-text-prolog-tile-dark);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.prolog-asset-tile:hover,
.prolog-asset-tile:focus-visible {
  outline: none;
  background: var(--color-surface-asset-tile-hover);
  border-color: var(--color-border-note-toolbar-brown-strong);
  box-shadow: 0 0 0 2px var(--color-surface-note-toast-shadow-warm);
}

.prolog-asset-tile img {
  display: block;
  width: 100%;
  max-height: 4.5rem;
  object-fit: contain;
  border-radius: 4px;
  background: var(--color-hint-placeholder-backdrop);
}

.prolog-asset-tile__name {
  display: block;
  margin-top: 0.3rem;
  width: 100%;
  font-size: 0.7rem;
  line-height: 1.2;
  word-break: break-all;
  color: var(--color-bg-picker-brown-deep);
  max-height: 2.4rem;
  overflow: hidden;
}

.prolog-asset-modal__footer {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0 0.15rem;
}

.prolog-asset-modal__footer .btn {
  width: auto;
  min-width: 7rem;
  margin: 0;
}

/* Prolog: Almanach-Verknüpfung */
.prolog-almanach-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin: 0 0 0.65rem;
}

.prolog-almanach-kind-btn {
  margin: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--color-border-asset-tile);
  background: var(--color-surface-asset-tile-rest);
  color: var(--color-text-prolog-tile-dark);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.prolog-almanach-kind-btn:hover,
.prolog-almanach-kind-btn:focus-visible {
  outline: none;
  background: var(--color-surface-asset-tile-hover);
  border-color: var(--color-border-note-toolbar-brown-strong);
  box-shadow: 0 0 0 2px var(--color-surface-note-toast-shadow-warm);
}

.prolog-almanach-kind-btn--active {
  background: var(--color-surface-note-toast-shadow-warm);
  border-color: var(--color-border-note-toolbar-brown-strong);
  font-weight: 600;
}

.prolog-almanach-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.prolog-almanach-filter-label {
  font-size: 0.85rem;
  color: var(--color-bg-picker-brown-deep);
}

.prolog-almanach-filter-input {
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 22rem;
  margin: 0;
}

.prolog-almanach-entry-grid {
  flex: 1;
  min-height: 5rem;
  max-height: min(50vh, 20rem);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.45rem;
  padding: 0.35rem 0.1rem 0.55rem;
  border-top: 1px solid var(--color-shadow-feather);
  border-bottom: 1px solid var(--color-shadow-feather);
}

.ql-toolbar .ql-almanach-link {
  width: auto;
}

.ql-toolbar button.ql-almanach-link svg {
  display: block;
}

.prolog-almanach-entry-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--color-border-asset-tile);
  border-radius: 8px;
  background: var(--color-surface-asset-tile-rest);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--color-text-prolog-tile-dark);
  min-height: 2.75rem;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.prolog-almanach-entry-tile:hover,
.prolog-almanach-entry-tile:focus-visible {
  outline: none;
  background: var(--color-surface-asset-tile-hover);
  border-color: var(--color-border-note-toolbar-brown-strong);
  box-shadow: 0 0 0 2px var(--color-surface-note-toast-shadow-warm);
}

.prolog-almanach-entry-tile__label {
  display: block;
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.35;
  word-break: break-word;
}

.prolog-almanach-entry-grid__empty {
  grid-column: 1 / -1;
  margin: 0.75rem 0.25rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-bg-picker-brown-mid);
}

/* Prolog-Editor: Bildgröße (Schieberegler) */
.prolog-img-resize {
  position: fixed;
  z-index: 2920;
  box-sizing: border-box;
}

.prolog-img-resize[hidden] {
  display: none !important;
}

.prolog-img-resize__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-toolbar-img-inner);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--color-gradient-brown-toolbar-stop-start) 0%, var(--color-gradient-brown-toolbar-stop-end) 100%);
  box-shadow: 0 10px 32px var(--color-overlay-scrim);
  color: var(--color-text-modal-title-soft);
}

.prolog-img-resize__label {
  flex: 1 0 100%;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-text-toolbar-label-strong);
  letter-spacing: 0.02em;
}

.prolog-img-resize__range {
  flex: 1 1 8rem;
  min-width: 6rem;
  max-width: 14rem;
  accent-color: var(--color-accent-slider-accent);
  cursor: pointer;
}

.prolog-img-resize__val {
  min-width: 2.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-list-add-strong);
}

.prolog-img-resize__reset {
  flex: 0 0 auto;
  margin: 0;
  min-width: 5.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
}

/* Charaktersheet */
.form-group {
  margin-bottom: 0.75rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.form-group > .form-label {
  overflow-wrap: break-word;
}

/* Charaktersheet: gleicher Formularrahmen wie Charaktereditor */
.ce-editor-card form.chartsheet-form {
  max-width: 100%;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.chartsheet-grund-attr + .charsheet-h2 {
  margin-top: 1.45rem;
}

.chartsheet-stepper--readonly-level .charsheet-stepper__input {
  cursor: default;
  opacity: 0.95;
}

.ce-editor-card .charsheet-row2--row-labels .form-group .charsheet-stepper--lr {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.ce-editor-card .charsheet-row2--row-labels .form-group .charsheet-stepper--lr .charsheet-stepper__input {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  min-width: 2.25rem;
}

.ce-editor-card .charsheet-attrs--row-labels .form-group .charsheet-stepper--lr {
  flex: unset;
  width: auto;
  max-width: none;
  min-width: 0;
  justify-self: end;
}

.ce-editor-card .charsheet-attrs--row-labels .form-group .charsheet-stepper--lr .charsheet-stepper__input {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  min-width: 2.25rem;
}

/* Volle Viewport-Breite: optische Mitte = Fenstermitte, nicht nur Panel-Inhalt (2-Spalten).
   Der Wrapper liegt breit ÜBER die linke Spalte; ohne pointer-events käme der Klick nicht bei der Liste an. */
.charsheet-class-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0.65rem;
  padding: 0.25rem 0.5rem 0.35rem;
  box-sizing: border-box;
  pointer-events: none;
}

.charsheet-class-logo__img {
  display: block;
  width: min(10.875rem, 92vw);
  height: min(10.875rem, 92vw);
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  margin: 0;
  flex-shrink: 0;
  pointer-events: auto;
  /* Schwarze SVG-Silhouetten auf goldene Metaloptik (var(--color-accent-toolbar-indicator)–var(--color-accent-metal-gold-deep)), Hintergrund bleibt frei */
  filter: saturate(59%) invert(88%) sepia(8%) saturate(434%) hue-rotate(5deg) brightness(1) contrast(0.87)
    drop-shadow(0 0 10px var(--color-outline-soft-dim-gold)) drop-shadow(0 1px 2px var(--color-floating-shadow-strong));
}

.charsheet-status {
  display: none;
  min-height: 1.2rem;
  font-size: 0.9rem;
  color: var(--color-text-char-status);
  margin: 0 0 0.75rem;
}

.charsheet-page--debug .charsheet-status {
  display: block;
}

.charsheet-section {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-outline-border-note-inline);
}

.charsheet-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0.5rem;
}

.charsheet-h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--color-text-heading-umber);
  letter-spacing: 0.04em;
}

.charsheet-stepper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* Nur eigene +/- Buttons rechts; keine Browser-Spinner im Zahlenfeld */
.charsheet-stepper__input {
  margin-bottom: 0;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.charsheet-stepper__input::-webkit-outer-spin-button,
.charsheet-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.charsheet-stepper__actions {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.12rem;
  min-width: 1.85rem;
}

.charsheet-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 1.45rem;
  margin: 0;
  padding: 0 0.2rem;
  border: 1px solid var(--color-border-stepper-rest);
  border-radius: 6px;
  background: var(--color-surface-stepper-btn);
  color: var(--color-text-button-primary);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.charsheet-stepper__btn:hover,
.charsheet-stepper__btn:focus-visible {
  border-color: var(--color-border-stepper-hover-strong);
  background: var(--color-surface-brown-hover-strong);
  color: var(--color-text-toolbar-hover-strong);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-shadow-char-focus-soft);
}

.charsheet-stepper__btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.charsheet-grund-attr {
  display: grid;
  grid-template-columns: minmax(0, min(38rem, 62%)) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.charsheet-grund {
  min-width: 0;
}

.charsheet-attr-block {
  min-width: 0;
  justify-self: end;
  width: min(24rem, 100%);
  max-width: 100%;
  box-sizing: border-box;
}

.charsheet-attr-block .charsheet-h2 {
  margin-top: 0;
}

.charsheet-attr-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.charsheet-attr-head .charsheet-h2 {
  margin-bottom: 0;
}

.charsheet-attr-counter {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text-label-muted);
  min-width: 0;
}

.charsheet-attr-counter__main {
  margin: 0;
  text-align: right;
}

.charsheet-attr-counter__sub {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-counter-muted);
}

.charsheet-attr-counter__emph {
  color: var(--color-text-login-status);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.charsheet-attr-counter__budget,
.charsheet-attr-counter__sub-val {
  font-variant-numeric: tabular-nums;
}

.charsheet-attr-counter__hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-attr-counter-warning);
}

.charsheet-attr-block .charsheet-attrs + .charsheet-attr-counter {
  margin-top: 0.55rem;
}

.charsheet-attr-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--color-outline-section-divider-soft);
}

.charsheet-attr-extra__label {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--color-text-attr-extra-label);
  line-height: 1.35;
}

.charsheet-attr-extra__stepper {
  flex: 0 0 auto;
}

.ce-editor-card .charsheet-attr-extra__stepper .charsheet-stepper__btn {
  flex: 0 1 calc(1.85rem * 1.5);
  min-width: 1.25rem;
  width: auto;
}

.ce-editor-card .charsheet-attr-extra__stepper .charsheet-stepper__input {
  flex: 0 0 3.25rem;
  width: 3.25rem;
  min-width: 2rem;
}

@media (max-width: 960px) {
  .charsheet-grund-attr {
    grid-template-columns: 1fr;
  }

  .charsheet-attr-block {
    justify-self: stretch;
    width: 100%;
  }

  .charsheet-attr-block .charsheet-h2 {
    margin-top: 0.5rem;
  }
}

@supports (container-type: inline-size) {
  @container ce-editor-card (max-width: 52rem) {
    .charsheet-grund-attr {
      grid-template-columns: 1fr 1;
    }

    .charsheet-attr-block {
      justify-self: stretch;
      width: 100%;
      max-width: none;
    }

    .charsheet-attr-block .charsheet-h2 {
      margin-top: 0.5rem;
    }
  }

  @container ce-editor-card (max-width: 36rem) {
    .charsheet-row2.charsheet-row2--row-labels {
      grid-template-columns: 1fr;
    }
  }
}

.charsheet-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}

.charsheet-row2 .form-group {
  min-width: 0;
}

@media (max-width: 640px) {
  .charsheet-row2 {
    grid-template-columns: 1fr;
  }
}

.charsheet-row2--row-labels .form-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0;
  margin-bottom: 0;
  min-width: 0;
}

.charsheet-row2--row-labels .form-group .form-label {
  margin: 0;
  text-align: left;
  line-height: 1.2;
  min-width: 0;
}

.charsheet-row2--row-labels .form-group .charsheet-stepper__input {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  min-width: 0;
}

.charsheet-row2--row-labels .charsheet-stepper--lr {
  min-width: 0;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Level/Leben: gleiche Tastenbreite wie Attribut-Stepper (− / +) */
.charsheet-row2--row-labels .charsheet-stepper--lr .charsheet-stepper__btn {
  box-sizing: border-box;
  flex: 0 0 calc(1.85rem * 1.5);
  width: calc(1.85rem * 1.5);
  min-height: 0;
}

.charsheet-attrs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem 0.8rem;
}

.charsheet-attrs--stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.charsheet-attrs--row-labels .form-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.65rem;
  row-gap: 0;
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.charsheet-attrs--row-labels .form-group .form-label {
  margin: 0;
  text-align: left;
  line-height: 1.2;
  min-width: 0;
}

.charsheet-attrs--row-labels .form-group .charsheet-stepper__input {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  min-width: 0;
}

.charsheet-attrs--row-labels .form-group .charsheet-stepper--lr {
  justify-self: end;
  width: auto;
  max-width: none;
  min-width: 0;
}

.ce-editor-card .form-group.charsheet-notizen .form-label {
  display: block;
  margin-bottom: 0.35rem;
  text-align: left;
}

.ce-editor-card .charsheet-notizen textarea.form-input {
  display: block;
  width: 100%;
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.4;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .charsheet-attrs:not(.charsheet-attrs--stack) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .charsheet-attrs:not(.charsheet-attrs--stack) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.charsheet-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.charsheet-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.charsheet-line__input {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
}

.charsheet-line__remove {
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid var(--color-border-remove-strong);
  border-radius: 6px;
  background: var(--color-surface-remove-row-rest);
  color: var(--color-text-char-name-gradient-end);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 1px var(--color-floating-shadow-strong);
}

.charsheet-line__remove:hover,
.charsheet-line__remove:focus-visible {
  background: var(--color-surface-remove-row-hover);
  color: var(--color-text-remove-hover);
  border-color: var(--color-border-remove-hover-strong);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-shadow-remove-focused-brown);
}

.charsheet-gear-hint {
  margin: -0.2rem 0 0.75rem;
  font-size: 0.875rem;
  opacity: 0.88;
  line-height: 1.45;
}

.charsheet-line__gear-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  position: relative;
}

.charsheet-line--gear .charsheet-line__input {
  flex: 1;
  min-width: 0;
}

.charsheet-line__gear-ac {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  z-index: 50;
  max-height: min(40vh, 16rem);
  overflow: auto;
  padding: 0.25rem 0;
  border-radius: 10px;
  border: 1px solid var(--color-border-modal-warm);
  background: var(--color-surface-modal-solid);
  box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.7);
}

.charsheet-line__gear-ac[hidden] {
  display: none !important;
}

.charsheet-line__gear-ac-status {
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-style: italic;
  opacity: 0.92;
  color: var(--color-text-on-dark-highlight-strong);
}

.charsheet-line__gear-ac-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.75rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.charsheet-line__gear-ac-opt:hover,
.charsheet-line__gear-ac-opt.charsheet-line__gear-ac-opt--active {
  background: var(--color-surface-char-card-hover-soft);
}

.charsheet-line--gear-linked .charsheet-line__input {
  opacity: 0.93;
  cursor: pointer;
}

.charsheet-line--gear-linked .charsheet-line__gear-row {
  cursor: pointer;
}

/* Spieler-Charsheet: feste Almanach-Zeilen (nur Entfernen) */
.charsheet-line--gear.charsheet-line--gear-al-fixed .charsheet-line__input {
  cursor: pointer;
}

.vorgaben-card {
  max-width: 36rem;
}

.vorgaben-fieldset {
  margin: 0 0 1.25rem;
  padding: 0;
  border: none;
}

.vorgaben-fieldset .form-label {
  margin-bottom: 0.35rem;
}

.vorgaben-hint {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  opacity: 0.88;
  line-height: 1.4;
}

.vorgaben-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.vorgaben-row {
  margin: 0;
}

.vorgaben-row--hidden-entry .charsheet-line__input {
  opacity: 0.72;
}

.vorgaben-vis-btn {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.35rem;
  box-sizing: border-box;
  border: 1px solid var(--color-outline-ui-outline);
  border-radius: 10px;
  background: var(--color-surface-chip-icon);
  color: var(--color-bg-note-inline-soft);
  cursor: pointer;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
}

.vorgaben-logo-btn {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.2rem;
  box-sizing: border-box;
  border: 1px solid var(--color-outline-ui-outline);
  border-radius: 10px;
  background: var(--color-surface-chip-icon);
  color: var(--color-bg-note-inline-soft);
  cursor: pointer;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
}

.vorgaben-logo-btn:hover,
.vorgaben-logo-btn:focus-visible {
  outline: none;
  filter: brightness(1.08);
  border-color: var(--color-outline-stepper-strong);
  box-shadow: 0 0 0 2px var(--color-shadow-remove-focused-strong);
}

.vorgaben-logo-btn__glyph {
  width: 100%;
  height: 100%;
  background: var(--color-bg-note-inline-soft);
  -webkit-mask-image: var(--vorgaben-logo-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--vorgaben-logo-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.vorgaben-logo-btn__placeholder {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

.vorgaben-vis-btn:hover,
.vorgaben-vis-btn:focus-visible {
  outline: none;
  filter: brightness(1.08);
  border-color: var(--color-outline-stepper-strong);
  box-shadow: 0 0 0 2px var(--color-shadow-remove-focused-strong);
}

.vorgaben-vis-btn .prolog-visibility-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

.vorgaben-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.al-inv-template-hint {
  margin: -0.1rem 0 0.4rem;
  font-size: 0.875rem;
  opacity: 0.88;
  line-height: 1.4;
}

.al-inv-template-hint--small {
  margin-top: 0.35rem;
  font-size: 0.8rem;
}

.btn-list-add {
  margin-top: 0.4rem;
  padding: 0.42rem 0.72rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-list-add-strong);
  background: var(--color-surface-list-add-rest);
  border: 1px solid var(--color-gradient-char-name-end-rich);
  border-radius: 6px;
  cursor: pointer;
  text-shadow: 0 1px 1px var(--color-floating-shadow-strong);
}

.btn-list-add:hover,
.btn-list-add:focus-visible {
  color: var(--color-text-toolbar-hover-strong);
  border-color: var(--color-border-list-add-hover-strong);
  background: var(--color-surface-list-add-hover);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-surface-note-toolbar-muted);
}

.charsheet-sql-debug {
  display: none;
  margin-top: 1rem;
  border: 1px solid var(--color-border-brown-debug-hairline);
  border-radius: 8px;
  background: var(--color-surface-sql-debug);
  padding: 0.6rem;
}

.charsheet-page--debug .charsheet-sql-debug:not([hidden]) {
  display: block;
}

.charsheet-sql-debug__title {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--color-accent-highlight-peach-soft);
}

.charsheet-sql-debug__code {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-bg-note-toolbar-highlight);
}

.charsheet-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--color-overlay-scrim);
}

.charsheet-confirm-backdrop[hidden] {
  display: none !important;
}

/* Ungespeichert-Hinweis: über Hauptmenü/Kopfzeile (.app-main erzeugt niedrigen Stapelkontext) */
.charsheet-confirm-backdrop.charsheet-confirm-backdrop--dirty-leave-layer {
  z-index: 1200;
}

/* Prolog: Freigabe-Dialog ueber Kapitel-Modals (Bilder, Groessenregler) */
.prolog-publish-confirm {
  z-index: 2700;
}

.charsheet-confirm-card {
  width: min(420px, 100%);
  border: 1px solid var(--color-border-modal-warm);
  border-radius: 14px;
  background: var(--color-surface-modal-solid);
  box-shadow: 0 14px 35px var(--color-overlay-scrim);
  padding: 1rem;
  color: var(--color-text-modal-title-soft);
}

.charsheet-confirm-text {
  margin: 0 0 0.85rem;
  font-size: 1rem;
}

.charsheet-confirm-detail {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-bg-note-editor-shell);
}

.charsheet-confirm-error {
  color: var(--color-text-danger-soft);
}

.btn-ce-deleteConfirm {
  background: linear-gradient(180deg, var(--color-btn-danger-600) 0%, var(--color-btn-danger-700) 100%);
  border-color: var(--color-outline-coral-muted-strong);
  color: var(--color-bg-danger-badge-soft);
}

.btn-ce-deleteConfirm:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn-ce-deleteConfirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ce-delete-confirm__help-name {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  background: var(--color-floating-shadow-strong);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.95rem;
  color: var(--color-text-heading-bright);
}

.charsheet-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.charsheet-confirm-actions .btn {
  width: auto;
  min-width: 7rem;
  margin: 0;
}

/* Charaktereditor: Liste links neben der Formular-admin-card */
.ce-editor-shell {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
  margin: 1rem auto 0;
  width: 100%;
  max-width: min(calc(900px + 290px + 1rem), 100%);
}

.ce-editor-shell > .admin-card.ce-editor-main {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  width: auto;
  max-width: 900px;
}

.ce-editor-shell > .ce-editor-card {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  width: auto;
  max-width: 900px;
}

.ce-editor-shell > .ce-editor-sidebar {
  flex: 0 0 min(370px, 100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-self: stretch;
}

.ce-editor-shell > .ce-editor-sidebar > .ce-list-card {
  flex: 0 1 auto;
  min-height: 0;
}

/* Unter ~1100px: Liste über dem Formular — bei ca. 1000px Breite genug Platz für Grunddaten | Attribute */
@media (max-width: 1100px) {
  .ce-editor-shell {
    flex-direction: column;
    align-items: stretch;
    max-width: min(900px, 100%);
  }

  .ce-editor-shell > .ce-editor-sidebar {
    flex: 0 0 auto;
    width: 100%;
  }

  .ce-editor-shell > .ce-editor-sidebar > .ce-list-card {
    flex: 0 0 auto;
    width: 100%;
    max-height: min(42vh, 20rem);
  }

  .ce-editor-shell > .ce-editor-sidebar > .ce-list-card--editor {
    max-height: none;
  }

  .ce-editor-shell > .admin-card.ce-editor-main {
    max-width: none;
    width: 100%;
  }

  .ce-editor-shell > .ce-editor-card {
    max-width: none;
    width: 100%;
  }

  .almanach-shell > .al-detail-stack {
    max-width: none;
  }
}

.ce-list-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-outline-card-outline-soft);
  border-radius: 12px;
  background: var(--color-surface-list-inset);
  padding: 0.7rem;
  max-height: 78vh;
  min-height: 0;
  overflow: hidden;
}

.ce-list-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-heading-bright);
}

.ce-list-filter {
  flex-shrink: 0;
  margin: 0 0 0.45rem;
}

.ce-list-card--editor .ce-list-filter .form-label {
  margin-top: 0;
}

.ce-list-card--editor .ce-list-filter .ce-preset-combobox {
  display: block;
  position: relative;
  margin-bottom: 0;
  min-width: 0;
  z-index: 1;
}

.ce-list-card--editor .ce-list-filter .ce-preset-combobox:focus-within {
  z-index: 80;
}

.ce-list-card--editor:has(.ce-list-filter .ce-preset-combobox:focus-within) {
  overflow: visible;
}

.ce-list-card--editor {
  display: block;
  max-height: none;
  overflow: visible;
}

.ce-list-card--editor > .ce-char-list {
  flex: none;
  min-height: 0;
  overflow: visible;
  margin-right: 0;
  padding-right: 0;
}

.ce-list-foot {
  flex-shrink: 0;
  margin-top: 0.55rem;
  padding-top: 0;
  border-top: none;
}

.ce-list-foot .btn {
  width: 100%;
  margin-top: 0;
}

/* Charaktersheet-Sidebar (nur Button oberhalb der Liste) */
.ce-list-toolbar {
  flex-shrink: 0;
  margin-bottom: 0.55rem;
}

.ce-list-toolbar .btn {
  width: 100%;
  margin: 0;
}

.ce-field-lock-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.ce-field-lock-wrap .ce-preset-combobox {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  z-index: 1;
  display: block;
  position: relative;
}

.ce-field-lock-wrap .ce-preset-combobox:focus-within {
  z-index: 60;
}

.chartsheet-row2 .form-group:has(.ce-preset-combobox:focus-within),
.ce-editor-card:has(.ce-preset-combobox:focus-within) {
  overflow: visible;
}

.ce-preset-combobox .ce-preset-combobox__input {
  display: block;
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}

.ce-preset-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ce-field-lock-wrap__select {
  flex: 1 1 auto;
  min-width: 0;
}

.ce-field-lock-wrap .ce-field-lock-wrap__select.form-input {
  margin-bottom: 0;
  height: auto;
  min-height: 0;
}

.ce-field-lock-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-outline-ui-outline-soft);
  border-radius: 10px;
  background: var(--color-field-lock-muted);
  color: var(--color-shadow-focus-gold-soft);
  cursor: pointer;
  line-height: 0;
  box-sizing: border-box;
}

.ce-field-lock-btn:hover,
.ce-field-lock-btn:focus-visible {
  color: var(--color-text-on-dark-highlight-strong);
  border-color: var(--color-outline-quote-outline);
  outline: none;
}

.ce-field-lock-btn[aria-pressed="true"] {
  color: var(--color-text-link-accent);
  border-color: var(--color-outline-input-focus-outline);
  background: var(--color-surface-lock-pressed);
}

.ce-field-lock-btn svg,
.ce-field-lock-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.ce-char-item__line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.ce-char-item__line .ce-char-item__name {
  min-width: 0;
}

.ce-char-item__lock {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.ce-char-item__lock-icon {
  display: block;
}

.ce-readonly-flag {
  margin-top: 0.35rem;
}

.ce-readonly-flag__label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  overflow-wrap: break-word;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.42;
}

.ce-readonly-flag__chk {
  margin-top: 0.26rem;
  flex-shrink: 0;
}

.ce-world-select {
  min-height: 8.5rem;
  padding: 0.35rem 0.5rem;
}

.ce-world-select-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--muted-fg, var(--color-text-muted-neutral));
}

.charsheet-worlds-line__text {
  margin: 0.2rem 0 0;
  line-height: 1.45;
  color: var(--muted-fg, var(--color-text-muted-neutral));
}



.ce-list-card > .ce-char-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-right: -0.15rem;
  padding-right: 0.15rem;
}

.ce-char-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ce-char-item {
  margin: 0;
}

.ce-char-item__row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.ce-char-item__btn.ce-char-item__btn--grow {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.ce-char-item__delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.5rem;
  margin: 0;
  padding: 0.4rem;
  border: 2px solid var(--color-outline-danger-soft);
  border-radius: 10px;
  background: var(--color-surface-danger-delete-rest);
  color: var(--color-text-sword);
  cursor: pointer;
  font: inherit;
  line-height: 0;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.ce-char-item__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.5rem;
  margin: 0;
  padding: 0.4rem;
  border: 2px solid var(--color-outline-copy-soft);
  border-radius: 10px;
  background: var(--color-surface-copy-btn-rest);
  color: var(--color-accent-editor-tag-blue-soft);
  cursor: pointer;
  font: inherit;
  line-height: 0;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.ce-char-item__copy:hover,
.ce-char-item__copy:focus-visible {
  outline: none;
  border-color: var(--color-outline-copy-hover-strong);
  background: var(--color-surface-copy-btn-hover);
  color: var(--color-accent-tag-blue-shell);
}

.ce-char-item__delete:hover,
.ce-char-item__delete:focus-visible {
  outline: none;
  border-color: var(--color-outline-danger-strong);
  background: var(--color-surface-danger-delete-hover);
  color: var(--color-text-remove-hover);
}

.ce-char-delete__icon {
  display: block;
}

.ce-char-copy__icon {
  display: block;
}

.ce-char-item__btn {
  width: 100%;
  border: 2px solid var(--color-outline-char-card-soft);
  background: var(--color-surface-char-card-btn-rest);
  color: var(--color-text-heading-bright);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: 0.2rem;
}

.ce-char-item__btn:hover,
.ce-char-item__btn:focus-visible {
  outline: none;
  border-color: var(--color-outline-charsheet-feather-outline);
  background: var(--color-surface-char-card-hover-soft);
}

.ce-char-item.is-active > .ce-char-item__btn,
.ce-char-item.is-active > .ce-char-item__row > .ce-char-item__btn,
.ce-char-item.is-active > .al-place-tree-row > .ce-char-item__btn {
  border-color: var(--color-outline-char-item-selected-outline);
  background: var(--color-surface-char-card-selected);
}

/* Orte-Baum: nur der gewählte Knoten stark; hierarchisch darunter schwächer */
.al-place-tree-node.ce-char-item.is-active > .al-place-tree-row > .ce-char-item__btn {
  border-color: var(--color-outline-place-tree-active-strong);
  background: var(--color-surface-place-tree-active-strong);
  color: var(--color-text-heading-bright);
  box-shadow: 0 0 0 1px var(--color-outline-scrollbar-track-subtle);
}

.al-place-tree-node.ce-char-item.is-active .al-place-tree-children .ce-char-item__btn {
  opacity: 0.92;
  border-color: var(--color-outline-place-tree-soft);
  background: var(--color-surface-place-tree-descendant);
  color: var(--color-surface-read-toolbar-shell);
  font-weight: 500;
}

.al-place-tree-node.ce-char-item.is-active .al-place-tree-children .ce-char-item__name {
  font-weight: 600;
  color: var(--color-surface-read-toolbar-shell-strong);
}

.al-place-tree-node.ce-char-item.is-active .al-place-tree-children .al-draft-tag {
  color: var(--color-bg-note-toolbar-shell);
}

.al-place-tree-node.ce-char-item.is-active .al-place-tree-children .ce-char-item__btn:hover,
.al-place-tree-node.ce-char-item.is-active .al-place-tree-children .ce-char-item__btn:focus-visible {
  outline: none;
  opacity: 1;
  border-color: var(--color-outline-toolbar-outline);
  background: var(--color-surface-char-placeholder-hover);
  color: var(--color-bg-note-toolbar-shell-alt);
}

.al-place-tree-node.ce-char-item.is-active .al-place-tree-children {
  border-left-color: var(--color-outline-border-note-soft);
}

.ce-char-item__name {
  font-weight: 700;
  color: var(--color-text-heading-bright);
}

.ce-char-item__meta {
  color: var(--color-text-admin-table-cell);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.ce-char-item__btn--monster {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.ce-char-item__race-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.ce-char-item__race-logo {
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
}

.al-monster-race-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.al-monster-race-logo {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

.al-monster-race-select {
  flex: 1 1 auto;
  min-width: 0;
}

.ce-char-item--empty {
  color: var(--color-bg-note-toolbar-strong);
  font-size: 1rem;
  line-height: 1.45;
  padding: 0.45rem 0.35rem;
}

.ce-editor-card {
  border: 1px solid var(--color-outline-card-outline-soft);
  border-radius: 12px;
  background: var(--color-surface-sheet-muted);
  padding: 0.75rem;
  container-type: inline-size;
  container-name: ce-editor-card;
  min-width: 0;
  overflow-x: clip;
}

.ce-editor-card .charsheet-attrs--row-labels .form-group .form-label {
  text-align: left;
}

.ce-editor-card textarea.form-input {
  min-height: 5.5rem;
  resize: vertical;
}

/* Charaktereditor: numerische Stepper als − | Feld | + ; Tasten 50 % breiter als frühere Spalte (1.85rem) */
.ce-editor-card .charsheet-stepper--lr {
  align-items: stretch;
}

.ce-editor-card .charsheet-stepper--lr .charsheet-stepper__btn {
  box-sizing: border-box;
  flex: 0 0 calc(1.85rem * 1.5);
  width: calc(1.85rem * 1.5);
  min-height: 0;
}

/* Almanach */
.almanach-sidebar {
  min-width: 0;
}

.almanach-sidebar .ce-list-card {
  overflow-x: hidden;
  overflow-y: auto;
}

.almanach-shell > .al-detail-stack {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.al-read-card,
.al-edit-card {
  width: 100%;
  max-width: 900px;
  margin: 0;
  min-height: 0;
  /* Toolbar liegt absolut rechts; hidden/clip verbirgt den rechten Ende (z. B. Augen-Symbol) */
  overflow-x: visible;
}

/* Lesekarte & Bearbeitungskarte: Toolbar absolut rechts oben (Innenecke nach .ce-editor-card-Padding) */
.al-read-card,
.al-edit-card {
  position: relative;
}

/* display:flex wuerde sonst [hidden] auf den Karten ignorieren */
.al-read-card[hidden],
.al-edit-card[hidden] {
  display: none;
}

.al-list-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  min-width: 0;
}

.al-list-head .ce-list-title {
  margin: 0;
  font-size: 1.1rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: break-word;
  text-align: left;
  align-self: center;
  line-height: 1.25;
  hyphens: auto;
}

/* Nicht .btn { width:100% }: sonst Quetscht die Überschrift auf eine Nullbreite */
.al-btn-new {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  margin-top: 0;
  min-width: 4rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.88rem;
}

/* display:inline-block von .btn wuerde sonst [hidden] ignorieren */
.al-btn-new[hidden] {
  display: none;
}

.al-list-search {
  margin: 0 0 0.45rem;
}

.al-list-search__input {
  margin: 0;
}

/* Gegenstände: Typ-Filter unter der Listenüberschrift */
.al-item-filter-bar {
  margin: 0 0 0.45rem;
  min-width: 0;
}

.al-item-filter-bar[hidden] {
  display: none !important;
}

.al-item-filter-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Wie .ce-char-item__btn in der Almanach-Sidebar (dunkles Inset, helle Schrift) */
.almanach-sidebar .al-item-filter-btn {
  margin: 0;
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  border: 2px solid var(--color-outline-char-card-soft);
  background: var(--color-surface-char-card-btn-rest);
  color: var(--color-text-heading-bright);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.25;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.almanach-sidebar .al-item-filter-btn:hover,
.almanach-sidebar .al-item-filter-btn:focus-visible {
  outline: none;
  border-color: var(--color-outline-charsheet-feather-outline);
  background: var(--color-surface-char-card-hover-soft);
  color: var(--color-text-heading-bright);
}

.almanach-sidebar .al-item-filter-btn--active {
  border-color: var(--color-outline-charsheet-feather-outline);
  background: var(--color-surface-char-card-selected);
  font-weight: 600;
  color: var(--color-text-heading-bright);
}

.al-entry-list {
  flex: 1 1 auto;
  min-height: 4rem;
  min-width: 0;
}

/* Gegenstände: Gruppenköpfe nach Typ */
.al-entry-list.al-entry-list--items-by-type .al-item-type-heading {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.4rem 0.2rem;
}

.al-entry-list.al-entry-list--items-by-type .al-item-type-heading:first-child {
  padding-top: 0.1rem;
}

.al-entry-list.al-entry-list--items-by-type .al-item-type-heading__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-highlight-strong);
  opacity: 1;
}

.al-entry-list.al-entry-list--items-by-type .al-item-type-heading + .ce-char-item {
  margin-top: 0;
}

/* Orte: Hierarchie über „Weitere Orte“ (parent → child) */
.al-place-tree-root {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.al-place-tree-children {
  list-style: none;
  margin: 0.3rem 0 0.1rem 0;
  padding: 0 0 0 0.5rem;
  border-left: 1px solid var(--color-outline-pill-outline-muted);
}

.al-place-tree-node {
  margin: 0;
  padding: 0;
  list-style: none;
}

.al-place-tree-row {
  min-width: 0;
  margin-bottom: 0.35rem;
}

.al-place-tree-btn {
  width: 100%;
  max-width: 100%;
}

.almanach-sidebar .ce-char-list.al-place-tree-root .ce-char-item--empty {
  list-style: none;
}

.almanach-sidebar .ce-char-item__btn {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.almanach-sidebar .ce-char-item__name {
  min-width: 0;
  overflow-wrap: break-word;
}

.al-draft-tag {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-bg-note-toolbar-shell);
  margin-left: 0.25rem;
}

.al-read-head {
  margin-bottom: 0.75rem;
  min-height: 0;
}

.al-read-head:has(#alReadToolbar > button:only-child) {
  padding-right: 3.35rem;
}

.al-read-head:has(#alReadToolbar > button:nth-child(2):last-child) {
  padding-right: 6rem;
}

.al-read-head:has(#alReadToolbar > button:nth-child(3)) {
  padding-right: 8.35rem;
}

.al-read-head__main {
  min-width: 0;
}

/* Icon-Leiste: Ecke deckungsgleich mit rechtem oberen Innenrand der Lesekarte (.al-read-card) */
.al-read-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--color-surface-toolbar-muted);
  border: 1px solid var(--color-border-stepper-rest);
  border-radius: 0 10px;
  box-shadow: 0 2px 8px var(--color-floating-shadow-strong);
  overflow: hidden;
}

.al-read-toolbar > button:not(:last-child) {
  border-right: 1px solid var(--color-border-toolbar-split-soft);
}

.al-read-toolbar .al-read-note-btn,
.al-read-toolbar .al-read-edit-btn,
.al-read-toolbar .al-read-vis-btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.35rem;
  box-sizing: border-box;
  margin: 1px;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-toolbar-tab-rest);
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
}

.al-read-toolbar .al-read-note-btn:hover,
.al-read-toolbar .al-read-note-btn:focus-visible,
.al-read-toolbar .al-read-edit-btn:hover,
.al-read-toolbar .al-read-edit-btn:focus-visible,
.al-read-toolbar .al-read-vis-btn:hover,
.al-read-toolbar .al-read-vis-btn:focus-visible {
  color: var(--color-text-toolbar-hover-strong);
  background: var(--color-surface-brown-hover-strong);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-shadow-char-remove-soft-alt);
}

.al-read-toolbar .al-read-note-btn--has {
  position: relative;
}

.al-read-toolbar .al-read-note-btn--has::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-toolbar-indicator);
  box-shadow: 0 0 0 1px var(--color-surface-stepper-btn-hover);
}

.al-read-toolbar .prolog-visibility-icon,
.al-read-toolbar .prolog-note-icon,
.al-read-toolbar .al-read-edit-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

.al-read-name {
  text-align: left;
  margin: 0 0 0.35rem;
}

.al-read-meta {
  margin: 0;
  color: var(--color-bg-note-toolbar-shell);
  font-size: 0.98rem;
  line-height: 1.45;
}

/* Bearbeitungskarte: Symbolleiste wie alReadToolbar oben rechts */
.al-edit-head {
  margin-bottom: 0.75rem;
  min-height: 2.5rem;
}

.al-read-toolbar .al-edit-back-btn,
.al-read-toolbar .al-edit-save-btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.35rem;
  box-sizing: border-box;
  margin: 1px;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-toolbar-tab-rest);
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  font: inherit;
}

.al-read-toolbar .al-edit-delete-btn {
  width: 2.5rem;
  min-height: 2.5rem;
  height: auto;
  padding: 0.35rem;
  box-sizing: border-box;
  margin: 0;
  align-self: stretch;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-logout-rest);
  color: var(--color-text-sword);
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  font: inherit;
}

.al-read-toolbar .al-edit-back-btn:hover,
.al-read-toolbar .al-edit-back-btn:focus-visible,
.al-read-toolbar .al-edit-save-btn:hover,
.al-read-toolbar .al-edit-save-btn:focus-visible {
  color: var(--color-text-toolbar-hover-strong);
  background: var(--color-surface-brown-hover-strong);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-shadow-char-remove-soft-alt);
}

.al-read-toolbar .al-edit-delete-btn:hover,
.al-read-toolbar .al-edit-delete-btn:focus-visible {
  outline: none;
  background: var(--color-surface-logout-hover);
  border-color: var(--color-outline-danger-strong-read);
  box-shadow: 0 0 0 2px var(--color-shadow-note-toolbar-warm);
  color: var(--color-text-sword);
}

.al-read-toolbar .al-edit-back-icon,
.al-read-toolbar .al-edit-save-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  display: block;
}

.al-read-toolbar .al-edit-delete-cross-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  display: block;
}

.al-read-image-wrap {
  margin: 0 auto 1rem;
  text-align: center;
}

.al-read-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--color-outline-pill-outline-muted);
}

.al-read-body {
  text-align: left;
}

.al-read-subh {
  text-align: left;
  margin: 1.25rem 0 0.5rem;
  font-size: 1.15rem;
}

.al-read-links {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-outline-scrollbar-track-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.98rem;
}

.al-link-pill {
  display: inline-block;
  margin: 0.15rem 0.35rem 0.15rem 0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-outline-pill-outline);
  background: var(--color-surface-pill-muted-deep);
  color: var(--color-bg-toggle-strong);
  font: inherit;
  cursor: pointer;
}

.al-link-pill:hover,
.al-link-pill:focus-visible {
  outline: none;
  border-color: var(--color-outline-interactive-strong);
  background: var(--color-surface-link-pill-hover);
}

.al-char-pill {
  display: inline-block;
  margin: 0.15rem 0.35rem 0.15rem 0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-outline-ui-outline-soft);
  background: var(--color-surface-pill-muted);
  color: var(--color-bg-toggle-strong);
  font: inherit;
  cursor: default;
}

a.al-char-pill--link {
  text-decoration: none;
  color: var(--color-bg-toggle-strong);
  cursor: pointer;
}

a.al-char-pill--link:hover,
a.al-char-pill--link:focus-visible {
  outline: none;
  border-color: var(--color-outline-interactive-strong);
  background: var(--color-surface-link-pill-hover);
}

.al-link-h {
  font-size: 1.05rem;
  margin: 1rem 0 0.5rem;
  text-align: left;
}

.al-link-select {
  min-height: 6rem;
  padding: 0.35rem;
}

.al-image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: stretch;
}

.al-image-row .form-input {
  flex: 1 1 12rem;
  min-width: 0;
}

.al-btn-picker {
  flex: 0 0 auto;
  margin: 0;
}

.al-published-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.al-quill-host {
  min-height: 12rem;
}

.al-npc-types-fieldset {
  border: 1px solid var(--color-outline-notice-strip-soft);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  margin: 0 0 0.75rem;
}

.al-npc-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
}

.al-npc-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text-body);
}

.al-npc-extra-label {
  margin-top: 0.25rem;
}

.al-item-attr-hint {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--color-text-muted, #a89880);
  line-height: 1.35;
}

.al-item-attrs-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.al-item-attr-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(5rem, 8rem) auto;
  gap: 0.45rem;
  align-items: center;
}

.al-item-attr-row--free {
  grid-template-columns: 1fr auto;
}

.al-item-attr-row .al-item-attr-remove {
  padding: 0.25rem 0.45rem;
  min-width: 2.25rem;
  font-size: 1.1rem;
  line-height: 1;
}

.al-item-attr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.al-read-item-attrs {
  list-style: none;
  margin: 0 0 0.85rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
}

.al-read-item-attr {
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-surface-pill-muted, rgba(255, 200, 120, 0.12));
  border: 1px solid var(--color-outline-pill-outline-muted, rgba(255, 200, 120, 0.28));
  font-size: 0.92rem;
}

.al-read-item-attr--free {
  font-style: italic;
}

.al-read-item-attr-name {
  font-weight: 600;
}

@media (max-width: 520px) {
  .al-item-attr-row {
    grid-template-columns: 1fr;
  }
  .al-item-attr-row--free {
    grid-template-columns: 1fr;
  }
  .al-item-attr-row .al-item-attr-remove {
    justify-self: start;
  }
}

/* —— YouTube-Audio-Dock (App-Hülle) —— */
:root {
  --yt-audio-dock-h: 11.25rem;
  --yt-audio-dock-h-collapsed: 2.75rem;
}

.app-page--yt-audio {
  padding-bottom: var(--yt-audio-dock-h);
}

.app-page--yt-audio:has(.yt-audio-dock--collapsed) {
  padding-bottom: var(--yt-audio-dock-h-collapsed);
}

.yt-audio-dock {
  position: fixed;
  z-index: 120;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.yt-audio-dock:not([hidden]) {
  pointer-events: auto;
}

.yt-audio-dock__inner {
  margin: 0 auto;
  max-width: 42rem;
  border-radius: 0.65rem 0.65rem 0 0;
  border-bottom: none;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  padding: 0.65rem 1rem 0.85rem;
}

.yt-audio-dock--collapsed .yt-audio-dock__inner {
  padding-bottom: 0.5rem;
}

.yt-audio-dock__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  min-width: 0;
  align-items: baseline;
}

.yt-audio-dock--collapsed .yt-audio-dock__head {
  margin-bottom: 0;
}

.yt-audio-dock__title {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary, #f2e6d8);
}

.yt-audio-dock__collapse {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.15rem 1.75rem 0.15rem 0.45rem;
  line-height: 1.2;
}

.yt-audio-dock__collapse-status {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text-muted, rgba(242, 230, 216, 0.78));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yt-audio-dock__collapse--err .yt-audio-dock__collapse-status {
  color: var(--color-text-settings-error, #f08080);
}

.yt-audio-dock__collapse-icon {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
}

.yt-audio-dock__entry-row {
  --yt-audio-control-h: 2.35rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.yt-audio-dock__entry-row .btn.yt-audio-dock__icon-btn {
  width: auto;
  margin: 0;
  align-self: center;
}

.yt-audio-dock__load-btn {
  flex-shrink: 0;
  padding: 0;
  min-width: var(--yt-audio-control-h);
  max-width: var(--yt-audio-control-h);
}

.yt-audio-dock__now-playing {
  width: 100%;
  height: var(--yt-audio-control-h);
  min-height: var(--yt-audio-control-h);
  margin: 0;
  align-self: center;
  padding: 0 0.65rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-input, rgba(255, 200, 120, 0.22));
  border-radius: var(--radius-input, 6px);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--color-text-primary, #f2e6d8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yt-audio-dock__now-playing--empty {
  color: var(--color-text-muted, rgba(242, 230, 216, 0.55));
  font-style: italic;
}

.yt-audio-dock__url-dialog-card {
  max-width: min(28rem, calc(100vw - 2rem));
}

.yt-audio-dock__url-dialog-input {
  width: 100%;
  margin: 0.35rem 0 0.85rem;
  box-sizing: border-box;
}

.yt-audio-dock__controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  height: var(--yt-audio-control-h);
  margin-bottom: 0;
}

.yt-audio-dock__controls .btn.yt-audio-dock__icon-btn {
  padding: 0 0.55rem;
}

.yt-audio-dock__icon-btn {
  min-width: var(--yt-audio-control-h);
  height: var(--yt-audio-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.55rem;
  box-sizing: border-box;
}

.yt-audio-dock__btn-icon {
  display: block;
  width: 1rem;
  height: 1rem;
}

.yt-audio-dock__playback-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.yt-audio-dock__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.yt-audio-dock__seek {
  flex: 1;
  min-width: 0;
  accent-color: var(--color-accent, #c9a227);
  cursor: pointer;
}

.yt-audio-dock__seek:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.yt-audio-dock__time {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, rgba(242, 230, 216, 0.72));
  min-width: 5.75rem;
  text-align: right;
}

.yt-audio-dock__volume {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.yt-audio-dock__volume-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, rgba(242, 230, 216, 0.72));
  cursor: pointer;
  font: inherit;
  line-height: 0;
}

.yt-audio-dock__volume-range {
  flex: 1;
  min-width: 0;
  accent-color: var(--color-accent, #c9a227);
  cursor: pointer;
}

.yt-audio-dock__host {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.audio-player-page-card {
  max-width: 36rem;
  margin: 0 auto;
}

.audio-player-page-lede {
  margin-top: 0.5rem;
}

.audio-player-page-hint {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-text-muted, rgba(242, 230, 216, 0.78));
}

.audio-player-page-hint--small {
  font-size: 0.88rem;
  margin-top: 0.5rem;
}

@media (max-width: 520px) {
  :root {
    --yt-audio-dock-h: 12rem;
  }
  .yt-audio-dock__entry-row {
    gap: 0.35rem;
  }
  .yt-audio-dock__icon-btn {
    min-width: var(--yt-audio-control-h);
    padding: 0 0.45rem;
  }
  .yt-audio-dock__playback-row {
    gap: 0.45rem;
  }
  .yt-audio-dock__time {
    min-width: 5.25rem;
    font-size: 0.78rem;
  }
}