/* Slay the Fairy 2.0 – Gestaltung: dunkles Holz, Pergament, Messing (Rahmen v3, 30.10.2026) */
:root {
  --wood: #1d1611;
  --wood-2: #2b2119;
  --wood-3: #3a2b1f;
  --brass: #c79a4b;
  --brass-dark: #8a6a2f;
  --parchment: #f2e6c9;
  --parchment-2: #e6d5ad;
  --page: #efe3c4;
  --card: #f8f0dc;
  --card-line: #dcc79a;
  --ink: #2a1f16;
  --ink-soft: #5a4632;
  --blood: #8e2b22;
  --blood-dark: #5f1c16;
  --moss: #3f6b34;
  --dust: #7b5cc4;
  --mana: #4f74b3;
  --stamina: #4f8a43;
  --hp: #b8584c;
  --radius: 8px;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.5 var(--sans); }
body.out { background: var(--wood) radial-gradient(circle at 50% 0, #3a2b1f 0, var(--wood) 70%) fixed; }
a { color: var(--blood); }
a:hover { color: var(--blood-dark); }
h1, h2, h3 { font-family: var(--serif); font-weight: normal; letter-spacing: .01em; margin: .2em 0 .5em; line-height: 1.15; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; }

/* ---- Kopfleiste */
.top { background: var(--wood); border-bottom: 2px solid var(--brass-dark); color: var(--parchment); position: relative; z-index: 20; }
.top-inner { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.brand { color: var(--brass); font: 1.6rem var(--serif); text-decoration: none; font-variant: small-caps; white-space: nowrap; }
.brand:hover { color: #e0b766; }
.mainnav { display: flex; flex-wrap: wrap; gap: .1rem; flex: 0 1 auto; }
.purse { margin-left: auto; }

.mainnav a { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .6rem; border-radius: var(--radius);
  color: #d9c9a6; text-decoration: none; }
.mainnav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.mainnav a.active { color: var(--parchment); background: var(--wood-3); box-shadow: inset 0 -2px 0 var(--brass); }
.mainnav .ico { opacity: .8; }
.dotbadge { display: inline-block; min-width: 1.2rem; padding: 0 .35rem; border-radius: 1rem; background: var(--hp); color: #fff;
  font: 700 .72rem/1.2rem var(--sans); text-align: center; font-style: normal; }
.mainnav .dotbadge { margin-left: .1rem; }
.purse { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .85rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.purse .res { color: var(--parchment); text-decoration: none; white-space: nowrap; }
.purse a.res:hover { color: #fff; }
.purse .coin { color: var(--brass); }
.purse .dust { color: #b9a3f0; }
.dustlink { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #5a4632; border-radius: 1rem; padding: .1rem .15rem .1rem .55rem; }
.dustlink .plus { display: inline-flex; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--dust); color: #fff; align-items: center; justify-content: center; font-weight: 700; }
.maillink { position: relative; color: var(--parchment); display: inline-flex; padding: .35rem; }
.maillink:hover { color: #fff; }
.maillink .dotbadge { position: absolute; top: -.2rem; right: -.45rem; }
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; color: var(--brass); padding: .4rem .2rem; white-space: nowrap; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary::after { content: " ▾"; font-size: .8em; }
.um-panel { position: absolute; right: 0; top: 100%; min-width: 15rem; background: var(--card); color: var(--ink); border: 1px solid var(--card-line);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: .6rem; display: grid; gap: .1rem; z-index: 30; }
.um-panel a, .um-panel button { display: block; padding: .5rem .6rem; border-radius: 6px; text-decoration: none; color: var(--ink); text-align: left; font-size: 1rem; }
.um-panel a:hover, .um-panel button:hover { background: var(--parchment-2); }
.um-panel form { margin: 0; }
.um-panel .small { margin: 0 .6rem .3rem; }
.inline { display: inline; }
button.link { background: none; border: 0; color: var(--parchment); text-decoration: underline; padding: 0; cursor: pointer; font: inherit; }

/* ---- Unterreiter */
.subnav { background: var(--parchment-2); border-bottom: 1px solid #d2bb88; }
.subnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; display: flex; flex-wrap: wrap; gap: .2rem; }
.subnav a { padding: .7rem 1rem; color: var(--ink-soft); text-decoration: none; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--blood); }

/* ---- Seite */
.page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; min-height: 60vh; }
body.out .page { max-width: 980px; margin-top: 1.5rem; background: var(--parchment) linear-gradient(180deg, var(--parchment), var(--parchment-2));
  border: 1px solid var(--brass-dark); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.5); padding: 1.5rem 1.75rem; }
.bottom { text-align: center; padding: 1.2rem 1rem 1.6rem; }
.bottom a { color: var(--ink-soft); }
body.out .bottom a { color: #a8916f; }

.flash { padding: .6rem .9rem; border-radius: var(--radius); margin: 0 0 1rem; list-style-position: inside; }
.flash.ok { background: #dfe9cf; border: 1px solid var(--moss); color: #26401f; }
.flash.error { background: #f3d6cf; border: 1px solid var(--blood); color: #5e1a14; }

.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1.2rem; margin-bottom: 1.2rem; }
.pagehead h1 { margin: 0; }
.pagehead p { margin: .15rem 0 0; color: var(--ink-soft); }
.lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 46rem; margin-top: 0; }
.hero-banner { text-align: center; padding: .5rem 0 1rem; }
.hero-banner h1 { font-size: 2.6rem; font-variant: small-caps; color: var(--blood); }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: 10px; padding: 1rem 1.15rem; }
.card .card { background: rgba(255,255,255,.35); }
.card h2 { margin-top: 0; }
.card .sub { color: var(--ink-soft); margin: -.3rem 0 .7rem; font-size: .95rem; }
.card.resting { opacity: .75; }
.level { font-size: .9rem; color: var(--ink-soft); }
.small { font-size: .9rem; color: var(--ink-soft); }
.news { border-top: 1px solid var(--parchment-2); padding-top: .5rem; }
.split { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.split > .main { flex: 999 1 540px; min-width: 0; }
.split > .aside { flex: 1 1 300px; min-width: 0; }
.sticky-aside { position: sticky; top: 1rem; }

.form { display: grid; gap: .8rem; }
.form.narrow { max-width: 28rem; }
.form label { display: grid; gap: .25rem; }
.form label small { color: var(--ink-soft); }
.form label.check { display: flex; gap: .5rem; align-items: flex-start; }
input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]) {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--brass-dark); border-radius: 6px; background: #fffaf0;
}
button, .button {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--blood); color: #fff; border: 1px solid var(--blood-dark); border-radius: 6px; padding: .55rem 1.05rem;
}
button:hover, .button:hover { background: #a53328; color: #fff; }
button:disabled { background: #9d8f80; border-color: #7f7365; cursor: not-allowed; }
button.secondary, .button.secondary { background: transparent; color: var(--blood); border-color: var(--blood); }
button.secondary:hover, .button.secondary:hover { background: rgba(142,43,34,.08); color: var(--blood); }
.button.big, button.big { font-size: 1.1rem; padding: .8rem 1.5rem; box-shadow: 0 2px 0 var(--blood-dark); }
.small-btn { padding: .3rem .65rem; font-size: .9rem; }
.pw { display: flex; gap: .5rem; align-items: center; }
.pw input { flex: 1; min-width: 0; }
select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--brass-dark); border-radius: 6px; background: #fffaf0; }

.attrs { width: 100%; border-collapse: collapse; margin: .4rem 0 .8rem; font-size: .95rem; }
.attrs th { text-align: left; font-weight: normal; color: var(--ink-soft); padding: .1rem .3rem .1rem 0; }
.attrs td { text-align: right; padding: .1rem .8rem .1rem 0; font-variant-numeric: tabular-nums; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.stat { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: .7rem .9rem; }
.stat .label { display: block; color: var(--ink-soft); font-size: .9rem; }
.stat .value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.bars { display: grid; gap: .3rem; margin-bottom: .6rem; }
.bar { position: relative; height: 1.25rem; background: #ddcba2; border-radius: 4px; overflow: hidden; }
.bar span { position: absolute; inset: 0 auto 0 0; }
.bar em { position: absolute; inset: 0; display: flex; align-items: center; font-style: normal; font-size: .8rem; padding-left: .45rem; font-variant-numeric: tabular-nums; }
.bar.hp span { background: var(--hp); }
.bar.res span { background: var(--mana); }
.bar.res em { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.bar.ap span { background: #c9a35a; }
.mini { display: grid; grid-template-columns: auto 1fr; gap: .2rem .5rem; align-items: center; font-size: .8rem; font-variant-numeric: tabular-nums; }
.mini .m { height: .5rem; background: #ddcba2; border-radius: 3px; overflow: hidden; }
.mini .m i { display: block; height: 100%; background: var(--hp); }
.mini .m.res i { background: var(--mana); }
.mini .m.res.stamina i { background: var(--stamina); }
.mini .m.ap i { background: #c9a35a; }
.mini .m.xp i { background: var(--brass-dark); }
.appips { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: .5rem; }
.appips i { width: .62rem; height: .62rem; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px #c9b27c; }
.appips i.on { background: #c9a35a; box-shadow: inset 0 0 0 1.5px #a8823b; }
.hr-bars { grid-template-columns: 4.6rem minmax(0, 1fr); }

/* ---- Handy: Hauptmenü als Leiste unten */
@media (max-width: 760px) {
  body.in { padding-bottom: 4.6rem; }
  .top-inner { padding: .4rem .9rem; min-height: 54px; gap: .3rem .8rem; flex-wrap: nowrap; }
  .usermenu summary { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; }
  .brand { font-size: 1.3rem; flex: 1; }
  .purse { gap: .2rem .7rem; font-size: .9rem; }
  .purse .res:not(:first-child) { display: none; }
  .mainnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--wood); border-top: 2px solid var(--brass-dark);
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: .2rem .1rem calc(.4rem + env(safe-area-inset-bottom)); }
  .mainnav a { flex-direction: column; gap: .15rem; padding: .35rem 0; font-size: .7rem; border-radius: 0; text-align: center; min-height: 48px; justify-content: center; }
  .mainnav a.active { background: transparent; box-shadow: inset 0 3px 0 var(--brass); }
  .mainnav .dotbadge { position: absolute; top: .1rem; right: 18%; }
  .subnav-inner { padding: 0 .5rem; flex-wrap: nowrap; overflow-x: auto; }
  .subnav a { white-space: nowrap; padding: .6rem .8rem; }
  .page { padding: 1rem .9rem 2rem; }
  body.out .page { padding: 1rem; margin: .8rem; }
  h1 { font-size: 1.7rem; }
}

/* ---- Listen, Gegenstände, Kampfbericht */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; margin: .3rem 0 1.4rem; }
table.list th { text-align: left; font-weight: normal; color: var(--ink-soft); border-bottom: 1px solid var(--brass-dark); padding: .3rem .5rem; }
table.list td { border-bottom: 1px solid var(--parchment-2); padding: .4rem .5rem; vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item { display: grid; gap: .1rem; }
.iname[style] { color: color-mix(in srgb, var(--rarity) 55%, var(--ink)); }
section + section, .cards + section { margin-top: 1.5rem; }
.mods { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.req { font-size: .85rem; color: var(--blood); }
.actions { display: grid; gap: .5rem; margin-top: .7rem; }
.actions .row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.actions select { flex: 1 1 8rem; width: 0; min-width: 0; padding: .3rem .4rem; }
.gear { margin: .2rem 0 .7rem; }
.gear summary, .quest summary { cursor: pointer; color: var(--blood); }
.slot { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .5rem; align-items: start; padding: .4rem 0; border-bottom: 1px dotted var(--parchment-2); }
.slotname { font-size: .85rem; color: var(--ink-soft); }
button.plus { padding: 0 .4rem; font-size: .85rem; line-height: 1.3; margin-left: .2rem; }
.small-flash { padding: .3rem .6rem; font-size: .9rem; }
.quest.hard { opacity: .8; }
.warn { color: var(--blood); }
.pick { display: grid; gap: .4rem; margin-top: .6rem; }
.pick .check { display: flex; gap: .5rem; align-items: flex-start; }
.pick .off { opacity: .55; }
.result.won, .result-banner.won { color: var(--moss); }
.result.lost, .result-banner.lost { color: var(--blood); }
.result-banner { font-size: 1.5rem; margin: 0 0 1rem; }
.result-banner .small { display: block; }
.fighter { display: grid; gap: .15rem; margin-bottom: .5rem; }
.fighter.down { opacity: .55; }
.log { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: .95rem; max-height: 32rem; overflow-y: auto;
  background: rgba(255,255,255,.3); border: 1px solid var(--parchment-2); border-radius: var(--radius); }
.log li { padding: .2rem .7rem; border-bottom: 1px solid rgba(0,0,0,.04); }
.log li.round { color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; background: rgba(0,0,0,.03); }
.log li.defeat { font-weight: bold; }
.log li.crit { color: var(--blood); }
.log li.system { color: var(--brass-dark); font-style: italic; }
.log li.loot { background: #dfe9cf; color: #26401f; }
@media (max-width: 760px) {
  .slot { grid-template-columns: 1fr auto; }
  .slotname { grid-column: 1 / -1; }
}

/* ---- Mailtest */
pre.transcript { background: var(--wood); color: var(--parchment); padding: .8rem 1rem; border-radius: var(--radius);
  overflow-x: auto; font: .85rem/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
pre.transcript .din { color: #b9d99a; }
pre.transcript .dout { color: #f2e6c9; }
pre.transcript .dnote { color: #c9a35a; }
fieldset.choice { border: 0; padding: 0; margin: 0; display: grid; gap: .3rem; }
fieldset.choice legend { padding: 0; margin-bottom: .2rem; }
.flash p { margin: .2rem 0; }

/* ---- Markt, Post, Gilde, Shop */
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; border-bottom: 1px solid var(--brass-dark); }
.tabs a { padding: .4rem .8rem; text-decoration: none; color: var(--ink-soft); border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.tabs a.active { background: rgba(255,255,255,.5); border-color: var(--brass-dark); color: var(--ink); margin-bottom: -1px; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filters input[type=text] { flex: 1 1 10rem; min-width: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.onmarket { margin: 0; color: var(--moss); }
.sellmarket summary { cursor: pointer; color: var(--blood); font-size: .95rem; }
.sellmarket .row { margin-top: .4rem; }
.sellmarket input[type=text] { width: 6rem; padding: .3rem .4rem; }
textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--brass-dark); border-radius: var(--radius); background: #fffaf0; width: 100%; }
.letter .body { white-space: normal; margin: .5rem 0 1rem; }
table.mail tr.unread td { font-weight: bold; }
.purse-link { color: var(--parchment); text-decoration: none; }
.purse-link:hover { text-decoration: underline; }
.mailbadge { background: var(--blood); color: #fff; border-radius: 1rem; padding: 0 .5rem; }
.card.app { margin-bottom: .5rem; }
.card.app p { margin: .3rem 0; }
.product h3 { margin: 0 0 .4rem; }
.product .price { font-size: 1.25rem; margin: .4rem 0; }
.product.off { opacity: .6; }
.product.featured { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(199,154,75,.35); }
.product form.test { margin-top: .6rem; display: grid; gap: .4rem; }
.product select, .product input[type=text] { width: 100%; }
.dustv { color: var(--dust); }
.small-value { font-size: 1rem; display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.have { color: var(--moss); }
.nothave { color: var(--ink-soft); }
.guest { border-color: var(--dust); }
.columns > section + section { margin-top: 0; }

/* ---- Heldenansicht (Ragdoll) */
.hero-bars { max-width: 34rem; }
.ragdoll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 240px) minmax(0, 1fr); gap: .8rem; align-items: start; margin: 1rem 0 1.5rem; }
.rd-col { display: grid; gap: .5rem; }
.rd-slot { background: rgba(255,255,255,.35); border: 1px dashed var(--brass-dark); border-radius: var(--radius); padding: .35rem .55rem; min-height: 3.2rem; display: grid; gap: .05rem; transition: box-shadow .15s; }
.rd-slot.filled { border-style: solid; background: rgba(255,255,255,.55); }
.rd-slot.hl { box-shadow: 0 0 0 3px var(--brass); }
.rd-name { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.rd-empty { color: #9c8a72; font-style: italic; font-size: .9rem; }
.rd-mods { font-size: .82rem; color: var(--ink-soft); }
.rd-slot form { margin: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--blood); text-decoration: underline; cursor: pointer; font: inherit; font-size: .82rem; }
.link-btn:hover { background: none; }
.rd-figure { text-align: center; }
.rd-figure img { width: 100%; max-width: 200px; height: auto; }
.rd-belt { text-align: left; background: rgba(255,255,255,.35); border: 1px solid var(--parchment-2); border-radius: var(--radius); padding: .5rem .6rem; }
.rd-belt h3 { font-size: 1rem; margin: 0 0 .4rem; }
.belt-slot { display: flex; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.belt-slot select { flex: 1; min-width: 0; padding: .25rem .3rem; font-size: .9rem; }
.flask { flex: 0 0 auto; width: 14px; height: 18px; border: 2px solid var(--wood); border-radius: 3px 3px 6px 6px; position: relative; }
.flask.full::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 70%; background: #b8584c; border-radius: 0 0 4px 4px; }
.hero-cols { margin-top: .5rem; }
.ab-list { list-style: none; padding: 0; margin: .3rem 0 .8rem; display: grid; gap: .45rem; }
.ab-list li { border-left: 3px solid var(--parchment-2); padding-left: .55rem; }
.ab-list li.on { border-left-color: var(--moss); }
.ab-list li.learn { border-left-style: dotted; }
.ab-list .inline { margin-left: .3rem; }
.ab-list .bar.xp { height: 1rem; margin: .25rem 0; max-width: 22rem; }
.bar.xp span { background: #9fb37a; }
.lock { color: #9c8a72; }
.dim { opacity: .55; }
.glow { box-shadow: 0 0 0 2px var(--brass); }
.compare { position: relative; }
.compare .verdict { position: absolute; top: .5rem; right: .6rem; font-size: .85rem; }
.compare.better { border-color: var(--moss); }
.compare.better .verdict { color: var(--moss); }
.compare.worse .verdict { color: var(--blood); }
.compare.mixed .verdict { color: var(--brass-dark); }
.compare.off { opacity: .7; }
.deltas { list-style: none; padding: 0; margin: .2rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .88rem; }
.deltas .up { color: var(--moss); }
.deltas .down { color: var(--blood); }
@media (max-width: 760px) {
  .ragdoll { grid-template-columns: 1fr 1fr; }
  .rd-figure { grid-column: 1 / -1; grid-row: 1; }
  .rd-figure img { max-width: 140px; }
}
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { text-decoration: underline; }
.badge { display: inline-block; background: var(--brass); color: #fff; border-radius: 1rem; padding: 0 .55rem; font-size: .85rem; margin-left: .4rem; }

/* ---- Adminpanel */
.player h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.grant { display: grid; gap: .4rem; }
.grant input[type=text] { width: 100%; }
.grant .row-actions input[type=text] { width: 8rem; flex: 1; }
table.selftest tr.bad td { background: #f3d6cf; }
td.down { color: var(--blood); }

/* ---------------------------------------------------------------- Questbrett & Questablauf (Migration 008) */
.boardbar p { margin-top: 0; }
.boardbar .row { gap: .5rem; flex-wrap: wrap; }
.quest .intro { font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.badge { display: inline-block; font-size: .72rem; padding: .05rem .45rem; border-radius: 1rem; background: var(--parchment-2);
  color: var(--ink-soft); font-style: normal; letter-spacing: .03em; margin-right: .2rem; }
.badge.follow { background: #e8d3a0; color: #6a4a12; }
.badge.old { background: #ecd0c9; color: var(--blood); }
.flash.info { background: #e9e0c4; border-left: 4px solid var(--brass-dark); }
.tale { font-style: italic; }
p.tale.intro { border-left: 3px solid var(--brass-dark); padding-left: .8rem; color: var(--ink-soft); }
.party { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: .4rem 1rem; margin: 1rem 0; }
.sections { list-style: none; padding: 0; margin: 0 0 1rem; }
.section { scroll-margin-top: 1rem; display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; padding: .7rem 0; border-top: 1px dashed rgba(0,0,0,.15); }
.section > div { min-width: 0; }
.section .sub { margin: 0; }
.section .tale { margin: .2rem 0 .5rem; }
.sicon { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--wood); color: var(--parchment);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.section.future { opacity: .5; }
.section.future .sicon { background: var(--parchment-2); color: var(--ink-soft); }
.section.big .sicon { background: var(--blood); }
.section.rest .sicon { background: var(--moss); }
.section.find .sicon { background: var(--brass-dark); }
.outcome { font-weight: bold; margin: .4rem 0 0; }
.js .spoiler { display: none; }
.revealed { animation: stf-fade .5s ease-out; }
@keyframes stf-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.choose .row, .decide .row { gap: .5rem; flex-wrap: wrap; }
.probe-pick .chance { display: inline-block; margin-left: .3rem; font-size: .8rem; opacity: .85; }
.countdown { font-variant-numeric: tabular-nums; color: var(--blood); white-space: nowrap; }
.rolls { list-style: none; padding: 0; margin: .3rem 0; }
.rolls li { padding: .2rem 0; }
.rolls .die { display: inline-block; min-width: 2.4rem; text-align: center; margin: 0 .4rem; padding: .05rem .3rem; border: 1px solid var(--ink);
  border-radius: 4px; background: #fff8e6; font-variant-numeric: tabular-nums; }
.rolls li.ok .verdict { color: var(--moss); }
.rolls li.fail .verdict { color: var(--blood); }
.js .rolls.suspense li.pending { visibility: hidden; }
.js .rolls.suspense li:not(.rolled) .verdict { visibility: hidden; }
.rolls li.rolling .die { animation: stf-shake .14s infinite alternate; }
@keyframes stf-shake { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.replay { margin: .4rem 0; }
.arena { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; padding: .6rem; background: rgba(0,0,0,.04); border-radius: var(--radius); }
.arena .side { display: grid; gap: .35rem; align-content: start; }
.arena .fighter { margin: 0; transition: opacity .3s; }
.arena .fname { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena .monster .bar.hp span { background: #7a6a58; }
.arena .bar span { transition: width .35s ease-out; }
.fighter.hit { animation: stf-hit .35s; }
.fighter.heal { animation: stf-heal .45s; }
@keyframes stf-hit { 0% { transform: translateX(0); } 30% { transform: translateX(-4px); background: #f0c4bc; } 100% { transform: none; } }
@keyframes stf-heal { 0% { background: #cfe5c3; } 100% { background: transparent; } }
.replay-controls { gap: .4rem; margin: .4rem 0; }
.replay-log { max-height: 16rem; }
.log .ico { display: inline-block; width: 1.4rem; text-align: center; }
.log .ico.hp { color: var(--moss); }
.baglist { list-style: none; padding: 0; margin: 0; }
.baglist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; padding: .35rem 0; border-top: 1px dashed rgba(0,0,0,.12); }
.baglist .row { gap: .3rem; }
.section.bag, .card.bag { border-left: 4px solid var(--brass-dark); }
@media (max-width: 520px) {
  .arena { grid-template-columns: 1fr; }
}
.boardbar .row, .choose .row, .decide .row, .baglist .row, .replay-controls { display: flex; align-items: center; }
.boardbar form, .choose form, .decide form, .baglist form { margin: 0; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Stützpunkt und Feen (Migration 009) */
.traces { color: #3f7d5a; }
.mainhall { border-left: 4px solid var(--brass-dark); }
.stages { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.stage { font-size: .78rem; padding: .1rem .55rem; border-radius: 1rem; background: var(--parchment-2); color: var(--ink-soft); }
.stage.done { background: #d8c08a; color: var(--ink); }
.stage.now { background: var(--wood); color: var(--parchment); }
.card.locked { opacity: .75; }
.bedlist, .huntlist { list-style: none; padding: 0; margin: .4rem 0; }
.bedlist li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .4rem 0; border-top: 1px dashed rgba(0,0,0,.12); }
.bedlist form { margin: 0; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.bedlist select { max-width: 100%; }
.bedno { min-width: 3.5rem; color: var(--ink-soft); }
.huntlist li { padding: .25rem 0; border-top: 1px dashed rgba(0,0,0,.12); }
.bignum { font-size: 1.4rem; margin: 0 0 .3rem; }
.element { display: inline-block; font-size: .8rem; padding: 0 .45rem; border-radius: 1rem; background: var(--parchment-2); margin-right: .15rem; }
.el-fire { background: #f3d2c2; color: #8a2b0e; }
.el-ice { background: #d6e6f2; color: #1f4f78; }
.el-lightning { background: #f4ecbd; color: #6d5b07; }
.el-poison { background: #d9ebcf; color: #2d5a1d; }
.fairy.big { border-left: 4px solid var(--dust); }
.fairy.slain { opacity: .8; }
.guildtraces form.row, .fairy form.row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0; }
.fairy form { margin: .3rem 0; }
.num-input { width: 6rem; }

/* ---------------------------------------------------------------- Scherenschnitte */
.portrait { float: right; width: 64px; height: 83px; margin: -.2rem -.2rem .3rem .6rem; }
.fighter.with-img { grid-template-columns: 36px minmax(0, 1fr); column-gap: .45rem; align-items: center; }
.fighter.with-img .sil { grid-row: 1 / 3; width: 36px; height: 47px; transition: filter .2s, opacity .3s; }
.fighter.with-img > :not(.sil) { grid-column: 2; }
.fighter.down .sil { opacity: .35; transform: rotate(-8deg); }
.fighter.hit .sil { filter: drop-shadow(0 0 4px #b8584c); }
.fighter.hit[data-el="dmg_fire"] .sil { filter: drop-shadow(0 0 5px #e0662b); }
.fighter.hit[data-el="dmg_ice"] .sil { filter: drop-shadow(0 0 5px #5aa6e0); }
.fighter.hit[data-el="dmg_lightning"] .sil { filter: drop-shadow(0 0 5px #e8c62a); }
.fighter.hit[data-el="dmg_poison"] .sil { filter: drop-shadow(0 0 5px #5fae3c); }
.fighter.heal .sil { filter: drop-shadow(0 0 5px #6fbf6a); }
.fairy-sil { float: right; width: 120px; height: 156px; margin: -.4rem -.4rem .4rem .8rem; }
@media (max-width: 520px) {
  .fairy-sil { width: 84px; height: 109px; }
}

/* ---------------------------------------------------------------- Helden, Lager, Titel (30.10. nachmittags) */
.el-ico { display: inline-block; min-width: 1.1em; text-align: center; cursor: help; }
.chip { display: inline-block; font-size: .82rem; padding: .02rem .4rem; border-radius: 1rem; background: rgba(0,0,0,.06); margin: .08rem .1rem .08rem 0; white-space: nowrap; }
.chip.dmg { background: #f1ddd4; }
.chip.prot { background: #dde5ec; }
.chip.heal { background: #dbeccf; }
.chip[title] { cursor: help; }
.combat-stats { background: rgba(29,22,17,.05); border: 1px solid var(--parchment-2); border-left: 3px solid var(--brass-dark); border-radius: var(--radius);
  padding: .35rem .6rem; margin: .5rem 0 .8rem; }
.combat-stats summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: .92rem; }
.combat-stats summary::marker { color: var(--brass-dark); }
.cs-table { border-collapse: collapse; margin: .4rem 0; font-size: .9rem; }
.cs-table th, .cs-table td { padding: .12rem .8rem .12rem 0; text-align: left; font-weight: normal; }
.cs-table thead th { color: var(--ink-soft); font-size: .8rem; }
.cs-table td { font-variant-numeric: tabular-nums; }
.cs-table tr.zero { opacity: .5; }
.cs-name { color: var(--ink-soft); }
.bar.xp span { background: #9fb37a; }
.bar.store span { background: #a88c5a; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 1rem; }
.hero-card { display: grid; align-content: start; grid-template-columns: 90px minmax(0, 1fr); gap: .2rem 1rem; background: rgba(255,255,255,.4);
  border: 1px solid var(--parchment-2); border-radius: var(--radius); padding: .9rem 1rem; }
.hero-card > :not(.hc-figure):not(.hc-head) { grid-column: 1 / -1; }
.hero-card.resting, .hero-card.dead { opacity: .75; }
.hc-figure img { width: 90px; height: 117px; }
.hc-head h2 { margin: 0; font-size: 1.3rem; }
.hc-head .sub { margin: .1rem 0 .3rem; }
.hc-title { margin: 0; font-style: italic; color: var(--brass-dark); }
.hc-title.big { margin: -.4rem 0 .4rem; font-size: 1.1rem; }
.hc-badges { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.badge.warn { background: #ecd0c9; color: var(--blood); }
.badge.glow { background: #e7d48a; color: #5a4210; text-decoration: none; }
.hc-bars { margin: .4rem 0 .2rem; }
.attrs.compact td { text-align: center; padding: .2rem .1rem; cursor: help; line-height: 1.2; }
.hc-skills { margin: .2rem 0 .5rem; }
.hc-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.hc-actions form { margin: 0; }
.link-btn { background: none; border: 0; color: var(--blood); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; font-size: .9rem; }
.hero-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .3rem; }
.hero-flip { display: inline-flex; align-items: center; gap: .6rem; }
.flip { display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--wood); color: var(--parchment); text-decoration: none; font-size: 1.5rem; line-height: 1; }
.flip:hover { background: var(--blood); }
.attr-list { margin: 0; }
.attr-list dt { margin-top: .5rem; }
.attr-list dt strong { margin-left: .3rem; }
.attr-list dd { margin: .1rem 0 0; font-size: .86rem; color: var(--ink-soft); }
.ab-chips { display: block; margin: .15rem 0; }
.ab-info { display: block; font-size: .86rem; color: var(--ink-soft); }
.ab-info em { display: block; font-style: normal; color: var(--brass-dark); }
.rd-slot.blocked { background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 6px, transparent 6px 12px); border-color: #b8a88c; opacity: .7; }
.rd-mods { line-height: 1.6; }
.title-list { list-style: none; padding: 0; margin: .4rem 0; }
.title-list li { padding: .25rem 0; border-top: 1px dashed rgba(0,0,0,.1); }
.pieces { color: var(--brass-dark); letter-spacing: .1em; margin-right: .3rem; }
.pieces .missing { color: #c5b48f; }
.title-pick { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.storage-head .bar { max-width: 32rem; margin: .3rem 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.tabs a { padding: .2rem .7rem; border-radius: 1rem; background: var(--parchment-2); color: var(--ink); text-decoration: none; }
.tabs a:hover { background: #d8c08a; }
.store-group { scroll-margin-top: 1rem; }
.store-group h2 { border-bottom: 1px solid var(--parchment-2); padding-bottom: .2rem; }
.store-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.store-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding: .55rem .4rem; border-bottom: 1px dashed rgba(0,0,0,.12); }
.store-item:hover { background: rgba(255,255,255,.35); }
.store-item.onmarket { background: rgba(123,92,196,.06); }
.si-main { display: grid; gap: .1rem; min-width: 0; flex: 1 1 16rem; }
.si-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.si-actions form { margin: 0; }
.si-actions .row { display: flex; gap: .3rem; align-items: center; }
.si-actions select { max-width: 11rem; }
.si-actions .sellmarket summary { cursor: pointer; color: var(--blood); font-size: .9rem; }
@media (max-width: 520px) {
  .hero-card { grid-template-columns: 64px minmax(0, 1fr); }
  .hc-figure img { width: 64px; height: 83px; }
  .attrs.compact td .small { font-size: .7rem; }
}
.saying { margin: .2rem 0 .3rem; }
.saying q { font-style: italic; quotes: "„" "“"; }
.bar.thin { height: .95rem; }
.bar.thin em { font-size: .7rem; }
.arena .monster .bar.res span { background: #7b5cc4; }
.party .bar.res { margin-top: .15rem; }

/* Ausdauer grün, Mana blau – auf einen Blick unterscheidbar */
.bar.res.stamina span { background: #5f9a52; }
/* Kampf: Kopfzeile mit Name, Stufe, Schaden über Zeit */
.fhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .35rem; }
.fhead .flevel { font-size: .75rem; color: var(--ink-soft); white-space: nowrap; }
.fhead .fdots { display: inline-flex; gap: .2rem; }
.fhead .dot { font-size: .75rem; padding: 0 .3rem; border-radius: .6rem; background: rgba(0,0,0,.08); white-space: nowrap; cursor: help; }
.fhead .dot.poison { background: rgba(96,150,60,.25); }
.fhead .dot.fire { background: rgba(214,110,40,.25); }
.fhead .dot.ice { background: rgba(110,160,210,.25); }
.fhead .dot.lightning { background: rgba(220,190,60,.3); }
.fhead .dot.physical { background: rgba(170,50,50,.2); }
/* Fähigkeiten im Kampfbericht hervorheben */
.replay-log li.uses-ability { background: rgba(123,92,196,.08); border-left: 3px solid #7b5cc4; padding-left: .35rem; }
.replay-log .ico.abil { color: #7b5cc4; }
.replay-log .abname { color: #4e3a8a; }
.replay-log li.expire { color: var(--ink-soft); font-style: italic; }

/* ================================================================ Seiten v3 (30.10.2026) */
.strong { font-weight: 700; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.card-head h2 { margin-bottom: .6rem; }
.pill { display: inline-block; font-size: .82rem; font-weight: 700; padding: .15rem .6rem; border-radius: 1rem; white-space: nowrap; background: var(--parchment-2); color: var(--ink-soft); }
.pill.good { background: #dcebd3; color: #2f5427; }
.pill.warn { background: #f1dfa8; color: #5a3d0a; }
.pill.bad { background: #f3d6cf; color: #7a241c; }
.pill.info { background: #e3e6f2; color: #2f3f6a; }
.pill.dust { background: #e7defa; color: #4e3a8a; }
.good-text { color: var(--moss); }
.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.dash .card h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.dash-heroes { grid-column: span 2; }
.rowlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hero-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(180px, 250px) 6.5rem; gap: .5rem 1rem; align-items: center;
  background: #fffaf0; border: 1px solid #eadcb8; border-radius: var(--radius); padding: .45rem .7rem; }
.hero-row.free { display: block; background: transparent; border-style: dashed; }
.hr-fig img { display: block; width: 40px; height: 52px; }
.hr-name { display: grid; min-width: 0; }
.hr-name .strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .45rem; }
.kv li { display: flex; justify-content: space-between; gap: .8rem; }
.kv li > span:last-child:not(:first-child) { color: var(--brass-dark); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-won { color: var(--moss) !important; }
.res-lost { color: var(--blood) !important; }
.fairy-mini { display: flex; gap: .8rem; align-items: center; margin-bottom: .7rem; }
.fairy-mini img { width: 64px; height: 83px; }
.progress { margin-bottom: .8rem; }
.progress-label { display: flex; justify-content: space-between; font-size: .92rem; font-variant-numeric: tabular-nums; }
.progress .m { height: .65rem; background: #ddcba2; border-radius: 4px; overflow: hidden; margin: .25rem 0; }
.progress .m i { display: block; height: 100%; background: var(--moss); }
.progress p { margin: .2rem 0 0; }
.newsbox { margin-top: 1.5rem; }
.newsbox .news { margin-bottom: .6rem; }
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .dash-heroes { grid-column: auto; }
}
@media (max-width: 560px) {
  .hero-row { grid-template-columns: 40px minmax(0, 1fr) 6rem; }
  .hr-name .strong { white-space: normal; }
  .hero-row .hr-bars { grid-column: 2 / -1; }
}
.dash > section, .split > *, section.card + section.card { margin-top: 0; }
@media (max-width: 760px) { .purse { flex-wrap: nowrap; } }
@media (max-width: 560px) {
  .hero-row .pill { grid-column: 3; grid-row: 1; }
  .hero-row .hr-bars { grid-row: 2; }
}
/* Questbrett */
.row-actions form { margin: 0; }
.qlist { display: grid; gap: .7rem; }
.qrow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: start; cursor: pointer;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 10px; padding: .9rem 1.1rem; transition: border-color .15s, box-shadow .15s; }
.qrow:hover { border-color: var(--brass-dark); }
.qrow.picked { border: 2px solid var(--blood); padding: calc(.9rem - 1px) calc(1.1rem - 1px); box-shadow: 0 2px 10px rgba(42,31,22,.12); }
.qrow.hard { background: #ece0c0; }
.qrow .qpick { margin-top: .35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--blood); }
.qbody { display: grid; gap: .35rem; min-width: 0; }
.qtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.qtitle strong { font: 700 1.3rem var(--serif); }
.qchips { display: flex; flex-wrap: wrap; gap: .3rem; }
.qchips .chip { font-size: .85rem; background: var(--page); border: 1px solid var(--card-line); padding: .05rem .55rem; }
.qstory { font: italic .95rem/1.45 var(--serif); color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qrow.picked .qstory { -webkit-line-clamp: unset; display: block; }
.qreward { display: grid; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.partybox { display: grid; gap: .55rem; border: 2px solid var(--blood); }
.partybox .up { text-transform: uppercase; letter-spacing: .08em; margin: 0; font-size: .75rem; }
.pb-title { margin: 0; font-size: 1.4rem; }
.pb-info { margin: 0; }
.pb-heroes { border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pb-hero { display: grid; grid-template-columns: auto 34px minmax(0, 1fr); gap: .55rem; align-items: center; padding: .4rem .55rem; border-radius: var(--radius);
  background: #fffaf0; border: 1px solid #eadcb8; cursor: pointer; }
.pb-hero:has(input:checked) { border-color: var(--blood); box-shadow: inset 0 0 0 1px var(--blood); }
.pb-hero.off { opacity: .5; cursor: not-allowed; }
.pb-hero input { width: 1.1rem; height: 1.1rem; accent-color: var(--blood); }
.pb-hero img { width: 34px; height: 44px; }
.pb-hero > span { display: grid; min-width: 0; }
.pb-hero .small { font-size: .8rem; }
.pb-cost { display: flex; justify-content: space-between; border-top: 1px solid var(--card-line); padding-top: .55rem; margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.pb-go { width: 100%; }
@media (max-width: 560px) {
  .qrow { grid-template-columns: auto minmax(0, 1fr); }
  .qreward { grid-column: 2; text-align: left; display: flex; gap: .5rem; }
}
/* Heldenansicht mit Reitern */
.hero-head { padding-bottom: 0; margin-bottom: 1.2rem; }
.hh-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .3rem; }
.hh-main { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(220px, 340px); gap: .4rem 1.2rem; align-items: center; }
.hh-fig { width: 64px; height: 83px; }
.hh-name h1 { margin: 0; }
.hh-name p { margin: .1rem 0 0; }
.hh-name .hc-title { margin: 0; }
.hh-bars { grid-template-columns: 8.5rem 1fr; }
.hero-head .combat-stats { margin: .8rem 0 .2rem; }
.tabbar { display: flex; flex-wrap: wrap; gap: .2rem; margin: .6rem -1.15rem 0; padding: 0 .6rem; border-top: 1px solid var(--card-line); }
.tabbar a { padding: .75rem .9rem; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.tabbar a:hover { color: var(--ink); }
.tabbar a.active { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--blood); }
.dotbadge.brass { background: var(--brass); color: var(--wood); }
html:not(.tabs-on) .tabpane { margin-bottom: 2rem; }
.tabpane { scroll-margin-top: 1rem; }
.fitlist { display: grid; gap: .6rem; }
.fitlist h2 { margin: 0; font-size: 1.3rem; }
.fit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; background: #fffaf0; border: 1px solid #eadcb8; border-radius: var(--radius); padding: .6rem .7rem; }
.fit .verdict { position: static; display: block; text-align: right; font-size: .85rem; margin-bottom: .4rem; white-space: nowrap; }
.fit-act { display: flex; flex-direction: column; align-items: flex-end; }
.fit p { margin: .2rem 0; }
.attr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .8rem; }
.attr { padding: .8rem 1rem; }
.attr-head { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.attr-head strong { font-size: 1.5rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.attr p { margin: .3rem 0 0; }
.attr .inline { margin: 0; }
button.plus { width: 2rem; height: 2rem; padding: 0; font-size: 1.1rem; line-height: 1; }
.dismissbox { margin-top: 1.5rem; }
.dismissbox summary { cursor: pointer; color: var(--ink-soft); }
.dismissbox form { margin-top: .5rem; }
.ab-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.ab-list li { border-left: 0; padding: .6rem .7rem; background: #fffaf0; border: 1px solid #eadcb8; border-radius: var(--radius); }
.ab-list li.on { border-color: var(--moss); box-shadow: inset 0 0 0 1px var(--moss); }
.ab-list li.learn { background: transparent; border-style: dashed; }
.ab-list li .inline { margin: .4rem 0 0; display: inline-block; }
.passives h2, .split > .card h2 { margin-top: 0; }
.pass-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; }
.pass-list li { padding: .5rem 0; border-bottom: 1px solid #eadcb8; display: grid; gap: .25rem; }
.pass-list li.learn { opacity: .85; }
.pl-head { display: flex; align-items: center; gap: .6rem; }
.pl-head strong { flex: 1; min-width: 0; }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 7px; height: 7px; border-radius: 50%; background: #ddcba2; }
.pips i.open { background: #e8d39a; box-shadow: inset 0 0 0 1px var(--brass); }
.pips i.on { background: var(--brass-dark); }
.m.xpbar { height: .35rem; background: #ddcba2; border-radius: 3px; overflow: hidden; }
.m.xpbar i { display: block; height: 100%; background: #9fb37a; }
.pl-info summary { cursor: pointer; font-size: .85rem; color: var(--ink-soft); }
.pl-info p { margin: .2rem 0 0; }
.pass-list .inline { margin: 0; }
.rd-slot { background: var(--card); }
.rd-slot.filled { background: #fffaf0; }
@media (max-width: 760px) {
  .hh-main { grid-template-columns: 48px minmax(0, 1fr); }
  .hh-fig { width: 48px; height: 62px; }
  .hh-bars { grid-column: 1 / -1; }
  .tabbar { flex-wrap: nowrap; overflow-x: auto; }
  .tabbar a { white-space: nowrap; padding: .7rem .7rem; }
}
.mods { list-style: none; padding: 0; margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .9rem; }
.skill-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.skill-cols h2 { margin-top: 0; }
@media (max-width: 860px) { .skill-cols { grid-template-columns: 1fr; } }
/* Heldenliste, Taverne */
.card.table-wrap { padding: .3rem .4rem; }
.card.table-wrap table.list { margin: 0; }
table.list th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom-color: var(--card-line); padding: .6rem .6rem; }
table.list td { padding: .55rem .6rem; border-bottom-color: #eadcb8; }
table.list tbody tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }
.ht-hero { display: flex; gap: .7rem; align-items: center; }
.ht-hero img { width: 44px; height: 57px; flex: none; }
.big-name { font-size: 1.05rem; }
.lvl { font-size: 1.3rem; display: block; }
.m.tiny { display: block; height: 4px; width: 3rem; margin-left: auto; background: #ddcba2; border-radius: 2px; overflow: hidden; }
.m.tiny i { display: block; height: 100%; background: var(--brass-dark); }
.herotable .mini { grid-template-columns: 7.5rem minmax(80px, 1fr); min-width: 220px; }
.notes { display: flex; flex-wrap: wrap; gap: .3rem; }
a.pill { text-decoration: none; }
.herotable tr.resting, .herotable tr.dead { opacity: .75; }
.freeslot td { color: var(--ink-soft); font-style: italic; }
.attrcell.best { font-weight: 700; color: var(--blood); }
.recruits form { margin: 0; }
.guests { margin-top: 1.8rem; }
.guest { border-color: var(--dust); }
@media (max-width: 700px) {
  .herotable thead, .recruits thead { display: none; }
  .herotable tr, .recruits tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem .5rem; padding: .7rem .3rem; border-bottom: 1px solid #eadcb8; }
  table.list.herotable td, table.list.recruits td { border: 0; padding: 0; }
  .herotable td:first-child, .recruits td:first-child { grid-column: 1 / -1; }
  .herotable td:nth-child(2) { grid-column: 1; text-align: left; }
  .herotable td:nth-child(2) .m.tiny { margin-left: 0; }
  .herotable td:nth-child(3) { grid-column: 2 / -1; }
  .herotable td:nth-child(4), .herotable td:nth-child(5) { grid-column: 1 / -1; }
  .herotable td:last-child, .recruits td:last-child { grid-column: 1 / -1; text-align: left; }
  .herotable .mini { min-width: 0; }
  table.list.recruits td.num[data-label] { text-align: left; font-size: .9rem; }
  .recruits td.num[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--ink-soft); }
  .recruits td[data-label="Beuteanteil"] { grid-column: span 2; }
  .freeslot { display: block !important; }
}
/* Handel: Filterleiste, Kacheln, Detailbereich */
.filterbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.filterbar button { font-weight: 500; background: transparent; color: var(--ink); border: 1px solid #c9b384; border-radius: 1.2rem; padding: .4rem .9rem; }
.filterbar button span { color: var(--ink-soft); margin-left: .2rem; font-variant-numeric: tabular-nums; }
.filterbar button:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.filterbar button[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.filterbar button[aria-pressed="true"] span { color: #d9c9a6; }
.segtabs { display: inline-flex; gap: .2rem; padding: .2rem; background: var(--parchment-2); border-radius: .6rem; margin-bottom: 1rem; }
.segtabs a { padding: .4rem .9rem; border-radius: .45rem; text-decoration: none; color: var(--ink-soft); }
.segtabs a.active { background: var(--card); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: .75rem; align-items: stretch; }
.tiles.shop, .tiles.market { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.tile { font: inherit; font-weight: normal; color: var(--ink); text-align: left; background: #fffaf0; border: 1px solid #e3d3ad; border-radius: 10px;
  padding: .75rem .85rem; display: flex; flex-direction: column; gap: .3rem; min-height: 7.5rem; cursor: default; }
button.tile { cursor: pointer; }
button.tile:hover { background: #fffdf6; border-color: var(--brass-dark); color: var(--ink); }
.tile[style] { border-top: 3px solid var(--rarity); }
.tile.picked { border-color: var(--blood); box-shadow: 0 0 0 1px var(--blood), 0 3px 10px rgba(42,31,22,.15); }
.tile.ghost { border-style: dashed; background: transparent; color: var(--ink-soft); align-items: center; justify-content: center; font-size: .9rem; }
.tile.onmarket { background: #f6f1fb; }
.t-kind { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tile .iname { font-size: 1.02rem; }
.t-chips { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: auto; }
.t-vals { font-size: .9rem; }
.t-buy { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: auto 0 0; padding-top: .5rem; border-top: 1px dashed #e3d3ad; }
.price { font-weight: 700; font-variant-numeric: tabular-nums; }
.price .coin { color: var(--brass); }
.tile form { margin: auto 0 0; }
.tile .item { gap: .2rem; }
.storemeter { min-width: 220px; }
.storemeter .m { height: .6rem; background: #ddcba2; border-radius: 4px; overflow: hidden; margin-top: .2rem; }
.storemeter .m i { display: block; height: 100%; background: #a88c5a; }
.storemeter .m.full i { background: var(--blood); }
.details { display: grid; gap: .5rem; }
.detail h2 { margin: 0 0 .3rem; font-size: 1.45rem; }
.detail h2.iname[style] { color: color-mix(in srgb, var(--rarity) 55%, var(--ink)); }
.detail .d-kind { margin: 0; }
.d-fit { border-top: 1px solid var(--card-line); padding-top: .5rem; margin: .6rem 0; display: grid; gap: .3rem; }
.d-fitrow { display: flex; justify-content: space-between; gap: .5rem; }
.d-fitrow.no { color: var(--ink-soft); }
.d-actions { display: grid; gap: .55rem; border-top: 1px solid var(--card-line); padding-top: .7rem; }
.d-actions form { margin: 0; }
.d-row { display: flex; gap: .4rem; }
.d-row select { flex: 1; min-width: 0; }
button.wide { width: 100%; }
.d-market { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.d-market input[type=text] { width: 5.5rem; padding: .35rem .45rem; }
.d-market select { padding: .35rem .45rem; }
.card.bag { margin-bottom: 1rem; border-color: var(--brass-dark); }
/* Stützpunkt */
.stagecard { margin-bottom: 1.4rem; }
.stagepath { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.stagepath li { display: grid; gap: .2rem; color: var(--ink-soft); }
.stagepath .sp-bar { height: .5rem; border-radius: 4px; background: #ddcba2; }
.stagepath li.done .sp-bar { background: var(--moss); }
.stagepath li.now strong { color: var(--ink); }
.stagepath li.now .sp-bar { box-shadow: 0 0 0 2px rgba(63,107,52,.3); }
.stagepath li.done { color: var(--ink); }
.stage-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--card-line); }
.stage-next form { margin: 0; }
.buildgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .8rem; }
.building { display: flex; flex-direction: column; gap: .3rem; background: #fffaf0; }
.building.locked { background: var(--card); opacity: .8; }
.building.busy { border-color: var(--mana); }
.b-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.b-head h3 { margin: 0; }
.building p { margin: 0; }
.b-val { font-variant-numeric: tabular-nums; }
.b-act { margin-top: auto; padding-top: .5rem; }
.b-act form { margin: 0; }
.beds h2 { margin-top: 0; }
.bedlist { display: grid; gap: .5rem; }
.bedlist li.bed { display: grid; gap: .4rem; border: 2px dashed #d2bb88; border-radius: var(--radius); padding: .6rem .7rem; border-top-style: dashed; }
.bedlist li.bed.taken { border-style: solid; border-color: var(--moss); background: #f3f6ec; }
.bedlist li.bed.ghost { border-color: #e3d3ad; text-align: center; }
.bed-head { display: flex; gap: .6rem; align-items: baseline; }
.bedlist form { margin: 0; }
@media (max-width: 700px) {
  .stagepath { grid-template-columns: 1fr; }
  .stagepath li { grid-template-columns: 4rem auto; align-items: center; }
  .stagepath .sp-bar { grid-row: span 2; height: 100%; min-height: 2.2rem; width: .5rem; }
}
/* Feen */
.tracebox { margin-bottom: 1.4rem; }
.tracebox .progress { margin-bottom: .4rem; }
.tracebox p { margin: 0; }
.fairy-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: start; }
.fairy-cols > section { margin: 0; }
.fairy-cols h2 { margin-top: 0; }
.fairy-cols .card + .card { margin-top: .8rem; }
.fairy .intro { font: italic .98rem/1.5 var(--serif); color: var(--ink-soft); }
.fairy-history { margin-top: 1.8rem; }
@media (max-width: 860px) { .fairy-cols { grid-template-columns: 1fr; } }
/* Post, Gilde */
.mailform { max-width: 46rem; }
table.mail tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--blood); }
.letter { max-width: 46rem; }
.letter .body { font-size: 1.02rem; }
form + .card.table-wrap, form + .table-wrap { margin-top: .8rem; }
.split > .main > h2:first-child, .split > .aside > h2:first-child { margin-top: 0; }
/* Feenstaub */
.shopgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.2rem; align-items: start; }
.shopgroup { margin: 0 !important; }
.shopgroup h2 { margin-top: 0; }
.shopcol { display: grid; gap: .7rem; }
.product { background: #fffaf0; }
.product h3 { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; }
.product .price { font-size: 1.15rem; }
.owned { margin-top: 1.4rem; }
.owned summary { cursor: pointer; color: var(--ink-soft); }
.owned .kv { margin-top: .6rem; }
.owned .kv li > span:last-child { color: var(--ink-soft) !important; font-weight: 400 !important; white-space: normal !important; text-align: right; }
/* Questbericht */
.report-split { align-items: flex-start; }
.report-split > .aside { flex: 1 1 250px; max-width: 320px; }
.report-split > .main { flex: 999 1 560px; }
.report-party .rp-title { margin: 0 0 .6rem; font-size: 1.2rem; }
.report-party .party { grid-template-columns: 1fr; margin: 0; }
.backlink { margin: 0 0 .2rem; }
.decide { position: sticky; bottom: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0;
  background: var(--wood); color: var(--parchment); border: 2px solid var(--brass-dark); border-radius: 10px; padding: .8rem 1rem; box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
.decide .dc-text { flex: 1 1 260px; }
.decide p { margin: 0; }
.decide .small { color: #d9c9a6; }
.decide .countdown { color: #ffd98a; font-weight: 700; }
.decide form { margin: 0; }
.decide button.secondary { color: var(--parchment); border-color: #d9c9a6; }
.decide button.secondary:hover { background: rgba(255,255,255,.08); color: #fff; }
.js .decide.spoiler { display: none; }
@media (max-width: 860px) {
  .report-split > .aside { max-width: none; }
  .report-party .party { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
  .report-party .sticky-aside { position: static; }
}
@media (max-width: 760px) {
  .decide { bottom: 4.4rem; }
  .decide .dc-text { flex-basis: 100%; }
  .decide form:last-child { flex: 1; }
  .decide form:last-child button { width: 100%; }
}
.tale, .quest .intro, p.intro { font-family: var(--serif); font-size: 1.02rem; }
.beds select { min-width: 0; }
input, select, textarea { max-width: 100%; min-width: 0; }
.form label { grid-template-columns: minmax(0, 1fr); }
html:has(body.out) { background: var(--wood); }
.hero-banner .lead, .hero-banner + .lead { margin-left: auto; margin-right: auto; text-align: center; }
/* Heilen-Knopf */
.healform { display: inline-flex; align-items: center; gap: .4rem; margin: .3rem 0 0; }
.heal-btn { display: inline-block; font-size: .82rem; font-weight: 700; line-height: 1.3; padding: .12rem .6rem; border-radius: 1rem;
  background: transparent; color: var(--moss); border: 1px solid var(--moss); white-space: nowrap; }
.heal-btn:hover { background: #dcebd3; color: #2f5427; }
.small-btn.heal-btn { font-size: .9rem; padding: .3rem .75rem; }
.hr-end { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; text-align: center; }
.hr-end .heal-btn { width: 100%; }
.hr-end .healform { margin: 0; }
.notes .healform { margin: 0; }
@media (max-width: 560px) { .hero-row .hr-end { grid-column: 3; grid-row: 1; } }
/* Anforderungen: rot nur, wenn kein Held sie erfüllt */
.req.ok { color: var(--moss); }
.req.neutral { color: var(--ink-soft); }
/* Ausrüstungs-Icons: Rahmen in Seltenheitsfarbe, Element-Abzeichen */
.iicon { --rarity: #b89a63; position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center;
  padding: 3px; border-radius: 9px; background: var(--parchment); border: 2px solid color-mix(in srgb, var(--rarity) 70%, #fff); line-height: 0; }
.iicon.r-common { border-color: #cdb88c; }
.iicon:not(.r-common) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity) 35%, transparent); }
.iicon img { display: block; }
.iel { position: absolute; top: -7px; right: -7px; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: normal .7rem/1 var(--sans); background: #fff; border: 1px solid var(--card-line); }
.iel.el-fire { background: #f6d9cb; }
.iel.el-ice { background: #dbe8f4; }
.iel.el-lightning { background: #f4ecbd; }
.iel.el-poison { background: #dcebd3; }
.item.with-icon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .6rem; align-items: start; }
.item-text { display: grid; gap: .1rem; min-width: 0; }
.tile .t-icon { align-self: flex-start; margin-bottom: .2rem; }
.detail .d-icon { float: right; margin: 0 0 .4rem .6rem; }
.rd-slot { grid-template-columns: minmax(0, 1fr); }
.rd-slot.filled { grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; }
.rd-slot.filled > .rd-name { grid-column: 1 / -1; }
.rd-slot.filled > .rd-icon { grid-row: span 3; }
.rd-slot.filled > :not(.rd-icon):not(.rd-name) { grid-column: 2; }
.rd-slot .ighost { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); opacity: .16; pointer-events: none; }
.rd-slot { position: relative; }
.rd-slot.filled > .rd-icon { align-self: start; }
/* Bewährungsprobe am Questbrett */
.qrow.proof { background: #f6f1fb; border-color: #c9b6ef; }
.qrow.proof.picked { border-color: var(--dust); }
.qtitle .pill { white-space: normal; }
.qreward { flex-wrap: wrap; }
/* Regionen (Migration 013) */
.regicon { display: inline-block; vertical-align: -4px; flex: none; }
.qtitle .regicon { margin-right: .1rem; align-self: center; }
.sub .regicon { vertical-align: -4px; opacity: .85; }
.section.event .sicon { background: #5b6f8f; }

/* Kopfleiste: ab 1100 px einzeilig (steht am Ende, damit es die Grundregeln überschreibt) */
@media (min-width: 1100px) {
  .top-inner { flex-wrap: nowrap; }
  .mainnav, .purse { flex-wrap: nowrap; }   /* nie zweizeilig – lange Bandnamen werden gekürzt */
  .purse { min-width: 0; flex-shrink: 1; }
  .usermenu { min-width: 0; }
  .usermenu summary { max-width: 10rem; min-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1100px) and (max-width: 1199px) { .mainnav .ico { display: none; } }
@media (min-width: 1100px) and (max-width: 1299px) {
  .top-inner { gap: .4rem .7rem; }
  .brand { font-size: 1.35rem; }
  .mainnav a { padding: .55rem .45rem; gap: .3rem; }
  .purse { gap: .3rem .6rem; }
  .usermenu summary { max-width: 7.5rem; }
}
@media (max-width: 760px) {
  .brand { min-width: 0; }
  .purse { min-width: 0; flex-wrap: nowrap; }
  .usermenu { min-width: 0; }
}
@media (max-width: 420px) {
  .brand { font-size: 1.15rem; }
  .usermenu summary { max-width: 6rem; }
}

/* Stützpunkt: Scherenschnitte für Ausbaustufen, Gebäude und Betten */
.cico { display: block; flex: none; }
.stagepath li { align-content: start; }
.stagepath .sp-ico { margin: 0 auto .2rem; opacity: .32; filter: grayscale(1); }
.stagepath li.done .sp-ico { opacity: 1; filter: none; }
.stagepath li:not(.done) strong { color: var(--ink-soft); }
.b-head h3 { display: flex; align-items: center; gap: .55rem; }
.building.locked .cico { opacity: .45; }
.bedlist li.bed { grid-template-columns: minmax(0, 1fr); }
.bedlist li.bed form { min-width: 0; }
.bedlist li.bed select { flex: 1; min-width: 0; }
.bed-head { align-items: center; }
.bed-head .cico { margin-right: .1rem; }
.bedlist li.bed:not(.taken) .cico { opacity: .6; }
@media (max-width: 760px) {
  .stagepath .sp-ico { width: 40px; height: 40px; margin: 0; grid-row: span 2; }
  .stagepath li { grid-template-columns: 2.8rem .5rem auto; }
}

/* Werkstatt (Migration 015) */
.ws-title { display: flex; align-items: center; gap: .8rem; }
.ws-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1rem; align-items: start; }
.ws-line h2 { margin: 0 0 .2rem; }
.ws-line > p.small { margin: 0 0 .8rem; }
.ws-job { display: flex; gap: .7rem; align-items: center; background: #eef2f8; border: 1px solid #c9d3e6; border-radius: var(--radius); padding: .6rem .7rem; margin-bottom: .8rem; }
.ws-job > div { display: grid; gap: .15rem; flex: 1; }
.ws-bar { height: .45rem; background: #d6dceb; border-radius: 3px; overflow: hidden; }
.ws-bar i { display: block; height: 100%; background: var(--mana); }
.ws-recipes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ws-recipe { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem .8rem; align-items: start;
  background: #fffaf0; border: 1px solid #eadcb8; border-radius: var(--radius); padding: .6rem .7rem; }
.ws-recipe.blocked { background: var(--card); }
.ws-head { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.ws-eff { margin: .15rem 0 .3rem; color: var(--ink-soft); }
.ws-ing { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .88rem; }
.ws-ing li { display: inline-flex; align-items: center; gap: .3rem; }
.ws-ing li.ok { color: #2f5427; }
.ws-ing li.miss { color: var(--blood); }
.ws-ing img { background: #fffaf0; border: 1px solid #e3d3ad; border-radius: 4px; }
.ws-ing .coin { color: var(--brass); }
.ws-act { display: grid; gap: .3rem; justify-items: end; text-align: right; }
.ws-act form { margin: 0; }
.ws-why { color: var(--ink-soft); max-width: 9rem; }
.ws-empty { font-style: italic; color: var(--ink-soft); }
.ws-unknown { margin: .8rem 0 0; color: var(--ink-soft); }
@media (max-width: 560px) {
  .ws-recipe { grid-template-columns: auto minmax(0, 1fr); }
  .ws-act { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; align-items: center; justify-items: start; }
}

/* Aufträge und Regionsruf (Migration 016) */
.orderlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.order { display: grid; gap: .5rem; background: #fffaf0; }
.order.ready { border-color: var(--moss); }
.o-head { display: flex; gap: .6rem; align-items: center; }
.o-head > div { display: grid; }
.order .tale { margin: 0; }
.o-want { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem .8rem; align-items: center;
  background: var(--parchment-2); border-radius: var(--radius); padding: .5rem .6rem; }
.o-want > div:nth-child(2) { display: grid; }
.o-reward { display: grid; justify-items: end; text-align: right; }
.o-reward .coin { color: var(--brass); }
.dusttext { color: #6a4fb3; font-weight: 600; font-size: .9rem; }
.o-act { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; }
.o-act form { margin: 0; }
.replist { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .7rem; }
.rp-head { display: flex; align-items: center; gap: .45rem; }
.rp-head .pill { margin-left: auto; }
.rp-bar { height: .45rem; background: #ddcba2; border-radius: 3px; overflow: hidden; margin: .25rem 0 .15rem; }
.rp-bar i { display: block; height: 100%; background: var(--brass-dark); }
.rankinfo { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.pill.rep-1 { background: #ece3c8; color: #5a4a1f; }
.pill.rep-2 { background: #dcebd3; color: #2f5427; }
.pill.rep-3 { background: #e3e6f2; color: #2f3f6a; }
.pill.rep-4 { background: #efe0f7; color: #5b2f7a; }
.qchips .rep-1, .qchips .rep-2, .qchips .rep-3, .qchips .rep-4 { font-weight: 700; }
@media (max-width: 560px) {
  .o-want { grid-template-columns: auto minmax(0, 1fr); }
  .o-reward { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; text-align: left; }
  .o-reward > * { white-space: nowrap; }
}
.bad-text { color: var(--blood); }

/* Gildenprojekte und Begleiter (Migration 017) */
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 1rem; align-items: start; }
.gp { display: grid; gap: .45rem; background: #fffaf0; }
.gp.maxed { background: #f3f6ec; }
.gp-head { display: flex; gap: .7rem; align-items: center; }
.gp-head h2 { margin: 0; font-size: 1.3rem; }
.gp p { margin: 0; }
.gp-bar { height: .5rem; background: #ddcba2; border-radius: 3px; overflow: hidden; }
.gp-bar i { display: block; height: 100%; background: var(--moss); }
.gp-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.gp-needs li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.gp-needs li.done { opacity: .6; }
.gp-needs img { background: #fffaf0; border: 1px solid #e3d3ad; border-radius: 4px; }
.gp-gold { color: var(--brass); font-size: 1.2rem; text-align: center; }
.gp-give { display: flex; gap: .3rem; margin: 0; }
.gp-give input { width: 4.8rem; padding: .25rem .4rem; }
.gp-donors { margin-top: 1rem; }
.rd-companion { display: flex; gap: .6rem; align-items: center; margin-top: .6rem; padding: .6rem .7rem; border-radius: var(--radius);
  background: var(--parchment-2); text-align: left; }
.rd-companion h3 { margin: 0; font-size: 1rem; }
.rd-companion p { margin: .1rem 0; }
.rd-companion.none { background: transparent; border: 1px dashed #d2bb88; }
.gp-what { display: grid; line-height: 1.25; }
.gp-give input { width: 5.2rem; }

/* Meine Bande: Titel */
.band-title { display: inline-block; font-size: .8rem; font-weight: 700; color: #5b2f7a; background: #efe0f7; border-radius: 1rem; padding: .05rem .55rem; }
.titlelist { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.titlelist li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center;
  border: 1px solid #eadcb8; border-radius: var(--radius); padding: .5rem .7rem; background: #fffaf0; }
.titlelist li > div { display: grid; }
.titlelist li.on { border-color: #b39ddb; background: #f6f1fb; }
.titlelist li.locked { opacity: .55; background: transparent; border-style: dashed; }
.titlelist form { margin: 0; }
.tl-medal { font-size: 1.4rem; color: #8a6cc4; text-align: center; }
/* Meine Helden: AP-Punkte über dem Namen */
.ht-ap { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.ht-ap .appips { flex-wrap: nowrap; }
.ht-ap .appips i { width: .55rem; height: .55rem; }
/* Menü: Post nur über den Briefumschlag */
.maillink.active { color: var(--brass, #c9a35a); }
.dismissbox.card { margin-top: 1.5rem; padding: .7rem 1rem; }