/* ============================================================
   SAVENDA — VERWALTUNG
   Design "Brandung" · Sturmküste & Messing
   Das Küstengemälde bleibt klar sichtbar; darüber liegen warme,
   halbtransparente Tafeln in Ocker-Braun mit Messingrahmen,
   großzügig gerundet. Pfirsich-goldene Schrift, Pill-Buttons im
   Dunkelgrün des Wappens.
   Bühne: static/background/kueste.webp (eigenes Gemälde)
   Schriften: Brygada 1918 (Display) · Figtree (Text), lokal in
   vendor/fonts/fonts-brandung.css
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* RGB-Hilfstokens für transparente Mischungen */
  --accent-rgb: 201, 158, 96;    /* Messing          */
  --shade-rgb:  38, 26, 11;      /* tiefes Erdbraun  */
  --shade2-rgb: 108, 80, 42;     /* Ocker der Tafeln */
  --on-accent:  #ffd391;

  /* Bühne */
  --stage: #2a2014;
  --stage-image: url("/verwaltung/static/background/kueste.webp");
  --stage-pos: center 55%;
  --stage-veil-top: rgba(40, 28, 12, 0.10);
  --stage-veil-mid: rgba(40, 28, 12, 0.04);
  --stage-veil-bot: rgba(30, 20, 8, 0.30);

  /* Messing & Pfirsich */
  --gold-primary:   #c99e60;   /* Messingrahmen        */
  --gold-secondary: #b88b4c;
  --gold-dark:      #86622e;   /* gedämpftes Messing   */
  --gold-bright:    #ffd391;   /* Pfirsich-Gold, Titel */
  --gold-line:      rgba(201, 158, 96, 0.55);
  --gold-line-soft: rgba(201, 158, 96, 0.28);

  /* Wappen-Grün (Buttons) */
  --btn-green:        #1a3a2f;
  --btn-green-hover:  #244b3e;
  --btn-green-active: #2f5d4e;
  --green-rgb:        26, 58, 47;
  --green-band:       rgba(26, 58, 47, 0.72);   /* Kopfbänder, Tabellenköpfe */
  --green-tint:       rgba(26, 58, 47, 0.30);   /* Hover, leichte Flächen    */
  --green-light:      #6fa898;                  /* Füllungen, Fortschritt    */
  --seagreen:         #1d4a3e;
  --crest-color:      #245a4b;

  /* Statusfarben, auf die warme Palette abgestimmt */
  --ok:     #8cc79a;
  --ok-bg:  #3d6a4a;
  --warn:   #f0c36a;
  --danger: #e8907c;
  --danger-bg: #9a3f30;
  --info:   #8fc0b2;
  --info-bg: #4f8a7b;

  /* Charakter-Stat-Farben */
  --color-level:  #8fd88f;
  --color-exp:    #f3e6cc;
  --color-gold:   #ffd391;
  --color-credit: #a9d2ea;
  --color-coins:  #d9d2c4;

  /* Sekundärakzente */
  --purple-primary: #8f6a33;
  --purple-light:   #d9b37a;
  --blue-accent:    #4f8a7b;

  /* Tafeln */
  --surface-1: rgba(108, 80, 42, 0.88);   /* Panels / Cards              */
  --surface-2: rgba(124, 93, 50, 0.94);   /* erhabene Flächen, Menüs     */
  --surface-3: rgba(62, 44, 21, 0.62);    /* Inputs, vertiefte Felder    */
  --surface-well: rgba(38, 26, 11, 0.20); /* Innenfelder in Tafeln       */
  --surface-glass: rgba(98, 72, 37, 0.80);

  /* Text */
  --text-on-dark:    #f8e6c6;
  --text-muted-dark: #e2c79b;
  --text-faint:      #bfa275;
  --text-bright:     #fff1d6;

  /* Form & Tiefe */
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 26px;
  --radius-pill: 999px;
  --frame: 2px solid var(--gold-primary);
  --shadow-1: 0 10px 30px rgba(28, 18, 6, 0.35);
  --shadow-2: 0 18px 48px rgba(28, 18, 6, 0.48);
  --shadow-glow: 0 0 0 1px var(--gold-line), 0 10px 30px rgba(28, 18, 6, 0.40);
  --t-fast: 140ms ease;
  --t-base: 220ms cubic-bezier(.4, .14, .3, 1);
  --navbar-h: 72px;
  --sidebar-w: 254px;
  --sidebar-rail-w: 74px;

  --font-display: 'Brygada 1918', Georgia, serif;
  --font-body:    'Figtree', system-ui, sans-serif;
  --font-brand:   'Brygada 1918', Georgia, serif;

  /* Bootstrap 5.3 Dark-Mode auf die Palette mappen */
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: transparent;
  --bs-body-bg-rgb: 108, 80, 42;
  --bs-body-color: var(--text-on-dark);
  --bs-emphasis-color: var(--text-bright);
  --bs-emphasis-color-rgb: 255, 241, 214;
  --bs-secondary-color: var(--text-muted-dark);
  --bs-tertiary-color: var(--text-faint);
  --bs-border-color: var(--gold-line);
  --bs-border-color-translucent: var(--gold-line-soft);
  --bs-border-radius: var(--radius-s);
  --bs-primary: #c99e60;
  --bs-primary-rgb: 201, 158, 96;
  --bs-link-color: #ffd391;
  --bs-link-color-rgb: 255, 211, 145;
  --bs-link-hover-color: #fff1d6;
  --bs-link-hover-color-rgb: 255, 241, 214;
  --bs-secondary-bg: var(--surface-2);
  --bs-secondary-bg-rgb: 62, 44, 21;
  --bs-tertiary-bg: var(--surface-3);
  --bs-tertiary-bg-rgb: 62, 44, 21;
  --bs-success: #8cc79a;
  --bs-success-rgb: 140, 199, 154;
  --bs-danger: #e8907c;
  --bs-danger-rgb: 232, 144, 124;
  --bs-warning: #f0c36a;
  --bs-warning-rgb: 240, 195, 106;
  --bs-info: #8fc0b2;
  --bs-info-rgb: 143, 192, 178;
}

/* ---------- 2. RESET & BÜHNE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-on-dark);
  min-height: 100vh;
  padding-top: var(--navbar-h);
  background: var(--stage);
  line-height: 1.55;
}

/* Gemälde nahezu unverschleiert hinter allem */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, var(--stage-veil-top) 0%, var(--stage-veil-mid) 30%, var(--stage-veil-bot) 100%),
    var(--stage-image) var(--stage-pos) / cover no-repeat fixed;
}
/* Nur ein Hauch Vignette an den Rändern */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 30%, transparent 55%, rgba(var(--shade-rgb), 0.38) 100%);
}

::selection { background: rgba(var(--green-rgb), 0.85); color: var(--text-bright); }

/* ---------- 3. TYPOGRAFIE ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--gold-bright);
  letter-spacing: 0.005em;
  line-height: 1.2;
}
h5, h6 { font-weight: 500; }
/* Zwischenüberschriften stehen oft direkt auf dem Gemälde: dunkler Schein für Lesbarkeit */
.vw-main h3, .vw-main h4, .vw-main h5, .vw-main h6, .page-title h2, .vw-set-heading, .vw-main .vw-count, .vw-main .shop-result-count {
  text-shadow: 0 1px 2px rgba(28, 18, 6, 0.85), 0 0 14px rgba(28, 18, 6, 0.55);
}
.vw-main :is(.card, .modal-card, .modal-content, .pap-sheet, .sheet-section, .sheet-header, .mail-reading-pane, .vw-toolbar) :is(h2, h3, h4, h5, h6) { text-shadow: none; }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-bright);
}
a { color: var(--gold-bright); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--text-bright); }
strong, b { font-weight: 600; }
.text-muted, .text-secondary { color: var(--text-muted-dark) !important; }
/* text-dark auf Tafeln aufhellen, aber nicht auf Badges/Buttons */
.text-dark:not(.badge):not(.btn) { color: var(--text-on-dark) !important; }
.modal-content.text-dark { color: var(--text-on-dark) !important; }
.text-body { color: var(--text-on-dark) !important; }
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warn) !important; }
.text-info    { color: var(--info) !important; }
small, .small { color: var(--text-muted-dark); }

/* ---------- 4. NAVBAR ---------- */
.navbar {
  height: var(--navbar-h);
  background: rgba(108, 80, 42, 0.90);
  backdrop-filter: blur(10px) saturate(115%);
  border-bottom: var(--frame);
  box-shadow: 0 4px 0 var(--btn-green), 0 12px 28px rgba(28, 18, 6, 0.35);
}
.navbar-logo {
  height: 52px; width: auto;
  filter: drop-shadow(0 2px 10px rgba(var(--shade-rgb), 0.5));
  transition: transform var(--t-base);
}
.navbar-logo:hover { transform: scale(1.04); }
.navbar .nav-link {
  color: var(--text-on-dark);
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0.9rem;
  transition: color var(--t-fast);
}
.navbar .nav-link:hover { color: var(--gold-bright); }
.navbar-toggler {
  border: 2px solid var(--gold-primary);
  border-radius: var(--radius-s);
  padding: 0.35rem 0.55rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(255, 211, 145, 0.25); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffd391' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar .badge.bg-danger { box-shadow: 0 0 0 2px rgba(108, 80, 42, 0.95); }

/* Marke: Wappen + Schriftzug */
.navbar-project-name {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--gold-bright);
}
.navbar-project-name::before, .brand-crest {
  content: ""; display: inline-block; vertical-align: middle; flex: 0 0 auto;
  background-color: var(--crest-color);
  -webkit-mask: url("/verwaltung/static/logos/crest.png") center / contain no-repeat;
  mask: url("/verwaltung/static/logos/crest.png") center / contain no-repeat;
}
.navbar-project-name::before { width: 1.8rem; height: 2.45rem; margin-right: 0.65rem; margin-top: -0.2rem; }
.brand-crest { display: block; width: 5.2rem; height: 7rem; margin: 0 auto 0.6rem; filter: drop-shadow(0 2px 10px rgba(255, 230, 190, 0.35)); }

/* Ambience-Controls in der Navbar */
.portal-audio-nav { display: inline-flex; align-items: center; gap: 0.6rem; }
.portal-audio-slider { width: 92px; accent-color: var(--gold-bright); cursor: pointer; }

/* Konto-Anzeige */
.navbar-account {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 240px;
  margin-left: 0.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.9rem;
  white-space: nowrap;
}
.navbar-account i { flex: 0 0 auto; }
.navbar-account span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- 5. BUTTONS: Pille in Wappen-Grün mit Messingrand ----------
   Alle Bootstrap-Varianten (primary, outline, success, danger …) laufen über
   dieselben --bs-btn-* Variablen; dazu die eigenen button-artigen Elemente. */
.btn {
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-weight: 400;
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-color: var(--gold-bright);
  --bs-btn-bg: var(--btn-green);
  --bs-btn-border-color: var(--gold-primary);
  --bs-btn-hover-color: var(--text-bright);
  --bs-btn-hover-bg: var(--btn-green-hover);
  --bs-btn-hover-border-color: var(--gold-bright);
  --bs-btn-active-color: var(--text-bright);
  --bs-btn-active-bg: var(--btn-green-active);
  --bs-btn-active-border-color: var(--gold-bright);
  --bs-btn-disabled-color: var(--gold-bright);
  --bs-btn-disabled-bg: var(--btn-green);
  --bs-btn-disabled-border-color: var(--gold-primary);
  --bs-btn-disabled-opacity: 0.55;
  --bs-btn-focus-shadow-rgb: 255, 211, 145;
  letter-spacing: 0.01em;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn-sm {
  --bs-btn-padding-x: 0.85rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-font-size: 0.88rem;
  --bs-btn-border-radius: var(--radius-pill);
}
.btn-lg { --bs-btn-border-radius: var(--radius-pill); }
.btn:hover, .btn:focus-visible { box-shadow: 0 6px 18px rgba(28, 18, 6, 0.35); }
.btn:not(.btn-link):not(.btn-close) i { color: inherit; }
.btn:disabled, .btn.disabled { box-shadow: none; transform: none; }
.btn-group > .btn { --bs-btn-border-radius: var(--radius-pill); }

/* Textlinks im Button-Gewand bleiben schlichte Links */
.btn-link {
  --bs-btn-color: var(--gold-bright);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--text-bright);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-font-family: var(--font-body);
}
.btn-link:hover { box-shadow: none; }

/* Löschen / Destruktiv: Ziegelrot mit Messingrand */
.btn-danger,
.btn-outline-danger {
  --bs-btn-color: #ffe3d8;
  --bs-btn-bg: #7a2a1f;
  --bs-btn-hover-color: #fff1ea;
  --bs-btn-hover-bg: #923424;
  --bs-btn-active-color: #fff1ea;
  --bs-btn-active-bg: #a63d2b;
  --bs-btn-disabled-color: #ffe3d8;
  --bs-btn-disabled-bg: #7a2a1f;
  --bs-btn-focus-shadow-rgb: 232, 144, 124;
}

/* Eigene button-artige Elemente ohne .btn */
.btn-nav-logout,
.portal-audio-btn,
.modal-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.portal-audio-btn { padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.btn-nav-logout,
.portal-audio-btn,
.modal-action,
.navbar-account,
.vw-ambience-btn {
  background: var(--btn-green);
  border: 2px solid var(--gold-primary);
  color: var(--gold-bright);
}
.btn-nav-logout:hover,
.portal-audio-btn:hover,
.modal-action:hover,
.vw-ambience-btn:hover {
  background: var(--btn-green-hover);
  border-color: var(--gold-bright);
  color: var(--text-bright);
  box-shadow: 0 6px 18px rgba(28, 18, 6, 0.35);
}
.modal-action:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.modal-action.danger { background: #7a2a1f; color: #ffe3d8; }
.modal-action.danger:hover { background: #923424; color: #fff1ea; }

/* Umschalter-Gruppen (btn-check) – Auswahl bleibt erkennbar */
.btn-check:checked + .btn,
.btn.active {
  background: var(--btn-green-active);
  border-color: var(--gold-bright);
  color: var(--text-bright);
}

/* ---------- 6. VERWALTUNGS-SHELL (Sidebar + Drawer) ---------- */
.vw-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.vw-shell.is-collapsed { grid-template-columns: var(--sidebar-rail-w) minmax(0, 1fr); }
.vw-main { min-width: 0; }

/* Mobiler Burger in der Navbar (Desktop ausgeblendet) */
.vw-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-right: 0.6rem;
  border: 2px solid var(--gold-primary);
  border-radius: var(--radius-pill);
  background: var(--btn-green);
  color: var(--gold-bright);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.vw-burger:hover { background: var(--btn-green-hover); border-color: var(--gold-bright); }

/* Sidebar-Tafel */
.vw-sidebar {
  position: sticky;
  top: calc(var(--navbar-h) + 12px);
  z-index: 15;
  max-height: calc(100vh - var(--navbar-h) - 24px);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: var(--frame);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(3px);
  overflow: hidden;
}
.vw-sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
  scrollbar-width: thin;
}
.vw-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.vw-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: var(--radius-pill); }

/* Gruppen */
.vw-nav-group + .vw-nav-group {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--gold-line-soft);
}
.is-collapsed .vw-nav-group + .vw-nav-group { border-top: none; margin-top: 0.25rem; padding-top: 0; }
.vw-group-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.4rem 0.7rem 0.55rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gold-bright);
  opacity: 0.85;
}
.vw-group-label i { font-size: 0.9em; }

/* Navigations-Links: Pillen, aktive Seite in Messing */
.vw-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.18rem;
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.vw-nav-link i {
  flex: 0 0 auto;
  width: 1.3rem;
  text-align: center;
  font-size: 1rem;
  color: var(--gold-primary);
  transition: color var(--t-fast);
}
.vw-nav-link > span { overflow: hidden; text-overflow: ellipsis; }
.vw-nav-link:hover { color: var(--gold-bright); background: var(--green-tint); }
.vw-nav-link:hover i { color: var(--gold-bright); }
.vw-nav-link.active {
  color: var(--gold-bright);
  background: var(--btn-green);
  border-color: var(--gold-primary);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(28, 18, 6, 0.30);
}
.vw-nav-link.active i { color: var(--gold-bright); }

.vw-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.vw-unread-dot {
  position: absolute;
  top: -4px;
  left: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger-bg);
  box-shadow: 0 0 0 2px var(--gold-bright);
}

/* Sidebar-Fuß */
.vw-sidebar-footer {
  flex: 0 0 auto;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--gold-line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vw-vacation {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-line);
  background: rgba(var(--shade-rgb), 0.28);
  color: var(--text-on-dark);
  font-size: 0.82rem;
  white-space: nowrap;
}
.vw-vacation i { color: var(--gold-bright); }
.vw-vacation.is-danger { color: #ffe0d6; border-color: rgba(232, 144, 124, 0.6); background: rgba(154, 63, 48, 0.45); }
.vw-vacation.is-danger i { color: var(--danger); }

.vw-ambience { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.2rem 0.1rem; }
.vw-ambience-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.18rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.vw-ambience-btn i { position: relative; flex: 0 0 auto; width: 1.3rem; text-align: center; font-size: 1rem; color: inherit; }
.vw-ambience-slider { width: 100%; accent-color: var(--gold-bright); cursor: pointer; }

.vw-logout-link { width: 100%; text-align: left; background: transparent; border: 1px solid transparent; cursor: pointer; }
.vw-logout-link:hover { color: #ffe0d6; background: rgba(154, 63, 48, 0.35); }
.vw-logout-link:hover i { color: var(--danger); }

.vw-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted-dark);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.vw-collapse-toggle:hover { color: var(--gold-bright); background: var(--green-tint); }
.vw-collapse-toggle i { width: 1.3rem; text-align: center; transition: transform var(--t-base); }

/* Backdrop (nur Mobil-Drawer) */
.vw-backdrop {
  position: fixed;
  inset: var(--navbar-h) 0 0 0;
  z-index: 1020;
  background: rgba(var(--shade-rgb), 0.55);
  backdrop-filter: blur(3px);
}
.vw-backdrop[hidden] { display: none; }

/* Eingeklappte Leiste – nur Desktop */
@media (min-width: 992px) {
  .vw-shell.is-collapsed .vw-nav-link > span:not(.vw-icon-wrap),
  .vw-shell.is-collapsed .vw-group-label > span,
  .vw-shell.is-collapsed .vw-vacation > span,
  .vw-shell.is-collapsed .vw-collapse-toggle > span,
  .vw-shell.is-collapsed .vw-ambience-btn > span,
  .vw-shell.is-collapsed .vw-logout-link > span,
  .vw-shell.is-collapsed .vw-nav-badge,
  .vw-shell.is-collapsed .vw-ambience-slider { display: none; }
  .vw-shell.is-collapsed .vw-nav-link,
  .vw-shell.is-collapsed .vw-collapse-toggle,
  .vw-shell.is-collapsed .vw-group-label,
  .vw-shell.is-collapsed .vw-ambience-btn,
  .vw-shell.is-collapsed .vw-logout-link,
  .vw-shell.is-collapsed .vw-vacation { justify-content: center; gap: 0; }
  .vw-shell.is-collapsed .vw-collapse-toggle i { transform: rotate(180deg); }

  /* Ambience-Button eingeklappt: Note durchgestrichen, solange Musik läuft */
  .vw-shell.is-collapsed .vw-ambience-btn.is-playing i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* ---------- 7. MAIN / SEITENTITEL ---------- */
.main-content { min-height: calc(100vh - 160px); padding: 1.75rem 0 3rem; }
.page-title {
  position: relative;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--gold-line-soft);
}
.page-title h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.page-title::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 96px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-primary) 0 40%, var(--btn-green-active) 40% 75%, transparent);
}

/* ---------- 8. TAFELN (Cards, Panels) ----------
   Hauptflächen: Ocker-Glas, 2px Messingrahmen, große Rundung.
   Verschachtelte Flächen: dünner Rahmen, leicht vertieft. */
.card,
.hub-tile,
.login-card,
.vw-toolbar,
.modal-card,
.modal-content,
.mail-list-pane,
.mail-reading-pane,
.shop-empty,
.craft-empty,
.sheet-section,
.sheet-header,
.sheet-gm-card,
.pap-sheet,
body.portal-page .header-card,
body.portal-page .grid .card {
  background: var(--surface-1);
  border: var(--frame);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(3px);
}
.card {
  --bs-card-bg: var(--surface-1);
  --bs-card-color: var(--text-on-dark);
  --bs-card-border-color: var(--gold-primary);
  --bs-card-border-width: 2px;
  --bs-card-border-radius: var(--radius-l);
  --bs-card-inner-border-radius: calc(var(--radius-l) - 2px);
  --bs-card-cap-bg: transparent;
  color: var(--text-on-dark);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card .card,
.modal-content .card,
.modal-card .card {
  --bs-card-border-width: 1px;
  --bs-card-border-radius: var(--radius-m);
  border-width: 1px;
  border-color: var(--gold-line);
  border-radius: var(--radius-m);
  background: var(--surface-well);
  box-shadow: none;
  backdrop-filter: none;
}
.card-header {
  background: var(--green-band);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  border-bottom: 1px solid var(--gold-line);
  padding: 0.9rem 1.35rem;
}
.card-body { padding: 1.35rem; color: var(--text-on-dark); }
.card-title { color: var(--gold-bright); font-family: var(--font-display); font-weight: 400; }
.card-title > i:first-child,
.card-header > i:first-child {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; margin-right: 0.6rem !important;
  border-radius: 50%;
  background: var(--btn-green);
  border: 2px solid var(--gold-primary);
  color: var(--gold-bright);
  font-size: 0.85rem;
  vertical-align: middle;
}
.card-footer {
  background: var(--surface-well);
  border-top: 1px solid var(--gold-line-soft);
  padding: 0.9rem 1.35rem;
}
a.card:hover, .card.is-interactive:hover, .hub-tile:hover {
  transform: translateY(-2px);
  border-color: var(--gold-bright);
  box-shadow: var(--shadow-2);
}

/* ---------- 9. HUB (Dashboard-Kacheln) ---------- */
.hub-intro { margin-bottom: 1.5rem; color: var(--text-muted-dark); max-width: 60ch; }
.hub-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-bottom: 2.5rem;
}
.hub-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.3rem 1.3rem 1.4rem;
  color: var(--text-on-dark);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.hub-tile:hover { color: var(--text-on-dark); }
.hub-tile .hub-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--btn-green);
  border: 2px solid var(--gold-primary);
  color: var(--gold-bright);
  font-size: 1.15rem;
}
.hub-tile .hub-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-bright); }
.hub-tile .hub-desc { font-size: 0.86rem; color: var(--text-muted-dark); }

/* ---------- 10. FORMULARE ---------- */
.form-label { color: var(--gold-bright); font-weight: 500; font-family: var(--font-body); font-size: 0.9rem; }
.form-control, .form-select {
  background-color: var(--surface-3);
  border: 1px solid var(--gold-line);
  color: var(--text-on-dark);
  border-radius: var(--radius-s);
  padding: 0.55rem 0.85rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.form-control-sm, .form-select-sm { border-radius: 10px; padding: 0.3rem 0.65rem; }
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus, .form-select:focus {
  background-color: rgba(62, 44, 21, 0.78);
  border-color: var(--gold-bright);
  color: var(--text-on-dark);
  box-shadow: 0 0 0 0.18rem rgba(255, 211, 145, 0.22);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: rgba(62, 44, 21, 0.40); opacity: 0.8; }
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffd391' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background: #4a3519; color: var(--text-on-dark); }
.form-text { color: var(--text-muted-dark); }
.form-check-input {
  background-color: var(--surface-3);
  border: 1px solid var(--gold-primary);
}
.form-check-input:checked { background-color: var(--btn-green-active); border-color: var(--gold-bright); }
.form-check-input:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 0.18rem rgba(255, 211, 145, 0.22); }
.form-switch .form-check-input:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c99e60'/%3e%3c/svg%3e");
}
.input-group-text {
  background: rgba(var(--shade-rgb), 0.30);
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
  border-radius: var(--radius-s);
}
.form-range { accent-color: var(--gold-bright); }

/* ---------- 11. TABELLEN ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-on-dark);
  --bs-table-border-color: var(--gold-line-soft);
  --bs-table-striped-bg: rgba(255, 230, 190, 0.04);
  --bs-table-striped-color: var(--text-on-dark);
  --bs-table-hover-bg: var(--green-tint);
  --bs-table-hover-color: var(--text-bright);
  --bs-table-active-bg: rgba(var(--shade-rgb), 0.25);
  color: var(--text-on-dark);
  vertical-align: middle;
}
.table > thead th,
.table > thead {
  background: var(--green-band);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 400;
  border-bottom: 2px solid var(--gold-primary);
  letter-spacing: 0.005em;
}
.table > :not(caption) > * > * { border-bottom-color: var(--gold-line-soft); }
.table-dark { --bs-table-bg: var(--green-band); --bs-table-border-color: var(--gold-line); color: var(--text-on-dark); }

/* ---------- 12. HINWEISE ---------- */
.alert {
  --bs-alert-color: var(--text-on-dark);
  background: var(--surface-1);
  border: 2px solid var(--gold-line);
  border-left-width: 6px;
  color: var(--text-on-dark);
  border-radius: var(--radius-m);
  backdrop-filter: blur(3px);
}
.alert-success { border-left-color: var(--ok); }
.alert-danger  { border-left-color: var(--danger); }
.alert-warning { border-left-color: var(--gold-bright); }
.alert-info    { border-left-color: var(--green-light); }
.alert-link { color: var(--gold-bright); }
.alert .btn-close { filter: invert(1) sepia(1) saturate(2) hue-rotate(-10deg) brightness(1.2); }

/* ---------- 13. BADGES / PROGRESS / LISTEN ---------- */
.badge { border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; }
.badge.bg-primary   { background: var(--btn-green) !important; color: var(--gold-bright); box-shadow: inset 0 0 0 1px var(--gold-line); }
.badge.bg-secondary { background: rgba(var(--shade-rgb), 0.35) !important; color: var(--text-on-dark); }
.badge.bg-success   { background: var(--ok-bg) !important; color: #eafbee; }
.badge.bg-danger    { background: var(--danger-bg) !important; color: #ffeae4; }
.badge.bg-warning   { background: var(--gold-secondary) !important; color: #2a1c08; }
.badge.bg-info      { background: var(--info) !important; color: #10241e; }
.badge.bg-dark      { background: rgba(var(--shade-rgb), 0.55) !important; color: var(--text-on-dark); }
.badge.bg-light     { background: var(--text-on-dark) !important; color: #3a2a12 !important; }

.progress {
  --bs-progress-bg: rgba(var(--shade-rgb), 0.35);
  --bs-progress-border-radius: var(--radius-pill);
  background: rgba(var(--shade-rgb), 0.35);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-pill);
  height: 0.85rem;
}
.progress-bar { background: linear-gradient(90deg, var(--btn-green-active), var(--green-light)); color: var(--text-bright); }

.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--text-on-dark);
  --bs-list-group-border-color: var(--gold-line-soft);
  --bs-list-group-border-radius: var(--radius-m);
  --bs-list-group-action-hover-bg: var(--green-tint);
  --bs-list-group-action-hover-color: var(--text-bright);
}
.list-group-item {
  background: var(--surface-well);
  border-color: var(--gold-line-soft);
  color: var(--text-on-dark);
}
.list-group-item.active { background: var(--btn-green); border-color: var(--gold-primary); color: var(--gold-bright); }

/* Dropdowns */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface-2);
  --bs-dropdown-color: var(--text-on-dark);
  --bs-dropdown-border-color: var(--gold-primary);
  --bs-dropdown-border-radius: var(--radius-m);
  --bs-dropdown-link-color: var(--text-on-dark);
  --bs-dropdown-link-hover-bg: var(--green-tint);
  --bs-dropdown-link-hover-color: var(--gold-bright);
  --bs-dropdown-link-active-bg: var(--btn-green);
  --bs-dropdown-link-active-color: var(--gold-bright);
  --bs-dropdown-divider-bg: var(--gold-line-soft);
  border-width: 2px;
  box-shadow: var(--shadow-2);
}

/* Pagination */
.pagination {
  --bs-pagination-bg: var(--btn-green);
  --bs-pagination-color: var(--gold-bright);
  --bs-pagination-border-color: var(--gold-primary);
  --bs-pagination-hover-bg: var(--btn-green-hover);
  --bs-pagination-hover-color: var(--text-bright);
  --bs-pagination-hover-border-color: var(--gold-bright);
  --bs-pagination-active-bg: var(--btn-green-active);
  --bs-pagination-active-color: var(--gold-bright);
  --bs-pagination-active-border-color: var(--gold-bright);
  --bs-pagination-disabled-bg: rgba(var(--shade-rgb), 0.3);
  --bs-pagination-disabled-color: var(--text-faint);
  --bs-pagination-disabled-border-color: var(--gold-line-soft);
}

/* ---------- 14. NAV-TABS / NAV-PILLS ---------- */
.nav-tabs { border-bottom: 1px solid var(--gold-line); }
.nav-tabs .nav-link {
  color: var(--text-muted-dark);
  border: 1px solid transparent;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  font-family: var(--font-body);
  font-weight: 500;
}
.nav-tabs .nav-link:hover { border-color: var(--gold-line-soft); color: var(--gold-bright); }
.nav-tabs .nav-link.active {
  background: var(--btn-green);
  color: var(--gold-bright);
  border-color: var(--gold-line) var(--gold-line) transparent;
}
.nav-pills .nav-link {
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  color: var(--text-on-dark);
  font-weight: 500;
}
.nav-pills .nav-link:hover { background: var(--green-tint); color: var(--gold-bright); }
.nav-pills .nav-link.active { background: var(--btn-green); color: var(--gold-bright); border-color: var(--gold-primary); }

/* ---------- 15. EIGENES MODAL-SYSTEM (.modal-overlay/.modal-card) ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(var(--shade-rgb), 0.55);
  backdrop-filter: blur(4px);
  z-index: 1080;
}
.modal-overlay.show { display: flex; }
.yearbook-comments-modal-card { max-width: 720px !important; }
.modal-card {
  width: 100%; max-width: 560px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: modal-rise var(--t-base);
}
@keyframes modal-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-card .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--gold-primary);
  background: var(--green-band);
}
.modal-card .modal-header h2 { font-size: 1.35rem; margin: 0; }
.modal-card .modal-body { padding: 1.5rem; overflow-y: auto; color: var(--text-on-dark); }
.modal-card .modal-footer {
  display: flex; gap: 0.75rem; justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gold-line-soft);
  background: var(--surface-well);
}
.modal-close {
  background: transparent; border: none;
  color: var(--text-muted-dark); font-size: 1.6rem; line-height: 1;
  cursor: pointer; transition: color var(--t-fast);
}
.modal-close:hover { color: var(--gold-bright); }
.terms-modal-card, .consent-modal-card { max-width: 720px; }
.terms-modal-body, .consent-modal-body { line-height: 1.7; }
.consent-more-row { margin-top: 1rem; }
.consent-modal-footer { justify-content: space-between; flex-wrap: wrap; }

/* Dialoge (static/js/dialogs.js): Bestätigungen und Rückmeldungen statt Browser-Abfragen */
.dialog-overlay { z-index: 1100; }
.dialog-card { max-width: 460px; text-align: center; }
.dialog-body { padding: 1.8rem 1.8rem 1.3rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; overflow-y: auto; }
.dialog-icon {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--btn-green);
  border: 2px solid var(--gold-primary);
  color: var(--gold-bright);
  font-size: 1.35rem;
  box-shadow: 0 0 0 5px var(--green-tint);
}
.dialog-card.is-success .dialog-icon { background: var(--btn-green-active); }
.dialog-card.is-warning .dialog-icon { background: var(--gold-dark); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.25); }
.dialog-card.is-danger .dialog-icon { background: #7a2a1f; box-shadow: 0 0 0 5px rgba(154, 63, 48, 0.30); }
.dialog-title { font-size: 1.45rem; margin: 0.3rem 0 0; }
.dialog-text { width: 100%; color: var(--text-on-dark); line-height: 1.55; }
.dialog-text p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.dialog-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; text-align: left; }
.dialog-list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-s);
  background: var(--surface-well);
  border: 1px solid var(--gold-line-soft);
  overflow-wrap: anywhere;
}
.dialog-list li i { margin-top: 0.25rem; color: var(--green-light); }
.dialog-list li.is-warning i { color: var(--gold-bright); }
.dialog-list li.is-danger i { color: var(--danger); }
.dialog-footer { justify-content: center !important; flex-wrap: wrap; }
.dialog-footer .btn { min-width: 8.5rem; }
body.dialog-open { overflow: hidden; }

/* ---------- 16. BOOTSTRAP-MODALS ---------- */
.modal {
  --bs-modal-bg: var(--surface-2);
  --bs-modal-color: var(--text-on-dark);
  --bs-modal-border-color: var(--gold-primary);
  --bs-modal-border-width: 2px;
  --bs-modal-border-radius: var(--radius-l);
  --bs-modal-inner-border-radius: calc(var(--radius-l) - 2px);
  --bs-modal-header-border-color: var(--gold-line);
  --bs-modal-footer-border-color: var(--gold-line-soft);
}
.modal-content { background: var(--surface-2); color: var(--text-on-dark); box-shadow: var(--shadow-2); }
.modal-header { border-bottom: 1px solid var(--gold-primary); background: var(--green-band); }
.modal-footer { border-top: 1px solid var(--gold-line-soft); }
.modal-title { color: var(--gold-bright); font-family: var(--font-display); font-weight: 400; }
.modal-backdrop { --bs-backdrop-bg: rgb(var(--shade-rgb)); }
.modal-backdrop.show { opacity: 0.45; }
.btn-close { filter: invert(1) sepia(1) saturate(2) hue-rotate(-10deg) brightness(1.2); opacity: 0.8; }
.btn-close:hover { opacity: 1; }

/* ---------- 17. FOOTER-REVEAL ---------- */
.footer-reveal {
  position: fixed; left: 0; right: 0; bottom: 0;
  transform: translateY(100%);
  transition: transform var(--t-base);
  background: rgba(108, 80, 42, 0.94);
  border-top: var(--frame);
  z-index: 1040;
  pointer-events: none;
}
body.footer-reveal-active .footer-reveal { transform: translateY(0); pointer-events: auto; }
.footer-reveal-inner {
  text-align: center;
  padding: 0.35rem 1rem;
  font-size: 0.7rem;
  color: var(--text-muted-dark);
}
.footer-reveal-inner p { margin: 0.05rem 0; }
.footer-reveal-inner a { color: var(--gold-bright); }
.footer-sep { margin: 0 0.5rem; color: var(--text-faint); }

/* ---------- 18. PORTAL (Service-Hub) ---------- */
body.portal-page .backdrop { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body.portal-page .glow,
body.portal-page .grain { display: none; }
body.portal-page .shell { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(2rem,6vw,4.5rem) 1.5rem 4rem; z-index: 1; }
body.portal-page header { margin-bottom: 2.5rem; }
body.portal-page header h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin: 0.25rem 0 0.75rem; text-shadow: 0 2px 18px rgba(28, 18, 6, 0.55); }
body.portal-page .header-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
body.portal-page .lede { max-width: 60ch; color: var(--text-muted-dark); font-size: 1.05rem; }
body.portal-page .header-card { padding: clamp(1.5rem, 3vw, 2.5rem); }

body.portal-page .grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-items: stretch;
}
body.portal-page .grid .card {
  display: flex; flex-direction: column; min-height: 190px;
  padding: 1.3rem;
  color: var(--text-on-dark); text-decoration: none;
}
body.portal-page .grid .card:hover { border-color: var(--gold-bright); box-shadow: var(--shadow-2); }
body.portal-page .card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
body.portal-page .card .tag {
  display: inline-block; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill);
  background: rgba(var(--shade-rgb), 0.30); border: 1px solid var(--gold-line);
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-bright);
}
body.portal-page .card h2 { margin: 1rem 0 0.4rem; font-size: 1.5rem; }
body.portal-page .card p { margin: 0; color: var(--text-muted-dark); }
body.portal-page .status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted-dark); }
body.portal-page .status .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 241, 214, 0.35); box-shadow: 0 0 0 4px rgba(255, 241, 214, 0.08); }
body.portal-page .status.online .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(140, 199, 154, 0.22); }
body.portal-page .status.offline .dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(232, 144, 124, 0.22); }
body.portal-page .status .text { white-space: nowrap; }

body.portal-page .grid .card.card-locked {
  position: relative; cursor: not-allowed; padding-bottom: 2.8rem;
  border-color: var(--gold-line);
  background: linear-gradient(165deg, rgba(var(--shade-rgb), 0.30), rgba(var(--shade-rgb), 0.45)), var(--surface-1);
}
body.portal-page .grid .card.card-locked:hover { transform: none; box-shadow: var(--shadow-1); border-color: var(--gold-line); }
body.portal-page .grid .card.card-locked::before {
  content: "GESPERRT"; position: absolute; bottom: 0.8rem; right: 0.8rem; z-index: 2;
  padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--gold-line);
  background: rgba(var(--shade-rgb), 0.6); color: var(--gold-bright);
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
}
body.portal-page .grid .card.card-locked h2,
body.portal-page .grid .card.card-locked p { opacity: 0.78; }

/* Portal-Karten (Partial _portal_links): zentriert, Logo, Pill-Button */
#portal-cards > .col { display: flex; }
.portal-card { width: 100%; }
.portal-card-locked { opacity: .55; }
.portal-status.status-online { background-color: var(--ok-bg) !important; }
.portal-status.status-offline { background-color: var(--danger-bg) !important; }
.portal-card .card-body { display: flex; flex-direction: column; text-align: center; padding: 0.9rem; }
.portal-card .card-title { font-size: 1.25rem; margin-bottom: 0.25rem; }
.portal-card .card-title i { display: none; }
.portal-card .badge { font-size: 0.62rem; }
.portal-card .badge.bg-secondary-subtle,
.portal-card .badge.bg-warning-subtle { background: rgba(var(--shade-rgb), 0.35) !important; color: var(--gold-bright) !important; }
.portal-card .btn { --bs-btn-font-size: 0.95rem; --bs-btn-padding-y: 0.3rem; }
.portal-card .card-text {
  color: var(--gold-bright) !important;
  opacity: 0.9;
  font-size: 0.82rem;
  line-height: 1.3;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-card-logo-wrap {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
}
.portal-card-logo {
  display: block;
  max-width: 92%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.portal-card-logo--crest { filter: hue-rotate(-32deg) brightness(0.62) saturate(0.85); }
@media (min-width: 576px) {
  .portal-card { aspect-ratio: 1 / 1; }
}
@media (min-width: 768px) {
  #portal-cards > .col { flex: 0 0 auto; width: 300px; }
  .portal-card { aspect-ratio: 4 / 5; }
}
@media (max-width: 575.98px) {
  .portal-card-logo-wrap { max-height: 90px; flex: 0 0 auto; }
}

/* ---------- 19. LOGIN / REGISTER ---------- */
body.login-bg .main-content { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--navbar-h)); }
.bg-mask { width: 100%; display: flex; align-items: center; justify-content: center; }
.login-wrap { width: 100%; max-width: 440px; }
.login-header { text-align: center; margin-bottom: 1.5rem; width: 100vw; margin-left: calc(-50vw + 50%); }
.login-header .eyebrow { font-size: 1.15rem; letter-spacing: 0.3em; text-shadow: 0 1px 10px rgba(28, 18, 6, 0.7); }
.login-header h1 { font-size: clamp(3.4rem, 8vw, 5.2rem); margin: 0.35rem 0; text-shadow: 0 2px 18px rgba(28, 18, 6, 0.55); }
.login-header .lede { color: var(--text-bright); font-size: 1.25rem; text-shadow: 0 1px 10px rgba(28, 18, 6, 0.7); }
.login-card { box-shadow: var(--shadow-2); }
.login-title { color: var(--gold-bright); font-family: var(--font-display); font-weight: 400; }
.login-card a { color: var(--gold-bright); }
.register-card { max-width: 480px; }

/* ---------- 20. CHARAKTER-KARTEN (Partial _my_characters) ---------- */
.character-card { height: 100%; }
.character-image-container, .portrait-9x16 { position: relative; overflow: hidden; border-radius: var(--radius-m); aspect-ratio: 9 / 16; background: var(--surface-3); }
.character-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.character-stats .stat { color: var(--text-on-dark); }
.character-stats .stat i { color: var(--gold-primary); }

/* Jahrbuch */
.yearbook-img-wrapper { position: relative; overflow: hidden; border-radius: var(--radius-m); aspect-ratio: 3 / 4; background: var(--surface-3); }
.yearbook-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 21. HILFSKLASSEN ---------- */
.bg-light  { background: var(--surface-2) !important; color: var(--text-on-dark) !important; }
.bg-white  { background: var(--surface-1) !important; color: var(--text-on-dark) !important; }
.bg-dark   { background: rgba(var(--shade-rgb), 0.55) !important; }
.border    { border-color: var(--gold-line-soft) !important; }
.rounded   { border-radius: var(--radius-s) !important; }
hr { border-color: var(--gold-line); opacity: 1; }
.grad-gold   { background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark)); }
.grad-purple { background: linear-gradient(135deg, var(--purple-primary), var(--purple-light)); }
.shadow-1 { box-shadow: var(--shadow-1) !important; }
.shadow-2 { box-shadow: var(--shadow-2) !important; }

/* Tooltips & Popover */
.tooltip { --bs-tooltip-bg: var(--btn-green); --bs-tooltip-color: var(--text-on-dark); }
.tooltip-inner { border: 1px solid var(--gold-primary); border-radius: var(--radius-s); font-family: var(--font-body); }
.popover {
  --bs-popover-bg: var(--surface-2);
  --bs-popover-border-color: var(--gold-primary);
  --bs-popover-body-color: var(--text-on-dark);
  --bs-popover-header-bg: transparent;
  --bs-popover-header-color: var(--gold-bright);
  --bs-popover-border-radius: var(--radius-m);
}

/* ---------- 22. ZUGÄNGLICHKEIT ---------- */
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- 23. RESPONSIVE (Shell, Navbar, Postfach) ---------- */
@media (max-width: 991.98px) {
  .navbar { height: auto; }
  .navbar-collapse { background: var(--surface-2); border: var(--frame); border-radius: var(--radius-m); margin-top: 0.6rem; padding: 0.75rem; box-shadow: var(--shadow-2); }
  .portal-audio-nav { flex-wrap: wrap; }

  /* Verwaltungs-Shell: Drawer-Modus */
  .vw-burger { display: inline-flex; }
  .vw-shell { display: block; }
  .vw-sidebar {
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    bottom: 0;
    width: min(82vw, 300px);
    max-height: none;
    z-index: 1025;
    border-left: none;
    border-radius: 0 var(--radius-l) var(--radius-l) 0;
    background: var(--surface-2);
    transform: translateX(-100%);
    transition: transform var(--t-base);
  }
  .vw-shell.is-open .vw-sidebar { transform: translateX(0); }
  .vw-collapse-toggle { display: none; }

  /* Navbar auf Verwaltungsseiten: Drawer-Button + Account-Button in einer Zeile */
  body.vw-page .navbar .container-fluid { flex-wrap: nowrap; column-gap: 0.25rem; }
  body.vw-page .navbar-brand { min-width: 0; overflow: hidden; flex: 0 1 auto; }
  body.vw-page .navbar-logo { height: 40px; }
  body.vw-page .navbar-collapse { position: absolute; top: 100%; left: 0.75rem; right: 0.75rem; }
  body.vw-page .navbar-account { max-width: min(30vw, 180px); margin-left: 0.25rem; }
  /* Rechter Toggler wird zum Konto-Button (Drawer-Burger links bleibt das Menü) */
  body.vw-page .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
  }

  /* Postfach: einspaltig, Liste <-> Lesebereich umschalten */
  .mail-shell { display: block; }
  .mail-list { max-height: none; }
  .mail-reading-pane { margin-top: 1rem; }
  .mail-back-link { display: inline-block; }
  .mail-shell.has-open .mail-list-pane { display: none; }
  .mail-shell:not(.has-open) .mail-reading-pane { display: none; }
}
body.vw-drawer-open { overflow: hidden; }
@media (max-width: 575.98px) {
  .main-content { padding: 1rem 0 2.5rem; }
  body.portal-page .grid { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: 1fr 1fr; }
  .navbar-project-name { font-size: 1.2rem; }
  .navbar-project-name::before { width: 1.5rem; height: 2rem; margin-right: 0.45rem; }
  .card-body { padding: 1.1rem; }
}

/* Filterleisten (Handelsposten/Schwarzmarkt): umbrechen statt seitlich scrollen */
form[data-linked-item-filters] { flex-wrap: wrap !important; }

/* ============================================================
   SEITENBEREICHE
   ============================================================ */

/* ---------- 24. POSTFACH / MAILBOX (E-Mail-Layout) ---------- */
.mail-shell {
  display: grid;
  grid-template-columns: minmax(340px, 480px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.mail-list-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Toolbar: Tabs + Verfassen */
.mail-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem;
  border-bottom: 1px solid var(--gold-line);
  background: var(--surface-well);
}
.mail-tabs {
  display: flex;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.mail-tabs::-webkit-scrollbar { height: 4px; }
.mail-tabs::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 999px; }
.mail-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted-dark);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: all var(--t-fast);
}
.mail-tab i { color: var(--gold-dark); transition: color var(--t-fast); }
.mail-tab:hover { color: var(--gold-bright); background: var(--green-tint); }
.mail-tab:hover i { color: var(--gold-primary); }
.mail-tab.active {
  color: var(--gold-bright);
  background: var(--btn-green);
  border-color: var(--gold-primary);
  font-weight: 600;
}
.mail-tab.active i { color: var(--gold-bright); }
.mail-tab-count {
  background: var(--ok-bg);
  color: #eafbee;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
}
.mail-tab.active .mail-tab-count { background: var(--gold-dark); color: var(--gold-bright); }
.mail-compose-btn { flex: 0 0 auto; white-space: nowrap; }

/* Bulk-Leiste */
.mail-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--gold-line-soft);
}
.mail-selectall {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted-dark);
}

/* Liste */
.mail-list { max-height: calc(100vh - var(--navbar-h) - 220px); overflow-y: auto; }
.mail-list::-webkit-scrollbar { width: 6px; }
.mail-list::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 999px; }
.mail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--gold-line-soft);
  transition: background var(--t-fast);
}
.mail-item:hover { background: rgba(var(--green-rgb), 0.18); }
.mail-item.is-active { background: var(--green-tint); box-shadow: inset 4px 0 0 var(--btn-green-active); }
.mail-item .mail-check { margin-top: 0.25rem; flex: 0 0 auto; }
.mail-item-link {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  color: var(--text-on-dark);
  text-decoration: none;
}
.mail-item-link:hover { color: var(--text-on-dark); }
.mail-item-row1 { display: flex; align-items: baseline; gap: 0.5rem; }
.mail-item-party {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--text-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.mail-sent-icon { color: var(--gold-dark); font-size: 0.8em; }
.mail-unread-dot {
  display: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 0.15rem;
  flex: 0 0 auto;
}
.mail-item.is-unread .mail-unread-dot { display: inline-block; }
.mail-item.is-unread .mail-item-party,
.mail-item.is-unread .mail-item-subject { color: var(--gold-bright); font-weight: 600; }
.mail-item-time { flex: 0 0 auto; font-size: 0.74rem; color: var(--text-faint); white-space: nowrap; }
.mail-item-subject {
  font-size: 0.86rem;
  color: var(--text-on-dark);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-item-preview {
  font-size: 0.78rem;
  color: var(--text-muted-dark);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-item-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.mail-item-badges .badge { font-size: 0.68rem; }

/* Lesebereich */
.mail-reading-pane {
  min-height: 360px;
  padding: 1.5rem;
}
.mail-back-link { display: none; margin-bottom: 1rem; font-family: var(--font-display); font-size: 0.85rem; }
.mail-reading-header { padding-bottom: 1rem; border-bottom: 1px solid var(--gold-line-soft); margin-bottom: 1rem; }
.mail-reading-subject { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 0 0 0.6rem; }
.mail-reading-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  font-size: 0.88rem;
  color: var(--text-muted-dark);
}
.mail-reading-date { font-size: 0.8rem; color: var(--text-faint); }
.mail-transfer-box {
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-m);
  background: var(--surface-3);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.mail-transfer-box--coin { border-left: 3px solid var(--gold-primary); }
.mail-transfer-box--item { border-left: 3px solid var(--blue-accent); }
.mail-transfer-title { font-family: var(--font-display); color: var(--gold-bright); font-weight: 600; margin-bottom: 0.5rem; }
.mail-transfer-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.mail-transfer-reason { font-size: 0.86rem; color: var(--text-muted-dark); }
.mail-body { color: var(--text-on-dark); line-height: 1.65; word-break: break-word; }
.mail-body-plain { white-space: pre-wrap; }
.mail-body .mail-quote { border-left: 3px solid var(--gold-primary); padding: 0.5rem 0.75rem; margin: 0.75rem 0; color: var(--text-muted-dark); font-style: italic; background: rgba(var(--shade-rgb), 0.15); border-radius: 0 4px 4px 0; }
.mail-reading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gold-line-soft);
}
.mail-reading-actions form { display: inline; margin: 0; }

/* Leerzustand */
.mail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-faint);
  padding: 3rem 1.5rem;
}
.mail-empty i { font-size: 2.5rem; margin-bottom: 0.8rem; color: var(--gold-dark); opacity: 0.7; }
.mail-empty p { margin: 0; color: var(--text-muted-dark); }
.mail-empty--reading { min-height: 320px; height: 100%; }

/* Anhang-Box im Compose-Modal */
.mail-attach-box { border: 1px solid var(--gold-line); border-radius: var(--radius-m); background: var(--surface-3); padding: 0.9rem; }
.shop-balance-preview { min-height: 5.4rem; }
.shop-balance-preview-title {
  margin-bottom: 0.55rem;
  color: var(--gold-bright);
  font-weight: 600;
}
.shop-balance-preview-grid {
  display: grid;
  grid-template-columns: minmax(5rem, 1fr) auto;
  gap: 0.25rem 1rem;
}
.shop-balance-preview-grid strong { text-align: right; }
.shop-balance-preview-grid > :nth-last-child(-n + 2) {
  padding-top: 0.35rem;
  border-top: 1px solid var(--gold-line-soft);
}
.shop-balance-preview--insufficient {
  border-color: rgba(220, 53, 69, 0.65);
  background: rgba(220, 53, 69, 0.08);
}
.compose-modal-card { max-width: 640px; }

/* ---------- 25. CRAFTING ---------- */
.craft-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.craft-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.craft-list { display: flex; flex-direction: column; gap: 0.85rem; }
.craft-order-card {
  background: var(--surface-1);
  border: 2px solid var(--gold-primary);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 1rem 1.2rem;
}
.craft-order-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.craft-order-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.craft-order-name { font-family: var(--font-display); font-weight: 600; color: var(--gold-bright); font-size: 1.05rem; }
.craft-order-cost { font-size: 0.82rem; color: var(--text-muted-dark); white-space: nowrap; }
.craft-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.84rem;
  color: var(--text-muted-dark);
  margin-bottom: 0.4rem;
}
.craft-order-meta i { color: var(--gold-dark); }
.craft-helper-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.craft-helper-badge { font-weight: 500; border-color: var(--gold-line-soft) !important; }
.craft-order-comment { font-size: 0.82rem; color: var(--text-muted-dark); margin-bottom: 0.5rem; }
.craft-order-progress { margin-bottom: 0.6rem; }
.craft-order-progress-text { font-size: 0.78rem; color: var(--text-muted-dark); margin-top: 0.3rem; }
.craft-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--gold-line-soft);
}
.craft-order-actions form { display: inline-flex; margin: 0; }
.craft-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-faint);
  padding: 2.2rem 1.5rem;
}
.craft-empty i { font-size: 2rem; margin-bottom: 0.6rem; color: var(--gold-dark); opacity: 0.7; }
.craft-empty p { margin: 0; color: var(--text-muted-dark); }

/* Neuer-Auftrag-Modal: Item-Suche */
.craft-modal-card { max-width: 720px; }
.craft-item-list { max-height: 280px; overflow-y: auto; }
.craft-item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  transition: all var(--t-fast);
}
.craft-item-row:hover { border-color: var(--gold-line); background: var(--surface-2); }
.craft-item-row.is-selected { border-color: var(--gold-primary); background: rgba(var(--accent-rgb), 0.12); }
.craft-item-row input[type="radio"] { margin-top: 0.3rem; flex: 0 0 auto; }
.craft-item-info { flex: 1 1 auto; min-width: 0; }

/* ---------- 26. SHOP / SCHWARZMARKT (Item-Karten) ---------- */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.shop-toolbar h4 { margin: 0; }
.shop-result-count { font-size: 0.82rem; color: var(--text-muted-dark); }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1350px) { .shop-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .shop-grid { grid-template-columns: 1fr; } }
.shop-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface-1);
  border: 2px solid var(--gold-primary);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 0.85rem 0.9rem;
  font-size: 0.92rem;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.shop-card:hover { box-shadow: var(--shadow-2); }
.shop-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: -0.85rem -0.9rem 0.15rem;
  overflow: hidden;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  border-bottom: 1px solid var(--gold-line-soft);
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.16), transparent 48%),
    linear-gradient(145deg, var(--surface-2), var(--surface-1));
}
.shop-card-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  padding: 0.5rem;
}
.shop-card-media-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--text-faint);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}
.shop-card-media-placeholder .shop-card-media-fallback,
.shop-card-media-failed .shop-card-media-fallback {
  display: flex;
}
.shop-card-media-fallback i {
  color: var(--gold-dark);
  font-size: 2rem;
  opacity: 0.75;
}
.shop-card-media-failed img { display: none; }
.shop-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.shop-card-title { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.shop-card-name { font-family: var(--font-display); font-weight: 600; color: var(--gold-bright); font-size: 1.05rem; line-height: 1.3; word-break: break-word; }
.shop-card-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.shop-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.8rem; color: var(--text-muted-dark); }
.shop-card-meta i { color: var(--gold-dark); }
.shop-card-professions { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: var(--text-muted-dark); }
.shop-card-bottom { display: flex; flex-direction: column; gap: 0.3rem; margin-top: auto; }
.shop-card-craft { font-size: 0.78rem; color: var(--text-muted-dark); }
.shop-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--gold-bright);
  padding-top: 0.4rem;
  border-top: 1px solid var(--gold-line-soft);
}
.shop-card-price i { margin-right: 0.3rem; }
.shop-card-price .price-gold { color: var(--color-gold); }
.shop-card-price .price-credit { color: var(--color-credit); }
.shop-card-price .price-coin { color: var(--color-coins); }
.shop-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--gold-line-soft);
}
.shop-card-actions-admin { display: flex; gap: 0.4rem; }
.shop-card-actions-admin form { display: flex; flex: 1 1 0; margin: 0; }
.shop-card-actions-admin .btn { flex: 1 1 0; width: 100%; padding-left: 0.4rem; padding-right: 0.4rem; }
.shop-card-buy-btn { width: 100%; }
.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-faint);
  padding: 2.6rem 1.5rem;
  grid-column: 1 / -1;
}
.shop-empty i { font-size: 2.2rem; margin-bottom: 0.6rem; color: var(--gold-dark); opacity: 0.7; }
.shop-empty p { margin: 0; color: var(--text-muted-dark); }
.shop-modal-card { max-width: 620px; }

/* Rarity-Badges */
.badge-rarity { font-weight: 600; border: 1px solid transparent; }
.badge-rarity-unknown   { background: rgba(255,255,255,0.06); color: var(--text-faint); border-color: rgba(255,255,255,0.12); }
.badge-rarity-common    { background: rgba(255,255,255,0.09); color: #d8d2c4; border-color: rgba(255,255,255,0.18); }
.badge-rarity-uncommon  { background: rgba(63,158,87,0.18); color: #82d99c; border-color: rgba(63,158,87,0.4); }
.badge-rarity-rare      { background: rgba(58,123,189,0.18); color: #82bdec; border-color: rgba(58,123,189,0.4); }
.badge-rarity-very-rare { background: rgba(155,89,182,0.18); color: #d2a4f0; border-color: rgba(155,89,182,0.42); }
.badge-rarity-legendary { background: rgba(var(--accent-rgb), 0.22); color: var(--gold-bright); border-color: var(--gold-line); }
.badge-rarity-artifact  { background: linear-gradient(135deg, rgba(var(--accent-rgb), .28), rgba(179,67,63,.28)); color: #f1e7d2; border-color: rgba(var(--accent-rgb), .45); }

/* ---------- 27. CHARAKTERBOGEN (Pen & Paper Sheet) ---------- */
.sheet-gm-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.25rem;
}
.sheet-gm-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-green);
  border: 2px solid var(--gold-primary);
  color: var(--gold-bright);
  font-size: 1.6rem;
}
.sheet-gm-stat { color: var(--text-muted-dark); margin-top: 0.2rem; }

.sheet-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  margin: 0 auto 1.1rem;
  max-width: 480px;
}
.sheet-portrait-frame {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  border-radius: var(--radius-m);
  border: 2px solid var(--gold-line);
  background: var(--surface-well);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow);
}
.sheet-portrait-frame--photo {
  width: auto;
  height: auto;
  display: block;
  padding: 0;
}
.sheet-portrait-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 280px;
  max-height: 360px;
  object-fit: contain;
  border-radius: inherit;
}
.sheet-portrait-placeholder { font-size: 3.2rem; color: var(--text-faint); }
.sheet-comments-box {
  width: 100%;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-m);
  background: var(--surface-well);
  padding: 0.65rem 0.75rem;
  text-align: left;
}
.sheet-comments-title { font-size: 0.82rem; font-weight: 600; color: var(--gold-bright); margin-bottom: 0.5rem; }
.sheet-comments-grid {
  display: grid;
  /* Spaltenzahl folgt der verfügbaren Breite statt fixer 5 Spalten. */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: 5.5rem;
  gap: 0.5rem;
  max-height: calc(2 * 5.5rem + 0.5rem);
  overflow-y: auto;
}
@media (max-width: 400px) {
  .sheet-comments-grid { grid-template-columns: 1fr; }
}
.sheet-comment-item {
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-s);
  padding: 0.4rem 0.55rem;
  background: var(--surface-1);
  display: flex;
  flex-direction: column;
  /* Einträge dürfen bis zu 200 Zeichen lang sein: harte Kante an der Karte. */
  overflow: hidden;
}
.sheet-comment-item--clickable { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.sheet-comment-item--clickable:hover,
.sheet-comment-item--clickable:focus-visible { border-color: var(--gold-bright); background: var(--surface-2); }
.sheet-comment-meta { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.72rem; color: var(--text-muted-dark); margin-bottom: 0.2rem; }
.sheet-comment-author { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-comment-date { flex-shrink: 0; }
.sheet-comment-text {
  font-size: 0.8rem;
  line-height: 1.35;
  word-break: break-word;
  /* Auf 3 Zeilen kappen; Volltext kommt per Klick ins Modal. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sheet-comment-more { font-size: 0.7rem; color: var(--gold-bright); margin-top: auto; align-self: flex-start; }
.sheet-comment-modal-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

.sheet-identity { width: 100%; min-width: 0; text-align: center; }
.sheet-name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--gold-bright);
  margin: 0;
  line-height: 1.15;
}
.sheet-subtitle { color: var(--text-muted-dark); margin-bottom: 0.6rem; }

.sheet-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.sheet-flag {
  font-family: var(--font-body);
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: var(--surface-well);
  color: var(--text-on-dark);
}
.sheet-flag-cap { border-color: rgba(208,90,82,0.5); color: #e89a93; }
.sheet-flag-bm { border-color: rgba(143,106,51,0.5); color: var(--purple-light); }
.sheet-flag-arcana { border-color: rgba(224,196,104,0.5); color: #e0c468; }

.sheet-beyond-btn { margin-top: 0.3rem; }

.sheet-xp-block {
  background: var(--surface-1);
  border: 2px solid var(--gold-primary);
  border-radius: var(--radius-m);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.1rem;
}
.sheet-xp-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
}
.sheet-xp-track {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--gold-line-soft);
  overflow: hidden;
}
.sheet-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--btn-green-active), var(--green-light));
  transition: width var(--t-base);
}
.sheet-xp-note { color: var(--gold-bright); font-size: 0.85rem; margin-top: 0.4rem; }

.sheet-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.sheet-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--surface-1);
  border: 2px solid var(--gold-primary);
  border-radius: var(--radius-m);
  padding: 0.9rem 0.5rem;
  text-align: center;
}
.sheet-stat-box i { font-size: 1.1rem; color: var(--gold-primary); }
.sheet-stat-box .sheet-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.sheet-stat-box .sheet-stat-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-on-dark);
}
.sheet-stat-gold .sheet-stat-value { color: var(--color-gold); }
.sheet-stat-credit .sheet-stat-value { color: var(--color-credit); }
.sheet-stat-coin .sheet-stat-value { color: #e0c468; }

.sheet-section {
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.1rem;
}
.sheet-section-title {
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-size: 1.02rem;
  margin-bottom: 0.75rem;
}
.sheet-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.sheet-section-title-row .sheet-section-title { margin-bottom: 0; }
.sheet-section-foot { color: var(--text-faint); font-size: 0.78rem; margin-top: 0.5rem; text-align: right; }
.sheet-stammdaten-btn { margin-top: 0.4rem; }

.sheet-weekly-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
}
.sheet-weekly-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: var(--surface-well);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-s);
  padding: 0.7rem 0.4rem;
  text-align: center;
}
.sheet-weekly-box i { font-size: 0.95rem; color: var(--gold-primary); }
.sheet-weekly-box .sheet-stat-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.sheet-weekly-box .sheet-stat-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-bright);
}
.sheet-weekly-box .sheet-stat-value small { font-size: 0.65rem; color: var(--text-muted-dark); }
.sheet-weekly-box.sheet-stat-gold .sheet-stat-value { color: var(--gold-bright); }
.sheet-weekly-box.sheet-stat-credit .sheet-stat-value { color: var(--gold-bright); }
.sheet-weekly-box.sheet-stat-coin .sheet-stat-value { color: var(--gold-bright); }

.sheet-trait-box i { font-size: 1.1rem; }
.sheet-trait-value {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  color: var(--gold-bright) !important;
  text-transform: none;
  line-height: 1.2;
}

.sheet-columns {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
.sheet-inventory-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.sheet-inventory-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.sheet-level-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sheet-inventory-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sheet-inventory-item {
  background: var(--surface-well);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-s);
  padding: 0.55rem 0.75rem;
}
.sheet-inv-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sheet-inv-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.sheet-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.sheet-form-field-wide { grid-column: span 2; }
.sheet-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 0.3rem;
}
.sheet-modal-subtitle {
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin-bottom: 0.85rem;
}
.sheet-admin-modal-card { max-width: 760px; width: 94vw; max-height: 88vh; }

@media (max-width: 1100px) {
  .sheet-columns { grid-template-columns: 1fr; }
  .sheet-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sheet-weekly-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sheet-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sheet-header { flex-direction: column; align-items: center; text-align: center; }
  .sheet-identity { text-align: center; }
  .sheet-flags { justify-content: center; }
  .sheet-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-weekly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-form-grid { grid-template-columns: 1fr; }
  .sheet-form-field-wide { grid-column: span 1; }
}

/* ---------- 28. PEN & PAPER BOGEN ---------- */
.pap-sheet {
  padding: 1.5rem;
  font-family: var(--font-body);
  margin-bottom: 2.5rem;
}
.pap-header-box {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 2px solid var(--gold-line-soft);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}
.pap-header-details {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 992px) {
  .pap-header-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pap-header-details {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .pap-header-details {
    grid-template-columns: 1fr;
  }
}
.pap-header-field {
  background: var(--surface-well);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-s);
  padding: 0.4rem 0.75rem;
  text-align: left;
}
.pap-header-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.15rem;
}
.pap-header-value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold-bright);
  font-size: 0.95rem;
}
.pap-ability-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.pap-ability-box {
  background: var(--surface-well);
  border: 2px solid var(--gold-primary);
  border-radius: var(--radius-m);
  padding: 0.45rem 0.4rem;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast);
}
.pap-ability-box:hover {
  transform: scale(1.03);
  border-color: var(--gold-bright);
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.15);
}
.pap-ability-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.2rem;
}
.pap-ability-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1.1;
}
.pap-ability-sub {
  font-size: 0.62rem;
  color: var(--text-muted-dark);
  margin-top: 0.1rem;
  display: block;
}
.pap-ability-icon {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted-dark);
  margin-bottom: 0.2rem;
}
.stat-level  { color: var(--color-level)  !important; }
.stat-exp    { color: var(--color-exp)    !important; }
.stat-gold   { color: var(--color-gold)   !important; }
.stat-credit { color: var(--color-credit) !important; }
.stat-coins  { color: var(--color-coins)  !important; }
.pap-skill-list {
  background: var(--surface-well);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-m);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}
.pap-skill-list,
.sheet-inventory-scroll,
.sheet-level-scroll {
  scrollbar-width: thin;
}
.pap-skill-list::-webkit-scrollbar,
.sheet-inventory-scroll::-webkit-scrollbar,
.sheet-level-scroll::-webkit-scrollbar {
  width: 6px;
}
.pap-skill-list::-webkit-scrollbar-thumb,
.sheet-inventory-scroll::-webkit-scrollbar-thumb,
.sheet-level-scroll::-webkit-scrollbar-thumb {
  background: var(--gold-line);
  border-radius: 999px;
}
.pap-skill-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--gold-line-soft);
  text-align: left;
}
.pap-skill-item:last-child {
  border-bottom: none;
}
.pap-skill-bubble {
  color: var(--gold-primary);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.pap-skill-name {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-on-dark);
}
.pap-grid {
  display: grid;
  grid-template-columns: 238px 1.25fr 1fr;
  grid-template-rows: 450px 450px;
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .pap-grid {
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
  }
  .pap-grid-right-col {
    grid-column: span 2;
  }
}
@media (max-width: 768px) {
  .pap-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .pap-grid-right-col {
    grid-column: span 1;
  }
}
.pap-grid-center {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
}
.char-card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.char-card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11rem;
  max-width: 100%;
  white-space: nowrap;
}

@media (min-width: 993px) {
  .pap-header-box {
    align-items: start;
  }
  .sheet-identity {
    align-self: stretch;
  }
}

/* ---------- 29. ARCHIV ---------- */
.archive { --k-character: #ecd09a; --k-chronicle: #9dc8e8; --k-place: #6fcf6f; --k-faction: #d98a7a; --k-mission: #c9a0e0; --k-article: #c7ccd1; }
.archive-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 1rem; padding: .5rem .7rem; background: var(--surface-glass); border: 1px solid var(--gold-line-soft); border-radius: var(--radius-m); backdrop-filter: blur(6px); }
.archive-nav > a { padding: .3rem .7rem; border-radius: 999px; color: var(--text-on-dark); text-decoration: none; font-size: .92rem; }
.archive-nav > a:hover { color: var(--text-bright); background: var(--gold-line-soft); }
.archive-nav > a.active { color: var(--gold-bright); background: var(--btn-green); box-shadow: inset 0 0 0 2px var(--gold-primary); }
.archive-search { margin-left: auto; min-width: 200px; }
.archive-new { margin-left: .25rem; }
.archive-kind { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--k-article); }
.archive-kind-character { color: var(--k-character); } .archive-kind-chronicle { color: var(--k-chronicle); }
.archive-kind-place { color: var(--k-place); } .archive-kind-faction { color: var(--k-faction); } .archive-kind-mission { color: var(--k-mission); }
.archive-status { font-size: .7rem; padding: .08rem .45rem; border-radius: 999px; border: 1px solid var(--gold-line); margin-left: .25rem; }
.archive-status-lebt { color: #6fcf6f; border-color: #6fcf6f66; } .archive-status-tot { color: #d98a7a; border-color: #d98a7a66; }
.archive-status-vermisst { color: #e8c36a; border-color: #e8c36a66; } .archive-status-draft { color: #e8c36a; border-color: #e8c36a66; font-style: italic; }
.archive-date { font-size: .8rem; color: var(--text-muted-dark); margin-left: .4rem; }
.archive-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1rem; padding: .5rem .7rem; background: var(--surface-glass); border: 1px solid var(--gold-line-soft); border-radius: var(--radius-m); backdrop-filter: blur(6px); }
.archive-pill { padding: .25rem .75rem; border: 1px solid var(--gold-line-soft); border-radius: 999px; color: var(--text-on-dark); text-decoration: none; font-size: .88rem; }
.archive-pill small { color: var(--text-faint); margin-left: .2rem; }
.archive-pill:hover { background: var(--surface-well); border-color: var(--gold-primary); color: var(--gold-bright); }
.archive-pill.active { background: var(--btn-green); border-color: var(--gold-primary); color: var(--gold-bright); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.archive-card { display: flex; gap: .75rem; padding: .75rem; background: var(--surface-1); border: 2px solid var(--gold-primary); border-radius: var(--radius-m); color: var(--text-on-dark); text-decoration: none; transition: border-color var(--t-fast), transform var(--t-fast); min-width: 0; }
.archive-card:hover { border-color: var(--gold-primary); transform: translateY(-2px); color: var(--text-bright); }
.archive-card-media { flex: 0 0 64px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--btn-green); border: 2px solid var(--gold-primary); overflow: hidden; font-size: 1.6rem; color: var(--gold-bright); }
.archive-card-media img { width: 100%; height: 100%; object-fit: cover; }
.archive-card-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.archive-card-head strong { font-family: var(--font-display); color: var(--gold-bright); overflow-wrap: anywhere; }
.archive-card-summary { font-size: .84rem; color: var(--text-muted-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.archive-chip { display: inline-block; margin: .1rem .15rem .1rem 0; padding: .08rem .55rem; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--gold-line-soft); color: var(--gold-bright); font-size: .8rem; text-decoration: none; }
.archive-chip:hover { border-color: var(--gold-primary); color: var(--text-bright); }
.archive-chip small { color: var(--text-faint); }
.archive-result { padding: .55rem 0; border-bottom: 1px solid var(--gold-line-soft); }
.archive-snippet { font-size: .85rem; color: var(--text-muted-dark); }
.archive-recent { padding: .25rem 0; }
.archive-entry-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.archive-title { font-family: var(--font-display); color: var(--gold-bright); margin: .15rem 0 .3rem; overflow-wrap: anywhere; }
.archive-lead { color: var(--text-muted-dark); font-size: 1.05rem; font-style: italic; }
.archive-actions { display: flex; gap: .4rem; align-items: flex-start; }
.archive-content { overflow-wrap: anywhere; line-height: 1.7; }
.archive-content h1, .archive-content h2, .archive-content h3, .archive-content h4 { font-family: var(--font-display); color: var(--gold-bright); margin: 1.4rem 0 .6rem; }
.archive-content h1 { font-size: 1.6rem; } .archive-content h2 { font-size: 1.35rem; border-bottom: 1px solid var(--gold-line-soft); padding-bottom: .2rem; } .archive-content h3 { font-size: 1.15rem; }
.archive-content img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.archive-content table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.archive-content th, .archive-content td { border: 1px solid var(--gold-line-soft); padding: .35rem .6rem; }
.archive-content th { background: var(--surface-3); }
.archive-content blockquote { border-left: 3px solid var(--gold-line); margin: 1rem 0; padding: .1rem 1rem; color: var(--text-muted-dark); }
.archive-content pre { background: var(--surface-3); padding: .75rem; border-radius: var(--radius-s); overflow: auto; }
.archive-content code { color: var(--gold-bright); }
.archive-content mark { background: rgba(var(--accent-rgb), 0.38); color: var(--text-bright); padding: 0 .2em; border-radius: 3px; }
.archive-content ul.contains-task-list { list-style: none; padding-left: .4rem; }
.archive-content .task-list-item-checkbox { margin-right: .45rem; }
.archive-content .footnotes { font-size: .88rem; color: var(--text-muted-dark); }
.archive-link { text-decoration: none; border-bottom: 1px solid var(--gold-line); color: var(--gold-bright); }
.archive-link:hover { color: var(--text-bright); border-bottom-color: var(--gold-primary); }
.archive-link.archive-kind-character { color: var(--k-character); } .archive-link.archive-kind-chronicle { color: var(--k-chronicle); }
.archive-link.archive-kind-place { color: var(--k-place); } .archive-link.archive-kind-faction { color: var(--k-faction); } .archive-link.archive-kind-mission { color: var(--k-mission); }
.archive-missing { color: #d98a7a; border-bottom: 1px dashed #d98a7a; text-decoration: none; cursor: help; }
a.archive-missing { cursor: pointer; }
a.archive-tag { color: var(--gold-primary); text-decoration: none; }
a.archive-tag:hover { color: var(--text-bright); }
.archive-embed { display: flex; gap: .7rem; align-items: center; max-width: 420px; margin: .6rem 0; padding: .6rem .8rem; background: var(--surface-3); border: 1px solid var(--gold-line-soft); border-left: 3px solid var(--gold-primary); border-radius: var(--radius-s); text-decoration: none; color: var(--text-on-dark); }
.archive-embed img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-s); }
.archive-embed strong { color: var(--gold-bright); display: block; } .archive-embed span { font-size: .85rem; color: var(--text-muted-dark); display: block; }
.archive-callout { margin: 1rem 0; padding: .6rem 1rem .6rem; background: var(--surface-3); border: 1px solid var(--gold-line-soft); border-left: 4px solid var(--c, #9dc8e8); border-radius: var(--radius-s); color: var(--text-on-dark); }
.archive-callout > p:last-child { margin-bottom: 0; }
.archive-callout-title { font-weight: 600; color: var(--c, #9dc8e8); cursor: default; margin-bottom: .3rem; }
details.archive-callout > summary { cursor: pointer; }
.archive-callout-tip, .archive-callout-success { --c: #6fcf6f; } .archive-callout-warning, .archive-callout-question { --c: #e8c36a; }
.archive-callout-danger { --c: #d98a7a; } .archive-callout-lore, .archive-callout-quote { --c: #ecd09a; } .archive-callout-secret { --c: #b79ae8; }
.archive-portrait { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius-s); margin-bottom: .75rem; }
.archive-facts { width: 100%; font-size: .9rem; }
.archive-facts th { width: 38%; color: var(--text-muted-dark); font-weight: 600; vertical-align: top; padding: .15rem .5rem .15rem 0; }
.archive-toc { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.archive-toc .level-2 { padding-left: .8rem; } .archive-toc .level-3 { padding-left: 1.6rem; }
.archive-linkrow { padding: .15rem 0; display: flex; align-items: center; gap: .45rem; }
.archive-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--text-faint); flex: none; }
.archive-dot-character { background: var(--k-character); } .archive-dot-chronicle { background: var(--k-chronicle); }
.archive-dot-place { background: var(--k-place); } .archive-dot-faction { background: var(--k-faction); } .archive-dot-mission { background: var(--k-mission); } .archive-dot-article { background: var(--k-article); }
.archive-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.archive-pager a { display: flex; flex-direction: column; text-decoration: none; padding: .6rem .9rem; border: 1px solid var(--gold-line-soft); border-radius: var(--radius-s); max-width: 48%; }
.archive-pager small { color: var(--text-faint); }
.archive-timeline { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--gold-line); }
.archive-timeline li { position: relative; padding: 0 0 1.2rem 1.2rem; }
.archive-timeline li::before { content: ""; position: absolute; left: -1.62rem; top: .3rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--k-chronicle); box-shadow: 0 0 0 3px var(--stage); }
.archive-timeline-date { font-family: var(--font-display); color: var(--k-chronicle); font-size: .95rem; margin-bottom: .2rem; }
.archive-timeline-card { background: var(--surface-1); border: 1px solid var(--gold-line-soft); border-radius: var(--radius-m); padding: .6rem .9rem; }
.archive-tagrow { padding: .2rem 0; }
.archive-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-bottom: .5rem; }
.archive-toolbar button, .archive-upload { background: var(--surface-3); border: 1px solid var(--gold-line-soft); color: var(--text-on-dark); border-radius: var(--radius-s); padding: .25rem .6rem; cursor: pointer; font-size: .9rem; }
.archive-toolbar button:hover, .archive-upload:hover { border-color: var(--gold-primary); color: var(--text-bright); }
.archive-toolbar-spacer { flex: 1; }
.archive-tab.active { background: var(--btn-green); border-color: var(--gold-primary); color: var(--gold-bright); }
.archive-body { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.55; resize: vertical; min-height: 340px; }
.archive-preview { min-height: 340px; padding: .5rem .25rem; }
.archive-statusline { display: flex; justify-content: space-between; margin-top: .35rem; }
.archive-suggest { position: absolute; z-index: 1060; min-width: 260px; max-width: 420px; max-height: 280px; overflow: auto; background: var(--surface-2); border: 1px solid var(--gold-primary); border-radius: var(--radius-s); box-shadow: var(--shadow-2); }
.archive-suggest button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .35rem .7rem; color: var(--text-on-dark); }
.archive-suggest button:hover, .archive-suggest button.active { background: var(--gold-line); color: var(--text-bright); }
.archive-suggest small { color: var(--text-faint); margin-left: .4rem; }
.archive-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 2rem; gap: .3rem; margin-bottom: .35rem; }
.archive-field-row .btn { padding: .15rem 0; }
.archive-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .6rem; padding: .45rem .8rem; font-size: .88rem; background: var(--surface-glass); border: 1px solid var(--gold-line-soft); border-radius: var(--radius-m); }
.archive-legend label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.archive-graph { position: relative; height: min(72vh, 680px); background: rgba(var(--shade-rgb), 0.86); border: 1px solid var(--gold-line-soft); border-radius: var(--radius-m); overflow: hidden; }
.archive-graph canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.archive-graph-hint { position: absolute; left: .75rem; bottom: .5rem; pointer-events: none; color: var(--text-muted-dark); }
.archive-diff { margin: 0; white-space: pre-wrap; font-size: .88rem; }
.archive-diff .diff-add { display: block; background: #6fcf6f22; color: #b4e6b4; } .archive-diff .diff-del { display: block; background: #d98a7a22; color: #f0b4a8; text-decoration: line-through; text-decoration-color: #d98a7a88; }
.archive-diff .diff-same { display: block; color: var(--text-muted-dark); } .archive-diff .diff-skip { display: block; color: var(--text-faint); }
@media (max-width: 576px) { .archive-search { flex: 1 0 100%; margin-left: 0; } .archive-field-row { grid-template-columns: 1fr; } }

/* ---------- 30. VERWALTUNGSSEITEN (Nutzerliste, Tools) ---------- */
.vw-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.vw-page-title { margin: 0; font-size: 1.25rem; color: var(--gold-bright); }
.vw-page-sub { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--text-muted-dark); }

.vw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  margin-bottom: 1rem;
}
.vw-toolbar-search { position: relative; flex: 1 1 220px; min-width: 0; }
.vw-toolbar-search i { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.vw-toolbar-search .form-control { padding-left: 2.2rem; }
.vw-toolbar-sort { flex: 0 1 260px; width: auto; }

.vw-user-list, .vw-set-group { display: flex; flex-direction: column; gap: 0.5rem; }
.vw-set-group { margin-bottom: 1.5rem; }
.vw-set-heading {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem 0.2rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright);
}

.vw-user, .vw-set-row {
  background: var(--surface-1); border: 2px solid var(--gold-primary); border-radius: var(--radius-m);
  transition: border-color var(--t-fast);
}
.vw-user:hover, .vw-set-row:hover { border-color: var(--gold-line); }
.vw-user-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; padding: 0.7rem 0.9rem; }
.vw-user-id { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 240px; min-width: 0; }
.vw-avatar {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--btn-green); border: 2px solid var(--gold-primary); color: var(--gold-bright);
}
.vw-user-name { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.vw-user-name strong { overflow: hidden; text-overflow: ellipsis; }
.vw-user-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.vw-user-playtime { display: flex; flex-direction: column; font-size: 0.88rem; min-width: 8.5rem; }
.vw-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.vw-user-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; }
.vw-user-inline { padding: 0 0.9rem 0.7rem; }
.vw-user-rights { border-top: 1px solid var(--gold-line-soft); }
.vw-user-rights > form:first-child, .vw-rights-stop { padding: 0.8rem 0.9rem 0; }
.vw-rights-stop { padding-bottom: 0.8rem; }
.vw-user-rights > form:first-child { padding-bottom: 0.8rem; }
.vw-user-rights > form:first-child + .vw-rights-stop { padding-top: 0; margin-top: -0.2rem; }
.vw-rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem 1rem; }
.vw-rights-foundry { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted-dark); }
.vw-rights-actions { margin-top: 0.7rem; }
.vw-empty { padding: 1.5rem; text-align: center; color: var(--text-muted-dark); background: var(--surface-1); border-radius: var(--radius-m); }

.vw-user-menu .dropdown-item { display: flex; align-items: center; gap: 0.6rem; }
.vw-user-menu .dropdown-item i { width: 1.1rem; text-align: center; color: var(--text-muted-dark); }
.vw-user-menu .dropdown-item.text-danger i { color: inherit; }
.vw-user-menu form { margin: 0; }

.vw-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; padding: 0.75rem 0.9rem; }
.vw-set-icon {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-s);
  display: grid; place-items: center; color: var(--gold-bright);
  background: var(--btn-green); border: 2px solid var(--gold-primary);
}
.vw-set-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 260px; min-width: 0; }
.vw-set-text span { font-size: 0.86rem; color: var(--text-muted-dark); }
.vw-set-text b { color: var(--text-on-dark); font-weight: 600; }
.vw-set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; }
.vw-set-actions form { margin: 0; }

@media (max-width: 640px) {
  .vw-user-actions, .vw-set-actions { margin-left: 0; width: 100%; }
}
.vw-count { font-size: 0.82rem; color: var(--text-muted-dark); padding: 0 0.4rem; white-space: nowrap; }
.vw-user-menu {
  min-width: 15rem; padding: 0.35rem; z-index: 1080;
  background: var(--surface-2); border: 1px solid var(--gold-line); border-radius: var(--radius-s);
  box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vw-user-menu .dropdown-item { border-radius: 6px; padding: 0.5rem 0.7rem; color: var(--text-on-dark); background: transparent; }
.vw-user-menu .dropdown-item:hover, .vw-user-menu .dropdown-item:focus { background: rgba(var(--accent-rgb), 0.16); color: var(--gold-bright); }
.vw-user-menu .dropdown-item.text-danger:hover { background: rgba(220, 53, 69, 0.18); }
.vw-user-menu .dropdown-divider { border-color: var(--gold-line-soft); }
.vw-sub { font-size: 0.85rem; color: var(--text-muted-dark); }
.vw-stats { display: flex; gap: 0.4rem; margin: 0; }
.vw-stats > div {
  min-width: 4.6rem; padding: 0.3rem 0.6rem; text-align: center;
  background: var(--surface-3); border: 1px solid var(--gold-line-soft); border-radius: var(--radius-s);
}
.vw-stats dt { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 400; }
.vw-stats dd { margin: 0; font-weight: 600; color: var(--text-on-dark); }
@media (max-width: 640px) { .vw-stats { width: 100%; flex-wrap: wrap; } .vw-stats > div { flex: 1 1 4rem; } }

/* Crafting-Feinschliff */
.craft-toolbar { flex-wrap: wrap; margin-bottom: 1rem; }
.craft-intro { margin: 0; flex: 1 1 280px; padding: 0.5rem 0.8rem; font-size: 0.9rem; color: var(--text-on-dark);
  background: var(--surface-glass); border-radius: var(--radius-s); }
.craft-section { margin-bottom: 1.8rem; }
.craft-section-head h5 { font-size: 1.05rem; color: var(--gold-bright); }
.craft-list { gap: 0.5rem; }
.craft-order-card { position: relative; padding: 0.8rem 1rem 0.8rem 1.3rem; overflow: hidden; }
.craft-order-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--text-faint); }
.craft-status--in_progress::before { background: #3fb36b; }
.craft-status--paused::before { background: #e0a82e; }
.craft-status--pending_accept::before { background: #8a8f98; }
.craft-status--completed::before { background: #4aa3c7; }
.craft-order-head { margin-bottom: 0.3rem; align-items: center; }
.craft-order-id { font-size: 0.78rem; color: var(--text-faint); }
.craft-order-cost { display: flex; align-items: center; gap: 0.35rem; }
.craft-order-cost i { color: var(--gold-dark); }
.craft-dot { color: var(--text-faint); }
.craft-order-actions { margin-top: 0.4rem; }
.craft-invite { width: auto; flex-wrap: nowrap; }
.craft-invite .form-select { width: 170px; }
.craft-seg .btn { --bs-btn-padding-y: 0.15rem; --bs-btn-padding-x: 0.8rem; }
.craft-seg .btn.active { background: var(--btn-green-active); color: var(--text-bright); border-color: var(--gold-bright); }
.craft-section > .vw-toolbar { margin-bottom: 0.7rem; }
.craft-empty { flex-direction: row; gap: 0.7rem; padding: 0.9rem 1.1rem; justify-content: flex-start; text-align: left; }
.craft-empty i { font-size: 1.2rem; margin: 0; }

/* ---------- 31. LAGER (Demo) ---------- */
.stor-demo-note {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; padding: 0.55rem 0.9rem;
  font-size: 0.88rem; border-radius: var(--radius-s);
  background: var(--surface-glass); border: 1px dashed var(--gold-primary); color: var(--text-on-dark);
}
.stor-demo-note i { color: var(--gold-bright); }
.stor-section { margin-bottom: 1.8rem; min-width: 0; }
.stor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.7rem; }
.stor-card { padding: 0.9rem 1rem; background: var(--surface-1); border: 2px solid var(--gold-primary);
  border-radius: var(--radius-m); transition: border-color var(--t-fast), transform var(--t-fast); }
.stor-card:hover { border-color: var(--gold-line); transform: translateY(-1px); }
.stor-card-head { display: flex; align-items: center; gap: 0.6rem; }
.stor-card-head h6 { margin: 0; flex: 1; font-size: 0.95rem; color: var(--text-on-dark); }
.stor-icon { width: 2.2rem; height: 2.2rem; border-radius: var(--radius-s); display: grid; place-items: center;
  color: var(--gold-bright); background: var(--btn-green); border: 2px solid var(--gold-primary); }
.stor-card--water .stor-icon { color: #7cc4ee; }
.stor-card--wood .stor-icon { color: #c79a62; }
.stor-card--food .stor-icon { color: #e08f6a; }
.stor-card--iron .stor-icon { color: #aab4be; }
.stor-trend, .stor-delta { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.stor-trend.is-up, .stor-delta.is-up { color: #6fcf6f; }
.stor-trend.is-down, .stor-delta.is-down { color: #e8806f; }
.stor-amount { margin: 0.6rem 0 0.45rem; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  line-height: 1; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.stor-amount small { margin-left: 0.35rem; font-family: inherit; font-size: 0.75rem; font-weight: 400; color: var(--text-muted-dark); }
.stor-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.stor-bar span { display: block; height: 100%; border-radius: 99px; background: #3fb36b; }
.stor-bar--mid span { background: #e0a82e; }
.stor-bar--low span { background: #d4584a; }
.stor-cap { margin-top: 0.3rem; font-size: 0.75rem; color: var(--text-faint); }
.stor-note { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--text-muted-dark); }
.stor-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1100px) { .stor-columns { grid-template-columns: minmax(0, 1fr); } }
.stor-item .vw-avatar { width: 2.6rem; font-size: 0.85rem; border-radius: var(--radius-s); }
.stor-rarity { background: var(--surface-3); border: 1px solid var(--gold-line-soft); color: var(--text-on-dark); }
.stor-rarity--ungewoehnlich { color: #7fd48a; } .stor-rarity--selten { color: #7cb8f0; }
.stor-rarity--sehr-selten { color: #c49af0; }
.stor-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.stor-log li { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; background: var(--surface-1);
  border: 1px solid var(--gold-line-soft); border-radius: var(--radius-m); }
.stor-log-icon { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  color: var(--gold-bright); background: var(--btn-green); border: 2px solid var(--gold-primary); }
.stor-log-text { flex: 1; min-width: 0; font-size: 0.88rem; }
.stor-log-text small { display: block; color: var(--text-faint); }

/* ---------- 32. BAUPROJEKTE (Demo) ---------- */
.bld-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.bld-summary > div { padding: 0.6rem 0.9rem; text-align: center; background: var(--surface-1);
  border: 1px solid var(--gold-line-soft); border-radius: var(--radius-m); }
.bld-summary strong { display: block; font-size: 1.5rem; line-height: 1.1; color: var(--gold-bright); font-family: var(--font-display); }
.bld-summary span { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted-dark); }
.bld-card { padding-top: 0.9rem; padding-bottom: 1rem; }
.bld-card .craft-order-title .stor-icon { width: 2rem; height: 2rem; }
.bld-progress { display: flex; align-items: center; gap: 0.7rem; margin: 0.4rem 0 0.8rem; }
.bld-progress .stor-bar { flex: 1; }
.bld-progress b { min-width: 2.8rem; text-align: right; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.bld-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; }
@media (max-width: 1100px) { .bld-grid { grid-template-columns: minmax(0, 1fr); } }
.bld-block .vw-label { display: block; margin-bottom: 0.35rem; }
.bld-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bld-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; font-size: 0.82rem;
  border-radius: 99px; background: var(--surface-3); border: 1px solid var(--gold-line-soft); color: var(--text-on-dark); }
.bld-chip i { color: var(--gold-dark); }
.bld-chip.is-met { border-color: rgba(63, 179, 107, 0.5); } .bld-chip.is-met i { color: #6fcf6f; }
.bld-chip.is-missing { border-color: rgba(212, 88, 74, 0.6); background: rgba(212, 88, 74, 0.1); } .bld-chip.is-missing i { color: #e8806f; }
.bld-workers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.bld-workers li { display: flex; align-items: center; gap: 0.6rem; }
.bld-workers .vw-avatar { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }
.bld-wname { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.bld-wname small { color: var(--text-faint); }
.bld-prof { background: rgba(63, 179, 107, 0.18); color: #8fe0a8; border: 1px solid rgba(63, 179, 107, 0.45); }
.bld-none { margin: 0; font-size: 0.85rem; color: var(--text-faint); }
.bld-warning { margin-top: 0.8rem; padding: 0.5rem 0.8rem; font-size: 0.86rem; border-radius: var(--radius-s);
  background: rgba(212, 88, 74, 0.12); border: 1px solid rgba(212, 88, 74, 0.5); color: #f0a398; }
.bld-blocked::before { background: #d4584a !important; }

/* Foundry-Importstatus als Band unten im Charakterbild */
.sheet-portrait-frame { position: relative; }
.sheet-portrait-status {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3rem 0.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-bright);
  background: rgba(var(--shade-rgb), 0.78); border-top: 1px solid var(--gold-line);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sheet-portrait-status--done { background: rgba(31, 122, 70, 0.88); border-top-color: rgba(111, 207, 111, 0.6); }
.sheet-portrait-status--failed { background: rgba(160, 45, 38, 0.9); border-top-color: rgba(232, 128, 111, 0.7); }
.sheet-portrait-status--running, .sheet-portrait-status--pending { background: rgba(60, 64, 72, 0.88); }
.sheet-portrait-status-form { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.sheet-portrait-status-form .sheet-portrait-status { position: static; width: 100%; border-width: 1px 0 0; font-family: inherit; cursor: pointer; transition: filter var(--t-fast); }
.sheet-portrait-status.is-action:hover, .sheet-portrait-status.is-action:focus-visible { filter: brightness(1.25); }
.sheet-portrait-status-icon { opacity: 0.65; font-size: 0.7rem; }
.sheet-portrait-status.is-action:hover .sheet-portrait-status-icon { opacity: 1; }