/* Tibiapoint Design System — the single visual source for every static route.
   Primitives -> semantic aliases -> component tokens live together because this
   is one dark-default product rather than a theme switcher. */
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/AlegreyaSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  /* Primitives */
  --tp-ink-950: #17110c;
  --tp-ink-900: #1f170f;
  --tp-ink-800: #2a2018;
  --tp-ink-700: #4d3a28;
  --tp-text-100: #efe3c6;
  --tp-text-300: #c8b790;
  --tp-gold: #e8b04b;
  --tp-gold-deep: #b47f2a;
  --tp-gold-bright: #f2c15c;
  --tp-gold-mid: #c98f2c;
  --tp-gold-edge: #ffe6a0;
  --tp-wine: #9c3939;
  --tp-green: #5aa64a;
  --tp-green-deep: #3f7a34;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: .875rem;

  /* Semantic */
  --color-bg: var(--tp-ink-950);
  --color-surface: var(--tp-ink-900);
  --color-surface-raised: var(--tp-ink-800);
  --color-fg: var(--tp-text-100);
  --color-muted: var(--tp-text-300);
  --color-border: var(--tp-ink-700); /* decorative dividers and cards */
  --color-control-border: var(--tp-ink-700); /* fields and selects */
  --color-accent: var(--tp-gold); /* links and keyboard focus */
  --color-action: var(--tp-gold-bright);
  --color-action-hover: var(--tp-gold-mid);
  --color-action-fg: #2a1c0a;
  --color-danger: var(--tp-wine);
  --color-danger-hover: var(--tp-wine);
  --color-success: var(--tp-green);
  --color-success-deep: var(--tp-green-deep);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* Components */
  --button-bg: linear-gradient(180deg, var(--tp-gold-bright), var(--tp-gold-mid));
  --button-fg: #2a1c0a;
  --button-neutral-bg: linear-gradient(180deg, var(--tp-ink-800), var(--tp-ink-900));
  --button-border: var(--tp-gold-edge);
  --button-neutral-border: var(--tp-ink-700);
  --button-radius: 9px;
  --input-bg: var(--color-surface);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 16%);
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: clamp(2rem, 5vw, 3.25rem);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui: "Alegreya Sans", var(--font-sans);
  --max-width: 70rem;
}

* { box-sizing: border-box; }
html { background: var(--color-bg); color-scheme: dark; }
body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background-color: #17110c; /* exact Stammtisch nav.css fallback */
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,154,60,.12), transparent 60%),
    radial-gradient(900px 500px at 15% 20%, rgba(255,154,60,.06), transparent 55%),
    linear-gradient(180deg, rgba(15,11,7,.60), rgba(15,11,7,.74)),
    url("https://static.tibia.com/images/mmorpg/version_10/backdrop_artwork_bg_landscape.webp");
  background-position: center, center, center, center top;
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-fg);
  font: var(--font-size-base) / 1.5 var(--font-sans);
  letter-spacing: .005em;
}

/* Shell */
header {
  position: relative;
  z-index: 10; /* aufklappende Menues der Kopfzeile liegen ueber dem Seiteninhalt samt .page-close */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: max(.5rem, env(safe-area-inset-top)) max(var(--space-2), env(safe-area-inset-right)) .5rem max(var(--space-2), env(safe-area-inset-left));
  border-bottom: 1px solid var(--color-border);
  background: rgba(18,13,8,.94);
}
header > a:not(.header-mode-zone) {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 2.75rem;
  text-decoration: none;
  position: relative;
  z-index: 2;
}
.header-mode-zone { position: absolute; z-index: 0; inset-block: 0; width: 50%; }
.header-mode-zone--character { inset-inline-start: 0; }
.header-mode-zone--world { inset-inline-end: 0; }
header nav { position: static; }
header nav > a:not(.header-mode-link), .header-character, .header-world, .header-notifications, .header-menu { position: relative; z-index: 2; }
.header-wordmark { display: block; width: 7rem; height: auto; }
header nav { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; gap: .25rem; }
header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem .625rem;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}
header nav a[hidden] { display: none; }
header nav a:hover { background: var(--color-surface-raised); color: var(--color-fg); }
.header-menu { position: static; margin-inline-start: .5rem; }
.header-menu[hidden] { display: none; }
.header-menu__trigger { display: grid; width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; place-items: center; padding: .5rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); cursor: pointer; }
.header-menu__icon { display: grid; width: 1.2rem; gap: .22rem; }
.header-menu__icon span { display: block; height: 2px; border-radius: 1px; background: currentColor; }
.header-menu__panel { position: absolute; z-index: 10; inset-block-start: calc(100% + .5rem); inset-inline-end: max(var(--space-2), env(safe-area-inset-right)); display: grid; width: max-content; max-width: min(18rem, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: min(70vh, 34rem, calc(100dvh - 8rem)); overflow-y: auto; overscroll-behavior: contain; padding: .35rem; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.header-menu__panel[hidden] { display: none; }
.header-menu__section { display: grid; gap: .125rem; padding-block-end: .25rem; }
.header-menu__section + .header-menu__section { padding-block-start: .25rem; border-block-start: 1px solid var(--color-border); }
.header-menu__panel a { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem .65rem; border-radius: var(--radius-sm); color: var(--color-fg); font-size: var(--font-size-base); overflow-wrap: anywhere; text-decoration: none; }
.header-menu__panel a[hidden], .header-menu__panel button[hidden], .header-menu__section[hidden] { display: none; }
.header-menu__panel a:hover { background: var(--color-surface-raised); color: var(--color-fg); }
.header-menu__panel .header-menu__heading { color: var(--color-accent); font-weight: 700; }
.header-menu__section:not(:first-child) > a:not(.header-menu__heading) { padding-inline-start: 1.35rem; }
.header-menu__logout { width: 100%; min-height: 2.75rem; margin-block-start: .25rem; padding: .5rem .65rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); font: inherit; text-align: start; cursor: pointer; }
.header-menu__logout:hover { background: var(--color-surface-raised); }
.header-menu__status:not(:empty) { margin: .25rem .65rem; color: var(--color-danger); font-size: .9rem; }
.header-character__select {
  min-height: 2.75rem;
  padding: var(--space-1);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-fg);
  font: inherit;
  field-sizing: content;
}
.header-character { display: inline-flex; width: max-content; max-width: 100%; flex: 0 1 auto; min-width: 0; min-height: 2.75rem; }
.header-character[hidden] { display: none; }
.header-character__select { width: auto; max-width: 100%; min-width: 0; }
.header-character__select:disabled { opacity: .7; }
.header-mode-link, .header-notifications { display: inline-flex; flex: 0 0 2.75rem; width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-sm); color: var(--color-muted); text-decoration: none; }
.header-mode-link { position: absolute; z-index: 2; top: .5rem; left: calc(50% - 2.875rem); width: 2.75rem; min-width: 2.75rem; height: 2.75rem; }
.header-mode-link--world { left: calc(50% + .125rem); }
.header-mode-link svg { width: 1.8rem; height: 1.8rem; }
.header-mode-link.is-active, .header-mode-link[aria-current="page"] { color: var(--color-accent); }
.header-mode-link:hover, .header-notifications:hover { background: var(--color-surface-raised); color: var(--color-fg); }
.header-mode-link.is-active:hover, .header-mode-link[aria-current="page"]:hover { color: var(--color-accent); }
.header-mode-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.header-world { display: inline-flex; width: max-content; max-width: 100%; flex: 0 1 auto; min-width: 0; min-height: 2.75rem; }
.header-world[hidden] { display: none; }
.header-world__select { width: auto; max-width: 100%; min-width: 0; min-height: 2.75rem; padding: var(--space-1); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); font: inherit; field-sizing: content; }
.header-world__select:disabled { opacity: .7; }
.header-notifications { position: relative; }
.header-notifications__icon { line-height: 1; }
.header-notifications__badge {
  position: absolute;
  top: -.5rem;
  right: -.2rem;
  min-width: 1.1rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-bg);
  color: var(--color-fg);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}
.header-notifications__badge[hidden] { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a { color: var(--color-accent); text-underline-offset: .18em; }
main a:visited { color: var(--color-accent); }
header a:focus-visible,
header select:focus-visible,
main a:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Programmatische Fokusziele (tabindex="-1") sind nicht per Tab erreichbar; ein Rahmen um ganze Abschnitte ist ein Anzeigefehler (gemeldet 2026-10-05). Bedienelemente und Rollen mit sichtbarem Fokus bleiben ausgenommen. */
:is(main, section, article, div, header, h1, h2, h3, h4, p, ul, ol, li)[tabindex="-1"]:not([role="button"], [role="tab"], [role="option"], [role="menuitem"]):focus { outline: none; }

/* Layout and content */
main {
  position: relative;
  flex: 1 0 auto;
  width: min(100%, var(--max-width));
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem) max(var(--space-2), env(safe-area-inset-right)) clamp(2rem, 5vw, 4rem) max(var(--space-2), env(safe-area-inset-left));
}
.page-close-host { position: relative; }
.page-close { position: absolute; z-index: 2; inset-block-start: var(--space-1); inset-inline-end: max(var(--space-2), env(safe-area-inset-right)); display: grid; place-items: center; box-sizing: border-box; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid var(--button-border); border-radius: var(--button-radius); background: var(--button-bg); color: var(--button-fg); font: 600 1.25rem/1 var(--font-ui); text-decoration: none; }
main a.page-close:visited { color: var(--button-fg); }
.page-close:hover { filter: brightness(1.12); }
.page-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 40rem) {
  .page-close-host.has-page-close:not(.character-page) h1, .page-close-host.has-page-close:not(.character-page) > h2 { max-width: calc(100% - 3.5rem); }
  .character-page.has-page-close #character-status { max-width: calc(100% - 3.5rem); }
}
.world-board-tiles__guild-card, .world-board-tiles__soulcore-card, .world-board-tiles__boss-card, .world-board-tiles__quest-card { position: relative; padding: 0; }
.world-board-tiles__guild-link, .world-board-tiles__soulcore-link, .world-board-tiles__boss-link, .world-board-tiles__quest-link { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-3); border-radius: inherit; color: var(--color-accent); text-decoration: none; }
.world-board-tiles__guild-card:focus-within, .world-board-tiles__soulcore-card:focus-within, .world-board-tiles__boss-card:focus-within, .world-board-tiles__quest-card:focus-within { border-color: var(--color-accent); }
.world-board-tiles__guild-link:focus-visible, .world-board-tiles__soulcore-link:focus-visible, .world-board-tiles__boss-link:focus-visible, .world-board-tiles__quest-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Daily World Info (Worldboard): eine Kachel ueber die ganze Rasterbreite (auf allen Breiten, Guilds und
   Soulcore folgen darunter) mit Karten im Stil des Stammtisch-Beobachters, aber kompakter: Handy eine
   Spalte, ab 40rem zwei, ab 64rem drei Karten nebeneinander. Gebaut von world-board/world-daily.js;
   Bilder und Farben nur ueber Klassen und Tokens, Akzentfarben im Block darunter. */
.pillars > .world-board-tiles__daily-card { grid-column: 1 / -1; align-items: stretch; justify-content: flex-start; gap: var(--space-1); min-width: 0; color: var(--color-fg); text-align: start; }
.world-daily__title { margin: 0; color: var(--color-accent); font-size: var(--font-size-lg); overflow-wrap: anywhere; }
.world-daily__note, .world-daily__status { margin: 0; color: var(--color-muted); font-size: .875rem; }
.world-daily__status.is-error { padding-inline-start: var(--space-1); border-inline-start: 3px solid var(--color-danger); color: var(--color-fg); }
.world-daily__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.world-daily__heading { margin: var(--space-1) 0 0; font-size: var(--font-size-base); }
.world-daily__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .world-daily__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .world-daily__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.world-daily__row { --daily-accent: var(--color-accent); position: relative; display: flex; gap: var(--space-1); align-items: flex-start; min-width: 0; min-height: 6.5rem; overflow: hidden; padding: var(--space-1) 5.25rem var(--space-1) var(--space-2); border: 1px solid color-mix(in srgb, var(--daily-accent) 52%, var(--color-border)); border-radius: var(--radius-md); background: var(--color-surface-raised); box-shadow: inset 4px 0 0 var(--daily-accent); }
.world-daily__sprite { position: absolute; right: var(--space-1); bottom: var(--space-1); width: 3.75rem; height: 3.75rem; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.world-daily__sprite--glyph { display: grid; place-items: center; color: var(--daily-accent); font-size: 2.5rem; line-height: 1; }
.world-daily__text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.world-daily__label { display: flex; align-items: center; gap: .4rem; color: var(--color-muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.world-daily__label::before { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--daily-accent); }
.world-daily__line { font-size: .9rem; }
.world-daily__muted { color: var(--color-muted); }
/* Gold's-Portal-Karte: Wechselzeiten als Chips, vergangene abgeblendet, der naechste in der Akzentfarbe. */
.world-daily__portal-times { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.world-daily__portal-time { padding: .1rem .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: .75rem; font-variant-numeric: tabular-nums; }
.world-daily__portal-time.is-past { opacity: .55; text-decoration: line-through; }
.world-daily__portal-time.is-next { border-color: var(--daily-accent); background: var(--daily-accent); color: var(--color-bg); font-weight: 700; }
.world-daily__mwc { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.world-daily__mwc-item { padding: .1rem .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: .85rem; }
@media (min-width: 40rem) { .world-daily__row--wide { grid-column: span 2; } }
.world-daily__order { display: flex; flex-wrap: wrap; gap: .25rem; margin: .25rem 0 0; padding: 0; list-style: none; font-size: .75rem; color: var(--color-muted); }
.world-daily__order-item { padding: .1rem .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.world-daily__order-item.is-today { border-color: var(--daily-accent); color: var(--color-fg); font-weight: 700; }
/* Akzentfarben je Kartentyp, uebernommen vom Stammtisch-Beobachter (--daily-accent). Event-Karten
   setzen ihre Farbe zur Laufzeit per CSSOM (world-daily.js, EVENT_ACCENTS); ohne Angabe gilt das Token. */
.world-daily__row--creature { --daily-accent: #55ca73; }
.world-daily__row--boss { --daily-accent: #e25a57; }
.world-daily__row--minidc { --daily-accent: #53aee5; }
.world-daily__row--rashid { --daily-accent: #e5ce47; }
.world-daily__row--portal { --daily-accent: #2fbfa8; }
.world-daily__row--mwc { --daily-accent: #61d895; }
.world-daily__row--drome { --daily-accent: #bd75ec; }
/* How-to-Anleitungen (/how-to/): Screenshots skalieren auf die Kartenbreite, nie darueber hinaus. */
.how-to__hint { color: var(--color-muted); }
.how-to__tabs { display: flex; gap: .35rem; min-width: 0; max-width: 100%; margin-block: var(--space-2); padding: .15rem .1rem .5rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.how-to__tab { flex: 0 0 auto; min-height: 2.75rem; white-space: nowrap; }
.how-to__tab[aria-selected="true"] { border-color: var(--button-border); background: var(--button-bg); color: var(--button-fg); }
.how-to__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.how-to__panel[hidden] { display: none; }
.how-to__steps { display: grid; gap: var(--space-3); margin: 0; padding-inline-start: 1.5rem; }
.how-to__step { min-width: 0; }
.how-to__step h3 { margin: 0 0 var(--space-1); }
.how-to__step p { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.how-to__step .how-to__requirement { padding: .5rem .75rem; border-inline-start: 3px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-fg); font-weight: 600; }
.how-to__shot { display: inline-block; max-width: 100%; border-radius: var(--radius-sm); }
.how-to__shot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.how-to__shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
@media (max-width: 40rem) { .how-to__steps { padding-inline-start: 1.1rem; } }
main > section:not(.hero):not(.pillars):not(.status):not(.notfound):not(.loot-ledger):not(.character-page) {
  margin-block: var(--space-2);
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
h1, h2, h3, h4, h5 { color: var(--color-fg); line-height: 1.2; letter-spacing: -.02em; }
h1, h2, h3 { color: var(--color-accent); }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
.hero { max-width: 46rem; margin: 0 auto; padding: clamp(2rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 3rem); text-align: center; }
.hero h1 { margin: 0 0 var(--space-2); font-size: var(--font-size-xl); letter-spacing: -.04em; }
.hero-brand img { display: block; width: clamp(15rem, 55vw, 29rem); height: auto; margin-inline: auto; }
.hero p { margin: 0; color: var(--color-muted); font-size: var(--font-size-lg); }
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--space-2); padding: 0; }
.pillars article,
.verify-list__item,
.notifications__item {
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.pillars article { display: flex; flex-direction: column; padding: var(--space-3); }
.pillars h2 { margin: 0 0 var(--space-1); font-size: var(--font-size-base); }
.pillars p, .verify__preview-note, .notifications__meta, .legal__updated { color: var(--color-muted); }
.pillars article p:last-child { margin-top: auto; }
.pillars a, main a { font-weight: 600; }
/* Kachel: die GANZE Karte ist der Link (Dashboard). Farbe der Zeichnung kommt ueber
   currentColor aus .tile, damit Pfeile und Rechner im SVG ohne eigene Farbwerte
   auskommen; die Sprites bleiben durch image-rendering pixelig statt verwaschen. */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--color-accent);
  text-decoration: none;
  transition: border-color .15s ease;
}
.pillars > .tile { min-height: 12.5rem; justify-content: center; }
#dashboard-tiles > .tile { min-height: 14rem; justify-content: center; }
#dashboard-tiles > .dashboard-tile { position: relative; display: flex; min-width: 0; min-height: 14rem; }
#dashboard-tiles > .dashboard-tile[hidden] { display: none; }
#dashboard-tiles > .dashboard-tile > .tile { flex: 1; min-height: 14rem; justify-content: center; }
#dashboard-tiles > .dashboard-tile > .tile > .tile__label { width: 100%; margin-block-start: auto; justify-content: center; text-align: center; overflow-wrap: anywhere; }
#dashboard-tiles > .tile > .tile__label { width: 100%; margin-block-start: auto; justify-content: center; text-align: center; overflow-wrap: anywhere; }
.tile[hidden] { display: none; }
.dashboard-tile[hidden] { display: none; }
.tile[data-test-badge] { position: relative; }
.tile[data-test-badge]::before { content: attr(data-test-badge); position: absolute; top: .5rem; left: .6rem; z-index: 1; color: #e0443a; font: 700 .8rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.dashboard-tile[data-test-badge] { position: relative; }
.dashboard-tile[data-test-badge]::before { content: attr(data-test-badge); position: absolute; top: .5rem; left: .6rem; z-index: 1; color: #e0443a; font: 700 .8rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.dashboard-tile__info { position: absolute; z-index: 2; inset-block-start: .5rem; inset-inline-end: .5rem; display: grid; place-items: center; width: 1.875rem; min-width: 1.875rem; height: 1.875rem; min-height: 1.875rem; padding: 0; border: 1px solid var(--color-control-border); border-radius: 50%; background: var(--color-surface-raised); color: var(--color-muted); font: 700 1rem/1 var(--font-ui); cursor: pointer; }
.dashboard-tile__info:focus-visible, .dashboard-tile-info__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dashboard-tile-info { --dashboard-safe-top: env(safe-area-inset-top, 0px); --dashboard-safe-right: env(safe-area-inset-right, 0px); --dashboard-safe-bottom: env(safe-area-inset-bottom, 0px); --dashboard-safe-left: env(safe-area-inset-left, 0px); position: fixed; inset: auto; z-index: 10; width: min(24rem, calc(100vw - 1rem - var(--dashboard-safe-left) - var(--dashboard-safe-right))); max-height: min(24rem, calc(100dvh - 1rem - var(--dashboard-safe-top) - var(--dashboard-safe-bottom))); overflow: auto; margin: 0; padding: .75rem; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); color: var(--color-fg); box-shadow: var(--card-shadow); }
.dashboard-tile-info:not(:popover-open) { display: none; }
.dashboard-tile-info__header { display: flex; align-items: center; gap: .5rem; }
.dashboard-tile-info__header h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--font-size-base); overflow-wrap: anywhere; }
.dashboard-tile-info p { margin: .5rem 0 0; color: var(--color-muted); font-weight: 400; overflow-wrap: anywhere; }
.dashboard-tile-info__close { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; flex: none; padding: 0; border: 1px solid var(--card-border); border-radius: 50%; background: var(--card-bg); color: var(--color-fg); font-size: 1.15rem; cursor: pointer; }
.dashboard-tile-info__close[hidden] { display: none; }
.dashboard-tile-tools { display: flex; justify-content: flex-end; margin-block: 0 1rem; }
.dashboard-tile-dialog { width: min(34rem, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: min(90dvh, 44rem, calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))); overflow: auto; padding: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
.dashboard-tile-dialog::backdrop { background: rgb(0 0 0 / .72); }
.dashboard-tile-dialog__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; padding: var(--space-3); }
.dashboard-tile-dialog__header, .dashboard-tile-dialog__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.dashboard-tile-dialog__header { flex-wrap: wrap; }
.dashboard-tile-dialog__header h2 { flex: 1 1 12rem; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.dashboard-tile-dialog__header > button { margin-inline-start: auto; }
.dashboard-tile-dialog__actions { flex-wrap: wrap; }
.dashboard-tile-dialog__actions button { flex: 1 1 8rem; min-width: 0; }
.dashboard-tile-order { display: grid; gap: .5rem; width: 100%; min-width: 0; margin: 0; padding-inline-start: 1.25rem; }
.dashboard-tile-order li { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-width: 0; padding: .5rem; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card-bg); }
.dashboard-tile-order li span { flex: 1 1 6rem; min-width: 0; overflow-wrap: anywhere; }
.dashboard-tile-order li[aria-hidden="true"] { opacity: .68; }
.dashboard-tile-order li div { display: flex; gap: .35rem; }
.dashboard-tile-order button { min-width: 2.75rem; min-height: 2.75rem; padding: .25rem; }
.dashboard-tile-status:empty { display: none; }
.tile:hover, .tile:focus-visible { border-color: var(--color-accent); }
.tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tile__art { width: 100%; max-width: 15rem; height: auto; image-rendering: pixelated; }
.account-tile__knight--static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .account-tile__knight--animated { display: none; }
  .account-tile__knight--static { display: inline; }
}
.tile__label { display: inline-flex; align-items: center; gap: .45em; color: var(--color-fg); font-size: var(--font-size-lg); font-weight: 600; }
.character-tile__label { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
#dashboard-tiles > .dashboard-tile--hunt .tile__art,
#dashboard-tiles > .dashboard-tile--loot .tile__art,
#dashboard-tiles > .dashboard-tile--guild .guild-tile__art,
#dashboard-tiles > .dashboard-tile--review .tile__art,
#dashboard-tiles > [data-dashboard-tile="admin"] .tile__art,
#dashboard-tiles > [data-dashboard-tile="how-to"] .tile__art { transform: translateY(.75rem); }
.guild-tile__art { position: relative; width: 100%; max-width: 15rem; }
.guild-tile__art > .tile__art { display: block; }
.guild-tile__logo { position: absolute; inset-block-start: 8%; inset-inline-start: 1%; width: 36%; height: 84%; object-fit: contain; image-rendering: auto; }
.guild-tile__logo[hidden] { display: none; }
.character-tile__art { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 7rem; }
.character-tile__symbols { display: grid; grid-template-rows: repeat(2, 1fr); gap: .25rem; width: 3rem; height: 7rem; flex: none; }
.character-tile__symbols img { display: block; width: 3rem; height: 3rem; object-fit: contain; image-rendering: pixelated; }
.dashboard-wheel-miniature { position: relative; width: 7rem; height: 7rem; flex: none; }
.dashboard-wheel-miniature img, .dashboard-wheel-miniature svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.dashboard-wheel-miniature svg { pointer-events: none; }
.tile__diskette { width: 1em; height: 1em; flex: none; }
.pillars a:hover, main a:hover { color: var(--color-fg); }
.status { margin-top: var(--space-3); padding: var(--space-3) 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); color: var(--color-muted); text-align: center; }
.home-login-cta { display: grid; gap: .15rem; margin-block-start: var(--space-2); padding: .75rem var(--space-2); border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); color: var(--color-fg); text-decoration: none; }
.home-login-cta h2 { margin: 0; font-size: var(--font-size-base); }
.home-login-cta p { margin: 0; color: var(--color-muted); font-size: .9rem; font-weight: 400; }
.home-login-cta:hover { border-color: var(--color-accent); color: var(--color-fg); }
.home-login-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-login-cta[hidden] { display: none; }
.loot-splitter__heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.loot-splitter__heading h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
/* Das Schliessen-Kreuz der Seite sitzt oben rechts; die Kachel daneben rueckt nach links. */
.loot-splitter.has-page-close .loot-splitter__heading { padding-inline-end: 3.5rem; }
.loot-manager__heading { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.loot-manager__heading h1 { margin: 0; }
.loot-ledger #loot-ledger-active-character { width: fit-content; max-width: 100%; margin: var(--space-1) 0; padding: .35rem .65rem; font-size: .9rem; }
.loot-manager__tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.loot-manager__tile { min-width: 0; padding: var(--space-3); border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.loot-manager__tiles > .loot-manager__tile--wide:first-child { color: var(--color-fg); }
.loot-manager__tile--wide { grid-column: 1 / -1; }
.loot-manager__action { width: 100%; height: 13.5rem; justify-content: center; cursor: pointer; font: inherit; }
.loot-manager__manual-art, .loot-manager__history-art, .loot-manager__balances-art, .loot-manager__trusted-art { width: 100%; max-width: 10rem; height: 7rem; flex: none; image-rendering: auto; }
.loot-manager__manual-art image, .loot-manager__history-art image, .loot-manager__balances-art image, .loot-manager__trusted-art image { image-rendering: pixelated; }
.loot-manager__market-symbol, .loot-manager__moneybag { image-rendering: auto; mix-blend-mode: screen; }
.loot-manager__balance-arrow { stroke: var(--color-fg); }
.loot-manager__balances-art--incoming .loot-manager__balance-arrow--incoming { stroke: #7ec06e; }
.loot-manager__balances-art--outgoing .loot-manager__balance-arrow--outgoing { stroke: #e0794f; }
.loot-manager__action .tile__label { max-width: 100%; justify-content: center; text-align: center; overflow-wrap: anywhere; }
.loot-manager__splitter { box-sizing: border-box; width: 10rem; height: 6.75rem; min-height: 0; gap: .2rem; padding: .4rem; justify-content: center; justify-self: end; }
.loot-manager__splitter .tile__art { width: 100%; max-width: 8rem; flex: none; }
.loot-manager__splitter .tile__label { max-width: 100%; font-size: .75rem; line-height: 1; text-align: center; overflow-wrap: anywhere; }
.loot-manager__analyzer { box-sizing: border-box; width: 7rem; height: 6.75rem; min-height: 0; gap: .2rem; padding: .4rem; justify-content: center; justify-self: end; cursor: pointer; font: inherit; }
.loot-manager__analyzer img { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.loot-manager__analyzer .tile__label { max-width: 100%; font-size: .75rem; line-height: 1; text-align: center; text-transform: none; overflow-wrap: anywhere; }
.loot-analyzer__results section { min-width: 0; margin-block: var(--space-3); }
.loot-analyzer__results ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-1); padding: 0; list-style: none; }
.loot-analyzer__results li { display: flex; min-width: 0; align-items: center; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--card-border); border-radius: var(--card-radius); }
.loot-analyzer__results img { width: 48px; height: 48px; flex: none; object-fit: contain; image-rendering: pixelated; }
.loot-analyzer__results li span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.loot-analyzer__results li strong { flex: none; }
.loot-analyzer__modes { display: flex; min-width: 0; margin: 0 0 var(--space-2); border-bottom: 1px solid var(--color-border); }
.loot-analyzer__tab { flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding: .5rem .65rem; border: 1px solid var(--button-neutral-border); border-bottom: 0; border-radius: var(--button-radius) var(--button-radius) 0 0; background: var(--button-neutral-bg); color: var(--color-muted); font: inherit; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.loot-analyzer__tab + .loot-analyzer__tab { margin-inline-start: -1px; }
.loot-analyzer__tab[aria-selected="true"] { position: relative; border-color: var(--button-border); background: var(--button-bg); color: var(--button-fg); }
.loot-analyzer__tab:focus-visible { z-index: 1; outline: none; box-shadow: var(--focus-ring); }
.loot-analyzer__fields[role="tabpanel"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.loot-analyzer__fields { display: grid; min-width: 0; gap: var(--space-1); }
.loot-analyzer__fields[hidden], .loot-analyzer__hunt-controls[hidden] { display: none; }
.loot-analyzer__hunt-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); min-width: 0; }
.loot-analyzer__select-field { display: grid; min-width: 0; gap: .25rem; }
.loot-analyzer__select-field label { min-width: 0; overflow-wrap: anywhere; }
.loot-analyzer__hunt-controls select { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 2.75rem; }
.loot-analyzer__fields p, .loot-analyzer #loot-analyzer-status, .loot-analyzer #loot-analyzer-error { margin-block: var(--space-1); overflow-wrap: anywhere; }
.loot-analyzer #loot-analyzer-retry { margin-block: var(--space-1); }
.loot-analyzer__results > p { overflow-wrap: anywhere; }
.loot-analyzer [hidden] { display: none; }

.loot-manager__dialog { width: min(52rem, calc(100vw - 2rem)); max-width: none; max-height: min(88vh, 54rem); margin: auto; padding: var(--space-3); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--color-bg); color: var(--color-fg); box-shadow: var(--card-shadow); }
.loot-manager__dialog::backdrop { background: rgb(0 0 0 / 68%); }
.loot-manager__dialog-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.loot-manager__dialog-head h2 { margin: 0; overflow-wrap: anywhere; }
.loot-manager__dialog form { display: grid; gap: var(--space-1); }
#loot-ledger-import-fields, #loot-ledger-manual-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.loot-manager__dialog input, .loot-manager__dialog textarea, .loot-manager__dialog select { width: 100%; max-width: 100%; }
.loot-manager__dialog button { min-height: 2.75rem; }
.loot-manager__dialog :focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (min-width: 40rem) { .loot-manager__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .loot-manager__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .loot-manager__heading { grid-template-columns: minmax(0, 1fr) 6.5rem 5rem; gap: var(--space-1); } .loot-manager__splitter { width: 6.5rem; height: 6.75rem; } .loot-manager__analyzer { width: 5rem; height: 6.75rem; } .loot-manager__dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-2), env(safe-area-inset-right)) max(var(--space-2), env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left)); } .loot-manager__dialog-head { align-items: center; } }
@media (max-width: 520px) { .loot-manager__heading h1 { font-size: clamp(1.3rem, 6.7vw, 1.75rem); } }
.notfound { max-width: 32rem; margin: clamp(2rem, 10vw, 7rem) auto; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); text-align: center; }
#reco-status button, #loot-ledger-error button { margin-inline-start: .75rem; margin-block: .25rem; }
.sensitive-form-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.login, .recover, .verify { max-width: 42rem; margin-inline: auto; }
#login-submit-btn { margin-block-start: 10px; }
main :is(p, div)[role="alert"]:not([hidden]),
main :is(p, div)[aria-live="polite"]:not([hidden]):not(:empty):not(.loot-ledger__list-status):not(.hunt-optimizer__status):not(.sr-only) {
  margin-block: var(--space-2);
  padding: var(--space-1) var(--space-2);
  overflow-wrap: anywhere;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}
main :is(p, div)[role="alert"]:not([hidden]) { border-color: var(--color-danger); background: var(--color-surface-raised); color: var(--color-fg); }

/* Native controls */
label { display: block; margin: var(--space-2) 0 var(--space-1); color: var(--color-fg); font-size: .9375rem; font-weight: 650; }
textarea,
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
select {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-1);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--color-fg);
  font: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
textarea { min-height: 8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
textarea:hover,
input:not([type]):hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
select:hover { border-color: var(--color-muted); }
textarea:focus-visible, input:focus-visible, select:focus-visible { border-color: var(--color-accent); }
/* Das HTML-Attribut hidden versteckt NUR, solange keine Autorenregel display setzt - und die Regel "button" direkt darunter
   tut genau das. Ohne diese Zeile bleibt jeder <button hidden> sichtbar (gefunden am 2026-10-08 im Detailfenster der Team
   Finder: "Anmelden", "Team aufloesen" und die Aufloesen-Rueckfrage standen fuer Gaeste da, obwohl das Skript sie versteckt).
   !important ist noetig und kein Faulheitszeichen: Klassenregeln weiter unten (zum Beispiel .boss-teams__dialog-actions mit
   display:flex) haben dieselbe Spezifitaet wie [hidden] und gewinnen dann allein, weil sie spaeter stehen. Dasselbe Mittel
   nutzt .notifications [hidden] seit laengerem. Kein Selektor dieses Blattes will ein verstecktes Element zeigen - geprueft.
   Die Einzelregeln "X[hidden] { display: none }" weiter unten behandeln dasselbe Problem je Stelle; sie bleiben stehen. */
[hidden] { display: none !important; }
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  background: var(--button-bg);
  color: var(--button-fg);
  cursor: pointer;
  font: 600 .82rem / 16px var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: filter 120ms ease, opacity 120ms ease;
}
button:not(:disabled):hover { filter: brightness(1.12); }
button:disabled { opacity: .52; cursor: not-allowed; }
.button-secondary,
.review__vote--active { border-color: var(--button-neutral-border); background: var(--button-neutral-bg); color: var(--color-accent); }
.verify__discord-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--button-border); border-radius: var(--button-radius); background: var(--button-bg); color: var(--button-fg); font: 600 .82rem / 16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.verify__discord-link:hover { filter: brightness(1.12); }
.button-secondary:hover,
.review__vote--active:hover { border-color: var(--button-neutral-border); background: var(--button-neutral-bg); color: var(--color-accent); }
.button-secondary { border-color: var(--button-neutral-border); background: var(--button-neutral-bg); color: var(--color-fg); }
#account-delete-btn { border-color: var(--color-danger); background: var(--color-danger); color: var(--color-fg); }
#account-delete-btn:not(:disabled):hover { filter: brightness(1.12); }
.btn--sm,
.review__worklist button:not(.review__row-preview) { padding: 5px 10px; font-size: .68rem; line-height: 13px; }
.button-secondary:hover { filter: brightness(1.12); }
.icon-button { width: 2.75rem; min-height: 2.75rem; padding: 0; font-size: 1.25rem; }
@media (pointer: coarse) { button, .verify__discord-link { min-height: 2.75rem; } }
#dashboard-tiles .dashboard-tile__info { min-height: 1.875rem; }
@media (pointer: coarse) { .dashboard-tile-info__close { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; } }
input[type="checkbox"] { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--color-accent); }

/* Data views */
table { width: 100%; margin: var(--space-2) 0; overflow: hidden; border: 1px solid var(--color-border); border-collapse: collapse; border-radius: var(--radius-md); background: var(--color-surface); }
th, td { padding: var(--space-1); border-bottom: 1px solid var(--color-border); text-align: left; }
th { background: var(--color-surface-raised); color: var(--color-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
th:not(:first-child), td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--color-surface-raised); }
code { padding: .125rem .375rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-fg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.table-wrap,
.loot-ledger__table-wrap,
.admin__table-wrap,
.review__table-wrap { max-width: 100%; overflow-x: auto; }
.hunt-optimizer__howto { margin: var(--space-1) 0 0; font-size: .85rem; }
.hunt-optimizer__eyebrow { margin: var(--space-3) 0 var(--space-1); color: var(--color-muted); font: 600 .72rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.hunt-optimizer__filters { display: flex; flex-wrap: wrap; gap: 14px; }
.hunt-optimizer__dialog label { display: grid; gap: .3rem; min-width: min(100%, 15rem); color: var(--color-muted); font: 600 .72rem/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
/* Kompakt wie der Stammtisch-Lader: drei gleich breite Spalten, schmale Auswahlfelder. */
:is(.hunt-optimizer, .hunt-optimizer__dialog) .hunt-optimizer__filters label { display: flex; flex: 1 1 150px; flex-direction: column; gap: 5px; min-width: 150px; margin: 0; color: var(--color-muted); font: 600 .72rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
:is(.hunt-optimizer, .hunt-optimizer__dialog) .hunt-optimizer__filters :is(select, input) { width: 100%; min-width: 0; min-height: 0; padding: 1px 2px; border: 1px solid #767676; border-radius: 0; background: #fff; color: #000; font: 400 13.3333px Arial, sans-serif; letter-spacing: normal; text-transform: none; }
.hunt-optimizer .hunt-optimizer__status { min-height: 1em; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--color-muted); font: .78rem var(--font-ui); text-align: left; }
.hunt-optimizer__monster { display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; max-width: 100%; }
.hunt-optimizer__resistance-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-block: -.25rem; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
main button.hunt-optimizer__resistance-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; box-shadow: none; }
.hunt-optimizer__sprite { display: block; flex: none; width: 3rem; height: 3rem; object-fit: contain; }
.hunt-optimizer__monster-name { flex: 0 1 auto; max-width: clamp(4.5rem, 20vw, 16rem); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hunt-optimizer__resistance-popover { position: fixed; inset: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .35rem; max-width: calc(100vw - 1rem); margin: 0; padding: .35rem .45rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-fg); box-shadow: 0 4px 16px #0009; }
.hunt-optimizer__resistance-popover:not(:popover-open) { display: none; }
.hunt-optimizer__resistance { display: inline-flex; flex: none; align-items: center; gap: .08rem; font-size: .6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.hunt-optimizer__resistance.is-strong { color: #75c984; }
.hunt-optimizer__resistance.is-neutral { color: var(--color-fg); }
.hunt-optimizer__resistance.is-weak { color: #ed7b6f; }
.hunt-optimizer__resistance img { width: .6rem; height: .6rem; object-fit: contain; }
.hunt-optimizer__recommendation { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; }
.hunt-optimizer__charm-sprite { flex: none; width: 2.25rem; height: 2.25rem; object-fit: contain; }
.hunt-optimizer__charm-check { display: flex; align-items: center; gap: .4rem; }
.hunt-optimizer__charm-check > input { flex: none; }
.hunt-optimizer__prey-head { text-align: center; }
.hunt-optimizer__prey-banner { display: block; width: 22px; height: 46px; margin: 0 auto 2px; object-fit: contain; image-rendering: pixelated; }
.hunt-optimizer__prey, .hunt-optimizer__share { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hunt-optimizer table td.hunt-optimizer__prey.is-best { color: var(--color-accent); font-weight: 700; }
.hunt-optimizer__damage-prey { display: inline-flex; align-items: center; gap: .4rem; }
.hunt-optimizer__damage-prey > input { flex: none; }
.hunt-optimizer__boosted { flex: none; color: var(--color-accent); font-size: .8rem; line-height: 1; }
.hunt-optimizer__ranged { flex: none; font-size: .75rem; line-height: 1; }
@media (max-width: 640px) {
  #hunt-list table th, #hunt-list table td { padding: 4px 3px; }
  #hunt-list .hunt-optimizer__sprite, #hunt-list .hunt-optimizer__resistance-toggle { width: 2.25rem; height: 2.25rem; }
  #hunt-list .hunt-optimizer__monster { gap: .25rem; }
  #hunt-list .hunt-optimizer__monster-name { max-width: 3.5rem; font-size: .8rem; }
  #hunt-list .hunt-optimizer__recommendation { flex-wrap: wrap; gap: .25rem; font-size: .8rem; }
  #hunt-list .hunt-optimizer__charm-sprite { width: 1.75rem; height: 1.75rem; }
  #hunt-list .hunt-optimizer__prey { font-size: .8rem; }
  #hunt-list .hunt-optimizer__prey, #hunt-list .hunt-optimizer__share { font-size: .8rem; }
}
.hunt-optimizer__pending { color: var(--color-muted); font-size: .9rem; }
.hunt-optimizer__dialog input, .hunt-optimizer__dialog select, .hunt-optimizer__dialog textarea { min-height: 2.5rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--color-fg); font: inherit; }
.hunt-optimizer__dialog textarea { min-height: 10rem; resize: vertical; }
.hunt-optimizer__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.hunt-optimizer__actions[hidden] { display: none; }
/* Kopfzeile der Hunt-Optimizer-Karte: Titel links, oben rechts der Link zum Hunt Optimizer Lite
   im Stil des Stammtisch-Chips "🎭 Simulation" (design.css .chip: --ink-2/--stone-hi auf die
   Tibiapoint-Tokens abgebildet). */
.hunt-optimizer__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); }
.hunt-optimizer.has-page-close .hunt-optimizer__head { padding-inline-end: 3.5rem; }
main a.hunt-optimizer__sim-link, main a.hunt-optimizer__sim-link:visited { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-raised); color: var(--color-fg); font: .85rem var(--font-ui); text-decoration: none; white-space: nowrap; }
main a.hunt-optimizer__sim-link:hover { border-color: var(--color-accent); }
.hunt-optimizer td small { display: block; margin-top: 2px; color: var(--color-muted); font-size: .76rem; }
.hunt-optimizer__total { margin-top: 4px; color: var(--color-muted); font-size: .8rem; }
.hunt-optimizer__sensitivity { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; }
.hunt-optimizer__dialog { width: min(42rem, calc(100% - 2rem)); max-height: min(90vh, 50rem); border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); color: var(--color-fg); }
.hunt-optimizer__report { display: grid; justify-items: start; gap: var(--space-1); margin-top: var(--space-3); }
.hunt-optimizer__report[hidden] { display: none; }
.hunt-optimizer__report p { margin: 0; color: var(--color-muted); }
.hunt-optimizer__report p:empty { display: none; }
.admin__hunt-build-report { min-width: 0; margin-block: var(--space-3); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.admin__hunt-build-report > :is(label, select, button) { max-width: 100%; margin-inline-end: var(--space-1); }
.admin__hunt-build-report > select { min-height: 2.5rem; }
.admin__hunt-build-report-link { overflow-wrap: anywhere; }
.admin__hunt-build-report pre { max-width: 100%; max-height: 65vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
#hunt-report-dialog form { display: grid; gap: var(--space-2); }
#hunt-report-dialog p { margin: 0; color: var(--color-muted); }
#hunt-report-dialog textarea { width: 100%; max-width: 100%; }
#hunt-report-dialog [role="status"] { min-height: 1.5em; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  #hunt-report-dialog .hunt-optimizer__actions button { flex: 1 1 100%; }
}
.hunt-optimizer__dialog::backdrop { background: rgb(0 0 0 / .65); }
.hunt-optimizer__dialog form { display: grid; gap: var(--space-2); }
.hunt-optimizer__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border-bottom: 1px solid var(--color-border); }
.hunt-optimizer__dialog-head h2 { margin: 0 0 var(--space-1); }
.hunt-optimizer__dialog fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; margin: 0; border: 0; padding: 0; }
.hunt-optimizer__dialog legend { margin-bottom: 5px; padding: 0; color: var(--color-muted); font: 600 .72rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.hunt-optimizer__dialog fieldset label { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; margin: 0; color: var(--color-fg); font: 600 .85rem/1 var(--font-ui); }
.hunt-optimizer__dialog fieldset input { min-height: 0; margin: 0; }
.hunt-optimizer__dialog section > :is(.hunt-optimizer__filters, fieldset) { margin-top: 12px; }
@media (max-width: 480px) { :is(.hunt-optimizer, .hunt-optimizer__dialog) .hunt-optimizer__filters label { flex-basis: 100%; } }
/* Hunt Optimizer Lite: Setup des simulierten Characters oberhalb des Optimizers. */
/* Der Hinweis "nichts wird gespeichert" ist ein Popover hinter der durchgestrichenen Diskette in der Titelzeile. */
.hunt-optimizer-lite__note { margin: auto; padding: 10px 14px; max-width: min(22rem, calc(100vw - 2rem)); border: 1px solid var(--color-control-border); border-left: 3px solid var(--tp-gold-deep); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-fg); font: .9rem/1.4 var(--font-ui); }
.hunt-optimizer-lite__note::backdrop { background: rgb(0 0 0 / .45); }
.setup-code-icon__strike-gap, .setup-code-icon__strike { fill: none; stroke-linecap: round; }
.setup-code-icon__strike-gap { stroke: var(--button-neutral-bg); stroke-width: 5.5; }
.setup-code-icon__strike { stroke: currentColor; stroke-width: 2.4; }
.hunt-optimizer-lite__setup { margin-bottom: var(--space-3); }
.hunt-optimizer-lite__vocations { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.hunt-optimizer-lite__vocations .hunt-optimizer__eyebrow { flex-basis: 100%; margin: 0; }
/* Fuenf Kuerzel (EK, RP, MS, ED, EM) teilen sich eine Zeile. */
.hunt-optimizer-lite__vocations button { flex: 1 1 3rem; min-width: 0; max-width: 6rem; padding-inline: 8px; }
.hunt-optimizer-lite__vocations button[aria-pressed="true"] { border-color: var(--tp-gold-deep); background: linear-gradient(180deg, var(--tp-gold), var(--tp-gold-deep)); color: #1a1208; }
.hunt-optimizer .hunt-optimizer__filters label[hidden] { display: none; }
.hunt-optimizer-lite__hint { margin: 0; color: var(--color-muted); font: 400 .72rem/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; }
p.hunt-optimizer-lite__hint { margin-top: 8px; }
/* Stufe 2: dieselben Editor-Karten wie auf der Character-Seite, nur niedriger. */
.hunt-optimizer-lite__editors .character-tool-card { min-height: 9rem; padding: var(--space-2); }

/* Etappe 3d (ADR-0018, Hunt-Tool-Umzug): recommendation panel below the hunt-matrix picker.
   render/renderRecoResult.js keeps its Stammtisch class names/inline styles literally
   (CLASSES.md) so the golden-master DOM comparison keeps working - these rules give those
   literal names (.sub/.note/.muted/.row/.sp/.status.err/.info-note/.reco-ic/.ele-ic/.btn/
   .btn--gold/.fld/.charm/.ci/.cn) real styling, scoped to .hunt-optimizer only, mapped onto
   existing Tibiapoint tokens (--tp-gold/--tp-wine) instead of new hex values. --gold/--wine
   are the literal custom properties renderRecoResult.js's inline `style="color:var(--gold)"`
   already reference; aliasing them here avoids touching that file. */
.hunt-optimizer { --gold: var(--tp-gold); --wine: var(--tp-wine); }
/* Stammtisch-Optik fuer .sub-Ueberschriften (Top-Setup/Beste Rotation-Abschnitt, Stance-/
   Elementverteilungs-Ueberschriften): design.css der Migrationsquelle lag nicht vor (nur das
   HTML unter 3-operations/3.4-migration/hunt-reference/source/chars.html wurde uebernommen,
   siehe dessen <link href="design.css">) - klein, gold, Versalien statt der bisherigen groesseren
   hellen Schrift, wie am Stammtisch. */
.hunt-optimizer .sub { margin: 14px 0 6px; color: var(--tp-gold); font: 700 .8rem/1.3 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.hunt-optimizer .note { margin: 4px 0; color: var(--color-muted); font-size: .82rem; line-height: 1.5; }
.hunt-optimizer .note.status { margin-top: var(--space-2); }
.hunt-optimizer .muted { color: var(--color-muted); }
.hunt-optimizer .row { display: flex; flex-wrap: wrap; gap: 14px; }
.hunt-optimizer .sp { flex: 1; }
.hunt-optimizer .status.err, .hunt-optimizer .status.err.muted { border-color: var(--tp-wine); background: rgba(156, 57, 57, .12); color: var(--tp-text-100); }
.hunt-optimizer details.info-note { margin-top: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px; }
.hunt-optimizer details.info-note > summary { cursor: pointer; color: var(--color-accent); font-size: 1.05rem; list-style: none; }
.hunt-optimizer details.info-note > summary::-webkit-details-marker { display: none; }
.hunt-optimizer img.reco-ic { width: 20px; height: 20px; margin: 0 2px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.hunt-optimizer img.ele-ic { width: 16px; height: 16px; margin-right: 3px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.hunt-optimizer table { width: 100%; border-collapse: collapse; }
.hunt-optimizer table th, .hunt-optimizer table td { padding: 4px 8px; border-bottom: 1px solid var(--color-border); text-align: left; }
.hunt-optimizer table td.num, .hunt-optimizer table th.num { text-align: right; }

/* Break-even-je-Fork-Slot-Tabelle (edBreakEvenMatrixNode()): eigener Wrapper mit horizontalem
   Scrollen, damit sechs Kandidatenspalten auf Telefonbreite nur die Tabelle selbst und nicht die
   Seite scrollen; kompaktere Zellenpolsterung und kein Zeilenumbruch halten Spellnamen/Zahlen auf
   einer Zeile, statt die Spalten unnoetig aufzublaehen. */
#ed-matrix { overflow-x: auto; }
#ed-matrix table { width: auto; min-width: 100%; }
#ed-matrix th, #ed-matrix td { padding: 4px 6px; white-space: nowrap; }

/* Multi-Action-Tabelle bleibt auf schmalen Ansichten innerhalb des Recommendation-Panels
   horizontal scrollbar; der Tabelleninhalt darf die Seite nicht verbreitern. */
#ms-multiaction { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
#ms-multiaction table { width: auto; min-width: 100%; }

/* Kopfzeile (Skill(s)/Crit/max HP/max Mana/Level) - recoShell()s .fld-Kacheln. */
.hunt-optimizer__reco-header { align-items: flex-end; margin-top: var(--space-2); }
.hunt-optimizer .fld { display: flex; flex-direction: column; gap: 2px; min-width: 110px; color: var(--color-muted); font: 600 .72rem/1.4 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.hunt-optimizer .fld b { color: var(--tp-gold); font: 700 1.05rem/2 var(--font-ui); text-transform: none; letter-spacing: 0; }

/* Boost-Trank & Stance-Kacheln - eigenstaendiger Klassenname (nicht .character-charms-grid,
   das ist die Inventar-Charme-Ansicht), gleiche visuelle Sprache. */
.hunt-optimizer__reco-tiles { gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hunt-optimizer .charm { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; cursor: pointer; background: linear-gradient(180deg, #221913, #15100a); border: 1px solid var(--tp-ink-700); border-radius: 10px; padding: 9px 6px 7px; font-family: var(--font-ui); transition: border-color .12s, filter .12s; }
.hunt-optimizer .charm:hover { filter: brightness(1.1); }
.hunt-optimizer .charm:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hunt-optimizer .charm .ci { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, rgba(255,214,150,.10), transparent 70%); border-radius: 8px; font-size: 1.3rem; }
.hunt-optimizer .charm .ci img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; filter: grayscale(1) brightness(.65); transition: filter .15s; }
.hunt-optimizer .charm.set .ci img { filter: none; }
.hunt-optimizer .charm .cn { font-size: .72rem; line-height: 1.15; text-align: center; color: var(--tp-text-300); }
.hunt-optimizer .charm--xp-rate .ci img { filter: none; }
.hunt-optimizer .charm.set { border-color: var(--tp-gold-deep); box-shadow: 0 0 0 1px rgba(255,214,150,.12) inset; }
.hunt-optimizer .charm.set .cn { color: var(--tp-gold); }

/* Berechnen-Knopfreihe. */
.hunt-optimizer__reco-calc-row { align-items: center; gap: 8px; margin-top: 12px; }
.hunt-optimizer .btn { min-height: 32px; padding: 6px 14px; border: 1px solid var(--button-neutral-border); border-radius: var(--button-radius); background: var(--button-neutral-bg); color: var(--color-fg); font: 600 .8rem/1 var(--font-ui); letter-spacing: .03em; cursor: pointer; }
.hunt-optimizer .btn:hover { filter: brightness(1.12); }
.hunt-optimizer .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hunt-optimizer [data-calculate][aria-disabled="true"] { opacity: .52; cursor: not-allowed; }
.hunt-optimizer .btn.btn--gold { border-color: var(--button-border); background: var(--button-bg); color: var(--button-fg); }
.hunt-optimizer__reco-compare-all { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: .78rem; cursor: pointer; }
.hunt-optimizer__auto-hits-toggle { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--color-muted); font-size: .78rem; cursor: pointer; }
.hunt-optimizer__reco-status { display: flex; align-items: center; min-height: 1.75rem; color: var(--color-muted); font-size: .78rem; }
.hunt-optimizer__reco-status.err { color: var(--tp-wine); }
.hunt-optimizer__reco-status [data-optimizer-retry] { min-height: 2.75rem; }
#reco-status .hunt-optimizer__reco-cancel { width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; margin-block: 0; line-height: 1; }

/* Statusbox statt "Berechne..."-Text/#rc-stale-Zeile (Produktentscheidung 2026-09-27): beide
   verschoben vorher die Regler um ein paar Pixel, sobald sie ein-/ausgeblendet wurden. Die Box
   hat immer dieselbe Groesse (36x36, wie zuvor der ⓘ-Kasten an dieser Stelle) und wechselt nur
   Inhalt/Farbe ueber data-state (idle/computing/done/stale) - siehe hunt-optimizer.js
   setRecoStatusBoxState(). Icons rein aus CSS (::before-Zeichen/Rand-Kreis), kein externes Asset. */
.hunt-optimizer__reco-status-box { position: relative; flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.hunt-optimizer__reco-status-icon { font-size: 1.05rem; line-height: 1; }
.hunt-optimizer__reco-status-box[data-state="idle"] .hunt-optimizer__reco-status-icon::before { content: "✓"; color: var(--color-muted); }
.hunt-optimizer__reco-status-box[data-state="done"] .hunt-optimizer__reco-status-icon::before { content: "✓"; color: var(--tp-green); }
.hunt-optimizer__reco-status-box[data-state="stale"] .hunt-optimizer__reco-status-icon::before { content: "↻"; color: var(--tp-gold-mid); }
.hunt-optimizer__reco-status-box[data-state="computing"] .hunt-optimizer__reco-status-icon { display: none; }
.hunt-optimizer__reco-status-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tp-ink-700); border-top-color: var(--tp-gold); }
.hunt-optimizer__reco-status-box[data-state="computing"] .hunt-optimizer__reco-status-spinner { display: block; animation: hunt-optimizer-reco-status-spin .8s linear infinite; }
@keyframes hunt-optimizer-reco-status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hunt-optimizer__reco-status-box[data-state="computing"] .hunt-optimizer__reco-status-spinner { animation: none; border-top-color: var(--tp-ink-700); }
  .hunt-optimizer__reco-status-box[data-state="computing"] .hunt-optimizer__reco-status-icon { display: block; }
  .hunt-optimizer__reco-status-box[data-state="computing"] .hunt-optimizer__reco-status-icon::before { content: "…"; color: var(--color-muted); }
  .hunt-optimizer__reco-status-box[data-state="computing"] .hunt-optimizer__reco-status-spinner { display: none; }
}

#rc-result.is-stale { opacity: .5; }

/* Klick-/Fokus-Zustaende der Ranglistenzeilen (data-pick-weapon/data-rp-pick) und
   data-stance-Kacheln - Farbwerte stehen bereits inline im Renderer (var(--gold)), hier nur
   Fokus-Sichtbarkeit fuer Tastaturbedienung ergaenzt (renderRecoResult.js setzt role=button/
   tabindex=0, aber keinen eigenen Fokusring). */
.hunt-optimizer [data-pick-weapon]:focus-visible, .hunt-optimizer [data-rp-pick]:focus-visible, .hunt-optimizer [data-stance]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Spellrotation (Etappe 3d Teil 2, chars.html recoShell() Zeile 3896-3903): Spellpicker-Kacheln
   teilen sich .charm mit Boost-Trank/Stance oben, nur der Ausgrau-Zustand ist neu (kein "set",
   sondern "nicht anklickbar"). Rotationsliste/eigene Rotationen teilen sich eine Karten-Optik. */
.hunt-optimizer__reco-spellrotation { margin-top: 12px; }
.hunt-optimizer__reco-spellpicker { gap: 6px; flex-wrap: wrap; }
.hunt-optimizer .charm.is-unavailable { cursor: not-allowed; }
.hunt-optimizer .charm.is-unavailable .ci img { filter: grayscale(1) brightness(.4); opacity: .6; }
.hunt-optimizer .charm.is-unavailable .cn { color: var(--color-muted); }
.hunt-optimizer__reco-unavailable { color: var(--tp-wine); }
.hunt-optimizer__reco-rotation-list, .hunt-optimizer__reco-custom-rotations { gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hunt-optimizer__reco-card { min-width: 126px; max-width: 260px; background: var(--tp-ink-800); border: 1px solid var(--tp-ink-700); border-radius: 9px; padding: 6px 8px; font: 600 .8rem/1.3 var(--font-ui); color: var(--color-fg); }
.hunt-optimizer__reco-card b { color: var(--tp-gold); }
.hunt-optimizer__reco-locked { display: block; margin-top: 2px; color: var(--tp-wine); font: 600 .68rem/1.3 var(--font-ui); }
.hunt-optimizer__reco-card select, .hunt-optimizer__reco-card input, #ms-custom-rotations input[type="text"] { min-height: 2rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--color-fg); font: inherit; }

#reco-root { margin-top: var(--space-3); }
#rc-result { margin-top: 14px; }
@media (max-width: 480px) {
  .hunt-optimizer__reco-header .fld, .hunt-optimizer .charm { min-width: 0; width: auto; flex: 1 1 44%; }
  /* Kopfzeile kompakt: drei Werte je Zeile und enger gesetzt. */
  .hunt-optimizer .hunt-optimizer__reco-header { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  .hunt-optimizer .hunt-optimizer__reco-header .fld b { line-height: 1.25; }
  /* Boost-Trank und Stances: drei Kacheln nebeneinander. */
  .hunt-optimizer .hunt-optimizer__reco-tiles .charm { flex: 1 1 30%; padding-inline: 4px; }
}
.loot-splitter__command-row,
.loot-ledger__actions,
.loot-ledger__attestation-actions,
.verify__actions,
.review__controls,
.legal__nav,
.legal__privacy-switch,
.notifications__confirmation-edge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.loot-splitter__command-row, .loot-ledger__actions { margin-top: var(--space-2); }
.loot-ledger__preview,
.loot-ledger__history,
.loot-ledger__past,
.loot-ledger__payouts,
.account__other-sessions { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.loot-ledger__guest-claims { margin: var(--space-2) 0 var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.loot-ledger__dialog-feedback { position: sticky; top: 0; z-index: 1; display: grid; gap: var(--space-1); margin-bottom: var(--space-2); padding-block: var(--space-1); background: var(--color-bg); }
.loot-ledger__dialog-feedback[hidden] { display: none; }
.loot-ledger__dialog-feedback p { margin: 0; overflow-wrap: anywhere; }
.loot-ledger__dialog-feedback [role="alert"] { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-danger); border-radius: var(--radius-sm); background: rgb(224 121 79 / 8%); color: var(--color-danger); }
.loot-ledger__list-status { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-success); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-success); font-weight: 600; }
.loot-ledger__context { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-2); }
.loot-ledger__context div { min-width: 0; }
.loot-ledger__context dt, .loot-ledger__past-hunt-importer { color: var(--color-muted); }
.loot-ledger__context dd { margin: 0; overflow-wrap: anywhere; }
.loot-splitter__command-row code { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
.loot-ledger__preview-table td:nth-child(1), .loot-ledger__preview-table th:nth-child(1), .loot-ledger__preview-table td:nth-child(2), .loot-ledger__preview-table th:nth-child(2), .loot-ledger__history-table td:nth-child(1), .loot-ledger__history-table th:nth-child(1), .loot-ledger__history-table td:nth-child(2), .loot-ledger__history-table th:nth-child(2), .loot-ledger__history-table td:nth-child(3), .loot-ledger__history-table th:nth-child(3), .loot-ledger__history-table td:nth-child(5), .loot-ledger__history-table th:nth-child(5), .admin__table-wrap td:not(:first-child), .admin__table-wrap th:not(:first-child), .review__table-wrap td:not(:first-child), .review__table-wrap th:not(:first-child) { text-align: left; font-variant-numeric: normal; }
.loot-ledger__preview-table td:nth-child(3), .loot-ledger__preview-table th:nth-child(3), .loot-ledger__history-table td:nth-child(4), .loot-ledger__history-table th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.loot-ledger__totals { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.loot-ledger__totals[hidden] { display: none; }
.loot-ledger__totals p, .loot-ledger__past-hunt-importer { margin: 0; }
.loot-ledger__group, .loot-ledger__past-hunt { margin-top: var(--space-3); }
.loot-ledger__past ul, .loot-ledger__payouts ul, .loot-ledger__guest-claims ul, .verify-list, .notifications__list, .notifications__edges, .notifications__confirmation-edges { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.loot-ledger__payout, .loot-ledger__guest-claims li, .notifications__edge, .notifications__confirmation-edge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.loot-ledger__amount { font-variant-numeric: tabular-nums; font-weight: 650; }
.loot-ledger__amount--incoming { color: #7ec06e; }
.loot-ledger__amount--outgoing { color: #e0794f; }
.loot-ledger__payout > span, .loot-ledger__payout > code { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.loot-ledger__payout > code { white-space: pre-wrap; }
.loot-ledger__payout > .loot-ledger__payout-action { min-height: 2rem; padding: .25rem .55rem; font-size: .8rem; }
.loot-ledger__payout > .loot-ledger__copy-command { width: 2.25rem; min-width: 2.25rem; min-height: 2rem; padding: .25rem; }
.loot-ledger__copy-command svg { display: block; width: 1.1rem; height: 1.1rem; }
.loot-ledger__copy-status { font-size: .8rem; }
.loot-ledger__attestation-actions button { min-height: 2rem; padding: .3rem .55rem; font-size: .8rem; }
@media (pointer: coarse) {
  .loot-ledger__payout > .loot-ledger__payout-action { min-height: 2.75rem; }
  .loot-ledger__payout > .loot-ledger__copy-command { width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; }
  .loot-ledger__attestation-actions button { min-height: 2.75rem; }
}
.loot-ledger__payout-request-pending { color: var(--color-muted); font-style: italic; }
.loot-ledger__guest-claim-status, .notifications__edge-hint, .notifications__confirmation-edge-result { font-style: italic; }

/* Account, review, notifications and legal */
.verify__token { display: block; width: 100%; margin: var(--space-2) 0; padding: var(--space-2); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-fg); font-size: var(--font-size-xl); font-variant-numeric: tabular-nums; letter-spacing: .05em; text-align: center; white-space: nowrap; }
.verify__token--wrap { overflow-x: visible; white-space: normal; }
.verify__siblings { min-width: 0; margin-top: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.verify__siblings ul, .verify__siblings-result ul { margin-block: var(--space-1); padding-inline-start: 1.25rem; overflow-wrap: anywhere; }
.verify__siblings .verify__actions button { min-height: 44px; }
.verify__sibling-choice { display: flex; align-items: flex-start; gap: var(--space-1); min-height: 44px; padding-block: var(--space-1); cursor: pointer; }
.verify__sibling-choice input[type="checkbox"] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: .2em 0 0; }
.verify__siblings-result { min-width: 0; overflow-wrap: anywhere; }
.verify__consent { display: flex; align-items: flex-start; gap: var(--space-1); margin: var(--space-2) 0; }
.verify__consent input[type="checkbox"] { flex-shrink: 0; margin-top: .2em; }
.account__delete { margin-top: var(--space-3); padding: var(--space-3); border: 2px solid var(--color-danger); border-radius: var(--card-radius); background: var(--color-surface-raised); }
.account > section:not(.account__other-sessions):not(.account__delete),
.admin > section,
.review > section,
#review-main > section,
.loot-ledger__whitelist {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.review__worklist { overflow: visible; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.review__worklist th, .review__worklist td { min-width: 0; padding: .5rem; vertical-align: top; overflow-wrap: anywhere; }
.review__worklist th:nth-child(1) { width: 15%; }
.review__worklist th:nth-child(2) { width: 19%; }
.review__worklist th:nth-child(3) { width: 22%; }
.review__worklist th:nth-child(4) { width: 24%; }
.review__worklist th:nth-child(5) { width: 20%; }
.review__worklist tbody th { background: transparent; color: var(--color-fg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: normal; text-transform: none; }
.review__cell-label { display: none; }
.review__cell-text, .review__saved-suggestion { display: block; min-width: 0; margin: 0 0 .35rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.review__row-suggestions { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.review__row-suggestions li { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.review__row-suggestions li > span:first-child { white-space: pre-wrap; overflow-wrap: anywhere; }
.review__worklist button:not(.review__row-preview) { max-width: 100%; white-space: nowrap; }
.review__row-preview { display: none; }
.review__worklist textarea { min-height: 4.5rem; margin-bottom: .35rem; }
.review__done { display: inline-block; color: var(--color-success); font-weight: 650; }
.review__worklist-wrap:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.review__application textarea { min-height: 6rem; }
.review__application { max-width: 42rem; }
.review__application form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.review__application form[hidden], .review__application-role[hidden] { display: none; }
.review__application fieldset { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; margin: 0 0 var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.review__application-role { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-1); }
.review__application-role input { width: 1.1rem; height: 1.1rem; }
.review__application textarea { width: 100%; min-height: 6rem; resize: vertical; }
.review__application small { color: var(--color-muted); }
#review-application-status, #review-application-pending { overflow-wrap: anywhere; }
.review__application-status li, .admin__reviewer-applications-list li { min-width: 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.review__application-status, .admin__reviewer-applications-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.review__application-status p, .admin__reviewer-applications-list p { margin: var(--space-1) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin__reviewer-applications-list h3 { margin: 0 0 var(--space-1); }
.admin__checkbox-target { display: flex; min-inline-size: 44px; min-block-size: 44px; align-items: center; justify-content: center; cursor: pointer; }
.admin__checkbox-target:has(input:disabled) { cursor: default; }
.admin__accounts-list { min-width: 0; }
.admin__accounts-list > p { margin-top: 0; color: var(--color-muted); }
.admin__accounts-dialog, .notifications__dialog { width: min(74rem, calc(100vw - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)))); max-width: none; max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom))); margin: auto; padding: var(--space-3); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); box-shadow: var(--card-shadow); }
.admin__accounts-dialog::backdrop, .notifications__dialog::backdrop { background: rgb(0 0 0 / .72); }
.admin__accounts-dialog-head, .notifications__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.admin__accounts-dialog-head h2, .notifications__dialog-head h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.admin__accounts-dialog-head button, .notifications__dialog-head button { flex: 0 0 auto; }
.notifications__list-slot { min-width: 0; }
.notifications__dialog .notifications__list-slot { max-height: min(60dvh, 42rem); overflow: auto; overscroll-behavior: contain; }
.notifications [hidden] { display: none !important; }
.admin__account-name { display: block; font-weight: 650; overflow-wrap: anywhere; }
.admin__account-characters { margin: 3px 0 0; padding: 0; color: var(--color-muted); font-size: .78rem; line-height: 1.35; list-style: none; }
.admin__account-characters li { overflow-wrap: anywhere; }
.admin__account-characters--empty { display: block; font-style: italic; }
.admin__reviewer-application-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.admin__review-visibility-control { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; cursor: pointer; }
/* Nutzungszaehler: Kopfzeile wie die uebrigen Feldbeschriftungen, Zahlen rechtsbuendig und
   mit festen Ziffernbreiten, damit die Spalten beim Zeitraumwechsel nicht springen. */
.admin__usage table { width: 100%; border-collapse: collapse; }
.admin__usage th { color: var(--color-muted); font: 600 .72rem/1.3 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
.admin__usage td:not(:first-child), .admin__usage th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.admin__review-visibility-control input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.admin__review-visibility-control input:disabled { cursor: wait; }
#admin-review-visibility-status, #admin-review-visibility-error { overflow-wrap: anywhere; }
.notifications__item--unread { border-left: 4px solid var(--color-accent); }
.notifications__item h3 { margin: 0 0 var(--space-1); }
.notifications__preferences { margin-top: var(--space-4); }
#notifications-title, #notifications-preferences-title { overflow-wrap: anywhere; }
.notifications__default-preference { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.notifications__world-daily { min-width: 0; max-width: 100%; margin: var(--space-4) 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.notifications__world-daily [hidden] { display: none; }
.notifications__world-daily > * { max-width: 100%; overflow-wrap: anywhere; }
.notifications__world-daily-toggle { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0; }
.notifications__world-daily-toggle input { flex: 0 0 auto; }
.notifications__world-daily-world { display: grid; gap: var(--space-1); min-width: 0; max-width: 100%; margin: var(--space-2) 0; }
.notifications__world-daily-world select { width: 100%; min-width: 0; }
.notifications__default-hint { margin: 0 0 var(--space-2); }
.account__discord-choice { display: grid; gap: var(--space-1); width: 100%; margin: var(--space-2) 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.account__discord-choice p { margin: 0; }
.account__discord-choice label { display: flex; align-items: center; gap: var(--space-1); }
.notifications__preferences-table th, .notifications__preferences-table td { padding: var(--space-1) var(--space-2) var(--space-1) 0; text-align: left; }
.notifications__confirmation-hint { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: .85rem; }
/* Rechte-Matrix je Rang (ADR-0014 §1/§4): dieselbe th/td-Grundform wie die Notification-
   Preferences-Tabelle oben, plus ein Umbruch OHNE Querscrollen (Konzept 12: "keine horizontale
   Ueberbreite") - unterhalb 56rem klappt die Tabelle in gestapelte Bloecke um, statt seitlich zu
   scrollen. Ein weiterer Rechteschluessel braucht hier keine weitere Regel, nur eine weitere
   Spalte in derselben Struktur (guild.js, PERMISSION_COLUMNS) - aber der Umbruchpunkt haengt an der
   Spaltenzahl: mit fuenf Spalten braucht die Tabelle in der laengsten Sprache (Polnisch) rund
   720px Mindestbreite, gemessen in einem echten Browser (bei 30rem lief sie zwischen 481px und
   ca. 830px Bildschirmbreite ueber; 56rem lassen rund 90px Reserve). Kommt eine Spalte dazu, den Punkt neu messen. */
.guild__permissions-table th, .guild__permissions-table td { padding: var(--space-1) var(--space-2) var(--space-1) 0; text-align: left; }
.guild__permissions-table th:not(:first-child), .guild__permissions-table td:not(:first-child) { text-align: center; }
.guild__permission-toggle { display: inline-flex; align-items: center; gap: var(--space-1); }
@media (max-width: 56rem) {
  .guild__permissions-table, .guild__permissions-table tbody, .guild__permissions-table tr, .guild__permissions-table th, .guild__permissions-table td { display: block; width: 100%; }
  .guild__permissions-table thead tr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .guild__permissions-table tbody tr { margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
  .guild__permissions-table tbody th { border: 0; }
  .guild__permissions-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border: 0; text-align: left; }
  .guild__permissions-table tbody td::before { content: attr(data-permission-label); color: var(--color-muted); }
}

/* Events-Modul (ADR-0015): dieselben vorhandenen Tokens wie ueberall sonst, keine neuen Farben
   oder Abstaende. `.guild__event-actions` wird auch in der Admin-Ansicht (/admin/events/) fuer
   die Bestaetigungszeile des Loeschens wiederverwendet, statt eine fast identische Regel dort
   zu duplizieren. */
.guild__module-toggle, .guild__event-inline-label { display: flex; align-items: center; gap: var(--space-1); min-height: 2.75rem; cursor: pointer; }
/* Leader-Schalter (ADR-0017, Auftrag Sven 2026-09-25): ein echtes <input type="checkbox">
   bleibt Fokus-/Tastaturziel (:focus-visible greift bereits ueber die globale Regel weiter
   oben) - appearance: none entfernt nur die native Kaestchendarstellung, ausschliesslich
   vorhandene Tokens zeichnen Bahn und Schieber, kein Bild. */
.guild__leader-mode-toggle { display: flex; align-items: center; gap: var(--space-1); min-height: 2.75rem; cursor: pointer; }
.guild__leader-mode-toggle input[type="checkbox"] {
  position: relative;
  appearance: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  margin: 0;
  border: 1px solid var(--color-control-border);
  border-radius: 999px;
  background: var(--color-surface-raised);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.guild__leader-mode-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset-block-start: .0625rem;
  inset-inline-start: .0625rem;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background: var(--tp-text-100);
  transition: inset-inline-start .15s ease;
}
.guild__leader-mode-toggle input[type="checkbox"]:checked { background: var(--button-bg); border-color: var(--button-border); }
.guild__leader-mode-toggle input[type="checkbox"]:checked::after { inset-inline-start: 1.4375rem; }
/* Feste Groesse (ADR-0016 §5, Variante 4x3), damit die Zeile beim Laden nicht springt - die
   SVG-Dateigroessen selbst gehen weit auseinander (Polen 219 Byte, Serbien 184 KB). */
.guild__country-flag { width: 2rem; height: 1.5rem; object-fit: cover; border: 1px solid var(--card-border); vertical-align: middle; }
.guild__event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }
.guild__event-signup-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); }
/* Flache Terminzeile (Sven, 2026-10-06): Zeitpunkt zuerst, hervorgehoben; Titel, Angaben und Knoepfe folgen untereinander. */
.guild__event-when { margin: 0 0 var(--space-1); font-weight: 600; }

/* Native type="date"/type="time"-Felder bekommen bislang GAR KEINE eigene Regel (nur textuelle
   input-Typen zaehlen zur globalen width:100%-Auswahl weiter oben) - dieselben vorhandenen
   Tokens machen sie hier optisch konsistent mit dem Rest des Formulars (kein neuer Farbwert,
   styles-contract.test.js bleibt gruen). */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-1);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--color-fg);
  font: inherit;
}
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover { border-color: var(--color-muted); }

/* Start/Ende kompakt nebeneinander (Sven, 2026-09-27): Datum und Uhrzeit stehen bei genug Platz
   in einer Zeile, brechen bei 320px aber in zwei Zeilen um statt waagerecht zu ueberlaufen -
   dasselbe flex-wrap-Prinzip wie .guild__poll-answer-row oben, keine eigene Medienabfrage. Die
   beiden Kindelemente bekommen min-width: 0, damit ein <input type="date"> (das per
   Spezifikation nie schmaler als sein Inhalt wird) die Zeile bei 320px nicht sprengt. */
.guild__event-datetime-group { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.guild__event-datetime-group > div { flex: 1 1 9rem; min-width: 0; }
.guild__event-datetime-group label { margin-top: var(--space-2); }

/* Teilnehmerzahl-Auswahl (Sven, 2026-09-26): nur sichtbar, wenn die Terminart-Auswahl "boss"
   ausgewaehlt hat - kein eigenes JavaScript-Zustandsmodell, dasselbe :has()-Prinzip wie beim
   Umfrage-Fieldset unten. :checked gilt in CSS auch fuer die ausgewaehlte <option> eines
   <select>, deshalb reicht die Pruefung auf genau diese Option innerhalb des Formulars. */
#guild-events-participantlimit-wrap { display: none; }
#guild-events-form:has(#guild-events-category-input option[value="boss"]:checked) #guild-events-participantlimit-wrap {
  display: block;
}

/* Titelfeld je Terminart (Sven, 2026-10-07): bei "Event" und "Quest" das freie Textfeld, bei "Boss"
   die filterbare Auswahl (<input list> mit <datalist>) - genau eines von beiden, ohne
   JavaScript-Zustandsmodell, dasselbe :has()-Prinzip wie beim Teilnehmerlimit oben. */
#guild-events-title-boss-wrap { display: none; }
#guild-events-form:has(#guild-events-category-input option[value="boss"]:checked) #guild-events-title-boss-wrap {
  display: block;
}
#guild-events-form:has(#guild-events-category-input option[value="boss"]:checked) #guild-events-title-free-wrap {
  display: none;
}

/* Discord-Terminumfragen im Anlegen/Aendern-Formular (ADR-0018 §1/§4/§6). Ein natives
   <fieldset> verliert Rand/Innenabstand des Browsers (dieselbe Optik wie das umgebende
   Formular) UND bekommt min-width: 0 - ein <fieldset> ist sonst per Spezifikation nie
   schmaler als sein Inhalt (min-width: min-content), genau die Art waagerechter Ueberlauf,
   die bei 320px vermieden werden soll. */
.guild__poll-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
/* Kein eigenes JavaScript-Zustandsmodell (Auftrag): :has() traegt das Ein-/Ausblenden der
   uebrigen Umfragefelder allein ueber den Zustand der Checkbox. */
.guild__poll-fields { display: none; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.guild__poll-fieldset:has(#guild-events-poll-enabled-input:checked) .guild__poll-fields { display: flex; }
.guild__poll-answers-list { display: flex; flex-direction: column; gap: var(--space-1); }
/* min-width: 0 auf dem Textfeld (statt der globalen width: 100%) laesst es bei 320px neben dem
   Entfernen-Knopf schrumpfen, ohne die Zeile zum Umbrechen mitten im Wort zu zwingen - der
   Zeileninhalt selbst ist ein <input>, das intern scrollt statt zu ueberlaufen. */
.guild__poll-answer-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.guild__poll-answer-row input[type="text"] { flex: 1 1 12rem; width: auto; min-width: 0; }

/* Umfrage-Ergebnisse je Ausprägung (ADR-0018 §5/§6/§8), fuer jedes Mitglied sichtbar -
   dasselbe details/summary-Muster wie der Rest der Seite. */
.guild__poll-results { margin-top: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.guild__poll-results summary { cursor: pointer; color: var(--color-accent); font-weight: 650; }
.guild__poll-results-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
/* Text und Zahl stehen als Text nebeneinander, brechen bei 320px aber in eine zweite Zeile statt
   waagerecht zu ueberlaufen - minmax(min(100%, …), 1fr) waere hier eine Grid-Spalte zu viel,
   flex-wrap mit min-width: 0 auf dem Text reicht fuer zwei Elemente. */
.guild__poll-result-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-2); }
.guild__poll-result-text { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.guild__poll-result-count { flex-shrink: 0; color: var(--color-muted); font-size: .875rem; }
/* Rein dekorativ (aria-hidden auf dem Markup) - Zahl UND Prozentanteil stehen bereits als Text
   in .guild__poll-result-count (Auftrag: "die Zahlen muessen als Text lesbar sein"). */
.guild__poll-result-bar { height: .35rem; margin-top: .3rem; border-radius: var(--radius-sm); background: var(--color-surface-raised); overflow: hidden; }
.guild__poll-result-bar-fill { height: 100%; background: var(--color-accent); }
.guild__poll-result-voters { margin: .3rem 0 0; overflow-wrap: anywhere; color: var(--color-muted); font-size: .8125rem; }

/* Rankings im eigenen Abschnitt "Rankings" (Konzept 06 §24, Migration 0064): Rang, Name mit der
   Levelspanne darunter und der Wert stehen als TEXT nebeneinander und brechen bei 320px in eine
   zweite Zeile statt waagerecht zu ueberlaufen (flex-wrap, min-width: 0 auf dem Namen,
   overflow-wrap: anywhere). Kein Balken - die Zahlen sind der Inhalt. */
.guild__ranking { margin-top: var(--space-3); }
.guild__ranking-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.guild__ranking-list { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.guild__ranking-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); }
.guild__ranking-rank { flex: 0 0 2rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.guild__ranking-main { display: flex; flex-direction: column; flex: 1 1 8rem; min-width: 0; }
.guild__ranking-name { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.guild__ranking-levels { color: var(--color-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
/* Der Wert (Sven, 2026-10-02): Auszeichnungsschrift, groesser, kraeftig, im Akzentton und in einer festen
   Spalte MITTIG zentriert, damit unterschiedlich lange Zahlen untereinander auf einer Achse stehen. Bei
   320px bricht die Zeile um; max-width: 100% und overflow-wrap halten die Spalte im Rahmen. */
.guild__ranking-value { flex: 0 0 10rem; max-width: 100%; min-width: 0; overflow-wrap: anywhere; color: var(--color-accent); font-family: var(--font-ui); font-size: 1.25rem; font-weight: 700; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; }
.guild__ranking-more { margin-top: var(--space-1); }
.guild__ranking-more > summary { cursor: pointer; color: var(--color-muted); font-size: .875rem; }
.guild__ranking-hint { color: var(--color-muted); font-size: .8125rem; }
/* Die ganze EXP-Liste ein- und ausklappbar (Sven, 2026-10-02): natives <details>; die Ueberschrift der Kennzahl steht darueber. */
.guild__ranking-fold { margin-top: var(--space-2); }
.guild__ranking-fold > summary { cursor: pointer; font-weight: 650; }

/* Podien der Rankings (Auftrag Sven 2026-10-02): oben im Abschnitt zwei Podien fuer Platz 1 bis 3
   (EXP- und Level-Zuwachs der ganzen Guild), je Platz GENAU EINE Person. Eigene Zeichnung aus den
   Design-Token, keine Grafik. Im DOM stehen die Plaetze 1, 2, 3 (Vorlesereihenfolge); die optische
   Reihenfolge 2 - 1 - 3 macht allein `order`. Der Sockel steht im DOM vor dem Mitglied und wird per
   column-reverse darunter gezeichnet. Die Hoehe folgt dem Platz: 1 > 2 > 3.
   BLICKFANG (Sven: "staerker hervorheben"): Das Podium steht auf einer eigenen Karte aus den Karten-
   Token (--card-bg/-border/-radius/-shadow), die Sockel schliessen buendig mit ihrer Unterkante ab
   (overflow: hidden rundet sie mit der Karte), Platzziffer und Name sind groesser und fetter als in den
   Listen darunter. PLATZ 1 ist GOLD: der ganze Sockel in --color-accent, die Ziffer in --color-action-fg
   (dunkles Braun, dasselbe Paar wie die goldenen Knoepfe - rund 8,5:1 auf dem Gold, die Seite kennt nur
   das dunkle Erscheinungsbild), der Name darueber in Gold. Plaetze 2 und 3 bleiben neutral.
   FIGUR: ohne Rahmen, Kasten und Hintergrund, direkt auf dem Sockel; Name und Wert stehen UEBER ihr.
   Das gelieferte Bild ist eine 64x64-Leinwand, auf der die Figur UNTEN RECHTS anliegt (Messung vom
   2026-09-26 bei .guild-public__member-portrait: zu Fuss x 32..63/y 32..63, mit Mount etwa x 17..62/
   y 8..63). Damit sie auf dem Sockel steht und mittig sitzt, wird die Leinwand NUR zugeschnitten und
   verschoben, nicht gerahmt: object-fit: cover mit Ausrichtung unten schneidet die oberen 12,5 % ab
   (der hoechste gemessene Mount beginnt bei 12,5 %), translateX schiebt den Schwerpunkt in die Mitte
   (zu Fuss: -25 %, die Figur belegt die Spalten 32..63, Mittelpunkt 75 % -> 50 %; Mount -14 %, Spalten
   17..63, Mittelpunkt rund 64 % -> 50 %, wie bei der Kachel). Die Fuesse liegen
   in der Leinwand ganz unten und damit buendig auf dem Sockel.
   ponytail: Die Werte sind Mittelwerte der gemessenen Faelle, kein Wert je Bild (siehe Begruendung bei
   .guild-public__member-portrait: die Huelle der sichtbaren Pixel ist im Browser nicht messbar).
   Schmale Breiten (320px): Die Sockel bleiben drei Spalten (flex: 1 1 0, min-width: 0), die Figur ist
   hoechstens so breit wie ihre Spalte, Text bricht um (overflow-wrap: anywhere) statt waagerecht zu
   ueberlaufen. Keine Animation, also nichts, was prefers-reduced-motion einschraenken muesste. */
.guild__podium { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-1); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-1) 0; overflow: hidden; list-style: none; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.guild__podium-step { display: flex; flex: 1 1 0; flex-direction: column-reverse; align-items: stretch; min-width: 0; max-width: 12rem; }
.guild__podium-step--1 { order: 2; }
.guild__podium-step--2 { order: 1; }
.guild__podium-step--3 { order: 3; }
.guild__podium-place { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-surface-raised); color: var(--color-muted); font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.guild__podium-step--1 .guild__podium-place { min-height: 6rem; border-color: var(--color-accent); background: var(--color-accent); color: var(--color-action-fg); font-size: 2.75rem; }
.guild__podium-step--2 .guild__podium-place { min-height: 4.5rem; }
.guild__podium-member { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; text-align: center; }
.guild__podium-name { min-width: 0; overflow-wrap: anywhere; font-size: 1.0625rem; font-weight: 700; }
.guild__podium-step--1 .guild__podium-name { color: var(--color-accent); }
.guild__podium-value { min-width: 0; overflow-wrap: anywhere; color: var(--color-fg); font-size: .875rem; font-variant-numeric: tabular-nums; }
.guild__podium-figure { display: block; width: min(160%, 8rem); height: auto; aspect-ratio: 8 / 7; object-fit: cover; object-position: 50% 100%; transform: translateX(-25%); }
.guild__podium-figure--mount { transform: translateX(-14%); }
.guild__podium-figure[hidden] { display: none; }

/* Quest Planner im eigenen Quests-Abschnitt (Migration 0065): Namen, Freitexte und Interessentennamen
   stammen von der Guild bzw. ihren Mitgliedern und koennen lange Woerter enthalten - sie brechen
   um (overflow-wrap: anywhere, min-width: 0) statt bei 320px waagerecht zu ueberlaufen.
   pre-line macht die Zeilenumbrueche der Belohnungen/Gefahren sichtbar, ohne Markup zu bauen. */
.guild__quest { display: flex; flex-direction: column; gap: var(--space-1); }
/* Sprite oben rechts im Eintrag (Quest: Gefahren-Kreatur, Dummy: sein Bild, Bosstermin: der Boss),
   BEI JEDEM Eintrag an derselben Stelle und in derselben Groesse - die Regel ist fuer alle Listen
   dieselbe. Das Sprite
   ist absolut gesetzt, die Stelle haengt also nicht von der Textlaenge ab; der Eintrag haelt dafuer
   rechts Platz frei und ist mindestens so hoch wie das Sprite. Ohne Sprite (keine Kreatur, unbekannter
   Name, Bild laedt nicht) fehlt die Klasse, und es bleibt weder Luecke noch Bildsymbol. Die Grafiken
   sind klein (meist 32-64 px) und werden vergroessert: pixelated haelt die Kanten scharf. */
.guild__has-sprite {
  --guild-sprite-size: 6rem;
  position: relative;
  padding-right: calc(var(--guild-sprite-size) + var(--space-3));
  min-height: calc(var(--guild-sprite-size) + 2 * var(--space-2));
}
.guild__sprite {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--guild-sprite-size);
  height: var(--guild-sprite-size);
  object-fit: contain;
  object-position: right top;
  image-rendering: pixelated;
}
@media (max-width: 30rem) { .guild__has-sprite { --guild-sprite-size: 4.5rem; } }
.guild__quest h3 { overflow-wrap: anywhere; }
.guild__quest-detail { margin: 0; overflow-wrap: anywhere; }
.guild__quest-text { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.guild__quest-interested { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.guild__quest-interested li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
/* Quest-Uebersicht im Leaderblock: Filter nebeneinander, solange Platz ist, sonst untereinander (min-width: 0
   und flex-basis statt fester Breite - bei 320px kein waagerechter Ueberlauf). Jede Zeile hat den Haken
   links und das aufklappbare <details> daneben; Katalognamen und -texte brechen um wie die Quest-Texte oben. */
.guild__quest-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--space-3); }
.guild__quest-filters > div { flex: 1 1 10rem; min-width: 0; }
.guild__quest-offer-list { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; padding: 0; list-style: none; }
.guild__quest-offer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); }
.guild__quest-offer > label { flex: 0 0 auto; margin: 0; }
.guild__quest-offer > details { flex: 1 1 12rem; min-width: 0; padding: var(--space-1) 0; }
.guild__quest-offer > details > summary { cursor: pointer; overflow-wrap: anywhere; }
.guild__quest-offer-confirm { flex: 1 1 100%; min-width: 0; }
/* Trainingdummy-Buchung im eigenen Training-Abschnitt (Migration 0066): Dummynamen, Hausbesitzer und
   Charakternamen stammen von der Guild bzw. ihren Mitgliedern und koennen lange Woerter enthalten -
   sie brechen um (overflow-wrap: anywhere, min-width: 0) statt bei 320px waagerecht zu ueberlaufen.
   Die Buchungsformulare stehen in einem <details> und sind dadurch zu, bis jemand buchen will. */
.guild__dummy { display: flex; flex-direction: column; gap: var(--space-1); }
.guild__dummy h3 { overflow-wrap: anywhere; }
.guild__dummy-detail { margin: 0; overflow-wrap: anywhere; }
.guild__dummy-text { min-width: 0; overflow-wrap: anywhere; }
.guild__dummy-bookings { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.guild__dummy-bookings li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.guild__dummy-book summary { cursor: pointer; }
.guild__dummy-book form { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
/* Ein Leaderblock ohne sichtbaren Inhalt (Mitglied ohne quests.manage bzw. Leadermodus aus) zeigt
   keinen leeren Rahmen. Liest nur die bereits gesetzten hidden-Attribute, dasselbe :has()-Prinzip
   wie bei den Allgemeinen Leaderfunktionen. */
.guild-public__leader-block:not(:has(> :not([hidden]))) { display: none; }

/* Discord-Kanaluebersicht (ADR-0018 §2/§3): dieselbe Kachelform wie .notifications__item
   (buildDiscordChannelRow() nutzt dieselbe Klasse), keine neue Regel dafuer noetig. */

/* Guild-Verzeichnis (ADR-0016 §7/§8, Schnitt D). Sven: "uebersichtlich und nicht zu eng" -
   mehr Innenabstand als die schmale Grundregel (`th, td { padding: var(--space-1); }`), Logo
   und Flagge bekommen dadurch automatisch Luft. Zahlenspalten (Mitglieder/Online/Level-Spalten,
   4.-7. Spalte) zentriert statt der generischen Rechtsbuendigkeit aus der Grundregel oben;
   Name/Nationalitaet bleiben links, Gegruendet (letzte Spalte) faellt bewusst auf diese
   Grundregel zurueck. */
.guilds__directory th, .guilds__directory td { padding: var(--space-2); }
.guilds__directory th:nth-child(2), .guilds__directory td:nth-child(2),
.guilds__directory th:nth-child(3), .guilds__directory td:nth-child(3) { text-align: left; }
.guilds__directory th:nth-child(n+4):nth-child(-n+7), .guilds__directory td:nth-child(n+4):nth-child(-n+7) { text-align: center; }
.guilds__logo { width: 2rem; height: 2rem; object-fit: contain; border-radius: var(--radius-sm); vertical-align: middle; }
.guilds__world { display: block; color: var(--color-muted); font-size: .8rem; }
/* Die Flagge im Verzeichnis ist deutlich kleiner als das Guildenlogo (Sven, 2026-09-24): Das
   Logo traegt die Guild, die Flagge nur eine Zusatzangabe. Hoehe fest im 4:3-Verhaeltnis der
   SVG-Dateien statt "auto", damit beim Nachladen nichts springt. */
.guilds__directory .guild__country-flag { width: 1.25rem; height: .94rem; }
/* Sortier-Knoepfe loesen sich optisch in die vorhandene th-Typografie auf (Grossbuchstaben,
   gedaempfte Farbe, fett), statt wie ein eigenstaendiger Knopf auszusehen. */
.guilds__directory th button { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.guilds__directory th button:not(:disabled):hover { background: transparent; color: var(--color-accent); }
.guilds__directory th[aria-sort="ascending"] button::after { content: " ▲"; }
.guilds__directory th[aria-sort="descending"] button::after { content: " ▼"; }
@media (max-width: 30rem) {
  /* Dasselbe Umklapp-Muster wie .guild__permissions-table (ADR-0016 §8: "kein zweites
     Markup, kein innerHTML") - die Tabelle wird zu einer Karte je Guild. */
  .guilds__directory, .guilds__directory tbody, .guilds__directory tr, .guilds__directory th, .guilds__directory td { display: block; width: 100%; }
  .guilds__directory thead tr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .guilds__directory tbody tr { margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
  .guilds__directory tbody td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .4rem var(--space-2); border: 0; text-align: left; }
  .guilds__directory tbody td::before { content: attr(data-label); color: var(--color-muted); }
  /* Die Logo-Spalte entfaellt in der Kartenansicht: Als eigene Zeile traegt sie nur ihre
     Beschriftung und ein winziges Bild - bei einer Guild ohne eigenes Logo sogar eine voellig
     leere Zeile. Name und Flagge identifizieren die Guild hier ausreichend. Gemessen am
     2026-09-24 bei 375px: Die Karte schrumpft dadurch von 457px auf rund die Haelfte, was bei
     mehreren Guilds den Unterschied zwischen Ueberblick und Endlosscrollen ausmacht. */
  .guilds__directory tbody td:first-child { display: none; }
}
.guilds__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-2) 0; }
.guilds__controls label { display: inline; margin: 0; }
.guilds__controls select { width: auto; min-width: 12rem; }

/* Boss Team Finder (Schritt 3a, Auftrag Sven 2026-10-07): Tabelle nach dem Muster des Guild-Verzeichnisses
   (.table-wrap faengt Zwischenbreiten ab, unter 40rem klappt jede Zeile zur Karte um; neun Spalten mit
   Datum, Uhrzeit und Zone brauchen mehr Platz als die Grenze 30rem des Verzeichnisses). Die ganze Zeile ist
   klickbar (Schritt 3b: Detailfenster), der Link im Boss-Namen traegt die Tastatur und den Fokus. Die neunte,
   letzte Spalte traegt den Anmelden-Knopf (Sven, 2026-10-08); in der Karte steht er dadurch ganz unten.
   Der Quest Team Finder (/quest-teams/, Auftrag Sven 2026-10-08) nutzt dieselben Klassen (.boss-teams__*) fuer
   Tabelle und Sprite: gleiche Spalten, gleicher Karten-Umbruch, ein Stand statt zweier Kopien. */
.boss-teams__table th, .boss-teams__table td { padding: var(--space-2); }
/* Die Ueberschrift der Knopf-Spalte ist .sr-only (position: absolute): ohne eigenen Bezug (position: relative) laege sie ausserhalb des
   scrollenden .table-wrap und weitete bei schmalem Fenster die ganze Seite waagerecht auf (gemessen bei 1000 px). */
.boss-teams__table th { position: relative; }
.boss-teams__table th:nth-child(n+2), .boss-teams__table td:nth-child(n+2) { text-align: center; }
.boss-teams__table tbody tr { cursor: pointer; }
.boss-teams__table tbody tr:hover { background: var(--color-surface-raised); }
.boss-teams__table tbody tr:focus-within { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.boss-teams__boss { display: inline-flex; align-items: center; gap: var(--space-2); }
.boss-teams__boss:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.boss-teams__sprite { flex: none; width: 2rem; height: 2rem; object-fit: contain; image-rendering: pixelated; }
.boss-teams__total, .boss-teams__zone { display: block; color: var(--color-muted); font-size: .8rem; }
.boss-teams__table td button { min-height: 2.75rem; }
@media (max-width: 40rem) {
  .boss-teams__table, .boss-teams__table tbody, .boss-teams__table tr, .boss-teams__table th, .boss-teams__table td { display: block; width: 100%; }
  .boss-teams__table thead tr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .boss-teams__table tbody tr { margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
  .boss-teams__table tbody td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .4rem var(--space-2); border: 0; text-align: left; }
  /* Bei 320 px darf ein langer Zonenname (America/Argentina/ComodRivadavia) die Karte nicht aufweiten. */
  .boss-teams__table tbody td > span { min-width: 0; overflow-wrap: anywhere; }
  .boss-teams__table tbody td::before { content: attr(data-label); margin-inline-end: auto; color: var(--color-muted); }
  /* Der Boss steht als Kartenkopf: sein Name traegt die Karte, eine Beschriftung "Boss" davor waere Laerm. */
  .boss-teams__table tbody td:first-child { font-weight: 700; }
  .boss-teams__table tbody td:first-child::before { content: none; }
  .boss-teams__table tbody td:nth-child(n+2) { text-align: left; }
  /* Letzte Zelle = Anmelden-Knopf: ohne Beschriftung davor, ueber die volle Kartenbreite; ohne Knopf (nicht angemeldet) entfaellt die leere Zeile. */
  .boss-teams__table tbody td:last-child::before { content: none; }
  .boss-teams__table tbody td:last-child:empty { display: none; }
  .boss-teams__table tbody td:last-child button { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .boss-teams__total, .boss-teams__zone { display: inline; margin-inline-start: var(--space-1); }
}

/* Boss Team Finder (Schritt 3b, Auftrag Sven 2026-10-07): Erstellmaske, Detailfenster, Anmelde-Dialog. Nur
   vorhandene Tokens (kein neuer Farbwert); Dialoge wie .guild-public__apply-dialog. Die Summenanzeige
   unterscheidet die Zustaende nicht allein ueber die Farbe (Randbalken + Text), der Wein-Ton waere als
   Schrift auf dunklem Grund zu schwach. */
.boss-teams__create { margin: var(--space-2) 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.boss-teams__create > summary { cursor: pointer; color: var(--color-accent); font-weight: 700; }
.boss-teams__create > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.boss-teams__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); column-gap: var(--space-2); margin-top: var(--space-2); }
.boss-teams__form > * { min-width: 0; }
.boss-teams__field--wide { grid-column: 1 / -1; }
.boss-teams__field > small { display: block; margin-top: .25rem; color: var(--color-muted); }
.boss-teams__slots { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: var(--space-1) 0 0; padding: 0; border: 0; }
.boss-teams__slots legend, .boss-teams__role-choice legend { padding: 0; color: var(--color-muted); font: 600 .72rem/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
.boss-teams__slots > div { flex: 1 1 5rem; min-width: 0; }
/* Bei "unbegrenzt" sperrt boss-teams.js die drei Rollenfelder (disabled laesst sich per CSS nicht setzen); sichtbar ausgegraut. */
.boss-teams__slots input:disabled { opacity: .52; cursor: not-allowed; }
.boss-teams__sum { margin: var(--space-1) 0; padding-inline-start: var(--space-1); border-inline-start: 4px solid var(--color-border); font-weight: 700; }
.boss-teams__sum[data-state="ok"] { border-inline-start-color: var(--color-success); }
.boss-teams__sum[data-state="mismatch"] { border-inline-start-color: var(--color-danger); }
.boss-teams__dialog { width: min(36rem, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: min(90dvh, 48rem); overflow: auto; padding: var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
.boss-teams__dialog::backdrop { background: rgb(0 0 0 / .72); }
.boss-teams__dialog h3, .boss-teams__dialog h4 { margin: 0; overflow-wrap: anywhere; }
.boss-teams__dialog-title { display: flex; align-items: center; gap: var(--space-2); }
.boss-teams__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem var(--space-2); margin: var(--space-2) 0; }
.boss-teams__facts dt { color: var(--color-muted); }
.boss-teams__facts dd { margin: 0; overflow-wrap: anywhere; }
.boss-teams__description { white-space: pre-wrap; overflow-wrap: anywhere; }
.boss-teams__roles-list h4 { margin: var(--space-2) 0 .25rem; }
.boss-teams__roles-list ul { margin: 0; padding: 0; list-style: none; }
.boss-teams__roles-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1); padding: .25rem 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.boss-teams__roles-list li button { min-height: 2.75rem; }
.boss-teams__nobody { color: var(--color-muted); }
.boss-teams__dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.boss-teams__dialog-actions > span { flex: 1 1 100%; }
.boss-teams__dialog-actions button { flex: 1 1 8rem; min-width: 0; }
.boss-teams__dialog-actions--end { justify-content: flex-end; }
.boss-teams__role-choice { min-width: 0; margin: var(--space-2) 0 0; padding: 0; border: 0; }
.boss-teams__role { display: flex; align-items: center; gap: var(--space-1); min-height: 2.75rem; margin: .25rem 0; padding: .25rem var(--space-1); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); cursor: pointer; }
.boss-teams__role[hidden] { display: none; } /* eine Rolle, die die Vocation des gewaehlten Characters nicht erlaubt: display:flex oben wuerde das Attribut sonst uebersteuern */
.boss-teams__role:has(input:checked) { border-color: var(--color-accent); }
.boss-teams__role:has(input:disabled) { opacity: .52; cursor: not-allowed; }
.boss-teams__role:focus-within { box-shadow: var(--focus-ring); }
.boss-teams__role input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--color-accent); }
.boss-teams__role-icon { flex: none; width: 1.5rem; height: 1.5rem; }
.boss-teams__role-count { margin-inline-start: auto; color: var(--color-muted); font-weight: 400; }
@media (max-width: 30rem) {
  .boss-teams__dialog { padding: var(--space-2); }
  .boss-teams__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .boss-teams__facts dd { margin-bottom: .5rem; }
}

/* Oeffentliche Guild-Landingpage (ADR-0017 §1/§9, Schnitt 2): Kopfbereich mittig, Kennzahlen als
   Zeile grosser Zahlen mit kleiner Beschriftung darunter, Vorbild stammtisch-nevia.de. Nur
   vorhandene Tokens, kein neuer Farbwert. */
.guild-public__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.guild-public__logo { width: 6rem; height: 6rem; object-fit: contain; border-radius: var(--radius-md); background: var(--color-surface-raised); }
.guild-public__header h1 { margin: 0; }
.guild-public__meta { margin: 0; color: var(--color-muted); }
/* flex-wrap statt Scrollen: bei 320px brechen die vier Kennzahlen in mehrere Zeilen um, statt
   einen waagerechten Seitenueberlauf zu erzeugen (Auftrag). Label VOR Wert im DOM (dt vor dd,
   zugaengliche Reihenfolge "Mitglieder: 42"), column-reverse dreht nur die SICHTBARE
   Reihenfolge auf "Zahl oben, Beschriftung darunter" (Vorbild). */
.guild-public__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: var(--space-3) 0; padding: 0; text-align: center; }
.guild-public__stat { display: flex; flex-direction: column-reverse; align-items: center; gap: .15rem; min-width: 5rem; }
.guild-public__stat dd { margin: 0; font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 700; color: var(--color-fg); }
.guild-public__stat dt { margin: 0; color: var(--color-muted); font-size: .8125rem; }

.guild-public__body details { margin-block: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.guild-public__body summary { cursor: pointer; color: var(--color-accent); font-weight: 650; }

/* Leaderbereich INNERHALB eines der fuenf Reiter (Auftrag Sven 2026-09-27, "Leaderfunktionen den
   Reitern zuordnen"): steht immer NACH dem oeffentlichen Inhalt desselben Abschnitts
   (buildSection(), guild-landing-view.js) und braucht eine eigene, erkennbare Flaeche, damit die
   Trennung nicht nur aus Leerraum besteht - dieselben Tokens wie .guild-public__apply-card, kein
   neuer Farbwert. */
.guild-public__leader-block { margin-top: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }

/* Allgemeine Leaderfunktionen (#guild-public-page/#guild-permissions, guild/index.html): dieselben
   Rahmen-/Abstandstokens wie die fuenf Reiter oben, ueber dieselbe Klasse - keine zweite Regel.
   Verschwindet vollstaendig, sobald BEIDE <details> darin verborgen sind (renderPublicPage()/
   updatePermissionsVisibility(), guild.js setzen deren hidden-Attribut bereits) - sonst bliebe
   eine leere Ueberschrift "Allgemeine Leaderfunktionen" sichtbar, wo ein Mitglied ohne jede
   verwaltende Berechtigung nichts darf. Liest dabei nur die bereits gesetzten hidden-Attribute,
   dasselbe :has()-Prinzip wie beim Umfrage-Fieldset weiter unten - keine zweite
   Sichtbarkeitspruefung in JavaScript. */
#guild-leader-general:not(:has(> details:not([hidden]))) { display: none; }

/* Mitgliederkacheln (Auftrag Sven 2026-09-25, Vorbild stammtisch-nevia.de): ein Raster aus
   Kacheln statt einer Liste, eine Kachel je Mitglied - auf breiten Schirmen mehrere je Zeile,
   auf schmalen automatisch einspaltig. Das Auswahlfeld unten gilt unveraendert auf ALLEN
   Breiten gleich. */
.guild-public__members-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.guild-public__members-group-heading { margin: var(--space-3) 0 var(--space-1); color: var(--color-accent); font-weight: 650; }
.guild-public__members-offline { margin-top: var(--space-2); }
/* auto-fill/minmax statt einer eigenen Medienabfrage: minmax(min(100%, 16rem), 1fr) kann auf
   sehr schmalen Breiten (320px) nie breiter als der verfuegbare Platz werden, das Raster wird
   dadurch von selbst einspaltig, ohne waagerechten Ueberlauf. */
.guild-public__members-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* Die Kachel selbst: erhoehte Flaeche und Rahmen ausschliesslich aus vorhandenen Tokens (kein
   neuer Farbwert - styles-contract.test.js haelt die Palette woertlich fest). Outfitbild links,
   senkrecht mittig ueber align-items: center; die Infospalte ist selbst ein vertikales Flex, das
   Name/Detail/Rang-Plakette/Verweise untereinander stapelt. */
.guild-public__member { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
/* Rahmen um die Figur (Sven, 2026-09-26). Er traegt die feste Breite/Hoehe gegen Layoutsprung,
   waehrend das Outfitbild laedt oder fehlschlaegt (kein gespeichertes Outfit UND kein
   Vocation-Rueckfall). Hervorgehoben ausschliesslich mit vorhandenen Tokens: tiefere Flaeche als
   die Kachel (--color-surface gegen --color-surface-raised), Rahmen aus --color-border und ein
   innen liegender dunkler Ring aus --color-bg, der die Figur wie in einem Passepartout absetzt.
   MESSUNG vom 2026-09-26 (Grund fuer das Verschieben des Bildes): outfit-images.ots.me liefert
   immer eine 64x64-Leinwand, auf der die Figur UNTEN RECHTS anliegt - beim gewoehnlichen
   Ein-Feld-Outfit genau im Quadranten x 32..63/y 32..63, mit Mount grosszuegiger
   (x 17..62/y 12..63). Mittig im Rahmen steht sie deshalb erst, wenn das Bild nach oben links
   rueckt; overflow: hidden am Rahmen schneidet die dabei frei werdende Ecke ab.
   ponytail: -22% ist ein Mittelwert der gemessenen Faelle, kein Wert je Bild - am 2026-09-26 im
   Browser nachgemessen: Der haeufige Ein-Feld-Fall bleibt rund 1,9px neben der Mitte, eine
   Mount-Figur verliert oben etwa einen Pixel. Hoehere Werte zentrieren den Ein-Feld-Fall genauer
   und beschneiden die Mount-Figur dafuer sichtbar; von 63 Mitgliedern der Referenzguild tragen
   heute 2 einen Mount und 60 den Vocation-Rueckfall ohne Mount. Genau je Bild ginge nur
   ueber die Huelle der sichtbaren Pixel, und die ist im Browser nicht messbar:
   outfit-images.ots.me sendet kein Access-Control-Allow-Origin (am 2026-09-26 geprueft), eine
   Canvas-Messung waere also gesperrt. Der Preis dafuer waere, fremde Bilder durch unseren
   Worker zu leiten. */
.guild-public__member-portrait { display: block; flex-shrink: 0; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-bg); }
.guild-public__member-outfit { display: block; width: 100%; height: 100%; object-fit: contain; transform: translate(-22%, -22%); }
/* MIT MOUNT ein eigener Versatz (Sven, 2026-09-26, Beispiel "Mac of storm": mit dem Wert oben
   stand die Figur zu weit oben links). Eine Mount-Figur fuellt die Leinwand viel weiter nach oben
   links als eine Figur zu Fuss; am 2026-09-26 an den drei live gespeicherten bzw. gaengigen
   Mounts gemessen (Rand links/rechts und oben/unten): Mount 1810 17/1 und 12/0, Mount 1150 20/2
   und 8/1, Mount 387 18/1 und 15/0. Mittig steht sie damit bei rund -14% waagerecht und -9%
   senkrecht - deutlich weniger als die -22% ohne Mount. Kein Fall wird dabei beschnitten. */
.guild-public__member-outfit--mount { transform: translate(-14%, -9%); }
.guild-public__member-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.guild-public__member-name { margin: 0; display: flex; align-items: center; gap: var(--space-1); overflow-wrap: anywhere; font-weight: 650; }
.guild-public__member-online-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.guild-public__member-detail { margin: 0; color: var(--color-muted); font-size: .875rem; overflow-wrap: anywhere; }
.guild-public__member-level { color: var(--color-fg); }
/* Rang-Plakette: kleiner, umrandeter Kasten, Grossbuchstaben, leichte Laufweite - align-self
   haelt sie schmal statt die volle Kachelbreite zu fuellen (.guild-public__member-info ist
   flex-column). */
.guild-public__member-rank-badge { align-self: flex-start; max-width: 100%; padding: .15rem .5rem; overflow-wrap: anywhere; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-muted); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; }
/* Verweis-Geometrie: die vorhandene .btn--sm-Groesse (padding/font-size, siehe weiter oben bei
   den globalen Button-Regeln) samt derselben Button-Geometrie wie .verify__discord-link/
   .guild-public__apply-link - keine zweite, eigene Knopfform. GEDECKTER TON (Sven, 2026-09-26):
   dieselben neutralen Button-Tokens wie .button-secondary statt des goldenen Verlaufs - der
   Verweis ist die Nebenhandlung der Kachel, nicht ihr auffaelligstes Element. align-self haelt
   ihn schmal, seit die frueher umgebende .guild-public__member-links-Huelle mit dem Tibia-Knopf
   entfallen ist (.guild-public__member-info ist flex-column). */
.guild-public__member-link { align-self: flex-start; margin-top: .15rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--button-neutral-border); border-radius: var(--button-radius); background: var(--button-neutral-bg); color: var(--color-muted); font-family: var(--font-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.guild-public__member-link:hover { filter: brightness(1.12); color: var(--color-fg); }
/* Unter etwa 26rem bleibt neben dem 64px-Bild zu wenig Breite: Der Name bricht nach jedem Wort
   und die Rang-Plakette mitten im Wort ("SCHANKA/DJUTANT", gemessen bei 320px am 2026-09-25).
   Ein kleineres Bild gibt dem Textblock rund ein Viertel mehr Breite zurueck und loest beides,
   ohne die Kachel umzubauen. */
@media (max-width: 26rem) {
  .guild-public__member-portrait { width: 44px; height: 44px; }
  .guild-public__member { gap: var(--space-1); padding: var(--space-1); }
  /* Die Offline-Gruppe steht in einem eigenen Rahmen und kostet dadurch noch einmal Breite -
     dort blieb "SCHANKADJUTANT" um einen einzigen Buchstaben zu lang. Eine Spur kleinere
     Laufweite und Schrift der Plakette loesen das, ohne sie unleserlich zu machen. */
  .guild-public__member-rank-badge { padding: .15rem .35rem; font-size: .625rem; letter-spacing: .03em; }
}

/* "Bewerben" (Auftrag Sven 2026-09-26, Vorbild stammtisch-nevia.de .join-grid/.reqs/.join-card/
   .contacts): Anforderungen links, Kontaktkarte rechts (Sven, 2026-10-06: auf breiten Schirmen
   nebeneinander und buendig auf gleicher Hoehe, auf schmalen Schirmen die Karte DARUNTER).
   Umbruchpunkt 40rem wie die uebrigen Zwei-Spalten-Raster der Seite (z. B. .world-daily__list).
   Beide Kinder sind Kaesten mit demselben Rahmen; die Grid-Standardausrichtung (stretch) dehnt den
   kuerzeren auf die Hoehe des laengeren, daher teilen sie sich dieselbe Unterkante. */
.guild-public__apply-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 40rem) {
  .guild-public__apply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Stichpunkte OHNE Standard-Aufzaehlungszeichen, dafuer ein eigener Marker per ::before -
   dieselbe Vorbild-Form wie .reqs/.tick im Stammtisch, hier ausschliesslich mit vorhandenen
   Tokens (kein neuer Farbwert - styles-contract.test.js haelt die Palette woertlich fest).
   Dasselbe Haekchen wie .character-proficiency-perk.is-picked::after weiter oben. */
.guild-public__apply-reqs { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.guild-public__apply-reqs li { display: flex; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.guild-public__apply-reqs li::before { content: "✓"; flex-shrink: 0; color: var(--color-accent); font-weight: 700; }
/* Die Karte "So geht's" und der Anforderungskasten: derselbe Kachel-Rahmen/dieselbe Flaeche wie
   .guild-public__member oben. */
.guild-public__apply-reqs-box, .guild-public__apply-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.guild-public__apply-contacts-title { margin: 0; color: var(--color-accent); font-weight: 650; }
/* Kontaktpersonen: kompakt, aber weiter getrennt (Sven, 2026-09-29 "besser voneinander abtrennen",
   2026-10-06 "kompakter"): EIN gemeinsamer Rahmen um die Liste (dieselben Tokens wie die Karte
   oben, kein neuer Farbwert - styles-contract.test.js haelt die Palette woertlich fest), die
   Eintraege darin nur durch eine feine Trennlinie statt je einem eigenen Kasten, mit kleinerem
   Innenabstand. Die Reihenfolge ist die Rangfolge (contactsFromMembers()). min-width: 0 +
   overflow-wrap: anywhere bleiben gegen waagerechten Ueberlauf/Umbruch mitten im Namen bei 320px. */
.guild-public__apply-contacts-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.guild-public__apply-contacts-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--space-1); min-width: 0; overflow-wrap: anywhere; padding: .35rem var(--space-1); }
.guild-public__apply-contacts-list li + li { border-top: 1px solid var(--color-border); }
/* "Ueber Tibia.com bewerben" fuehrt auf tibia.com, eine fremde Domain (ADR-0017 §5) - deshalb ein
   button-artiger Link statt eines <button>, mit derselben Geometrie wie .verify__discord-link.
   GEDECKTER TON (Korrekturrunde 1, Auftrag Sven 2026-09-27/28): Seit
   .guild-public__apply-open-btn ("Ueber Tibiapoint bewerben") der HAUPTWEG ist, traegt dieser
   Verweis nicht mehr denselben goldenen Verlauf - zwei gleich laute Knoepfe nebeneinander naehmen
   dem Hauptweg seine Wirkung (Sven, 2026-09-26, dieselbe Rangordnung wie beim GuildStats-Verweis
   der Mitgliederkachel, .guild-public__member-link, und beim Melde-Knopf der News,
   .guild-public__news-report). Dieselben neutralen Button-Tokens wie .button-secondary. */
.guild-public__apply-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-2); padding: 10px 18px; border: 1px solid var(--button-neutral-border); border-radius: var(--button-radius); background: var(--button-neutral-bg); color: var(--color-fg); font: 600 .82rem / 16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.guild-public__apply-link:hover { filter: brightness(1.12); color: var(--color-fg); }
/* .guild-public__apply-open-btn ("Ueber Tibiapoint bewerben", Auftrag Sven 2026-09-27) bleibt
   der golden hervorgehobene HAUPTWEG - eigene Regel statt der vorher geteilten mit
   .guild-public__apply-link, sonst verwischt die Rangordnung wieder. */
.guild-public__apply-open-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-2); padding: 10px 18px; border: 1px solid var(--button-border); border-radius: var(--button-radius); background: var(--button-bg); color: var(--button-fg); font: 600 .82rem / 16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.guild-public__apply-open-btn:hover { filter: brightness(1.12); }
/* Der Satz-plus-Verweis fuer die Guild-Subdomain (ADR-0017 §5, "kein Knopf, der zwangslaeufig
   scheitert") und der Hinweis "kein Character auf dieser World" tragen keine eigene Form - sie
   sind Fliesstext/ein normaler Link innerhalb der Karte, dieselbe Zurueckhaltung wie der
   uebrige erklaerende Text dort. */
.guild-public__apply-own { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

/* Bewerben-Dialog (Auftrag Sven 2026-09-26/27): dieselbe Dialog-Geometrie wie
   .dashboard-tile-dialog/.guild-public__news-image-dialog, dieselben Formularfeld-Tokens wie
   .hunt-optimizer__dialog (label/select/textarea) - keine dritte, eigene Form. */
.guild-public__apply-dialog { width: min(34rem, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: min(90dvh, 44rem); overflow: auto; padding: var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
.guild-public__apply-dialog::backdrop { background: rgb(0 0 0 / .72); }
.guild-public__apply-dialog h3 { margin: 0; overflow-wrap: anywhere; }
.guild-public__apply-dialog label { display: grid; gap: .3rem; min-width: 0; margin-top: var(--space-2); color: var(--color-muted); font: 600 .72rem/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
.guild-public__apply-dialog select, .guild-public__apply-dialog textarea { min-height: 2.5rem; width: 100%; max-width: 100%; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--color-fg); font: inherit; }
.guild-public__apply-dialog textarea { min-height: 6rem; resize: vertical; }
.guild-public__apply-dialog [role="status"] { margin: var(--space-2) 0 0; color: var(--color-muted); }
.guild-public__apply-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.guild-public__apply-dialog-actions button { flex: 1 1 8rem; min-width: 0; }

/* News & Galerie (ADR-0017 §6, Schnitt 3a): Kacheln nach demselben Raster-Muster wie die
   Mitgliederliste oben - auto-fill/minmax(min(100%, 18rem), 1fr) bleibt bei 320px einspaltig
   ohne waagerechten Ueberlauf, kein neuer Farbwert. */
.guild-public__news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.guild-public__news-item { min-width: 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.guild-public__news-item h3 { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.guild-public__news-figure { margin: 0; }
/* Das Bild ist per <button> klickbar (Vergroessern, siehe guild-landing-view.js) - hier auf ein
   reines Bild-Aussehen zurueckgesetzt statt der goldenen Standard-Knopfform. */
.guild-public__news-image-btn { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: zoom-in; }
.guild-public__news-image-btn:hover { filter: brightness(1.08); }
.guild-public__news-image-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* max-width: 100% gegen waagerechten Ueberlauf (Auftrag); aspect-ratio + object-fit: cover haelt
   die Flaeche schon vor dem Laden stabil (kein Layoutsprung), width/height im Markup dienen
   Browsern ohne aspect-ratio-Unterstuetzung demselben Zweck. */
.guild-public__news-image { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface); }
.guild-public__news-caption, .guild-public__news-date { margin: .3rem 0 0; overflow-wrap: anywhere; color: var(--color-muted); font-size: .8125rem; }
.guild-public__news-body { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
/* Melde-Knopf der News-Kachel (Sven, 2026-09-26) - FUND VON SVEN (2026-09-29): der Knopf war bis
   dahin absolut in der Kachelecke gesetzt, waehrend die Kachel unten nur so viel Platz freihielt,
   wie GENAU DIESER EINE Knopf braucht (die vormalige Regel .guild-public__news-item--reportable
   mit padding-bottom: calc(...)). Die am 2026-09-27 hinzugekommenen Leader-Knoepfe
   (Bearbeiten/Loeschen, guild.js) standen dagegen im normalen Fluss am Ende der Kachel - also
   MITTEN in diesem freigehaltenen Streifen, sie ueberlappten den Melde-Knopf live.
   Loesung: EINE gemeinsame Fusszeile (.guild-public__news-footer, buildNewsEntry() in
   guild-landing-view.js) fuer beide Gruppen - Leader-Knoepfe links, Melde-Knopf rechts (per
   margin-left: auto auseinandergeschoben), umbruchfaehig (flex-wrap: wrap). Die Kachel
   (.guild-public__news-item--with-footer) ist dafuer eine Flex-Spalte; margin-top: auto auf der
   Fusszeile draengt SIE an die Unterkante - "immer an derselben Stelle unten rechts" (Auftrag vom
   2026-09-26) gilt dadurch weiterhin, jetzt aber ueber normalen Flex-Fluss statt position:
   absolute + einer festen Pixelreservierung: die Zeile ist immer so hoch, wie ihr eigener Inhalt
   tatsaechlich braucht, es gibt nichts mehr zu reservieren oder zu ueberlappen. Der Zusatz
   --with-footer wird an der KACHEL nur gesetzt, wenn es ueberhaupt eine Fusszeile gibt (siehe
   buildNewsEntry()): ohne Melde-Knopf UND ohne Leader-Knoepfe (oeffentliche Seite) bleibt die
   Kachel bei ihrem normalen Block-Fluss, es entsteht gar keine Fusszeile, also auch kein leerer
   Streifen. .guild__event-actions traegt normalerweise margin-top (Abstand zum Fliesstext davor,
   siehe dessen Regel oben) - IN dieser Fusszeile unerwuenscht, deshalb hier auf 0 zurueckgesetzt,
   nur fuer diesen Kontext, die geteilte Basisregel bleibt fuer ihre anderen Verwendungen
   unveraendert. Gedeckter Ton aus denselben neutralen Button-Tokens wie .button-secondary - Melden
   ist die Nebenhandlung eines Beitrags. Die Rueckmeldung (Melde-Status UND der Fehlerabsatz einer
   offenen Loeschbestaetigung) haengt NICHT in dieser Zeile, sondern im normalen Fluss DAVOR
   (buildNewsEntry()) - sonst reisst eine lange, umbrechende Meldung die Zeile auf und schiebt den
   Knopf aus der Ecke. */
.guild-public__news-item--with-footer { display: flex; flex-direction: column; }
.guild-public__news-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: auto; padding-top: var(--space-1); }
.guild-public__news-footer .guild__event-actions { margin-top: 0; }
.guild-public__news-footer .guild-public__news-report { margin-left: auto; }
.guild-public__news-report { border-color: var(--button-neutral-border); background: var(--button-neutral-bg); color: var(--color-muted); }
.guild-public__news-report:not(:disabled):hover { color: var(--color-fg); }
.guild-public__news-report-status { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: .8125rem; }

/* Vergroesserte Ansicht: ein einziges <dialog> fuer die ganze Seite (siehe
   guild-landing-view.js), dieselbe Dialog-Geometrie wie .dashboard-tile-dialog. */
.guild-public__news-image-dialog { width: min(92vw, 48rem); max-height: min(90dvh, 44rem); padding: var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
.guild-public__news-image-dialog::backdrop { background: rgb(0 0 0 / .72); }
.guild-public__news-image-dialog img { display: block; width: 100%; max-width: 100%; max-height: 70dvh; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.guild-public__news-image-dialog p { margin: var(--space-1) 0 0; color: var(--color-muted); }
.guild-public__news-image-dialog button { margin-top: var(--space-2); }

.legal__updated { margin: 0 0 var(--space-2); }
.legal__nav { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.legal__section { max-width: 42rem; margin-top: var(--space-4); padding: var(--space-3); overflow-wrap: break-word; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.legal__section h3, .legal__section h4, .legal__section h5 { margin: var(--space-3) 0 var(--space-1); }
.legal__section ul { padding-left: var(--space-3); }
.legal__section li { margin-bottom: var(--space-1); }
.legal__privacy-lang--active { background: var(--button-bg); color: var(--button-fg); }
.legal__privacy-version[hidden] { display: none; }

footer { position: relative; z-index: 10; /* aufklappende Menues der Fusszeile liegen ueber dem Seiteninhalt samt .page-close */ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) max(var(--space-2), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left)); border-top: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); font-size: .9375rem; }
footer p { margin: 0 0 .25rem; }
.footer__meta { min-width: 0; }
.footer-language { position: relative; margin-left: auto; }
.footer-language__trigger,
.footer-language__option { display: inline-flex; align-items: center; gap: .5rem; border-radius: var(--button-radius); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.footer-language__trigger { padding: 10px 18px; border-color: var(--button-border); background: var(--button-bg); color: var(--button-fg); }
.footer-language__trigger::after { content: "▾"; color: var(--button-fg); }
.footer-language__menu { position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 1; display: flex; flex-direction: column; align-items: stretch; width: max-content; max-width: calc(100vw - 2rem); padding: .25rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface-raised); box-shadow: var(--card-shadow); }
.footer-language__menu[hidden] { display: none; }
.footer-language__option { justify-content: flex-start; padding: 10px 18px; border-color: var(--button-neutral-border); background: var(--button-neutral-bg); color: var(--color-fg); white-space: nowrap; }
.footer-language__option[aria-pressed="true"] { border-color: var(--button-border); background: var(--button-bg); color: var(--button-fg); }
.footer-language__trigger:focus-visible,
.footer-language__option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.footer-refresh { display: none; }

/* Dashboard-Übersicht: Character und Notifications flankieren Discord-Status und Einladung. */
.dashboard-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 16rem) minmax(0, 22rem);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}
.dashboard-overview__columns { display: contents; }
.overview__character { grid-column: 1; grid-row: 1 / 3; }
.overview__notifications { grid-column: 3; grid-row: 1 / 3; }
.overview__character > h2,
.overview__head { min-height: 2.75rem; display: flex; align-items: center; }
.dashboard-overview__discord,
.dashboard-overview__invite { display: flex; justify-content: center; min-width: 0; }
.dashboard-overview__discord { grid-column: 2; grid-row: 1; align-self: start; min-height: 2.75rem; align-items: center; }
.dashboard-overview__invite { grid-column: 2; grid-row: 2; align-self: center; }
.dashboard-overview__invite-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--button-neutral-border);
  border-radius: var(--button-radius);
  background: var(--button-neutral-bg);
  color: var(--color-fg);
  font: 600 .9rem / 1.4 var(--font-ui);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.dashboard-overview__invite-link:hover { filter: brightness(1.12); }
.dashboard-overview__invite-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dashboard-overview__invite-icon { display: inline-block; width: 1em; height: 1em; margin-inline: .15em; vertical-align: -.15em; }
@media (max-width: 60rem) {
  .dashboard-overview { display: flex; flex-direction: column; }
  .overview__character { order: 0; }
  .dashboard-overview__discord { order: 1; align-self: stretch; }
  .dashboard-overview__invite { order: 2; }
  .overview__notifications { order: 3; }
  .overview__character > h2,
  .overview__head { min-height: 0; }
}
.overview__section h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-base); }
.overview__character-body { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.overview__outfit {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
.overview__outfit-slot { display: block; width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.overview__outfit-placeholder { color: var(--color-muted); font-size: .75rem; text-align: center; }
.overview__outfit[hidden], .character-card[hidden], .character-skills[hidden] { display: none; }
main > .character-page { margin-block: var(--space-2); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.character-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); width: 100%; margin-block: 0; padding: var(--space-2); border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.character-card__identity { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.character-page.has-page-close .character-card__identity { padding-inline-end: 3.5rem; }
.character-card__identity h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.character-card__outfit-controls { display: flex; align-items: flex-end; flex: none; }
.character-card__outfit { display: grid; place-items: center; flex: none; width: 4rem; height: 4rem; padding: .15rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface-raised); color: var(--color-muted); cursor: pointer; }
.character-card__outfit img { width: 3.5rem; height: 3.5rem; image-rendering: pixelated; object-fit: contain; }
.character-card__outfit span { font-size: .65rem; text-align: center; }
.character-card__outfit:disabled { cursor: not-allowed; opacity: .7; }
.character-card__outfit-edit { position: relative; display: grid; place-items: center; box-sizing: border-box; flex: none; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; margin: 0 0 -.05rem -.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-accent); cursor: pointer; }
.character-card__outfit-edit::before { position: absolute; z-index: 0; box-sizing: border-box; inset-block-end: 0; inset-inline-end: .75rem; width: 1.25rem; height: 1.25rem; border: 1px solid var(--color-accent); border-radius: 50%; background: var(--color-surface-raised); content: ""; }
.character-card__outfit-edit svg { position: absolute; z-index: 1; inset-block-end: .285rem; inset-inline-end: 1.035rem; display: block; width: .68rem; height: .68rem; fill: currentColor; }
.character-card__outfit-edit:hover:not(:disabled)::before { background: var(--color-accent); }
.character-card__outfit-edit:hover:not(:disabled) { color: var(--color-surface); }
.character-card__outfit-edit:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.character-card__outfit-edit:disabled { cursor: not-allowed; opacity: .7; }
.character-card__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: var(--space-1); margin: 0; }
.character-card__facts > div { min-width: 0; }
.character-card__facts dt { color: var(--color-muted); font-size: .75rem; overflow-wrap: anywhere; }
@media (min-width: 48.001rem) {
  .character-card__facts dt { text-transform: uppercase; letter-spacing: .04em; }
}
.character-card__facts dd { min-width: 0; margin: .15rem 0 0; font-weight: 650; overflow-wrap: anywhere; }
.character-skills, .character-card > #character-skills-unavailable { min-width: 0; margin: 0; padding: var(--space-1); border: 1px solid var(--color-control-border); border-radius: var(--radius-md); }
.character-card > #character-skills-unavailable { color: var(--color-muted); }
.character-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); min-width: 0; margin-top: var(--space-2); }
.character-tool-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); box-sizing: border-box; min-width: 0; min-height: 13.5rem; padding: var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.character-tool-card[role="button"] { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.character-tool-card[role="button"]:not([aria-disabled="true"]):hover { border-color: var(--color-accent); }
.character-tool-card[role="button"]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.character-tool-card[role="button"][aria-disabled="true"] { cursor: default; }
.character-tool-card h2 { order: 2; margin: 0; font-size: var(--font-size-base); text-align: center; overflow-wrap: anywhere; }
.character-tool-card p { margin: .25rem 0 0; color: var(--color-muted); font-size: .8rem; }
.character-tool-card .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.character-tool-card > :not(h2) { order: 1; display: grid; flex: 1 1 auto; place-items: center; width: 100%; min-width: 0; }
.character-tool-card__art { width: min(100%, 7.5rem); max-height: 7.5rem; object-fit: contain; image-rendering: pixelated; }
.character-wheel-card__art { position: relative; width: min(100%, 7rem); height: 7rem; max-height: 7rem; }
.character-wheel-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.character-wheel-card__fills { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.character-charms-card__art { display: flex; gap: .35rem; }
.character-charms-card__art img { width: 2.5rem; height: 2.5rem; object-fit: contain; image-rendering: pixelated; }
.character-gem-atelier-card__art { position: relative; width: 4.5rem; height: 4.5rem; overflow: hidden; }
.character-gem-atelier-card__art img { position: absolute; inset: 0 auto auto 0; width: auto; max-width: none; height: 4.5rem; image-rendering: pixelated; }
.character-inventory-summary, .character-proficiency-summary { min-width: 0; }
.character-inventory-summary__paperdoll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; width: 6.6rem; max-width: 100%; }
/* Leere Paperdoll gut sichtbar (Rueckmeldung 2026-09-27): goldener Rand, dunkles Innenfeld. */
.character-inventory-summary__slot { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 1px solid var(--tp-gold-deep); border-radius: .35rem; background: var(--tp-ink-950); box-shadow: inset 0 0 6px rgb(0 0 0 / 80%); }
.character-inventory-summary__slot.is-filled { background: var(--color-surface-raised); box-shadow: none; }
.character-inventory-summary__slot.is-gap { visibility: hidden; }
.character-inventory-summary__slot img { width: 72%; height: 72%; object-fit: contain; image-rendering: pixelated; }
#character-inventory-dialog { width: min(58rem, calc(100% - 1.5rem)); max-height: min(90dvh, 54rem); overflow: auto; padding: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
#character-inventory-dialog::backdrop { background: rgb(0 0 0 / .72); }
.character-inventory-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; padding: var(--space-3); }
.character-inventory-editor > #character-inventory-editor-body { min-width: 0; }
.character-inventory-editor__header, .character-inventory-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.character-inventory-editor__header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.character-inventory-layout { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(0, 1.2fr); gap: var(--space-2); min-width: 0; }
.character-inventory-layout h3 { margin: 0 0 .4rem; font-size: .95rem; }
.character-inventory-paperdoll, .character-inventory-owned, .character-inventory-controls, .character-inventory-catalog { min-width: 0; padding: var(--space-2); border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.character-inventory-paperdoll__grid { display: grid; grid-template-columns: repeat(3, 3.5rem); justify-content: center; gap: .2rem; max-width: none; margin-inline: auto; }
.character-inventory-slot { display: grid; place-items: center; align-content: center; gap: .1rem; width: 3.5rem; min-width: 44px; height: 3.5rem; min-height: 44px; padding: .15rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); text-align: center; overflow: hidden; }
.character-inventory-slot:not(.character-inventory-slot--blank) { cursor: pointer; }
.character-inventory-slot.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.character-inventory-slot img { width: 2rem; height: 2rem; object-fit: contain; image-rendering: pixelated; }
.character-inventory-slot__label { max-width: 100%; overflow: hidden; font-size: .54rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.character-inventory-slot--blank { visibility: hidden; }
.character-inventory-sprite { position: relative; display: inline-grid; flex: none; place-items: center; line-height: 1; }
.forge-tier-badge { position: absolute; right: -4px; bottom: -4px; z-index: 2; min-width: 17px; padding: 1px 3px; border: 1px solid #8d661e; border-radius: 5px; background: linear-gradient(180deg, #ffe28a, #b77a16); color: #241708; font-size: .58rem; font-weight: 800; line-height: 1; text-align: center; box-shadow: 0 1px 3px rgb(0 0 0 / .55); pointer-events: none; }
.character-inventory-owned__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); gap: .35rem; min-width: 0; }
.character-inventory-owned__item, .character-inventory-choice { display: flex; align-items: center; gap: .4rem; min-width: 0; min-height: 2.75rem; padding: .35rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); text-align: left; overflow-wrap: anywhere; }
.character-inventory-owned__item { cursor: pointer; }
.character-inventory-owned__item.is-selected, .character-inventory-choice[aria-pressed="true"] { border-color: var(--color-accent); }
.character-inventory-owned__item img, .character-inventory-choice img, .character-inventory-catalog__row img { flex: none; width: 1.75rem; height: 1.75rem; object-fit: contain; image-rendering: pixelated; }
.character-inventory-controls, .character-inventory-catalog { grid-column: 1 / -1; }
.character-inventory-controls__items { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.character-inventory-choice { cursor: pointer; }
.character-inventory-empty { color: var(--color-muted); }
.character-inventory-quiver { margin-top: var(--space-2); }
.character-inventory-details { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; gap: .6rem; min-width: 0; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-control-border); }
.character-inventory-details h3 { overflow-wrap: anywhere; }
.character-inventory-details__group { display: grid; gap: .4rem; min-width: 0; max-width: 100%; box-sizing: border-box; margin: 0; padding: .6rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); }
.character-inventory-details__group legend { padding-inline: .25rem; }
.character-inventory-details__imbue, .character-inventory-details__tier { display: grid; grid-template-columns: minmax(4rem, .5fr) 24px minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: .4rem; min-width: 0; }
.character-inventory-imbue-icon { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.character-inventory-details select, .character-inventory-catalog__tools input, .character-inventory-catalog__tools select { width: 100%; min-width: 0; max-width: 100%; }
.character-inventory-catalog > summary { min-height: 2.75rem; cursor: pointer; }
.character-inventory-manage { grid-column: 1 / -1; justify-self: start; min-height: 2.75rem; }
.character-inventory-catalog__tabs { display: flex; gap: .35rem; min-width: 0; max-width: 100%; margin-block: .5rem; padding: .15rem .1rem .5rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.character-inventory-catalog__tab { flex: 0 0 auto; min-height: 2.75rem; padding-inline: .75rem; white-space: nowrap; }
.character-inventory-catalog__tab.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.character-inventory-catalog__search { min-height: 2.75rem; width: 100%; margin-block: .25rem .5rem; }
.character-inventory-catalog__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.75rem; align-items: center; gap: .5rem; min-height: 3.5rem; min-width: 0; padding: .4rem; text-align: left; }
.character-inventory-catalog__item img { width: 2.5rem; height: 2.5rem; object-fit: contain; image-rendering: pixelated; }
.character-inventory-catalog__item > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.character-inventory-catalog__item small { display: block; color: var(--color-muted); }
.character-inventory-catalog__check { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-surface); color: var(--color-accent); font-weight: 700; }
.character-inventory-catalog__item[aria-pressed="true"] { border-color: var(--color-accent); }
.character-inventory-owned__list { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.character-inventory-choice { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; max-width: 100%; padding: .35rem; text-align: left; }
.character-inventory-quiver { margin-top: .65rem; }
.character-inventory-owned__group { margin-block: .55rem; padding-top: .4rem; border-top: 1px solid var(--color-control-border); }
.character-inventory-owned__group h4 { margin: 0 0 .35rem; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
.character-inventory-owned__item { width: 3.5rem; height: 3.5rem; min-height: 44px; flex-direction: column; justify-content: center; gap: .1rem; padding: .2rem; text-align: center; }
.character-inventory-owned__item img { width: 2rem; height: 2rem; }
.character-inventory-owned__item span { display: block; max-width: 100%; overflow: hidden; font-size: .58rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.character-inventory-backpack-drop { display: grid; place-items: center; min-height: 2.75rem; margin-top: .5rem; border: 1px dashed var(--color-control-border); border-radius: var(--radius-sm); color: var(--color-muted); }
.character-inventory-backpack-drop:focus-within, .character-inventory-backpack-drop:hover { border-color: var(--color-accent); }
.character-inventory-stats { display: grid; grid-template-columns: minmax(6rem, .65fr) minmax(0, 1.1fr) minmax(6rem, .65fr) minmax(0, 1.1fr); gap: .12rem .55rem; margin: 0; font-size: .88rem; line-height: 1.25; }
.character-inventory-stats dt { color: var(--color-muted); }
.character-inventory-stats dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.character-inventory-imbue-slots { display: flex; gap: .3rem; margin-block: .45rem; }
.character-inventory-imbue-slot { position: relative; display: grid; place-items: center; width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 2px; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
.character-inventory-imbue-slot.is-selected, .character-inventory-imbue-choice.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent) inset; }
.character-inventory-imbue-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.character-inventory-imbue-choices { display: grid; grid-template-columns: repeat(auto-fill, 42px); gap: .3rem; max-height: 10.5rem; overflow: auto; padding: .1rem; }
.character-inventory-imbue-choice { display: grid; place-items: center; width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 3px; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); cursor: pointer; }
.character-inventory-imbue-choice img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.character-inventory-imbue-tiers { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; margin-top: .45rem; overflow: visible; }
.character-inventory-imbue-tier { min-height: 2.75rem; padding-inline: .65rem; white-space: nowrap; }
.character-inventory-imbue-tier.is-selected { border-color: var(--color-accent); background: var(--color-accent); color: #241708; }
.character-inventory-imbue-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.character-inventory-forge-picker { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--color-control-border); }
.character-inventory-forge-picker h4 { margin: 0 0 .25rem; font-size: .88rem; }
.character-inventory-forge-picker > p { margin: 0 0 .4rem; color: var(--color-muted); font-size: .85rem; overflow-wrap: anywhere; }
.character-inventory-forge-tiers { margin-top: 0; }
.character-inventory-forge-status, .character-inventory-imbue-status { font-size: .85rem; }
.character-inventory-item-popout { width: min(48rem, calc(100vw - 2rem)); max-height: min(88dvh, 56rem); overflow: auto; padding: .75rem; }
#character-inventory-item-dialog { width: min(50rem, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); max-height: 92dvh; padding: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-fg); }
#character-inventory-item-dialog::backdrop { background: rgb(0 0 0 / .58); }
.character-inventory-eqwrap { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.character-inventory-doll-column { flex: 0 0 172px; min-width: 0; }
.character-inventory-eqwrap .paperdoll { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(4, 52px); gap: 6px; flex: 0 0 auto; }
.character-inventory-eqwrap .eqslot { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; min-width: 0; min-height: 0; padding: 0; overflow: visible; border: 1px solid #806747; border-radius: 8px; background: linear-gradient(180deg, #1d160f, #120d08); transition: border-color .12s, filter .12s; }
.character-inventory-eqwrap .eqslot:hover { filter: brightness(1.15); border-color: #e8b04b; }
.character-inventory-eqwrap .eqslot.blank { visibility: visible; background: none; border: 1px dashed rgb(255 214 150 / .08); }
.character-inventory-eqwrap .eqslot img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.character-inventory-eqwrap .eqslot .ph { padding: 0 3px; color: #c8b89b; font-family: var(--font-ui); font-size: .56rem; letter-spacing: .04em; line-height: 1.1; opacity: .5; text-align: center; text-transform: uppercase; }
.character-inventory-eqwrap .eqslot.filled { border-color: #b98b39; box-shadow: 0 0 0 1px rgb(255 214 150 / .12) inset; }
.character-inventory-eqwrap .eqslot.drag-over, .character-inventory-eqwrap .backpack.drag-over { border-color: #e8b04b; box-shadow: 0 0 0 2px rgb(232 176 75 / .24) inset; filter: brightness(1.12); }
.character-inventory-eqwrap .backpack { flex: 1 1 300px; min-width: min(260px, 100%); max-height: 340px; overflow: auto; padding: 9px 10px; border: 1px solid #806747; border-radius: 10px; background: linear-gradient(180deg, #1d160f, #120d08); }
.character-inventory-eqwrap .backpack h4 { margin: 8px 0 5px; color: #c8b89b; font-family: var(--font-ui); font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.character-inventory-eqwrap .backpack h4:first-child { margin-top: 0; }
.character-inventory-eqwrap .bpgrid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 5px; }
.character-inventory-eqwrap .bpi { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #806747; border-radius: 7px; background: #150f0a; cursor: pointer; transition: border-color .12s, filter .12s; }
.character-inventory-eqwrap .bpi:hover { border-color: #e8b04b; filter: brightness(1.18); }
.character-inventory-eqwrap .bpi img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.character-inventory-eqwrap .bp-empty { color: #c8b89b; font-family: var(--font-ui); font-size: .78rem; }
.character-inventory-eqwrap .bp-sprites { width: 172px; max-height: 190px; margin-top: 8px; padding: 8px 9px; overflow: auto; border: 1px solid #806747; border-radius: 10px; background: linear-gradient(180deg, #1d160f, #120d08); }
.character-inventory-eqwrap .bp-sprites-h { margin-bottom: 6px; color: #c8b89b; font-family: var(--font-ui); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.character-inventory-equipment-note { margin: 0; }
.character-inventory-level-restriction { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; width: fit-content; max-width: 100%; padding: .35rem .65rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); cursor: pointer; }
.character-inventory-level-restriction input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; accent-color: var(--color-accent); }
.character-inventory-level-restriction span, .character-inventory-level-note { overflow-wrap: anywhere; }
.character-inventory-level-note { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.character-inventory-level-note button { min-height: 2.75rem; }
.character-inventory-layout { display: block; }
.character-inventory-layout > * + * { margin-top: 0; }
.character-inventory-layout h3 { margin: 0 0 .3rem; }
.character-inventory-layout .character-inventory-eqwrap { margin-top: 10px; }
.character-inventory-layout .character-inventory-manage { margin-top: 10px; }
.character-inventory-layout .character-inventory-catalog { margin-top: 12px; }
.character-inventory-layout #eq-drag-status:empty, #character-inventory-editor-status:empty { display: none; }
.character-inventory-editor { gap: 8px; }
.character-inventory-details { grid-template-columns: minmax(0, 1fr); gap: .35rem; margin: 0; padding: 0; border: 0; }
.character-inventory-details .wt-name { display: flex; justify-content: flex-end; min-width: 0; }
.character-inventory-details__meta { margin: 0; color: #c8b89b; font-size: .69rem; }
.character-inventory-stats.wt-grid { display: grid; grid-template-columns: minmax(7.5rem, .5fr) minmax(0, 1fr); gap: .12rem .55rem; margin: 0; font-size: .78rem; line-height: 1.2; }
.character-inventory-stats.wt-grid dt { color: #c8b89b; }
.character-inventory-stats.wt-grid dd { color: #f2e8d5; text-align: right; }
.character-inventory-item-popout { position: fixed; inset: auto; z-index: 2000; box-sizing: border-box; width: 450px !important; max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important; max-height: min(88dvh, 720px); margin: 0; padding: 0; overflow: auto; border: 1px solid #806747; border-radius: 10px; background: linear-gradient(180deg, #241a10, #1a130b); color: #f2e8d5; box-shadow: 0 16px 42px rgb(0 0 0 / .6); }
.character-inventory-item-popout .character-inventory-editor__header { position: sticky; top: 0; z-index: 1; min-height: 38px; padding: 5px 8px 5px 12px; border-bottom: 1px solid #806747; background: #1d160f; }
.character-inventory-item-popout .character-inventory-editor__header h2 { flex: 1 1 auto; color: #e8b04b; font-size: .82rem; }
.character-inventory-item-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; }
.character-inventory-item-actions .btn { min-height: 28px; padding: 4px 10px; border: 1px solid #8e672a; border-radius: 6px; background: #21170d; color: #f2e8d5; font-size: .66rem; letter-spacing: .04em; }
.character-inventory-item-actions .btn:hover { border-color: #e8b04b; color: #e8b04b; }
.character-inventory-details .wt-note { margin: .35rem 0 0; color: #c8b89b; font-size: .72rem; line-height: 1.35; }
.character-inventory-item-popout #character-inventory-item-body { padding: 10px 12px 12px; }
.character-inventory-imbue-choices { grid-template-columns: repeat(auto-fill, 42px); gap: 5px; max-height: 168px; padding-right: 2px; }
.character-inventory-imbue-choice { position: relative; width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 3px; border-radius: 7px; background: #150f0a; }
.character-inventory-imbue-choices .character-inventory-imbue-icon { width: 100%; height: 100%; }
.character-inventory-imbue-slots { gap: 5px; margin: 7px 0; }
.character-inventory-imbue-slot { width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 2px; border-radius: 7px; background: #1b140d; }
.character-inventory-forge-picker { margin-top: 10px; padding-top: 9px; border-color: rgb(255 214 150 / .12); }
.character-inventory-forge-picker h4 { margin: 0 0 4px; color: #e8b04b; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.character-inventory-forge-picker > p { margin: 0 0 7px; color: #c8b89b; font-size: .69rem; line-height: 1.3; }
.character-inventory-forge-tiers { gap: 5px; }
.character-inventory-imbue-tiers .character-inventory-imbue-tier { min-height: 30px; padding: 4px 9px; border: 1px solid #806747; border-radius: 6px; background: #1a130b; color: #f2e8d5; font-size: .68rem; }
.character-inventory-imbue-tiers .character-inventory-imbue-tier.is-selected { border-color: #b98b39; background: linear-gradient(180deg, #e8b04b, #b77a16); color: #241708; }
.character-inventory-imbue-choice.is-selected, .character-inventory-imbue-slot.is-selected { border-color: #e8b04b; box-shadow: 0 0 0 1px rgb(232 176 75 / .24) inset; }
@media (max-width: 36rem) {
  .character-inventory-eqwrap { gap: 8px; }
  .character-inventory-doll-column { flex-basis: 100%; }
  .character-inventory-eqwrap .backpack { flex-basis: 100%; min-width: 0; max-height: 260px; }
  .character-inventory-item-popout { max-height: min(90dvh, 56rem); }
  .character-inventory-item-popout #character-inventory-item-body { padding: 8px 9px 10px; }
}
@media (max-width: 520px) {
  .character-inventory-doll-column { flex: 0 0 150px; }
  .character-inventory-eqwrap .paperdoll { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(4, 46px); }
  .character-inventory-eqwrap .eqslot { width: 46px; height: 46px; }
  .character-inventory-eqwrap .eqslot img { width: 32px; height: 32px; }
  .character-inventory-eqwrap .bp-sprites { box-sizing: border-box; width: 100%; }
}
@media (max-width: 28rem) {
  .character-inventory-stats { grid-template-columns: minmax(5.2rem, .75fr) minmax(0, 1fr); font-size: .82rem; }
}
.character-inventory-catalog__tools { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .4rem; min-width: 0; margin-block: .5rem; }
.character-inventory-catalog__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .35rem; max-height: 18rem; overflow: auto; overscroll-behavior: contain; }
.character-inventory-catalog__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .35rem; min-width: 0; padding: .3rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); }
.character-inventory-catalog__row span, .character-inventory-catalog__row small { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.character-inventory-catalog__row small { color: var(--color-muted); }
.character-inventory-catalog__row button { grid-column: 3; grid-row: 1 / span 2; min-height: 2.5rem; padding: .25rem .45rem; }
.character-inventory-actions { justify-content: flex-start; flex-wrap: wrap; }
.character-inventory-actions button { min-height: 2.75rem; }
/* Match the Stammtisch inventory picker palette: brown resting surfaces,
   ivory text and gold reserved for selected/focused controls. */
.character-inventory-catalog { box-sizing: border-box; min-width: 0; background: linear-gradient(180deg, #2a2018, #1f170f); color: #efe3c6; }
.character-inventory-catalog__tabs { scrollbar-color: #4d3a28 #1f170f; }
.character-inventory-catalog__tab:not(.btn--gold) { border-color: #4d3a28; background: #1f170f; color: #efe3c6; }
.character-inventory-catalog__tab:not(.btn--gold):hover { border-color: #e8b04b; color: #efe3c6; }
.character-inventory-catalog__tab:focus-visible, .character-inventory-catalog__search:focus-visible,
.character-inventory-catalog__item:focus-visible { outline: 2px solid #e8b04b; outline-offset: 2px; }
.character-inventory-catalog__search { box-sizing: border-box; border-color: #4d3a28; border-radius: 6px; background: #1f170f; color: #efe3c6; }
.character-inventory-catalog__search::placeholder { color: #c8b790; opacity: 1; }
.character-inventory-catalog__items { grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); min-width: 0; }
.character-inventory-catalog__item { border-color: #4d3a28; border-radius: 9px; background: #1f170f; color: #efe3c6; font: 600 .82rem/1.25 var(--font-ui); letter-spacing: normal; text-align: left; text-transform: none; overflow-wrap: anywhere; }
.character-inventory-catalog__item:hover { border-color: #e8b04b; filter: brightness(1.08); }
.character-inventory-catalog__item > span:nth-child(2) { overflow-wrap: anywhere; }
.character-inventory-catalog__item[aria-pressed="true"] { border-color: #e8b04b; background: #2a2018; box-shadow: 0 0 0 1px rgb(232 176 75 / .2) inset; }
.character-inventory-catalog__check { background: #17110c; color: #c8b790; }
.character-inventory-catalog__item[aria-pressed="true"] .character-inventory-catalog__check { background: linear-gradient(180deg, #f2c15c, #c98f2c); color: #17110c; }
@media (max-width: 36rem) {
  .character-inventory-catalog__items { max-height: min(18rem, 50dvh); }
  .character-inventory-catalog__tab { min-height: 2.75rem; }
}
.character-proficiency-summary__tree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: .3rem; width: min(100%, 12.75rem); }
.character-proficiency-summary__level { display: grid; justify-items: center; gap: .2rem; min-width: 0; }
.character-proficiency-summary__level::before { content: attr(data-level); color: var(--color-muted); font-size: .6rem; line-height: 1; }
.character-proficiency-summary__perk { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--color-control-border); border-radius: .3rem; background: var(--color-surface-raised); }
.character-proficiency-summary__perk.is-picked { border-color: var(--color-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.character-proficiency-summary__perk:not(.is-picked) { opacity: .42; }
.character-proficiency-summary__perk img { position: absolute; left: 0; top: 0; width: auto; max-width: none; height: 100%; image-rendering: pixelated; }
.character-proficiency-summary__perk img[data-sprite-index="1"] { left: -100%; }
.character-proficiency-summary__perk img[data-sprite-index="5"] { left: -500%; }
.character-proficiency-summary__perk img[data-sprite-index="6"] { left: -600%; }
.character-proficiency-summary__perk img[data-sprite-index="15"] { left: -1500%; }
.character-gem-atelier-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; min-width: 0; }
.character-gem-atelier-summary > p { flex: 1 1 9rem; min-width: 0; }
.character-gem-atelier-summary button { min-height: 2.75rem; }
#character-gem-atelier-dialog { width: min(72rem, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: min(90dvh, 58rem); overflow: auto; padding: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
#character-gem-atelier-dialog::backdrop { background: rgb(0 0 0 / .72); }
#character-gem-atelier-editor-status:empty { display: none; }
.character-gem-atelier-editor { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3); }
.character-gem-atelier-editor__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.character-gem-atelier-editor__header h2 { min-width: 0; margin: 0; color: var(--tp-gold); font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.character-gem-atelier-body { display: grid; gap: 0; min-width: 0; }
.character-gem-atelier__note { margin: 0; color: var(--tp-text-300); font-size: .82rem; }
.character-gem-atelier__section { display: grid; gap: 6px; min-width: 0; }
.character-gem-atelier__section:first-of-type { margin-top: 10px; }
.character-gem-atelier__section + .character-gem-atelier__section { margin-top: 14px; }
.character-gem-atelier__section h3 { margin: 0 0 6px; color: var(--tp-text-300); font-size: .72rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.character-charms-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; min-width: 0; }
.character-charms-summary > p { flex: 1 1 9rem; min-width: 0; }
.character-charms-summary button { min-height: 2.75rem; }
.character-charms-dialog { width: min(72rem, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: min(90dvh, 58rem); overflow: auto; padding: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
.character-charms-dialog::backdrop { background: rgb(0 0 0 / .72); }
.character-charms-editor { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3); }
.character-charms-editor__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.character-charms-editor__header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.character-charms-body { display: grid; gap: 0; min-width: 0; }
.character-charms__summary { margin: 0 0 8px; color: var(--tp-gold); font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.character-charms__count { color: var(--tp-text-300); font-size: .72rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.character-charms__note { margin: 0; color: var(--tp-text-300); font-size: .82rem; }
.character-charms__section { display: grid; gap: 6px; min-width: 0; }
.character-charms__section:first-of-type { margin-top: 10px; }
.character-charms__section + .character-charms__section { margin-top: 14px; }
.character-charms__group-title { margin: 0; color: var(--tp-text-300); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.character-charms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.character-charms-grid .charm { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: linear-gradient(180deg, #221913, #15100a); border: 1px solid var(--tp-ink-700); border-radius: 10px; padding: 9px 6px 7px; font-family: var(--font-ui, "Alegreya Sans", sans-serif); transition: border-color .12s, box-shadow .12s, filter .12s; }
.character-charms-grid .charm:hover { filter: brightness(1.1); }
.character-charms-grid .ci { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, rgba(255,214,150,.10), transparent 70%); border-radius: 8px; }
.character-charms-grid .ci img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; filter: grayscale(1) brightness(.65); transition: filter .15s; }
.character-charms-grid .charm.set .ci img { filter: none; }
.character-charms-grid .cn { font-size: .72rem; line-height: 1.15; text-align: center; color: var(--tp-text-300); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.9em; }
.character-charms-grid .charm.set { border-color: var(--tp-gold-deep); box-shadow: 0 0 0 1px rgba(255,214,150,.12) inset; }
.character-charms-grid .charm.set .cn { color: var(--tp-gold); }
.character-charms-grid .pips { display: flex; gap: 4px; }
.character-charms-grid .pip { width: 16px; height: 16px; min-width: 0; min-height: 0; border-radius: 4px; border: 1px solid var(--tp-ink-700); background: var(--tp-ink-900); cursor: pointer; padding: 0; font: inherit; font-size: .62rem; line-height: 1; color: var(--tp-text-300); letter-spacing: 0; text-transform: none; box-shadow: none; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s, color .12s; }
.character-charms-grid .pip:hover { border-color: var(--tp-gold); }
.character-charms-grid .pip.on { background: linear-gradient(180deg, var(--tp-gold), var(--tp-gold-deep)); border-color: var(--tp-gold-deep); color: #1a1208; font-weight: 700; }
.character-charms-grid .pip:disabled { cursor: wait; }
.character-charms-grid .charm.busy { opacity: .55; pointer-events: none; }
@media (max-width: 520px) {
  .character-charms-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .character-charms-grid .ci, .character-charms-grid .ci img { width: 36px; height: 36px; }
}
.character-gem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; min-width: 0; }
.character-gem-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 9px 10px; border: 1px solid var(--tp-ink-700); border-radius: 10px; background: linear-gradient(180deg, #221913, #15100a); font-family: var(--font-ui); transition: border-color .12s, box-shadow .12s, filter .12s; }
.character-gem-tile:hover { filter: brightness(1.1); }
.character-gem-tile__header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.character-gem-tile__header h4 { min-width: 0; margin: 0; color: var(--tp-gold); font-size: .78rem; font-weight: 600; overflow-wrap: anywhere; }
.character-gem-tile__value { min-height: 0; margin: 0; color: var(--tp-text-300); font-size: .72rem; line-height: 1.3; white-space: pre-line; overflow-wrap: anywhere; }
.character-gem-icon { position: relative; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: 6px; background: radial-gradient(circle at 50% 45%, rgba(255,214,150,.10), transparent 70%); }
.character-gem-icon img { position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--gem-sprite, 0) * -28px); width: auto; max-width: none; height: 28px; image-rendering: pixelated; }
.character-gem-grades { display: flex; gap: 4px; }
.character-gem-grade { position: relative; width: 16px; min-width: 16px; height: 16px; min-height: 16px; padding: 0; border: 1px solid var(--tp-ink-700); border-radius: 4px; background: var(--tp-ink-900); color: var(--tp-text-300); box-shadow: none; font: 400 .62rem / 1 var(--font-ui); letter-spacing: 0; text-transform: none; }
.character-gem-grade::before { position: absolute; inset: -4px; content: ""; }
.character-gem-grade:not(:disabled):hover { border-color: var(--tp-gold); background: var(--tp-ink-900); color: var(--tp-text-300); filter: none; }
.character-gem-grade[aria-pressed="true"], .character-gem-grade[aria-pressed="true"]:not(:disabled):hover { border-color: var(--tp-gold-deep); background: linear-gradient(180deg, var(--tp-gold), var(--tp-gold-deep)); color: #1a1208; font-weight: 700; box-shadow: none; }
.character-gem-grade:focus-visible { outline: 2px solid var(--tp-gold); outline-offset: 2px; }
#character-proficiency-dialog { width: min(64rem, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: min(90dvh, 56rem); overflow: auto; padding: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
#character-proficiency-dialog::backdrop { background: rgb(0 0 0 / .72); }
.character-proficiency-editor { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3); }
.character-proficiency-editor__header, .character-proficiency-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.character-proficiency-editor__header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.character-proficiency-weapons { display: flex; gap: .4rem; min-width: 0; max-width: 100%; padding: .25rem .1rem .75rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-surface-raised); }
.character-proficiency-weapons:empty { display: none; }
.character-proficiency-weapon { display: grid; flex: 0 0 auto; place-items: center; gap: .3rem; min-width: 5.5rem; min-height: 4.5rem; padding: .4rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-fg); scroll-snap-align: start; }
.character-proficiency-weapon[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.character-proficiency-weapon--unmatched { opacity: .72; border-style: dashed; }
.character-proficiency-weapon--unmatched small { color: var(--color-muted); font-size: .7rem; }
.character-proficiency-weapon img { width: 2rem; height: 2rem; object-fit: contain; image-rendering: pixelated; }
.character-proficiency-weapon span { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.character-proficiency-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.character-proficiency-rename { display: flex; flex-wrap: wrap; gap: .4rem; }
.character-proficiency-rename input { flex: 1 1 12rem; min-width: 0; min-height: 2.75rem; }
.character-proficiency-presets button, .character-proficiency-rename button { min-height: 0; }
.character-proficiency-unsaved { color: var(--color-accent); }
.character-proficiency-hint, .character-proficiency-empty { color: var(--color-muted); }
.character-proficiency-actions button { min-height: 2.75rem; }
.character-proficiency-tree { width: 100%; min-width: 0; }
#character-proficiency-editor-status:empty { display: none; }
.character-proficiency-weapon-heading { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .1rem 0; }
.character-proficiency-weapon-heading > img { width: 2rem; height: 2rem; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; }
.character-proficiency-weapon-heading__meta { display: grid; min-width: 0; gap: .05rem; }
.character-proficiency-weapon-heading__meta strong { overflow-wrap: anywhere; }
.character-proficiency-weapon-heading__meta small { color: var(--color-muted); overflow-wrap: anywhere; }
.character-proficiency-presets { padding: 0; }
.character-proficiency-presets strong { margin-inline-end: .15rem; }
.character-proficiency-tree__scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-surface-raised); }
.character-proficiency-tree__grid { display: grid; grid-template-columns: repeat(var(--proficiency-levels, 1), minmax(6.75rem, 8.625rem)); width: max-content; min-width: max-content; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.character-proficiency-level { display: flex; flex-direction: column; min-width: 0; padding: 0 .3rem .55rem; border-inline-start: 1px solid var(--color-control-border); }
.character-proficiency-level:first-child { border-inline-start: 0; }
.character-proficiency-level__title { display: grid; place-items: center; height: 1.7rem; flex: 0 0 auto; margin: 0 -.3rem .5rem; border-bottom: 1px solid var(--color-control-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-surface); color: var(--color-accent); text-align: center; }
.character-proficiency-level__perks { display: flex; flex: 1; flex-direction: column; gap: .5rem; min-width: 0; }
.character-proficiency-level__perks--one { justify-content: center; }
.character-proficiency-level__perks--two { justify-content: space-evenly; }
.character-proficiency-perk { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .3rem; min-width: 0; padding: .35rem .35rem 1.7rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); font-size: .62rem; line-height: 1.3; }
.character-proficiency-perk.is-picked { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 0 .65rem color-mix(in srgb, var(--color-accent) 20%, transparent); }
.character-proficiency-perk__toggle { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .3rem; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.character-proficiency-perk__icon { position: relative; display: grid; place-items: center; align-self: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-control-border)); border-radius: 4px; background: var(--color-surface-raised); color: var(--color-accent); font-size: 1.35rem; }
.character-proficiency-perk__icon img { position: absolute; left: calc(var(--perk-sprite-index, 0) * -38px); top: 0; width: auto; max-width: none; height: 38px; image-rendering: pixelated; }
.character-proficiency-perk__marker { position: absolute; z-index: 1; inset-block-start: 2px; inset-inline-end: 2px; width: 16px; height: 16px; overflow: hidden; }
.character-proficiency-perk__marker img { width: auto; max-width: none; height: 16px; transform: translateX(calc(var(--perk-marker-index, 0) * -16px)); image-rendering: pixelated; }
.character-proficiency-perk__text { min-width: 0; overflow-wrap: anywhere; white-space: normal; font-size: inherit; line-height: inherit; }
.character-proficiency-perk.is-picked::after { content: "✓"; position: absolute; z-index: 2; inset-block-start: .1rem; inset-inline-end: .1rem; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-accent); color: var(--color-surface); font-size: .65rem; font-weight: 700; pointer-events: none; }
.character-proficiency-perk__shape { position: absolute; inset-inline-end: .25rem; inset-block-end: .25rem; display: flex; gap: .25rem; }
.character-proficiency-shape-button, .character-proficiency-shape-clear { position: relative; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; padding: 0; border: 1px solid var(--color-control-border); border-radius: 50%; background: var(--color-surface-raised); color: var(--color-muted); font-size: .68rem; line-height: 1; letter-spacing: 0; cursor: pointer; }
.character-proficiency-shape-button__icon, .character-proficiency-shape-clear__icon { display: grid; place-items: center; width: 100%; height: 100%; font: inherit; }
.character-proficiency-shape-button.is-shaped { border-color: var(--color-accent); color: var(--color-accent); }
.character-proficiency-shape-button:disabled { opacity: .45; cursor: not-allowed; }
.character-proficiency-shape-clear { border-color: var(--color-accent); }
.character-proficiency-shaping { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: .3rem; min-width: 0; max-width: 100%; margin-top: .1rem; padding: .25rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); }
.character-proficiency-shaping select { width: 100%; min-width: 0; max-width: 100%; min-height: 1.5rem; padding: .05rem .2rem; font-size: .65rem; }
.character-proficiency-shaping p { grid-column: 1 / -1; margin: 0; font-size: .62rem; line-height: 1.2; overflow-wrap: anywhere; }
.character-proficiency-shape-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; min-width: 0; }
.character-proficiency-shape-actions button { width: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; white-space: normal; }
.character-proficiency-shape-control__face { display: inline-flex; align-items: center; justify-content: center; min-height: 1.25rem; padding: 3px 4px; border: 1px solid var(--button-neutral-border); border-radius: var(--button-radius); background: var(--button-neutral-bg); color: var(--color-fg); font: 600 .62rem / normal var(--font-ui); letter-spacing: 0; text-align: center; }
.character-proficiency-shape-control.is-apply .character-proficiency-shape-control__face { border-color: var(--button-border); background: var(--button-bg); color: var(--button-fg); }
.character-proficiency-control { min-height: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; }
.character-proficiency-control__face { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 0; padding: 5px 10px; border: 1px solid var(--button-neutral-border); border-radius: var(--button-radius); background: var(--button-neutral-bg); color: var(--color-fg); font: 600 .68rem / normal var(--font-ui); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.character-proficiency-control.is-selected .character-proficiency-control__face { border-color: var(--button-border); background: var(--button-bg); color: var(--button-fg); }
.character-proficiency-control:hover { border-color: transparent; background: transparent; color: inherit; }
.character-proficiency-control:focus-visible { outline: none; }
.character-proficiency-control:focus-visible .character-proficiency-control__face { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.character-proficiency-shape-actions .is-apply { border-color: var(--button-border); background: var(--button-bg); color: var(--button-fg); }
.character-proficiency-summary-list { display: grid; gap: .3rem; padding: .45rem .6rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); font-size: .75rem; }
.character-proficiency-summary-list ul { display: flex; flex-wrap: wrap; gap: .2rem .85rem; margin: 0; padding-inline-start: 1.15rem; }
.character-proficiency-summary-list li { overflow-wrap: anywhere; }
.character-proficiency-summary-list li.is-source-calculated::marker { color: var(--color-accent); }
.character-skills h2 { margin: 0 0 var(--space-1); font-size: var(--font-size-base); }
.character-skills__fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-1); }
.character-skills__fields label, .character-outfit-editor label { display: grid; gap: .2rem; min-width: 0; margin: 0; }
.character-skills__fields label > span { overflow-wrap: anywhere; font-size: .8rem; }
.character-skills__fields small { color: var(--color-muted); font-size: .7rem; }
.character-skills input { width: 100%; min-width: 0; min-height: 2.3rem; padding: .2rem .45rem; }
#character-outfit-dialog { width: min(35rem, calc(100% - 1.5rem)); max-height: min(90dvh, 48rem); overflow: auto; padding: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
#character-outfit-dialog::backdrop { background: rgb(0 0 0 / .72); }
.character-outfit-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; max-width: 100%; padding: var(--space-3); }
.character-outfit-editor__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.character-outfit-editor__header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.character-outfit-editor__header .icon-button { flex: none; }
.character-outfit-editor__top { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.character-outfit-editor__preview-wrap { display: grid; place-items: center; width: 8rem; height: 8rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.character-outfit-editor__preview { width: 8rem; height: 8rem; image-rendering: pixelated; object-fit: contain; }
.character-outfit-editor__preview-status { margin: .25rem; color: var(--color-muted); font-size: .72rem; text-align: center; }
.character-outfit-editor__details { display: grid; align-content: start; gap: var(--space-1); min-width: 0; }
.character-outfit-editor__details > div { display: grid; gap: .2rem; min-width: 0; }
.character-outfit-editor__addons { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; margin: 0; padding: .2rem 0; border: 0; }
.character-outfit-editor__addons label { display: flex; align-items: center; gap: .3rem; min-height: 2.4rem; }
.character-outfit-editor__addons input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); }
.character-outfit-editor__colors { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.character-outfit-editor__colors legend { padding-inline: .3rem; }
.character-outfit-editor__scroll-hint { display: none; }
.character-outfit-editor select { width: 100%; min-width: 0; max-width: 100%; min-height: 2.4rem; }
.character-outfit-editor input[type="search"] { width: 100%; min-width: 0; max-width: 100%; min-height: 2.4rem; }
.character-outfit-editor__parts { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.character-outfit-editor__parts button { display: flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .25rem .55rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-fg); cursor: pointer; }
.character-outfit-editor__parts button[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.character-outfit-editor__parts i { width: .55rem; height: .55rem; border: 1px solid var(--color-control-border); border-radius: 2px; }
.character-outfit-editor__swatches { display: grid; grid-template-columns: repeat(19, 1.4rem); gap: .18rem; min-width: 0; }
.character-outfit-editor__swatch { width: 1.4rem; height: 1.4rem; min-width: 0; min-height: 1.4rem; padding: 0; border: 1px solid var(--color-control-border); border-radius: .18rem; background-image: none; cursor: pointer; }
.character-outfit-editor__swatch[aria-pressed="true"] { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.icon-button { width: 2.75rem; min-height: 2.75rem; font-size: 1.25rem; }
.button-secondary { background: var(--button-neutral-bg); }
.button-secondary.legal__privacy-lang--active { background: var(--button-bg); color: var(--button-fg); }
@media (max-width: 48rem) {
  .character-card__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .character-skills__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .character-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
  .character-outfit-editor__scroll-hint { display: block; margin: 0; color: var(--color-muted); font-size: .8rem; }
  .character-outfit-editor__swatches { width: 100%; grid-template-columns: repeat(19, 2.75rem); grid-template-rows: repeat(7, 2.75rem); gap: .25rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .character-outfit-editor__swatch { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; }
}
@media (max-width: 32rem) {
  .loot-analyzer__hunt-controls { grid-template-columns: minmax(0, 1fr); }
  .character-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-skills__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .character-tools { grid-template-columns: minmax(0, 1fr); }
  .character-skills input { min-height: 2.75rem; }
  #character-outfit-dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); }
  .character-outfit-editor { padding: var(--space-2); }
  .character-outfit-editor__top { grid-template-columns: 6rem minmax(0, 1fr); }
  .character-outfit-editor__preview-wrap, .character-outfit-editor__preview { width: 6rem; height: 6rem; }
  .character-outfit-editor__parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; }
  .character-outfit-editor__parts button { flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; min-height: 2.75rem; padding: .15rem .05rem; font-size: .68rem; white-space: nowrap; }
}
@media (max-width: 20rem) { .character-tool-card { min-height: 13rem; } }
@media (max-width: 22rem) {
  .character-outfit-editor__header { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; gap: var(--space-1); }
  .character-outfit-editor__header h2 { font-size: 1rem; }
  /* Unter 22rem reicht die Breite fuer zwei Spalten nicht: Die Beschriftung bricht sonst mitten
     im Wort ("Zuletzt aktualisier/t", gemessen bei 320px am 2026-09-25). Bewusst fuer JEDE
     Faktenliste, nicht nur die Guildenseite - das Problem ist ueberall dasselbe. */
  .overview__facts { grid-template-columns: 1fr; }
  .overview__facts dt { margin-top: .35rem; }
}
.overview__character-fields { display: flex; flex: 1 1 12rem; min-width: 12rem; flex-direction: column; gap: var(--space-2); }
.overview__select { width: 100%; max-width: 20rem; }
.overview__facts { display: grid; grid-template-columns: auto minmax(8rem, 1fr); gap: .35rem var(--space-2); margin: 0; }
.overview__facts dt { min-width: 0; color: var(--color-muted); overflow-wrap: anywhere; }
.overview__facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.overview__facts dd[data-pending="true"] { color: var(--color-muted); }
.overview__head { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.overview__head h2 { margin: 0; flex: 1; min-width: 0; }
.overview__head .icon { width: 1.4rem; height: 1.4rem; flex: none; }
.overview__head .icon--bell { color: var(--color-accent); }
.overview__head .badge {
  min-width: 1.4rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--color-danger);
  color: var(--color-fg);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
}
.overview__head .badge[hidden] { display: none; }
.overview__discord-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
/* Discord-Blau (#5865f2) ist die Markenfarbe, nur hier gebraucht - deshalb ein einzelner
   Literalwert statt einer eigenen CSS-Variable fuer genau eine Verwendung. */
.overview__discord-link .icon--discord { width: 2rem; height: 2rem; flex: none; color: var(--color-control-border); }
.overview__discord-link .icon--discord[data-linked="true"] { color: #5865f2; }
@media (pointer: coarse) {
  .overview__discord-link { width: 2.75rem; height: 2.75rem; }
}
.overview__notifications .feed { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.overview__notifications .feed li { min-width: 0; }
.overview__notifications .feed a { display: block; min-width: 0; padding: .4rem .5rem; border-radius: var(--radius-md); color: var(--color-fg); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.overview__notifications .feed a:hover { background: var(--color-surface-raised); }
.overview__notifications .feed li[data-read="true"] a { color: var(--color-muted); font-weight: 400; }
.overview__notifications .feed__time { display: block; color: var(--color-muted); font-size: .8rem; }
.overview__notifications .feed__all { display: inline-block; color: var(--color-accent); font-weight: 600; }

/* Responsive extensions remain small because the shared shell does the work. */
@media (min-width: 48rem) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pillars { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } }
@media (min-width: 64rem) { .world-board-tiles { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); } }
@media (min-width: 900px) {
  .review__worklist-wrap { max-height: 72vh; overflow: auto; overscroll-behavior: contain; }
  .review__worklist thead th { position: sticky; top: 0; z-index: 2; }
}
@media (max-width: 899px) {
  .review__worklist-wrap { overflow: visible; }
  .review__worklist, .review__worklist tbody, .review__worklist tr, .review__worklist th, .review__worklist td { display: block; width: 100%; }
  .review__worklist thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
  .review__worklist tbody { display: grid; gap: var(--space-2); }
  .review__worklist tr { min-width: 0; padding: var(--space-2); border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); }
  .review__worklist tbody th, .review__worklist td { padding: .35rem 0; border: 0; text-align: left; }
  .review__worklist tbody th:first-child { width: 100%; }
  .review__row[data-expanded="false"] td, .review__row[data-expanded="false"] .review__row-key { display: none; }
  .review__row-preview:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .review__worklist tbody th { font-size: .8rem; }
  .review__cell-label, .review__worklist td[data-label]::before { display: block; margin-bottom: .15rem; color: var(--color-muted); font-size: .75rem; font-weight: 700; }
  .review__worklist td[data-label]::before { content: attr(data-label); }
  .review__worklist th:first-child { margin-bottom: .2rem; }
  .review__worklist button:not(.review__row-preview) { white-space: normal; }
  .review__worklist .review__row-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 18px; border: 1px solid var(--button-neutral-border); border-radius: var(--button-radius); background: var(--button-neutral-bg); color: var(--color-fg); font: 600 .82rem / 16px var(--font-ui); letter-spacing: .06em; text-align: left; text-transform: none; white-space: pre-wrap; overflow-wrap: anywhere; }
  .review__row-preview::after { width: .45rem; height: .45rem; flex: 0 0 auto; border-right: 2px solid var(--color-fg); border-bottom: 2px solid var(--color-fg); content: ""; transform: rotate(45deg); transition: transform .15s ease; }
  .review__row-preview[aria-expanded="true"]::after { transform: rotate(225deg); }
  .review__worklist textarea { min-height: 5rem; }
  .review__controls { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .review__controls label { margin: 0; align-self: center; }
}
@media (max-width: 38rem) {
  #character-inventory-dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  #character-proficiency-dialog { width: calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .character-proficiency-editor { padding: var(--space-2); }
  #character-gem-atelier-dialog { width: calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  #character-charms-dialog { width: calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .character-gem-atelier-editor { padding: var(--space-2); }
  .character-charms-editor { padding: var(--space-2); }
  .character-gem-atelier-editor__header { align-items: flex-start; }
  .character-proficiency-editor__header { align-items: flex-start; }
  .character-proficiency-weapon { min-width: 5rem; min-height: 4rem; }
  .character-proficiency-level { padding-inline: .25rem; }
  .character-proficiency-perk { padding-inline: .3rem; }
  .character-proficiency-actions button { flex: 1 1 auto; }
  .character-inventory-editor { padding: var(--space-2); }
  .character-inventory-layout { grid-template-columns: minmax(0, 1fr); }
  .character-inventory-paperdoll__grid { width: min(100%, 17rem); }
  .character-inventory-controls, .character-inventory-catalog { grid-column: auto; }
  .character-inventory-details__imbue, .character-inventory-details__tier { grid-template-columns: minmax(0, 1fr); }
  .character-inventory-catalog__tools { grid-template-columns: minmax(0, 1fr); }
  .character-inventory-actions button { flex: 1 1 auto; }
}
@media (pointer: coarse) { .review__worklist button { min-height: 2.75rem; } }
@media (max-width: 820px) {
  header { padding-block-start: calc(3.25rem + env(safe-area-inset-top)); }
  .header-mode-link { top: max(.25rem, env(safe-area-inset-top)); }
}
@media (max-width: 640px) {
  body { background-attachment: scroll; }
  header { flex-wrap: nowrap; }
  header:has(.header-character:not([hidden])) .header-character,
  header:has(.header-world:not([hidden])) .header-world { width: max-content; max-width: calc(100vw - 9rem - env(safe-area-inset-left) - env(safe-area-inset-right)); flex: 0 1 auto; }
  header:has(.header-character:not([hidden])) .header-character__select,
  header:has(.header-world:not([hidden])) .header-world__select { width: auto; max-width: 100%; }
  header:has(.header-character:not([hidden])) nav, header:has(.header-world:not([hidden])) nav { order: 0; display: flex; flex: 0 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: .125rem; margin-inline-start: auto; }
  .header-character { min-width: 0; }
  .header-character__select, .header-world__select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  main > section:not(.hero):not(.pillars):not(.status):not(.notfound):not(.loot-ledger):not(.character-page), .legal__section { padding: var(--space-2); }
}
@media (max-width: 520px) {
  /* Keep the public login and disclosure on one row beside the wordmark. */
  header { column-gap: var(--space-1); }
  .header-wordmark { width: 5rem; max-width: 100%; }
  header nav { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: .125rem; }
  header:has(.header-character:not([hidden])) nav, header:has(.header-world:not([hidden])) nav { flex: 0 1 auto; margin-inline-start: auto; }
  header nav > a { padding-inline: .125rem; font-size: .75rem; white-space: nowrap; }
  footer { align-items: flex-start; }
  .footer-language { align-self: flex-end; margin-left: auto; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 600px), (display-mode: standalone), (display-mode: fullscreen) {
  footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .footer__meta { grid-column: 1; grid-row: 1; }
  .footer-refresh { grid-column: 1 / -1; grid-row: 2; justify-self: center; display: grid; place-items: center; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 50%; }
  .footer-refresh svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .footer-refresh:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .footer-language { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; max-width: 100%; margin: 0; }
  .footer-language__trigger { max-width: 100%; padding: 6px 8px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (pointer: coarse) {
  .character-proficiency-shape-button, .character-proficiency-shape-clear { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; border: 0; background: transparent; }
  .character-proficiency-shape-button::before, .character-proficiency-shape-clear::before { position: absolute; z-index: 0; inset-block-end: 0; inset-inline-end: 0; width: 1.25rem; height: 1.25rem; border: 1px solid var(--color-control-border); border-radius: 50%; background: var(--color-surface-raised); content: ""; }
  .character-proficiency-shape-button.is-shaped::before, .character-proficiency-shape-clear::before { border-color: var(--color-accent); }
  .character-proficiency-shape-button__icon, .character-proficiency-shape-clear__icon { position: absolute; z-index: 1; inset-block-end: 0; inset-inline-end: 0; width: 1.25rem; height: 1.25rem; }
  .character-proficiency-control { width: max-content; min-width: 1.5rem; min-height: 1.5rem; }
  .character-proficiency-shape-control { min-height: 1.5rem; }
  .character-proficiency-shape-control__face { max-width: 100%; }
  .character-proficiency-control__face { padding: 5px 10px; }
}
.character-proficiency-perk.is-shaping { padding-bottom: .35rem; }
@media (max-width: 35rem) { .character-proficiency-perk { font-size: .6rem; } }
/* Setup-Code: Export/Import des simulierten Characters (Hunt Optimizer Lite, Character-Seite) */
.setup-code-icon { display: block; width: 1.25rem; height: 1.25rem; fill: currentColor; }
.setup-code-dialog { width: min(35rem, calc(100% - 1.5rem)); max-height: min(90dvh, 48rem); overflow: auto; padding: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); }
.setup-code-dialog::backdrop { background: rgb(0 0 0 / .72); }
.setup-code-dialog [hidden] { display: none; }
.setup-code-dialog__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; padding: var(--space-3); }
.setup-code-dialog__form p, .setup-code-dialog__form label { margin: 0; }
.setup-code-dialog__header, .setup-code-dialog__actions { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.setup-code-dialog__header { justify-content: space-between; }
.setup-code-dialog__header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.setup-code-dialog__header .icon-button { flex: none; }
.setup-code-dialog__actions { flex-wrap: wrap; }
.setup-code-dialog__warning { padding: 8px 12px; border-left: 3px solid var(--tp-gold-deep); }
.setup-code-dialog__status { min-height: 1.4em; color: var(--color-muted); }
.setup-code-dialog textarea { box-sizing: border-box; width: 100%; max-width: 100%; word-break: break-all; }
.setup-code-dialog__copy { display: inline-flex; align-items: center; gap: .5rem; }
.setup-code-dialog__copy[data-copied="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.hunt-optimizer-lite__titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.hunt-optimizer-lite__titlebar h1 { min-width: 0; }
/* Ueberschrift mit der durchgestrichenen Diskette direkt daneben. */
.hunt-optimizer-lite__heading { display: flex; align-items: center; gap: .35rem; min-width: 0; }
/* Als Teil der Ueberschrift traegt das Symbol deren Farbe und keinen Knopfrahmen. */
#hunt-lite-note-open { flex: none; width: 1.75rem; min-height: 1.75rem; border: 0; background: none; color: var(--color-accent); }
#hunt-lite-note-open .setup-code-icon { width: 1.5rem; height: 1.5rem; }
#hunt-lite-note-open .setup-code-icon__strike-gap { stroke: var(--color-surface); }
@media (max-width: 520px) { .hunt-optimizer-lite__heading h1 { font-size: clamp(1.25rem, 6.2vw, 1.75rem); } }
.hunt-optimizer-lite__share { display: flex; grid-column: 2; gap: .5rem; }
.hunt-optimizer-lite__share[hidden] { display: none; }
.character-card__setup-code { flex: none; margin-inline: auto; }
/* Das Schliessen-Kreuz der Seite sitzt oben rechts: breit bleibt rechts Platz dafuer, schmal stehen
   Import und Teilen in einer eigenen Zeile am rechten Rand darunter, damit der Titel nicht umbricht. */
.has-page-close .hunt-optimizer-lite__titlebar { padding-inline-end: 3.5rem; }
.has-page-close .hunt-optimizer-lite__titlebar h1 { max-width: none; }
@media (max-width: 40rem) {
  .hunt-optimizer-lite__titlebar, .has-page-close .hunt-optimizer-lite__titlebar { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-inline-end: 0; }
  .has-page-close .hunt-optimizer-lite__heading { max-width: calc(100% - 3.5rem); }
  .hunt-optimizer-lite__share { grid-column: 1; justify-content: flex-end; }
}
/* Inventar-Katalog: Reiter und Itemliste als Sprite-Raster ohne sichtbare Beschriftung (Name im Tooltip und aria-label). */
.character-inventory-catalog__tabs { flex-wrap: wrap; padding-bottom: .15rem; overflow-x: visible; }
.character-inventory-catalog__tab { padding-inline: .35rem; }
.character-inventory-catalog__tab img { width: 2rem; height: 2rem; object-fit: contain; image-rendering: pixelated; }
.character-inventory-catalog__items { grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); }
.character-inventory-catalog__item { grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 3rem; padding: .2rem; text-align: center; }
.character-inventory-catalog__search-wrap { position: relative; display: block; }
.character-inventory-catalog__search-wrap svg { position: absolute; top: 50%; left: .7rem; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); fill: #c8b790; pointer-events: none; }
.character-inventory-catalog__search-wrap .character-inventory-catalog__search { padding-left: 2.4rem; }
/* Titelleisten in Dialogen: Die Regeln der Seiten-Kopfzeile (`header`, samt dem grossen oberen
   Innenabstand auf schmalen Displays) gelten sonst auch fuer jedes <header> in einem Dialog und
   machen die Leiste dunkel und zu hoch. Leisten mit eigener Klassenregel (Bestiary, Wheel,
   Item-Popup) behalten ihre Werte. */
dialog header { flex-wrap: nowrap; padding: 0 0 .5rem; background: none; }
/* Ladesymbol mittig in der Titelleiste, solange ein Editor laedt oder speichert (characters/editor-status.js). */
@keyframes editor-busy-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
dialog[data-busy="true"] > * > header::after, dialog[data-busy="true"] .character-wheel-editor__header::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 1.25rem; height: 1.25rem; border: 2px solid var(--color-control-border);
  border-top-color: var(--color-accent); border-radius: 50%; transform: translate(-50%, -50%); animation: editor-busy-spin .8s linear infinite; pointer-events: none;
}
.character-wheel-editor__header { position: relative; }
@media (prefers-reduced-motion: reduce) { dialog[data-busy="true"] header::after { animation-duration: 2.4s; } }
/* Weapon Proficiency: Waffen-Reiter nur als Sprite, umbrechend statt seitlich scrollend. */
.character-proficiency-weapons { flex-wrap: wrap; padding-bottom: .25rem; overflow-x: visible; }
.character-proficiency-weapon { min-width: 3rem; min-height: 3rem; padding: .3rem; }
.character-proficiency-tree__scroll { margin-top: .75rem; }
/* Item-Popup: Forge-Tier-Auswahl direkt neben dem Item-Namen. */
.character-inventory-item-popout .character-inventory-editor__header h2:has(+ .character-inventory-forge-select) { flex: 0 1 auto; }
.character-inventory-forge-select { display: inline-block; flex: 0 0 auto; width: auto; min-height: 28px; margin-right: auto; padding: 2px 6px; border-color: #8e672a; border-radius: 6px; background: #21170d; color: #f2e8d5; font-size: .78rem; }
.character-inventory-item-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 28px; margin-top: .5rem; }
.character-inventory-item-close { display: none; width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; font-size: 1rem; line-height: 1; }
@media (max-width: 40rem), (pointer: coarse) { .character-inventory-item-close { display: inline-flex; } }
/* Zahlenfeld mit eigenen Pfeilknoepfen (number-stepper.js); die nativen Pfeile sind ausgeblendet. */
.number-stepper { position: relative; display: block; min-width: 0; }
.character-skills__fields label > .number-stepper { font-size: inherit; }
:is(.hunt-optimizer, .character-skills) .number-stepper input { padding-right: 2.5rem; appearance: textfield; -moz-appearance: textfield; }
.number-stepper input::-webkit-inner-spin-button, .number-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.number-stepper__buttons { position: absolute; inset: 1px 1px 1px auto; display: grid; grid-template-rows: 1fr 1fr; width: 2.25rem; }
.number-stepper__buttons button { min-height: 0; padding: 0; border: 0; border-left: 1px solid var(--color-control-border); border-radius: 0; background: transparent; color: var(--color-fg); font-size: .8rem; line-height: 1; letter-spacing: 0; }
.number-stepper__buttons button + button { border-top: 1px solid var(--color-control-border); }
.number-stepper__buttons button:not(:disabled):hover { background: rgb(128 128 128 / .25); filter: none; }
/* Lite-Seite: Level und Skills nutzen .character-skills; je Vokation ausgeblendete Felder. */
.character-skills__fields label[hidden] { display: none; }
.hunt-optimizer-lite__setup .character-skills__fields { margin-bottom: 0; }
.character-skills__hint { margin: 0 0 var(--space-1); color: var(--color-muted); font-size: .7rem; }
/* Touch: jede Pfeilflaeche mindestens 24px hoch. */
@media (pointer: coarse) { :is(.hunt-optimizer, .character-skills) .number-stepper input { min-height: 3rem; } }
/* Kachelübersicht mit Abschnitten nur per :target (Admin und Account; hidden gewinnt immer). */
.tile-panels__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-block: var(--space-3); }
.tile-panels__tiles > .tile { min-height: 9rem; justify-content: center; text-align: center; }
.tile-panels__tiles .tile__label { font-size: var(--font-size-base); line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 48rem) { .tile-panels__tiles { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } }
.tile-panel:not(:target), .tile-panel[hidden] { display: none; }
.tile-panels:has(.tile-panel:target:not([hidden])) .tile-panels__tiles { display: none; }
.tile-panels__tiles > .tile { position: relative; }
.tile-panels__badge { position: absolute; top: .5rem; right: .5rem; box-sizing: border-box; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: #e0443a; color: #fff; font: 700 .8rem/1.5rem var(--font-ui); text-align: center; pointer-events: none; }
.tile-panels__badge[hidden] { display: none; }