/* ==========================================================================
   Heldenbuch – Pergament, Gold und dunkles Holz
   ========================================================================== */

@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("fonts/cinzel-decorative-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("fonts/cinzel-decorative-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #140d08;
  --wood: #24170f;
  --wood-2: #33220f;
  --leather: #3d2715;
  --gold: #c9a227;
  --gold-light: #ecd27e;
  --gold-dark: #8a6a1c;
  --parchment: #ecdcb4;
  --parchment-light: #f7ecd0;
  --parchment-dark: #d4bb85;
  --ink: #2b1c0f;
  --ink-soft: #5e4529;
  --line: rgba(110, 78, 38, .35);
  --blood: #7e1a14;
  --blood-light: #a8322a;
  --life: #b3241c;
  --mana: #2c5bb0;
  --karma: #c99a1e;
  --forest: #2e6334;
  --display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --heading: "Cinzel", Georgia, serif;
  --body: "EB Garamond", Garamond, "Palatino Linotype", Georgia, serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%239a7428' stroke-width='1.5'%3E%3Cpath d='M2 42V10a8 8 0 0 1 8-8h32'/%3E%3Cpath d='M7 33V14a7 7 0 0 1 7-7h19'/%3E%3C/g%3E%3Cg fill='%239a7428'%3E%3Cpath d='M13 13c6 0 8 3 8 8-5 0-8-3-8-8z'/%3E%3Ccircle cx='7' cy='38' r='1.8'/%3E%3Ccircle cx='38' cy='7' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12'%3E%3Cpath d='M0 6h98M122 6h98' stroke='%23a07a2c' stroke-width='1'/%3E%3Cpath d='M110 1l6 5-6 5-6-5z' fill='%237e1a14'/%3E%3Ccircle cx='100' cy='6' r='1.6' fill='%23a07a2c'/%3E%3Ccircle cx='120' cy='6' r='1.6' fill='%23a07a2c'/%3E%3C/svg%3E");
  --shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 14px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: 18px/1.5 var(--body);
  background-color: var(--night);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(201, 162, 39, .18), transparent 70%),
    radial-gradient(ellipse at 50% 120%, rgba(126, 26, 20, .25), transparent 60%),
    var(--noise),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--wood) 0%, var(--night) 100%);
}

::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3 { font-family: var(--heading); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .02em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.2rem; color: var(--blood); }
h3 { font-size: 1rem; color: var(--ink-soft); }
p { margin: 0 0 .8em; }
a { color: var(--blood); text-decoration-color: rgba(126, 26, 20, .4); text-underline-offset: 3px; }
a:hover { color: var(--blood-light); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background:
    var(--noise),
    linear-gradient(180deg, #3a2614 0%, #24170c 100%);
  border-bottom: 3px double var(--gold-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
.topbar-row {
  max-width: 1200px; margin: 0 auto; padding: .55rem 1rem .2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 900; font-size: 1.55rem; letter-spacing: .04em;
  text-decoration: none;
  background: linear-gradient(180deg, #f6e3a1 0%, #d4ad3a 55%, #9b7520 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.brand-mark {
  width: 34px; height: 34px; flex: none;
  background: url("icons/dsao.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.userbox { display: flex; align-items: center; gap: .3rem; color: var(--parchment-dark); }
.userbox .who { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--heading); font-size: .85rem; margin-right: .3rem; }
.userbox a, .userbox button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--gold-light); background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 39, .35);
  cursor: pointer; font: inherit;
}
.userbox a:hover, .userbox button:hover, .userbox a.active { background: rgba(201, 162, 39, .2); border-color: var(--gold); }
.userbox a.gm-link, .userbox button.gm-link {
  width: auto; gap: .4rem; padding: 0 .85rem; border-radius: 99px; text-decoration: none;
  font-family: var(--heading); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.userbox a.gm-link.active { color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.userbox a.gm-link + .who, .userbox button.gm-link + .who { margin-left: .4rem; }

.mainnav {
  max-width: 1200px; margin: 0 auto; padding: .3rem 1rem 0;
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: .5rem .5rem .55rem;
  font-family: var(--heading); font-weight: 700; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--parchment-dark); text-decoration: none;
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
}
.mainnav a:hover { color: var(--gold-light); background: rgba(201, 162, 39, .08); }
.mainnav a.active {
  color: var(--blood);
  background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment));
  border-color: var(--gold-dark);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .3);
  margin-bottom: -3px; padding-bottom: calc(.55rem + 3px);
}

/* --------------------------------------------------------------------------
   Seitenaufbau
   -------------------------------------------------------------------------- */

main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.6rem 1rem 3rem; }

.site-footer {
  text-align: center; padding: 1.2rem 1rem 2rem;
  font-family: var(--heading); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(236, 210, 126, .45);
}

.page-title, .hero-banner, .clan-banner {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin: 0 0 1.4rem; padding: 0 .2rem;
  color: var(--parchment-light);
}
.page-title h1, .hero-banner h1, .clan-banner h1 {
  margin: 0; font-family: var(--display); font-size: 2.2rem;
  background: linear-gradient(180deg, #f8e7ab, #d1a838 60%, #a27a22);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
}
.page-title > div:first-child, .hero-banner .banner-text { flex: 1 1 300px; }
.page-title .sub, .hero-banner .sub, .clan-banner .sub {
  margin: .25rem 0 0; color: var(--parchment-dark); font-style: italic; font-size: 1.05rem;
}
.page-title-extra, .banner-extra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hero-banner .clan-line { margin: .15rem 0 0; color: var(--gold-light); font-family: var(--heading); font-size: .85rem; letter-spacing: .05em; }
.banner-emblem { display: inline-flex; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.clan-banner .emblem { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.clan-banner .motto { margin: .3rem 0 0; color: var(--gold-light); font-style: italic; font-size: 1.15rem; }
.back { display: inline-block; margin-bottom: .9rem; color: var(--gold-light); font-family: var(--heading); font-size: .85rem; letter-spacing: .05em; text-decoration: none; }
.back:hover { color: #fff3c4; }
.narrow-page { max-width: 560px; margin: 0 auto; }

.grid { display: grid; gap: 1.2rem; align-items: start; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-battle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 860px) { .grid-battle { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Pergamentkarten
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  margin-bottom: 1.2rem; padding: 1.5rem 1.6rem 1.4rem;
  min-width: 0;
  background:
    var(--noise),
    radial-gradient(ellipse at 50% 40%, var(--parchment-light) 0%, var(--parchment) 55%, var(--parchment-dark) 100%);
  border: 1px solid #7a5a26;
  border-radius: 4px;
  box-shadow: inset 0 0 45px rgba(110, 70, 20, .35), inset 0 0 0 5px rgba(247, 236, 208, .35), var(--shadow);
}
.card::before, .card::after {
  content: ""; position: absolute; width: 38px; height: 38px; pointer-events: none;
  background: var(--corner) center / contain no-repeat;
}
.card::before { top: 6px; left: 6px; }
.card::after { bottom: 6px; right: 6px; transform: rotate(180deg); }
.card > h2, .card summary h2 {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  margin-bottom: .9rem; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
}
.card > h2::after, .card summary h2::after {
  content: ""; width: 180px; max-width: 100%; height: 12px; background: var(--divider) left center / contain no-repeat;
}
.card .sub { color: var(--ink-soft); font-style: italic; margin-top: -.5rem; }
.card h3 { margin-top: 1.1rem; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; }
.card hr { border: 0; height: 12px; margin: 1.2rem 0; background: var(--divider) center / 220px 12px no-repeat; }

details.collapsible summary { list-style: none; cursor: pointer; }
details.collapsible summary::-webkit-details-marker { display: none; }
details.collapsible summary h2 { margin-bottom: 0; }
details.collapsible[open] summary h2 { margin-bottom: .9rem; }
details.collapsible .toggle-hint { display: block; margin-top: -.2rem; font-style: italic; color: var(--ink-soft); }
details.collapsible .toggle-hint::after { content: " ▾"; font-style: normal; }
details.collapsible[open] .toggle-hint { display: none; }

/* Schaltflächen auf dunklem Grund (Seitenkopf) */
.page-title .btn.secondary, .hero-banner .btn.secondary, .clan-banner .btn.secondary,
.page-title .btn.danger, .hero-banner .btn.danger, .clan-banner .btn.danger {
  color: var(--gold-light); background: rgba(0, 0, 0, .35); border-color: var(--gold-dark); box-shadow: none;
}
.page-title .btn.danger:hover, .hero-banner .btn.danger:hover, .clan-banner .btn.danger:hover { color: #fbe9c4; background: var(--blood); }

/* --------------------------------------------------------------------------
   Formulare & Schaltflächen
   -------------------------------------------------------------------------- */

label > span, .field > label > span, legend {
  display: block; margin-bottom: .2rem;
  font-family: var(--heading); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: rgba(255, 250, 235, .55);
  border: 1px solid rgba(110, 78, 38, .45); border-bottom: 2px solid rgba(110, 78, 38, .6);
  border-radius: 3px; padding: .42rem .6rem;
  box-shadow: inset 0 1px 3px rgba(80, 50, 15, .15);
}
input::placeholder, textarea::placeholder { color: rgba(94, 69, 41, .55); font-style: italic; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(201, 162, 39, .35); background: rgba(255, 250, 235, .85); }
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--blood); }
input.mini { width: 4.6rem; padding: .25rem .4rem; text-align: center; }
fieldset { border: 0; padding: 0; margin: 0 0 .9rem; }
.field { margin-bottom: .8rem; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 .9rem; }
.check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.hint { font-size: .95rem; color: var(--ink-soft); font-style: italic; }
.error { color: var(--blood); font-weight: 600; margin: .6rem 0 0; }
.inline-form { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-top: 1rem; }
.inline-form .field { margin: 0; flex: 1 1 160px; }
.inline-form .field.narrow { flex: 0 0 96px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem 1.05rem;
  font-family: var(--heading); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  color: #f8e7b6;
  background: linear-gradient(180deg, #a8322a 0%, #7e1a14 55%, #5f120d 100%);
  border: 1px solid var(--gold);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 2px 0 #2d0a07, 0 3px 8px rgba(0, 0, 0, .3);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  transition: transform .08s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.12); color: #fff4cf; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.btn.secondary {
  color: var(--ink); text-shadow: none;
  background: linear-gradient(180deg, rgba(255, 248, 225, .7), rgba(220, 196, 140, .7));
  border-color: #8a6a3a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(90, 60, 20, .45);
}
.btn.secondary:hover { color: var(--blood); }
.btn.danger {
  color: var(--blood); text-shadow: none;
  background: rgba(255, 248, 225, .45);
  border-color: rgba(126, 26, 20, .6);
  box-shadow: 0 2px 0 rgba(126, 26, 20, .25);
}
.btn.danger:hover { background: var(--blood); color: #f8e7b6; }
.btn.small { padding: .28rem .65rem; font-size: .7rem; }
.btn.tiny { padding: .12rem .45rem; font-size: .66rem; letter-spacing: .04em; }
.btn.big { padding: .7rem 1.8rem; font-size: .95rem; }
.btn:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
.actions { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.actions.center { justify-content: center; }

.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.tabs a {
  padding: .4rem .95rem; border-radius: 99px;
  font-family: var(--heading); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--parchment-dark);
  border: 1px solid rgba(201, 162, 39, .35); background: rgba(0, 0, 0, .25);
}
.tabs a:hover { color: var(--gold-light); border-color: var(--gold); }
.tabs a.active { color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: var(--gold-light); }
.card .tabs a { color: var(--ink-soft); background: rgba(255, 248, 225, .4); border-color: rgba(110, 78, 38, .35); }
.card .tabs a.active { color: #f8e7b6; background: linear-gradient(180deg, #a8322a, #7e1a14); border-color: var(--gold); }
.tabs.center { justify-content: center; }

.tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .05rem .5rem; border-radius: 3px;
  font-family: var(--heading); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); background: rgba(212, 187, 133, .55); border: 1px solid rgba(110, 78, 38, .35);
  white-space: nowrap; vertical-align: .1em;
}
.tag.gold { color: #4a3505; background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: var(--gold-dark); }
.tag.blood { color: #fbe9c4; background: linear-gradient(180deg, #a8322a, #7e1a14); border-color: #5f120d; }
.tag.equipped { color: #f2f6e9; background: var(--forest); border-color: #1f4423; }
.tag.big { font-size: .8rem; padding: .25rem .7rem; }
.page-title .tag:not(.gold):not(.blood), .hero-banner .tag:not(.gold):not(.blood) { color: var(--parchment-light); background: rgba(0, 0, 0, .35); border-color: rgba(201, 162, 39, .4); }

.empty { color: var(--ink-soft); font-style: italic; margin: .3rem 0; }
.desc { color: var(--ink-soft); font-size: .93rem; line-height: 1.35; }
.note { font-style: italic; }
.stats-line { font-family: var(--heading); font-size: .75rem; letter-spacing: .04em; color: var(--blood); }
.flavor { font-style: italic; color: var(--ink-soft); border-left: 3px solid rgba(126, 26, 20, .4); padding-left: .8rem; }
.prose { white-space: pre-wrap; }

/* --------------------------------------------------------------------------
   Heldenbogen
   -------------------------------------------------------------------------- */

.attrs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem .55rem; }
.attr {
  display: block; padding: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
.attr-inner {
  text-align: center; padding: .45rem .3rem 1.05rem;
  background: var(--noise), linear-gradient(180deg, #8e1f18, #5a100b);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  color: #f8e7b6;
}
.attr .k { font-family: var(--heading); font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--gold-light); }
.attr .v { font-family: var(--heading); font-size: 1.75rem; font-weight: 700; line-height: 1.1; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.attr input { width: 100%; max-width: 4rem; margin: .1rem auto 0; display: block; text-align: center; font-family: var(--heading); font-size: 1.15rem; font-weight: 700; padding: .1rem; }

.vial { margin-bottom: .75rem; }
.vial-head { display: flex; justify-content: space-between; font-family: var(--heading); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.vial-head strong { color: var(--ink); }
.vial-track {
  position: relative; height: 16px; margin-top: .2rem; border-radius: 99px; overflow: hidden;
  background: linear-gradient(180deg, #1c130b, #3a2a18);
  border: 1px solid var(--gold-dark);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 245, 210, .6);
}
.vial-track::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .1));
}
.vial-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.vial.lep .vial-fill { background: linear-gradient(180deg, #e2564a, var(--life) 50%, #6e0f0a); box-shadow: 0 0 10px rgba(226, 86, 74, .6); }
.vial.asp .vial-fill { background: linear-gradient(180deg, #6f9df0, var(--mana) 50%, #172f61); box-shadow: 0 0 10px rgba(111, 157, 240, .6); }
.vial.kap .vial-fill { background: linear-gradient(180deg, #f2d26a, var(--karma) 50%, #6e520c); box-shadow: 0 0 10px rgba(242, 210, 106, .6); }

.stats { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: .9rem 0 .6rem; }
.stat .k { font-family: var(--heading); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.stat .v { font-family: var(--heading); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.purse {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .6rem; border-top: 1px dashed var(--line);
  font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.purse .coins { font-size: 1.25rem; text-transform: none; letter-spacing: .02em; }
.coins { display: inline-flex; align-items: center; font-family: var(--heading); font-weight: 700; white-space: nowrap; color: #6a4c0c; }
.coin-dot {
  display: inline-block; width: .9em; height: .9em; margin-right: .3em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #d4ad3a 55%, #7d5c12);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 10, .55), 0 1px 1px rgba(0, 0, 0, .25);
}

.ability-group { margin-bottom: .9rem; }
.ability-group h3 { margin: 0 0 .25rem; }
.ability { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .32rem 0; border-bottom: 1px dashed var(--line); }
.ability .name { font-weight: 600; font-size: 1.05rem; }
.ability .probe { margin-left: .5rem; font-family: var(--heading); font-size: .68rem; letter-spacing: .06em; color: var(--ink-soft); }
.ability .val {
  min-width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-weight: 700; font-size: 1.05rem; color: #f8e7b6;
  background: radial-gradient(circle at 35% 30%, #b0392f, #6a130d); border: 1px solid var(--gold); border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
.ability .val:empty { display: none; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px dashed var(--line); vertical-align: top; }
th { font-family: var(--heading); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid rgba(110, 78, 38, .55); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td, table.inv tr.equipped td { background: rgba(255, 248, 225, .35); }

/* Chronik & Listen */
.log { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.log li { padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.log time { display: block; font-family: var(--heading); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Anmeldung
   -------------------------------------------------------------------------- */

body.gate-page .topbar { display: none; }
/* Landschaft hinter der Anmeldung; main bildet den Stapelkontext, damit der Seitenhintergrund sie nicht verdeckt. */
body.gate-page main { position: relative; z-index: 1; }
body.gate-page .site-footer { position: relative; z-index: 2; color: rgba(255, 226, 160, .7); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.gate-scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Hochformat: Burg und Mond oben sichtbar, Anmeldefenster darunter */
@media (max-aspect-ratio: 4/5) {
  body.gate-page .gate { margin-top: 34vh; }
  body.gate-page .gate-crest { margin-bottom: -40px; }
  body.gate-page .gate-crest svg { width: 84px; height: auto; }
  body.gate-page .gate .card { padding-top: 3rem; }
}
.gate { position: relative; }
.gate .card { box-shadow: inset 0 0 45px rgba(110, 70, 20, .35), inset 0 0 0 5px rgba(247, 236, 208, .35), 0 0 0 1px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .7); }
.gate-crest { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .8)) drop-shadow(0 0 22px rgba(255, 190, 90, .25)); }

@keyframes window-glow { 0%, 100% { opacity: 1; } 40% { opacity: .75; } 55% { opacity: .95; } 70% { opacity: .6; } }
@keyframes firefly {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(24px, -40px); opacity: .4; }
  80% { opacity: 1; }
  100% { transform: translate(-16px, -80px); opacity: 0; }
}
@keyframes shimmer { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: .9; transform: translateX(14px); } }
.gate-scene .twinkle { animation: twinkle 3.5s ease-in-out infinite; }
.gate-scene .shooting { animation: shooting 11s linear infinite; }
.gate-scene .cloud { animation: cloud 26s ease-in-out infinite alternate; }
.gate-scene .cloud-slow { animation-duration: 40s; animation-direction: alternate-reverse; }
.gate-scene .fog { animation: drift 18s ease-in-out infinite alternate; }
.gate-scene .fog-slow { animation-duration: 26s; animation-direction: alternate-reverse; }
.gate-scene .birds { animation: glide 16s ease-in-out infinite alternate; }
.gate-scene .window { animation: window-glow 4s ease-in-out infinite; }
.gate-scene .firefly { animation: firefly 8s ease-in-out infinite; filter: drop-shadow(0 0 4px #ffd75a); }
.gate-scene .shimmer { animation: shimmer 6s ease-in-out infinite; }
.gate-scene .castle-flag { transform-box: fill-box; transform-origin: 0 50%; animation: wave 2.4s ease-in-out infinite; }
.gate { max-width: 460px; margin: 4vh auto 0; text-align: center; }
.gate-crest { position: relative; z-index: 2; margin-bottom: -48px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }
.gate .card { padding-top: 3.6rem; text-align: left; }
.gate-title {
  text-align: center; font-family: var(--display); font-weight: 900; font-size: 2.4rem; margin-bottom: .2rem;
  background: linear-gradient(180deg, #a8322a, #5f120d); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gate-sub { text-align: center; font-style: italic; color: var(--ink-soft); margin-bottom: 1.2rem; }

/* --------------------------------------------------------------------------
   Kampflog
   -------------------------------------------------------------------------- */

.battles { display: grid; gap: .9rem; }
.battle {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.2rem; border-radius: 4px; text-decoration: none; color: var(--ink);
  background: var(--noise), linear-gradient(90deg, var(--parchment-light), var(--parchment));
  border: 1px solid #7a5a26; box-shadow: inset 0 0 30px rgba(110, 70, 20, .3), var(--shadow);
  transition: transform .12s ease;
}
.battle:hover { transform: translateY(-2px); color: var(--ink); }
.battle.active { border-left: 6px solid var(--blood); }
.battle.finished { opacity: .85; }
.battle-icon {
  width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  color: var(--gold-light); background: radial-gradient(circle at 35% 30%, #a8322a, #4d0d09); border: 2px solid var(--gold); border-radius: 50%;
}
.battle.finished .battle-icon { background: radial-gradient(circle at 35% 30%, #6b5a45, #2e2418); }
.battle-title { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-family: var(--heading); font-weight: 700; font-size: 1.15rem; }
.battle-sides { margin: .15rem 0; }
.side-heroes { font-weight: 600; color: var(--forest); }
.side-foes { font-weight: 600; color: var(--blood); }
.versus { margin: 0 .5rem; font-family: var(--heading); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.round-badge {
  font-family: var(--heading); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem;
  color: var(--ink); padding: .35rem .9rem; border-radius: 99px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); border: 1px solid var(--gold-dark);
}
.fighters { display: grid; gap: .55rem; }
.fighter { padding: .45rem .55rem .1rem; border-radius: 4px; background: rgba(255, 248, 225, .35); border: 1px solid rgba(110, 78, 38, .2); }
.fighter.down { opacity: .6; filter: grayscale(.6); }
.fighter-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.fighter-head .btn { margin-left: auto; }
.ini {
  min-width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-weight: 700; font-size: .85rem; color: var(--ink);
  position: relative; z-index: 0;
}
.ini::before {
  content: ""; position: absolute; inset: 3px; z-index: -1; transform: rotate(45deg);
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); border: 1px solid var(--gold-dark); border-radius: 3px;
}
.fighter .vial { margin-bottom: .35rem; }

.quick-dice { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.die-btn {
  font-family: var(--heading); font-weight: 700; font-size: .8rem; cursor: pointer;
  padding: .35rem .6rem; color: var(--ink); background: #fbf3dd; border: 1px solid #8a6a3a; border-radius: 6px;
  box-shadow: 0 2px 0 #8a6a3a;
}
.die-btn:hover { background: var(--gold-light); }
.die-btn:active { transform: translateY(2px); box-shadow: none; }

.battle-log { max-height: 640px; overflow-y: auto; padding-right: .3rem; }
.round-title {
  display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .5rem;
  font-size: .8rem; letter-spacing: .14em; color: var(--blood);
}
.round-title::before, .round-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(126, 26, 20, .5), transparent); }
.entries { list-style: none; margin: 0 0 .6rem; padding: 0; }
.entry { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.entry-icon {
  width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--ink-soft); background: rgba(212, 187, 133, .55); border: 1px solid rgba(110, 78, 38, .35);
}
.entry.damage .entry-icon { color: #fbe9c4; background: var(--blood); border-color: #4d0d09; }
.entry.heal .entry-icon { color: #f2f6e9; background: var(--forest); border-color: #1f4423; }
.entry.roll .entry-icon { color: var(--ink); background: #fbf3dd; }
.entry-body { flex: 1; padding-top: .15rem; }
.entry.system { justify-content: center; font-family: var(--heading); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.dmg { color: var(--blood); }
.heal { color: var(--forest); }
.dice-row { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; }
.die {
  min-width: 1.75rem; height: 1.75rem; padding: 0 .2rem; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-weight: 700; font-size: .9rem; color: var(--ink);
  background: linear-gradient(145deg, #fffaf0, #e6d4a8); border: 1px solid #8a6a3a; border-radius: 5px;
  box-shadow: 0 2px 0 #8a6a3a;
}
.die.crit { color: #4a3505; background: linear-gradient(145deg, #fff1b8, var(--gold)); border-color: var(--gold-dark); box-shadow: 0 0 8px rgba(201, 162, 39, .8), 0 2px 0 var(--gold-dark); }
.die.fumble { color: #fbe9c4; background: linear-gradient(145deg, #c2463c, #6a130d); border-color: #4d0d09; box-shadow: 0 2px 0 #4d0d09; }
.dice-row .mod, .dice-row .total { font-family: var(--heading); font-weight: 700; }

/* --------------------------------------------------------------------------
   Markt
   -------------------------------------------------------------------------- */

.wallet {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1rem; border-radius: 99px;
  color: var(--parchment-light); font-family: var(--heading); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--gold-dark);
}
.wallet .icon { color: var(--gold-light); font-size: 1.3rem; }
.wallet .coins { color: var(--gold-light); font-size: 1rem; text-transform: none; }

.wares { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .9rem; }
.ware {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .9rem 1rem; border-radius: 4px;
  background: rgba(255, 250, 235, .5); border: 1px solid rgba(110, 78, 38, .35);
  box-shadow: 0 2px 0 rgba(110, 78, 38, .25);
}
.ware.mine { border-style: dashed; }
.ware header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ware h3 { margin: 0; font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.ware .desc { margin: 0; }
.ware-meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); font-style: italic; }
.ware footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--line); }
.price .coins { font-size: 1.05rem; }
.price small { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Ranglisten
   -------------------------------------------------------------------------- */

.board { display: flex; flex-direction: column; }
.podium, .rest, .clan-ranking { list-style: none; margin: 0; padding: 0; }
.place {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem; margin-bottom: .45rem; border-radius: 4px;
  background: rgba(255, 250, 235, .45); border: 1px solid rgba(110, 78, 38, .25);
}
.place.me, .rest li.me { outline: 2px solid var(--gold); }
.place .who { flex: 1; min-width: 0; }
.place .who strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.place .who small { display: block; color: var(--ink-soft); font-size: .82rem; }
.value { font-family: var(--heading); font-weight: 700; white-space: nowrap; }
.medal {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-weight: 700; color: var(--ink);
  border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25);
  background: radial-gradient(circle at 35% 30%, #efe4cf, #a89a85);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 2px 3px rgba(0, 0, 0, .3);
}
.gold .medal, .medal.gold { background: radial-gradient(circle at 35% 30%, #fff1b8, #c9a227 60%, #7d5c12); }
.silver .medal, .medal.silver { background: radial-gradient(circle at 35% 30%, #ffffff, #b8bec7 60%, #6d747e); }
.bronze .medal, .medal.bronze { background: radial-gradient(circle at 35% 30%, #f5c9a0, #b06b32 60%, #6a3a14); }
.place.gold { background: linear-gradient(90deg, rgba(236, 210, 126, .55), rgba(255, 250, 235, .4)); }
.rest { counter-reset: rank 3; }
.rest li { counter-increment: rank; display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .6rem; border-bottom: 1px dashed var(--line); }
.rest li::before { content: counter(rank) "."; width: 1.8rem; font-family: var(--heading); color: var(--ink-soft); }
.rest li span:first-of-type { flex: 1; }
.clan-ranking li { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.clan-ranking a { flex: 1; }
.clan-ranking small { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Clans
   -------------------------------------------------------------------------- */

.clan-list { list-style: none; margin: 0; padding: 0; }
.clan-list li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.clan-link { flex: 1; display: flex; gap: .8rem; align-items: center; color: var(--ink); text-decoration: none; }
.clan-link:hover strong { color: var(--blood); }
.clan-link strong { font-family: var(--heading); font-size: 1.05rem; }
.motto { font-style: italic; }
.motto.small { font-size: .95rem; color: var(--ink-soft); }

.clan-form-grid { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.emblem-preview { width: 96px; display: flex; justify-content: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.picker legend { width: 100%; }
.pick { position: relative; cursor: pointer; display: inline-flex; padding: .25rem; border-radius: 6px; border: 2px solid transparent; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--blood); background: rgba(255, 250, 235, .6); }
.pick:has(input:focus-visible) { outline: 2px solid var(--gold); }
.swatch span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }

.members { list-style: none; margin: 0; padding: 0; }
.member { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.member.rank-leader strong { color: var(--blood); }
.posts { list-style: none; margin: 1rem 0 0; padding: 0; max-height: 520px; overflow-y: auto; }
.posts li {
  position: relative; padding: .7rem .9rem; margin-bottom: .6rem;
  background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .3); border-radius: 3px;
  box-shadow: 1px 2px 0 rgba(110, 78, 38, .2);
}
.posts li::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c2463c, #5f120d); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.posts p { margin: .2rem 0 0; }
.post-head { display: flex; justify-content: space-between; gap: .5rem; }
.post-head time { font-family: var(--heading); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Inventar: Ausrüstungsfigur & Gepäck
   -------------------------------------------------------------------------- */

.paperdoll {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) minmax(0, 1fr);
  grid-template-areas: "left center right" "bottom bottom bottom";
  gap: 1rem 1.4rem; align-items: start;
}
.doll-col { display: grid; gap: .6rem; }
.doll-col:first-child { grid-area: left; }
.doll-col:nth-child(3) { grid-area: right; }
.doll-center { grid-area: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding-top: .4rem; }
.doll-figure { width: 100%; max-width: 220px; height: auto; filter: drop-shadow(0 6px 10px rgba(60, 35, 10, .35)); }
.doll-name { font-family: var(--heading); font-weight: 700; font-size: 1.05rem; color: var(--blood); text-align: center; }
.doll-stats { display: flex; gap: .5rem; }
.doll-stats div {
  min-width: 64px; padding: .35rem .5rem; text-align: center; border-radius: 4px;
  background: linear-gradient(180deg, #8e1f18, #5a100b); border: 1px solid var(--gold); color: #f8e7b6;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.doll-stats b { display: block; font-family: var(--heading); font-size: 1.15rem; line-height: 1.1; }
.doll-stats small { font-family: var(--heading); font-size: .62rem; letter-spacing: .12em; color: var(--gold-light); }
.doll-bottom { grid-area: bottom; display: grid; grid-template-columns: 2fr 3fr; gap: 1.4rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.doll-group h3 { margin: 0 0 .45rem; }
.doll-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }

.slot {
  position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: .55rem;
  align-items: center; min-height: 58px; padding: .45rem .6rem; border-radius: 5px;
  text-decoration: none; color: var(--ink);
}
.slot .slot-icon {
  grid-row: 1 / span 3; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 1.35rem;
}
.slot-label { font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.slot-item { font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }
.slot-stats { font-family: var(--heading); font-size: .66rem; letter-spacing: .04em; color: var(--blood); }
.slot.empty { background: rgba(110, 78, 38, .08); border: 1px dashed rgba(110, 78, 38, .45); }
.slot.empty .slot-icon { color: rgba(94, 69, 41, .45); background: rgba(110, 78, 38, .08); }
.slot.empty .slot-item { font-weight: 400; font-style: italic; color: rgba(94, 69, 41, .6); }
.slot.empty:hover { background: rgba(201, 162, 39, .15); border-color: var(--gold-dark); }
.slot.filled {
  padding-right: 1.9rem;
  background: linear-gradient(180deg, rgba(255, 250, 235, .85), rgba(236, 220, 180, .85));
  border: 1px solid var(--gold-dark); box-shadow: 0 2px 0 rgba(110, 78, 38, .3), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.slot.filled .slot-icon { color: #f8e7b6; background: radial-gradient(circle at 35% 30%, #b0392f, #5a100b); border: 1px solid var(--gold); }
.slot-off {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  font-size: .7rem; line-height: 1; color: var(--blood); background: rgba(255, 248, 225, .8); border: 1px solid rgba(126, 26, 20, .4);
  opacity: .55; transition: opacity .15s ease;
}
.slot:hover .slot-off, .slot-off:focus-visible { opacity: 1; }
.slot-off:hover { background: var(--blood); color: #fbe9c4; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chips a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 99px;
  font-family: var(--heading); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; background: rgba(255, 248, 225, .45); border: 1px solid rgba(110, 78, 38, .35);
}
.chips a small { font-family: var(--body); font-size: .8rem; letter-spacing: 0; padding: 0 .35rem; border-radius: 99px; background: rgba(110, 78, 38, .15); }
.chips a:hover { color: var(--blood); border-color: var(--gold-dark); }
.chips a.active { color: #f8e7b6; background: linear-gradient(180deg, #a8322a, #7e1a14); border-color: var(--gold); }
.chips a.active small { background: rgba(0, 0, 0, .25); }

.bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: .9rem; }
.bag-item {
  display: flex; flex-direction: column; gap: .3rem; padding: .85rem .95rem; border-radius: 5px;
  background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .35); box-shadow: 0 2px 0 rgba(110, 78, 38, .25);
}
.bag-item header { display: flex; gap: .65rem; align-items: flex-start; }
.bag-icon {
  width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  color: var(--gold-light); background: radial-gradient(circle at 35% 30%, #4a3420, #1c120a); border: 1px solid var(--gold-dark); border-radius: 6px;
}
.bag-title { flex: 1; min-width: 0; }
.bag-title h3 { margin: 0 0 .2rem; font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.bag-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.qty { font-family: var(--heading); font-weight: 700; font-size: 1.05rem; color: var(--blood); }
.bag-item .desc { margin: 0; }
.bag-meta { font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.bag-item footer { margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--line); }

.worn { list-style: none; margin: 0; padding: 0; }
.worn li { display: grid; grid-template-columns: 30px 88px 1fr; align-items: center; gap: .1rem .5rem; padding: .32rem 0; border-bottom: 1px dashed var(--line); }
.worn-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 5px; color: #f8e7b6; background: radial-gradient(circle at 35% 30%, #b0392f, #5a100b); }
.worn-slot { font-family: var(--heading); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.worn small { grid-column: 3; color: var(--blood); font-family: var(--heading); font-size: .66rem; }

@media (max-width: 860px) {
  .paperdoll { grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "left right" "bottom bottom"; }
}
@media (max-width: 600px) {
  .paperdoll { grid-template-columns: 1fr; grid-template-areas: "center" "left" "right" "bottom"; gap: .6rem; }
  .doll-row { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .doll-figure { max-width: 150px; }
  .doll-bottom { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Heldenbild, Proben, Steigern, Traglast
   -------------------------------------------------------------------------- */

.portrait {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 35% 30%, #5a3a22, #1c120a);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .45);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-initial { font-family: var(--display); font-weight: 900; color: var(--gold-light); line-height: 1; }
.portrait-sm { width: 28px; height: 28px; border-width: 1px; }
.portrait-sm .portrait-initial { font-size: .85rem; }
.portrait-md { width: 44px; height: 44px; }
.portrait-md .portrait-initial { font-size: 1.2rem; }
.portrait-lg { width: 92px; height: 92px; border-width: 3px; }
.portrait-lg .portrait-initial { font-size: 2.6rem; }
.portrait-xl { width: 160px; height: 160px; border-width: 4px; }
.portrait-xl .portrait-initial { font-size: 4rem; }
.portrait-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.portrait-edit {
  position: absolute; right: 2px; bottom: 2px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--gold)); border: 1px solid var(--gold-dark);
}
.portrait-btn:hover .portrait { box-shadow: 0 0 0 3px var(--gold-light), 0 4px 14px rgba(0, 0, 0, .55); }
.portrait-preview { display: flex; justify-content: center; margin-bottom: 1rem; }
.hero-banner .titles { margin: .35rem 0 0; display: flex; gap: .35rem; flex-wrap: wrap; }

.attr-wrap { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
button.attr { border: 0; font: inherit; cursor: pointer; width: 100%; }
button.attr.rollable:hover { filter: drop-shadow(0 0 8px rgba(236, 210, 126, .8)) drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); transform: translateY(-1px); }
.raise-btn {
  padding: .1rem .35rem; border-radius: 3px; cursor: pointer; white-space: nowrap;
  font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: var(--forest); background: rgba(255, 250, 235, .7); border: 1px solid rgba(46, 99, 52, .55);
}
.raise-btn:hover:not(:disabled) { color: #f2f6e9; background: var(--forest); }
.raise-btn:disabled { opacity: .45; cursor: default; color: var(--ink-soft); border-color: var(--line); }
.ability-name { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.dice-btn {
  width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border-radius: 6px; color: var(--ink); background: #fbf3dd; border: 1px solid #8a6a3a; box-shadow: 0 2px 0 #8a6a3a;
}
.dice-btn:hover { background: var(--gold-light); }
.dice-btn:active { transform: translateY(2px); box-shadow: none; }

.load { margin: .2rem 0 .6rem; }
.load-track { height: 8px; margin-top: .2rem; border-radius: 99px; overflow: hidden; background: rgba(110, 78, 38, .2); border: 1px solid rgba(110, 78, 38, .35); }
.load-fill { height: 100%; background: linear-gradient(90deg, #7a8a3a, #b0943a); }
.load.over .load-fill { background: linear-gradient(90deg, #b0943a, var(--blood)); }
.load-warning { margin: .35rem 0 0; color: var(--blood); font-weight: 600; font-size: .95rem; }
.load-banner {
  margin: -.6rem 0 1.2rem; padding: .6rem .9rem; border-radius: 4px; color: #fbe9c4;
  background: linear-gradient(180deg, rgba(168, 50, 42, .9), rgba(95, 18, 13, .9)); border: 1px solid var(--gold);
}
.wallet.overloaded { border-color: var(--blood-light); box-shadow: 0 0 12px rgba(200, 60, 40, .5); }
.tag.effect-lep { color: #fbe9c4; background: var(--life); border-color: #6e0f0a; }
.tag.effect-asp { color: #eaf0ff; background: var(--mana); border-color: #172f61; }
.tag.effect-kap { color: #3a2a05; background: var(--karma); border-color: #6e520c; }

/* Dialog */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: 8vh 1rem 2rem; background: rgba(10, 6, 3, .72); backdrop-filter: blur(2px);
}
.dialog { width: 100%; max-width: 520px; animation: fate-in .25s ease-out both; }
.dialog-close {
  position: absolute; top: .8rem; right: .8rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: rgba(255, 250, 235, .6); border: 1px solid rgba(110, 78, 38, .4);
}
.probe-result { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); text-align: center; }
.probe-dice { display: flex; justify-content: center; gap: 1rem; }
.probe-die-wrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.probe-die-wrap small { font-family: var(--heading); font-size: .7rem; letter-spacing: .06em; color: var(--ink-soft); }
.die.big { min-width: 3rem; height: 3rem; font-size: 1.5rem; animation: die-roll .45s ease-out both; }
.die.over { background: linear-gradient(145deg, #f3d6c8, #d9a58f); }
@keyframes die-roll { from { transform: rotate(-200deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.probe-verdict { margin: .8rem 0 .2rem; font-family: var(--heading); font-weight: 700; font-size: 1.3rem; letter-spacing: .04em; }
.probe-verdict.ok { color: var(--forest); }
.probe-verdict.fail { color: var(--blood); }

/* --------------------------------------------------------------------------
   Abenteuer: Aufträge & Termine
   -------------------------------------------------------------------------- */

.quests, .sessions { display: grid; gap: .9rem; }
.quest {
  padding: .9rem 1rem; border-radius: 5px; background: rgba(255, 250, 235, .55);
  border: 1px solid rgba(110, 78, 38, .35); border-left: 5px solid var(--gold-dark); box-shadow: 0 2px 0 rgba(110, 78, 38, .2);
}
.quest.done { border-left-color: var(--forest); opacity: .85; }
.quest.cancelled { border-left-color: var(--blood); opacity: .6; }
.quest header { display: flex; gap: .7rem; align-items: center; margin-bottom: .4rem; }
.quest header h3 { margin: 0 0 .15rem; color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: 1.05rem; }
.quest-seal {
  width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; border-radius: 50%;
  color: #f8e7b6; background: radial-gradient(circle at 35% 30%, #b0392f, #5a100b); border: 1px solid var(--gold);
}
.chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0; }
.chips-label { font-family: var(--heading); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.chip { padding: .1rem .55rem; border-radius: 99px; font-size: .88rem; font-weight: 600; background: rgba(212, 187, 133, .55); border: 1px solid rgba(110, 78, 38, .3); }
.chip.ap { color: var(--forest); }
.chip.gold { color: #6a4c0c; background: linear-gradient(180deg, #fff1b8, #ecd27e); }
.chip.season { color: #3b2a6e; }
.chip.guild { color: var(--mana); }
.chip.faction { color: var(--blood); }
.quest-heroes { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .4rem 0; }
.quest-hero { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; }
.with-portrait { display: inline-flex; align-items: center; gap: .5rem; }

.hero-picker { margin-bottom: 1rem; }
.hero-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .35rem; margin-top: .5rem; }
.pick-hero {
  display: flex; align-items: center; gap: .45rem; padding: .3rem .5rem; border-radius: 5px; cursor: pointer;
  background: rgba(255, 250, 235, .45); border: 1px solid rgba(110, 78, 38, .25);
}
.pick-hero:has(input:checked) { background: rgba(236, 210, 126, .55); border-color: var(--gold-dark); }

.calendar { user-select: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.cal-head h3 { margin: 0; text-transform: capitalize; color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-family: var(--heading); font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); padding-bottom: .2rem; }
.cal-day {
  min-height: 68px; padding: .2rem .25rem; border-radius: 4px; overflow: hidden;
  background: rgba(255, 250, 235, .45); border: 1px solid rgba(110, 78, 38, .18);
}
.cal-day.other { opacity: .45; }
.cal-day.today { border-color: var(--gold-dark); box-shadow: inset 0 0 0 1px var(--gold); }
.cal-day.has { background: rgba(236, 210, 126, .45); }
.cal-num { font-family: var(--heading); font-size: .78rem; font-weight: 700; }
.cal-event {
  display: block; width: 100%; margin-top: .15rem; padding: .05rem .25rem; border-radius: 3px; cursor: pointer; text-align: left;
  font: inherit; font-size: .72rem; line-height: 1.25; color: #f8e7b6; background: var(--blood); border: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event.cancelled { background: #6b6f76; text-decoration: line-through; }
.session { display: flex; gap: .9rem; padding: .8rem .9rem; border-radius: 5px; background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .3); }
.session.cancelled { opacity: .65; }
.session-date {
  width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; padding: .35rem 0; border-radius: 5px;
  color: #f8e7b6; background: linear-gradient(180deg, #a8322a, #5f120d); border: 1px solid var(--gold);
}
.sd-day { font-family: var(--heading); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.sd-month { font-family: var(--heading); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.sd-time { margin-top: .2rem; font-size: .8rem; color: var(--gold-light); }
.session-body { flex: 1; min-width: 0; }
.session-body h3 { margin: 0 0 .1rem; color: var(--ink); text-transform: none; letter-spacing: .02em; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.rsvp-lists > div { margin: .3rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.rsvp { display: grid; gap: .4rem; margin: .6rem 0 .3rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.btn.rsvp-yes.chosen { background: linear-gradient(180deg, #3f7f45, #2e6334); border-color: #1f4423; }
.btn.rsvp-maybe.chosen { color: #4a3505; text-shadow: none; background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: var(--gold-dark); }
.sessions.past .session { opacity: .7; }

.creatures { display: grid; gap: .7rem; }
.creature { padding: .7rem .8rem; border-radius: 5px; background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .3); }
.creature header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.creature h3 { margin: 0; flex: 1; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.creature-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #f1e7d6; background: radial-gradient(circle at 35% 30%, #4b4f56, #17181b); }
.log.protocol { max-height: none; }

/* --------------------------------------------------------------------------
   Glocke, Briefe, Tauschhandel, Clankasse
   -------------------------------------------------------------------------- */

.userbox { position: relative; }
.userbox a, .userbox button { position: relative; }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: .7rem; font-weight: 700; color: #fff; background: var(--blood-light);
  border: 1px solid #fbe9c4; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: min(380px, calc(100vw - 2rem));
  max-height: 70vh; overflow-y: auto; padding: .9rem 1rem; border-radius: 6px; color: var(--ink);
  background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment));
  border: 1px solid var(--gold-dark); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.notif-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; font-family: var(--heading); }
.notif-panel ul { list-style: none; margin: 0; padding: 0; }
.notif-panel li { padding: .45rem .4rem; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.notif-panel li.unread { background: rgba(236, 210, 126, .35); border-left: 3px solid var(--blood); }
.notif-panel time { display: block; font-family: var(--heading); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.notif-all { display: block; margin-top: .5rem; text-align: center; font-family: var(--heading); font-size: .75rem; }
.userbox .notif-panel a {
  width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: inline; color: var(--blood); text-decoration: underline; text-underline-offset: 2px;
}
.userbox .notif-panel a:hover { background: none; color: var(--blood-light); }
.userbox .notif-panel .notif-head a { padding: .15rem .55rem; border: 1px solid var(--blood); border-radius: 99px; font-size: .72rem; text-decoration: none; white-space: nowrap; }
.userbox .notif-panel a.notif-all { display: block; }

.narrow-page.wide { max-width: 760px; }
.letters { list-style: none; margin: .6rem 0 0; padding: 0; }
.letter { border-bottom: 1px dashed var(--line); }
.letter-head {
  width: 100%; display: flex; align-items: center; gap: .7rem; padding: .6rem .3rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: none; border: 0;
}
li.letter > .letter-head:hover { background: rgba(255, 250, 235, .45); }
.letter-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.letter-meta small { color: var(--ink-soft); }
.letter time { font-family: var(--heading); font-size: .66rem; letter-spacing: .05em; color: var(--ink-soft); white-space: nowrap; }
.letter.unread .letter-meta strong { color: var(--blood); }
.letter.unread .seal { background: radial-gradient(circle at 35% 30%, #c2463c, #5f120d); color: #fbe9c4; }
.letter .seal {
  width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--ink-soft); background: rgba(212, 187, 133, .6); border: 1px solid rgba(110, 78, 38, .35);
}
.letter.broadcast .seal { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--ink); }
.letter-body { padding: .2rem .4rem .8rem 3rem; }
ul.letters > li.read:not(:has(> .letter-head)) { padding: .6rem .3rem; }
.broadcast { margin-bottom: .8rem; }
.recipients { margin-bottom: .8rem; }

.trade-list { list-style: none; margin: 0; padding: 0; }
.trade-list a { display: flex; align-items: center; gap: .6rem; padding: .55rem .3rem; border-bottom: 1px dashed var(--line); color: var(--ink); text-decoration: none; }
.trade-list a:hover { background: rgba(255, 250, 235, .45); }
.trade-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.trade-head h2 { margin: 0; }
.trade-table { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; margin: 1rem 0; }
.trade-side { padding: .8rem 1rem; border-radius: 6px; background: rgba(255, 250, 235, .55); border: 2px dashed rgba(110, 78, 38, .4); }
.trade-side.agreed { border-style: solid; border-color: var(--forest); box-shadow: 0 0 14px rgba(46, 99, 52, .3); }
.trade-side h3 { margin: 0 0 .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.trade-items { list-style: none; margin: 0 0 .5rem; padding: 0; }
.trade-items li { padding: .2rem 0; display: flex; gap: .3rem; align-items: center; }
.trade-gold .coins { font-size: 1.2rem; }
.trade-swap { display: flex; align-items: center; font-size: 2rem; color: var(--gold-dark); }
@media (max-width: 640px) { .trade-table { grid-template-columns: 1fr; } .trade-swap { justify-content: center; transform: rotate(90deg); } }

.clan-bank .bank-gold { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; margin-bottom: .6rem; border-radius: 4px; background: rgba(0, 0, 0, .25); border: 1px solid #6b6f76; }
.clan-bank .bank-gold span:first-child { font-family: var(--heading); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #9aa0a8; }
.clan-bank .bank-gold .coins { color: var(--gold-light); font-size: 1.3rem; }
.clan-bank h3 { color: var(--gold-light); }
.clan-bank label > span { color: #b8bec7; }
.clan-bank .hint, .vault-empty { color: #b8bec7; }
.bank-items { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bank-items li { padding: .2rem .6rem; border-radius: 4px; background: rgba(255, 255, 255, .08); border: 1px solid #6b6f76; color: #f3ede0; }

/* --------------------------------------------------------------------------
   Season, Gilden, Fraktionen, Klagen
   -------------------------------------------------------------------------- */

.soon.scene-header { min-height: 340px; margin-bottom: 1.2rem; padding: 2.2rem 1.5rem; }
.season-stats { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.season-stats div {
  min-width: 120px; padding: .5rem .9rem; border-radius: 5px; text-align: center;
  background: rgba(10, 6, 4, .6); border: 1px solid rgba(201, 162, 39, .55);
}
.season-stats b { display: block; font-family: var(--heading); font-size: 1.3rem; color: var(--gold-light); }
.season-stats small { color: #d8c8b8; font-size: .8rem; }
.goals { list-style: none; margin: 0; padding: 0; }
.goals li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.goal-check {
  width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid rgba(110, 78, 38, .45); color: #f2f6e9; font-weight: 700;
}
.goals li.done .goal-check { background: var(--forest); border-color: #1f4423; }
.goal-body { flex: 1; min-width: 0; }
.goal-points { font-family: var(--heading); font-weight: 700; color: #3b2a6e; white-space: nowrap; }
.season-ranking, .past-seasons { list-style: none; margin: 0; padding: 0; }
.season-ranking li { display: flex; align-items: center; gap: .6rem; padding: .45rem .4rem; border-bottom: 1px dashed var(--line); }
.season-ranking li.me { outline: 2px solid var(--gold); border-radius: 4px; }
.season-ranking .who { flex: 1; min-width: 0; }
.season-ranking .medal { width: 30px; height: 30px; }
.season-ranking .place-1 .medal { background: radial-gradient(circle at 35% 30%, #fff1b8, #c9a227 60%, #7d5c12); }
.season-ranking .place-2 .medal { background: radial-gradient(circle at 35% 30%, #ffffff, #b8bec7 60%, #6d747e); }
.season-ranking .place-3 .medal { background: radial-gradient(circle at 35% 30%, #f5c9a0, #b06b32 60%, #6a3a14); }
.past-seasons li { padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.winners { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .35rem; }
.winner { display: inline-flex; align-items: center; gap: .35rem; }
.winner .medal { width: 24px; height: 24px; font-size: .75rem; }
.winner.place-1 .medal { background: radial-gradient(circle at 35% 30%, #fff1b8, #c9a227 60%, #7d5c12); }

.org header { display: flex; gap: .8rem; align-items: center; margin-bottom: .5rem; }
.org header h3 { margin: 0; color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: 1.15rem; }
.org.mine { box-shadow: 0 0 0 2px var(--gold); border-radius: 6px; padding: .3rem; }
.org-members { list-style: none; margin: .4rem 0; padding: 0; }
.org-members li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.org-members small { color: var(--ink-soft); }
.org-members .actions { margin-left: auto; }
.rank-progress { margin-bottom: .4rem; }

.factions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
.faction {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.1rem 1rem; text-align: center; border-radius: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--faction) 22%, transparent), rgba(255, 250, 235, .5));
  border: 2px solid color-mix(in srgb, var(--faction) 60%, transparent);
}
.faction.mine { box-shadow: 0 0 0 3px var(--gold), 0 0 22px color-mix(in srgb, var(--faction) 50%, transparent); }
.faction h3 { margin: 0; font-size: 1.2rem; color: var(--ink); text-transform: none; }
.faction-stats { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; font-size: .9rem; color: var(--ink-soft); }
.faction-stats b { font-family: var(--heading); color: var(--ink); }
.faction .quest-heroes { justify-content: center; }
.territories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .9rem; }
.territory {
  padding: .8rem .9rem; border-radius: 5px; background: rgba(255, 250, 235, .55);
  border: 1px solid rgba(110, 78, 38, .35); border-top: 5px solid var(--faction, #8a7a62);
}
.territory.contested { border-top-color: var(--blood); background-image: repeating-linear-gradient(135deg, rgba(126, 26, 20, .06) 0 8px, transparent 8px 16px); }
.territory header { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.territory header h3 { margin: 0; flex: 1; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.influence-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; margin: .5rem 0 .3rem; background: rgba(110, 78, 38, .18); border: 1px solid rgba(110, 78, 38, .35); }
.influence-bar span { display: block; height: 100%; }
.influence-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .85rem; color: var(--ink-soft); }
.influence-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; vertical-align: 0; }

.complaints { display: grid; gap: 1rem; }
.complaint { padding: .9rem 1rem; border-radius: 5px; background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .35); border-left: 5px solid var(--gold-dark); }
.complaint.guilty { border-left-color: var(--blood); }
.complaint.dismissed { border-left-color: #8a7a62; opacity: .85; }
.complaint header { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.complaint header > div { flex: 1; min-width: 200px; }
.complaint header h3 { margin: 0; color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: 1.02rem; }
.statement { margin: .5rem 0; padding: .5rem .8rem; border-left: 3px solid rgba(110, 78, 38, .45); background: rgba(255, 255, 255, .35); font-style: italic; white-space: pre-wrap; }
.statement small, .verdict small { display: block; font-style: normal; font-family: var(--heading); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.statement.defense { border-left-color: var(--mana); }
.verdict { margin: .6rem 0; padding: .6rem .8rem; border-radius: 4px; background: rgba(126, 26, 20, .08); border: 1px solid rgba(126, 26, 20, .35); }
.verdict p { margin: .2rem 0; }
.verdict-form { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--line); }

/* Gericht: drei Gerichtshöfe (aufsteigende Instanz) mit Richterbank, dazu die Klageschrift */
.court-supreme { --ct: #7e1a14; --ct-deep: #2a0907; --ct-hi: #e2bf63; --ct-soft: rgba(226, 191, 99, .25); }
.court-international { --ct: #1d4a8a; --ct-deep: #0a1830; --ct-hi: #d6e2f3; --ct-soft: rgba(200, 220, 245, .22); }
.court-admin { --ct: #0f5470; --ct-deep: #061b26; --ct-hi: #bfe6ff; --ct-soft: rgba(191, 230, 255, .22); }
.court-rail { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 1.2rem; padding: 0; counter-reset: none; }
.court-rail li { position: relative; }
.court-rail li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 28px; height: 2px; background: var(--gold-dark); z-index: 1; }
.court-rail li + li::after { content: ""; position: absolute; left: 8px; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid var(--gold-dark); z-index: 1; }
.court-rail a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; margin: 0 14px 0 0; padding: .55rem .8rem; border-radius: 6px; text-decoration: none; color: #e9dcc0; background: rgba(20, 12, 6, .55); border: 1px solid rgba(201, 162, 39, .35); }
.court-rail li:last-child a { margin-right: 0; }
.court-rail b { grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-family: var(--heading); color: #2b1c0f; background: linear-gradient(180deg, #f3d67a, #a87f22); }
.court-rail span { font-family: var(--heading); font-weight: 700; font-size: .85rem; letter-spacing: .04em; line-height: 1.15; }
.court-rail small { font-size: .78rem; color: #bfae8c; font-style: italic; }
.court-rail li.active a { background: linear-gradient(180deg, var(--ct), var(--ct-deep)); border-color: var(--ct-hi); color: #fff; box-shadow: 0 0 0 1px var(--ct-soft), 0 4px 14px rgba(0, 0, 0, .4); }
.court-rail li.active small { color: var(--ct-hi); }
@media (max-width: 640px) { .court-rail { display: none; } }
.court-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; margin-bottom: 1.2rem; padding: 1.3rem 1.5rem; border-radius: 6px; color: #f1e7d0;
  background: radial-gradient(ellipse at 15% 50%, color-mix(in srgb, var(--ct) 70%, transparent), transparent 60%), linear-gradient(180deg, var(--ct-deep), #0d0805);
  border: 2px solid #6b4e1f; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 0 0 5px var(--ct-soft), 0 6px 20px rgba(0, 0, 0, .45); }
.court-seal { width: 112px; height: 112px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.court-kicker { margin: 0; font-family: var(--heading); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ct-hi); }
.court-hero h2 { margin: .1rem 0 .2rem; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); color: #fff6dc; letter-spacing: .03em; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.court-motto { margin: 0 0 .5rem; font-style: italic; color: var(--ct-hi); }
.court-hero-text > p:last-child { margin: 0; line-height: 1.5; max-width: 62ch; }
.court-stats { display: grid; gap: .5rem; margin: 0; }
.court-stats div { min-width: 7.5rem; padding: .35rem .7rem; text-align: center; border-radius: 5px; background: rgba(0, 0, 0, .3); border: 1px solid var(--ct-soft); }
.court-stats dt { font-family: var(--heading); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #bfae8c; }
.court-stats dd { margin: 0; font-family: var(--heading); font-weight: 700; font-size: 1.35rem; color: #fff6dc; }
@media (max-width: 820px) {
  .court-hero { grid-template-columns: auto minmax(0, 1fr); }
  .court-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .court-stats div { min-width: 0; }
}
@media (max-width: 520px) { .court-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .court-seal { width: 88px; height: 88px; } }
/* Richterbank im Halbrund */
.court-bench-wrap { margin-bottom: 1.2rem; padding: 1.2rem 1rem 1.6rem; border-radius: 6px; text-align: center; color: #efe3c6;
  background: radial-gradient(ellipse at 50% 0%, var(--ct-soft), transparent 65%), linear-gradient(180deg, #24160c, #120a05);
  border: 2px solid #6b4e1f; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .45); }
.court-sub { margin: 0; font-family: var(--heading); font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-hi); }
.court-lead { margin: .25rem 0 1rem; font-size: .98rem; color: #cdbd99; }
.court-lead b { color: #fff3d0; font-weight: 600; }
.bench { position: relative; list-style: none; display: flex; justify-content: center; align-items: flex-start; gap: .25rem; margin: 0; padding: 0 0 1.6rem; }
.bench::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 18px; border-radius: 50% 50% 6px 6px / 100% 100% 6px 6px; background: linear-gradient(180deg, #6a4322, #3a220f); border-top: 2px solid var(--ct-hi); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.bench-seat { flex: 1 1 0; max-width: 130px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; margin-top: calc(var(--d, 0) * 14px); }
.bench-medal { position: relative; display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: .35rem; border-radius: 50%; font-family: var(--heading); font-weight: 700; font-size: 1.15rem; color: #fff8e6;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 45% 46%), hsl(var(--hue) 50% 20%)); border: 3px solid hsl(var(--hue) 55% 62%); box-shadow: 0 0 0 2px #1a0f07, 0 4px 10px rgba(0, 0, 0, .5); }
.bench-seat.deputy .bench-medal { width: 72px; height: 72px; border-color: var(--ct-hi); }
.bench-medal.has-crest { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--crest) 55%, #2a1a0c), #120a05 75%); border-color: color-mix(in srgb, var(--crest) 50%, #c9a227); isolation: isolate; }
.bench-medal.has-crest .emblem { display: block; margin-top: 3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.bench-seat.chair .bench-medal.has-crest, .bench-seat.deputy .bench-medal.has-crest { border-color: var(--ct-hi); }
.bench-medal .clan-lvl { position: absolute; left: -6px; bottom: -4px; }
.bench-medal.fx-glanz .emblem { filter: drop-shadow(0 0 5px rgba(255, 215, 110, .85)); }
.bench-medal.fx-aura::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(140, 200, 255, .5), transparent 70%); animation: fx-pulse 2.4s ease-in-out infinite; z-index: -1; }
.bench-medal.fx-flammen::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -10%; height: 40%; border-radius: 50% 50% 20% 20%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 30, .8), rgba(255, 60, 20, .35) 45%, transparent 70%); filter: blur(2px); animation: fx-flame 1.2s ease-in-out infinite alternate; z-index: -1; }
@media (prefers-reduced-motion: reduce) { .bench-medal::before, .bench-medal::after { animation: none !important; } }
.bench-laurel { position: absolute; left: -24%; right: -24%; bottom: -16%; height: 82%; z-index: -1; pointer-events: none; background: center bottom / 100% auto no-repeat; }
.bench-laurel.lorbeer_gold { background-image: var(--laurel-gold); filter: drop-shadow(0 0 5px rgba(255, 215, 110, .5)); }
.bench-laurel.lorbeer_silber { background-image: var(--laurel-silber); }
.bench-laurel.lorbeer_bronze { background-image: var(--laurel-bronze); }
.bench-crown { position: absolute; top: -.95em; left: 50%; transform: translateX(-50%); font-size: 1.05rem; line-height: 1; color: #ffd36b; text-shadow: 0 0 8px rgba(255, 211, 107, .9); }
.bench-seat.chair .bench-crown { font-size: 1.35rem; top: -1.05em; }
.bench-seat.has-crest .bench-clan { color: color-mix(in srgb, var(--crest) 35%, #e6eefc); }
.bench-name.gold-name { background: linear-gradient(180deg, #fff3c4, #e3b23c 55%, #b07f1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bench-medal.fx-wehend .emblem { transform-origin: 50% 0; animation: fx-wave 3.2s ease-in-out infinite; }
.bench-medal.fx-nebel { box-shadow: 0 0 0 2px #1a0f07, 0 0 18px rgba(120, 80, 170, .55); }
.bench-seat.chair .bench-medal { width: 88px; height: 88px; font-size: 1.5rem; border: 4px solid var(--ct-hi); box-shadow: 0 0 0 2px #1a0f07, 0 0 22px var(--ct-soft), 0 0 34px color-mix(in srgb, var(--ct-hi) 35%, transparent); }
.bench-gavel { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #f3d67a, #a87f22); border: 2px solid #1a0f07; color: #2b1c0f; }
.bench-gavel .icon { width: 16px; height: 16px; }
.bench-name { font-family: var(--heading); font-size: .8rem; letter-spacing: 0; color: #fff3d0; white-space: nowrap; line-height: 1.15; }
.bench-seat.chair .bench-name { font-size: 1rem; color: var(--ct-hi); }
.bench-clan { font-family: var(--heading); font-size: .74rem; font-weight: 700; color: hsl(var(--hue) 60% 70%); }
.bench-role { font-size: .74rem; font-style: italic; color: #bfae8c; line-height: 1.2; }
.bench-seat.chair .bench-role, .bench-seat.deputy .bench-role { color: var(--ct-hi); font-style: normal; font-family: var(--heading); letter-spacing: .03em; }
.bench-post { font-size: .7rem; color: #9fb7c6; }
@media (max-width: 900px) {
  .bench { flex-wrap: wrap; gap: 1rem .4rem; }
  .bench-seat { flex: 0 0 calc(25% - .4rem); margin-top: 0; }
  .bench-seat.chair { order: -2; flex-basis: 100%; }
  .bench-seat.deputy { order: -1; flex-basis: 100%; }
}
@media (max-width: 520px) { .bench-seat { flex-basis: calc(33.3% - .4rem); } }
.bench-worlds { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; margin-top: .2rem; }
.world-chip { padding: .05rem .4rem; border-radius: 999px; font-family: var(--heading); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.world-chip.legal { color: #cfe6ff; background: rgba(40, 90, 160, .35); border-color: rgba(150, 200, 255, .55); }
.world-chip.forbidden { color: #ffd0c8; background: rgba(140, 20, 20, .45); border-color: rgba(255, 120, 100, .6); }
.court-worlds { margin-bottom: 1.2rem; padding: 1.1rem 1rem 1.2rem; border-radius: 6px; text-align: center; color: #efe3c6;
  background: radial-gradient(ellipse at 50% 0%, var(--ct-soft), transparent 65%), linear-gradient(180deg, #1a1410, #0d0907);
  border: 2px solid #6b4e1f; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .45); }
.world-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; text-align: left; }
.world-group h4 { margin: 0 0 .5rem; font-family: var(--heading); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.world-group.legal h4 { color: #a9d0ff; }
.world-group.forbidden h4 { color: #ff9b8a; }
.world-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.world-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; padding: .5rem .6rem; border-radius: 6px; border: 1px solid; }
.world-tile.legal { background: linear-gradient(180deg, rgba(40, 80, 150, .35), rgba(15, 30, 60, .5)); border-color: rgba(150, 200, 255, .4); }
.world-tile.forbidden { background: linear-gradient(180deg, rgba(120, 15, 15, .45), rgba(40, 5, 5, .6)); border-color: rgba(255, 120, 100, .45); }
.world-tile.unknown { background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .25); color: #a99f8c; }
.world-sigil { grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: 1rem; }
.world-tile.legal .world-sigil { color: #0b1a33; background: radial-gradient(circle at 35% 30%, #e4f1ff, #6fa6e0); box-shadow: 0 0 10px rgba(120, 180, 255, .5); }
.world-tile.forbidden .world-sigil { color: #2a0505; background: radial-gradient(circle at 35% 30%, #ffb3a6, #b0261a); box-shadow: 0 0 10px rgba(255, 80, 60, .55); }
.world-tile.unknown .world-sigil { color: #cbbfa8; border: 1px dashed rgba(255, 255, 255, .35); }
.world-tile strong { font-family: var(--heading); font-size: .9rem; letter-spacing: .04em; color: #fff3d0; }
.world-tile small { font-size: .74rem; color: #cbbfa8; line-height: 1.2; }
.court-rulings { margin-top: 1.2rem; padding: 1.1rem 1rem 1.2rem; border-radius: 6px; text-align: center; color: #efe3c6;
  background: radial-gradient(ellipse at 50% 0%, var(--ct-soft), transparent 65%), linear-gradient(180deg, #1a1410, #0d0907);
  border: 2px solid #6b4e1f; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .45); }
.ruling-row { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: .9rem; margin: 0; padding: .6rem .2rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; text-align: left; }
.ruling-row:focus-visible { outline: 2px solid var(--ct-hi); outline-offset: 2px; }
.ruling { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem .8rem; scroll-snap-align: start; color: var(--ink); border-radius: 4px;
  background: var(--noise), radial-gradient(ellipse at 50% 30%, var(--parchment-light), var(--parchment) 60%, var(--parchment-dark));
  border: 1px solid #7a5a26; border-top: 4px solid var(--ct); box-shadow: inset 0 0 25px rgba(110, 70, 20, .3), 0 4px 12px rgba(0, 0, 0, .45); }
.ruling header { display: flex; justify-content: space-between; align-items: center; }
.ruling-seal { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #f8e7b6; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ct) 70%, #fff), var(--ct-deep)); border: 2px solid var(--gold); }
.ruling-seal .icon { width: 1rem; height: 1rem; }
.ruling-stamp { padding: .1rem .55rem; font-family: var(--heading); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; border: 2px solid; border-radius: 3px; transform: rotate(-4deg); }
.ruling.guilty .ruling-stamp { color: #9b1c14; border-color: #9b1c14; }
.ruling.granted .ruling-stamp { color: #8a6a1c; border-color: #b8891b; }
.ruling.dismissed .ruling-stamp { color: #5e5446; border-color: #8a7a62; }
.ruling h4 { margin: .2rem 0 0; font-family: var(--heading); font-size: 1rem; letter-spacing: .02em; color: var(--ink); }
.ruling-parties { margin: 0; font-weight: 600; font-size: .92rem; }
.ruling-kind { margin: 0; font-size: .78rem; color: var(--ink-soft); }
.ruling blockquote { margin: .3rem 0; padding: .35rem .6rem; border-left: 3px solid var(--ct); background: rgba(255, 255, 255, .35); font-style: italic; font-size: .92rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ruling footer { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin-top: auto; font-size: .76rem; color: var(--ink-soft); }
.ruling-gold { color: #7a5a10; font-weight: 600; }
.ruling-ban { color: #9b1c14; font-weight: 600; }
.ruling-note { padding: .05rem .45rem; border-radius: 999px; font-family: var(--heading); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #f8e7b6; }
.ruling-note.appealed { background: #1d4a8a; }
.ruling-note.final { background: #0f5470; }
.ruling-empty { margin: .5rem 0 0; font-style: italic; color: #bfae8c; }
.member.npc { background: linear-gradient(90deg, rgba(90, 70, 140, .08), transparent 60%); }
.member-npc { display: flex; gap: .6rem; align-items: center; }
.tag.npc-tag { color: #f1e9ff; background: #5a3d8a; border-color: #8f6cc8; }
.npc-mark { color: #6a4a9a; font-weight: 700; }
.gm-assign h3 { margin: .9rem 0 .4rem; font-size: .85rem; }
.gm-assign h3:first-child { margin-top: 0; }
.gm-assign-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.gm-assign-row select:first-child { flex: 1 1 200px; min-width: 0; }
.gm-new-npc .fields { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.slot-box { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.slot-box .hint { flex: 1 1 100%; margin: 0; }
.slot-input { width: 5.5rem; }
.court-duties { margin: 0; padding-left: 1.1rem; line-height: 1.6; }
.court-info .btn { margin-top: .3rem; }
/* Klageschrift */
.court-claims { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.court-claims.gm { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 980px) { .court-claims, .court-claims.gm { grid-template-columns: 1fr; } }
.claim-head { margin-bottom: 1rem; padding-bottom: .7rem; text-align: center; border-bottom: 1px solid var(--line); }
.claim-court { margin: 0; font-family: var(--heading); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blood); }
.claim-head h3 { margin: .15rem 0 .2rem; font-family: var(--display); font-size: 1.6rem; letter-spacing: .04em; text-transform: none; }
.claim-head .hint { margin: 0; }
.claim-step { margin: 0 0 1rem; padding: .8rem .9rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 250, 235, .35); }
.claim-step legend { display: flex; align-items: center; gap: .5rem; padding: 0 .4rem; font-family: var(--heading); font-weight: 700; font-size: .9rem; letter-spacing: .04em; color: var(--ink); }
.claim-step legend b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .85rem; color: #f8e7b6; background: linear-gradient(180deg, #a8322a, #7e1a14); border: 1px solid var(--gold); }
.claim-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.claim-type { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .4rem; font: inherit; font-size: .88rem; line-height: 1.15; text-align: center; color: var(--ink); cursor: pointer;
  background: rgba(255, 252, 240, .65); border: 1px solid var(--line); border-radius: 6px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.claim-type .icon { width: 1.5rem; height: 1.5rem; color: var(--ink-soft); }
.claim-type:hover { border-color: var(--gold-dark); transform: translateY(-1px); }
.claim-type.active { border: 2px solid var(--blood); background: linear-gradient(180deg, rgba(255, 245, 215, .95), rgba(240, 215, 160, .8)); box-shadow: 0 0 0 3px rgba(201, 162, 39, .25); font-weight: 600; }
.claim-type.active .icon { color: var(--blood); }
.claim-count { display: block; margin-top: -.5rem; margin-bottom: .6rem; text-align: right; color: var(--ink-soft); font-size: .78rem; }
.claim-oath { display: flex; gap: .6rem; align-items: flex-start; margin: .2rem 0 1rem; padding: .6rem .8rem; border-radius: 6px; background: rgba(126, 26, 20, .07); border: 1px dashed rgba(126, 26, 20, .4); font-style: italic; cursor: pointer; }
.claim-oath input { margin-top: .25rem; accent-color: var(--blood); }
.claim-oath span { font-family: inherit; font-size: .95rem; letter-spacing: normal; text-transform: none; color: var(--ink); }
.claim-submit { display: flex; justify-content: center; }
.claim-submit .btn { min-width: 60%; justify-content: center; }
/* Verfahren */
.case.court-supreme { border-left-color: #7e1a14; }
.case.court-international { border-left-color: #1d4a8a; }
.case.court-admin { border-left-color: #0f5470; }
.case-seal { display: grid; place-items: center; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: #f8e7b6; background: linear-gradient(180deg, var(--ct, #7e1a14), var(--ct-deep, #2a0907)); border: 2px solid var(--gold); }
.case-seal .icon { width: 1.15rem; height: 1.15rem; }
.case-court { margin: 0; font-family: var(--heading); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ct, var(--blood)); }
.statement.evidence { border-left-color: var(--gold-dark); }
.case-history { list-style: none; margin: .6rem 0; padding: 0 0 0 1rem; border-left: 2px dotted var(--line); }
.case-history li { position: relative; margin-bottom: .5rem; padding: .4rem .6rem; border-radius: 4px; background: rgba(0, 0, 0, .04); }
.case-history li::before { content: ""; position: absolute; left: calc(-1rem - 6px); top: .7rem; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-dark); }
.case-history small { font-family: var(--heading); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.case-history p { margin: .15rem 0; }
.case-appeal-note { font-style: italic; color: var(--ink-soft); font-size: .92rem; }
.case-final { display: inline-block; margin-top: .3rem !important; padding: .1rem .5rem; border-radius: 3px; font-family: var(--heading); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #f8e7b6; background: #0f5470; }
.case-appeal { margin-top: .6rem; padding: .5rem .7rem; border-radius: 5px; background: rgba(29, 74, 138, .07); border: 1px solid rgba(29, 74, 138, .3); }
.case-appeal summary { cursor: pointer; font-family: var(--heading); font-size: .82rem; letter-spacing: .04em; color: #1d4a8a; }
.case-appeal form { margin-top: .5rem; }
.case-form { margin-top: .5rem; }
.fate-facts.dark li { color: var(--ink); }

/* --------------------------------------------------------------------------
   Tresor
   -------------------------------------------------------------------------- */

.vault-card {
  background:
    var(--noise),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #3a3d43 0%, #24262b 100%);
  border-color: #121316;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .35), inset 0 0 0 6px rgba(201, 162, 39, .45), inset 0 0 40px rgba(0, 0, 0, .55), var(--shadow);
  color: #e6e1d6;
}
.vault-card::before, .vault-card::after {
  width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c7cbd2, #5b5f66 60%, #2a2c30);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.vault-card::before { top: 12px; left: 12px; }
.vault-card::after { bottom: 12px; right: 12px; transform: none; }
.vault-card > h2 { color: var(--gold-light); flex-direction: row; align-items: center; flex-wrap: wrap; }
.vault-card > h2::after { flex-basis: 100%; }
.vault-warning {
  display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; margin-bottom: 1rem; border-radius: 4px;
  color: #f1d9c9; background: rgba(126, 26, 20, .35); border: 1px solid rgba(201, 80, 60, .45);
}
.vault-warning .icon { font-size: 1.5rem; color: #e8806e; }
.vault-warning strong { color: var(--gold-light); }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .8rem; }
.vault-slot {
  position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto auto; column-gap: .6rem; align-items: center;
  min-height: 84px; padding: .65rem .7rem; border-radius: 6px;
  background: linear-gradient(180deg, #2b2e33, #1a1c20);
  border: 2px solid #6b6f76;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px #0d0e10, 0 2px 0 rgba(0, 0, 0, .4);
}
/* Nieten in den Ecken jedes Fachs */
.vault-slot::before, .vault-slot::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d3d7dd, #6b6f76); top: 5px;
}
.vault-slot::before { left: 5px; }
.vault-slot::after { right: 5px; }
.vault-lock {
  grid-row: 1 / span 3; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border-radius: 50%;
  color: var(--gold-light); background: radial-gradient(circle at 35% 30%, #4b4f56, #17181b); border: 2px solid var(--gold-dark);
}
.vault-label { font-family: var(--heading); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9aa0a8; }
.vault-item { font-weight: 600; color: #f3ede0; line-height: 1.2; }
.vault-item small { color: var(--gold-light); font-family: var(--heading); }
.vault-slot.empty { border-style: dashed; border-color: #4b4f56; }
.vault-slot.empty .vault-lock { color: #6b6f76; border-color: #3a3d43; }
.vault-slot.empty .vault-item { font-style: italic; font-weight: 400; color: #7d838b; }
.vault-slot.filled { border-color: var(--gold-dark); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px #0d0e10, 0 0 12px rgba(201, 162, 39, .25); }
.vault-out {
  justify-self: start; margin-top: .3rem; padding: .15rem .55rem; cursor: pointer; border-radius: 3px;
  font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #e6e1d6; background: rgba(255, 255, 255, .06); border: 1px solid #6b6f76;
}
.vault-out:hover { color: var(--ink); background: var(--gold-light); border-color: var(--gold); }
.btn.vault-btn {
  color: #e6e1d6; text-shadow: none;
  background: linear-gradient(180deg, #4b4f56, #24262b); border-color: #6b6f76;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 0 #0d0e10;
}
.btn.vault-btn:hover { color: var(--gold-light); border-color: var(--gold); }
.tag.vault { color: #e6e1d6; background: #3a3d43; border-color: #17181b; }
.tag.ban { color: #fbe9c4; background: #3a3d43; border-color: #17181b; }
.tag .icon { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   Einladungscodes
   -------------------------------------------------------------------------- */

.invite-fresh {
  margin: 1.1rem 0; padding: 1rem 1.2rem; text-align: center; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 250, 235, .85), rgba(236, 220, 180, .85));
  border: 2px dashed var(--gold-dark); box-shadow: 0 0 18px rgba(201, 162, 39, .3);
}
.invite-label { font-family: var(--heading); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.invite-code {
  display: inline-block; margin: .35rem 0 .6rem; padding: .15rem .6rem; border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; font-size: 2rem; letter-spacing: .14em;
  color: var(--blood); background: rgba(255, 255, 255, .55); border: 1px solid rgba(110, 78, 38, .35);
  user-select: all;
}
.invite-code.small { margin: 0; font-size: .95rem; letter-spacing: .08em; padding: .05rem .4rem; }
table.invites { margin-top: 1rem; }
.qr { display: flex; justify-content: center; margin: .8rem 0; }
.qr img { border-radius: 6px; border: 3px solid var(--gold-dark); background: #fffaf0; }
code.secret { font-size: .95rem; letter-spacing: .08em; user-select: all; }
.steps { margin: 0 0 .6rem 1.2rem; }
.otp-field { margin-top: .4rem; }
table.invites tr.muted td { opacity: .6; }
input.code-input {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1.25rem; letter-spacing: .14em;
  text-transform: uppercase; text-align: center;
}
.hint.center { text-align: center; }

/* --------------------------------------------------------------------------
   Bann-Verwaltung
   -------------------------------------------------------------------------- */

.exclusions { list-style: none; margin: 0; padding: 0; }
.exclusion { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px dashed var(--line); }
.excl-icon {
  width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border-radius: 50%;
  color: #f1e7d6; background: radial-gradient(circle at 35% 30%, #4b4f56, #17181b);
}
.exclusion.death .excl-icon { background: radial-gradient(circle at 35% 30%, #b0392f, #3d0907); }
.excl-body { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   Death Screen & Bann-Screen
   -------------------------------------------------------------------------- */

.fate {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; isolation: isolate;
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem 22vh;
}
.fate-scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; }
.fate::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(8, 2, 2, .78), rgba(8, 2, 2, .3) 65%, transparent 90%);
}
.fate-death::after { animation: death-pulse 6s ease-in-out infinite; }
.fate-content { max-width: 560px; text-align: center; color: #eadfd2; animation: fate-in 1.6s ease-out both; }
.fate-sigil {
  width: 88px; height: 88px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 3rem; border-radius: 50%;
  color: #f4e9dc; background: radial-gradient(circle at 35% 30%, #8e1f18, #2a0504); border: 2px solid #c9a227;
  box-shadow: 0 0 30px rgba(200, 40, 30, .6), inset 0 0 12px rgba(0, 0, 0, .6);
}
.fate-ban .fate-sigil { background: radial-gradient(circle at 35% 30%, #4b4f56, #111214); box-shadow: 0 0 30px rgba(0, 0, 0, .8), inset 0 0 12px rgba(0, 0, 0, .6); }
.fate-title {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05;
  background: linear-gradient(180deg, #fff1e6, #e7b8a8 45%, #a8322a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 24px rgba(200, 40, 30, .55));
}
.fate-ban .fate-title { background-image: linear-gradient(180deg, #f2efe9, #b9bec6 50%, #6b6f76); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .8)); }
.fate-reason { margin: .9rem 0 .2rem; font-family: var(--heading); font-size: 1.05rem; letter-spacing: .06em; color: #f1d9c9; }
.fate-note { font-style: italic; color: #d8c8b8; }
.fate-text { color: #d8c8b8; }
.fate-clock {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  margin: 1.2rem 0; padding: .8rem 1.8rem; border-radius: 6px;
  background: rgba(10, 3, 3, .7); border: 1px solid rgba(201, 162, 39, .55); box-shadow: 0 0 0 4px rgba(0, 0, 0, .35);
}
.fate-clock-label { font-family: var(--heading); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #c9a9a0; }
.fate-clock strong { font-family: var(--heading); font-size: 2.4rem; letter-spacing: .06em; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.fate-clock small { color: #a89488; }
.fate-facts { list-style: none; margin: 0 auto 1.4rem; padding: 0; max-width: 440px; text-align: left; }
.fate-facts li { position: relative; padding: .3rem 0 .3rem 1.5rem; color: #e6d6c8; }
.fate-facts li::before { content: "✝"; position: absolute; left: 0; color: #c9a227; }
.fate .btn.secondary { color: #eadfd2; background: rgba(0, 0, 0, .45); border-color: #6b6f76; box-shadow: none; }

@keyframes fate-in { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes death-pulse { 50% { background-color: rgba(90, 10, 8, .18); } }
@keyframes ash { from { transform: translate(0, 0); } to { transform: translate(-60px, 860px); } }
@keyframes cloud { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.fate .ash { animation: ash 12s linear infinite; }
.fate .cloud { animation: cloud 20s ease-in-out infinite alternate; }
.fate .fog { animation: drift 16s ease-in-out infinite alternate; }
.fate .fog-slow { animation-duration: 24s; animation-direction: alternate-reverse; }
.fate .crows-fly { animation: glide 14s ease-in-out infinite alternate; }
.fate .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .9s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Bündnisse: Umschaltleiste Gilde / Fraktion / Clan
   -------------------------------------------------------------------------- */

.alliance-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 640px; margin: 0 auto 1.6rem; padding: 5px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25));
  border: 1px solid var(--gold-dark); border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(236, 210, 126, .15);
}
.alliance-bar a {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem .5rem; border-radius: 7px;
  font-family: var(--heading); font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--parchment-dark); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.alliance-bar a:hover { color: var(--gold-light); background: rgba(201, 162, 39, .1); }
.alliance-bar a.active {
  color: #f8e7b6;
  background: linear-gradient(180deg, #a8322a 0%, #7e1a14 60%, #5f120d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35), 0 0 0 1px var(--gold), 0 4px 10px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.alliance-bar .icon { width: 1.3em; height: 1.3em; }
.soon-dot {
  font-family: var(--body); font-style: italic; font-weight: 400; font-size: .72rem; letter-spacing: 0; text-transform: none;
  padding: 0 .4rem; border-radius: 99px; color: #4a3505; background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

/* --------------------------------------------------------------------------
   „Wird in Kürze veröffentlicht“
   -------------------------------------------------------------------------- */

.soon {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 560px; display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem; border-radius: 6px;
  border: 1px solid var(--gold-dark);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 0 0 5px rgba(201, 162, 39, .35), var(--shadow);
}
.soon-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.soon::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(10, 6, 4, .72), rgba(10, 6, 4, .35) 60%, transparent 85%);
}
.soon-content { max-width: 640px; text-align: center; color: var(--parchment-light); }
.soon-kicker {
  margin: 0 0 .6rem; font-family: var(--heading); font-weight: 700; font-size: .85rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-light);
}
.soon-title {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.1;
  background: linear-gradient(180deg, #fff3c4, #e1b94a 55%, #a87b1e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(236, 190, 90, .35));
}
.soon-seal {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 1.3rem 0 1.1rem; padding: .55rem 1.3rem;
  font-family: var(--heading); font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: #f8e7b6; background: linear-gradient(180deg, rgba(168, 50, 42, .92), rgba(95, 18, 13, .92));
  border: 1px solid var(--gold); border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .5);
  animation: seal-glow 3.2s ease-in-out infinite;
}
.soon-seal .icon { color: var(--gold-light); }
.soon-text { font-size: 1.15rem; line-height: 1.55; color: #f3e6c7; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.soon-rumors {
  margin: 1.4rem auto 0; max-width: 520px; padding: 1rem 1.3rem; text-align: left;
  background: rgba(15, 9, 5, .55); border: 1px solid rgba(201, 162, 39, .35); border-radius: 4px;
  backdrop-filter: blur(2px);
}
.soon-rumors h2 { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.soon-rumors ul { margin: 0; padding: 0; list-style: none; }
.soon-rumors li { position: relative; padding: .25rem 0 .25rem 1.3rem; font-style: italic; color: #eadbb8; }
.soon-rumors li::before { content: "❧"; position: absolute; left: 0; color: var(--gold); font-style: normal; }

/* Animationen der Szenen */
@keyframes seal-glow { 50% { box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 26px rgba(236, 190, 90, .55); } }
@keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .2; } }
@keyframes shooting {
  0%, 82% { transform: translate(1100px, 30px); opacity: 0; }
  84% { opacity: 1; }
  92% { transform: translate(760px, 190px); opacity: 0; }
  100% { transform: translate(760px, 190px); opacity: 0; }
}
@keyframes sand { to { stroke-dashoffset: -20; } }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes flicker { 0%, 100% { transform: scale(1, 1); opacity: 1; } 30% { transform: scale(.92, 1.08); opacity: .85; } 60% { transform: scale(1.06, .94); } }
@keyframes rise { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(-30px, -330px); opacity: 0; } }
@keyframes drift { from { transform: translateX(-150px); } to { transform: translateX(150px); } }
@keyframes wave { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-3deg); } }
@keyframes glide { from { transform: translate(-60px, 10px); } to { transform: translate(60px, -10px); } }

.soon .twinkle { animation: twinkle 3.5s ease-in-out infinite; }
.soon .shooting { animation: shooting 9s linear infinite; }
.soon .sand-fall { animation: sand .6s linear infinite; }
.soon .banner { transform-box: fill-box; transform-origin: 50% 0; animation: sway 5s ease-in-out infinite; }
.soon .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .9s ease-in-out infinite; }
.soon .ember { animation: rise 6s linear infinite; }
.soon .fog { animation: drift 14s ease-in-out infinite alternate; }
.soon .fog-slow { animation-duration: 22s; animation-direction: alternate-reverse; }
.soon .flag { transform-box: fill-box; animation: wave 2.6s ease-in-out infinite; }
.soon .flag-left { transform-origin: 0 50%; }
.soon .flag-right { transform-origin: 100% 50%; animation-delay: -1.3s; }
.soon .crows { animation: glide 12s ease-in-out infinite alternate; }

/* Gerichtssaal */
@keyframes gavel {
  0%, 100% { transform: rotate(28deg); }
  22% { transform: rotate(36deg); }
  30% { transform: rotate(0deg); }
  35% { transform: rotate(4deg); }
  40%, 62% { transform: rotate(0deg); }
}
@keyframes shock {
  0%, 29% { transform: scale(.25); opacity: 0; }
  31% { transform: scale(.35); opacity: .95; }
  62%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes beam { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes pan-left { 0%, 100% { transform: translateY(7px); } 50% { transform: translateY(-7px); } }
@keyframes pan-right { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@keyframes mote { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: .8; } to { transform: translate(40px, -260px); opacity: 0; } }
@keyframes ray { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.soon .gavel { transform-box: view-box; transform-origin: 0 0; animation: gavel 2.8s cubic-bezier(.5, 0, .3, 1) infinite; }
.soon .shock { transform-box: fill-box; transform-origin: 50% 50%; animation: shock 2.8s ease-out infinite; }
.soon .shock-2 { animation-delay: .12s; }
.soon .scale-beam { transform-box: view-box; transform-origin: 0 0; animation: beam 6s ease-in-out infinite; }
.soon .pan-left { animation: pan-left 6s ease-in-out infinite; }
.soon .pan-right { animation: pan-right 6s ease-in-out infinite; }
.soon .mote { animation: mote 9s linear infinite; }
.soon .ray { animation: ray 7s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------------------- */

#toast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 30;
  max-width: calc(100% - 2rem); padding: .7rem 1.4rem;
  font-family: var(--heading); font-size: .9rem; letter-spacing: .03em; color: var(--ink);
  background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment));
  border: 1px solid var(--gold); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
#toast.err { color: #fbe9c4; background: linear-gradient(180deg, #a8322a, #6a130d); border-color: var(--gold); }

/* --------------------------------------------------------------------------
   Schmale Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  main { padding: 1.1rem .75rem 2.5rem; }
  .topbar-row { padding: .45rem .75rem .1rem; }
  .brand { font-size: 1.25rem; }
  .userbox .who { display: none; }
  .topbar { position: static; }
  .mainnav { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; padding: .3rem .4rem .55rem; overflow: visible; }
  .mainnav a {
    flex-direction: column; gap: .15rem; justify-content: center;
    padding: .4rem .1rem; font-size: .54rem; letter-spacing: .02em;
    border: 1px solid rgba(201, 162, 39, .25); border-radius: 8px; background: rgba(0, 0, 0, .2);
  }
  .mainnav a .icon { width: 1.35rem; height: 1.35rem; }
  .mainnav a.active { margin-bottom: 0; padding-bottom: .4rem; border-color: var(--gold); }
  .userbox a.gm-link, .userbox button.gm-link { width: 36px; padding: 0; }
  .userbox a.gm-link span, .userbox button.gm-link span { display: none; }
  .card { padding: 1.25rem 1rem 1.1rem; }
  .card::before, .card::after { width: 28px; height: 28px; }
  .page-title h1, .hero-banner h1, .clan-banner h1 { font-size: 1.7rem; }
  .attrs { gap: .5rem .35rem; }
  .attr .v { font-size: 1.45rem; }
  .gate-title { font-size: 2rem; }
  .clan-form-grid { grid-template-columns: 1fr; justify-items: center; }
  .alliance-bar a { flex-direction: column; gap: .15rem; font-size: .74rem; padding: .5rem .3rem; }
  /* Szene als vollständiges Bildband über dem Text statt angeschnitten dahinter */
  .soon { display: block; min-height: 0; padding: 0; }
  .soon-scene { position: relative; display: block; height: auto; aspect-ratio: 1200 / 560; z-index: 0; }
  .soon::after { display: none; }
  .soon-content { padding: 1.4rem 1rem 1.8rem; border-top: 1px solid var(--gold-dark); }
  .soon-season { background: #0b0716; }
  .soon-guild { background: #0f0905; }
  .soon-faction { background: #0a0407; }
  .soon-seal { font-size: .78rem; letter-spacing: .08em; padding: .5rem .9rem; }
  .soon-seal .icon { display: none; }
  .soon-text { font-size: 1.05rem; }
  .clan-form-grid > div { width: 100%; }

  /* Inventar als Karten statt Tabelle */
  table.inv thead { display: none; }
  table.inv tr {
    display: grid; grid-template-columns: 1fr auto auto; gap: .3rem .8rem; align-items: center;
    padding: .7rem 0; border-bottom: 1px dashed var(--line);
  }
  table.inv td { border: 0; padding: 0; }
  table.inv td.c-name { grid-column: 1 / -1; }
  table.inv td.c-qty::before { content: "Anzahl "; color: var(--ink-soft); font-size: .8rem; }
  table.inv td.c-act { grid-column: 1 / -1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Fraktionen: Karte der Fünf Lande ------------------------------------- */
.fmap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; margin-bottom: 1.4rem; }
@media (max-width: 980px) { .fmap-layout { grid-template-columns: 1fr; } }
.fmap-frame {
  padding: .8rem; border-radius: 8px;
  background: var(--noise), linear-gradient(180deg, #3a2614, #22160c);
  border: 1px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 0 3px rgba(201, 162, 39, .18);
}
.fmap-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.fmap-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.fmap-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .65rem .28rem .45rem; border-radius: 99px; cursor: pointer;
  font-family: var(--heading); font-size: .74rem; letter-spacing: .03em; color: var(--parchment-light);
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .35);
}
.fmap-chip i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold-light); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.fmap-chip b { min-width: 1.4em; padding: 0 .3em; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: .7rem; text-align: center; }
.fmap-chip:hover, .fmap-chip.active { border-color: var(--gold); background: rgba(201, 162, 39, .22); }
.fmap-chip.secret { background: rgba(0, 0, 0, .65); }
.fmap-tools { display: flex; align-items: center; gap: .35rem; }
.fmap-zoom {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font: 700 1.1rem/1 var(--heading);
  color: var(--gold-light); background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .45);
}
.fmap-zoom:hover { background: rgba(201, 162, 39, .25); }
.fmap-toggle { display: inline-flex; align-items: center; gap: .35rem; margin-right: .4rem; cursor: pointer; }
.fmap-toggle span { color: var(--parchment-light); font: italic .95rem var(--body); letter-spacing: 0; text-transform: none; }
.fmap-wrap { border-radius: 6px; overflow: hidden; border: 2px solid #6b4e1f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 4px 18px rgba(0, 0, 0, .5); }
.fmap { display: block; width: 100%; height: auto; touch-action: none; user-select: none; background: #2e4b57; }
.fmap.fm-zoomed { cursor: grab; }
.fmap-help { margin: .55rem .2rem 0; color: var(--parchment-dark); font-size: .85rem; font-style: italic; }

.fm-coast polygon { fill: #6a5232; stroke: #3b2a17; stroke-width: 2; }
.fm-ground polygon { stroke: rgba(70, 48, 22, .45); stroke-width: 1; }
.fm-owners polygon { stroke: rgba(30, 18, 8, .55); stroke-width: 1.2; transition: opacity .2s; }
.fm-road-base { stroke: #f1e2b4; stroke-width: 4; stroke-linecap: round; opacity: .7; }
.fm-road { stroke: #5a3815; stroke-width: 1.8; stroke-dasharray: 4 3.5; stroke-linecap: round; }
.fm-label {
  font-family: var(--heading); font-weight: 700; text-anchor: middle; fill: #2b1c0f;
  paint-order: stroke; stroke: rgba(247, 236, 208, .9); stroke-width: 2.6px; stroke-linejoin: round; pointer-events: none;
}
.fm-cell.dark .fm-label { fill: #f3e2b0; stroke: rgba(10, 6, 4, .85); }
.fm-cell.dark .fm-glyph { opacity: .75; }
.fm-hq-label { font-family: var(--heading); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; fill: #f6e3a1; paint-order: stroke; stroke: rgba(20, 12, 6, .8); stroke-width: 2px; pointer-events: none; }
.fm-hq-ring { fill: none; stroke: #e8c766; stroke-width: 3; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7)); }
.fm-glyph, .fm-cell { pointer-events: none; }
.fm-reach { fill: none; stroke: #ffe58a; stroke-width: 2; stroke-dasharray: 4 3; opacity: .95; }
.fmap.fm-hide-reach .fm-reach { display: none; }
.fm-hit { fill: transparent; cursor: pointer; outline: none; }
.fm-hit:hover, .fm-hit:focus-visible { fill: rgba(255, 244, 200, .22); stroke: #fff4c8; stroke-width: 2; }
.fm-selection { fill: rgba(255, 240, 180, .18); stroke: #ffd84d; stroke-width: 4; stroke-dasharray: 10 6; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 215, 80, .9)); animation: fm-march 1.2s linear infinite; }
@keyframes fm-march { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .fm-selection { animation: none; } }
.fmap.fm-small .fm-label, .fmap.fm-small .fm-hq-label { display: none; }
.fmap.fm-focus .fm-owners polygon { opacity: .25; }
.fmap.fm-focus .fm-cell:not(.focus) { opacity: .45; }

.fmap-panel { position: sticky; top: 1rem; }
@media (max-width: 980px) { .fmap-panel { position: static; } }
.fmap-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.fmap-panel-head h2 { margin: 0 0 .4rem; }
.fmap-terrain { margin: 0; font-family: var(--heading); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tag.fmap-owner { color: #fff8e6; border-color: rgba(0, 0, 0, .3); text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.fmap-sub { margin: 1rem 0 .35rem; font-size: .78rem; letter-spacing: .1em; color: var(--blood); }
.fmap-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.fmap-support { margin-top: 1rem; }
.fmap-mine { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.fmap-mine strong { font-family: var(--heading); font-size: 1.1rem; }
.fmap-gm { margin-top: 1.2rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.fmap-gm summary { cursor: pointer; font-family: var(--heading); color: var(--blood); letter-spacing: .06em; }
.fmap-gm-influence { display: grid; gap: .3rem; margin-top: .5rem; }
.fmap-gm-row { display: grid; grid-template-columns: 14px 1fr auto auto auto; align-items: center; gap: .4rem; font-size: .92rem; }
.fmap-gm-row i { width: 12px; height: 12px; border-radius: 50%; }
.fmap-gm-row b { min-width: 2em; text-align: right; font-family: var(--heading); }
.fmap-gm-roads { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .25rem .6rem; font-size: .92rem; }
.fmap-rules { margin: 0; padding-left: 1.2rem; line-height: 1.6; }

.faction-motto { margin: -.2rem 0 0; font-style: italic; color: var(--ink-soft); }
.faction-hq { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.tag.faction-forbidden { background: #15110f; color: #e8c766; border-color: #000; letter-spacing: .12em; }
.faction.secret {
  color: #eadbb4; border-color: #000;
  background: var(--noise), radial-gradient(circle at 50% 0, #3a2d24, #120d0a 75%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), var(--shadow);
}
.faction.secret h3, .faction.secret .faction-stats b { color: #f3e2b0; }
.faction.secret .faction-stats, .faction.secret .faction-motto, .faction.secret .faction-hq, .faction.secret .hint { color: #b9a682; }
.faction.secret .faction-hq a { color: var(--gold-light); }
.btn.dark { background: linear-gradient(180deg, #2b231d, #0f0b09); border-color: #000; color: var(--gold-light); }
.btn.dark:hover { background: #000; }

/* ---- Fraktionen: Vorteile, Tribut, Ränge --------------------------------- */
.fm-perk circle { fill: #f3d67a; stroke: #6b4e12; stroke-width: 1.4; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .6)); }
.fm-perk path { fill: #7a1a12; }
.fmap-star { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: #7a1a12; background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b84a); border: 1px solid #8a6a1c; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); font-size: .9rem; }
.fmap-perk-box { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0; padding: .55rem .7rem; border-radius: 6px; background: rgba(236, 210, 126, .35); border: 1px solid rgba(138, 106, 28, .45); }
.fmap-perk-box p { margin: .1rem 0 0; font-size: .95rem; }
.fmap-yield { margin: .4rem 0 0; font-size: .92rem; color: var(--ink-soft); font-style: italic; }
.fmap-rank { margin: .1rem 0 .2rem; font-family: var(--heading); color: var(--blood); letter-spacing: .04em; }
.fmap-rank small { font-family: var(--body); color: var(--ink-soft); letter-spacing: 0; }
.fmap-rank-bar { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(110, 78, 38, .2); border: 1px solid rgba(110, 78, 38, .35); }
.fmap-rank-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }
.fmap-tribute { margin-top: .4rem; padding: .7rem .8rem; border-radius: 6px; background: rgba(255, 250, 235, .55); border: 1px solid var(--line); }
.fmap-tribute .fmap-sub { margin-top: 0; }
.fmap-tribute ul, .fmap-yields { list-style: none; margin: 0 0 .7rem; padding: 0; }
.fmap-tribute li, .fmap-yields li { display: flex; justify-content: space-between; gap: .6rem; padding: .18rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.fmap-tribute li b, .fmap-yields li b { font-family: var(--heading); white-space: nowrap; }
.btn.fmap-claim { width: 100%; justify-content: center; }
.fmap-claimed { margin: 0; color: var(--forest); font-style: italic; }
.fmap-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fmap-perks li { display: flex; gap: .55rem; align-items: center; }
.fmap-perks small, .fmap-perk-list small { display: block; color: var(--ink-soft); font-size: .88rem; }
.fmap-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }
.fmap-benefits-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .fmap-benefits { grid-template-columns: 1fr; } }
.fmap-ranks { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fmap-ranks th { text-align: left; font-family: var(--heading); font-size: .7rem; letter-spacing: .08em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: .25rem .3rem; }
.fmap-ranks td { padding: .3rem; border-bottom: 1px dashed var(--line); }
.fmap-ranks .num { text-align: right; }
.fmap-perk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .5rem .9rem; }
.fmap-perk-list li { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding: .4rem .5rem; border-radius: 6px; background: rgba(255, 250, 235, .45); border: 1px solid var(--line); }
.fmap-perk-list .tag { font-size: .62rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--blood); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.faction-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.faction-perks .chip { font-size: .8rem; color: #6a4c0c; }
.faction.secret .faction-perks .chip { background: rgba(232, 199, 102, .15); color: var(--gold-light); border-color: rgba(232, 199, 102, .3); }
.price s { margin-right: .3rem; color: var(--ink-soft); font-size: .85em; }
.price .perk-note { display: block; font-size: .75rem; color: var(--forest); font-style: italic; }

/* ---- Season: Halloween-Countdown ------------------------------------------ */
.hw {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(78vh, 720px); display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem 9rem; border-radius: 8px; background: #0d0618;
  border: 1px solid #7a3a10;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .4), inset 0 0 0 5px rgba(255, 140, 40, .35), 0 0 40px rgba(255, 110, 20, .18), var(--shadow);
}
.hw-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hw::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 42%, rgba(8, 3, 14, .7), rgba(8, 3, 14, .25) 65%, transparent 90%);
}
.hw-content { max-width: 760px; text-align: center; }
.hw-kicker { margin: 0 0 .4rem; font-family: var(--heading); font-weight: 700; font-size: .85rem; letter-spacing: .34em; text-transform: uppercase; color: #ffb35c; text-shadow: 0 0 10px rgba(255, 120, 30, .6); }
.hw-title {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 1; letter-spacing: .02em;
  background: linear-gradient(180deg, #ffe7a8 0%, #ff9a2e 45%, #c2410c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 26px rgba(255, 120, 20, .55));
}
.hw-sub { margin: .7rem auto 1.6rem; max-width: 34rem; font-style: italic; font-size: 1.2rem; color: #f1dcc0; text-shadow: 0 1px 4px #000; }
.hw-timer { display: flex; justify-content: center; gap: clamp(.4rem, 2vw, 1rem); }
.hw-unit {
  min-width: clamp(68px, 18vw, 118px); padding: .7rem .4rem .55rem; border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, rgba(40, 18, 46, .92), rgba(16, 7, 20, .95));
  border: 1px solid rgba(255, 140, 40, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 110, 20, .25), inset 0 -10px 20px rgba(255, 110, 20, .12);
}
.hw-digits {
  display: block; font-family: var(--heading); font-weight: 700; font-size: clamp(1.9rem, 7vw, 3.4rem); line-height: 1.05;
  font-variant-numeric: tabular-nums; color: #ffcf7a; text-shadow: 0 0 12px rgba(255, 140, 30, .85), 0 2px 0 #000;
}
.hw-label { display: block; margin-top: .25rem; font-family: var(--heading); font-size: clamp(.58rem, 1.8vw, .72rem); letter-spacing: .16em; text-transform: uppercase; color: #d9b59a; }
.hw-when { margin: 1.2rem 0 0; font-family: var(--heading); font-size: .9rem; letter-spacing: .06em; color: #f0c48f; text-shadow: 0 1px 3px #000; }
.hw-open { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 6vw, 3rem); color: #ffcf7a; text-shadow: 0 0 20px rgba(255, 140, 30, .9), 0 3px 0 #000; animation: hw-pulse 2s ease-in-out infinite; }
.hw-gm { margin-top: 1.4rem; }

.hw .hw-twinkle { animation: twinkle 3.5s ease-in-out infinite; }
.hw .hw-bat { animation: hw-fly 16s linear infinite; }
.hw .hw-bat-slow { animation-duration: 24s; }
.hw .hw-flap { transform-box: fill-box; transform-origin: 50% 50%; animation: hw-flap .32s ease-in-out infinite alternate; }
.hw .hw-flicker { animation: hw-flicker 2.4s steps(1, end) infinite; }
.hw .hw-glow { animation: hw-pulse 1.8s ease-in-out infinite; }
.hw .hw-window { animation: hw-flicker 3.2s steps(1, end) infinite; }
.hw .hw-ghost { animation: hw-float 6s ease-in-out infinite; }
.hw .hw-spider { animation: hw-spider 7s ease-in-out infinite; }
.hw .hw-fog { animation: hw-drift 28s linear infinite alternate; }
.hw .hw-fog-2 { animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes hw-fly { from { transform: translate(-1400px, 40px); } 50% { transform: translate(-400px, -30px); } to { transform: translate(800px, 30px); } }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 12% { opacity: .75; } 18% { opacity: 1; } 47% { opacity: .85; } 52% { opacity: 1; } 78% { opacity: .7; } 83% { opacity: 1; } }
@keyframes hw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes hw-float { 0%, 100% { transform: translate(0, 0); opacity: .9; } 50% { transform: translate(-30px, -22px); opacity: .55; } }
@keyframes hw-spider { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-46px); } }
@keyframes hw-drift { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
@media (prefers-reduced-motion: reduce) {
  .hw .hw-bat, .hw .hw-flap, .hw .hw-flicker, .hw .hw-glow, .hw .hw-window, .hw .hw-ghost, .hw .hw-spider, .hw .hw-fog, .hw-open { animation: none; }
}
@media (max-width: 600px) { .hw { padding-bottom: 7rem; } .hw-sub { font-size: 1.05rem; } }
@media (max-aspect-ratio: 4/5) { .hw { align-items: flex-end; padding-top: 16rem; } }

/* ---- Navigation: kurze Beschriftung auf dem Handy ------------------------- */
.mainnav .nav-short { display: none; }
.mainnav a { gap: .35rem; }
@media (max-width: 1500px) {
  .mainnav .nav-long { display: none; }
  .mainnav .nav-short { display: inline; }
}

/* ---- Stufe im Heldenbanner -------------------------------------------------- */
.level-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; vertical-align: middle;
  width: 3.1rem; height: 3.1rem; margin-left: .7rem; border-radius: 50%; text-decoration: none;
  font-family: var(--heading); font-size: 1.3rem; line-height: 1; color: #2b1c0f;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #d9aa3a 70%, #8a6a1c);
  border: 2px solid #f6e3a1; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 3px 10px rgba(0, 0, 0, .5);
}
.level-badge small { font-size: .45rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---- Fähigkeitsbaum ---------------------------------------------------------- */
.st-level {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; margin-bottom: 1.4rem; padding: 1.2rem 1.4rem;
  border-radius: 8px; color: var(--parchment-light);
  background: var(--noise), radial-gradient(ellipse at 20% 0, #4a2e14, #1d130b 75%);
  border: 1px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 0 3px rgba(201, 162, 39, .15);
}
.st-medal {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 6.5rem; height: 6.5rem; border-radius: 50%;
  font-family: var(--display); color: #2b1c0f;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e1b94a 55%, #8a6a1c);
  border: 3px solid #f6e3a1; box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 0 30px rgba(236, 190, 90, .35);
}
.st-medal small { font-family: var(--heading); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }
.st-medal strong { font-size: 2.6rem; line-height: 1; }
.st-level h2 { margin: 0 0 .2rem; color: var(--gold-light); }
.st-level p { margin: .2rem 0; }
.st-level .hint { color: #cdb894; }
.st-xp { height: 12px; margin: .5rem 0; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .45); border: 1px solid rgba(201, 162, 39, .45); }
.st-xp span { display: block; height: 100%; background: linear-gradient(90deg, #8a6a1c, #f3d67a); box-shadow: 0 0 10px rgba(243, 214, 122, .6); }
.st-xp.small { height: 8px; background: rgba(110, 78, 38, .2); border-color: rgba(110, 78, 38, .35); }
.st-points { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 8rem; text-align: center; }
.st-points strong { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: #ffd36b; text-shadow: 0 0 14px rgba(255, 200, 80, .5); }
.st-points span { font-family: var(--heading); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
@media (max-width: 760px) {
  .st-level { grid-template-columns: auto 1fr; }
  .st-points { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: .8rem; }
  .st-medal { width: 5rem; height: 5rem; }
  .st-medal strong { font-size: 2rem; }
}

/* Radialer Fähigkeitsbaum */
.tt-layout { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 980px) { .tt-layout { grid-template-columns: 1fr; } }
/* Fähigkeitsbaum als Sternenkarte: drei Sternbilder um den Polarstern, im Holzrahmen */
.tt-wrap { aspect-ratio: 1; max-width: 860px; margin: 0 auto; border-radius: 6px; overflow: hidden; border: 2px solid #6b4e1f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 4px 18px rgba(0, 0, 0, .5); background: #070c1c; }
.p-krieger { --c: #9b2219; --glow: #ff8a7a; }
.p-wanderer { --c: #2b7038; --glow: #8ff0a0; }
.p-mystiker { --c: #2a4f94; --glow: #9fc4ff; }
.tt { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.tt.tt-zoomed { cursor: grab; }
.tt-skybg { fill: url(#ttSky); }
.tt-field circle { fill: #e8e4ff; }
.tt-grid circle, .tt-grid line { fill: none; stroke: #c9a227; stroke-opacity: .16; stroke-width: 1; }
.tt-skyring circle { fill: none; stroke: #c9a227; stroke-opacity: .7; stroke-width: 1.6; }
.tt-skyring circle.thin { stroke-opacity: .4; stroke-width: 1; }
.tt-skyring line { stroke: #c9a227; stroke-opacity: .55; stroke-width: 1; }
.tt-figures path { fill: none; stroke: #c9a227; stroke-opacity: .2; stroke-width: 2.2; stroke-linejoin: round; }
.tt-spine line { stroke: #e8d39a; stroke-opacity: .35; stroke-width: 1.2; }
.tt-step line { stroke-opacity: .5; stroke-width: 1.6; }
.tt-step.on line { stroke: #f3d67a; stroke-opacity: 1; stroke-width: 2.4; }
.tt-step text { font-family: var(--heading); font-weight: 700; font-size: 9.5px; fill: #e8d39a; fill-opacity: .55; }
.tt-step.on text { fill: #f3d67a; fill-opacity: 1; }
.tt-links line { stroke-linecap: round; }
.tt-links line.dim { stroke: #c9a227; stroke-opacity: .32; stroke-width: 1; stroke-dasharray: 2 4; }
.tt-links line.next { stroke: #e8d39a; stroke-opacity: .55; stroke-width: 1.2; }
.tt-links line.lit { stroke: #f3d67a; stroke-width: 2.4; filter: drop-shadow(0 0 3px rgba(243, 214, 122, .8)); }
.tt-constellation { font-family: var(--heading); font-weight: 700; font-size: 13px; letter-spacing: .3em; fill: #e8d39a; }
/* Sterne */
.tt-node { cursor: pointer; outline: none; }
.tt-hit { fill: transparent; }
.tt-star { fill: #cfd3ea; fill-opacity: .55; }
.tt-orbit { fill: none; stroke: #c9a227; stroke-opacity: .3; stroke-width: 1; }
.tt-node.near .tt-star { fill-opacity: .85; }
.tt-node.open .tt-star { fill: #f3d67a; fill-opacity: 1; }
.tt-node.open .tt-aura { fill: #f3d67a; opacity: .5; animation: tt-twinkle 1.8s ease-in-out infinite; }
.tt-node.open .tt-orbit { stroke-opacity: .7; }
.tt-node.learned .tt-star { fill: #fffbe8; fill-opacity: 1; stroke: var(--glow); stroke-width: 1.2; }
.tt-node.learned .tt-aura { fill: var(--glow); opacity: .55; }
.tt-node.learned .tt-orbit { stroke: var(--glow); stroke-opacity: .8; }
.tt-node.keystone.learned .tt-aura { opacity: .8; }
.tt-node:hover .tt-star, .tt-node:focus-visible .tt-star, .tt-node.selected .tt-star { fill: #fff; fill-opacity: 1; }
@keyframes tt-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .tt-node.open .tt-aura { animation: none; } }
/* Polarstern mit der Stufe */
.tt-origin .glow { fill: #f3d67a; opacity: .35; }
.tt-origin .rim { fill: #101a38; stroke: #c9a227; stroke-width: 2; }
.tt-origin .core { fill: url(#ttGold); stroke: #f6e3a1; stroke-width: 2; }
.tt-origin text { font-family: var(--display); font-weight: 900; font-size: 19px; text-anchor: middle; fill: #2b1c0f; pointer-events: none; }
.tt-selection { fill: none; stroke: #f3d67a; stroke-width: 2; stroke-dasharray: 4 4; pointer-events: none; animation: fm-march 1.2s linear infinite; }
.tt-effect { margin: .4rem 0 .8rem; padding: .55rem .7rem; border-radius: 6px; font-size: 1.02rem; background: color-mix(in srgb, var(--c) 12%, transparent); border-left: 4px solid var(--c); }
.tt-effect.keystone { font-weight: 600; }
.tt-state { margin: 0 0 .6rem; color: var(--blood); font-style: italic; }
.tt-state.ok { color: var(--forest); font-style: normal; font-family: var(--heading); letter-spacing: .06em; }
.btn.tt-learn { width: 100%; justify-content: center; margin-bottom: .6rem; }
.tt-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .4rem 0; font-size: .9rem; color: var(--ink-soft); }
.tt-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tt-legend i { display: inline-block; background: #3a4a7a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.tt-legend i.minor { width: 10px; height: 10px; }
.tt-legend i.notable { width: 15px; height: 15px; }
.tt-legend i.keystone { width: 19px; height: 19px; box-shadow: 0 0 0 2px rgba(138, 106, 28, .45); }
.tt-legend i.open { width: 15px; height: 15px; background: #c9a227; }
.tt-legend i.keystone { clip-path: polygon(50% 0, 58% 30%, 85% 15%, 70% 42%, 100% 50%, 70% 58%, 85% 85%, 58% 70%, 50% 100%, 42% 70%, 15% 85%, 30% 58%, 0 50%, 30% 42%, 15% 15%, 42% 30%); }
.tt-summary { margin: 0; padding-left: 1.1rem; line-height: 1.55; }
/* Seitenpanel im Stil der Sternenkarte: Nachthimmel, Goldrahmen, Sterne als Zierde */
.card.fmap-panel.tt-panel {
  color: #dfe2f4; border: 2px solid #6b4e1f;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(232, 228, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, rgba(232, 228, 255, .55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 86% 46%, rgba(243, 214, 122, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 64%, rgba(232, 228, 255, .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 84%, rgba(232, 228, 255, .6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 9% 90%, rgba(232, 228, 255, .45) 50%, transparent 51%),
    radial-gradient(ellipse at 50% 30%, #1d2a5a 0%, #121b3d 55%, #0a1028 100%);
  box-shadow: inset 0 0 0 5px #0b1330, inset 0 0 0 6px rgba(201, 162, 39, .5), inset 0 0 40px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .5);
}
.card.fmap-panel.tt-panel::before, .card.fmap-panel.tt-panel::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Cpath d='M3 22V3h19' fill='none' stroke='%23c9a227' stroke-opacity='.7' stroke-width='1.2'/%3E%3Cpath d='M7 28V7h21' fill='none' stroke='%23c9a227' stroke-opacity='.35' stroke-width='1'/%3E%3Cpath d='M3 0l1.3 1.7L6 3 4.3 4.3 3 6 1.7 4.3 0 3l1.7-1.3z' fill='%23f3d67a'/%3E%3C/svg%3E"); filter: none; }
.tt-panel > h2, .tt-panel .fmap-panel-head h2 { color: #f3d67a; text-shadow: 0 0 10px rgba(243, 214, 122, .35); }
.card.fmap-panel.tt-panel > h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12'%3E%3Cpath d='M0 6h96M124 6h96' stroke='%23c9a227' stroke-opacity='.7' stroke-width='1'/%3E%3Cpath d='M110 0l1.8 4.2L116 6l-4.2 1.8L110 12l-1.8-4.2L104 6l4.2-1.8z' fill='%23f3d67a'/%3E%3Ccircle cx='99' cy='6' r='1.4' fill='%23c9a227'/%3E%3Ccircle cx='121' cy='6' r='1.4' fill='%23c9a227'/%3E%3C/svg%3E"); filter: none; }
.tt-panel .hint, .tt-panel .empty { color: #aab1d8; }
.tt-panel .fmap-terrain { color: #c9a227; }
.tt-panel .fmap-sub { color: #f3d67a; }
.tt-panel .linkish { color: #f3d67a; text-decoration-color: rgba(243, 214, 122, .5); }
.tt-panel .linkish:hover { color: #fff3c4; }
.tt-panel .btn.secondary { background: transparent; color: #e8d39a; border-color: rgba(201, 162, 39, .6); box-shadow: none; }
.tt-panel .btn.secondary:hover { color: #fff3c4; border-color: #f3d67a; }
.tt-panel .tt-effect { color: #f4efdc; background: color-mix(in srgb, var(--c) 28%, rgba(10, 16, 40, .6)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.tt-panel .tt-state { color: #f0a9a0; }
.tt-panel .tt-state.ok { color: #9fe6ab; }
.tt-panel .btn.tt-learn { color: #1d1406; background: linear-gradient(180deg, #f6e3a1, #d9b24a 55%, #a87f22); border-color: #f6e3a1; text-shadow: none; box-shadow: 0 0 14px rgba(243, 214, 122, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.tt-panel .btn.tt-learn:hover { color: #000; filter: brightness(1.08); }
.tt-panel .tt-legend { color: #c3c8e6; }
.tt-panel .tt-legend i { background: #cfd3ea; opacity: .75; }
.tt-panel .tt-legend i.keystone { box-shadow: none; }
.tt-panel .tt-legend i.open { background: #f3d67a; opacity: 1; filter: drop-shadow(0 0 3px rgba(243, 214, 122, .8)); }
.tt-panel .tt-summary { list-style: none; padding-left: 0; }
.tt-panel .tt-summary li { position: relative; padding-left: 1.2rem; }
.tt-panel .tt-summary li::before { content: ""; position: absolute; left: 0; top: .5em; width: .62rem; height: .62rem; background: #f3d67a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

.st-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin-top: .8rem; }
.st-weapon { padding: .9rem 1rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.st-weapon.wielded { border: 2px solid var(--gold-dark); box-shadow: 0 0 0 3px rgba(201, 162, 39, .2); }
.st-weapon header { display: flex; gap: .8rem; align-items: center; margin-bottom: .5rem; }
.st-weapon h3 { margin: 0; color: var(--ink); text-transform: none; }
.st-weapon header p { margin: .2rem 0 0; }
.st-wlevel { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 10px; color: #f3e2b0; background: linear-gradient(180deg, #3a2614, #1d130b); border: 2px solid var(--gold-dark); }
.st-wlevel strong { font-family: var(--display); font-size: 1.4rem; line-height: 1; color: #ffd36b; }
.st-wlevel small { font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; }
.st-attack { display: flex; align-items: center; gap: .3rem; margin: .4rem 0; font-family: var(--heading); font-size: .85rem; color: var(--blood); }
.st-techniques { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.st-techniques li { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem .45rem; border-radius: 6px; border: 1px dashed var(--line); }
.st-techniques li.unlocked { border-style: solid; background: rgba(236, 210, 126, .3); border-color: rgba(138, 106, 28, .5); }
.st-techniques li.locked { opacity: .6; }
.st-techniques strong { font-family: var(--heading); font-size: .82rem; }
.st-techniques strong small { font-family: var(--body); color: var(--blood); }
.st-techniques small, .st-techniques em { display: block; font-size: .85rem; color: var(--ink-soft); }
.st-techniques em { color: var(--blood); font-size: .78rem; }
.st-tlevel { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-family: var(--heading); font-size: .8rem; color: #2b1c0f; background: radial-gradient(circle at 35% 30%, #fff1b8, #d9aa3a); border: 1px solid #8a6a1c; }
.st-techniques li.locked .st-tlevel { background: #cfc3ad; color: #5e4529; }
.st-table summary { cursor: pointer; font-family: var(--heading); color: var(--blood); letter-spacing: .08em; }
.st-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .3rem; margin-top: .8rem; }
.st-levels span { display: flex; justify-content: space-between; gap: .4rem; padding: .25rem .5rem; border-radius: 6px; border: 1px solid var(--line); font-size: .9rem; }
.st-levels span.current { background: rgba(236, 210, 126, .45); border-color: var(--gold-dark); }

/* ---- Kampflog: eigene Waffe ---------------------------------------------- */
.cw-head { margin: 0 0 .5rem; }
.cw-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .5rem; }
.cw-actions .btn { font-size: .7rem; }
.cw-actions .btn.locked { opacity: .5; }
.fmap-ranks tr.current td { background: rgba(236, 210, 126, .45); font-weight: 600; }
.fmap-ranks th .fmap-dot { display: inline-block; width: 9px; height: 9px; margin-right: .3rem; border-radius: 50%; vertical-align: 0; }
.fmap-ranks td, .fmap-ranks th { white-space: nowrap; }
.quest-hero .member-rank { display: block; font-size: .72rem; color: var(--ink-soft); font-style: italic; line-height: 1; }
.faction.secret .quest-hero .member-rank { color: #b9a682; }
.fmap-yields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: 1.6rem; }

/* ---- Seltenheit ---------------------------------------------------------- */
:root { --r-selten: #2f7fd6; --r-episch: #9246d0; --r-legendaer: #e3870f; }
.tag.rarity { color: #fff; border-color: rgba(0, 0, 0, .25); text-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.tag.r-selten { background: var(--r-selten); }
.tag.r-episch { background: var(--r-episch); }
.tag.r-legendaer { background: linear-gradient(90deg, #e3870f, #f2c14e); }
.rarity-text.r-selten { color: var(--r-selten); font-weight: 600; }
.rarity-text.r-episch { color: var(--r-episch); font-weight: 600; }
.rarity-text.r-legendaer { color: var(--r-legendaer); font-weight: 600; }
.bag-item.r-selten, .ware.r-selten { border-color: var(--r-selten); box-shadow: 0 0 0 1px var(--r-selten), 0 0 10px rgba(47, 127, 214, .3); }
.bag-item.r-episch, .ware.r-episch { border-color: var(--r-episch); box-shadow: 0 0 0 1px var(--r-episch), 0 0 12px rgba(146, 70, 208, .35); }
.bag-item.r-legendaer, .ware.r-legendaer { border-color: var(--r-legendaer); box-shadow: 0 0 0 2px var(--r-legendaer), 0 0 18px rgba(227, 135, 15, .55); }
.bag-item.r-selten h3, .ware.r-selten h3 { color: #1f5ea8; }
.bag-item.r-episch h3, .ware.r-episch h3 { color: #6e2aa6; }
.bag-item.r-legendaer h3, .ware.r-legendaer h3 { color: #b0610a; }
.slot.filled.r-selten { border-color: var(--r-selten); box-shadow: inset 0 0 0 1px var(--r-selten); }
.slot.filled.r-episch { border-color: var(--r-episch); box-shadow: inset 0 0 0 1px var(--r-episch), 0 0 10px rgba(146, 70, 208, .3); }
.slot.filled.r-legendaer { border-color: var(--r-legendaer); box-shadow: inset 0 0 0 1px var(--r-legendaer), 0 0 14px rgba(227, 135, 15, .5); }
.slot.filled.r-selten .slot-item { color: #1f5ea8; }
.slot.filled.r-episch .slot-item { color: #6e2aa6; }
.slot.filled.r-legendaer .slot-item { color: #b0610a; }
.vault-slot.filled.r-episch { border-color: var(--r-episch); }
.vault-slot.filled.r-legendaer { border-color: var(--r-legendaer); }
.tag.set-tag { background: #2b1c0f; color: var(--gold-light); }
.item-bonus { list-style: none; margin: .3rem 0; padding: 0; font-size: .9rem; color: #2f6b38; }
.set-bonus { display: grid; gap: .5rem; margin: .8rem 0 .2rem; }
.set-bonus > div { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem; border-radius: 6px; background: rgba(146, 70, 208, .1); border: 1px solid rgba(146, 70, 208, .45); }
.set-bonus strong { font-family: var(--heading); color: #6e2aa6; }
.set-bonus span { font-size: .92rem; }
.set-bonus span.off { opacity: .5; }
.bonus-fields summary { cursor: pointer; font-family: var(--heading); font-size: .8rem; color: var(--blood); margin: .4rem 0; }
.armory { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.armory-set { padding: .8rem .9rem; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--faction) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--faction) 14%, transparent), rgba(255, 250, 235, .55)); }
.armory-set header { display: flex; gap: .7rem; align-items: center; }
.armory-set h3 { margin: 0; color: #6e2aa6; text-transform: none; }
.armory-set header p { margin: .1rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.armory-bonus { margin: .5rem 0; padding-left: 1.1rem; font-size: .92rem; }
.armory-pieces { display: grid; gap: .35rem; }
.armory-piece { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem .55rem; border-radius: 6px; background: rgba(255, 250, 235, .75); border: 1px solid var(--r-episch); }
.armory-piece small { display: block; font-size: .82rem; color: var(--ink-soft); }
.armory-blocked { margin: .5rem 0 0; font-size: .88rem; font-style: italic; color: var(--blood); }

/* ---- Handwerk -------------------------------------------------------------- */
.craft-done { color: var(--forest); font-style: italic; }
.materials { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem; }
.material { display: flex; align-items: baseline; gap: .4rem; padding: .35rem .55rem; border-radius: 6px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.material strong { font-family: var(--heading); font-size: 1.15rem; color: var(--blood); }
.material.none { opacity: .55; }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.recipe { padding: .7rem .8rem; border-radius: 8px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.recipe header { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.recipe h3 { margin: 0; text-transform: none; color: var(--ink); }
.recipe.ready { border-color: var(--forest); box-shadow: 0 0 0 1px rgba(46, 99, 52, .35); }
.recipe.r-episch h3 { color: #6e2aa6; }
.recipe.r-legendaer { border-color: var(--r-legendaer); }
.recipe.r-legendaer h3 { color: #b0610a; }
.recipe.r-selten h3 { color: #1f5ea8; }
.ingredients { list-style: none; margin: .5rem 0; padding: 0; font-size: .95rem; }
.ingredients li { display: flex; justify-content: space-between; padding: .15rem 0; border-bottom: 1px dashed var(--line); }
.ingredients li.ok b { color: var(--forest); }
.ingredients li.missing b { color: var(--blood); }

/* ---- Fraktionskriege ---------------------------------------------------------- */
.fm-war { fill: rgba(190, 20, 10, .18); stroke: #ff3b2a; stroke-width: 3; animation: fm-war 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes fm-war { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .fm-war { animation: none; } }
.fm-war-icon circle { fill: #7e1a14; stroke: #ffd2a0; stroke-width: 1.4; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .6)); }
.fm-war-icon path { stroke: #fff1d6; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.wars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1rem; }
.war { padding: .8rem .9rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.war.active { border: 2px solid #b3261e; background: linear-gradient(180deg, rgba(179, 38, 30, .1), rgba(255, 250, 235, .7)); }
.war header { display: flex; gap: .6rem; align-items: center; }
.war header > div { flex: 1; }
.war h3 { margin: 0; text-transform: none; color: var(--ink); }
.war header p { margin: .1rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.war-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff1d6; background: #7e1a14; font-size: 1.1rem; }
.war-bar { height: 18px; }
.war-gm { display: grid; gap: .4rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line); }

/* ---- Erfolge --------------------------------------------------------------- */
.badge-medal {
  --m1: #f0c48f; --m2: #a8662a; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%; color: #2b1c0f;
  background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2)); border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .35);
}
.badge-medal .icon { width: 1.5rem; height: 1.5rem; }
.badge-medal.small { width: 2rem; height: 2rem; }
.badge-medal.small .icon { width: 1rem; height: 1rem; }
.badge-medal.t-silber { --m1: #f4f6f8; --m2: #8d979f; }
.badge-medal.t-gold { --m1: #fff1b8; --m2: #c99a1e; }
.badge-medal.t-legende { --m1: #f1d2ff; --m2: #7d2fb8; color: #fff6dc; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 14px rgba(160, 80, 220, .7); }
.badge-medal.locked { filter: grayscale(1) brightness(.85); opacity: .45; }
.ach-people { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.ach-people a { display: inline-flex; gap: .4rem; align-items: center; padding: .25rem .7rem; border-radius: 99px; text-decoration: none; font-family: var(--heading); font-size: .78rem; color: var(--parchment-light); background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .35); }
.ach-people a.active { background: var(--gold); color: #2b1c0f; }
.ach-people b { padding: 0 .35rem; border-radius: 99px; background: rgba(255, 255, 255, .15); }
.ach-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; margin-bottom: 1.2rem; padding: 1rem 1.3rem; border-radius: 8px; color: var(--parchment-light); background: var(--noise), radial-gradient(ellipse at 20% 0, #4a2e14, #1d130b 75%); border: 1px solid var(--gold-dark); box-shadow: var(--shadow); }
.ach-total strong { display: block; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: #ffd36b; }
.ach-total span { font-family: var(--heading); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.ach-progress p { margin: .2rem 0 0; color: #cdb894; font-style: italic; }
.ach-tiers { display: flex; flex-wrap: wrap; gap: .7rem; }
.ach-tier { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.ach-tier b { font-family: var(--heading); font-size: 1.1rem; color: #fff1c4; }
@media (max-width: 760px) { .ach-summary { grid-template-columns: 1fr; } }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .7rem; }
.ach { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 8px; background: rgba(255, 250, 235, .55); border: 1px solid var(--line); }
.ach.done { background: linear-gradient(180deg, #fff6d6, #f3e2b0); border-color: var(--gold-dark); }
.ach h3 { margin: 0; font-size: .95rem; text-transform: none; color: var(--ink); }
.ach p { margin: .15rem 0; font-size: .92rem; }
.ach-tiername { margin-left: .4rem; font-family: var(--heading); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #a8662a; }
.ach-tiername.t-silber { color: #6c757d; }
.ach-tiername.t-gold { color: #a17a14; }
.ach-tiername.t-legende { color: #7d2fb8; }
.ach-date { color: var(--forest); font-size: .85rem; font-style: italic; }
.ach-bar { display: flex; align-items: center; gap: .5rem; }
.ach-bar .st-xp { flex: 1; }
.ach-bar small { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.ach-strip { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: -.4rem 0 1.2rem; padding: .5rem .9rem; border-radius: 8px; text-decoration: none; color: var(--parchment-light); background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .35); }
.ach-strip:hover { border-color: var(--gold); }
.ach-strip-label { font-family: var(--heading); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.ach-strip strong { font-family: var(--heading); color: #ffd36b; }
.ach-strip-badges { display: flex; gap: .3rem; flex: 1; }
.ach-strip-more { font-size: .9rem; font-style: italic; color: var(--parchment-dark); }

/* ---- Spielabend, Weltlexikon, Beute ------------------------------------------------ */
.ses-toolbar, .ses-reward { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.ses-reward span { font-family: var(--heading); font-size: .78rem; letter-spacing: .06em; color: var(--ink-soft); }
.ses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.ses-hero { padding: .8rem .9rem; border-radius: 8px; background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment)); border: 1px solid var(--gold-dark); box-shadow: var(--shadow); }
.ses-hero.picked { box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
.ses-hero.dead { filter: grayscale(.7); opacity: .8; }
.ses-hero header { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.ses-name { flex: 1; min-width: 0; }
.ses-name strong { display: block; font-family: var(--heading); }
.ses-name small { color: var(--ink-soft); }
.ses-ini { display: flex; flex-direction: column; align-items: center; font-family: var(--heading); font-size: .62rem; letter-spacing: .1em; color: var(--ink-soft); }
.ses-ini input { width: 3.2rem; text-align: center; }
.ses-dead { margin: 0 0 .4rem; color: var(--blood); font-family: var(--heading); }
.ses-buttons, .ses-custom, .ses-pool { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .3rem 0; }
.ses-custom input { width: 4rem; }
.ses-pool span { min-width: 6.5rem; font-size: .9rem; }
.ses-meta { margin: .4rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.lore-search input[type=search] { width: 100%; margin-bottom: .5rem; }
.lore-cats { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.chip-btn { display: inline-flex; gap: .35rem; align-items: center; padding: .2rem .6rem; border-radius: 99px; cursor: pointer; font-family: var(--heading); font-size: .72rem; color: var(--ink); background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.chip-btn.active { background: var(--blood); color: #fff3d6; border-color: var(--blood); }
.chip-btn b { font-size: .68rem; opacity: .75; }
.lore-list { display: grid; gap: .5rem; }
.lore-entry { padding: .5rem .7rem; border-radius: 6px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.lore-entry.secret { border-style: dashed; background: rgba(126, 26, 20, .06); }
.lore-entry summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; cursor: pointer; }
.lore-entry summary strong { font-family: var(--heading); flex: 1; }
.lore-content p { margin: .5rem 0; line-height: 1.55; }
.loot { margin: .4rem 0; font-size: .92rem; }
.loot summary { cursor: pointer; font-family: var(--heading); font-size: .75rem; color: var(--blood); }
.loot ul { margin: .3rem 0; padding-left: 1.1rem; }
.loot-form { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .3rem 0; }
.loot-form select { max-width: 12rem; }
.loot-form .mini { width: 3.6rem; }
.ses-name strong { font-size: .92rem; line-height: 1.2; overflow-wrap: anywhere; }
.ses-ini { flex: none; }

/* ---- Inventar: kompaktes Gepäck ------------------------------------------------ */
.slot-open { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.slot-open:hover { text-decoration: underline; text-underline-offset: 2px; }
.bag-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .2rem 0 .9rem; }
.bag-tools input[type=search] { flex: 1 1 12rem; min-width: 0; }
.bag-tools select { flex: 0 1 auto; }
.segmented { display: inline-flex; border: 1px solid var(--gold-dark); border-radius: 99px; overflow: hidden; }
.segmented .seg { padding: .35rem .8rem; border: 0; cursor: pointer; font-family: var(--heading); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: rgba(255, 250, 235, .7); }
.segmented .seg.active { color: #fff3d6; background: var(--blood); }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .55rem; }
.bag-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-height: 112px; padding: .7rem .4rem .5rem;
  cursor: pointer; font: inherit; color: var(--ink); text-align: center; border-radius: 8px;
  background: radial-gradient(circle at 50% 30%, #fffaf0, #efe0bc); border: 1px solid rgba(110, 78, 38, .4); box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  transition: transform .12s, box-shadow .12s;
}
.bag-tile:hover, .bag-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, .2); outline: none; }
.bag-tile .bag-icon { width: 2.6rem; height: 2.6rem; }
.tile-name { font-family: var(--heading); font-size: .72rem; line-height: 1.2; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-qty { position: absolute; top: .3rem; right: .35rem; min-width: 1.4rem; padding: 0 .3rem; border-radius: 99px; font-family: var(--heading); font-size: .7rem; color: #fff3d6; background: var(--blood); }
.tile-mark { position: absolute; top: .3rem; left: .4rem; font-size: .8rem; color: #b3241c; }
.tile-mark.effect-asp { color: #2c5bb0; }
.tile-mark.effect-kap { color: #c99a1e; }
.bag-tile.r-selten { border: 2px solid var(--r-selten); }
.bag-tile.r-episch { border: 2px solid var(--r-episch); box-shadow: 0 0 10px rgba(146, 70, 208, .35); }
.bag-tile.r-legendaer { border: 2px solid var(--r-legendaer); box-shadow: 0 0 14px rgba(227, 135, 15, .55); }
.bag-tile.r-selten .tile-name { color: #1f5ea8; }
.bag-tile.r-episch .tile-name { color: #6e2aa6; }
.bag-tile.r-legendaer .tile-name { color: #b0610a; }
.bag-list { display: grid; gap: .3rem; }
.bag-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .7rem; align-items: center; width: 100%; padding: .4rem .6rem;
  cursor: pointer; font: inherit; color: var(--ink); text-align: left; border-radius: 6px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line);
  border-left: 4px solid rgba(110, 78, 38, .35);
}
.bag-row:hover, .bag-row:focus-visible { background: #fff8e4; outline: none; }
.bag-row .bag-icon { width: 2rem; height: 2rem; }
.row-name { display: flex; flex-direction: column; min-width: 0; }
.row-name small { color: var(--ink-soft); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-weight { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
.row-qty { font-family: var(--heading); color: var(--blood); }
.bag-row.r-selten { border-left-color: var(--r-selten); }
.bag-row.r-episch { border-left-color: var(--r-episch); }
.bag-row.r-legendaer { border-left-color: var(--r-legendaer); }
.bag-row.r-selten strong { color: #1f5ea8; }
.bag-row.r-episch strong { color: #6e2aa6; }
.bag-row.r-legendaer strong { color: #b0610a; }
@media (max-width: 600px) { .bag-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .row-weight { display: none; } }
.item-detail { padding: .6rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 250, 235, .6); margin-bottom: .7rem; }
.item-detail.r-selten { border: 2px solid var(--r-selten); }
.item-detail.r-episch { border: 2px solid var(--r-episch); }
.item-detail.r-legendaer { border: 2px solid var(--r-legendaer); box-shadow: 0 0 12px rgba(227, 135, 15, .4); }
.item-detail-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .4rem; }
.bag-icon.big { width: 3rem; height: 3rem; }
.item-detail-meta { margin: .3rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.item-effect { margin: .3rem 0; font-weight: 600; }
.item-primary { margin-bottom: .6rem; }
.item-more { margin: .35rem 0; }
.item-more summary { cursor: pointer; font-family: var(--heading); font-size: .78rem; letter-spacing: .05em; color: var(--blood); }
.item-more .inline-form { margin-top: .4rem; }

/* ---- Handy-Navigation: fünf feste Reiter + „Mehr“ -------------------------------- */
.mainnav { position: relative; }
.nav-more, .nav-more-panel { display: none; }
@media (max-width: 640px) {
  .mainnav { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .18rem; padding-left: .25rem; padding-right: .25rem; }
  .mainnav > a.secondary { display: none; }
  .nav-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .4rem .1rem; cursor: pointer;
    font-family: var(--heading); font-weight: 700; font-size: .54rem; letter-spacing: .02em; text-transform: uppercase;
    color: var(--parchment-dark); background: rgba(0, 0, 0, .2); border: 1px solid rgba(201, 162, 39, .25); border-radius: 8px;
  }
  .nav-more .icon { width: 1.35rem; height: 1.35rem; }
  .nav-more.active { color: var(--blood); background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment)); border-color: var(--gold); }
  .nav-more-panel:not([hidden]) {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; position: absolute; z-index: 40; top: 100%; left: .4rem; right: .4rem;
    padding: .5rem; border-radius: 0 0 10px 10px; background: var(--noise), linear-gradient(180deg, #2b1c0f, #1a110a); border: 1px solid var(--gold-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
  }
  .nav-more-panel a { display: flex !important; }
}

/* ---- Glocke: Filter und „Alle gelesen“ -------------------------------------------- */
.notif-panel { width: min(420px, calc(100vw - 1.5rem)); }
.userbox .notif-panel button.notif-read, .userbox .notif-panel button.notif-chip {
  width: auto; height: auto; border-radius: 99px; display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--heading); font-size: .66rem; letter-spacing: .04em; cursor: pointer;
}
.userbox .notif-panel button.notif-read { padding: .2rem .6rem; color: #fff3d6; background: var(--forest); border: 1px solid #1f4423; }
.notif-filters { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0 .5rem; }
.userbox .notif-panel button.notif-chip { padding: .18rem .55rem; color: var(--ink); background: rgba(255, 250, 235, .8); border: 1px solid var(--line); }
.userbox .notif-panel button.notif-chip.active { color: #fff3d6; background: var(--blood); border-color: var(--blood); }
.notif-chip b { min-width: 1.1rem; padding: 0 .25rem; border-radius: 99px; color: #fff; background: var(--blood-light); font-size: .62rem; text-align: center; }
.notif-chip.active b { background: rgba(255, 255, 255, .25); }
.userbox .notif-panel a.notif-trade { display: block; margin: .2rem 0 .4rem; padding: .25rem .5rem; border-radius: 6px; background: rgba(236, 210, 126, .4); text-decoration: none; font-size: .9rem; }
.notif-panel li { border-left: 3px solid transparent; }
.notif-panel li.cat-kampf { border-left-color: #b3241c; }
.notif-panel li.cat-handel { border-left-color: #c99a1e; }
.notif-panel li.cat-fraktion { border-left-color: #2c5bb8; }
.notif-panel li.cat-erfolge { border-left-color: #9246d0; }
.notif-panel li.cat-abenteuer { border-left-color: #2f8a43; }
.notif-panel li.unread { background: rgba(236, 210, 126, .35); font-weight: 600; }
.bag-tools input[type=search], .bag-tools select { width: auto; margin: 0; }
.bag-tools input[type=search] { flex: 1 1 14rem; }

/* ---- Zweites Ich: lila Inventar --------------------------------------------------- */
:root { --alter: #7a3fb8; --alter-dark: #3d1c63; --alter-light: #e6d4fb; }
.persona-banner { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; padding: .7rem 1rem; border-radius: 8px; color: var(--ink); background: rgba(255, 244, 210, .85); border: 1px solid var(--gold-dark); }
.persona-banner.alter { color: #f5ecff; background: linear-gradient(135deg, #2c1147, #5b2a8c); border-color: #b48ae6; box-shadow: 0 0 22px rgba(146, 70, 208, .45); }
.persona-banner strong { font-family: var(--heading); letter-spacing: .04em; }
.persona-banner p { margin: .15rem 0 0; font-size: .95rem; font-style: italic; }
.persona-mask { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.4rem; background: radial-gradient(circle at 35% 30%, #fff1b8, #d9aa3a); color: #5c3d06; }
.persona-banner.alter .persona-mask { background: radial-gradient(circle at 35% 30%, #e6d4fb, #7a3fb8); color: #fff; box-shadow: 0 0 12px rgba(200, 160, 255, .8); }
.persona-line { margin: .3rem 0 0; font-family: var(--heading); font-size: .85rem; letter-spacing: .06em; color: #c9a6f2; text-shadow: 0 0 8px rgba(146, 70, 208, .8); }

/* Hat das zweite Ich die Kontrolle, färbt sich das ganze Inventar lila. */
#app.persona-alter .card:not(.vault-card):not(.persona-stash) {
  background: var(--noise), linear-gradient(180deg, #f1e6ff, #dcc6f5);
  border-color: var(--alter);
  box-shadow: 0 0 0 1px rgba(122, 63, 184, .5), 0 0 26px rgba(122, 63, 184, .35), var(--shadow);
}
#app.persona-alter .card:not(.vault-card):not(.persona-stash) h2 { color: var(--alter-dark); }
#app.persona-alter .vault-card h2 { color: #d9bcff; }
#app.persona-alter .card h2::after { filter: hue-rotate(250deg) saturate(1.4); }
#app.persona-alter .slot.filled, #app.persona-alter .slot.empty { background: rgba(250, 244, 255, .8); border-color: rgba(122, 63, 184, .45); }
#app.persona-alter .slot.filled .slot-icon { background: radial-gradient(circle at 35% 30%, #a86ee6, #3d1c63); border-color: #c9a6f2; }
#app.persona-alter .doll-figure g { stroke: #b48ae6; }
#app.persona-alter .card:not(.persona-stash) .bag-tile { background: radial-gradient(circle at 50% 30%, #fbf7ff, #e3d1f7); border-color: rgba(122, 63, 184, .5); }
#app.persona-alter .bag-row { background: rgba(250, 244, 255, .85); border-color: rgba(122, 63, 184, .35); }
#app.persona-alter .card:not(.persona-stash) .bag-icon { background: linear-gradient(180deg, #8a4fcc, #3d1c63); }
#app.persona-alter .chips a.active, #app.persona-alter .segmented .seg.active { background: var(--alter); border-color: var(--alter); color: #fff; }
#app.persona-alter .segmented { border-color: var(--alter); }
#app.persona-alter .doll-stats div { background: linear-gradient(180deg, #7a3fb8, #3d1c63); }
#app.persona-alter .vault-card { border-color: #b48ae6; box-shadow: 0 0 22px rgba(122, 63, 184, .4); }
#app.persona-alter .tabs a.active { background: linear-gradient(180deg, #c9a6f2, #7a3fb8); color: #fff; }

/* Ruhendes Gepäck: lila, wenn es dem zweiten Ich gehört */
.persona-stash .bag-tile.locked { cursor: default; opacity: .75; filter: saturate(.7); }
.persona-stash .bag-tile.locked:hover { transform: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.persona-stash.alter { background: var(--noise), linear-gradient(180deg, #efe2ff, #d8c0f3); border-color: var(--alter); box-shadow: 0 0 0 1px rgba(122, 63, 184, .5), var(--shadow); }
.persona-stash.alter h2 { color: var(--alter-dark); }
.persona-stash.alter .bag-tile { background: radial-gradient(circle at 50% 30%, #fbf7ff, #e3d1f7); border-color: rgba(122, 63, 184, .5); }
.persona-stash.alter .bag-icon { background: linear-gradient(180deg, #8a4fcc, #3d1c63); }
.tile-mark.worn { left: auto; right: .35rem; top: auto; bottom: .3rem; font-size: .7rem; color: var(--ink-soft); }

.persona-switch { margin-top: .6rem; padding: .7rem .9rem; border-radius: 8px; text-align: center; background: rgba(255, 244, 210, .9); border: 1px solid var(--gold-dark); animation: persona-in .6s ease-out; }
.persona-switch.alter { color: #f5ecff; background: linear-gradient(135deg, #2c1147, #6a35a3); border-color: #b48ae6; box-shadow: 0 0 24px rgba(146, 70, 208, .6); }
.persona-switch strong { font-family: var(--heading); font-size: 1.1rem; letter-spacing: .05em; }
.persona-switch p { margin: .2rem 0 0; font-style: italic; }
@keyframes persona-in { from { opacity: 0; transform: scale(.92); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .persona-switch { animation: none; } }
.persona-gm.alter { border-color: var(--alter); box-shadow: 0 0 0 1px rgba(122, 63, 184, .5), 0 0 22px rgba(122, 63, 184, .3), var(--shadow); }
.persona-gm h2 { color: var(--alter-dark); }
.persona-gm-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; padding: .5rem .7rem; border-radius: 6px; background: rgba(122, 63, 184, .1); }
.ses-persona { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .2rem 0 .4rem; padding: .25rem .5rem; border-radius: 6px; font-size: .9rem; background: rgba(255, 244, 210, .7); }
.ses-persona.alter { color: #f5ecff; background: linear-gradient(135deg, #2c1147, #5b2a8c); }
.ses-persona span { flex: 1; font-family: var(--heading); font-size: .8rem; }

/* ---- Beute im Kampf, Truhen -------------------------------------------------------- */
.hp-hidden { display: flex; justify-content: space-between; margin-top: .3rem; padding: .3rem .5rem; border-radius: 6px; font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; color: var(--ink-soft); background: repeating-linear-gradient(135deg, rgba(110, 78, 38, .12) 0 6px, transparent 6px 12px); border: 1px dashed var(--line); }
.fighter-loot { margin: .3rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.combat-settings { display: grid; gap: .25rem; margin-top: .6rem; font-size: .95rem; }
.creature-form .drop-pick { margin: .3rem 0 .8rem; }
.drop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem .8rem; font-size: .92rem; }
.loot-rows { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: grid; gap: .25rem; }
.loot-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 6px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.loot-rows .rarity-text { flex: 1; font-weight: 600; }
.loot-chance { font-family: var(--heading); color: var(--blood); }
.btn.chest-btn { background: linear-gradient(180deg, #c99a1e, #7d5c12); color: #fff8e0; }
.chest-result { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: 1.05rem; }
.chest-result li { padding: .4rem .6rem; border-radius: 6px; background: rgba(236, 210, 126, .35); border: 1px solid var(--gold-dark); animation: persona-in .5s ease-out both; }
.chest-result li:nth-child(2) { animation-delay: .1s; } .chest-result li:nth-child(3) { animation-delay: .2s; } .chest-result li:nth-child(4) { animation-delay: .3s; }
.tile-mark.chest { left: .4rem; color: #8a6a1c; }
.rarity-text.r-gewoehnlich { color: var(--ink); }
.drop-list { grid-template-columns: 1fr; gap: .15rem; }
.drop-list .check { display: flex; gap: .4rem; align-items: baseline; }
.fighter-head .btn.tiny .icon, .fighter-loot .icon { width: .9rem; height: .9rem; vertical-align: -2px; }

/* ---- Wanderhändler ---------------------------------------------------------------- */
.shop-head {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; margin: 0 0 1.2rem; padding: 1rem 1.3rem; border-radius: 10px;
  color: var(--parchment-light); background: var(--noise), radial-gradient(ellipse at 10% 0, #5a3a16, #1d130b 75%);
  border: 1px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 0 3px rgba(201, 162, 39, .15);
}
.shop-head h2 { margin: 0; color: var(--gold-light); }
.shop-head p { margin: .2rem 0 0; font-style: italic; color: #e2cfa8; }
.shop-timer { display: flex; flex-direction: column; align-items: center; padding: .4rem .9rem; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .45); }
.shop-timer small { font-family: var(--heading); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.shop-clock { font-family: var(--heading); font-size: 1.6rem; font-variant-numeric: tabular-nums; color: #ffd36b; text-shadow: 0 0 10px rgba(255, 200, 80, .5); }
@media (max-width: 700px) { .shop-head { grid-template-columns: 1fr; text-align: center; } }

.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.2rem; }
@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shop-grid { grid-template-columns: 1fr; } }
.shop-slot {
  --rc: #8a6a1c;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; min-height: 300px; padding: 1.3rem 1rem 1rem;
  cursor: pointer; font: inherit; color: var(--ink); text-align: center; border-radius: 12px; overflow: hidden;
  background: var(--noise), radial-gradient(circle at 50% 32%, #fffaf0 0, #f1e1bb 55%, #dcc591 100%);
  border: 2px solid var(--rc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .35);
  transition: transform .15s, box-shadow .15s;
}
.shop-slot:hover, .shop-slot:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 24px color-mix(in srgb, var(--rc) 70%, transparent), 0 14px 26px rgba(0, 0, 0, .4); outline: none; }
.shop-slot.r-selten { --rc: var(--r-selten); }
.shop-slot.r-episch { --rc: var(--r-episch); background: var(--noise), radial-gradient(circle at 50% 32%, #fbf6ff 0, #eadbf9 55%, #d6bdef 100%); }
.shop-slot.r-legendaer { --rc: var(--r-legendaer); background: var(--noise), radial-gradient(circle at 50% 32%, #fffbea 0, #fbe2a6 55%, #eec06a 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 22px rgba(227, 135, 15, .55), 0 8px 18px rgba(0, 0, 0, .35); }
.shop-slot.sold { filter: grayscale(.8); opacity: .65; }
.shop-kind { font-family: var(--heading); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.shop-icon { display: inline-flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; margin: .3rem 0; border-radius: 50%; color: #f8e7b6; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rc) 75%, #fff), color-mix(in srgb, var(--rc) 80%, #000)); border: 3px solid var(--gold); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 60%, transparent), inset 0 -6px 12px rgba(0, 0, 0, .3); }
.shop-icon .icon { width: 3rem; height: 3rem; }
.shop-icon.big { width: 4.2rem; height: 4.2rem; flex: none; --rc: inherit; }
.shop-icon.big .icon { width: 2.1rem; height: 2.1rem; }
.shop-name { font-family: var(--heading); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.shop-slot.r-selten .shop-name { color: #1f5ea8; }
.shop-slot.r-episch .shop-name { color: #6e2aa6; }
.shop-slot.r-legendaer .shop-name { color: #9a520a; }
.shop-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.shop-price { margin-top: auto; font-size: 1.2rem; }
.shop-price s, .shop-buy s { margin-right: .35rem; color: var(--ink-soft); font-size: .85em; }
.shop-stock { font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.shop-ribbon { position: absolute; top: 14px; right: -34px; padding: .2rem 2.6rem; transform: rotate(35deg); font-family: var(--heading); font-weight: 700; font-size: .78rem; color: #fff3d6; background: linear-gradient(180deg, #b3261e, #7e1a14); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }

.dialog.shop-dialog { max-width: min(640px, calc(100vw - 2rem)); }
.dialog.shop-dialog.r-selten { box-shadow: 0 0 0 2px var(--r-selten), 0 20px 60px rgba(0, 0, 0, .6); }
.dialog.shop-dialog.r-episch { box-shadow: 0 0 0 2px var(--r-episch), 0 0 30px rgba(146, 70, 208, .45), 0 20px 60px rgba(0, 0, 0, .6); }
.dialog.shop-dialog.r-legendaer { box-shadow: 0 0 0 2px var(--r-legendaer), 0 0 36px rgba(227, 135, 15, .55), 0 20px 60px rgba(0, 0, 0, .6); }
.shop-detail-head { --rc: #8a6a1c; display: flex; gap: .9rem; align-items: center; margin-bottom: .6rem; }
.shop-detail-head.r-selten { --rc: var(--r-selten); }
.shop-detail-head.r-episch { --rc: var(--r-episch); }
.shop-detail-head.r-legendaer { --rc: var(--r-legendaer); }
.shop-detail-head .desc { margin: .4rem 0 0; }
.shop-section { margin: .9rem 0; }
.shop-section h3 { display: flex; align-items: center; gap: .35rem; margin: .2rem 0 .5rem; font-size: .85rem; letter-spacing: .1em; color: var(--blood); }
.shop-damage { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .6rem; }
.shop-damage div { display: flex; flex-direction: column; align-items: center; padding: .5rem; border-radius: 8px; background: linear-gradient(180deg, #8e1b18, #5a100b); color: #fff3d6; border: 1px solid var(--gold-dark); }
.shop-damage small { font-family: var(--heading); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
.shop-damage strong { font-family: var(--heading); font-size: 1.2rem; }
.shop-facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0; }
.shop-facts dt { font-family: var(--heading); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-top: .15rem; }
.shop-facts dd { margin: 0; }
.shop-compare { margin: .6rem 0; padding: .45rem .7rem; border-radius: 6px; background: rgba(110, 78, 38, .1); }
.shop-compare.up { background: rgba(46, 99, 52, .14); color: #1f4423; }
.shop-compare.down { background: rgba(126, 26, 20, .1); color: var(--blood); }
.shop-chest { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.shop-chest li { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; border-bottom: 1px dashed var(--line); }
.shop-buy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 1.2rem; }
.shop-buy small { font-size: .82rem; color: var(--ink-soft); }
.dialog.shop-dialog { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* ---- Kampfbühne ------------------------------------------------------------ */
.arena {
  position: relative; margin: 0 0 1.2rem; padding: .9rem 1rem 1rem; border-radius: 12px; overflow: hidden; color: #f1e3bf;
  background:
    radial-gradient(ellipse 70% 40% at 50% 92%, rgba(201, 120, 39, .22), transparent 70%),
    radial-gradient(ellipse 50% 60% at 18% 30%, rgba(70, 110, 170, .16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 82% 30%, rgba(170, 40, 30, .2), transparent 70%),
    linear-gradient(180deg, #1b130d 0%, #120c08 60%, #24170c 100%);
  border: 2px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 60px rgba(0, 0, 0, .6);
}
.arena::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 3.2rem; height: 40%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(120, 82, 40, .28), transparent 70%); pointer-events: none; }
.arena > * { position: relative; z-index: 1; }
.arena.over .arena-stage { filter: saturate(.75); }
.arena-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.arena-round { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: radial-gradient(circle, #3a2614, #140d08); border: 2px solid var(--gold); box-shadow: 0 0 14px rgba(201, 162, 39, .35); }
.arena-round small { font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; }
.arena-round strong { font-family: var(--display); font-size: 1.3rem; line-height: 1; color: #ffd36b; }
.arena-ticker { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; font-size: .9rem; }
.arena-ticker .entry { padding: .1rem 0; border: 0; background: none; color: #e9d8ae; }
.arena-ticker .entry:not(:first-child) { opacity: .55; font-size: .82rem; }
.arena-ticker .entry-icon { color: var(--gold); }
.arena-ticker .entry strong { color: #fff0c4; }
.arena-ticker .entry.system { justify-content: flex-start; font-family: var(--body); font-size: .9rem; letter-spacing: 0; text-transform: none; color: #f3d67a; font-style: italic; }
.arena-ticker .dmg { color: #ff8a77; }
.arena-ticker .heal { color: #8fe38a; }
.arena-ticker .entry-icon { flex: none; }
.arena-xp { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 99px; font-family: var(--heading); font-size: .75rem; color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); }
.arena-xp .icon { width: 14px; height: 14px; }

.arena-field { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: .6rem; }
.arena-vs { align-self: center; }
.arena-side h3 { margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .5rem; font-family: var(--heading); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.arena-side.foes h3 { justify-content: flex-end; color: #f0a497; }
.arena-side h3 small { font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: .8rem; color: #b9a57a; }
.arena-tokens { display: flex; flex-wrap: wrap; gap: .7rem; }
.arena-side.foes .arena-tokens { justify-content: flex-end; }
.arena-empty { margin: 0; color: #9c8a66; font-style: italic; }
.arena-vs span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; font-family: var(--display); font-size: .8rem; color: #ffd36b; background: #1d130b; border: 1px solid var(--gold-dark); box-shadow: 0 0 18px rgba(201, 62, 39, .4); }

.token {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 8.2rem; padding: .55rem .45rem .5rem;
  border-radius: 12px; cursor: pointer; font: inherit; color: inherit; text-align: center;
  background: linear-gradient(180deg, rgba(255, 240, 200, .07), rgba(0, 0, 0, .25)); border: 1px solid rgba(201, 162, 39, .35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.token:hover { transform: translateY(-2px); border-color: var(--gold); }
.token:focus-visible { outline: 2px solid #ffd36b; outline-offset: 2px; }
.token.selected { border: 2px solid #ffd36b; box-shadow: 0 0 0 3px rgba(255, 211, 107, .18), 0 0 22px rgba(255, 211, 107, .35); }
.token.foes.selected { border-color: #ff7a66; box-shadow: 0 0 0 3px rgba(255, 122, 102, .2), 0 0 22px rgba(255, 90, 70, .45); }
.token.me { background: linear-gradient(180deg, rgba(243, 214, 122, .18), rgba(0, 0, 0, .25)); }
.token-ini { position: absolute; top: .3rem; left: .35rem; min-width: 1.4rem; height: 1.4rem; padding: 0 .25rem; display: grid; place-items: center; border-radius: 99px; font-size: .72rem; font-weight: 700; color: #1d130b; background: var(--gold-light); }
.token-me { position: absolute; top: .3rem; right: .35rem; padding: .05rem .4rem; border-radius: 99px; font-family: var(--heading); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #1d130b; background: #8fd18a; }
.token-art { display: grid; place-items: center; width: 5.4rem; height: 5.4rem; }
.token-art .portrait-lg { width: 5rem; height: 5rem; }
.token-art .portrait-lg .portrait-initial { font-size: 2.2rem; }
.token.foes.hero .token-art .portrait { border-color: #b3241c; }
.token-name { font-family: var(--heading); font-size: .78rem; line-height: 1.2; color: #fff0c4; overflow-wrap: anywhere; }
.token-hp { position: relative; display: block; width: 100%; height: 1rem; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .6); border: 1px solid rgba(201, 162, 39, .4); }
.token-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #5fc35a, #2f7a3d); transition: width .5s ease; }
.token-hp.mid i { background: linear-gradient(180deg, #f0c64a, #b8871a); }
.token-hp.low i { background: linear-gradient(180deg, #ff6b57, #a3241d); }
.token-hp em { position: relative; display: block; font-style: normal; font-size: .68rem; line-height: 1rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.token-hp.hidden { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .6) 0 6px, rgba(60, 40, 20, .6) 6px 12px); }
.token.down { opacity: .55; }
.token.down .token-art { filter: grayscale(1) brightness(.6); transform: rotate(-8deg); }
.token-down { position: absolute; top: 2.1rem; left: 50%; transform: translateX(-50%); color: #ff8a77; }
.token-down .icon { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 0 6px #000); }
.token-float { position: absolute; top: 1.6rem; left: 50%; font-family: var(--display); font-size: 1.6rem; font-weight: 900; pointer-events: none; text-shadow: 0 2px 4px #000, 0 0 12px currentColor; animation: token-float 2.6s ease-out forwards; }
.token-float.dmg { color: #ff6b57; }
.token-float.heal { color: #8fe38a; }
@keyframes token-float { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -42px) scale(1); } }
.token.hit { animation: token-shake .45s ease; }
@keyframes token-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .token-float { animation-duration: .01s; opacity: 1; } .token, .token-hp i { transition: none; } }

/* Gestalten */
.creature-art { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.creature-art .cr-body, .creature-art .cr-wing { fill: #0b0705; stroke: rgba(201, 162, 39, .55); stroke-width: 1.2; }
.creature-art .cr-wing { fill: #1d0f0c; }
.creature-art .cr-shade { fill: #000; }
.creature-art .cr-bone { fill: #e9dcc0; stroke: #6b5a3e; stroke-width: 1.2; }
.creature-art .cr-line { fill: none; stroke: #c7b48a; stroke-width: 3; stroke-linecap: round; }
.creature-art .cr-line.bone { stroke: #e9dcc0; stroke-width: 3.2; }
.creature-art .cr-line.thick { stroke: #0b0705; stroke-width: 5; }
.creature-art.cr-spinne .cr-line.thick { stroke: #0b0705; stroke-width: 4; filter: drop-shadow(0 0 1px rgba(201, 162, 39, .6)); }
.creature-art .cr-tusk { fill: #f3e7c6; }
.creature-art .shield { fill: #2b1612; }
.creature-art .cr-eye { fill: #ff5a3c; filter: drop-shadow(0 0 3px #ff5a3c); }
.creature-art.cr-skelett .cr-eye { fill: #1d130b; filter: none; }
.creature-art.cr-schatten .cr-eye { fill: #b88bff; filter: drop-shadow(0 0 4px #b88bff); }
.creature-art.cr-ritter .cr-eye { fill: #7fd7ff; filter: drop-shadow(0 0 4px #7fd7ff); }
.token.selected .creature-art .cr-body { stroke: #ffd36b; }

.arena-order { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .8rem 0 0; font-size: .78rem; }
.arena-order small { font-family: var(--heading); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #b9a57a; margin-right: .2rem; }
.arena-order span { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem .1rem .15rem; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 162, 39, .25); }
.arena-order span b { display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; border-radius: 99px; font-size: .66rem; color: #1d130b; background: #9fc0f0; }
.arena-order span.foes b { background: #f0a497; }
.arena-order span.down { opacity: .45; text-decoration: line-through; }
.arena-order span.selected { border-color: #ffd36b; color: #ffd36b; }
.arena-info { margin: .6rem 0 0; font-size: .9rem; color: #d9c79c; }
.arena-info strong { color: #fff0c4; font-family: var(--heading); font-size: .8rem; }
.arena-stats { display: block; margin-top: .15rem; font-size: .8rem; color: #f0a497; }

.arena-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem; padding: .7rem; border-radius: 10px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(201, 162, 39, .35); }
.arena-bar.gm select, .arena-bar.gm input { max-width: 11rem; color: #f3e2b0; background: #1d130b; border: 1px solid var(--gold-dark); border-radius: 6px; padding: .45rem .5rem; }
.arena-bar.gm input::placeholder { color: #8f7d5a; }
.arena-weapon { display: flex; align-items: center; gap: .5rem; }
.arena-weapon strong { display: block; font-family: var(--heading); font-size: .85rem; color: #fff0c4; }
.arena-weapon small { color: #b9a57a; }
.arena-wlevel { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 8px; font-family: var(--display); font-size: 1.1rem; color: #ffd36b; background: #1d130b; border: 2px solid var(--gold-dark); }
.arena-target { display: flex; flex-direction: column; padding: .2rem .7rem; border-left: 1px solid rgba(201, 162, 39, .3); border-right: 1px solid rgba(201, 162, 39, .3); }
.arena-target small { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #b9a57a; }
.arena-target strong { font-family: var(--heading); font-size: .85rem; color: #ff9a88; }
.arena-actions { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.arena-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-width: 6.4rem; padding: .45rem .7rem;
  border-radius: 8px; cursor: pointer; font-family: var(--heading); font-size: .72rem; color: #f3e2b0;
  background: linear-gradient(180deg, #4a3120, #24170f); border: 1px solid var(--gold-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.arena-btn small { font-family: var(--body); font-size: .74rem; color: #d9c79c; }
.arena-btn .icon { width: 16px; height: 16px; }
.arena-btn:hover:not(:disabled) { border-color: var(--gold); color: #fff; }
.arena-btn.attack { background: linear-gradient(180deg, #a8322a, #6a1510); border-color: #e06b5c; }
.arena-btn.heal { background: linear-gradient(180deg, #2f7a3d, #18451f); border-color: #6fc07a; }
.arena-btn.ult:not(:disabled) { border-color: #ffd36b; box-shadow: 0 0 12px rgba(255, 211, 107, .35); }
.arena-btn.locked, .arena-btn:disabled { opacity: .45; cursor: not-allowed; }
.arena-hint { flex-basis: 100%; margin: 0; font-size: .8rem; color: #9c8a66; }
.arena-hint a { color: var(--gold-light); }
.arena-result { margin-top: 1rem; padding: 1rem; border-radius: 10px; text-align: center; background: rgba(0, 0, 0, .4); border: 1px solid rgba(201, 162, 39, .45); }
.arena-result h2 { margin: 0 0 .3rem; font-family: var(--display); color: #ffd36b; text-shadow: 0 0 18px rgba(255, 211, 107, .45); }
.arena-result .hint, .arena-result .hint a { color: #b9a57a; }
.arena-result .xp-alloc { text-align: left; margin-top: .8rem; }
@media (max-width: 760px) {
  .arena { padding: .7rem .6rem .8rem; }
  .arena-field { grid-template-columns: 1fr; }
  .arena-vs { justify-self: center; }
  .arena-side.foes h3, .arena-side.foes .arena-tokens { justify-content: flex-start; }
  .token { width: calc(50% - .35rem); }
  .arena-top { flex-wrap: wrap; }
  .arena-ticker { flex-basis: calc(100% - 4.2rem); }
  .arena-btn { min-width: 0; flex: 1 1 calc(50% - .4rem); }
  .arena-target { border: 0; padding: 0; }
}

/* ---- Kampferfahrung verteilen ------------------------------------------------ */
.xp-alloc { display: grid; gap: .55rem; padding: .9rem 1rem; border-radius: 10px; color: var(--ink); background: linear-gradient(180deg, var(--parchment-light), var(--parchment)); border: 1px solid var(--gold-dark); }
.xa-head { display: flex; align-items: center; gap: .8rem; }
.xa-head h3 { margin: 0; color: var(--ink); }
.xa-head p { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.xa-orb { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: #1d130b; background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); box-shadow: 0 0 14px rgba(201, 162, 39, .6); }
.xa-pool { margin-left: auto; text-align: center; }
.xa-pool small { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.xa-left { font-family: var(--display); font-size: 1.7rem; color: var(--blood); }
.xa-quick { display: flex; flex-wrap: wrap; gap: .35rem; }
.xa-row { display: grid; grid-template-columns: minmax(10rem, 1.3fr) minmax(6rem, 2fr) 4.6rem; grid-template-areas: "label range num" "label prev prev"; align-items: center; gap: .1rem .6rem; padding: .45rem .55rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.xa-label { grid-area: label; }
.xa-label strong { display: block; font-family: var(--heading); font-size: .82rem; }
.xa-label small { color: var(--ink-soft); font-size: .8rem; }
.xa-row input[type=range] { grid-area: range; width: 100%; accent-color: var(--blood); }
.xa-row input[type=number] { grid-area: num; width: 100%; }
.xa-preview { grid-area: prev; min-height: 1em; font-size: .8rem; color: var(--forest); font-weight: 600; }
@media (max-width: 600px) { .xa-row { grid-template-columns: 1fr 4.6rem; grid-template-areas: "label label" "range num" "prev prev"; } .xa-head { flex-wrap: wrap; } }

/* Waffenstufen im Fähigkeitsbaum */
.st-ladder { list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: .3rem 0 .5rem; padding: 0; }
.st-ladder li { display: grid; place-items: center; height: 1.5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; color: var(--ink-soft); background: rgba(110, 78, 38, .12); border: 1px solid var(--line); }
.st-ladder li.tech { border-style: dashed; border-color: var(--blood); }
.st-ladder li.done { color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); border-color: var(--gold-dark); border-style: solid; }
.st-ladder li.next { outline: 2px solid var(--blood); outline-offset: 1px; }
.st-upgrade { display: grid; gap: .2rem; margin: .3rem 0 .6rem; }
.st-upgrade .btn { justify-self: start; }
.st-upgrade small { font-size: .8rem; color: var(--ink-soft); }
.st-max { margin: .3rem 0 .6rem; font-family: var(--heading); color: var(--gold-dark); }
.st-wallet { font-family: var(--heading); font-size: .85rem; color: var(--ink-soft); }

/* ---- Update-Paket: kleine Bausteine ---- */
.gm-preview-note { display: flex; align-items: center; gap: .4rem; margin: 0 0 .8rem; padding: .5rem .8rem; border-radius: 8px; font-size: .9rem; color: #f3e2b0; background: rgba(29, 19, 11, .85); border: 1px dashed var(--gold-dark); }
.profile-list { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 .6rem; }
.profile-list dt { font-family: var(--heading); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.profile-list dd { margin: 0; }
.gm-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .6rem; }
.gm-progress div { text-align: center; padding: .4rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.gm-progress small { display: block; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gm-progress strong { font-family: var(--display); font-size: 1.2rem; }
.gm-recipes { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.gm-recipes li { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border-radius: 6px; border: 1px dashed var(--line); }
.gm-recipes li.known { border-style: solid; background: rgba(236, 210, 126, .25); }
.gm-recipes li .btn { margin-left: auto; }
/* Lange Rohstoffnamen (z. B. Drachenschuppe) brechen in die zweite Zeile um statt zu überlaufen. */
.material { align-items: center; min-width: 0; }
.material span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; }
.gm-materials td .desc { font-size: .8rem; }
/* Markt: kompakte Kacheln, Details im Dialog */
.wares.compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .6rem; }
.ware-tile {
  --rc: #8a7a5c; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-height: 7.2rem; padding: .7rem .75rem;
  border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 250, 235, .85), rgba(236, 220, 180, .7)); border: 1px solid var(--line); border-top: 4px solid var(--rc);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ware-tile.r-selten { --rc: #2c6fb0; } .ware-tile.r-episch { --rc: #7a3fb0; } .ware-tile.r-legendaer { --rc: #c9861a; }
.ware-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.ware-tile:focus-visible { outline: 2px solid var(--blood); outline-offset: 2px; }
.ware-tile.sold { opacity: .55; }
.ware-tile.mine { border-style: dashed; }
.ware-name { font-family: var(--heading); font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
.ware-bottom { margin-top: auto; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.ware-price s { margin-right: .3rem; color: var(--ink-soft); }
.ware-stock { color: var(--ink-soft); font-size: .78rem; }
.ware-tile.sold .ware-stock { color: var(--blood); font-weight: 700; }
.ware-facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .5rem 0; font-size: .9rem; }
.ware-facts dt { color: var(--ink-soft); }
.ware-facts dd { margin: 0; }
/* Neuigkeiten: antippbar; lange Texte gekürzt, groß im Dialog */
.notif-panel li { cursor: pointer; }
.notif-panel li:hover { background: rgba(236, 210, 126, .18); }
.notif-panel li:focus-visible { outline: 2px solid var(--blood); outline-offset: -2px; }
.notif-panel li .notif-msg { display: block; }
.notif-panel li.long .notif-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-panel li.long::after { content: 'mehr lesen →'; display: block; margin-top: .15rem; font-size: .75rem; font-weight: 600; color: var(--blood); }
.notif-big time { display: block; margin-bottom: .5rem; font-size: .85rem; color: var(--ink-soft); }
.notif-big p { margin: 0; font-size: 1.15rem; line-height: 1.5; white-space: pre-wrap; }
/* Fraktionskarte: eigene Felder leuchten */
.fm-own { fill: rgba(255, 229, 138, .18); stroke: #ffe58a; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(255, 220, 110, .9)); animation: fm-own-glow 2.6s ease-in-out infinite; }
@keyframes fm-own-glow { 0%, 100% { stroke-opacity: .55; fill-opacity: .6; } 50% { stroke-opacity: 1; fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fm-own { animation: none; } }
/* Erfolge: Mysterium und Meilenstein-Truhen */
.ach-group.mystery { background: linear-gradient(180deg, rgba(40, 20, 60, .92), rgba(20, 10, 30, .95)); color: #e9dcf7; border-color: #7a3fb0; }
.ach-group.mystery h2 { color: #d9b8ff; }
.ach-group.mystery .hint { color: #bfa8da; }
.ach-group.mystery .ach { background: rgba(255, 255, 255, .05); border-color: rgba(185, 140, 255, .35); }
.ach-group.mystery .ach h3 { color: #f1e6ff; }
.ach-group.mystery .ach.done { background: rgba(185, 140, 255, .16); }
.ach-riddle { font-style: italic; color: #d9b8ff; }
.ach-revealed { font-size: .9rem; color: #f3d67a; }
.badge-medal.secret.locked { filter: grayscale(.2) drop-shadow(0 0 6px rgba(185, 140, 255, .7)); }
.ach-milestones .ms-track { position: relative; height: 12px; margin: 3.4rem 3.6rem 4rem 3rem; border-radius: 99px; background: rgba(0, 0, 0, .15); border: 1px solid var(--line); }
.ach-milestones .ms-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #8a6a1c, #f3d67a); }
/* Jede Stufe: Truhe über der Linie, Punkt auf der Linie, Zahl und Name darunter – alle auf gleicher Höhe. */
.ach-milestones .ms-stop { position: absolute; top: 0; bottom: 0; width: 0; }
.ach-milestones .ms-chest { position: absolute; left: 0; bottom: calc(100% + 10px); transform: translateX(-50%); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: var(--ink-soft); background: var(--parchment-light); border: 2px solid var(--line); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.ach-milestones .ms-chest::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 8px; margin-left: -1px; background: var(--line); }
.ach-milestones .ms-dot { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--parchment-light); border: 2px solid var(--line); }
.ach-milestones .ms-label { position: absolute; left: 0; top: calc(100% + 10px); transform: translateX(-50%); width: 7rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center; }
.ach-milestones .ms-stop.reached .ms-chest { color: #1d130b; background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); border-color: var(--gold-dark); box-shadow: 0 0 12px rgba(201, 162, 39, .6); }
.ach-milestones .ms-stop.reached .ms-chest::after { background: var(--gold-dark); }
.ach-milestones .ms-stop.reached .ms-dot { background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); border-color: var(--gold-dark); }
.ach-milestones .ms-label b { font-family: var(--display); font-size: 1rem; line-height: 1; color: var(--ink); }
.ach-milestones .ms-label small { font-size: .7rem; color: var(--ink-soft); line-height: 1.15; }
@media (max-width: 600px) { .ach-milestones .ms-label { width: 3.6rem; } .ach-milestones .ms-label small { display: none; } .ach-milestones .ms-track { margin: 3.2rem 1.6rem 2.4rem; } }
/* Katalog: kompakte Listen */
.cat-tools { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.cat-tools input[type=search] { flex: 1; }
.cat-count { color: var(--ink-soft); white-space: nowrap; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.cat-chip { padding: .2rem .6rem; border-radius: 99px; cursor: pointer; font: inherit; font-size: .82rem; color: var(--ink); background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.cat-chip.active { color: #fff3c4; background: var(--blood); border-color: var(--blood); }
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 70vh; overflow-y: auto; }
.cat-row { --rc: transparent; display: flex; align-items: center; gap: .45rem; width: 100%; padding: .45rem .6rem; border-radius: 6px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); background: rgba(255, 250, 235, .55); border: 1px solid var(--line); border-left: 4px solid var(--rc); }
.cat-row.static { cursor: default; }
.cat-row.r-selten { --rc: #2c6fb0; } .cat-row.r-episch { --rc: #7a3fb0; } .cat-row.r-legendaer { --rc: #c9861a; }
.cat-row:not(.static):hover { background: rgba(236, 210, 126, .35); }
.cat-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cat-price { margin-left: auto; white-space: nowrap; color: var(--ink-soft); }
.cat-sub { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.cat-sub h3 { display: flex; align-items: center; gap: .3rem; }
.dialog.wide-dialog { width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.ingredient { margin-bottom: .3rem; }
@media (max-width: 600px) { .cat-row { flex-wrap: wrap; } .cat-row .cat-name { flex-basis: 100%; } }
/* ---- Clans: Kürzel, Mitglieder, Kosmetik ---- */
.clan-tag { font-family: var(--heading); font-size: .75em; color: var(--ink-soft); letter-spacing: .04em; }
.clan-banner .clan-tag { color: var(--gold-light); }
.hint.warn { color: var(--blood); font-weight: 600; }
.clan-members-peek { margin: .2rem 0 0 3.6rem; font-size: .9rem; }
.clan-members-peek summary { cursor: pointer; color: var(--ink-soft); }
.clan-members-peek ul { margin: .3rem 0 0; padding-left: 1.1rem; columns: 2; }
.cosm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .4rem; margin: .4rem 0 .6rem; }
.cosm-option { display: flex; gap: .45rem; align-items: flex-start; padding: .45rem .55rem; border-radius: 8px; cursor: pointer; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.cosm-option.on { background: rgba(236, 210, 126, .4); border-color: var(--gold-dark); }
.cosm-option strong { display: block; font-family: var(--heading); font-size: .8rem; }
.cosm-option small { color: var(--ink-soft); }
.cosm-unlock { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.cosm-design { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.clan-emblem-wrap { position: relative; display: inline-block; flex: none; }

/* Effekte am Banner (gelten auch in den Ranglisten) */
.fx-glanz .clan-emblem-wrap svg, .rk-banner.fx-glanz svg { filter: drop-shadow(0 0 6px rgba(255, 215, 110, .9)); animation: fx-shine 3s ease-in-out infinite; }
@keyframes fx-shine { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 215, 110, .6)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 230, 150, 1)); } }
.fx-aura .clan-emblem-wrap::before, .rk-banner.fx-aura::before { content: ''; position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(120, 180, 255, .55), transparent 70%); animation: fx-pulse 2.4s ease-in-out infinite; z-index: -1; }
@keyframes fx-pulse { 0%, 100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
.fx-flammen .clan-emblem-wrap::after, .rk-banner.fx-flammen::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 45%; border-radius: 50% 50% 20% 20%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 30, .85), rgba(255, 60, 20, .4) 45%, transparent 70%); filter: blur(2px); animation: fx-flame 1.2s ease-in-out infinite alternate; z-index: -1; }
@keyframes fx-flame { from { transform: scaleY(.85); opacity: .7; } to { transform: scaleY(1.15); opacity: 1; } }
.fx-goldname .clan-banner h1 { background: linear-gradient(180deg, #fff3c4, #c9a227 60%, #8a6a1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { [class*='fx-'] *, .clan-sparks i { animation: none !important; } }

/* Hintergründe der Clanseite */
.clan-page { position: relative; }
.clan-page.clan-bg { padding: 1rem; border-radius: 14px; }
.clan-bg-sternennacht { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent), radial-gradient(1px 1px at 85% 55%, #fff, transparent), linear-gradient(180deg, #0b1230, #1c1840 60%, #2a1c3a); }
.clan-bg-feuer { background: radial-gradient(ellipse at 50% 110%, rgba(255, 120, 20, .7), transparent 60%), linear-gradient(180deg, #2a0d06, #5a1a0a); }
.clan-bg-nordlicht { background: linear-gradient(160deg, rgba(60, 255, 180, .35), transparent 40%), linear-gradient(200deg, rgba(120, 90, 255, .35), transparent 50%), linear-gradient(180deg, #071a24, #0c2a33); }
.clan-bg-waldnebel { background: radial-gradient(ellipse at 30% 80%, rgba(220, 230, 210, .35), transparent 60%), linear-gradient(180deg, #13261a, #24402a); }
.clan-bg-blutmond { background: radial-gradient(circle at 80% 18%, #c0392b 0 5%, rgba(192, 57, 43, .35) 9%, transparent 22%), linear-gradient(180deg, #1a0606, #360c0c); }
.clan-bg-tiefsee { background: radial-gradient(ellipse at 50% 0%, rgba(80, 180, 255, .35), transparent 60%), linear-gradient(180deg, #04192e, #072a45); }
.clan-bg-goldsaal { background: repeating-linear-gradient(90deg, rgba(255, 220, 120, .08) 0 2px, transparent 2px 60px), linear-gradient(180deg, #3a2a10, #5c4214); }
.clan-bg > .alliance-bar, .clan-bg > .back { position: relative; }
.clan-bg > .back { color: #f3e2b0; }
.clan-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.clan-sparks i { position: absolute; top: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 6px #ffd36b; animation: fx-spark linear infinite; }
@keyframes fx-spark { from { transform: translateY(0); opacity: 1; } to { transform: translateY(110vh); opacity: 0; } }
.fx-nebel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 90%, rgba(20, 10, 30, .35), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(20, 10, 30, .3), transparent 55%); animation: fx-fog 9s ease-in-out infinite alternate; border-radius: 14px; }
@keyframes fx-fog { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
/* ---- Ranglisten: eine große Liste ---- */
.rk-board { padding: 0; overflow: hidden; }
.rk-board-head { padding: 1rem 1.2rem .6rem; border-bottom: 1px solid var(--line); }
.rk-board-head h2 { margin: 0; }
.rk-board-head p { margin: .2rem 0 0; color: var(--ink-soft); }
.rk-list { list-style: none; margin: 0; padding: 0; }
.rk-row { display: grid; grid-template-columns: 3rem 3.6rem minmax(0, 1.6fr) minmax(4.5rem, .6fr) minmax(0, 1fr) minmax(6rem, auto); align-items: center; gap: .6rem; padding: .45rem 1.2rem; border-bottom: 1px solid rgba(110, 78, 38, .15); }
.rk-row:nth-child(even) { background: rgba(255, 250, 235, .35); }
.rk-row.rk-head { font-family: var(--heading); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); background: rgba(110, 78, 38, .1); }
.rk-rank { font-family: var(--display); font-size: 1.1rem; text-align: center; color: var(--ink-soft); }
.rk-row.top .rk-rank { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin: 0 auto; border-radius: 50%; color: #1d130b; }
.rk-row.gold .rk-rank { background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); box-shadow: 0 0 10px rgba(201, 162, 39, .6); }
.rk-row.silver .rk-rank { background: radial-gradient(circle at 35% 30%, #fff, #a9a9a9); }
.rk-row.bronze .rk-rank { background: radial-gradient(circle at 35% 30%, #f6d3b0, #b06a2c); }
.rk-name { font-family: var(--heading); font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name a { color: inherit; }
.rk-name.gold-name { background: linear-gradient(180deg, #e3b23c, #8a6a1c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.rk-tag { font-family: var(--heading); font-size: .85rem; color: var(--blood); white-space: nowrap; }
.rk-extra { color: var(--ink-soft); font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-value { text-align: right; font-family: var(--heading); font-weight: 700; white-space: nowrap; }
.rk-value small { font-family: var(--body); font-weight: 400; color: var(--ink-soft); }
.rk-value.up { color: var(--forest); }
.rk-value.down { color: var(--blood); }
.rk-row.real { box-shadow: inset 4px 0 0 var(--gold); }
.rk-row.me { background: rgba(236, 210, 126, .45) !important; box-shadow: inset 4px 0 0 var(--blood); }
/* Banner: Stange und Fahnentuch in Clanfarbe, Wappen darauf */
.rk-banner { position: relative; display: inline-flex; align-items: flex-start; width: 2.8rem; height: 3.4rem; isolation: isolate; }
.rk-banner.sm { width: 2rem; height: 2.4rem; }
.rk-banner.none { opacity: .25; }
.rk-banner.none::before { content: ''; width: 2px; height: 100%; margin-left: .2rem; background: var(--ink-soft); }
.rk-pole { position: absolute; left: .15rem; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #e3c26a, #6b4f1a); }
.rk-pole::before { content: ''; position: absolute; top: -3px; left: -2px; width: 7px; height: 7px; border-radius: 50%; background: #f3d67a; }
.rk-cloth { position: absolute; left: .3rem; right: 0; top: .2rem; bottom: 0; display: grid; place-items: start center; padding-top: .25rem; background: var(--cloth); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: inset 0 0 0 2px rgba(201, 162, 39, .6); }
.rk-banner.sm .rk-cloth { padding-top: .15rem; }
.rk-crown { position: absolute; top: -.75rem; left: 55%; transform: translateX(-50%); font-size: .95rem; color: #ffd36b; text-shadow: 0 0 6px rgba(255, 211, 107, .9); }
@media (max-width: 760px) {
  .rk-row { grid-template-columns: 2.2rem 2.6rem minmax(0, 1fr) auto; grid-template-areas: "rank banner name value" "rank banner tag extra"; row-gap: .05rem; padding: .45rem .7rem; }
  .rk-row .rk-rank { grid-area: rank; } .rk-row .rk-banner { grid-area: banner; } .rk-row .rk-name { grid-area: name; }
  .rk-row .rk-tag { grid-area: tag; font-size: .78rem; } .rk-row .rk-extra { grid-area: extra; text-align: right; font-size: .78rem; } .rk-row .rk-value { grid-area: value; }
  .rk-row.rk-head { display: none; }
  .rk-banner { width: 2.2rem; height: 2.7rem; }
}
/* Felder-Spalte (nur Clanlisten) */
.rk-list.clans .rk-row { grid-template-columns: 3rem 3.6rem minmax(0, 1.6fr) minmax(4.5rem, .6fr) minmax(0, 1fr) minmax(5.5rem, auto) minmax(6rem, auto); }
.rk-fields { text-align: right; font-family: var(--heading); white-space: nowrap; color: var(--forest); }
.rk-fields small { font-family: var(--body); color: var(--ink-soft); }
.rk-head .rk-fields { color: inherit; }
.rk-list.clans .rk-name a { text-decoration: none; border-bottom: 1px dotted transparent; }
.rk-list.clans .rk-name a:hover, .rk-list.clans .rk-name a:focus-visible { border-bottom-color: currentColor; color: var(--blood); }
@media (max-width: 760px) {
  .rk-list.clans .rk-row { grid-template-columns: 2.2rem 2.6rem minmax(0, 1fr) auto; grid-template-areas: "rank banner name value" "rank banner tag extra" "rank banner fields fields"; }
  .rk-list.clans .rk-row .rk-fields { grid-area: fields; font-size: .78rem; text-align: left; }
}
/* Eindruck eines Clans: eine Seite */
.cp-hero { position: relative; display: flex; gap: 1.6rem; align-items: center; padding: 1.4rem 1.6rem; color: var(--parchment-light); background: var(--noise), radial-gradient(ellipse at 15% 0, #4a2e14, #1d130b 75%); border: 1px solid var(--gold-dark); overflow: hidden; }
.cp-hero.mine { box-shadow: var(--shadow), inset 0 0 0 2px var(--gold); }
.cp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(255, 220, 140, .12) 50%, transparent 60%); background-size: 250% 100%; animation: cp-sheen 6s linear infinite; }
@keyframes cp-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.cp-banner { flex: none; }
.rk-banner.lg { width: 6rem; height: 7.6rem; }
.rk-banner.lg .rk-cloth { padding-top: .6rem; }
.rk-banner.lg .rk-pole { width: 5px; }
.rk-banner.lg .rk-crown { top: -1.2rem; font-size: 1.5rem; }
.cp-head { min-width: 0; }
.cp-kicker { display: flex; gap: .5rem; align-items: center; font-family: var(--heading); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #c9b58a; }
.cp-name { margin: .2rem 0 .3rem; color: #ffe7a6; font-size: clamp(1.4rem, 4vw, 2.1rem); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cp-tag { color: #f0a58a; font-size: .7em; }
.cp-motto { margin: 0 0 .3rem; font-style: italic; color: #e8d6a8; }
.cp-leader { margin: 0; color: #d9c79c; }
.cp-leader strong { color: #ffe7a6; }
.cp-crowns { display: flex; gap: .4rem; margin-top: .5rem; }
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin: 1rem 0; }
.cp-stat { display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: 8px; background: var(--parchment-light, #fbf3df); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.cp-stat strong { font-family: var(--display); font-size: 1.5rem; }
.cp-stat span { font-family: var(--heading); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cp-stat.fields strong, .cp-stat.up strong { color: var(--forest); }
.cp-stat.down strong { color: var(--blood); }
.cp-place-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; }
.cp-place { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "rank title" "rank of"; column-gap: .7rem; align-items: center; padding: .55rem .8rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 250, 235, .45); color: inherit; text-decoration: none; }
.cp-place:hover { border-color: var(--gold-dark); }
.cp-place-rank { grid-area: rank; display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: 50%; font-family: var(--display); font-size: 1.05rem; background: rgba(110, 78, 38, .12); }
.cp-place.gold .cp-place-rank { background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); }
.cp-place.silver .cp-place-rank { background: radial-gradient(circle at 35% 30%, #fff, #a9a9a9); }
.cp-place.bronze .cp-place-rank { background: radial-gradient(circle at 35% 30%, #f6d3b0, #b06a2c); }
.cp-place > span:not(.cp-place-rank) { grid-area: title; font-family: var(--heading); }
.cp-place small { grid-area: of; color: var(--ink-soft); }
.cp-desc { white-space: pre-line; }
.cp-recruit { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 6px; background: rgba(60, 110, 60, .12); border-left: 3px solid var(--forest); }
.cp-person-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .4rem .8rem; }
.cp-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge name lvl" "badge rank lvl"; column-gap: .55rem; align-items: center; padding: .4rem .55rem; border-radius: 6px; background: rgba(255, 250, 235, .45); border: 1px solid var(--line); }
.cp-person .rank-badge { grid-area: badge; }
.cp-person-name { grid-area: name; font-family: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-person small { grid-area: rank; color: var(--ink-soft); font-size: .75rem; }
.cp-person-lvl { grid-area: lvl; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.cp-own { text-align: center; }
@media (max-width: 560px) {
  .cp-hero { flex-direction: column; text-align: center; padding: 1.2rem 1rem; }
  .cp-kicker, .cp-name, .cp-crowns { justify-content: center; }
}
/* ---- Karten ---- */
.world-soon { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem; color: #f3e2b0; background: radial-gradient(ellipse at 30% 40%, rgba(201, 162, 39, .25), transparent 60%), linear-gradient(135deg, #1d2a3a, #2b1d12); border: 2px solid var(--gold-dark); }
.world-soon h2 { margin: .1rem 0 .4rem; color: #ffd36b; }
.world-soon p { margin: 0; }
.ws-kicker { font-family: var(--heading); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #c9b58a; }
.world-soon-art { position: relative; flex: none; display: grid; place-items: center; width: 7rem; height: 7rem; }
.ws-compass { font-size: 2.6rem; color: #ffd36b; text-shadow: 0 0 14px rgba(255, 211, 107, .7); animation: ws-spin 18s linear infinite; }
.ws-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 211, 107, .55); }
.ws-ring.r1 { inset: 8%; animation: ws-spin 30s linear infinite reverse; }
.ws-ring.r2 { inset: 22%; border-style: solid; border-color: rgba(255, 211, 107, .3); }
@keyframes ws-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ws-compass, .ws-ring { animation: none; } }
@media (max-width: 600px) { .world-soon { flex-direction: column; text-align: center; } }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.map-tile { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; border-radius: 10px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.map-thumb { display: block; padding: 0; height: 170px; overflow: hidden; border-radius: 6px; cursor: zoom-in; border: 1px solid var(--gold-dark); background: #2b1d12; }
.map-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.map-thumb:hover img { transform: scale(1.05); }
.map-meta h3 { margin: 0; text-transform: none; color: var(--ink); }
.map-meta p { margin: .2rem 0; font-size: .9rem; }
.map-meta small { color: var(--ink-soft); }
.map-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(12, 8, 5, .96); }
.mv-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .6rem 1rem; color: #f3e2b0; background: #1d130b; border-bottom: 1px solid var(--gold-dark); }
.mv-bar strong { font-family: var(--heading); }
.mv-tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mv-stage { position: relative; flex: 1; overflow: hidden; cursor: grab; touch-action: none; }
.mv-stage:active { cursor: grabbing; }
.mv-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.mv-help { margin: 0; padding: .3rem 1rem .5rem; font-size: .8rem; color: #9c8a66; text-align: center; }
/* Feinschliff */
.rk-tag { font-family: var(--body); font-weight: 700; letter-spacing: .02em; }
.cosm-option strong, .cosm-option small { text-transform: none; letter-spacing: 0; }
.cosm-option small { display: block; font-family: var(--body); font-size: .82rem; line-height: 1.25; }
.gm-materials .actions { flex-wrap: nowrap; justify-content: flex-end; }
.clan-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* ---- „Mehr“ auch am Computer: Gilde, Fraktion, Season, Klagen ---- */
.nav-more {
  display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .5rem .6rem .55rem; cursor: pointer;
  font-family: var(--heading); font-weight: 700; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--parchment-dark); background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
}
.nav-more:hover { color: var(--gold-light); background: rgba(201, 162, 39, .08); }
.nav-more.active-desktop { color: var(--blood); background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment)); border-color: var(--gold-dark); }
.nav-more .more-mobile { display: none; }
.nav-more-panel:not([hidden]) {
  display: grid; grid-template-columns: repeat(2, minmax(9rem, 1fr)); gap: .3rem; position: fixed; z-index: 60;
  padding: .5rem; border-radius: 10px; background: var(--noise), linear-gradient(180deg, #2b1c0f, #1a110a); border: 1px solid var(--gold-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.nav-more-panel a.secondary { display: none !important; }
.nav-more-panel a { display: flex !important; border-radius: 8px !important; border: 1px solid rgba(201, 162, 39, .25) !important; margin: 0 !important; }
@media (max-width: 640px) {
  .nav-more .more-mobile { display: inline; }
  .nav-more .more-desktop { display: none; }
  .nav-more.active-desktop { background: rgba(0, 0, 0, .2); color: var(--parchment-dark); }
  .nav-more.active { color: var(--blood); background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment)); border-color: var(--gold); }
  .nav-more-panel:not([hidden]) { grid-template-columns: repeat(3, 1fr); border-radius: 0 0 10px 10px; }
  .nav-more-panel a.secondary { display: flex !important; }
}
@media (max-width: 640px) {
  .nav-more { display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .4rem .1rem; font-size: .54rem; letter-spacing: .02em;
    background: rgba(0, 0, 0, .2); border: 1px solid rgba(201, 162, 39, .25); border-radius: 8px; }
}

/* ---- Clan-Ausbau ---- */
.clan-page > * { position: relative; z-index: 1; }
.clan-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; }
.clan-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 99px; text-decoration: none; font-family: var(--heading); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--parchment-dark); background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .35); }
.clan-tabs a .icon { width: 15px; height: 15px; }
.clan-tabs a.active { color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); border-color: var(--gold-dark); }
.hall-level { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.hall-medal { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; color: #f3e2b0; background: radial-gradient(circle at 35% 30%, #4a3120, #1d130b); border: 3px solid var(--gold); box-shadow: 0 0 18px rgba(201, 162, 39, .45); }
.hall-medal small { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; }
.hall-medal strong { font-family: var(--display); font-size: 2rem; line-height: 1; color: #ffd36b; }
.hall-level-text { flex: 1; min-width: 0; }
.hall-level-text h2 { margin: 0; }
.hall-level-text p { margin: .2rem 0; }
.hall-buildings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .7rem; }
.hall-building { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.hall-building.lvl-0 { opacity: .85; border-style: dashed; }
.hall-building.lvl-3 { border-color: var(--gold-dark); box-shadow: 0 0 0 2px rgba(201, 162, 39, .25); }
.hall-building header { display: flex; gap: .55rem; align-items: center; }
.hall-building h3 { margin: 0; color: var(--ink); text-transform: none; }
.hall-building header small { color: var(--ink-soft); font-size: .8rem; }
.hall-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; color: #ffd36b; background: linear-gradient(180deg, #3a2614, #1d130b); border: 2px solid var(--gold-dark); }
.hall-pips { display: flex; gap: .25rem; }
.hall-pips i { flex: 1; height: .45rem; border-radius: 99px; background: rgba(110, 78, 38, .2); }
.hall-pips i.on { background: linear-gradient(90deg, #c9a227, #f3d67a); }
.hall-effect { margin: 0; font-weight: 600; color: var(--forest); }
.hall-building.lvl-0 .hall-effect { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.hall-next { display: grid; gap: .3rem; margin-top: auto; }
.hall-next small { color: var(--ink-soft); }
.hall-next .btn { justify-self: start; }
.hall-max { margin: auto 0 0; font-family: var(--heading); font-size: .8rem; color: var(--gold-dark); }
.hall-tavern { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .6rem .8rem; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 90, 30, .18), transparent); border: 1px solid var(--line); }
.hall-tavern > div { flex: 1; }
.hall-tavern strong { display: block; font-family: var(--heading); }
.hall-tavern small { color: var(--ink-soft); }
.clan-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.clan-quests li { padding: .55rem .7rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.clan-quests li.done { background: rgba(140, 200, 120, .2); border-color: rgba(47, 122, 61, .5); }
.cq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; flex-wrap: wrap; }
.clan-quests small { color: var(--ink-soft); }
.week-track { margin-top: 2.4rem !important; }
.clan-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .5rem; }
.clan-ach-item { display: flex; gap: .55rem; align-items: center; padding: .45rem .55rem; border-radius: 8px; background: rgba(255, 250, 235, .5); border: 1px solid var(--line); }
.clan-ach-item.done { background: rgba(236, 210, 126, .35); border-color: var(--gold-dark); }
.clan-ach-item strong { display: block; font-family: var(--heading); font-size: .82rem; }
.clan-ach-item small { display: block; color: var(--ink-soft); font-size: .8rem; line-height: 1.2; }
.clan-ach-item em { font-size: .75rem; color: var(--forest); }
.clan-chronicle { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-height: 70vh; overflow-y: auto; }
.clan-chronicle li { display: flex; gap: .6rem; padding: .45rem .2rem; border-bottom: 1px dashed var(--line); }
.clan-chronicle p { margin: 0; }
.clan-chronicle time { font-size: .75rem; color: var(--ink-soft); }
.cc-icon { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: #fff3c4; background: var(--blood); }
.cc-icon .icon { width: 15px; height: 15px; }
.rank-rows { display: grid; gap: .35rem; margin: .5rem 0; }
.rank-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rank-row .rank-name { flex: 1; min-width: 10rem; }
.rank-select { max-width: 12rem; }

/* Bewegte Ebenen: Funken, Schnee, Blüten, Laternen, Gewitter */
.clan-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 !important; border-radius: 14px; }
.clan-particles i { position: absolute; top: -20px; display: block; animation: fx-fall linear infinite; }
.clan-particles.sparks i { width: 4px; height: 4px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 6px #ffd36b; animation-name: fx-spark; }
.clan-particles.snow i { border-radius: 50%; background: #fff; opacity: .85; animation-name: fx-snow; }
.clan-particles.petals i { width: 10px; height: 7px; border-radius: 60% 0 60% 0; background: linear-gradient(135deg, #ffd1e3, #f48fb1); animation-name: fx-petal; }
.clan-particles.lanterns i { top: auto; bottom: -40px; border-radius: 40% 40% 30% 30%; background: radial-gradient(circle at 50% 60%, #ffe8a0, #ff9a3c 60%, #c4521a); box-shadow: 0 0 14px 4px rgba(255, 170, 70, .55); animation-name: fx-lantern; }
@keyframes fx-fall { from { transform: translateY(0); } to { transform: translateY(110vh); } }
@keyframes fx-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(18px, 55vh); } 100% { transform: translate(-10px, 115vh); } }
@keyframes fx-petal { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(40px, 55vh) rotate(180deg); } 100% { transform: translate(-20px, 115vh) rotate(360deg); } }
@keyframes fx-lantern { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(20px, -120vh); opacity: 0; } }
.clan-particles.storm .flash { position: absolute; inset: 0; background: rgba(220, 230, 255, .0); animation: fx-flash 7s infinite; }
.clan-particles.storm .bolt { position: absolute; top: 0; left: 62%; width: 60px; height: 45%; background: linear-gradient(180deg, #fff, #b8d4ff); clip-path: polygon(40% 0, 70% 0, 52% 40%, 75% 40%, 25% 100%, 42% 52%, 22% 52%); opacity: 0; filter: drop-shadow(0 0 10px #cfe2ff); animation: fx-bolt 7s infinite; }
@keyframes fx-flash { 0%, 61%, 66%, 100% { background: rgba(220, 230, 255, 0); } 62% { background: rgba(220, 230, 255, .35); } 64% { background: rgba(220, 230, 255, .15); } }
@keyframes fx-bolt { 0%, 61%, 66%, 100% { opacity: 0; } 62%, 64% { opacity: 1; } }
.clan-bg-schneesturm { background: linear-gradient(180deg, #2b3a4f, #51657d 60%, #8094a8); }
.clan-bg-kirschblueten { background: radial-gradient(ellipse at 80% 10%, rgba(255, 200, 220, .35), transparent 55%), linear-gradient(180deg, #3a1f33, #6b3554); }
.clan-bg-gewitter { background: radial-gradient(ellipse at 50% 0%, rgba(90, 100, 130, .6), transparent 60%), linear-gradient(180deg, #11141c, #232a38 60%, #1a1d26); }
.clan-bg-laternen { background: radial-gradient(ellipse at 50% 110%, rgba(255, 150, 60, .35), transparent 60%), linear-gradient(180deg, #0b0f24, #1c1840); }
@media (prefers-reduced-motion: reduce) { .clan-particles i, .clan-particles b { animation: none !important; } }

/* Wehendes Banner */
.fx-wehend .clan-emblem-wrap svg, .rk-banner.fx-wehend .rk-cloth { transform-origin: 0 0; animation: fx-wave 3.2s ease-in-out infinite; }
@keyframes fx-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 25% { transform: skewY(2.5deg) scaleX(.97); } 75% { transform: skewY(-2.5deg) scaleX(1.02); } }

/* Rangliste: Clanstufe und Halle */
.rk-hall { display: inline-flex; align-items: center; gap: .3rem; margin-left: .5rem; font-family: var(--body); font-size: .75rem; color: var(--ink-soft); white-space: nowrap; }
.rk-hall b { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .2rem; border-radius: 6px; font-family: var(--display); font-size: .75rem; color: #ffd36b; background: #1d130b; border: 1px solid var(--gold-dark); }
.rk-hall .rk-towers { letter-spacing: -.05em; color: var(--gold-dark); }

/* Kampfbühne: Clanwimpel */
.token-pennant { position: absolute; left: .35rem; top: 2rem; display: flex; flex-direction: column; align-items: center; padding: .15rem .2rem .45rem; min-width: 1.6rem; font-size: .55rem; font-weight: 700; color: #fff3c4; background: var(--cloth, #8e1b18); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .7); }
.token-pennant svg { width: 14px; height: 16px; }
.nav-more .more-mobile, .nav-more .more-desktop { display: inline-flex; align-items: center; gap: .45rem; }
.nav-more .more-mobile { display: none; }
@media (max-width: 640px) { .nav-more .more-mobile { display: inline-flex; flex-direction: column; gap: .15rem; } .nav-more .more-desktop { display: none; } }
.clan-quests li { min-width: 0; }
.cq-head .tag { white-space: normal; text-align: left; }
.cq-head strong { overflow-wrap: anywhere; }
/* Bewegte Ebenen nur im sichtbaren Bereich oben, damit Laternen & Co. auch wirklich zu sehen sind */
.clan-particles { bottom: auto; height: min(100%, 100vh); }
.clan-particles.storm .bolt { left: 58%; width: 130px; height: 60%; filter: drop-shadow(0 0 18px #cfe2ff) drop-shadow(0 0 40px rgba(180, 210, 255, .8)); }
.clan-particles.storm::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 35%; background: radial-gradient(ellipse at 30% 0%, rgba(10, 12, 20, .85), transparent 70%), radial-gradient(ellipse at 75% 0%, rgba(10, 12, 20, .8), transparent 65%); }
@keyframes fx-flash { 0%, 61%, 67%, 100% { background: rgba(220, 230, 255, 0); } 62% { background: rgba(220, 230, 255, .55); } 63% { background: rgba(220, 230, 255, .1); } 64.5% { background: rgba(220, 230, 255, .4); } }

/* ==== Animationen (fx.js) ==== */
.fx-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(30, 18, 8, .78), rgba(5, 3, 2, .92)); animation: fx-in .25s ease-out; cursor: pointer; overflow: hidden; }
.fx-overlay.fx-out { animation: fx-fade-out .25s ease-in forwards; }
@keyframes fx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-fade-out { to { opacity: 0; } }
.fx-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-particles i { position: absolute; display: block; }

/* Truhe */
.fx-chest-box { width: min(420px, calc(100vw - 2rem)); padding: 1.2rem 1.2rem 1rem; text-align: center; color: #f3e2b0; cursor: default; }
.fx-chest-box h2 { margin: 0 0 .4rem; color: #ffd36b; }
.fx-chest { position: relative; width: 180px; height: 150px; margin: 2.2rem auto .6rem; }
.fx-chest-svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; animation: fx-wobble .9s ease-in-out; }
.fx-chest-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.fx-chest.open .fx-chest-lid { transform: translateY(-30px) rotate(-9deg); }
.fx-chest.open .fx-chest-svg { animation: fx-pop .35s ease-out; }
.fx-beam { position: absolute; left: 50%; bottom: 40%; width: 120px; height: 0; transform: translateX(-50%); background: linear-gradient(0deg, var(--glow), transparent); filter: blur(6px); opacity: 0; border-radius: 50% 50% 0 0; }
.fx-chest.open .fx-beam { animation: fx-beam 1.2s ease-out forwards; }
@keyframes fx-wobble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-6deg); } 30% { transform: rotate(6deg); } 45% { transform: rotate(-4deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }
@keyframes fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12, .9); } 100% { transform: scale(1); } }
@keyframes fx-beam { 0% { height: 0; opacity: 0; } 30% { opacity: 1; } 100% { height: 180px; opacity: .65; } }
.fx-loot { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.fx-loot li { display: flex; align-items: baseline; justify-content: center; gap: .4rem; padding: .35rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 162, 39, .3); opacity: 0; animation: fx-fly .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.fx-loot li small { font-size: .7rem; opacity: .75; }
.fx-loot li.r-selten { color: #8fc0ff; border-color: #5aa0ff; }
.fx-loot li.r-episch { color: #d9a8ff; border-color: #c07bff; box-shadow: 0 0 10px rgba(192, 123, 255, .35); }
.fx-loot li.r-legendaer { color: #ffd36b; border-color: #ffc94a; box-shadow: 0 0 14px rgba(255, 201, 74, .55); }
.fx-loot li.gold { color: #ffd36b; }
@keyframes fx-fly { 0% { opacity: 0; transform: translateY(70px) scale(.4); } 100% { opacity: 1; transform: none; } }
.fx-still .fx-loot li { opacity: 1; animation: none; }
.fx-empty { opacity: .8; font-style: italic; }
.gold-rain i { top: -20px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #e0a92a); box-shadow: 0 0 8px #ffd36b; animation: fx-rain linear forwards; }
@keyframes fx-rain { to { transform: translateY(110vh) rotate(540deg); } }

/* Stufenaufstieg */
.fx-levelup { position: relative; display: grid; justify-items: center; gap: .3rem; padding: 2rem 2.5rem; color: #fff3c4; text-align: center; }
.fx-lv-beam { position: absolute; left: 50%; top: -60vh; bottom: 30%; width: 160px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255, 230, 150, .9) 70%, rgba(255, 240, 200, 0)); filter: blur(10px); animation: fx-lv-beam 1.2s ease-out; }
.fx-lv-rays { position: absolute; left: 50%; top: 32%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 220, 120, .28) 0 8deg, transparent 8deg 20deg); animation: fx-spin 8s linear infinite, fx-in .6s ease-out; mask-image: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.fx-lv-portrait { position: relative; display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; border: 4px solid #ffd36b; box-shadow: 0 0 30px rgba(255, 211, 107, .9); background: #2b1c0f; animation: fx-pop-in .7s cubic-bezier(.2, 1.6, .4, 1); }
.fx-lv-portrait img { width: 100%; height: 100%; object-fit: cover; }
.fx-lv-initial { font-family: var(--display); font-size: 3.4rem; color: #ffd36b; }
.fx-lv-text { position: relative; margin: .4rem 0 0; font-family: var(--display); font-size: 3rem; color: #ffd36b; text-shadow: 0 0 20px rgba(255, 211, 107, .9), 0 3px 0 #5c100c; animation: fx-pop-in .7s .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.fx-lv-sub { position: relative; margin: 0; opacity: .85; animation: fx-in .5s .8s both; }
@keyframes fx-lv-beam { from { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: top; } to { opacity: 1; transform: translateX(-50%) scaleY(1); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-pop-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.lv-sparks i { bottom: 30%; width: 5px; height: 5px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffd36b; animation: fx-rise 1.6s ease-out forwards; opacity: 0; }
@keyframes fx-rise { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-220px); } }

/* Amboss */
.fx-anvil { display: grid; justify-items: center; gap: .25rem; padding: 1.5rem; color: #f3e2b0; text-align: center; }
.fx-anvil-stage { position: relative; width: 220px; height: 160px; }
.fx-anvil-svg { position: absolute; left: 30px; bottom: 0; width: 160px; height: 110px; }
.fx-anvil-blade { filter: drop-shadow(0 0 6px rgba(255, 140, 40, .9)); animation: fx-hot 1.6s ease-in-out; }
@keyframes fx-hot { 0% { fill: #ff9a3c; } 70% { fill: #ffd9a0; } 100% { fill: #dfe7ef; } }
.fx-anvil-hammer { position: absolute; right: 18px; top: 0; color: #c9b58a; transform-origin: 80% 80%; animation: fx-hammer .45s ease-in 3; }
.fx-anvil-hammer .icon { width: 64px; height: 64px; transform: rotate(-30deg); }
@keyframes fx-hammer { 0% { transform: rotate(-40deg); } 70% { transform: rotate(18deg); } 100% { transform: rotate(-40deg); } }
.sparks i { left: 50%; top: 52%; width: 5px; height: 5px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 8px #ff9a3c; animation: fx-burst .8s ease-out forwards; }
@keyframes fx-burst { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.fx-anvil-title { margin: .4rem 0 0; font-family: var(--heading); font-size: 1.2rem; color: #fff3c4; }
.fx-anvil-level { margin: 0; font-family: var(--display); font-size: 1.8rem; color: #ffd36b; text-shadow: 0 0 14px rgba(255, 211, 107, .7); animation: fx-pop-in .6s 1.3s both cubic-bezier(.2, 1.6, .4, 1); }
.fx-anvil-tech { margin: .3rem 0 0; padding: .4rem .9rem; border-radius: 99px; background: rgba(255, 211, 107, .15); border: 1px solid #ffd36b; animation: fx-in .5s 1.8s both, fx-glow 1.6s 2.2s ease-in-out infinite; }
.fx-anvil-tech.plain { animation: fx-in .5s 1.8s both; }
@keyframes fx-glow { 0%, 100% { box-shadow: 0 0 6px rgba(255, 211, 107, .4); } 50% { box-shadow: 0 0 22px rgba(255, 211, 107, .95); } }

/* Erfolg */
.fx-ach { position: fixed; z-index: 2100; top: 4.5rem; left: 50%; display: flex; align-items: center; gap: .8rem; min-width: 260px; padding: .7rem 1.1rem .7rem .7rem; border-radius: 14px; color: #fff3c4; background: linear-gradient(180deg, #3a2614, #1d130b); border: 2px solid var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); transform: translateX(-50%); animation: fx-ach-in .5s cubic-bezier(.2, 1.4, .4, 1); cursor: pointer; overflow: hidden; }
.fx-ach.fx-out { animation: fx-fade-out .3s forwards; }
.fx-ach small { display: block; font-family: var(--heading); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: #c9b58a; }
.fx-ach strong { font-family: var(--heading); font-size: 1.05rem; color: #ffd36b; }
.fx-ach-medal { position: relative; flex: none; overflow: hidden; border-radius: 50%; animation: fx-drop .8s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
.fx-ach-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); transform: translateX(-120%); animation: fx-shine-sweep .9s 1s ease-in-out forwards; }
@keyframes fx-ach-in { from { opacity: 0; transform: translate(-50%, -30px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fx-drop { from { transform: translateY(-80px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fx-shine-sweep { to { transform: translateX(120%); } }
.fx-ach.secret { border-color: #b88bff; background: linear-gradient(180deg, #2b1640, #140a20); }
.fx-ach.secret strong { color: #d9b8ff; }
.fx-ach.secret .fx-ach-medal { animation-delay: 1.1s; }
.fx-ach.secret .fx-ach-shine { animation-delay: 2s; }
.fx-ach-fog { position: absolute; inset: -20%; background: radial-gradient(circle at 30% 50%, rgba(185, 140, 255, .9), rgba(90, 40, 140, .7) 40%, transparent 70%); filter: blur(8px); animation: fx-fog 1.4s ease-out forwards; z-index: 2; pointer-events: none; }
@keyframes fx-fog { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.badge-medal.big { width: 3.4rem; height: 3.4rem; }

/* Würfel */
.fx-dice-overlay { background: rgba(5, 3, 2, .45); }
.fx-dice-row { position: relative; width: 100%; height: 160px; }
.fx-die { position: absolute; top: 50%; left: calc(50% + (var(--i) - (var(--n) - 1) / 2) * 140px); width: 110px; height: 110px; margin: -55px 0 0 -55px; animation: fx-roll 1.05s cubic-bezier(.2, .7, .3, 1) forwards; }
.fx-die-svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.fx-die-num { font-family: var(--display); font-size: 26px; font-weight: 900; fill: #fff3c4; }
.fx-die-num.dark { fill: #2b1c0f; font-size: 40px; }
.fx-die.landed { animation: fx-land .35s ease-out; }
@keyframes fx-roll { 0% { transform: translateX(-70vw) rotate(-900deg) scale(.7); } 75% { transform: translateX(12px) rotate(20deg) scale(1.05); } 100% { transform: translateX(0) rotate(0) scale(1); } }
@keyframes fx-land { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.fx-crit .fx-die-svg polygon:first-child { fill: #c9a227; }
.fx-crit .fx-die { filter: drop-shadow(0 0 20px #ffd36b); }
.glitter i { width: 6px; height: 6px; background: #fff3c4; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: fx-twinkle 1s ease-in-out infinite; }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.6); } }
.fx-crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: fx-crack .25s steps(3) both; }
.fx-fumble .fx-dice-row { animation: fx-shake-x .5s ease-in-out; }
@keyframes fx-crack { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Kampfbühne */
.fx-shake { animation: fx-shake-x .45s ease-in-out; }
.fx-shake-strong { animation: fx-shake-xy .6s ease-in-out; }
@keyframes fx-shake-x { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes fx-shake-xy { 0%, 100% { transform: none; } 15% { transform: translate(-10px, 4px) rotate(-.6deg); } 30% { transform: translate(9px, -5px) rotate(.6deg); } 45% { transform: translate(-7px, 3px); } 60% { transform: translate(6px, -2px); } 80% { transform: translate(-3px, 1px); } }
.token.fx-dying .token-art { animation: fx-dissolve 1.6s ease-out; }
@keyframes fx-dissolve { 0% { filter: none; opacity: 1; transform: none; } 40% { filter: brightness(2) blur(1px); } 100% { filter: grayscale(1) brightness(.6) blur(0); opacity: .55; transform: rotate(-8deg); } }
.smoke i { bottom: 35%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 190, 180, .75), rgba(120, 110, 100, 0) 70%); animation: fx-smoke 1.6s ease-out forwards; opacity: 0; }
@keyframes fx-smoke { 0% { opacity: .9; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-70px) scale(calc(2.4 * var(--s))); } }
.heal-sparks i { bottom: 20%; width: 6px; height: 6px; border-radius: 50%; background: #8fe38a; box-shadow: 0 0 8px #5fc35a; animation: fx-rise-short 1.4s ease-out forwards; opacity: 0; }
@keyframes fx-rise-short { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-80px); } }
.fx-confetti { position: fixed; inset: 0; z-index: 1900; pointer-events: none; overflow: hidden; }
.fx-confetti i { position: absolute; top: -20px; border-radius: 2px; animation: fx-confetti linear forwards; }
@keyframes fx-confetti { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }

/* Seltene Gegenstände schimmern im Inventar */
.bag-tile, .slot.filled, .vault-slot.filled, .bag-row { position: relative; overflow: hidden; }
.bag-tile.r-legendaer::after, .bag-tile.r-episch::after, .slot.filled.r-legendaer::after, .slot.filled.r-episch::after, .vault-slot.filled.r-legendaer::after, .vault-slot.filled.r-episch::after, .bag-row.r-legendaer::after, .bag-row.r-episch::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%); animation: fx-shimmer 4.5s ease-in-out infinite; }
.bag-tile.r-legendaer::after, .slot.filled.r-legendaer::after, .vault-slot.filled.r-legendaer::after, .bag-row.r-legendaer::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 215, 110, .55) 50%, transparent 70%); }
.bag-tile.r-episch::after, .slot.filled.r-episch::after, .vault-slot.filled.r-episch::after, .bag-row.r-episch::after { background: linear-gradient(110deg, transparent 30%, rgba(200, 140, 255, .45) 50%, transparent 70%); animation-delay: 1.5s; animation-duration: 6s; }
.bag-tile.r-legendaer, .slot.filled.r-legendaer { box-shadow: 0 0 12px rgba(255, 201, 74, .45); }
@keyframes fx-shimmer { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  .fx-overlay, .fx-overlay *, .fx-ach, .fx-ach *, .bag-tile::after, .slot::after, .vault-slot::after, .bag-row::after, .token.fx-dying .token-art { animation: none !important; }
  .fx-loot li { opacity: 1; }
}

/* ==== Seltenheiten: Gewöhnlich (grün) · Selten (blau) · Veredelt (türkis) · Episch (lila) · Heroisch (orange) ·
        Legendär (gelb) · Mythisch (rot) · Black (schwarz) · Adamant (rubinrot/grün) ==== */
:root {
  --r-gewoehnlich: #3f9d4a; --r-selten: #2c6fb0; --r-veredelt: #139a9a; --r-episch: #8a3fc4; --r-heroisch: #e07b1a;
  --r-legendaer: #e2b714; --r-mythisch: #c62828; --r-black: #111014; --r-adamant: #9b111e;
}
[class].r-gewoehnlich { --rc: #3f9d4a; --rc2: #5cb85c; --rcg: rgba(63, 157, 74, .18); --rct: #2e7a37; --rcl: #8fe39a; }
[class].r-selten { --rc: #2c6fb0; --rc2: #4a8fd4; --rcg: rgba(44, 111, 176, .35); --rct: #22568a; --rcl: #8fc0ff; }
[class].r-veredelt { --rc: #139a9a; --rc2: #2cc4b8; --rcg: rgba(19, 154, 154, .38); --rct: #0e7070; --rcl: #7ff0e6; }
[class].r-episch { --rc: #8a3fc4; --rc2: #a35fdb; --rcg: rgba(138, 63, 196, .42); --rct: #6e2aa6; --rcl: #d9a8ff; --shine: rgba(200, 140, 255, .45); }
[class].r-heroisch { --rc: #e07b1a; --rc2: #f39c3d; --rcg: rgba(224, 123, 26, .45); --rct: #b0590a; --rcl: #ffbe7a; --shine: rgba(255, 170, 80, .5); }
[class].r-legendaer { --rc: #e2b714; --rc2: #f5d547; --rcg: rgba(242, 200, 40, .6); --rct: #8f7104; --rcl: #ffe066; --shine: rgba(255, 225, 100, .6); }
[class].r-mythisch { --rc: #c62828; --rc2: #ef5350; --rcg: rgba(220, 40, 40, .55); --rct: #a01818; --rcl: #ff8080; --shine: rgba(255, 90, 90, .55); }
[class].r-black { --rc: #111014; --rc2: #3a1f5c; --rcg: rgba(80, 0, 160, .55); --rct: #111014; --rcl: #c9a8ff; --shine: rgba(150, 90, 255, .5); }
[class].r-adamant { --rc: #9b111e; --rc2: #1e8a4c; --rcg: rgba(155, 17, 30, .55); --rct: #9b111e; --rcl: #ff6b81; --shine: rgba(255, 70, 100, .55); --shine2: rgba(60, 220, 130, .55); }

/* Etiketten und Textfarbe */
.tag.rarity { color: #fff; border-color: transparent; background: linear-gradient(90deg, var(--rc), var(--rc2, var(--rc))); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.tag.rarity.r-black { color: #e9e0ff; background: linear-gradient(90deg, #050507, #2a1640); box-shadow: 0 0 8px rgba(106, 0, 255, .45); }
.tag.rarity.r-adamant { background: linear-gradient(90deg, #9b111e, #c2185b 45%, #1e8a4c); box-shadow: 0 0 8px rgba(155, 17, 30, .45); }
.tag.rarity.r-legendaer { color: #4a3a00; text-shadow: none; }
.rarity-text { color: var(--rct, inherit); font-weight: 600; }
.rarity-text.r-adamant { background: linear-gradient(90deg, #b3122a, #1e8a4c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Rahmen und Leuchten der Gegenstände */
.bag-tile, .bag-item, .ware, .slot.filled, .vault-slot.filled, .recipe, .item-detail { border-color: var(--rc, var(--line)); }
.bag-tile[class*=" r-"], .slot.filled[class*=" r-"], .item-detail[class*=" r-"] { border-width: 2px; border-style: solid; box-shadow: 0 0 10px var(--rcg); }
.bag-item[class*=" r-"], .ware[class*=" r-"] { box-shadow: 0 0 0 1px var(--rc), 0 0 12px var(--rcg); }
.bag-row[class*=" r-"] { border-left-color: var(--rc); }
.bag-tile .tile-name, .bag-row strong, .bag-item h3, .ware h3, .slot.filled .slot-item, .recipe h3, .shop-slot .shop-name, .cat-row .cat-name { color: var(--rct, inherit); }
.ware-tile[class*=" r-"], .cat-row[class*=" r-"] { --rcx: 1; }
.dialog.shop-dialog[class*=" r-"] { box-shadow: 0 0 0 2px var(--rc), 0 0 30px var(--rcg), 0 20px 60px rgba(0, 0, 0, .6); }
.shop-slot[class*=" r-"] { background: var(--noise), radial-gradient(circle at 50% 32%, #fffdf6 0, color-mix(in srgb, var(--rc) 18%, #f7ecd0) 60%, color-mix(in srgb, var(--rc) 38%, #e9d7a8) 100%); }

/* Black: tiefschwarz mit violettem Schimmer */
.bag-tile.r-black, .slot.filled.r-black, .ware-tile.r-black, .shop-slot.r-black, .cat-row.r-black, .recipe.r-black, .vault-slot.filled.r-black { background: linear-gradient(180deg, #2a2730, #0b0a0e); border-color: #000; box-shadow: 0 0 14px rgba(106, 0, 255, .45); }
.bag-tile.r-black .tile-name, .slot.filled.r-black .slot-item, .ware-tile.r-black .ware-name, .shop-slot.r-black .shop-name, .cat-row.r-black .cat-name, .recipe.r-black h3,
.ware-tile.r-black, .shop-slot.r-black, .cat-row.r-black, .slot.filled.r-black, .bag-tile.r-black { color: #e9e0ff; }
.bag-tile.r-black small, .slot.filled.r-black small, .ware-tile.r-black small, .shop-slot.r-black small { color: #b5a8d6; }
/* Adamant: dunkler Edelstein – Rubinrot fließt in Smaragdgrün, mit Facetten und doppeltem Rahmen */
.bag-tile.r-adamant, .slot.filled.r-adamant, .ware-tile.r-adamant, .shop-slot.r-adamant, .cat-row.r-adamant, .recipe.r-adamant, .vault-slot.filled.r-adamant, .bag-row.r-adamant {
  border-color: #9b111e;
  box-shadow: 0 0 0 2px #9b111e, 0 0 0 4px #1e8a4c, 0 0 18px rgba(155, 17, 30, .5), 0 0 26px rgba(30, 138, 76, .35);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 18% 12%, rgba(255, 80, 105, .45), transparent 55%),
    radial-gradient(circle at 85% 92%, rgba(60, 220, 130, .4), transparent 55%),
    linear-gradient(135deg, #5c0815 0%, #330a14 46%, #072b1a 54%, #0d4a2a 100%);
  color: #ffe9ec;
  animation: adamant-pulse 4s ease-in-out infinite;
}
.bag-row.r-adamant { border-left-color: #9b111e; }
.item-detail.r-adamant { border: 2px solid #9b111e; box-shadow: 0 0 0 2px #1e8a4c, 0 0 18px rgba(155, 17, 30, .45); background: linear-gradient(135deg, #fff1f3, #eafff2); }
@keyframes adamant-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #9b111e, 0 0 0 4px #1e8a4c, 0 0 20px rgba(155, 17, 30, .65), 0 0 22px rgba(30, 138, 76, .25); }
  50% { box-shadow: 0 0 0 2px #1e8a4c, 0 0 0 4px #9b111e, 0 0 20px rgba(30, 138, 76, .6), 0 0 22px rgba(155, 17, 30, .3); }
}
@media (prefers-reduced-motion: reduce) { [class].r-adamant { animation: none; } }
.ware-tile.r-adamant, .shop-slot.r-adamant, .cat-row.r-adamant, .slot.filled.r-adamant, .bag-tile.r-adamant, .recipe.r-adamant h3, .bag-row.r-adamant strong { color: #ffe9ec; }
.bag-tile.r-adamant small, .slot.filled.r-adamant small, .ware-tile.r-adamant small, .shop-slot.r-adamant small, .cat-row.r-adamant small, .recipe.r-adamant small, .bag-row.r-adamant small { color: #e3c2c8; }
.bag-tile.r-adamant .tile-name, .slot.filled.r-adamant .slot-item, .shop-slot.r-adamant .shop-name, .ware-tile.r-adamant .ware-name, .cat-row.r-adamant .cat-name, .bag-row.r-adamant strong {
  background: linear-gradient(90deg, #ff8a9b, #ffd6dc 50%, #7dffb4); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dialog.shop-dialog.r-adamant { box-shadow: 0 0 0 2px #9b111e, 0 0 0 4px #1e8a4c, 0 0 36px rgba(155, 17, 30, .55), 0 20px 60px rgba(0, 0, 0, .6); }

/* Schimmer ab Episch – in der Farbe der Seltenheit */
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row):is(.r-episch, .r-heroisch, .r-legendaer, .r-mythisch, .r-black, .r-adamant)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 30%, var(--shine) 50%, transparent 70%); animation: fx-shimmer 4.5s ease-in-out infinite;
}
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-episch::after { animation-duration: 6s; animation-delay: 1.5s; }
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-heroisch::after { animation-duration: 5.5s; animation-delay: .8s; }
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-mythisch::after { animation-duration: 3.6s; }
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-black::after { animation-duration: 5s; mix-blend-mode: screen; }
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-adamant::after { animation-duration: 3.2s; background: linear-gradient(110deg, transparent 25%, var(--shine) 42%, var(--shine2) 58%, transparent 75%); }
:is(.bag-tile, .slot.filled).r-mythisch { animation: fx-pulse-glow 2.4s ease-in-out infinite; }
@keyframes fx-pulse-glow { 0%, 100% { box-shadow: 0 0 8px var(--rcg); } 50% { box-shadow: 0 0 20px var(--rcg); } }

/* Truhen-Animation: Beutezeilen in Seltenheitsfarbe */
.fx-loot li[class*="r-"] { color: var(--rcl); border-color: var(--rc); box-shadow: 0 0 10px var(--rcg); }
.fx-loot li.r-gewoehnlich { box-shadow: none; }
.fx-loot li.r-black { background: rgba(20, 0, 40, .7); border-color: #6a00ff; }
.fx-loot li.r-adamant { border-color: #9b111e; box-shadow: 0 0 0 1px #1e8a4c, 0 0 14px rgba(155, 17, 30, .55); }
.ember-rain i { top: -20px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #ffd0a0, #e03a1a); box-shadow: 0 0 10px #ff4d2a; animation: fx-rain linear forwards; }
.shadow-rain i { top: -20px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #1a0033, #000); box-shadow: 0 0 12px 3px rgba(106, 0, 255, .7); animation: fx-rain linear forwards; }
.adamant-rain i { top: -20px; width: 8px; height: 8px; transform: rotate(45deg); background: #c2185b; box-shadow: 0 0 10px #ff2b4a; animation: fx-rain linear forwards; }
.adamant-rain i:nth-child(even) { background: #1e8a4c; box-shadow: 0 0 10px #3ce082; }
/* Dunkle Kacheln (Black, Adamant): Preise und Abzeichen hell genug zum Lesen */
:is(.ware-tile, .shop-slot, .bag-tile, .cat-row, .recipe):is(.r-black, .r-adamant) .coins { color: var(--gold-light, #f3d27a); }
:is(.ware-tile, .shop-slot, .bag-tile, .cat-row, .recipe):is(.r-black, .r-adamant) s { color: rgba(255, 235, 240, .65); }
:is(.ware-tile, .shop-slot, .bag-tile, .cat-row, .recipe).r-adamant .tag.rarity { box-shadow: 0 0 0 1px rgba(255, 235, 240, .7), 0 0 10px rgba(0, 0, 0, .45); }

/* ==== Clan-Ausbau II: Forschung, Relikt, Schrein, Verwaltung, Saison, Wappen-Editor, Allianzen ==== */
:root { --laurel-gold: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22><path d=%22M60 112C30 110 12 86 14 30M60 112C90 110 108 86 106 30%22 fill=%22none%22 stroke=%22%238a6512%22 stroke-width=%222%22/><ellipse cx=%2250.6%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-205 50.6 113.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2269.4%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28385 69.4 113.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2252.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 52.0 105.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2268.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 68.0 105.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2238.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-191 38.0 109.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2282.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28371 82.0 109.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2241.3%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 41.3 102.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2278.7%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 78.7 102.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2226.8%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-177 26.8 102.6%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2293.2%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28357 93.2 102.6%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2231.7%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 31.7 96.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2288.3%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 88.3 96.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2217.4%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-163 17.4 93.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22102.6%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28343 102.6 93.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2223.8%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 23.8 88.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2296.2%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 96.2 88.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2210.7%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-149 10.7 82.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22109.3%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28329 109.3 82.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2218.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-79 18.0 78.7%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22102.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28259 102.0 78.7%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%226.8%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 6.8 69.4%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22113.2%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 113.2 69.4%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2214.7%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-65 14.7 68.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22105.3%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28245 105.3 68.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%226.1%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 6.1 56.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22113.9%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 113.9 56.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2214.1%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-51 14.1 56.8%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22105.9%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28231 105.9 56.8%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%228.6%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 8.6 43.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22111.4%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 111.4 43.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2216.3%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-37 16.3 45.8%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22103.7%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28217 103.7 45.8%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2214.2%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 14.2 31.4%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22105.8%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 105.8 31.4%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2221.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-23 21.0 35.6%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2299.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28203 99.0 35.6%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><path d=%22M50 108l10 7 10-7%22 fill=%22none%22 stroke=%22%238a6512%22 stroke-width=%223%22/></svg>"); --laurel-silber: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22><path d=%22M60 112C30 110 12 86 14 30M60 112C90 110 108 86 106 30%22 fill=%22none%22 stroke=%22%236f7a88%22 stroke-width=%222%22/><ellipse cx=%2250.6%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-205 50.6 113.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2269.4%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28385 69.4 113.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2252.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 52.0 105.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2268.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 68.0 105.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2238.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-191 38.0 109.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2282.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28371 82.0 109.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2241.3%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 41.3 102.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2278.7%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 78.7 102.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2226.8%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-177 26.8 102.6%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2293.2%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28357 93.2 102.6%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2231.7%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 31.7 96.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2288.3%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 88.3 96.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2217.4%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-163 17.4 93.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22102.6%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28343 102.6 93.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2223.8%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 23.8 88.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2296.2%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 96.2 88.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2210.7%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-149 10.7 82.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22109.3%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28329 109.3 82.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2218.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-79 18.0 78.7%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22102.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28259 102.0 78.7%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%226.8%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 6.8 69.4%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22113.2%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 113.2 69.4%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2214.7%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-65 14.7 68.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22105.3%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28245 105.3 68.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%226.1%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 6.1 56.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22113.9%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 113.9 56.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2214.1%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-51 14.1 56.8%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22105.9%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28231 105.9 56.8%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%228.6%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 8.6 43.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22111.4%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 111.4 43.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2216.3%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-37 16.3 45.8%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22103.7%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28217 103.7 45.8%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2214.2%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 14.2 31.4%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22105.8%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 105.8 31.4%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2221.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-23 21.0 35.6%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2299.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28203 99.0 35.6%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><path d=%22M50 108l10 7 10-7%22 fill=%22none%22 stroke=%22%236f7a88%22 stroke-width=%223%22/></svg>"); --laurel-bronze: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22><path d=%22M60 112C30 110 12 86 14 30M60 112C90 110 108 86 106 30%22 fill=%22none%22 stroke=%22%237a4318%22 stroke-width=%222%22/><ellipse cx=%2250.6%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-205 50.6 113.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2269.4%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28385 69.4 113.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2252.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 52.0 105.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2268.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 68.0 105.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2238.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-191 38.0 109.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2282.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28371 82.0 109.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2241.3%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 41.3 102.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2278.7%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 78.7 102.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2226.8%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-177 26.8 102.6%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2293.2%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28357 93.2 102.6%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2231.7%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 31.7 96.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2288.3%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 88.3 96.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2217.4%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-163 17.4 93.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22102.6%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28343 102.6 93.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2223.8%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 23.8 88.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2296.2%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 96.2 88.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2210.7%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-149 10.7 82.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22109.3%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28329 109.3 82.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2218.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-79 18.0 78.7%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22102.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28259 102.0 78.7%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%226.8%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 6.8 69.4%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22113.2%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 113.2 69.4%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2214.7%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-65 14.7 68.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22105.3%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28245 105.3 68.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%226.1%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 6.1 56.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22113.9%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 113.9 56.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2214.1%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-51 14.1 56.8%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22105.9%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28231 105.9 56.8%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%228.6%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 8.6 43.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22111.4%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 111.4 43.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2216.3%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-37 16.3 45.8%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22103.7%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28217 103.7 45.8%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2214.2%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 14.2 31.4%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22105.8%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 105.8 31.4%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2221.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-23 21.0 35.6%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2299.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28203 99.0 35.6%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><path d=%22M50 108l10 7 10-7%22 fill=%22none%22 stroke=%22%237a4318%22 stroke-width=%223%22/></svg>"); }

/* Reiter mit „bald“ */
.tab-soon { margin-left: .3rem; padding: .05rem .35rem; border-radius: 99px; font-style: normal; font-size: .58rem; letter-spacing: .06em; color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); }
.clan-tabs a.tab-is-soon:not(.active) { opacity: .85; }
.cosm-option .tab-soon { vertical-align: middle; }

/* Schrein */
.hall-shrine { background: linear-gradient(90deg, rgba(255, 236, 160, .3), transparent); }
.hall-shrine .hall-icon { color: #b8891b; }

/* Anwerbebrett */
.recruit-board h2 .icon { vertical-align: -3px; }
.recruit-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .9rem; padding: .4rem .2rem; }
.recruit-note { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1rem .9rem .8rem; background: linear-gradient(180deg, #fff8e4, #f1e2bb); border: 1px solid rgba(110, 78, 38, .35); border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); transform: rotate(-.6deg); }
.recruit-note:nth-child(even) { transform: rotate(.7deg); }
.recruit-note header { display: flex; gap: .55rem; align-items: center; }
.recruit-note header small { display: block; color: var(--ink-soft); }
.recruit-note p { margin: 0; font-style: italic; white-space: pre-wrap; }
.recruit-note .btn, .recruit-note .tag { align-self: flex-start; }
.recruit-pin { position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #9b1b14 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.recruit-quote { margin: .4rem 0; padding: .5rem .7rem; border-left: 3px solid var(--gold-dark, #8a6512); background: rgba(255, 250, 235, .6); font-style: italic; white-space: pre-wrap; }
.recruit-quote.small { font-size: .85rem; margin: .3rem 0 0; }

/* Forschung */
.research-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .8rem; }
.research-branch { display: flex; flex-direction: column; gap: .55rem; }
.research-branch h3 { margin: 0 0 .1rem; text-align: center; }
.research-node { position: relative; display: flex; gap: .55rem; padding: .55rem .6rem; border-radius: 10px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.research-node:not(:last-child)::after { content: ''; position: absolute; left: 1.2rem; bottom: -.6rem; width: 2px; height: .6rem; background: var(--line); }
.research-node > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.research-node small { color: var(--ink-soft); }
.research-node em { color: #2f7a3d; font-style: normal; font-weight: 700; font-size: .8rem; }
.research-node .btn { align-self: flex-start; margin-top: .2rem; }
.research-dot { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid var(--line); font-size: .75rem; color: #fff; }
.research-node.done { background: rgba(140, 200, 120, .2); border-color: rgba(47, 122, 61, .5); }
.research-node.done .research-dot { background: #2f7a3d; border-color: #2f7a3d; }
.research-node.ready { border-color: #c9a227; box-shadow: 0 0 0 1px rgba(201, 162, 39, .35), 0 0 12px rgba(201, 162, 39, .25); }
.research-node.ready .research-dot { border-color: #c9a227; background: radial-gradient(circle, #f3d67a, #c9a227); }
.research-node.locked { opacity: .7; }

/* Relikt */
.relic-show.bag-tile { flex-direction: row; align-items: center; text-align: left; gap: .8rem; min-height: 0; padding: .8rem 1rem; cursor: default; margin: .2rem 0 .6rem; }
.relic-show p { margin: .3rem 0 0; }
.relic-icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; flex: none; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); border: 2px solid var(--rc, #c9a227); box-shadow: 0 0 14px var(--rcg, rgba(201, 162, 39, .4)); }
.relic-icon .icon { width: 1.8rem; height: 1.8rem; }
.relic-ladder { list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: .5rem 0 .8rem; padding: 0; }
.relic-ladder li { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem .1rem; border-radius: 6px; border-top: 4px solid var(--rc); background: rgba(255, 250, 235, .5); font-size: .62rem; text-align: center; min-width: 0; }
.relic-ladder li span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.relic-ladder li.now { outline: 2px solid #c9a227; box-shadow: 0 0 10px rgba(201, 162, 39, .5); background: rgba(255, 236, 160, .55); }
.relic-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .5rem; }
.relic-choice { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .55rem .65rem; font: inherit; text-align: left; color: var(--ink); background: rgba(255, 250, 235, .7); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.relic-choice:hover:not(:disabled) { border-color: #c9a227; }
.relic-choice small { color: var(--ink-soft); }
.relic-choice.on { border-color: #2f7a3d; background: rgba(140, 200, 120, .22); cursor: default; }
@media (max-width: 600px) { .relic-ladder { grid-template-columns: repeat(5, 1fr); } }

/* Abstimmungen */
.polls { display: grid; gap: .8rem; }
.poll { padding: .7rem .8rem; border-radius: 10px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.poll.closed { opacity: .85; }
.poll header { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .45rem; }
.poll header small { color: var(--ink-soft); }
.poll ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.poll li { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; overflow: hidden; border: 1px solid transparent; }
.poll-bar { position: absolute; inset: 0; z-index: 0; }
.poll-bar span { display: block; height: 100%; background: linear-gradient(90deg, rgba(201, 162, 39, .35), rgba(201, 162, 39, .15)); }
.poll li > :not(.poll-bar) { position: relative; z-index: 1; }
.poll li.mine { border-color: #c9a227; }
.poll li.won .poll-bar span { background: linear-gradient(90deg, rgba(47, 122, 61, .4), rgba(47, 122, 61, .15)); }
.poll li.won .poll-text { font-weight: 700; }
.poll .actions { margin-top: .4rem; }
.poll-form { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.poll-opts { display: grid; gap: .35rem; margin-bottom: .4rem; }

/* Steuer, Rechte */
.tax-big { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .4rem; }
.tax-big strong { font-family: var(--heading); font-size: 2.2rem; color: #8a6512; }
.rights-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rights-table th, .rights-table td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); text-align: center; }
.rights-table th:first-child, .rights-table td:first-child { text-align: left; }
.rights-table th { font-size: .7rem; font-weight: 600; color: var(--ink-soft); }
.rights-table td.yes { color: #2f7a3d; font-weight: 700; }
.rights-table td.no { color: var(--ink-soft); }
.rank-row { display: flex; flex-direction: column; gap: .35rem; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 250, 235, .5); }
.rank-row-head { display: flex; gap: .5rem; align-items: center; }
.rank-row-head .rank-name { flex: 1; }
.rank-perms { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .85rem; }
.rank-rows { display: grid; gap: .5rem; margin-bottom: .5rem; }

/* Saison */
.season-table { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.season-table li { display: grid; grid-template-columns: 2rem auto 1fr auto; align-items: center; gap: .55rem; padding: .35rem .55rem; border-radius: 8px; background: rgba(255, 250, 235, .55); border: 1px solid var(--line); }
.season-table li.mine { border-color: #c9a227; box-shadow: 0 0 0 1px rgba(201, 162, 39, .4); background: rgba(255, 236, 160, .45); }
.season-place { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-family: var(--heading); background: rgba(0, 0, 0, .08); }
.season-table li.place-1 .season-place { background: radial-gradient(circle at 35% 30%, #fff2b0, #d4a52a 60%, #8a6512); color: #2a1b10; }
.season-table li.place-2 .season-place { background: radial-gradient(circle at 35% 30%, #fff, #c7ccd4 60%, #7c8794); color: #2a2f36; }
.season-table li.place-3 .season-place { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c27a3a 60%, #7a4318); color: #2a1408; }
.season-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-name small { color: var(--ink-soft); }
.season-rewards, .season-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.season-rewards li { display: flex; align-items: center; gap: .7rem; }
.season-rewards small { display: block; color: var(--ink-soft); }
.laurel-badge { flex: none; width: 3rem; height: 3rem; background: center / contain no-repeat; }
.laurel-badge.l1 { background-image: var(--laurel-gold); }
.laurel-badge.l2 { background-image: var(--laurel-silber); }
.laurel-badge.l3 { background-image: var(--laurel-bronze); }

/* Lorbeer um das Wappen (Saison-Lohn) */
:is(.fx-lorbeer_gold, .fx-lorbeer_silber, .fx-lorbeer_bronze) .clan-emblem-wrap { padding: 14px 16px 6px; background: center bottom / 100% auto no-repeat; }
.fx-lorbeer_bronze .clan-emblem-wrap { background-image: var(--laurel-bronze); }
.fx-lorbeer_silber .clan-emblem-wrap { background-image: var(--laurel-silber); }
.fx-lorbeer_gold .clan-emblem-wrap { background-image: var(--laurel-gold); filter: drop-shadow(0 0 6px rgba(255, 215, 110, .55)); }
.rk-banner:is(.fx-lorbeer_gold, .fx-lorbeer_silber, .fx-lorbeer_bronze) { background: center 70% / 150% auto no-repeat; }
.rk-banner.fx-lorbeer_gold { background-image: var(--laurel-gold); }
.rk-banner.fx-lorbeer_silber { background-image: var(--laurel-silber); }
.rk-banner.fx-lorbeer_bronze { background-image: var(--laurel-bronze); }

/* Hintergrund „Halle der Sieger“: goldene Säulen, Siegesbanner, wandernder Lichtschein */
.clan-bg-siegerhalle {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .0) 60%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(90deg, transparent 0 7%, rgba(255, 223, 130, .22) 7% 8.5%, rgba(120, 80, 10, .35) 8.5% 10%, transparent 10% 16.6%),
    linear-gradient(180deg, #4a1010 0 9%, transparent 9%),
    radial-gradient(ellipse at 50% -10%, rgba(255, 220, 120, .55), transparent 55%),
    linear-gradient(180deg, #3b2608, #6b4a12 55%, #2a1a06);
}
.clan-bg-siegerhalle::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 9%, #8e1b18 9% 13%, transparent 13% 16.6%); -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: .75; }
.clan-bg-siegerhalle::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 190, .18) 50%, transparent 65%); background-size: 250% 100%; animation: siegerhalle-shine 7s ease-in-out infinite; }
.clan-bg-siegerhalle > :not(.clan-particles) { position: relative; z-index: 1; }
@keyframes siegerhalle-shine { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .clan-bg-siegerhalle::after { animation: none; } }

/* Allianzen (bald) */
.alliance-soon { display: grid; gap: 1rem; text-align: center; justify-items: center; }
.alliance-image { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.alliance-placeholder { display: grid; place-items: center; gap: .4rem; width: 100%; min-height: 260px; border-radius: 12px; border: 2px dashed rgba(110, 78, 38, .45); background: repeating-linear-gradient(45deg, rgba(201, 162, 39, .06) 0 12px, transparent 12px 24px); color: var(--ink-soft); }
.alliance-placeholder .icon { width: 3rem; height: 3rem; opacity: .6; }
.alliance-text h2 { margin: .4rem 0 .2rem; }
.alliance-text p { max-width: 40rem; margin: 0 auto; }
.alliance-upload { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; }
.alliance-upload small { color: var(--ink-soft); flex-basis: 100%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Wappen-Editor */
.crest-dialog { max-width: min(980px, 96vw); }
.crest-editor { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1.2rem; align-items: start; }
.crest-left { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.crest-preview { display: grid; place-items: center; width: 100%; padding: 1rem; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff8e4, #e9d6a8); border: 1px solid var(--line); }
.crest-preview svg { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.crest-right { display: grid; gap: .6rem; min-width: 0; }
.crest-group { margin: 0; padding: .4rem .6rem .6rem; border: 1px solid var(--line); border-radius: 10px; }
.crest-group legend { padding: 0 .3rem; font-family: var(--heading); font-size: .8rem; }
.crest-picks { display: flex; flex-wrap: wrap; gap: .35rem; }
.crest-pick { display: grid; place-items: center; min-width: 2.6rem; min-height: 2.6rem; padding: .25rem; border-radius: 8px; border: 2px solid transparent; background: rgba(255, 250, 235, .7); cursor: pointer; }
.crest-pick:hover { border-color: rgba(201, 162, 39, .6); }
.crest-pick.on { border-color: #c9a227; background: rgba(255, 236, 160, .7); box-shadow: 0 0 8px rgba(201, 162, 39, .5); }
.swatch-dot { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); font-size: .7rem; font-weight: 700; }
.swatch-dot.auto { background: conic-gradient(#e8c766 0 50%, #2a1b10 50%); color: #fff; text-shadow: 0 0 2px #000; }
@media (max-width: 700px) { .crest-editor { grid-template-columns: 1fr; } .crest-left { position: static; } }

/* Allianz-Szene: Fenster flackern, Fluss glitzert, die Ringe des Schwurs leuchten */
.soon .window rect { animation: twinkle 4.5s ease-in-out infinite; }
.soon .shimmer { animation: ally-shimmer 4s ease-in-out infinite; }
.soon .oath-glow { transform-box: fill-box; transform-origin: center; animation: ally-oath 3.2s ease-in-out infinite; }
@keyframes ally-shimmer { 0%, 100% { opacity: .25; transform: translateX(-6px); } 50% { opacity: 1; transform: translateX(6px); } }
@keyframes ally-oath { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.soon.soon-figure { display: block; min-height: 0; padding: 0; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.soon-figure .soon-scene { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; z-index: 0; }
.alliance-rumors { list-style: none; margin: .8rem auto 0; padding: 0; max-width: 40rem; display: grid; gap: .3rem; font-style: italic; color: var(--ink-soft); }
.alliance-rumors li::before { content: '❧ '; color: #b8891b; font-style: normal; }

/* ==== Die Krone ==== */
.clan-banner { position: relative; }
.clan-crown-badge { position: absolute; top: .7rem; right: .8rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem .3rem .45rem; border-radius: 99px; font-family: var(--heading); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.clan-crown-badge .icon { width: 1.5rem; height: 1.5rem; }
.clan-crown-badge.gold { color: #2a1b06; background: linear-gradient(180deg, #fff2b0, #e6b93f 55%, #9a7314); border: 1px solid #fff0b0; box-shadow: 0 0 0 1px #6b4c0c, 0 0 16px rgba(255, 210, 90, .8); animation: crown-glow 2.6s ease-in-out infinite; }
.clan-crown-badge.silber { color: #262b33; background: linear-gradient(180deg, #ffffff, #c9ced6 55%, #7c8794); border: 1px solid #fff; box-shadow: 0 0 0 1px #59626e, 0 0 10px rgba(220, 230, 245, .55); }
.clan-crown-badge.big { position: static; padding: .5rem; }
.clan-crown-badge.big .icon { width: 2rem; height: 2rem; }
@keyframes crown-glow { 0%, 100% { box-shadow: 0 0 0 1px #6b4c0c, 0 0 10px rgba(255, 210, 90, .55); } 50% { box-shadow: 0 0 0 1px #6b4c0c, 0 0 24px rgba(255, 210, 90, 1); } }
@media (prefers-reduced-motion: reduce) { .clan-crown-badge.gold { animation: none; } }
.crown-mini { display: inline-grid; place-items: center; margin-left: .35rem; vertical-align: -3px; }
.crown-mini .icon { width: 1.05rem; height: 1.05rem; }
.crown-mini.gold { color: #c99a1c; filter: drop-shadow(0 0 3px rgba(255, 210, 90, .8)); }
.crown-mini.silber { color: #8a94a1; }
.crown-holder { display: flex; align-items: center; gap: .9rem; justify-content: center; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 220, 120, .25), rgba(255, 250, 235, .6), rgba(255, 220, 120, .25)); border: 1px solid #c9a227; text-align: left; }
.crown-holder small { display: block; color: var(--ink-soft); }
.crown-holder strong { font-family: var(--heading); font-size: 1.15rem; }
.crown-empty { font-style: italic; color: var(--ink-soft); }
.crown-mine { display: flex; align-items: center; gap: .4rem; justify-content: center; margin: 0; padding: .5rem .8rem; border-radius: 10px; font-weight: 700; }
.crown-mine.gold { background: rgba(255, 220, 120, .35); color: #6b4c0c; }
.crown-mine.silber { background: rgba(200, 206, 214, .45); color: #3e4652; }
.crown-history { width: 100%; max-width: 40rem; text-align: left; }
.crown-history ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.crown-gm { width: 100%; max-width: 40rem; padding-top: .8rem; border-top: 1px dashed var(--line); text-align: left; }
.crown-gm .actions { align-items: flex-end; }
.soon .ray { animation: crown-ray 5s ease-in-out infinite; }
.soon .halo { transform-box: fill-box; transform-origin: center; animation: ally-oath 3.4s ease-in-out infinite; }
.soon .crown-float { animation: crown-float 4s ease-in-out infinite; }
@keyframes crown-ray { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes crown-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Kronen-Reihe oben rechts (ändert das Layout nicht) */
.clan-crowns { position: absolute; top: .45rem; right: .6rem; z-index: 3; display: flex; align-items: center; gap: .2rem; pointer-events: auto; }
.crown-icon { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.crown-icon .icon { width: 1.1rem; height: 1.1rem; }
.crown-icon.silber { color: #2b313a; background: radial-gradient(circle at 35% 30%, #ffffff, #c9ced6 60%, #7c8794); box-shadow: 0 0 0 1px #59626e, 0 0 6px rgba(220, 230, 245, .5); }
.crown-icon.gold { width: 2.1rem; height: 2.1rem; color: #2a1b06; background: radial-gradient(circle at 35% 30%, #fff6c8, #e6b93f 60%, #9a7314); box-shadow: 0 0 0 1px #6b4c0c, 0 0 14px rgba(255, 210, 90, .85); animation: crown-glow 2.6s ease-in-out infinite; }
.crown-icon.gold .icon { width: 1.3rem; height: 1.3rem; }
.crown-more { margin: 0 .15rem; font-family: var(--heading); color: #e3e7ee; text-shadow: 0 1px 2px #000; }
@media (prefers-reduced-motion: reduce) { .crown-icon.gold { animation: none; } }
.crown-mini-row { display: inline-flex; gap: .1rem; margin-left: .35rem; vertical-align: -2px; }
.crown-mini-row .crown-icon { width: 1.05rem; height: 1.05rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.crown-mini-row .crown-icon .icon { width: .7rem; height: .7rem; }
.crown-mini-row .crown-icon.gold { width: 1.2rem; height: 1.2rem; box-shadow: 0 0 0 1px #6b4c0c, 0 0 6px rgba(255, 210, 90, .8); animation: none; }
.crown-mini-row .crown-icon.gold .icon { width: .8rem; height: .8rem; }
.crown-mini-row .crown-more { color: var(--ink-soft); text-shadow: none; font-size: .7rem; }
.crown-mine { flex-direction: column; text-align: center; }
.crown-mine p { margin: .2rem 0 0; }
.crown-tab-row { display: inline-flex; gap: .3rem; align-items: center; }
.crown-tab-row .crown-icon { width: 2.4rem; height: 2.4rem; }
.crown-tab-row .crown-icon .icon { width: 1.5rem; height: 1.5rem; }
.crown-tab-row .crown-icon.gold { width: 2.9rem; height: 2.9rem; }
.crown-tab-row .crown-icon.gold .icon { width: 1.8rem; height: 1.8rem; }
.crown-tab-row .crown-more { color: var(--ink-soft); text-shadow: none; }
.crown-history ul { list-style: none; padding-left: 0; display: grid; gap: .3rem; }
.crown-history li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.crown-icon.tiny { width: 1.2rem; height: 1.2rem; animation: none; }
.crown-icon.tiny .icon { width: .75rem; height: .75rem; }

/* Glocke: gebündelte Clan-Neuigkeiten */
.notif-panel li.cat-clan { border-left-color: #2f5aa8; }
.notif-chip.cat-clan { border-color: #2f5aa8; }
.notif-group { cursor: pointer; }
.notif-group-head { display: grid; gap: .1rem; }
.notif-group-head strong { font-family: var(--heading); color: #1f3b7a; }
.notif-group-head .notif-msg { color: var(--ink-soft); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-group-more { font-size: .78rem; color: var(--blood); }
.notif-group-list { list-style: none; margin: .4rem 0 0; padding: 0 0 0 .4rem; border-left: 2px solid rgba(47, 90, 168, .35); }
.notif-group-list li { font-size: .9rem; }

/* Clan-Reiter: „Mehr“ */
.clan-more { position: relative; }
.clan-more > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 99px; cursor: pointer; font-family: var(--heading); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--parchment-dark); background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .35); }
.clan-more > summary::-webkit-details-marker { display: none; }
.clan-more > summary .icon { width: 15px; height: 15px; }
.clan-more.active > summary { color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); border-color: var(--gold-dark); }
.clan-more-caret { font-style: normal; font-size: .7rem; }
.clan-more-menu { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 20; display: grid; gap: .3rem; min-width: 13rem; padding: .5rem; border-radius: 12px; background: #24170d; border: 1px solid rgba(201, 162, 39, .5); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.clan-more-menu a { justify-content: flex-start; }
@media (max-width: 600px) { .clan-more-menu { left: auto; right: 0; } }

/* Königskrone sitzt über dem Lorbeer (eigenes Element statt ::after) */
.fx-crown-top { position: absolute; top: -1.15rem; left: 50%; z-index: 4; transform: translateX(-50%); font-size: 1.7rem; line-height: 1; color: #ffd36b; text-shadow: 0 0 8px rgba(255, 211, 107, .85), 0 1px 2px rgba(0, 0, 0, .6); pointer-events: none; }
:is(.fx-lorbeer_gold, .fx-lorbeer_silber, .fx-lorbeer_bronze) .fx-crown-top { top: -1.25rem; }

/* Clanliste: Kronen neben dem Namen, Sortierung */
.clan-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem; }
.clan-name-row .crown-mini-row { margin-left: 0; }
.clan-sort { display: flex; justify-content: flex-end; margin: -.3rem 0 .5rem; }
.clan-sort label { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--ink-soft); }
.clan-sort select { padding: .2rem .4rem; }
.clan-page > .clan-tabs, .clan-bg-siegerhalle > .clan-tabs { z-index: 6; }
.crown-more.only-mobile { display: none; }
@media (max-width: 600px) {
  .clan-crowns { top: .5rem; right: .5rem; }
  .clan-crowns .crown-icon.silber ~ .crown-icon.silber { display: none; }
  .clan-crowns .crown-more.only-mobile { display: inline; }
}
.clan-sort label span { white-space: nowrap; }

/* ==== Clan-Shop ==== */
.shop-head { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.shop-head h2 { margin-top: 0; }
.shop-purse { display: grid; place-items: center; min-width: 9rem; padding: .8rem 1rem; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #fff2b8, #e6b93f 70%, #9a7314); border: 1px solid #6b4c0c; box-shadow: 0 0 14px rgba(255, 210, 90, .5); color: #2a1b06; text-align: center; }
.shop-purse small { font-family: var(--heading); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.shop-purse strong { font-family: var(--heading); font-size: 2rem; line-height: 1.1; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .6rem; margin-top: .5rem; }
.shop-offer { display: flex; flex-direction: column; gap: .3rem; padding: .65rem .75rem; border-radius: 10px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); border-top: 3px solid var(--rc, #c9a227); }
.shop-offer header { display: flex; justify-content: space-between; gap: .4rem; align-items: flex-start; }
.shop-offer small { color: var(--ink-soft); flex: 1; }
.shop-offer.owned { opacity: .7; border-top-color: #2f7a3d; }
.shop-offer.owned em { color: #2f7a3d; font-style: normal; font-weight: 700; font-size: .85rem; }
.shop-buy { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-top: .2rem; }
.shop-cost { display: inline-flex; align-items: center; gap: .2rem; font-family: var(--heading); font-weight: 700; color: #8a6512; }
.shop-cost .icon { width: 1rem; height: 1rem; }
.shop-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.shop-page { display: grid; gap: 1rem; }
.shop-page > .card { margin: 0; }

/* ==== Clan-Statistik (eine Reihe je Diagramm, Gold als einzige Datenfarbe) ==== */
.stats-page { position: relative; display: grid; gap: 1rem; }
.stats-page .grid { margin: 0; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: .6rem; }
.stat-tile { display: grid; gap: .1rem; padding: .7rem .8rem; border-radius: 12px; background: linear-gradient(180deg, #fff8e4, #f1e2bb); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.stat-tile small { font-family: var(--heading); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.stat-tile strong { font-family: var(--heading); font-size: 1.5rem; color: var(--ink); line-height: 1.15; }
.stat-tile span { font-size: .8rem; color: var(--ink-soft); }
.chart-bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 4px; height: 200px; padding: 1.2rem 0 0; border-bottom: 1px solid rgba(110, 78, 38, .35); }
.chart-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; outline: none; cursor: default; }
.chart-col:hover .chart-bar, .chart-col:focus .chart-bar { filter: brightness(1.12); }
.chart-bar { display: block; width: min(70%, 28px); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #e2b74a, #a77d1e); }
.chart-col.now .chart-bar { background: linear-gradient(180deg, #c9a227, #6b4c0c); box-shadow: 0 0 0 2px rgba(255, 250, 235, .9), 0 0 0 3px #6b4c0c; }
.chart-val { font-size: .72rem; font-weight: 700; color: var(--ink); min-height: 1rem; }
.chart-x { position: absolute; bottom: -1.3rem; font-size: .62rem; color: var(--ink-soft); white-space: nowrap; }
.card .chart-bars { margin-bottom: 1.6rem; }
.chart-table { margin-top: .4rem; font-size: .85rem; }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.chart-table th, .chart-table td { padding: .2rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.chart-line-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .2rem .4rem; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: .7rem; color: var(--ink-soft); text-align: right; }
.chart-line { width: 100%; height: 180px; overflow: visible; }
.chart-axis { stroke: rgba(110, 78, 38, .35); stroke-width: 1; }
.chart-area { fill: rgba(201, 162, 39, .18); }
.chart-stroke { fill: none; stroke: #a77d1e; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-dot { fill: #e2b74a; stroke: #fff8e4; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: default; }
.chart-dot.now { fill: #6b4c0c; }
.chart-line-x { grid-column: 2; display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-soft); }
.chart-tip { position: absolute; z-index: 10; transform: translate(-50%, -100%); padding: .3rem .55rem; border-radius: 6px; background: #24170d; color: #f3e2b0; font-size: .8rem; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.seg-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin-bottom: .6rem; }
.seg-toggle button { padding: .3rem .8rem; font: inherit; font-size: .85rem; background: transparent; border: 0; cursor: pointer; color: var(--ink); }
.seg-toggle button.on { background: #c9a227; color: #1d130b; font-weight: 700; }
.member-bars, .season-trend { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mb-head { display: flex; justify-content: space-between; gap: .5rem; }
.mb-track { height: 10px; margin: .2rem 0; border-radius: 99px; background: rgba(110, 78, 38, .15); overflow: hidden; }
.mb-track span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a77d1e, #e2b74a); }
.member-bars small, .season-trend small { color: var(--ink-soft); font-size: .8rem; }
.season-trend li { display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; align-items: center; }
.season-trend li small { display: block; }
.season-trend li.place-1 .season-place { background: radial-gradient(circle at 35% 30%, #fff2b0, #d4a52a 60%, #8a6512); color: #2a1b10; }
.season-trend li.place-2 .season-place { background: radial-gradient(circle at 35% 30%, #fff, #c7ccd4 60%, #7c8794); }
.season-trend li.place-3 .season-place { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c27a3a 60%, #7a4318); }
@media (max-width: 600px) { .chart-x { font-size: .5rem; } .chart-bars { gap: 2px; } }
@media (max-width: 600px) { .chart-col:nth-child(even) .chart-x { display: none; } }

/* ==== Finalkill ==== */
.fx-finalkill { display: grid; place-items: center; align-content: center; gap: 1rem; background: radial-gradient(ellipse at center, rgba(40, 6, 6, .82), rgba(0, 0, 0, .94) 70%); overflow: hidden; }
.fk-stage { position: relative; width: min(46vw, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.fk-art, .fk-ghost, .fk-shard { position: absolute; inset: 0; display: grid; place-items: center; }
.fk-figure { width: 100%; height: 100%; display: grid; place-items: center; }
.fk-figure > svg, .fk-figure .creature-art, .fk-figure svg { width: 100%; height: 100%; }
.fk-figure .portrait, .fk-figure img { width: 82%; height: 82%; border-radius: 50%; object-fit: cover; }
.fk-figure .portrait { display: grid; place-items: center; font-size: 4rem; }
.fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s ease-in-out both; }
@keyframes fk-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fk-hit { 0%, 100% { transform: translate(0); } 20% { transform: translate(-10px, 4px) rotate(-3deg); } 50% { transform: translate(9px, -5px) rotate(2deg); } 75% { transform: translate(-5px, 2px); } }
.fk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: fk-flash .45s .3s ease-out both; pointer-events: none; }
@keyframes fk-flash { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }
.fk-slash { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 6px; margin: -3px 0 0 -70vmax; transform: rotate(-24deg) scaleX(0); background: linear-gradient(90deg, transparent, #fff 45%, #ffdfa0 55%, transparent); box-shadow: 0 0 24px #ffd27a; animation: fk-slash .5s .25s cubic-bezier(.7, 0, .2, 1) both; pointer-events: none; }
@keyframes fk-slash { 0% { transform: rotate(-24deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-24deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-24deg) scaleX(1); opacity: 0; } }
.fk-title { position: relative; display: grid; justify-items: center; gap: .15rem; text-align: center; color: #f3e2b0; animation: fk-title .6s .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.fk-kicker { font-family: var(--heading); font-size: clamp(2.2rem, 8vw, 4.4rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1; background: linear-gradient(180deg, #fff6d0, #e6b93f 55%, #8e1b18); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 120, 60, .7)); }
.fk-title strong { font-family: var(--heading); font-size: 1.4rem; color: #fff; }
.fk-title small { font-style: italic; color: #e3c88a; }
@keyframes fk-title { from { transform: scale(2.2); opacity: 0; letter-spacing: .4em; } to { transform: scale(1); opacity: 1; } }
.fk-still .fk-title { animation: none; }
.fx-finalkill .fx-particles { position: absolute; inset: 0; pointer-events: none; }
.fx-finalkill .fx-particles i { position: absolute; display: block; opacity: 0; animation-fill-mode: both; }
/* Zu Staub zerfallen */
.fk-zerfall .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-dust-out 1.4s .9s ease-in forwards; }
@keyframes fk-dust-out { to { opacity: 0; filter: blur(6px) grayscale(1) brightness(.6); transform: translateY(-12px) scale(1.05); } }
.fk-dust i { width: 6px; height: 6px; border-radius: 50%; background: #b9a58a; animation: fk-rise 1.6s ease-out; transform: scale(var(--s)); }
@keyframes fk-rise { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s)); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), -120px) scale(calc(var(--s) * .3)); } }
/* Zerschmettern & Vereisen: Splitter fliegen auseinander */
.fk-shards { position: absolute; inset: 0; }
.fk-shard { opacity: 0; }
.fk-zerschmettern .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-hide .01s 1s forwards; }
.fk-zerschmettern .fk-shard { animation: fk-shard 1.8s 1s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes fk-shard { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
@keyframes fk-hide { to { opacity: 0; } }
.fk-vereisen .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-freeze .7s .5s ease-out forwards, fk-hide .01s 1.5s forwards; }
@keyframes fk-freeze { to { filter: saturate(.2) brightness(1.5) hue-rotate(170deg) drop-shadow(0 0 12px #9fe6ff); } }
.fk-vereisen .fk-shard { filter: saturate(.2) brightness(1.5) hue-rotate(170deg) drop-shadow(0 0 8px #bff0ff); animation: fk-shard 1.7s 1.5s cubic-bezier(.2, .7, .3, 1) both; }
.fk-frost i { width: 9px; height: 9px; background: #dff7ff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: fk-rise 1.8s ease-out; }
/* Verbrennen */
.fk-verbrennen .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-burn 1.8s .8s ease-in forwards; }
@keyframes fk-burn { 30% { filter: brightness(1.3) sepia(1) saturate(4) hue-rotate(-20deg) drop-shadow(0 0 20px #ff7a1a); } 70% { filter: brightness(.25) drop-shadow(0 0 16px #ff4d1a); opacity: 1; } 100% { filter: brightness(0); opacity: 0; transform: translateY(14px) scaleY(.85); } }
.fk-flames i { width: 18px; height: 28px; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #fff3b0, #ff9a2a 45%, rgba(255, 60, 20, 0) 75%); filter: blur(1px); animation: fk-flame 1.4s ease-out; }
@keyframes fk-flame { 0% { opacity: 0; transform: translateY(20px) scale(var(--s)); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -130px) scale(calc(var(--s) * .4)); } }
/* Blitz */
.fk-bolt { position: absolute; left: 50%; top: -60%; width: 34%; margin-left: -17%; height: 120%; opacity: 0; filter: drop-shadow(0 0 16px #bfe4ff); animation: fk-bolt .5s .6s ease-out both; }
@keyframes fk-bolt { 0% { opacity: 0; transform: translateY(-40%); } 30% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; } 100% { opacity: 0; } }
.fk-blitz .fk-flash { animation: fk-flash .45s .3s ease-out both, fk-flash .5s .7s ease-out both; }
.fk-blitz .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-zap 1.6s .75s ease-in forwards; }
@keyframes fk-zap { 0% { filter: brightness(3) drop-shadow(0 0 20px #bfe4ff); } 25% { filter: brightness(.15); } 100% { filter: brightness(0); opacity: 0; transform: scale(.92); } }
.fk-sparks i { width: 3px; height: 14px; background: #e6f6ff; box-shadow: 0 0 8px #9fd2ff; animation: fk-rise 1s ease-out; }
/* Seele steigt auf */
.fk-seele .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-pale 1.6s .9s ease-in forwards; }
@keyframes fk-pale { to { filter: grayscale(1) brightness(.4); opacity: .25; } }
.fk-ghost { opacity: 0; filter: grayscale(1) brightness(2.2) blur(1px) drop-shadow(0 0 18px #cfe6ff); animation: fk-ghost 2s 1s ease-out both; }
@keyframes fk-ghost { 0% { opacity: 0; transform: translateY(0) scale(1); } 25% { opacity: .75; } 100% { opacity: 0; transform: translateY(-160px) scale(1.15); } }
.fk-wisps i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #ffffff, rgba(170, 210, 255, 0) 70%); animation: fk-rise 2s ease-out; }
@media (prefers-reduced-motion: reduce) { .fx-finalkill * { animation: none !important; } }

/* ==== NSC-Spieler ==== */
.token.npc-hero .token-art { box-shadow: 0 0 0 3px #4a2a6a, 0 0 14px rgba(150, 90, 220, .55); border-radius: 50%; }
.token-npc { position: absolute; top: .3rem; right: .3rem; z-index: 2; padding: .05rem .4rem; border-radius: 99px; font-size: .62rem; font-family: var(--heading); letter-spacing: .04em; color: #f3e2ff; background: #4a2a6a; border: 1px solid #b892e6; }
.arena-npc { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; width: 100%; padding-bottom: .5rem; margin-bottom: .2rem; border-bottom: 1px dashed rgba(201, 162, 39, .35); }
.arena-npc > small { font-family: var(--heading); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: #e3c88a; }
.arena-npc select { width: auto; max-width: 100%; }
.arena-npc .check { color: #f3e2b0; font-size: .85rem; }
.fighter-fx { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .8rem; color: var(--ink-soft); }
.fighter-fx select { width: auto; flex: 1; min-width: 0; font-size: .8rem; padding: .15rem .3rem; }
.fx-pick { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.fx-pick .field { flex: 1 1 14rem; margin: 0; }
.npc-sheet { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.npc-portrait-box { display: grid; justify-items: center; gap: .5rem; }
.npc-row .portrait { flex: none; }
.npc-row .cat-name small { color: var(--ink-soft); }
@media (max-width: 600px) { .npc-sheet { grid-template-columns: 1fr; justify-items: center; } }
/* Finalkill: Lichtkreis hinter der Figur, damit dunkle Silhouetten und Splitter sichtbar sind */
.fk-stage { width: min(56vw, 300px); }
.fk-stage::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 160, .55), rgba(255, 170, 90, .18) 55%, transparent 72%); animation: fk-in .4s ease-out both; }
.fk-shard .fk-figure, .fk-art .fk-figure { filter: drop-shadow(0 0 2px rgba(255, 230, 170, .9)) drop-shadow(0 0 10px rgba(255, 180, 90, .35)); }
.fk-zerschmettern .fk-stage::before, .fk-vereisen .fk-stage::before, .fk-blitz .fk-stage::before, .fk-zerfall .fk-stage::before, .fk-seele .fk-stage::before, .fk-verbrennen .fk-stage::before { animation: fk-in .4s ease-out both, fk-glow-out 1.2s 1.6s ease-in forwards; }
.fk-vereisen .fk-stage::before { background: radial-gradient(circle, rgba(200, 240, 255, .6), rgba(120, 190, 255, .2) 55%, transparent 72%); }
.fk-seele .fk-stage::before { background: radial-gradient(circle, rgba(220, 235, 255, .5), rgba(150, 180, 255, .16) 55%, transparent 72%); }
@keyframes fk-glow-out { to { opacity: .25; } }
.fk-dust i { background: #e8d5b0; box-shadow: 0 0 4px rgba(255, 230, 180, .6); }

/* ==========================================================================
   Wildnis – Jagdgründe, Expeditionen, Solo-Abenteuer, Tagesaufträge, Clan-Boss
   ========================================================================== */
.wild-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.wild-hero-main { flex: 1 1 220px; min-width: 0; }
.wild-hero-main strong { font-family: var(--heading); font-size: 1.15rem; }
.wild-hero-main small { display: block; margin-bottom: .4rem; color: var(--ink-soft); }
.wild-hero-main .vial { margin-bottom: 0; }
.wild-stats { display: flex; gap: .5rem; }
.wild-stats span { display: flex; flex-direction: column; align-items: center; min-width: 3.2rem; padding: .35rem .4rem; border-radius: 8px; background: rgba(110, 78, 38, .1); border: 1px solid var(--line); }
.wild-stats b { font-family: var(--display); font-size: 1.1rem; line-height: 1.1; }
.wild-stats small { font-family: var(--heading); font-size: .62rem; letter-spacing: .12em; color: var(--ink-soft); }
.wild-stamina { display: flex; flex-direction: column; gap: .2rem; }
.wild-stamina small { font-size: .78rem; color: var(--ink-soft); }
.pips { display: flex; gap: .25rem; flex-wrap: wrap; max-width: 14rem; }
.pips i { width: .9rem; height: .9rem; border-radius: 50%; background: rgba(110, 78, 38, .2); border: 1px solid var(--line); }
.pips i.on { background: radial-gradient(circle at 35% 35%, #f3d67a, #a8801e); border-color: var(--gold-dark); box-shadow: 0 0 6px rgba(201, 162, 39, .5); }
.wild-hero > .btn { flex-basis: 100%; }

.wild-dailies { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.wild-dailies li { padding: .6rem .7rem; border-radius: 8px; background: rgba(255, 255, 255, .25); border: 1px solid var(--line); }
.wild-dailies li.done { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, .18); }
.wild-dailies li.claimed { opacity: .6; }
.wd-head, .wd-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.wild-dailies .st-xp { margin: .4rem 0 .3rem; }

.wild-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.wild-area { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; color: #f1e3bf; background: linear-gradient(180deg, #24170f, #140d08); border: 1px solid var(--gold-dark); box-shadow: var(--shadow); }
.wa-art { position: relative; height: 130px; display: grid; place-items: center; padding: .8rem; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(201, 120, 39, .3), transparent 70%), linear-gradient(180deg, #1d2a20, #0f1510); }
.wa-art .creature-art { width: 110px; height: 110px; }
.wa-art > .icon { width: 64px; height: 64px; color: var(--gold); }
.wa-body { flex: 1; display: flex; flex-direction: column; gap: .35rem; padding: .8rem .9rem .9rem; }
.wa-body h3 { margin: 0; font-family: var(--heading); font-size: 1rem; color: var(--gold-light); display: flex; align-items: center; gap: .3rem; }
.wa-body p { margin: 0; font-size: .95rem; }
.wa-body small { color: #b9a57a; }
.wa-body .actions { margin-top: auto; padding-top: .4rem; }
.wild-area.locked { filter: grayscale(.7); opacity: .7; }
.wild-area:nth-child(2) .wa-art { background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(140, 170, 140, .25), transparent 70%), linear-gradient(180deg, #2a3330, #121816); }
.wild-area:nth-child(3) .wa-art { background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(200, 170, 110, .25), transparent 70%), linear-gradient(180deg, #2e261c, #15110c); }
.wild-area:nth-child(4) .wa-art { background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(90, 120, 200, .22), transparent 70%), linear-gradient(180deg, #161a26, #0a0c12); }
.wild-area:nth-child(5) .wa-art { background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(220, 70, 40, .35), transparent 70%), linear-gradient(180deg, #2e1410, #120706); }

.wild-exps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.wild-exp { display: flex; flex-direction: column; gap: .35rem; padding: .9rem; border-radius: 10px; background: var(--parchment-light); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wild-exp h3 { margin: 0; font-family: var(--heading); font-size: 1rem; display: flex; align-items: center; gap: .3rem; }
.wild-exp p { margin: 0; }
.wild-exp small { color: var(--ink-soft); }
.wild-exp .actions { margin-top: auto; }
.wild-exp.locked { opacity: .6; }
.wild-exp-active { border: 2px solid var(--gold); }
.wild-exp-active h2 { display: flex; align-items: center; gap: .4rem; }
.wild-events { margin: 0 0 .8rem; padding-left: 1.3rem; display: grid; gap: .6rem; }
.wild-events li p { margin: .1rem 0; }
.wild-events li.ok::marker { color: var(--forest); }
.wild-events li.fail::marker { color: var(--blood-light); }
.wild-events .probe { color: var(--ink-soft); font-style: italic; }
.wild-events li.ok .probe { color: var(--forest); }
.wild-events li.fail .probe { color: var(--blood-light); }
.wild-report-sum { padding: .6rem .8rem; border-radius: 8px; background: rgba(201, 162, 39, .12); border: 1px dashed var(--gold-dark); }
.wild-report-sum p { margin: .2rem 0; }
.wild-loot { list-style: none; margin: 0 0 .3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .8rem; }

.wild-advs { display: grid; gap: 1rem; }
.wild-adv { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border-radius: 10px; background: var(--parchment-light) var(--noise); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wild-adv h3 { margin: 0 0 .2rem; font-family: var(--heading); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wild-adv p { margin: 0 0 .3rem; }
.wild-adv small { color: var(--ink-soft); }
.wild-adv-seal { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; color: #f7ecd0; background: radial-gradient(circle at 35% 35%, #a8322a, #5f120d); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.wild-adv.won .wild-adv-seal { background: radial-gradient(circle at 35% 35%, #f3d67a, #8a6a1c); color: #2b1c0f; }

.run-card { max-width: 760px; }
.run-story { display: grid; gap: .6rem; margin-bottom: 1rem; }
.run-text { margin: 0; font-size: 1.05rem; line-height: 1.55; opacity: .7; }
.run-text.current { opacity: 1; font-size: 1.12rem; }
.run-text.current::first-letter { font-family: var(--heading); font-weight: 700; font-size: 1.5em; line-height: 1; color: var(--blood); }
.run-choice { margin: 0; padding-left: .8rem; border-left: 3px solid var(--gold-dark); font-family: var(--heading); font-size: .85rem; color: var(--ink-soft); }
.run-choice.ok { border-color: var(--forest); }
.run-choice.fail { border-color: var(--blood-light); }
.run-dmg { color: var(--blood-light); font-weight: 700; white-space: nowrap; }
.run-choices { display: grid; gap: .5rem; }
.run-option { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; width: 100%; padding: .7rem .9rem; text-align: left; cursor: pointer; font: inherit; font-size: 1rem; color: var(--ink); border-radius: 8px; background: linear-gradient(180deg, var(--parchment-light), var(--parchment)); border: 1px solid var(--gold-dark); transition: transform .12s ease, box-shadow .12s ease; }
.run-option:hover { transform: translateX(3px); box-shadow: 0 0 0 2px rgba(201, 162, 39, .35); }
.run-option:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.run-probe { font-size: .85rem; color: var(--blood); }
.run-end { margin-top: .6rem; padding: 1rem; border-radius: 10px; text-align: center; }
.run-end h2 { margin: 0 0 .3rem; font-family: var(--heading); font-weight: 700; letter-spacing: .06em; }
.run-end .actions { justify-content: center; }
.run-end.won { background: rgba(201, 162, 39, .18); border: 1px solid var(--gold); }
.run-end.lost { background: rgba(126, 26, 20, .12); border: 1px solid var(--blood-light); }
.run-end.lost h2 { color: var(--blood); }
.run-end p { margin: .2rem 0; }

.wild-boss { position: relative; text-align: center; color: #f1e3bf; background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(160, 40, 30, .35), transparent 70%), linear-gradient(180deg, #24170f, #0d0805); border-color: var(--gold-dark); }
.wild-boss h2 { color: #ffd36b; }
.wild-boss .hint { color: #b9a57a; }
.wb-art { width: 150px; height: 150px; margin: 0 auto .4rem; animation: wb-breathe 4s ease-in-out infinite; }
@keyframes wb-breathe { 50% { transform: scale(1.04) translateY(-3px); } }
.wild-boss.defeated .wb-art { filter: grayscale(1) brightness(.5); animation: none; transform: rotate(-6deg); }
.wb-hp { position: relative; height: 1.4rem; margin: .6rem 0; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .6); border: 1px solid var(--gold-dark); }
.wb-hp span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ff6b57, #8e1b18); box-shadow: 0 0 12px rgba(255, 90, 70, .6); transition: width .6s ease; }
.wb-hp em { position: relative; font-style: normal; font-size: .8rem; line-height: 1.4rem; font-weight: 700; text-shadow: 0 1px 2px #000; }
.wb-done { color: #ffd36b; font-family: var(--heading); display: flex; justify-content: center; align-items: center; gap: .3rem; }
.wb-board { margin: 0; padding-left: 1.4rem; display: grid; gap: .3rem; }
.wb-board li { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: baseline; }
.wb-board li:first-child { font-weight: 700; }
.wb-board li.mine span { color: var(--blood); }
.wb-board small { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .wb-art { animation: none; } }

.wild-fight {
  position: relative; padding: .9rem 1rem 1rem; border-radius: 12px; overflow: hidden; color: #f1e3bf;
  background: radial-gradient(ellipse 70% 40% at 50% 92%, rgba(201, 120, 39, .22), transparent 70%), linear-gradient(180deg, #17200f 0%, #0f150a 60%, #24170c 100%);
  border: 2px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 60px rgba(0, 0, 0, .6);
}
.wild-fight.boss { background: radial-gradient(ellipse 70% 50% at 70% 40%, rgba(170, 40, 30, .3), transparent 70%), linear-gradient(180deg, #1b130d 0%, #120c08 60%, #24170c 100%); }
.wf-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.wf-rounds { color: #d9c79c; }
.wf-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .8rem; }
.wf-token { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .8rem; border-radius: 12px; text-align: center; background: linear-gradient(180deg, rgba(255, 240, 200, .07), rgba(0, 0, 0, .25)); border: 1px solid rgba(201, 162, 39, .35); }
.wf-token.foe { border-color: rgba(224, 107, 92, .5); }
.wf-token strong { font-family: var(--heading); color: #fff0c4; }
.wf-token small { color: #b9a57a; }
.wf-token .vial { width: 100%; max-width: 220px; margin: 0; }
.wf-token .vial-head, .wf-token .vial-head strong { color: #e9d8ae; }
.wf-art { display: grid; place-items: center; width: 120px; height: 120px; }
.wf-bar .arena-actions { align-items: stretch; }
.wf-potion { display: inline-flex; gap: .3rem; align-items: stretch; }
.wf-potion select { max-width: 12rem; color: #f3e2b0; background: #1d130b; border: 1px solid var(--gold-dark); border-radius: 6px; padding: .3rem .4rem; }
.wf-result.won h2 { color: #ffd36b; }
.wf-result.lost h2 { color: #ff8a77; }
.wf-result .wild-loot { justify-content: center; margin: .4rem 0 .6rem; }
.wf-result .wild-loot li { padding: .15rem .6rem; border-radius: 99px; color: var(--ink); background: var(--parchment-light); border: 1px solid var(--gold-dark); }
.wf-log { list-style: none; margin: .9rem 0 0; padding: .6rem .7rem; display: grid; gap: .2rem; max-height: 16rem; overflow-y: auto; border-radius: 8px; background: rgba(0, 0, 0, .35); font-size: .92rem; }
.wf-log li { display: flex; gap: .5rem; }
.wf-log li:not(:first-child) { opacity: .7; }
.wf-round { flex: none; width: 2rem; font-family: var(--heading); font-size: .7rem; color: #9c8a66; padding-top: .15rem; }
.wf-hero { color: #e9d8ae; }
.wf-foe { color: #f0a497; }
.wf-system { color: #f3d67a; font-style: italic; }
.wf-log li.crit { font-weight: 700; }

.wild-toggles { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.wild-gm-areas, .wild-gm-advs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.wild-gm-areas li { padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.wild-gm-areas strong { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--heading); }
.wild-gm-areas p { margin: .2rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.wild-gm-advs li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.wild-gm-advs small { color: var(--ink-soft); }
.wild-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.wild-quick a { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .9rem .5rem; border-radius: 10px; text-align: center; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, var(--parchment-light), var(--parchment)); border: 1px solid var(--gold-dark); transition: transform .12s ease, box-shadow .12s ease; }
.wild-quick a:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(201, 162, 39, .35); }
.wild-quick .icon { width: 28px; height: 28px; color: var(--blood); }
.wild-quick strong { font-family: var(--heading); font-size: .9rem; }
.wild-quick small { color: var(--ink-soft); }

.adv-editor textarea { width: 100%; }
.ae-nodes { display: grid; gap: .8rem; margin: .8rem 0; }
.ae-node { padding: .7rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .3); border: 1px solid var(--line); border-left: 4px solid var(--gold-dark); }
.ae-node.start { border-left-color: var(--gold); }
.ae-node.end-win { border-left-color: var(--forest); }
.ae-node.end-lose { border-left-color: var(--blood-light); }
.ae-node header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.ae-node header strong { font-family: var(--heading); }
.ae-node header select { margin-left: auto; }
.ae-row { display: flex; flex-wrap: wrap; gap: 0 .8rem; align-items: flex-end; }
.ae-choices { display: grid; gap: .4rem; margin-top: .4rem; }
.ae-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .4rem; border-radius: 6px; background: rgba(110, 78, 38, .08); }
.ae-choice > input:first-child { flex: 1 1 14rem; }
.mini-wide { width: 14rem; max-width: 100%; }

@media (max-width: 760px) {
  .wf-stage { grid-template-columns: 1fr; }
  .wf-stage .arena-vs { justify-self: center; }
  .wf-art { width: 96px; height: 96px; }
  .wild-adv { flex-direction: column; }
  .wild-stats span { min-width: 2.8rem; }
}
.hint.on-dark { color: #b9a57a; }
.warn-box { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 8px; color: #fbe9c4; background: rgba(126, 26, 20, .55); border: 1px solid #a8322a; }
.ae-node header select, .ae-choice select, .ae-choice input { width: auto; max-width: 100%; margin: 0; }
.ae-choice > input:first-child { flex: 1 1 14rem; width: auto; }
.ae-choice select { max-width: 14rem; }
.ae-choice input.mini { width: 4rem; }
.ae-row .field { margin-bottom: .3rem; }
@media (max-width: 640px) {
  .mainnav a, .nav-more { min-width: 0; overflow: hidden; }
  .mainnav a span, .nav-more span { max-width: 100%; overflow: hidden; text-overflow: clip; }
}
.mainnav .nav-mobile { display: none; }
@media (max-width: 640px) {
  .mainnav .nav-desk { display: none !important; }
  .mainnav .nav-mobile { display: inline; }
}
@media (max-width: 400px) {
  .mainnav a, .nav-more { font-family: var(--body); font-weight: 700; font-size: .62rem; letter-spacing: -.01em; text-transform: none; padding-left: 0; padding-right: 0; }
  .mainnav { gap: .12rem; padding-left: .2rem; padding-right: .2rem; }
}
/* Am Computer passen alle Reiter (mit Dashboard) in eine Zeile */
@media (min-width: 641px) and (max-width: 1500px) {
  .mainnav { padding-left: .5rem; padding-right: .5rem; gap: .1rem; }
  .mainnav a, .nav-more { padding-left: .34rem; padding-right: .34rem; font-size: .68rem; letter-spacing: .01em; }
  .mainnav a { gap: .28rem; }
}

/* ---- Wildnis II: Ränge, Expeditionsplaner, Abenteuer mit Kämpfen ---- */
.tier-1 { --tier: #3f8a47; } .tier-2 { --tier: #3b6fc4; } .tier-3 { --tier: #7d4bb5; } .tier-4 { --tier: #b23a2e; } .tier-5 { --tier: #c9a227; }
.wild-tier { margin: 0 0 1.4rem; }
.wild-tier-head { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .7rem; padding-bottom: .35rem; font-family: var(--heading); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); border-bottom: 2px solid var(--tier); }
.wild-tier-head span { display: inline-flex; align-items: center; gap: .45rem; }
.wild-tier-head span::before { content: ''; width: .75rem; height: .75rem; border-radius: 50%; background: var(--tier); box-shadow: 0 0 8px var(--tier); }
.wild-tier-head small { font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: .9rem; color: #b9a57a; }
.tag.tier-1, .tag.tier-2, .tag.tier-3, .tag.tier-4, .tag.tier-5 { color: #fff; background: var(--tier); border-color: rgba(0, 0, 0, .2); }
.wild-exp, .wild-adv { border-top: 4px solid var(--tier, var(--gold-dark)); }
.wild-exp header, .wild-adv-body header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .6rem; }
.wild-exp.locked, .wild-adv.locked { filter: grayscale(.6); opacity: .65; }
.tag.fit { font-size: .66rem; }
.tag.fit-fordernd { color: #fff; background: #b23a2e; border-color: #7e1a14; }
.tag.fit-passend { color: #fff; background: #3f8a47; border-color: #24572a; }
.tag.fit-leicht { color: #3d2715; background: #e8d9a8; }
.tag.fit-trivial { color: #6b5a3e; background: rgba(110, 78, 38, .12); }
.exp-facts { display: flex; flex-wrap: wrap; gap: .25rem .35rem; margin: .1rem 0 .2rem; }
.exp-facts span { padding: .05rem .45rem; border-radius: 99px; font-size: .8rem; color: var(--ink-soft); background: rgba(110, 78, 38, .1); border: 1px solid var(--line); }
.exp-loot { display: flex; align-items: baseline; gap: .4rem; }
.exp-loot > small { flex: none; width: 5.2rem; font-family: var(--heading); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.wild-chips { display: flex; flex-wrap: wrap; gap: .2rem; }
.chip { padding: 0 .4rem; border-radius: 4px; font-size: .78rem; line-height: 1.45; background: rgba(255, 255, 255, .5); border: 1px solid var(--line); }
.chip.r-selten { color: var(--r-selten); border-color: var(--r-selten); }
.chip.r-episch { color: var(--r-episch); border-color: var(--r-episch); }
.chip.r-legendaer { color: var(--r-legendaer); border-color: var(--r-legendaer); }
.chip.r-mythisch { color: #c2185b; border-color: #c2185b; }
.chip.r-veredelt, .chip.r-heroisch { color: #1f7a6a; border-color: #1f7a6a; }
.chip.r-adamant { color: #fff; background: linear-gradient(90deg, #b3122a, #1e8a4c); border-color: transparent; }
.wild-mastery { margin-top: .2rem; }
.wild-mastery small { color: var(--ink-soft); font-size: .8rem; }
.wild-mastery .st-xp { margin: .2rem 0 0; }
.wild-mastery-up { margin: 0 0 .6rem; padding: .45rem .7rem; border-radius: 8px; color: #3d2a05; background: linear-gradient(90deg, #f3d67a, #e8c55a); font-family: var(--heading); font-size: .85rem; }
.exp-active-meta { margin: 0 0 .4rem; font-size: .9rem; color: var(--ink-soft); font-style: italic; }

.exp-plan h3 { margin: .9rem 0 .4rem; font-family: var(--heading); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blood); }
.exp-plan-lead { margin: 0; font-style: italic; color: var(--ink-soft); }
.exp-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .4rem; }
.exp-option { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .6rem; text-align: left; cursor: pointer; font: inherit; color: var(--ink); border-radius: 8px; background: rgba(255, 255, 255, .45); border: 1px solid var(--line); }
.exp-option strong { font-family: var(--heading); font-size: .82rem; }
.exp-option small { font-size: .8rem; color: var(--ink-soft); line-height: 1.3; }
.exp-option:hover:not(:disabled) { border-color: var(--gold); }
.exp-option.selected { background: linear-gradient(180deg, #f7ecd0, #ecd99c); border: 2px solid var(--gold-dark); box-shadow: 0 0 0 3px rgba(201, 162, 39, .2); }
.exp-option.appr-vorsichtig.selected { border-color: #3f8a47; }
.exp-option.appr-wagemutig.selected { border-color: #b23a2e; }
.exp-option:disabled { opacity: .45; cursor: not-allowed; }
.exp-supplies { display: grid; gap: .3rem; }
.exp-supply { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; background: rgba(255, 255, 255, .35); border: 1px solid var(--line); cursor: pointer; }
.exp-supply input { margin-top: .3rem; }
.exp-supply em { display: block; font-size: .82rem; color: var(--ink-soft); }
.exp-supply.none { opacity: .5; cursor: not-allowed; }
.exp-summary { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0 .2rem; }
.exp-summary span { padding: .2rem .6rem; border-radius: 99px; font-size: .85rem; color: #3d2a05; background: rgba(201, 162, 39, .25); border: 1px solid var(--gold-dark); }

.wild-events li.secret { padding: .4rem .5rem; border-radius: 8px; background: rgba(201, 162, 39, .15); }
.wild-chain { margin: .35rem 0 .1rem .3rem; padding-left: .8rem; border-left: 3px solid var(--forest); }
.wild-chain.fail { border-left-color: var(--blood-light); }
.wild-chain p { margin: .1rem 0; }
.wild-events .helper { color: #6b4d12; font-style: normal; }
.gain { color: var(--forest); white-space: nowrap; }
.loss { color: var(--blood-light); white-space: nowrap; }
.wild-loot li.rare { padding: 0 .35rem; border-radius: 4px; background: rgba(201, 162, 39, .3); box-shadow: 0 0 8px rgba(201, 162, 39, .6); }
.wild-rare { color: #8a5a00; font-family: var(--heading); font-size: .85rem; }

.wild-stars { display: inline-flex; gap: .05rem; font-size: 1rem; letter-spacing: 0; }
.wild-stars i { font-style: normal; color: rgba(110, 78, 38, .3); }
.wild-stars i.on { color: #d9a514; text-shadow: 0 0 6px rgba(217, 165, 20, .6); }
.wild-adv-body { flex: 1; min-width: 0; }
.wild-adv-body header h3 { margin: 0; }
.wild-adv-body header { justify-content: flex-start; }
.wild-adv-body header .tag { margin-left: auto; }
.wild-adv .wild-adv-seal { background: radial-gradient(circle at 35% 35%, var(--tier, #a8322a), #2b1c0f 130%); }
.run-end .wild-stars { font-size: 2rem; margin-bottom: .3rem; }

.run-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.run-status .vial { flex: 1 1 180px; margin: 0; }
.run-gold { font-family: var(--heading); font-size: .9rem; }
.run-choice p { margin: 0; }
.run-heal, .run-gain { color: var(--forest); font-weight: 700; white-space: nowrap; }
.run-fight { margin: .4rem 0 .2rem; border-radius: 8px; color: #f1e3bf; background: linear-gradient(180deg, #24170f, #140d08); border: 1px solid var(--gold-dark); }
.run-fight.won { border-color: #4f9a56; }
.run-fight.lost { border-color: #b23a2e; }
.run-fight summary { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; padding: .5rem .7rem .7rem; cursor: pointer; list-style: none; }
.run-fight summary::-webkit-details-marker { display: none; }
.run-fight summary strong { font-family: var(--heading); font-size: .85rem; color: #ffd36b; }
.run-fight.lost summary strong { color: #ff8a77; }
.run-fight summary small { color: #b9a57a; }
.run-fight-icon .icon { width: 16px; height: 16px; color: #ffd36b; }
.run-fight-hp { position: absolute; left: .7rem; right: .7rem; bottom: .3rem; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.run-fight-hp i { display: block; height: 100%; background: #ff6b57; }
.run-fight .wf-log { margin: 0; border-radius: 0 0 8px 8px; max-height: 14rem; }
.run-option.fight { border-color: #a8322a; background: linear-gradient(180deg, #f7e2d6, #ecc9b4); }
.run-option.locked { opacity: .55; cursor: not-allowed; transform: none !important; }
.run-option > span:first-child { display: inline-flex; align-items: center; gap: .3rem; }
.run-option .icon { width: 16px; height: 16px; }
.run-option-tags { display: flex; flex-wrap: wrap; gap: .2rem .6rem; justify-content: flex-end; }
.run-cost { font-size: .85rem; color: #6b4d12; }
.run-lock { font-size: .85rem; color: var(--blood); font-style: normal; }

.ae-choice { flex-direction: column; align-items: stretch; }
.ae-choice-main, .ae-choice-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ae-choice-main > input:first-child { flex: 1 1 14rem; }
.ae-choice-sub { padding-left: .8rem; font-size: .9rem; }
.ae-choice-sub select, .ae-choice-sub input { width: auto; margin: 0; }
.ae-choice-sub input.mini { width: 4.2rem; }
@media (max-width: 640px) {
  .exp-loot { flex-direction: column; gap: .15rem; }
  .run-option { flex-direction: column; align-items: flex-start; }
  .run-option-tags { justify-content: flex-start; }
}
.wild-tier .wild-exps { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.wild-exp.locked, .wild-adv.locked { opacity: .78; }
.exp-supply, .exp-supply span, .exp-supply strong, .exp-supply small, .exp-supply em { font-family: var(--body); text-transform: none; letter-spacing: normal; font-size: .95rem; color: var(--ink); }
.exp-supply strong { font-weight: 700; }
.exp-supply small { color: var(--ink-soft); font-size: .85rem; }
.exp-supply em { display: block; font-size: .85rem; color: var(--ink-soft); }
.wild-events .wild-chain.ok .probe { color: var(--forest); }
.wild-events .wild-chain.fail .probe { color: var(--blood-light); }
.run-fight, .run-fight summary small, .run-fight .wf-log { font-family: var(--body); text-transform: none; letter-spacing: normal; }
.run-fight .wf-log { font-size: .92rem; }

/* ---- Wildnis-Banner: Landschaft, Info-Knopf, goldener Schimmer ---- */
.wild-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.wild-banner {
  position: relative; isolation: isolate; overflow: hidden; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 14px; cursor: pointer; color: #fff4dc; background: #140d08;
  border: 1px solid rgba(201, 162, 39, .45); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wild-banner:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0, 0, 0, .55); border-color: rgba(255, 211, 107, .8); }
.wild-banner:focus-visible { outline: 3px solid #ffd36b; outline-offset: 3px; }
.wb-scene { position: absolute; inset: 0; z-index: -3; }
.wb-scene .scene { display: block; width: 100%; height: 100%; transform-origin: 50% 70%; transition: transform 6s ease-out, filter .3s ease; }
.wild-banner:hover .scene, .wild-banner.selected .scene { transform: scale(1.07); }
.wb-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 7, 3, .35) 0%, rgba(12, 7, 3, 0) 26%, rgba(12, 7, 3, .25) 48%, rgba(12, 7, 3, .82) 74%, rgba(12, 7, 3, .95) 100%); }
.wb-creature { position: absolute; z-index: -2; right: 6%; bottom: 34%; width: 38%; height: 46%; display: grid; place-items: center; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.wb-creature .creature-art { width: 100%; height: 100%; }
.wb-top { position: absolute; top: .65rem; left: .7rem; right: 3.2rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.wb-top .tag { box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.tag.wb-lock { color: #f3e2b0; background: rgba(20, 12, 6, .75); border-color: rgba(255, 220, 140, .4); }
.wb-info {
  position: absolute; top: .55rem; right: .6rem; z-index: 2; width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; font: italic 700 1.05rem/1 Georgia, 'Times New Roman', serif; color: #ffe6a8;
  background: rgba(20, 12, 6, .55); border: 1.5px solid rgba(255, 220, 140, .75); box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  backdrop-filter: blur(3px); transition: transform .15s ease, background .15s ease;
}
.wb-info:hover, .wb-info:focus-visible { transform: scale(1.12); background: rgba(201, 162, 39, .85); color: #1d130b; outline: none; }
.wb-body { padding: 1rem 1rem .95rem; }
.wb-body h3 { margin: 0 0 .25rem; display: flex; align-items: center; gap: .4rem; font-family: var(--heading); font-size: 1.12rem; letter-spacing: .03em; color: #fff0c4; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.wb-body h3 .icon { width: 18px; height: 18px; color: #ffd36b; }
.wb-body p { margin: 0 0 .5rem; font-size: .98rem; line-height: 1.35; color: #f1e3bf; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; margin-bottom: .6rem; font-size: .82rem; }
.wb-foot > span:not(.wild-stars) { padding: .05rem .5rem; border-radius: 99px; color: #f3e2b0; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 220, 140, .25); }
.wb-foot .wild-stars i { color: rgba(255, 255, 255, .25); }
.wb-foot .wild-stars i.on { color: #ffd36b; }
.wb-foot .wb-running { color: #1d130b !important; background: #ffd36b !important; }
.wb-actions { display: flex; gap: .4rem; }
.wb-actions .btn { box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.wild-banner.locked .scene { filter: grayscale(.75) brightness(.6); }
.wild-banner.locked .wb-body { opacity: .85; }
/* Tier-Akzent am unteren Rand */
.wild-banner::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 1; background: var(--tier, var(--gold)); opacity: .9; }
/* Ausgewählt: Goldrahmen und ein Schimmer, der von rechts nach links zieht */
.wild-banner.selected { border-color: #ffd36b; box-shadow: 0 0 0 2px #ffd36b, 0 0 30px rgba(255, 211, 107, .45), 0 16px 30px rgba(0, 0, 0, .55); }
.wb-shine { position: absolute; inset: -10% -60%; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 232, 160, .08) 44%, rgba(255, 226, 140, .5) 50%, rgba(255, 232, 160, .08) 56%, transparent 62%);
  transform: translateX(60%); }
.wild-banner.selected .wb-shine { opacity: 1; animation: wb-shine 2.8s ease-in-out infinite; }
@keyframes wb-shine { 0% { transform: translateX(60%); } 55%, 100% { transform: translateX(-60%); } }
/* Kleine Bewegungen in den Szenen – nur bei Hover/Auswahl und im Info-Fenster */
.scene .sc-drift, .scene .sc-glow, .scene .sc-twinkle, .scene .sc-shimmer, .scene .sc-spin, .scene .sc-flash { animation-play-state: paused; }
.scene .sc-drift { animation: sc-drift 14s ease-in-out infinite alternate; }
.scene .sc-glow { animation: sc-glow 3.2s ease-in-out infinite alternate; }
.scene .sc-twinkle { animation: sc-glow 2.4s ease-in-out infinite alternate; }
.scene .sc-shimmer { animation: sc-glow 1.8s ease-in-out infinite alternate; }
.scene .sc-spin { transform-box: fill-box; transform-origin: center; animation: sc-spin 9s linear infinite; }
.scene .sc-flash { animation: sc-flash 4s steps(1) infinite; }
.wild-banner:hover .scene *, .wild-banner.selected .scene *, .wb-info-scene .scene * { animation-play-state: running; }
@keyframes sc-drift { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes sc-glow { from { opacity: .45; } to { opacity: 1; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-flash { 0%, 100% { opacity: .15; } 8% { opacity: 1; } 12% { opacity: .2; } 15% { opacity: .9; } 20% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .wild-banner .wb-shine, .scene * { animation: none !important; }
  .wild-banner.selected .wb-shine { opacity: .5; transform: none; }
  .wb-scene .scene { transition: none; }
}

/* Info-Fenster */
.wb-dialog { padding-top: 0; overflow-x: hidden; }
.wb-dialog > h2 { margin-top: 1rem; }
.wb-info-scene { order: -1; flex: none; margin: 0 -1.6rem 0; height: 170px; overflow: hidden; border-radius: 10px 10px 0 0; border-bottom: 2px solid var(--gold-dark); }
.wb-dialog { display: flex; flex-direction: column; }
.wb-dialog .dialog-close { z-index: 2; }
.wb-info-scene .scene { width: 100%; height: 100%; display: block; }
.wb-lead { margin: .2rem 0 .6rem; font-size: 1.05rem; font-style: italic; color: var(--ink-soft); }
.wb-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .7rem; }
.wb-badges .wild-stars { font-size: 1.1rem; }
.wb-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 0 0 .6rem; padding: .7rem .9rem; border-radius: 10px; background: rgba(255, 255, 255, .35); border: 1px solid var(--line); }
.wb-facts dt { font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding-top: .15rem; }
.wb-facts dd { margin: 0; }
.wb-sub { margin: .7rem 0 .35rem; font-family: var(--heading); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blood); }
.wb-mastery-list { margin: .4rem 0 .2rem; padding-left: 1.1rem; font-size: .9rem; color: var(--ink-soft); }
.wb-mastery-list li.done { color: var(--ink); }
.wb-mastery-list li.done::marker { content: '✓ '; color: var(--forest); }
.wb-tips { margin: .2rem 0 .6rem; padding-left: 1.1rem; font-size: .93rem; color: var(--ink-soft); }
/* Starthinweis */
.wb-confirm { max-width: 460px; }
.wb-warn { margin: 0 0 .8rem; padding-left: 1.1rem; display: grid; gap: .35rem; }
.wb-skip { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem; color: var(--ink-soft); }
.wb-reset { margin-top: 1rem; }
@media (max-width: 640px) {
  .wild-banners { grid-template-columns: 1fr; }
  .wild-banner { min-height: 230px; }
  .wb-info-scene { margin: 0 -1rem; height: 140px; }
  .wb-facts { grid-template-columns: 1fr; gap: .1rem; }
  .wb-facts dd { margin-bottom: .35rem; }
}
.wild-banners { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.wild-banner { min-height: 290px; }
.wb-row { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.wb-row .wb-foot { margin-bottom: 0; }
.wb-actions { flex: none; }
.wb-shade { background: linear-gradient(180deg, rgba(12, 7, 3, .35) 0%, rgba(12, 7, 3, 0) 22%, rgba(12, 7, 3, 0) 50%, rgba(12, 7, 3, .78) 78%, rgba(12, 7, 3, .94) 100%); }
.wb-top .tag.fit-trivial, .wb-top .tag.fit-leicht { color: #f3e2b0; background: rgba(20, 12, 6, .72); border-color: rgba(255, 220, 140, .35); }
.wild-banner.locked .scene { filter: grayscale(.55) brightness(.78); }
.wild-banners { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 640px) { .wild-banners { grid-template-columns: 1fr; } }

/* ---- Würfeln nach Zweck ---- */
.roll-panel .roll-steps { display: grid; gap: .6rem; }
.roll-panel .roll-head { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.roll-field { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.roll-field > span { font-family: var(--heading); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.roll-preview { margin: 0; padding: .55rem .7rem; border-radius: 8px; font-family: var(--heading); font-size: .9rem; color: #3d2a05; background: rgba(201, 162, 39, .18); border: 1px dashed var(--gold-dark); }
.roll-preview small { font-family: var(--body); font-size: .9rem; color: var(--ink-soft); }
.roll-panel .quick-dice { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.roll-panel .die-btn.active { background: var(--gold); color: #1d130b; }
.roll-panel .actions { margin-top: .7rem; }
@media (max-width: 640px) { .roll-panel .roll-head { grid-template-columns: 1fr; } }

/* ---- Ansichtsmodus nach dem Tod ---- */
.inspect-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem; padding: .5rem 1rem; color: #f3e2b0; background: linear-gradient(90deg, #3a0a0b, #1b0607 50%, #3a0a0b); border-bottom: 1px solid #a8322a; font-size: .95rem; text-align: center; }
.inspect-bar .icon { width: 18px; height: 18px; color: #ff8a77; }
.inspect-mode #app { filter: saturate(.55); }
.inspect-mode .topbar { top: 2.6rem; }
.log li.cleared { opacity: .55; font-style: italic; }
.ban-note { display: flex; align-items: flex-end; gap: .5rem; } .ban-note .field { flex: 1; }

/* ---- Eigenes Dashboard ---- */
.dashboard { margin: 0 0 1.2rem; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.dash-head h2 { margin: 0; font-family: var(--heading); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.dw { display: flex; flex-direction: column; padding: .8rem .9rem; border-radius: 12px; background: var(--parchment-light) var(--noise); border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 140px; }
.dw header { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.dw header .icon { width: 18px; height: 18px; color: var(--blood); }
.dw header h3 { margin: 0; flex: 1; font-family: var(--heading); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.dw-body { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.dw-line { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.dw-line span { color: var(--ink-soft); font-size: .92rem; }
.dw-line.good strong { color: var(--forest); }
.dw-line.bad strong { color: var(--blood-light); }
.dw-body small { color: var(--ink-soft); }
.dw-link { margin-top: auto; padding-top: .3rem; font-family: var(--heading); font-size: .75rem; letter-spacing: .05em; color: var(--blood); text-decoration: none; }
.dw-list { margin: 0; padding-left: 1rem; display: grid; gap: .2rem; font-size: .92rem; }
.dw-trial { margin-top: .3rem; padding: .35rem .5rem; border-radius: 8px; background: rgba(201, 162, 39, .18); border: 1px dashed var(--gold-dark); display: flex; flex-direction: column; }
.dw-trial.gated { background: rgba(168, 50, 42, .14); border-color: var(--blood-light); }
.dw textarea { width: 100%; flex: 1; resize: vertical; }
.dw-tools { display: inline-flex; gap: .2rem; }
.dw-tools button { width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 6px; cursor: pointer; background: rgba(110, 78, 38, .12); border: 1px solid var(--line); color: var(--ink); }
.dw-tools button:disabled { opacity: .35; cursor: default; }
.dw-tools .dw-remove { color: var(--blood); }
.dash-add { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .7rem; padding: .6rem .7rem; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px dashed rgba(201, 162, 39, .5); }
.dash-add small { color: #d9c79c; }
.chip-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 99px; cursor: pointer; font: inherit; font-size: .88rem; color: var(--ink); background: var(--parchment-light); border: 1px solid var(--gold-dark); }
.chip-btn .icon { width: 14px; height: 14px; color: var(--blood); }
.chip-btn:hover { background: var(--gold-light); }
/* Aufstiegsprüfung */
.trial-card { border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(243, 214, 122, .25), var(--shadow); }
.trial-card.gated { border-color: var(--blood-light); box-shadow: 0 0 0 3px rgba(168, 50, 42, .18), var(--shadow); }
.trial-card h2 { display: flex; align-items: center; gap: .4rem; }
.trial-tasks { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.trial-tasks li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; }
.trial-tasks li .st-xp { grid-column: 1 / -1; margin: 0; }
.trial-tasks li.done span { color: var(--forest); font-weight: 600; }

/* ---- Clan: Beschreibung im Banner, Dashboard, Shop ansehen ---- */
.clan-banner .clan-desc { margin: .45rem 0 0; max-width: 60ch; font-size: .98rem; line-height: 1.45; color: inherit; opacity: .92; white-space: pre-line; }
.members-page { max-width: 820px; }
.clan-dash { position: relative; z-index: 2; margin: 0 0 1rem; padding: .9rem; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--acc, var(--gold-dark)); box-shadow: inset 0 0 40px rgba(0, 0, 0, .3); }
.clan-dash > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.clan-dash > header h2 { margin: 0; display: flex; align-items: center; gap: .4rem; font-family: var(--heading); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acc-text, var(--gold-light)); }
.clan-dash .dw { border-top: 4px solid var(--acc, var(--gold)); min-height: 120px; }
.clan-dash .dw.wide { grid-column: 1 / -1; min-height: 0; }
.clan-dash.acc-gold { --acc: #c9a227; --acc-text: #ffd36b; }
.clan-dash.acc-blut { --acc: #a8322a; --acc-text: #ff9a88; }
.clan-dash.acc-wald { --acc: #3f8a47; --acc-text: #9fe0a0; }
.clan-dash.acc-nacht { --acc: #3b5fb0; --acc-text: #a9c4ff; }
.clan-dash.acc-eis { --acc: #7fb8d6; --acc-text: #dff4ff; }
.cd-welcome { margin: 0; font-size: 1.05rem; line-height: 1.5; white-space: pre-line; font-style: italic; }
.cd-quote { margin: .2rem 0 0; font-size: .92rem; }
.dw-list li.done { color: var(--forest); }
.cd-pick { display: grid; gap: .3rem; }
.cd-pick-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .3); }
.cd-pick-row.on { border-color: var(--gold-dark); background: rgba(201, 162, 39, .14); }
.cd-pick-row .icon { width: 15px; height: 15px; }
.cd-accents { display: flex; flex-wrap: wrap; gap: .35rem; }
.cd-accent { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 99px; cursor: pointer; border: 2px solid transparent; color: #fff; }
.cd-accent input { margin: 0; }
.cd-accent.acc-gold { background: #a8801e; } .cd-accent.acc-blut { background: #8e1b18; } .cd-accent.acc-wald { background: #2e6334; } .cd-accent.acc-nacht { background: #23407a; } .cd-accent.acc-eis { background: #4f86a3; }
.shop-offer[role="button"] { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.shop-offer[role="button"]:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(201, 162, 39, .45); }
.cd-preview { position: relative; height: 120px; margin: .6rem 0; border-radius: 10px; overflow: hidden; display: grid; place-items: center; color: #fff; background-color: #1d130b; border: 1px solid var(--gold-dark); }
.cd-preview span { position: relative; z-index: 1; padding: .2rem .6rem; border-radius: 99px; background: rgba(0, 0, 0, .55); font-size: .85rem; }
.bonus-list { margin: .3rem 0; padding-left: 1.1rem; color: var(--forest); }
.ach-sub { margin: .8rem 0 .3rem; font-family: var(--heading); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blood); }
.clan-ach-item .st-xp { margin: .3rem 0 .2rem; }
.ach-team { display: flex; flex-wrap: wrap; gap: .2rem; }
.ach-team span { padding: 0 .4rem; border-radius: 99px; font-size: .75rem; color: var(--ink-soft); background: rgba(110, 78, 38, .1); border: 1px solid var(--line); }
.ach-team span.done { color: #fff; background: var(--forest); border-color: transparent; }

/* ---- Clantruhen ---- */
.chest-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.chest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .35rem; margin-bottom: .7rem; }
.chest-slot { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: .25rem; border-radius: 8px; cursor: pointer; font: inherit; font-size: .72rem; line-height: 1.15; text-align: center; color: #f3e2b0; background: radial-gradient(circle at 50% 30%, #4a3120, #1d130b); border: 2px solid #5a4128; box-shadow: inset 0 0 10px rgba(0, 0, 0, .6); }
.chest-slot .chest-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.chest-slot b { position: absolute; right: .2rem; bottom: .1rem; font-size: .75rem; color: #ffd36b; text-shadow: 0 1px 2px #000; }
.chest-slot.empty { cursor: default; background: rgba(110, 78, 38, .12); border: 2px dashed rgba(110, 78, 38, .35); box-shadow: none; }
.chest-slot.r-selten { border-color: var(--r-selten); } .chest-slot.r-episch { border-color: var(--r-episch); } .chest-slot.r-legendaer { border-color: var(--r-legendaer); }
.chest-slot.r-veredelt, .chest-slot.r-heroisch { border-color: #1f9a85; } .chest-slot.r-mythisch { border-color: #c2185b; } .chest-slot.r-adamant { border-color: #1e8a4c; box-shadow: 0 0 10px #b3122a; }
.chest-slot:not(.empty):hover { transform: translateY(-2px); border-color: var(--gold); }
.chest-deposit select { flex: 1; min-width: 12rem; }
.chest-others { display: grid; gap: .4rem; }
.chest-other summary { cursor: pointer; padding: .4rem .5rem; border-radius: 8px; background: rgba(110, 78, 38, .1); list-style: none; display: flex; align-items: center; gap: .3rem; }
.chest-other summary .icon { width: 16px; height: 16px; color: var(--blood); }
.chest-other .chest-grid { margin-top: .4rem; }

/* ---- Notizen unten im Dashboard ---- */
.notes-card { margin-top: 1.2rem; }
.notes-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .7rem; }
.notes-head h2 { margin: 0; flex: 1; display: flex; align-items: center; gap: .4rem; }
.notes-status { color: var(--forest); font-style: italic; }
.notes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.note { display: flex; flex-direction: column; padding: .55rem .65rem .65rem; border-radius: 10px; background: #fbf3d9; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transform: rotate(-.3deg); }
.note:nth-child(even) { transform: rotate(.35deg); }
.note.pinned { background: #fff1b8; border-color: var(--gold-dark); }
.note header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .35rem; }
.note time { font-size: .78rem; color: var(--ink-soft); }
.note-tools { display: inline-flex; gap: .2rem; }
.note-tools button { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 6px; color: var(--ink-soft); background: transparent; border: 1px solid transparent; }
.note-tools button:hover { border-color: var(--line); background: rgba(110, 78, 38, .08); }
.note-tools .icon { width: 15px; height: 15px; }
.note-pin.on { color: #b8891b; }
.note-pin.on .icon { fill: #f3d67a; }
.note-del { color: var(--blood) !important; }
.note textarea { flex: 1; width: 100%; min-height: 6rem; resize: vertical; border: 0; background: transparent; font: inherit; font-size: 1rem; line-height: 1.45; color: var(--ink); padding: .1rem; }
.note textarea:focus { outline: 2px solid rgba(201, 162, 39, .5); border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .note, .note:nth-child(even) { transform: none; } }

/* ---- Die alte Steintafel (Mammut-Puzzle, Season-Seite) ---------------------------------- */
.mp-page { margin-top: 1.6rem; }
.mp-card h3 { font-family: var(--heading); font-size: 1rem; margin: 1rem 0 .5rem; }
.mp-intro { font-style: italic; color: var(--ink-soft); }
.mp-count { font-family: var(--heading); margin: .2rem 0 .6rem; }
.mp-count strong { color: var(--gold-dark); font-size: 1.15rem; }
.mp-board-wrap { position: relative; margin: .4rem auto .8rem; max-width: 680px; padding: .6rem; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, #3a2a1a, #1a110a 75%); box-shadow: inset 0 0 30px rgba(0, 0, 0, .7), 0 2px 0 rgba(0, 0, 0, .2); }
.mp-board { display: block; width: 100%; height: auto; }
.mp-board .mp-seam, .mp-thumb .mp-seam { fill: none; stroke: rgba(30, 20, 10, .55); stroke-width: 1.8; }
.mp-board .mp-slot { fill: none; stroke: rgba(201, 162, 39, .35); stroke-width: 1.6; stroke-dasharray: 6 6; }
.mp-board .mp-num { fill: rgba(201, 162, 39, .32); font-family: var(--display); font-size: 40px; font-weight: 700; }
.mp-board .mp-piece.have .mp-slot { stroke: #ffd36b; stroke-dasharray: none; stroke-width: 2.4; animation: mp-pulse 1.6s ease-in-out infinite; }
.mp-board .mp-piece.have .mp-num { fill: rgba(255, 211, 107, .75); }
.mp-board .mp-piece.placed { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55)); }
.mp-board .mp-piece.mp-just { transform-box: fill-box; transform-origin: center; animation: mp-drop .9s cubic-bezier(.2, .9, .3, 1.2) both; }
.mp-done .mp-board .mp-seam { stroke: rgba(255, 211, 107, .25); }
.mp-done .mp-board-wrap { box-shadow: inset 0 0 30px rgba(0, 0, 0, .7), 0 0 26px rgba(236, 190, 90, .45); }
@keyframes mp-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .3; } }
@keyframes mp-drop { from { transform: translateY(-40px) scale(1.15) rotate(-6deg); opacity: 0; filter: drop-shadow(0 0 14px #ffd36b); } to { transform: none; opacity: 1; } }
.mp-mine-list { display: flex; flex-wrap: wrap; gap: .7rem; }
.mp-frag { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem .45rem .45rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .25); }
.mp-frag strong { display: block; font-family: var(--heading); font-size: .9rem; margin-bottom: .25rem; }
.mp-thumb { width: 74px; height: 74px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.mp-log { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .2rem; font-size: .95rem; }
.mp-log small { color: var(--ink-soft); }
.mp-roman { display: inline-block; min-width: 2.6em; font-family: var(--heading); font-weight: 700; color: var(--gold-dark); }
.mp-gm { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.mp-gm-clans { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.mp-gm .inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Wildnis-Reiter direkt nach dem Erwachen: goldenes Pulsieren, bis man ihn das erste Mal öffnet. */
#nav a.nav-awaken { position: relative; color: #ffe39a; animation: nav-awaken 1.8s ease-in-out infinite; }
@keyframes nav-awaken { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 211, 107, 0); background-color: transparent; } 50% { box-shadow: 0 0 14px 2px rgba(255, 211, 107, .55); background-color: rgba(201, 162, 39, .22); } }

/* ---- Das Erwachen (Vollbild) -------------------------------------------------------- */
.mpa { position: fixed; inset: 0; z-index: 2100; overflow: hidden; background: #050302; color: #f7ecd0; display: grid; place-items: center; animation: fx-in .4s ease-out; }
.mpa.mpa-out { animation: fx-fade-out .45s ease-in forwards; }
.mpa-landwrap { position: absolute; inset: 0; opacity: 0; animation: mpa-fade 1.6s ease-out 4s forwards; }
.mpa-land { width: 100%; height: 100%; display: block; }
.mpa-sun { transform-box: fill-box; transform-origin: center; animation: mpa-sun 3s ease-out 4s both; }
.mpa-mist { animation: drift 14s ease-in-out infinite alternate; }
.mpa-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 130, .14) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0, rgba(0, 0, 0, .5) 18%, transparent 42%); mask-image: radial-gradient(circle closest-side, #000 0, rgba(0, 0, 0, .5) 18%, transparent 42%);
  animation: mpa-rays-in 1.2s ease-out 3.9s forwards, mpa-spin 40s linear 3.9s infinite; }
.mpa-stage { position: absolute; left: 50%; top: 42%; width: min(92vw, 760px); aspect-ratio: 720 / 480; transform: translate(-50%, -50%); }
.mpa-tablet { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: mpa-tablet-out .7s ease-in 3.95s forwards; }
.mpa-piece { transform-box: fill-box; transform-origin: center; animation: mpa-fly 1.15s cubic-bezier(.16, .84, .3, 1) both; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); }
.mpa-seam { fill: none; stroke: rgba(30, 20, 10, .6); stroke-width: 2; animation: mpa-seam 1.5s ease-out 2.05s forwards; }
.mpa-shake { transform-box: fill-box; transform-origin: center; animation: mpa-shake .55s ease-in-out 2s both; }
.mpa-glow { filter: drop-shadow(0 0 5px #ffcf5a) drop-shadow(0 0 14px rgba(255, 190, 70, .8)); }
.mpa-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mpa-draw 1s ease-in-out both; }
.mpa-beast { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform-origin: 50% 80%;
  filter: drop-shadow(0 0 18px rgba(255, 206, 110, .85)) drop-shadow(0 0 50px rgba(255, 170, 60, .45)); animation: mpa-beast 2.2s cubic-bezier(.2, .8, .3, 1) 4.2s forwards; }
.mpa-eye { animation: hw-pulse 1.4s ease-in-out 6s infinite; }
.mpa-shards { position: absolute; left: 50%; top: 50%; }
.mpa-shards i { position: absolute; left: 0; top: 0; background: linear-gradient(135deg, #b7ab95, #6f6453); clip-path: polygon(0 20%, 60% 0, 100% 55%, 40% 100%); opacity: 0;
  animation: mpa-shard 1.4s cubic-bezier(.1, .7, .3, 1) 3.95s forwards; }
.mpa-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #fff8e1, rgba(255, 220, 140, .85) 25%, rgba(255, 200, 100, 0) 70%); opacity: 0; pointer-events: none; animation: mpa-flash 1.3s ease-out 3.85s forwards; }
.mpa-sparks { position: absolute; inset: 0; pointer-events: none; }
.mpa-sparks i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 8px #ffb84a; opacity: 0; animation: mpa-spark linear infinite; }
.mpa-text { position: absolute; left: 0; right: 0; bottom: max(5vh, 1.5rem); padding: 0 1rem; text-align: center; }
.mpa-kicker { margin: 0; font-family: var(--heading); letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; color: #ecd27e; opacity: 0; animation: mpa-fade .8s ease-out 4.8s forwards; }
.mpa-title { margin: .2rem 0 .4rem; font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 6.5vw, 4.2rem); line-height: 1.05;
  color: #ffe9a8; text-shadow: 0 0 18px rgba(255, 200, 90, .8), 0 3px 0 #5a3a0e, 0 6px 18px rgba(0, 0, 0, .8); }
.mpa-word { display: inline-block; white-space: nowrap; margin: 0 .14em; }
.mpa-title .mpa-word span { display: inline-block; opacity: 0; animation: mpa-letter .7s cubic-bezier(.2, .9, .3, 1.3) both; }
.mpa-sub { max-width: 40rem; margin: 0 auto; font-size: clamp(1rem, 2.4vw, 1.2rem); color: #f7ecd0; text-shadow: 0 2px 6px #000; opacity: 0; animation: mpa-fade 1s ease-out 6s forwards; }
.mpa-actions { display: flex; gap: .7rem; justify-content: center; margin-top: 1rem; opacity: 0; pointer-events: none; transition: opacity .6s; }
.mpa.mpa-ready .mpa-actions { opacity: 1; pointer-events: auto; }
.mpa-actions .btn { min-width: 9rem; }
.mpa-skip { position: absolute; top: .8rem; right: .8rem; background: rgba(0, 0, 0, .35); color: #ecd27e; border: 1px solid rgba(236, 210, 126, .4); border-radius: 999px; padding: .3rem .9rem; font-family: var(--heading); font-size: .8rem; cursor: pointer; }
.mpa.mpa-ready .mpa-skip { display: none; }
.mpa.mpa-skipped *, .mpa.mpa-still * { animation-delay: 0s !important; animation-duration: .01s !important; }
.mpa.mpa-skipped .mpa-sparks, .mpa.mpa-still .mpa-sparks, .mpa.mpa-skipped .mpa-shards, .mpa.mpa-still .mpa-shards, .mpa.mpa-skipped .mpa-flash, .mpa.mpa-still .mpa-flash { display: none; }
.mpa.mpa-skipped .mpa-rays, .mpa.mpa-still .mpa-rays { animation: mpa-rays-in .01s forwards !important; }
.mpa.mpa-skipped .mpa-mist, .mpa.mpa-still .mpa-mist, .mpa.mpa-skipped .mpa-eye, .mpa.mpa-still .mpa-eye { animation: none !important; }
@keyframes mpa-fly { from { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.45); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mpa-shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px) rotate(-.6deg); } 40% { transform: translate(5px, -3px) rotate(.5deg); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, -1px); } }
@keyframes mpa-seam { 25% { stroke: #fff1bf; stroke-width: 6; } to { stroke: rgba(255, 210, 110, 0); stroke-width: 1; } }
@keyframes mpa-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mpa-tablet-out { to { transform: scale(1.25); opacity: 0; filter: brightness(2.2); } }
@keyframes mpa-shard { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--tx), var(--ty)) rotate(var(--tr)); opacity: 0; } }
@keyframes mpa-flash { 0% { opacity: 0; } 15% { opacity: 1; } to { opacity: 0; } }
@keyframes mpa-fade { to { opacity: 1; } }
@keyframes mpa-sun { from { transform: translateY(160px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mpa-rays-in { to { opacity: 1; } }
@keyframes mpa-spin { to { transform: rotate(360deg); } }
@keyframes mpa-beast { 0% { opacity: 0; transform: scale(.55) translateY(30px); filter: brightness(3) drop-shadow(0 0 30px #fff2c0); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mpa-letter { from { opacity: 0; transform: translateY(26px) scale(.6); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mpa-spark { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(var(--sx), -105vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #nav a.nav-awaken { animation: none; box-shadow: 0 0 0 2px rgba(255, 211, 107, .7); } }

/* ---- Weltkarte (Reiter Karten) ------------------------------------------------------------ */
.wm { position: relative; margin: 0 0 1.4rem; border: 2px solid var(--gold-dark); border-radius: 12px; overflow: hidden; background: #14202c; box-shadow: var(--shadow); color: #f3e2b0; }
.wm-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .7rem; background: linear-gradient(180deg, #2b1d12, #1d130b); border-bottom: 1px solid var(--gold-dark); }
.wm-title { display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; }
.wm-title strong { font-family: var(--display); font-size: 1.15rem; color: #ffd36b; letter-spacing: .02em; }
.wm-title small { font-family: var(--heading); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: #c9b58a; }
.wm-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.wm-chip { font-family: var(--heading); font-size: .7rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid rgba(201, 162, 39, .5); background: rgba(0, 0, 0, .25); color: #e8d7a4; cursor: pointer; }
.wm-chip.on { background: #c9a227; color: #2b1c0f; border-color: #ffd36b; }
.wm-tools { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.wm-btn { min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: 8px; border: 1px solid rgba(201, 162, 39, .55); background: rgba(0, 0, 0, .3); color: #ffe39a; font-size: 1.05rem; cursor: pointer; }
.wm-btn:hover, .wm-chip:hover { border-color: #ffd36b; }
.wm-btn-text { font-family: var(--heading); font-size: .72rem; }
.wm-select { height: 2rem; max-width: 12rem; border-radius: 8px; border: 1px solid rgba(201, 162, 39, .55); background: #1d130b; color: #f3e2b0; font-family: var(--body); padding: 0 .4rem; }
.wm-body { position: relative; }
.wm-stage { position: relative; height: clamp(420px, 70vh, 860px); overflow: hidden; cursor: grab; touch-action: none; outline: none; }
.wm-stage:active { cursor: grabbing; }
.wm-stage:focus-visible { box-shadow: inset 0 0 0 2px #ffd36b; }
.wm-svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.wm-help { position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%); margin: 0; padding: .15rem .7rem; border-radius: 999px; background: rgba(10, 8, 5, .55); font-size: .75rem; color: #e8d7a4; pointer-events: none; white-space: nowrap; }
.wm-compass { position: absolute; left: .7rem; bottom: .7rem; width: 58px; height: 58px; pointer-events: none; }
.wm-tip { position: absolute; z-index: 3; pointer-events: none; padding: .2rem .55rem; border-radius: 6px; background: rgba(20, 14, 8, .88); border: 1px solid rgba(201, 162, 39, .6); color: #ffe9b0; font-family: var(--heading); font-size: .75rem; white-space: nowrap; }
.wm-x { position: absolute; top: .35rem; right: .45rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .08); color: inherit; font-size: 1.2rem; cursor: pointer; }
.wm-legend { position: absolute; z-index: 4; top: .7rem; left: .7rem; width: min(360px, calc(100% - 1.4rem)); max-height: calc(100% - 1.4rem); overflow: auto; padding: .8rem 1rem; border-radius: 10px;
  background: rgba(24, 16, 9, .94); border: 1px solid var(--gold-dark); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.wm-legend h4 { margin: .2rem 0 .4rem; font-family: var(--heading); color: #ffd36b; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.wm-legend-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .6rem; font-size: .85rem; }
.wm-legend-list li { display: flex; align-items: center; gap: .4rem; }
.wm-sw { width: 14px; height: 14px; flex: none; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .4); }
.wm-li { width: 22px; height: 22px; flex: none; }
.wm-legend .wm-more { color: #c9b58a; }
.wm-legend .wm-x { color: #ffe39a; background: rgba(255, 255, 255, .08); }

/* Vollbild */
.wm.wm-full { position: fixed; inset: 0; z-index: 1600; margin: 0; border-radius: 0; border: 0; display: flex; flex-direction: column; }
.wm:fullscreen { display: flex; flex-direction: column; border-radius: 0; border: 0; }
.wm.wm-full .wm-body, .wm:fullscreen .wm-body { flex: 1; min-height: 0; }
.wm.wm-full .wm-stage, .wm:fullscreen .wm-stage { height: 100%; }
body.wm-lock { overflow: hidden; }

/* Ebenen in der Karte */
.wm-svg .wm-waves { animation: wm-waves 14s linear infinite; }
.wm-vig-svg .wm-wp, .wm-svg .wm-wp { opacity: .78; stroke: rgba(255, 255, 255, .16); stroke-width: 1.4; }
.wm-vig-svg .wm-road-edge, .wm-svg .wm-road-edge { fill: none; stroke: #6e5634; stroke-width: 12; stroke-linecap: round; }
.wm-vig-svg .wm-road, .wm-svg .wm-road { fill: none; stroke: #dcc58e; stroke-width: 8; stroke-linecap: round; }
.wm-svg .wm-trail { fill: none; stroke: rgba(246, 232, 196, .85); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; }
.wm-svg .wm-rivers path { fill: none; stroke: #4ea8d4; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.wm-svg .wm-seaways path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-dasharray: 10 9; stroke-linecap: round; }
.wm-svg text { font-family: var(--heading); text-anchor: middle; pointer-events: none; }
.wm-svg .wm-rl { fill: #2b1c0f; stroke: rgba(247, 236, 208, .85); stroke-width: 5; paint-order: stroke; letter-spacing: .08em; font-weight: 700; opacity: .9; }
.wm-svg .wm-sl { fill: rgba(225, 242, 255, .75); font-size: 46px; font-style: italic; letter-spacing: .14em; font-family: var(--body); }
.wm-svg .wm-pl { fill: #fff6d6; stroke: rgba(30, 20, 10, .85); stroke-width: 4; paint-order: stroke; font-size: 14px; font-weight: 700; }
.wm-svg .wm-hover { fill: rgba(255, 240, 190, .12); stroke: rgba(255, 233, 160, .9); stroke-width: 2.5; pointer-events: none; }
.wm-svg .wm-sel { fill: none; stroke: #ffd36b; stroke-width: 4; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 211, 107, .9)); }
.wm-svg .wm-frame { fill: none; stroke: rgba(201, 162, 39, .55); stroke-width: 6; }
.wm-svg .wm-mk { fill: none; stroke: #ffd36b; stroke-width: 5; opacity: 0; pointer-events: none; }
.wm-show-orte .wm-mk-orte, .wm-show-tempel .wm-mk-tempel, .wm-show-dungeons .wm-mk-dungeons, .wm-show-besonderes .wm-mk-besonderes { opacity: 1; animation: wm-pulse 1.6s ease-in-out infinite; }
.wm-svg .wm-clouds { fill: rgba(255, 255, 255, .5); pointer-events: none; }
.wm-svg .wm-cloud { animation: wm-cloud 120s linear infinite; }
.wm-svg .wm-flock { animation: wm-fly 50s linear infinite; }
.wm-svg .wm-bob { animation: wm-bob 3.6s ease-in-out infinite; }
.wm-svg .wm-blades { transform-box: fill-box; transform-origin: center; animation: wm-spin 6s linear infinite; }
.wm-svg .wm-beacon { animation: wm-beacon 2.4s ease-in-out infinite; filter: blur(1.5px); }
.wm-svg .wm-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .5s ease-in-out infinite; }
.wm-svg .wm-lava { animation: wm-beacon 2s ease-in-out infinite; }
.wm-svg .wm-smoke { animation: wm-smoke 4.8s ease-out infinite; }
.wm-svg .wm-spout { animation: wm-spout 5s ease-out infinite; opacity: 0; }
.wm-svg .wm-glow { animation: wm-glow 3s ease-in-out infinite; }
/* Je nach Zoomstufe weniger Kleinkram */
.wm-far .wm-s, .wm-far .wm-a, .wm-far .wm-pl, .wm-far .wm-trail { display: none; }
.wm-mid .wm-sl { opacity: .8; }
.wm-near .wm-rl { opacity: .28; }
.wm-near .wm-clouds { opacity: .25; }
@keyframes wm-waves { to { transform: translate(80px, 0); } }
@keyframes wm-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
@keyframes wm-cloud { 0% { transform: translateX(-500px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateX(500px); opacity: 0; } }
@keyframes wm-fly { 0% { transform: translate(0, 0); opacity: 0; } 8%, 85% { opacity: 1; } 100% { transform: translate(700px, -260px); opacity: 0; } }
@keyframes wm-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } }
@keyframes wm-spin { to { transform: rotate(360deg); } }
@keyframes wm-beacon { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes wm-smoke { 0% { transform: translate(0, 0) scale(.5); opacity: .8; } 100% { transform: translate(6px, -26px) scale(1.6); opacity: 0; } }
@keyframes wm-spout { 0%, 70% { opacity: 0; transform: translateY(4px); } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes wm-glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); } }
@media (prefers-reduced-motion: reduce) { .wm-svg *, .wm-svg { animation: none !important; } }
@media (max-width: 640px) {
  .wm-bar { gap: .4rem; }
  .wm-title { margin-right: 0; width: 100%; flex-direction: row; align-items: baseline; gap: .5rem; }
  .wm-chips { width: 100%; }
  .wm-select { max-width: 9.5rem; }
  .wm-stage { height: 64vh; }
  .wm-info { top: auto; bottom: .5rem; right: .5rem; left: .5rem; width: auto; max-height: 62%; }
  .wm-vig { height: 96px; }
  .wm-ap { order: 5; }
  .wm-help { display: none; }
  .wm-compass { width: 44px; height: 44px; }
}

/* Info-Fenster: Lupe, Band in Landschaftsfarbe, Pergament */
.wm-info { position: absolute; z-index: 4; top: .7rem; right: .7rem; width: min(360px, calc(100% - 1.4rem)); max-height: calc(100% - 1.4rem); overflow: auto; border-radius: 14px;
  background: var(--noise), linear-gradient(180deg, #f8eed4, #ead8ae); color: var(--ink); border: 2px solid #b08a3a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 30px rgba(120, 80, 20, .18); scrollbar-width: thin; }
.wm-info.wm-pop { animation: wm-pop .38s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes wm-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.wm-info .wm-x { z-index: 2; top: .45rem; right: .45rem; background: rgba(20, 14, 8, .55); color: #ffe9b0; }
.wm-vig { position: relative; height: 132px; overflow: hidden; border-bottom: 2px solid #b08a3a; background: #2f78a8; }
.wm-vig-svg { width: 100%; height: 100%; display: block; animation: wm-kenburns 16s ease-in-out infinite alternate; }
.wm-vig::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 28px rgba(0, 0, 0, .55); background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(20, 12, 4, .45)); }
@keyframes wm-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.wm-badge { position: absolute; z-index: 1; left: .5rem; bottom: .45rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(20, 14, 8, .7); color: #ffe39a; font-family: var(--heading); font-size: .66rem; letter-spacing: .1em; }
.wm-badge-here { left: auto; right: .5rem; background: #c9a227; color: #2b1c0f; }
.wm-head { position: relative; padding: .55rem 1rem .5rem 1.15rem; background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 38%, transparent), transparent 85%); border-bottom: 1px solid rgba(110, 78, 38, .3); }
.wm-head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bc); }
.wm-head h3 { margin: .05rem 0 .1rem; font-family: var(--heading); font-size: 1.22rem; color: var(--blood); line-height: 1.15; }
.wm-head .wm-kicker { margin: 0; }
.wm-head .wm-tag { margin: 0; font-size: .88rem; }
.wm-body-in { padding: .5rem 1rem .9rem; }
.wm-body-in p { margin: .35rem 0; }
.wm-lead { font-size: 1.02rem; line-height: 1.4; }
.wm-lead::first-letter { font-family: var(--display); font-size: 1.6em; line-height: 1; color: var(--blood); }
.wm-facts { display: flex; gap: .7rem; align-items: center; margin: .6rem 0; padding: .5rem .6rem; border-radius: 10px; background: rgba(255, 255, 255, .35); border: 1px solid rgba(110, 78, 38, .2); }
.wm-cs { width: 62px; height: 62px; flex: none; }
.wm-cs-ring { fill: rgba(43, 28, 15, .08); stroke: rgba(110, 78, 38, .45); stroke-width: 1; }
.wm-cs line { stroke-width: 2; stroke-linecap: round; }
.wm-cs .wm-cs-road { stroke: #c9a227; fill: #c9a227; stroke-width: 3.4; }
.wm-cs .wm-cs-open { stroke: rgba(94, 69, 41, .55); fill: rgba(94, 69, 41, .55); }
.wm-cs .wm-cs-closed { stroke: rgba(47, 120, 168, .35); fill: rgba(47, 120, 168, .5); stroke-dasharray: 2 3; }
.wm-cs text { font: 700 7px var(--heading); fill: var(--blood); }
.wm-facts-list { display: grid; gap: .35rem; min-width: 0; }
.wm-fact { display: grid; gap: .1rem; font-size: .88rem; }
.wm-fact > span:first-child { font-family: var(--heading); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.wm-diff i { display: inline-block; width: 9px; height: 9px; margin-right: 2px; border-radius: 2px; background: rgba(94, 69, 41, .2); transform: rotate(45deg); }
.wm-diff i.on { background: #6a9a3a; }
.wm-diff.d2 i.on, .wm-diff.d3 i.on { background: #d0a02a; }
.wm-diff.d4 i.on, .wm-diff.d5 i.on, .wm-diff.d6 i.on { background: #b23a2a; }
.wm-animals { display: flex; flex-wrap: wrap; gap: .15rem .6rem; }
.wm-animal { display: inline-flex; align-items: center; gap: .2rem; }
.wm-animal svg { width: 20px; height: 15px; }
.wm-line { font-size: .95rem; }
.wm-far { font-style: italic; color: var(--ink-soft); border-top: 1px dashed rgba(110, 78, 38, .35); padding-top: .4rem; }
.wm-here-tag { display: inline-block; margin: .2rem 0 0 !important; padding: .1rem .55rem; border-radius: 999px; font-family: var(--heading); font-size: .7rem; letter-spacing: .08em; color: #fff; background: var(--fc); box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); }
.wm-travel, .wm-local { margin-top: .6rem; padding: .6rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(176, 138, 58, .5); }
.wm-travel h4, .wm-local h4 { margin: 0 0 .3rem; font-family: var(--heading); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #6b4a1a; }
.wm-local h4:not(:first-child) { margin-top: .6rem; }
.wm-local ul { margin: .2rem 0; padding-left: 1.1rem; }
.wm-local li { margin: .15rem 0; }
.wm-weather { padding: .3rem .5rem; border-radius: 8px; background: rgba(47, 120, 168, .12); }
.wm-around { list-style: none; padding: 0 !important; display: grid; gap: .15rem; }
.wm-around li { display: grid; grid-template-columns: 6.2rem 1fr auto; gap: .4rem; padding: .2rem .35rem; border-radius: 6px; cursor: pointer; font-size: .88rem; }
.wm-around li:hover { background: rgba(201, 162, 39, .18); }
.wm-around li.blocked { opacity: .55; }
.wm-dir { font-family: var(--heading); font-size: .7rem; color: var(--ink-soft); padding-top: .15rem; }
.wm-chance { font-weight: 700; color: #4e6a2a; white-space: nowrap; }
.wm-meter { position: relative; height: 18px; border-radius: 999px; background: rgba(94, 69, 41, .18); overflow: hidden; margin: .3rem 0; }
.wm-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #b23a2a, #d0a02a 45%, #6a9a3a); border-radius: 999px; }
.wm-meter span { position: relative; display: block; text-align: center; font: 700 .72rem/18px var(--heading); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.wm-travel .btn { margin-top: .35rem; width: 100%; }
.wm-warn { padding: .4rem .55rem; border-radius: 8px; background: rgba(168, 50, 42, .12); color: #7e1a14; font-size: .9rem; }
.wm-spawnbox { background: linear-gradient(135deg, rgba(255, 223, 130, .45), rgba(255, 255, 255, .4)); border-color: #c9a227; }
.wm-result { margin: .2rem 0 .5rem; padding: .5rem .7rem; border-radius: 10px; animation: wm-pop .4s ease-out; }
.wm-result strong { font-family: var(--heading); font-size: 1rem; }
.wm-result p { margin: .2rem 0 !important; }
.wm-result small { display: block; color: var(--ink-soft); }
.wm-result.ok { background: rgba(106, 154, 58, .2); border: 1px solid rgba(78, 106, 42, .5); }
.wm-result.ok strong { color: #3e6a1a; }
.wm-result.fail { background: rgba(178, 58, 42, .14); border: 1px solid rgba(126, 26, 20, .4); }
.wm-result.fail strong { color: #7e1a14; }
.wm-new { color: #8a6a1c !important; font-weight: 700; }

/* Reisepunkte, Banner, Figuren, Startpunkte */
.wm-ap { display: flex; align-items: center; gap: .45rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .5); font-family: var(--heading); font-size: .72rem; color: #ffe39a; }
.wm-ap-dots { display: inline-flex; gap: 3px; }
.wm-ap-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #c9a227; background: transparent; }
.wm-ap-dots i.on { background: radial-gradient(circle at 35% 35%, #fff2b0, #c9a227); box-shadow: 0 0 6px rgba(255, 211, 107, .7); }
.wm-banner { position: absolute; z-index: 3; left: 50%; top: .7rem; transform: translateX(-50%); max-width: calc(100% - 1.4rem); padding: .45rem 1rem; border-radius: 999px; border: 1px solid #ffd36b;
  background: rgba(30, 20, 8, .82); color: #ffe39a; font-family: var(--heading); font-size: .78rem; cursor: pointer; box-shadow: 0 0 18px rgba(255, 211, 107, .45); animation: wm-banner 2.4s ease-in-out infinite; }
@keyframes wm-banner { 50% { box-shadow: 0 0 28px rgba(255, 211, 107, .8); } }
.wm-svg .wm-tokens text, .wm-svg .wm-fig-name { font-family: var(--heading); font-size: 12px; font-weight: 700; text-anchor: middle; fill: #fff; stroke: rgba(20, 12, 4, .9); stroke-width: 3.5; paint-order: stroke; pointer-events: none; }
.wm-svg .wm-fig { transition: transform .9s cubic-bezier(.3, .8, .3, 1); pointer-events: none; }
.wm-svg .wm-fig.wm-fig-walk { transition: transform 1.5s linear; }
.wm-svg .wm-fig-body { transform-box: fill-box; transform-origin: 50% 100%; }
.wm-svg .wm-dust { fill: rgba(235, 220, 180, .85); pointer-events: none; animation: wm-dust .85s ease-out forwards; }
@keyframes wm-dust { from { transform: translate(0, 0) scale(.6); opacity: .9; } to { transform: translate(var(--dx), -10px) scale(2.2); opacity: 0; } }
.wm-svg .wm-trailfx { fill: none; stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .9; pointer-events: none; animation: wm-trailfx 4.2s ease-out forwards; }
@keyframes wm-trailfx { 0% { stroke-dashoffset: 40; opacity: 0; } 10% { opacity: .9; } 70% { opacity: .8; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.wm-svg .wm-fig.wm-fig-new { transition: none; }
.wm-svg .wm-fig-me use { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); }
.wm-svg .wm-here { fill-opacity: .18; stroke-width: 4; pointer-events: none; animation: wm-here 2.2s ease-in-out infinite; }
@keyframes wm-here { 0%, 100% { fill-opacity: .08; stroke-opacity: .55; } 50% { fill-opacity: .3; stroke-opacity: 1; } }
.wm-svg .wm-spawn path { fill: rgba(255, 211, 107, .28); stroke: #ffd36b; stroke-width: 8; filter: drop-shadow(0 0 10px rgba(255, 211, 107, 1)); }
.wm-svg .wm-spawn .wm-spawn-in { fill: none; stroke: rgba(255, 245, 210, .8); stroke-width: 1.6; stroke-dasharray: 5 5; filter: none; }
.wm-svg .wm-spawn .wm-spawn-star { fill: #ffd36b; stroke: #8a6a1c; stroke-width: 1; }
.wm-svg .wm-spawn { animation: wm-spawn 1.8s ease-in-out infinite; pointer-events: none; }
.wm-svg .wm-spawn-gm { opacity: .45; animation: none; }
@keyframes wm-spawn { 50% { opacity: .6; } }

/* Spielleiter: Figuren verwalten */
.wm-gm:empty { display: none; }
.wm.wm-full .wm-gm, .wm:fullscreen .wm-gm { display: none; } /* Spielleiter-Bereich nur unter der normalen Karte, nicht im Vollbild */
.wm-gm-in { padding: .8rem 1rem 1rem; background: linear-gradient(180deg, #2b1d12, #1d130b); border-top: 1px solid var(--gold-dark); }
.wm-gm-in h3 { margin: 0 0 .2rem; font-family: var(--heading); color: #ffd36b; font-size: 1rem; }
.wm-gm-in .wm-more { color: #c9b58a; }
.wm-gm-set { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 .8rem; font-size: .9rem; }
.wm-hours { width: 5rem; }
.wm-gm-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem .6rem; border-radius: 10px; background: rgba(255, 255, 255, .05); margin-bottom: .45rem; }
.wm-gm-pawn { width: 30px; height: 44px; }
.wm-gm-main strong { display: block; color: #ffe9b0; }
.wm-gm-main small { display: block; color: #c9b58a; }
.wm-swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .3rem; }
.wm-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .4); cursor: pointer; padding: 0; }
.wm-swatch.on { outline: 2px solid #ffd36b; outline-offset: 1px; }
.wm-swatch:disabled { opacity: .25; cursor: not-allowed; }
.wm-gm-tools { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: flex-end; }
.wm-gm-tools input[type=color] { width: 34px; height: 28px; padding: 0; border: 1px solid rgba(201, 162, 39, .55); border-radius: 6px; background: transparent; }
.wm-gm-ap { color: #ffe39a; font-family: var(--heading); font-size: .8rem; white-space: nowrap; }
@media (max-width: 640px) {
  .wm-gm-row { grid-template-columns: 30px minmax(0, 1fr); }
  .wm-gm-tools { grid-column: 1 / -1; justify-content: flex-start; }
  .wm-banner { font-size: .7rem; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .wm-vig-svg, .wm-info.wm-pop, .wm-banner { animation: none; } .wm-svg .wm-fig { transition: none; } }

/* Nebel des Unbekannten */
.wm-svg .wm-fog, .wm-vig-svg { pointer-events: none; }
.wm-fog > g { transition: opacity 1.6s ease; }
.wm-fog > g.wm-fog-lift { opacity: 0; }
.wm-fog-puff { fill: rgba(175, 190, 205, .07); }
.wm-svg .wm-fog { animation: wm-fog-breathe 9s ease-in-out infinite; }
@keyframes wm-fog-breathe { 50% { opacity: .96; } }
.wm-svg .wm-mk.wm-unk { display: none; }
.wm-vig-fog .wm-fog-swirl { animation: wm-swirl 12s ease-in-out infinite alternate; }
@keyframes wm-swirl { to { transform: translateX(-30px); } }
.wm-bless { padding-left: .35rem; border-left: 1px solid rgba(201, 162, 39, .5); color: #fff2b0; text-shadow: 0 0 6px rgba(255, 211, 107, .8); }

/* Ergebnis-Abzeichen */
.wm-chips-fx { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.wm-fx { padding: .1rem .5rem; border-radius: 999px; font: 700 .72rem var(--heading); background: rgba(78, 106, 42, .18); color: #3e5a1a; border: 1px solid rgba(78, 106, 42, .35); }
.wm-fx.minus { background: rgba(178, 58, 42, .14); color: #7e1a14; border-color: rgba(126, 26, 20, .35); }

/* Was man an Orten tun kann */
.wm-actions { margin-top: .6rem; padding: .6rem .7rem; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 223, 130, .3), rgba(255, 255, 255, .4)); border: 1px solid #c9a227; }
.wm-actions h4 { margin: 0 0 .4rem; font-family: var(--heading); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #6b4a1a; }
.wm-action { display: grid; gap: .15rem; margin-bottom: .45rem; }
.wm-action .btn { justify-self: start; }
.wm-action small { color: var(--ink-soft); font-size: .8rem; }
.wm-iteminfo { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper, #fff8e8); color: var(--ink); font: 600 .9rem/1 Georgia, serif; cursor: pointer; padding: 0; flex: none; }
.wm-iteminfo:hover, .wm-iteminfo:focus-visible { border-color: var(--gold, #b8892f); background: #fff1cf; }
.wm-action.off small { font-style: italic; }

/* Begegnung unterwegs */
.wm-enc { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 1rem; background: radial-gradient(ellipse at center, rgba(10, 8, 5, .45), rgba(10, 8, 5, .75)); }
.wm-enc-card { position: relative; width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 1.4rem 1.3rem 1.1rem; border-radius: 16px; text-align: center;
  background: var(--noise), linear-gradient(180deg, #f8eed4, #e8d4a6); color: var(--ink); border: 2px solid #b08a3a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 24px 50px rgba(0, 0, 0, .6), inset 0 0 40px rgba(120, 80, 20, .2); }
.wm-enc-card.wm-pop { animation: wm-enc-in .5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes wm-enc-in { from { opacity: 0; transform: translateY(24px) scale(.9) rotate(-1deg); } to { opacity: 1; transform: none; } }
.wm-enc-icon { width: 64px; height: 64px; margin: -.2rem auto .4rem; display: grid; place-items: center; font-size: 2rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d6, #e0bf6a); border: 2px solid #b08a3a; box-shadow: 0 0 18px rgba(255, 211, 107, .6); }
.wm-enc-card h3 { margin: .1rem 0 .5rem; font-family: var(--heading); color: var(--blood); font-size: 1.3rem; }
.wm-enc-text { font-size: 1.04rem; line-height: 1.45; margin: 0 0 .9rem; }
.wm-enc-opts { display: grid; gap: .5rem; }
.wm-enc-opt { display: grid; gap: .1rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid #b08a3a; background: linear-gradient(180deg, #fff8e4, #f0e0b6); color: var(--ink); cursor: pointer; text-align: left; font: inherit; transition: transform .15s, box-shadow .15s; }
.wm-enc-opt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.wm-enc-opt strong { font-family: var(--heading); font-size: .92rem; color: #5a3a12; }
.wm-enc-opt small { color: var(--ink-soft); }
.wm-enc-opt.skip { background: transparent; border-style: dashed; }
.wm-enc-card .wm-result { text-align: left; }
.wm-enc-card > .btn { margin-top: .5rem; min-width: 8rem; }
@media (prefers-reduced-motion: reduce) { .wm-svg .wm-fog, .wm-vig-fog .wm-fog-swirl, .wm-enc-card.wm-pop { animation: none; } }
@media (max-width: 640px) {
  .wm-chips, .wm-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .wm-chips::-webkit-scrollbar, .wm-tools::-webkit-scrollbar { display: none; }
  .wm-chip, .wm-btn, .wm-select { flex: none; }
  .wm-vig { height: 84px; }
  .wm-info { top: auto; bottom: .5rem; left: .5rem; right: .5rem; width: auto; max-height: 52%; }
  .wm-head { padding: .4rem .8rem; }
  .wm-head h3 { font-size: 1.05rem; }
  .wm-enc-card { padding: 1rem .9rem .8rem; }
  .wm-enc-icon { width: 48px; height: 48px; font-size: 1.5rem; }
}

/* Weltkarte III: Reisebreakdown, Gruppe, Ausrüstung, Markierungen, Spielleiter, Nacht, Tagebuch */
.wm-mods { display: flex; flex-wrap: wrap; gap: .25rem; margin: .35rem 0; }
.wm-mod { padding: .05rem .45rem; border-radius: 999px; font: 700 .68rem var(--heading); border: 1px solid rgba(110, 78, 38, .3); background: rgba(255, 255, 255, .5); }
.wm-mod.base { background: rgba(43, 28, 15, .1); }
.wm-mod.plus { color: #3e5a1a; background: rgba(106, 154, 58, .16); border-color: rgba(78, 106, 42, .35); }
.wm-mod.minus { color: #7e1a14; background: rgba(178, 58, 42, .12); border-color: rgba(126, 26, 20, .3); }
.wm-group { margin: .4rem 0; padding: .4rem .55rem; border-radius: 8px; background: rgba(201, 162, 39, .12); }
.wm-group strong { display: block; font-family: var(--heading); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #6b4a1a; }
.wm-groupline { display: flex; align-items: center; gap: .3rem; font-size: .92rem; cursor: pointer; }
.wm-groupline small { color: var(--ink-soft); }
.wm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0, 0, 0, .4); }
.wm-extras { display: grid; gap: .35rem; margin: .5rem 0; padding: .45rem .55rem; border-radius: 8px; background: rgba(255, 255, 255, .35); }
.wm-extras .btn { justify-self: start; }
.wm-gear { font-size: .9rem; }
.wm-gearchip { display: inline-block; margin: .1rem .2rem 0 0; padding: .05rem .45rem; border-radius: 999px; background: #f4e3b2; border: 1px solid #c9a227; font-size: .78rem; }
.wm-follow { display: flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }
.wm-shop { background: linear-gradient(135deg, rgba(160, 200, 255, .22), rgba(255, 255, 255, .4)); border-color: #7a9ac0; }
.wm-gmplace { margin: .4rem 0; padding: .45rem .6rem; border-radius: 8px; background: rgba(201, 162, 39, .14); border-left: 4px solid #c9a227; }
.wm-gmplace.quest { background: rgba(255, 211, 107, .3); border-left-color: #a8322a; }
.wm-gmplace p { margin: .2rem 0 0 !important; }
.wm-curse { background: rgba(120, 60, 160, .14) !important; color: #4b1e6a !important; }
.wm-eventline { padding: .3rem .5rem; border-radius: 8px; background: rgba(58, 74, 102, .12); font-size: .92rem; }
.wm-marksbox, .wm-gmtools { margin-top: .6rem; padding: .45rem .6rem; border-radius: 10px; border: 1px dashed rgba(110, 78, 38, .45); background: rgba(255, 255, 255, .3); }
.wm-marksbox summary, .wm-gmtools summary { cursor: pointer; font-family: var(--heading); font-size: .8rem; letter-spacing: .06em; color: #6b4a1a; }
.wm-marksbox[open] > *:not(summary), .wm-gmtools[open] > *:not(summary) { margin-top: .4rem; }
.wm-marksbox input[type=text], .wm-gmtools input[type=text], .wm-gmtools textarea, .wm-gmtools select { width: 100%; box-sizing: border-box; }
.wm-gmtools h4 { margin: .2rem 0; font-family: var(--heading); font-size: .82rem; color: #6b4a1a; }
.wm-gmtools h5 { margin: .6rem 0 .2rem; font-family: var(--heading); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.wm-gmrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wm-gmrow select { width: auto !important; }
.wm-markpick { display: flex; gap: .3rem; flex-wrap: wrap; }
.wm-markbtn { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #b08a3a; background: #fff8e4; cursor: pointer; font-size: 1rem; }
.wm-markbtn.on { background: #c9a227; color: #fff; box-shadow: 0 0 0 2px rgba(201, 162, 39, .4); }
.wm-marklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.wm-marklist li { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
.wm-markglyph { width: 1.4rem; text-align: center; }
.wm-x-small { margin-left: auto; width: 1.4rem; height: 1.4rem; border: 0; border-radius: 50%; background: rgba(126, 26, 20, .12); color: #7e1a14; cursor: pointer; }
/* Auf der Karte */
.wm-svg .wm-overlays, .wm-svg .wm-quests, .wm-svg .wm-marks { pointer-events: none; }
.wm-svg .wm-ev { opacity: .32; mix-blend-mode: multiply; }
.wm-svg .wm-ev-schneesturm, .wm-svg .wm-ev-pilger, .wm-svg .wm-ev-fest, .wm-svg .wm-ev-rueckenwind { mix-blend-mode: normal; opacity: .28; }
.wm-svg .wm-ev-sturm, .wm-svg .wm-ev-flut, .wm-svg .wm-ev-schneesturm { animation: wm-ev 3s ease-in-out infinite; }
@keyframes wm-ev { 50% { opacity: .5; } }
.wm-svg .wm-ev-badge circle { fill: rgba(20, 14, 8, .75); stroke: #ffd36b; stroke-width: 2; }
.wm-svg .wm-blocked path { fill: rgba(126, 26, 20, .28); stroke: #a8322a; stroke-width: 3; stroke-dasharray: 6 4; }
.wm-svg .wm-blocked path.x { fill: none; stroke: #a8322a; stroke-width: 6; stroke-dasharray: none; stroke-linecap: round; opacity: .85; }
.wm-svg .wm-cursed { fill: rgba(110, 40, 150, .3); stroke: #9b4fe0; stroke-width: 3; animation: wm-curse 2.6s ease-in-out infinite; }
@keyframes wm-curse { 50% { fill: rgba(110, 40, 150, .5); } }
.wm-svg .wm-quest .halo { fill: rgba(255, 211, 107, .25); stroke: #ffd36b; stroke-width: 3; animation: wm-pulse 1.4s ease-in-out infinite; }
.wm-svg .wm-quest { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.wm-svg .wm-mark { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.wm-svg .wm-mark text, .wm-svg .wm-quest text, .wm-svg .wm-ev-badge text { font-family: var(--body); stroke: none; }
/* Nacht */
.wm-svg .wm-nightveil { fill: #0a1230; opacity: 0; pointer-events: none; transition: opacity 1.2s; mix-blend-mode: multiply; }
.wm-svg.wm-night .wm-nightveil { opacity: .62; }
.wm-svg .wm-light { fill: rgba(255, 200, 110, .0); pointer-events: none; transition: fill 1.2s; }
.wm-svg.wm-night .wm-light { fill: rgba(255, 196, 100, .38); filter: blur(6px); animation: hw-pulse 3s ease-in-out infinite; }
.wm-is-night .wm-stage { background: #05070f; }
.wm-time { padding: .2rem .65rem; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .45); font-family: var(--heading); font-size: .72rem; color: #ffe39a; white-space: nowrap; }
.wm-is-night .wm-time { background: #121a3a; border-color: #8aa0ff; color: #dfe6ff; }
.wm-evbar { display: flex; flex-wrap: wrap; gap: .3rem; width: 100%; }
.wm-evchip { padding: .15rem .55rem; border-radius: 999px; background: rgba(58, 74, 102, .6); color: #f3e2b0; font-size: .74rem; border: 1px solid rgba(201, 162, 39, .4); }
/* Tagebuch */
.wm-journal { position: absolute; z-index: 5; top: .7rem; left: .7rem; width: min(400px, calc(100% - 1.4rem)); max-height: calc(100% - 1.4rem); overflow: auto; padding: .9rem 1rem; border-radius: 14px;
  background: var(--noise), linear-gradient(180deg, #f8eed4, #ead8ae); color: var(--ink); border: 2px solid #b08a3a; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.wm-journal h3 { margin: 0 0 .5rem; font-family: var(--heading); color: var(--blood); }
.wm-journal .wm-x { top: .45rem; right: .45rem; }
.wm-jstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin-bottom: .5rem; text-align: center; }
.wm-jstats div { padding: .35rem .2rem; border-radius: 8px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(110, 78, 38, .2); }
.wm-jstats strong { display: block; font-family: var(--heading); font-size: 1.1rem; color: var(--blood); }
.wm-jstats small { font-size: .68rem; color: var(--ink-soft); }
.wm-jprog { position: relative; height: 18px; border-radius: 999px; background: rgba(94, 69, 41, .18); overflow: hidden; margin-bottom: .7rem; }
.wm-jprog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a6a1c, #ffd36b); }
.wm-jprog span { position: relative; display: block; text-align: center; font: 700 .7rem/18px var(--heading); color: #2b1c0f; }
.wm-jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.wm-jlist li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem; padding: .3rem .4rem; border-radius: 8px; cursor: pointer; }
.wm-jlist li:hover { background: rgba(201, 162, 39, .15); }
.wm-jlist p { margin: 0; font-size: .92rem; }
.wm-jlist small { color: var(--ink-soft); font-size: .74rem; }
.wm-jicon { text-align: center; }
.wm-j-fehlschlag p { color: #7e1a14; }
.wm-j-entdeckt p { font-weight: 700; }
@media (max-width: 640px) { .wm-jstats { grid-template-columns: repeat(2, 1fr); } .wm-time { order: 6; } }

.wm-gm-set select { width: auto; max-width: 16rem; }
.wm-svg.wm-night .wm-fog { opacity: .92; }

/* Weltkarte: Clan-Gebiete, Aufträge, Rennen */
.wm-svg .wm-claim { fill-opacity: .22; stroke-width: 3.5; stroke-opacity: .9; stroke-dasharray: 10 5; }
.wm-svg .wm-outpost { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.wm-svg .wm-qtarget .halo { fill: rgba(244, 227, 178, .3); stroke: #f4e3b2; stroke-width: 2.5; animation: wm-pulse 1.8s ease-in-out infinite; }
.wm-svg .wm-race .halo { fill: rgba(255, 255, 255, .25); stroke: #fff; stroke-width: 2.5; animation: wm-pulse 1.2s ease-in-out infinite; }
.wm-svg .wm-qtarget, .wm-svg .wm-race { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); pointer-events: none; }
.wm-gmplace.race { background: rgba(255, 255, 255, .5); border-left-color: #1d1916; }
.wm-claimline { padding: .3rem .55rem; border-radius: 8px; border-left: 4px solid var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); font-size: .92rem; }
.wm-evchip.race { cursor: pointer; background: rgba(255, 255, 255, .15); border-color: #fff; font-family: inherit; }
.exp-origin { padding: .4rem .6rem; border-radius: 8px; background: rgba(46, 138, 69, .14); border-left: 4px solid #2e8a45; }
.quest-target { margin: .3rem 0; padding: .3rem .55rem; border-radius: 8px; background: rgba(201, 162, 39, .14); font-size: .92rem; }

/* Weltkarte: Clanbasis und Clangebäude (Farbe = Clanfarbe über currentColor) */
.wm-svg .wm-building { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); pointer-events: none; }
.wm-svg .wm-claim.base { fill-opacity: .3; stroke-width: 5; stroke-dasharray: none; }
.wm-svg .cb-sails { transform-box: fill-box; transform-origin: center; animation: cb-spin 9s linear infinite; }
.wm-svg .cb-flag { transform-box: fill-box; transform-origin: left center; animation: cb-wave 2.4s ease-in-out infinite; }
.wm-svg .cb-glow { animation: cb-glow 3s ease-in-out infinite; }
@keyframes cb-spin { to { transform: rotate(360deg); } }
@keyframes cb-wave { 0%, 100% { transform: scaleX(1) skewY(0deg); } 50% { transform: scaleX(.86) skewY(6deg); } }
@keyframes cb-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wm-svg .cb-sails, .wm-svg .cb-flag, .wm-svg .cb-glow { animation: none; } }
.wm-claimline { display: flex; gap: .6rem; align-items: center; }
.wm-claimline small { display: block; color: var(--ink-soft); font-size: .8rem; margin-top: .1rem; }
.wm-claimicon svg { width: 46px; height: 40px; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.wm-build .wm-buildgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .45rem; }
.wm-buildcard { display: grid; justify-items: center; text-align: center; gap: .2rem; padding: .5rem .4rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold, #c9a227) 45%, transparent); background: color-mix(in srgb, var(--gold, #c9a227) 8%, transparent); }
.wm-buildcard svg { width: 54px; height: 46px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.wm-buildcard strong { font-size: .88rem; line-height: 1.15; }
.wm-buildcard small { font-size: .74rem; color: var(--ink-soft); line-height: 1.2; }
.wm-buildcard.off { opacity: .6; }
.wm-buildcard.off svg { filter: grayscale(.85) drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.wm-legend-list.wm-legend-clans { grid-template-columns: 1fr; }
.wm-claimbox { padding: .4rem .55rem; border-radius: 8px; border-left: 4px solid var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); display: grid; gap: .35rem; }
.wm-claimbox .wm-claimline { padding: 0; margin: 0; border: 0; background: none; justify-content: space-between; flex-wrap: wrap; }
.wm-claimbuilding { display: flex; gap: .55rem; align-items: center; }
.wm-claimbuilding small { display: block; color: var(--ink-soft); font-size: .8rem; line-height: 1.25; }
.wm-slots { display: inline-flex; gap: 3px; vertical-align: middle; }
.wm-slots i { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--cc, #c9a227); background: transparent; display: inline-block; }
.wm-slots i.on { background: var(--cc, #c9a227); }
.wm-build .wm-slots i { --cc: #8a6a1a; }
.wm-buildmeta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; font-size: .85rem; color: var(--ink-soft); margin: 0 0 .2rem; }

/* Weltkarte: Mauern, Tore, Straßen, Brücken, Fähren, Belagerung, Nachschub */
.wm-svg .wm-wall path { fill: none; stroke-linecap: round; }
.wm-svg .wm-wall .base { stroke: #4a321c; stroke-width: 9; }
.wm-svg .wm-wall .top { stroke: #8a5a32; stroke-width: 6; stroke-dasharray: 3 1.6; stroke-linecap: butt; }
.wm-svg .wm-wall .band { stroke-width: 1.8; opacity: .95; }
.wm-svg .wm-wall.l2 .base { stroke-width: 12; }
.wm-svg .wm-wall.l2 .top { stroke: #7a5230; stroke-width: 9; stroke-dasharray: 7 1.4; }
.wm-svg .wm-wall.l2 .band { stroke-width: 2.6; }
.wm-svg .wm-wall.l3 .base { stroke: #4e4a42; stroke-width: 13; }
.wm-svg .wm-wall.l3 .top { stroke: #b3aea6; stroke-width: 10; stroke-dasharray: 5 2.4; stroke-linecap: butt; }
.wm-svg .wm-wall.l3 .band { stroke-width: 3; }
.wm-svg .wm-wall { filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .5)); }
.wm-svg .wm-wall.ruined { opacity: .55; filter: grayscale(.9); }
.wm-svg .wm-wall.ruined path { stroke-dasharray: 6 9 !important; }
.wm-svg .wm-gate rect { stroke: #2a1e12; stroke-width: 1.6; }
.wm-svg .wm-gate path { stroke: #2a1e12; stroke-width: 1.4; fill: none; }
.wm-svg .wm-croad path { fill: none; stroke-linecap: round; }
.wm-svg .wm-croad .bed { stroke: #d9c49a; stroke-width: 9; opacity: .9; }
.wm-svg .wm-croad .mid { stroke-width: 2; stroke-dasharray: 6 6; }
.wm-svg .wm-bridge path { fill: none; }
.wm-svg .wm-bridge .deck { stroke: #5a3a20; stroke-width: 14; stroke-linecap: round; }
.wm-svg .wm-bridge .planks { stroke: #b0814c; stroke-width: 10; stroke-dasharray: 3 1.4; }
.wm-svg .wm-bridge .rail { stroke-width: 1.4; transform: translateY(-5px); }
.wm-svg .wm-ferry > path { fill: none; stroke: #f4ecd8; stroke-width: 2.4; stroke-dasharray: 7 6; opacity: .9; }
.wm-svg .wm-claim.cut { fill: #8a8a8a !important; stroke: #6a6a6a !important; fill-opacity: .35; }
.wm-svg .wm-building.cut { filter: grayscale(.9) brightness(.85) drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.wm-svg .wm-building.ruined { filter: grayscale(1) brightness(.6) drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); opacity: .8; }
.wm-svg .wm-burn { animation: cb-glow 1.2s ease-in-out infinite; pointer-events: none; }
.wm-svg .wm-shield { opacity: .9; pointer-events: none; }
.wm-svg .wm-siege .halo { fill: rgba(210, 58, 42, .25); animation: wm-siegepulse 1.6s ease-in-out infinite; }
.wm-svg .wm-siege .core { fill: #2a1e12; stroke: #d23a2a; stroke-width: 2.4; }
.wm-svg .wm-siege path { stroke: #f4e3b2; stroke-width: 2.4; stroke-linecap: round; fill: none; }
@keyframes wm-siegepulse { 0%, 100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
.wm-svg .wm-siege .halo { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .wm-svg .wm-siege .halo, .wm-svg .wm-burn { animation: none; } }

.wm-claimbox.cut { filter: grayscale(.6); }
.wm-flags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.wm-flag { font-size: .78rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(0, 0, 0, .08); }
.wm-flag.cut { background: rgba(110, 110, 110, .22); }
.wm-flag.burn { background: rgba(230, 110, 30, .2); }
.wm-flag.shield { background: rgba(60, 120, 200, .18); }
.wm-hp { position: relative; display: block; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .15); margin: .2rem 0 .15rem; max-width: 150px; }
.wm-hp i { border-radius: 4px; }
.wm-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3c9a4a, #8fc95a); }
.wm-hp b { position: absolute; right: -3.4rem; top: -5px; font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.wm-claimbuilding.ruined .wm-hp i { background: #a8322a; }
.wm-ruin { color: #a8322a; font-style: normal; font-size: .8rem; }
.wm-ruler { padding: .3rem .55rem; border-radius: 8px; background: color-mix(in srgb, var(--cc) 16%, transparent); border-left: 4px solid #c9a227; font-size: .9rem; font-weight: 600; }
.wm-hostile { border: 1px solid rgba(168, 50, 42, .45); border-radius: 10px; padding: .45rem .55rem; background: rgba(168, 50, 42, .07); }
.wm-hostile h4 { color: #a8322a; }
.wm-hostile-track { color: #a8322a; font-weight: 600; }
.wm-borders { border: 1px solid color-mix(in srgb, var(--gold, #c9a227) 40%, transparent); border-radius: 10px; padding: .4rem .55rem; margin: .5rem 0; }
.wm-borders > summary { cursor: pointer; font-weight: 700; font-family: Cinzel, serif; font-size: .9rem; }
.wm-edge { padding: .35rem 0; border-top: 1px dashed rgba(0, 0, 0, .12); display: grid; gap: .25rem; }
.wm-edgehead { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.wm-edgehead small { color: var(--ink-soft); }
.wm-echip { font-size: .74rem; padding: .05rem .4rem; border-radius: 999px; background: rgba(0, 0, 0, .07); }
.wm-echip.fremd { background: rgba(168, 50, 42, .15); }
.wm-echip.eigen { background: rgba(46, 138, 69, .15); }
.wm-echip.wasser { background: rgba(47, 95, 176, .15); }
.wm-echip.wall { background: rgba(90, 58, 30, .18); }
.wm-echip.wall.ruined { background: rgba(168, 50, 42, .2); }
.wm-edgeacts { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.wm-gatectl { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.wm-gatechip { font-size: .74rem; border: 1px solid rgba(0, 0, 0, .2); background: transparent; border-radius: 999px; padding: .1rem .5rem; cursor: pointer; color: inherit; }
.wm-gatechip.on { background: #2e8a45; color: #fff; border-color: #2e8a45; }
.wm-warpanel { max-width: 380px; }
.wm-warpanel h5 { margin: .7rem 0 .3rem; font-family: Cinzel, serif; }
.wm-wars { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.wm-wars li { padding: .35rem .5rem; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); cursor: default; }
.wm-wars li small { display: block; opacity: .8; }
.wm-war.active { border-color: rgba(210, 58, 42, .7); background: rgba(210, 58, 42, .12); }
.wm-war.ended { opacity: .6; }
.wm-clanname { font-weight: 700; border-bottom: 2px solid var(--cc); }
.wm-peace { padding: .35rem .5rem; border-radius: 8px; background: rgba(120, 190, 255, .15); }
.wm-warrules summary { cursor: pointer; margin-top: .6rem; }
.wm-warrules ul { padding-left: 1.1rem; font-size: .85rem; display: grid; gap: .25rem; }
.wm-warpanel select { max-width: 220px; }

/* Mauern auf den Achteck-Kanten: Stufe 1 Palisade … Stufe 5 Hochwall */
.wm-svg .wm-wall path { fill: none; stroke-linecap: round; stroke-dasharray: none; }
.wm-svg .wm-wall .base { stroke: #3e2914; stroke-width: 6.5; }
.wm-svg .wm-wall .top { stroke: #8a5a32; stroke-width: 4; stroke-dasharray: 2.4 1.3; stroke-linecap: butt; }
.wm-svg .wm-wall .band { stroke-width: 1.3; }
.wm-svg .wm-wall.l2 .base { stroke: #3a2410; stroke-width: 7.5; }
.wm-svg .wm-wall.l2 .top { stroke: #6e4826; stroke-width: 5.4; stroke-dasharray: 5 1; }
.wm-svg .wm-wall.l2 .band { stroke-width: 1.6; }
.wm-svg .wm-wall.l3 .base { stroke: #4e4a42; stroke-width: 8.5; }
.wm-svg .wm-wall.l3 .top { stroke: #a9a49b; stroke-width: 6; stroke-dasharray: 3.4 1.6; }
.wm-svg .wm-wall.l3 .band { stroke-width: 1.8; }
.wm-svg .wm-wall.l4 .base { stroke: #36322c; stroke-width: 10; }
.wm-svg .wm-wall.l4 .top { stroke: #8d877c; stroke-width: 7.4; stroke-dasharray: 6 1.2; }
.wm-svg .wm-wall.l4 .band { stroke-width: 2.2; }
.wm-svg .wm-wall.l5 .base { stroke: #2b2722; stroke-width: 11.5; }
.wm-svg .wm-wall.l5 .top { stroke: #d6d0c4; stroke-width: 8.4; stroke-dasharray: 3 2; stroke-linecap: butt; }
.wm-svg .wm-wall.l5 .band { stroke-width: 2.4; filter: drop-shadow(0 0 1.5px rgba(255, 215, 120, .9)); }
.wm-svg .wm-wall.ruined path { stroke-dasharray: 4 6 !important; }
/* Tore: Torhaus mit Steinpfosten, Torflügeln in Clanfarbe, beschlagen; offene Tore stehen auf */
.wm-svg .wm-gate2 { filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .6)); }
.wm-svg .wm-gate2 .arch { fill: #2a1e12; stroke: #c9a227; stroke-width: 1.2; }
.wm-svg .wm-gate2 .post { fill: #cfc8bb; stroke: #3a352e; stroke-width: 1; }
.wm-svg .wm-gate2 .cap { stroke: #2a1e12; stroke-width: .7; }
.wm-svg .wm-gate2 .door { stroke: #1e140a; stroke-width: .8; }
.wm-svg .wm-gate2 .band { stroke: #e2c46a; stroke-width: .9; fill: none; }
.wm-svg .wm-gate2 .split { stroke: #1e140a; stroke-width: .9; }
.wm-svg .wm-gate2 .stud { fill: #f2dc8e; }
.wm-svg .wm-gate2 .gap { fill: #0e0904; }
.wm-svg .wm-gate2.open .arch { stroke: #6fd17f; }
.wm-svg .wm-gate2.allied .arch { stroke: #7fb6ff; }
/* Türme an den Ecken */
.wm-svg .wm-tower { filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .6)); }
.wm-svg .wm-tower .base { fill: #8a5a32; stroke: #2e1d0e; stroke-width: 1.2; }
.wm-svg .wm-tower .crenel { fill: none; stroke: #c99a64; stroke-width: 1.6; stroke-dasharray: 2 1.6; }
.wm-svg .wm-tower .roof { stroke: rgba(0, 0, 0, .55); stroke-width: .8; }
.wm-svg .wm-tower.l3 .base, .wm-svg .wm-tower.l4 .base { fill: #a9a49b; stroke: #3a352e; }
.wm-svg .wm-tower.l3 .crenel, .wm-svg .wm-tower.l4 .crenel { stroke: #e5e0d6; }
.wm-svg .wm-tower.l5 .base { fill: #d6d0c4; stroke: #2b2722; stroke-width: 1.6; }
.wm-svg .wm-tower.l5 .crenel { stroke: #fff6d6; }
.wm-svg .wm-tower.ruined { filter: grayscale(1); opacity: .55; }
/* Stufen-Abzeichen an Gebäuden */
.wm-svg .wm-lvl circle { fill: #1e1810; stroke-width: 1.6; }
.wm-svg .wm-lvl text { fill: #f4e3b2; font-size: 7.5px; font-weight: 700; font-family: Cinzel, serif; }
.wm-pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.wm-pips i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #8a6a1a; display: inline-block; }
.wm-pips i.on { background: #c9a227; }
.wm-actwrap { display: inline-grid; gap: .1rem; max-width: 100%; }
.wm-actwrap small { font-size: .72rem; color: var(--ink-soft); line-height: 1.2; }
.wm-borders h5 { margin: .5rem 0 .2rem; font-family: Cinzel, serif; font-size: .82rem; }
.wm-scroll { padding: .3rem .5rem; border-radius: 8px; background: rgba(201, 162, 39, .12); font-size: .85rem; }
.wm-scroll.ok { background: rgba(80, 170, 90, .18); }

/* Clan-Wege je Stufe (dezent, Clanfarbe nur als kleiner Grenzstein) und schmalere Gebietsränder */
.wm-svg .wm-croad path { fill: none; stroke-linecap: round; stroke-dasharray: none; opacity: 1; }
.wm-svg .wm-croad .bed { stroke: none; stroke-width: 0; }
.wm-svg .wm-croad.l1 .top { stroke: #b39a6c; stroke-width: 1.8; stroke-dasharray: 2 3.4; }
.wm-svg .wm-croad.l2 .top { stroke: #c4ab7b; stroke-width: 3; stroke-dasharray: 7 3; }
.wm-svg .wm-croad.l3 .bed { stroke: #8a6f48; stroke-width: 5.4; }
.wm-svg .wm-croad.l3 .top { stroke: #d6c08f; stroke-width: 3.6; }
.wm-svg .wm-croad.l4 .bed { stroke: #6f6a62; stroke-width: 6.6; }
.wm-svg .wm-croad.l4 .top { stroke: #cbc4b6; stroke-width: 4.8; stroke-dasharray: 3 1.2; }
.wm-svg .wm-croad.l5 .bed { stroke: #57524a; stroke-width: 8.4; }
.wm-svg .wm-croad.l5 .top { stroke: #ddd7ca; stroke-width: 6.2; stroke-dasharray: 4.2 1; }
.wm-svg .wm-croad .stone { stroke: rgba(0, 0, 0, .55); stroke-width: .6; }
.wm-svg .wm-claim { stroke-width: 2.2; stroke-dasharray: 6 4; fill-opacity: .15; stroke-opacity: .8; }
.wm-svg .wm-claim.base { stroke-width: 3; fill-opacity: .2; }

/* Wege: schmal und geschwungen, passend zu Bäumen und Häusern */
.wm-svg .wm-road-edge { stroke: #7a6240; stroke-width: 5.4; opacity: .9; }
.wm-svg .wm-road { stroke: #dcc58e; stroke-width: 3.2; }
.wm-vig-svg .wm-road-edge { stroke-width: 5.4; }
.wm-vig-svg .wm-road { stroke-width: 3.2; }
.wm-svg .wm-croad path { fill: none; stroke-linecap: round; stroke-dasharray: none; }
.wm-svg .wm-croad.l2 .bed { stroke: #5e4628; stroke-width: 5.6; }
.wm-svg .wm-croad.l2 .top { stroke: #e4cd9b; stroke-width: 3.6; stroke-dasharray: none; }
.wm-svg .wm-croad.l3 .bed { stroke: #5a4326; stroke-width: 6; }
.wm-svg .wm-croad.l3 .top { stroke: #d9c28c; stroke-width: 4; stroke-dasharray: 6 1.5; }
.wm-svg .wm-croad.l4 .bed { stroke: #4f4a42; stroke-width: 6.4; }
.wm-svg .wm-croad.l4 .top { stroke: #c9c2b4; stroke-width: 4.4; stroke-dasharray: 2.2 1; }
.wm-svg .wm-croad.l5 .bed { stroke: #3f3b35; stroke-width: 7; }
.wm-svg .wm-croad.l5 .top { stroke: #e6e0d3; stroke-width: 5; stroke-dasharray: 3 .8; }
.wm-svg .wm-croad .stone { stroke: rgba(0, 0, 0, .5); stroke-width: .5; }
/* Geschütztürme */
.wm-svg .cb-orb { animation: cb-orb 2.2s ease-in-out infinite; }
.wm-svg .cb-spark { animation: cb-spark 1.3s steps(2, end) infinite; }
@keyframes cb-orb { 0%, 100% { filter: drop-shadow(0 0 1px #9fe8ff); } 50% { filter: drop-shadow(0 0 4px #c8f6ff); } }
@keyframes cb-spark { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .wm-svg .cb-orb, .wm-svg .cb-spark { animation: none; } }
.wm-reload { color: #a8322a !important; font-weight: 600; }
.wm-reload.ready { color: #2e8a45 !important; }
/* Schalter: eigene Figur ein/aus (oben rechts) */
.wm-figtoggle { position: absolute; z-index: 5; top: .7rem; right: .7rem; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem .25rem .35rem; border-radius: 999px; background: rgba(20, 14, 8, .72); color: #f4e3b2; font-size: .78rem; font-family: Cinzel, serif; cursor: pointer; user-select: none; border: 1px solid rgba(201, 162, 39, .55); }
.wm-figtoggle input { position: absolute; opacity: 0; pointer-events: none; }
.wm-figtoggle .sw { width: 26px; height: 14px; border-radius: 999px; background: #5a5048; position: relative; transition: background .2s; }
.wm-figtoggle .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #f4e3b2; transition: transform .2s; }
.wm-figtoggle input:checked + .sw { background: #2e8a45; }
.wm-figtoggle input:checked + .sw::after { transform: translateX(12px); }
.wm-figtoggle input:focus-visible + .sw { outline: 2px solid #c9a227; outline-offset: 2px; }
.wm-info:not([hidden]) ~ .wm-figtoggle { right: calc(min(360px, 100% - 1.4rem) + 1.4rem); }
@media (max-width: 640px) { .wm-info:not([hidden]) ~ .wm-figtoggle { right: .7rem; } }

/* Flüsse: schmal wie die Wege, mäandernd, mit Ufer und Wasserglanz */
.wm-svg .wm-river path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wm-svg .wm-river .bank { stroke: #3d6b4a; opacity: .55; }
.wm-svg .wm-river .water { stroke: #4f9fca; }
.wm-svg .wm-river .glint { stroke: rgba(225, 245, 255, .7); stroke-dasharray: 5 9; }
.wm-svg .wm-river.w1 .bank { stroke-width: 5; } .wm-svg .wm-river.w1 .water { stroke-width: 2.6; } .wm-svg .wm-river.w1 .glint { stroke-width: .7; }
.wm-svg .wm-river.w2 .bank { stroke-width: 6; } .wm-svg .wm-river.w2 .water { stroke-width: 3.4; } .wm-svg .wm-river.w2 .glint { stroke-width: .8; }
.wm-svg .wm-river.w3 .bank { stroke-width: 7; } .wm-svg .wm-river.w3 .water { stroke-width: 4.3; } .wm-svg .wm-river.w3 .glint { stroke-width: 1; }
.wm-svg .wm-river .glint { animation: wm-river-flow 3.5s linear infinite; }
@keyframes wm-river-flow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .wm-svg .wm-river .glint { animation: none; } }

/* Flussenden: Teiche, Quellen, Delta */
.wm-svg .wm-pond { fill: #5aa8d2; }
.wm-svg .wm-pond.cold { fill: #8fd0ec; }
.wm-svg .wm-pond.moor { fill: #3f7f94; }
.wm-svg .wm-pond-bank { fill: #4f7a45; opacity: .55; }
.wm-svg .wm-pond-bank.moor { fill: #4a5a32; opacity: .7; }
.wm-svg .wm-pond-bank.cold { fill: #8a8478; opacity: .6; }
.wm-svg .wm-pond-glint { fill: rgba(255, 255, 255, .28); }
.wm-svg .wm-foam { fill: #fff; opacity: .85; animation: cb-glow 1.6s ease-in-out infinite; }
.wm-svg .wm-sandbar { fill: #e9d6a2; opacity: .9; }

/* Flüssiges Verschieben: Das Kartenbild ist ringsum 20 % größer und wird während der Bewegung nur verschoben */
.wm-stage > .wm-svg { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; transform-origin: 0 0; }
.wm-moving .wm-svg { will-change: transform; }
.wm-moving .wm-svg * { animation-play-state: paused !important; }
.wm-moving .wm-tip { display: none; }

/* Leistung: großflächige Animationen und teure Filter abschalten (kleine, lokale Animationen bleiben) */
.wm-stage { contain: strict; }
.wm-svg .wm-fog { animation: none; }
.wm-svg .wm-waves { animation: none; }
.wm-svg .wm-river .glint { animation: none; }
.wm-svg .wm-building, .wm-svg .wm-building.cut, .wm-svg .wm-building.ruined, .wm-svg .wm-wall, .wm-svg .wm-tower, .wm-svg .wm-gate2, .wm-svg .wm-outpost, .wm-svg .wm-mark, .wm-svg .wm-quest, .wm-svg .wm-qtarget, .wm-svg .wm-race { filter: none; }
.wm-svg .wm-building.cut { opacity: .7; }
.wm-svg .wm-building.ruined { opacity: .5; }
.wm-svg .wm-wall.ruined, .wm-svg .wm-tower.ruined { filter: none; }
.wm-svg .wm-wall.l5 .band { filter: none; stroke: #e8c766; }
.wm-svg .wm-beacon { filter: none; }
.wm-svg.wm-night .wm-light { filter: none; animation: none; }
.wm-svg .cb-orb { animation: cb-glow 2.2s ease-in-out infinite; }
@keyframes wm-glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.wm-svg.wm-night .wm-light { fill: url(#wmLight); }
.wm-stage { background: #22567f; }

/* Clanstufe: einheitliches Abzeichen hinter der Mitgliederzahl (Rangliste, Clanseite, Clanlisten) */
.clan-lvl { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .25em; margin-left: .4em; border-radius: 6px; vertical-align: .12em;
  font-family: var(--display); font-size: .72em; font-weight: 700; line-height: 1; color: #ffd36b; background: #1d130b; border: 1px solid var(--gold-dark); letter-spacing: 0; font-style: normal; }
.rk-extra .clan-lvl { font-size: .8rem; }

/* Marktstände auf der Weltkarte (ziehen alle paar Stunden weiter) */
.wm-svg .wm-stall { pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.wm-svg .wm-stall .halo { fill: rgba(246, 234, 208, .35); stroke: #f6ead0; stroke-width: 2; }
.wm-svg .wm-stall.fest .halo { fill: rgba(230, 79, 176, .22); stroke: #ffc2e6; }
.wm-moving .wm-svg .wm-stall { filter: none; }
.wm-gmplace.stall { background: rgba(246, 234, 208, .55); border-left-color: #c0392b; }
.wm-gmplace.stall.fest { border-left-color: #e64fb0; }
.wm-stall-list { margin: .3rem 0 .2rem; padding-left: 1.1rem; font-size: .9rem; }
.wm-stall-list li.off { opacity: .55; text-decoration: line-through; }
.wm-evchip.stall { cursor: pointer; font-family: inherit; background: rgba(246, 234, 208, .14); border-color: #f6ead0; }
.wm-evchip.stall.fest { border-color: #ffc2e6; }
.stall-where { margin: 0 0 .2rem; }
.stall-wares { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.stall-wares li { border-radius: 8px; background: rgba(120, 80, 30, .07); }
.stall-wares .stall-ware { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .2rem .7rem; align-items: center; padding: .4rem .55rem; border-radius: 8px; border-left: 3px solid transparent; }
.stall-wares .stall-ware:hover, .stall-wares .stall-ware:focus-visible { background: rgba(120, 80, 30, .12); border-left-color: var(--gold, #b8892f); }
.stall-here { margin: .3rem 0; font-weight: 600; color: var(--gold-dark, #8a6420); }
.stall-wares li.off { opacity: .55; }
.stall-wares .stall-name { font-weight: 600; }
.stall-wares .stall-cat { color: var(--muted, #7a6a55); font-size: .85rem; }
.stall-wares .stall-price { display: inline-flex; align-items: baseline; gap: .4rem; }
.stall-wares .stall-price s { color: var(--muted, #7a6a55); font-size: .85rem; }
.stall-wares small { grid-column: 1 / -1; color: var(--muted, #7a6a55); }

/* Freeze: Der Spielleiter hält das Spiel an */
.fz-overlay { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(22, 40, 64, .78), rgba(6, 12, 22, .94)); backdrop-filter: blur(6px) saturate(.7);
  animation: fz-in .6s ease-out both; cursor: not-allowed; }
.fz-overlay.fz-out { animation: fz-fade .9s ease-in forwards; }
.fz-center { position: relative; text-align: center; padding: 1rem 1.5rem; max-width: 34rem; }
.fz-lock { width: clamp(120px, 26vw, 190px); margin: 0 auto .4rem; filter: drop-shadow(0 0 22px rgba(170, 215, 255, .55)) drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
  animation: fz-drop .9s cubic-bezier(.2, 1.4, .4, 1) both, fz-shiver 4s ease-in-out 1.2s infinite; }
.fz-lock svg { width: 100%; height: auto; display: block; overflow: visible; }
.fz-lock .fz-shackle, .fz-lock .fz-shackle-hi { animation: fz-close .7s ease-in .5s both; transform-origin: 88px 64px; }
.fz-overlay.fz-out .fz-lock .fz-shackle, .fz-overlay.fz-out .fz-lock .fz-shackle-hi { animation: fz-open .5s ease-out forwards; }
.fz-center h2 { margin: .2rem 0 .3rem; font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: #eaf6ff; text-shadow: 0 0 18px rgba(150, 205, 255, .8), 0 2px 0 rgba(0, 0, 0, .4); }
.fz-text { margin: 0; color: #cfe4f5; font-size: 1.1rem; font-style: italic; }
.fz-flakes { position: absolute; inset: 0; pointer-events: none; }
.fz-flake { position: absolute; top: -8%; left: var(--x); color: #f2f9ff; opacity: .85; font-size: calc(1rem * var(--s));
  text-shadow: 0 0 6px rgba(190, 225, 255, .9); animation: fz-fall var(--d) linear var(--delay) infinite; }
.fz-btn.active { background: #2b5f8f !important; color: #eaf6ff !important; border-color: #9fd0ff !important; box-shadow: 0 0 12px rgba(150, 205, 255, .7); }
.fz-form { display: grid; gap: .6rem; }
.fz-form label { display: grid; gap: .25rem; }
@keyframes fz-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fz-fade { to { opacity: 0; } }
@keyframes fz-drop { from { transform: translateY(-40px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fz-close { from { transform: translateY(-14px); } to { transform: none; } }
@keyframes fz-open { to { transform: translateY(-16px) rotate(-18deg); } }
@keyframes fz-shiver { 0%, 92%, 100% { transform: rotate(0); } 94% { transform: rotate(-3deg); } 96% { transform: rotate(3deg); } 98% { transform: rotate(-2deg); } }
@keyframes fz-fall { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(var(--sway), 55vh) rotate(180deg); } to { transform: translate(0, 112vh) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fz-flake { animation: none; display: none; } .fz-lock { animation: none; } }

/* Wirtschaft: Wegzoll, Unterhalt, Ankauf, Clan-Marktplatz */
.wm-toll { margin: .3rem 0; padding: .3rem .5rem; border-radius: 8px; background: rgba(201, 162, 39, .16); font-size: .9rem; }
.wm-upkeep { margin: .3rem 0; font-size: .9rem; }
.wm-upkeep.short { color: #b8402a; font-weight: 600; }
.wm-bazaar { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .3rem; }
.wm-bazaar li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .6rem; padding: .35rem .5rem; border-radius: 8px; background: rgba(120, 80, 30, .08); font-size: .9rem; }
.wm-bazaar-form { display: grid; gap: .35rem; margin-top: .4rem; }
.wm-bazaar-form select { width: 100%; }
.stall-wants { margin: .2rem 0 0; font-size: .9rem; color: #6b4a1a; }

/* Abenteuer: Bestien, Schatz, Botengänge, Ruf, Jahreszeiten */
.wm-svg .wm-beast, .wm-svg .wm-treasure, .wm-svg .wm-errand { pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.wm-svg .wm-beast .core { fill: #6b2a1a; stroke: #2a0e06; stroke-width: 1.5; }
.wm-svg .wm-beast .halo { fill: rgba(184, 38, 29, .22); stroke: #ff8a6a; stroke-width: 2; animation: wm-pulse 2.4s ease-in-out infinite; }
.wm-svg .wm-beast.strong .core { fill: #3a0d06; }
.wm-svg .wm-treasure .halo { fill: rgba(255, 220, 140, .3); stroke: #ffd36b; stroke-width: 2; animation: wm-pulse 1.8s ease-in-out infinite; }
.wm-svg .wm-errand .halo { fill: rgba(255, 248, 228, .3); stroke: #fff8e4; stroke-width: 1.6; }
.wm-moving .wm-svg .wm-beast, .wm-moving .wm-svg .wm-treasure, .wm-moving .wm-svg .wm-errand { filter: none; }
.wm-gmplace.beast { background: rgba(184, 38, 29, .12); border-left-color: #8a1f14; }
.wm-rep { margin: .3rem 0; padding: .3rem .55rem; border-radius: 8px; background: rgba(46, 138, 69, .12); font-size: .92rem; }
.wm-evchip.season { font-family: inherit; }
.wm-evchip.season.s-winter { border-color: #bfe3ff; background: rgba(191, 227, 255, .16); }
.wm-evchip.season.s-sommer { border-color: #ffc46b; }
.wm-evchip.season.s-herbst { border-color: #d98b3a; }
.wm-evchip.season.s-fruehling { border-color: #9be07a; }
.wm-evchip.errand, .wm-evchip.treasure { cursor: pointer; font-family: inherit; }
.wm-evchip.treasure { border-color: #ff8a6a; }
/* Winter: zugefrorene Seen */
.wm-svg.wm-season-winter .wm-wp.lake { fill: #d6ebf5; stroke: #ffffff; stroke-width: 1.5; }
.wm-gm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.wm-gm-playing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.wm-gm-playing p { margin: 0; color: #ffe39a; }
.wm.wm-full .wm-gm-playing, .wm:fullscreen .wm-gm-playing { display: none; }

/* Spielleitung: Übersicht */
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.ov-tile { display: grid; gap: .15rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(120, 80, 30, .08); border: 1px solid rgba(201, 162, 39, .3); }
.ov-label { font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #7a6a55); }
.ov-value { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.ov-tile small { color: var(--muted, #7a6a55); }
.ov-chart svg { width: 100%; height: auto; display: block; max-height: 220px; }
.ov-chart .ov-bar { fill: #b8862a; }
.ov-chart .ov-hit { fill: transparent; }
.ov-chart g:hover .ov-bar { fill: #8a6114; }
.ov-chart .ov-base { stroke: rgba(90, 60, 20, .35); stroke-width: 1; }
.ov-chart .ov-axis { font-size: 10px; fill: #7a6a55; }
tr.ov-active td:first-child { font-weight: 600; }

/* Fertigkeiten / Waffenfähigkeiten / Fähigkeiten */
.src-chip { display: inline-block; margin-right: .35rem; padding: .05rem .45rem; border-radius: 99px; font-size: .72rem; font-family: var(--heading); letter-spacing: .04em; vertical-align: .1em; border: 1px solid; white-space: nowrap; }
.src-fert { color: #2e6b3a; border-color: #6fae7c; background: rgba(46, 138, 69, .1); }
.src-wfaeh { color: #7a4a10; border-color: #c9a227; background: rgba(201, 162, 39, .14); }
.src-faeh { color: #5a2a8a; border-color: #a77ad6; background: rgba(155, 79, 224, .1); }
.src-waffe { color: #5a4a3a; border-color: #b8a58a; background: rgba(120, 90, 50, .08); }
.src-eig { color: #2a4f7a; border-color: #7aa3d6; background: rgba(47, 125, 225, .08); }
.src-merk { color: #6b5a3a; border-color: #c4b08a; background: rgba(160, 130, 80, .08); }
.ability-grouphead { margin: .8rem 0 .3rem; font-family: var(--heading); }
.ability-group:first-child .ability-grouphead { margin-top: 0; }
.ability-sub { margin: .4rem 0 .2rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #7a6a55); }
.ability-el { margin-right: .25rem; }
.faeh-fields { border: 1px dashed rgba(155, 79, 224, .45); border-radius: 10px; padding: .4rem .7rem .6rem; }
.faeh-fields legend { font-size: .85rem; color: #5a2a8a; padding: 0 .3rem; }
.wfaeh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.wfaeh-class { padding: .6rem .8rem; border-radius: 10px; background: rgba(120, 80, 30, .07); border: 1px solid rgba(201, 162, 39, .3); }
.wfaeh-class h3 { margin: 0 0 .3rem; }
.wfaeh-class ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: .35rem; }

/* Zustände im Kampf */
.src-zust { color: #8a2a1a; border-color: #d98b6a; background: rgba(217, 90, 40, .1); }
.token { position: relative; }
.token-status { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: nowrap; gap: 2px; justify-content: center; max-width: 56%; z-index: 3; }
.st-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(20, 12, 6, .78); border: 1px solid rgba(255, 220, 160, .5); font-size: 12px; line-height: 1; }
.st-badge.block { border-color: #ffb36b; box-shadow: 0 0 6px rgba(255, 160, 80, .8); }
.token.st-brennend .token-art { animation: st-burn 1.1s ease-in-out infinite; }
.token.st-eingefroren .token-art { filter: saturate(.3) brightness(1.15) hue-rotate(170deg); box-shadow: inset 0 0 0 3px rgba(190, 230, 255, .9); }
.token.st-vergiftet .token-art { filter: hue-rotate(70deg) saturate(1.3); }
.token.st-verlangsamt .token-art { filter: saturate(.6) hue-rotate(160deg); }
.token.st-geblendet .token-art { filter: brightness(1.6) contrast(.7); }
.token.st-durchnaesst .token-art { filter: saturate(.8) brightness(.9) hue-rotate(190deg); }
.token.st-geschuetzt { box-shadow: 0 0 0 3px rgba(150, 140, 120, .9), 0 0 12px rgba(200, 190, 160, .6); }
.token.st-regeneration { box-shadow: 0 0 0 2px rgba(90, 200, 120, .8), 0 0 14px rgba(90, 200, 120, .5); }
.token.st-betaeubt .token-art, .token.st-umgeworfen .token-art { animation: st-wobble 1.6s ease-in-out infinite; }
.st-overlay.chains { position: absolute; inset: 18% 8% 30%; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(35deg, transparent 0 9px, rgba(70, 60, 50, .85) 9px 13px, transparent 13px 22px),
              repeating-linear-gradient(-35deg, transparent 0 9px, rgba(90, 80, 70, .85) 9px 13px, transparent 13px 22px); border-radius: 10px; opacity: .8; }
.arena-order span.blocked { opacity: .55; text-decoration: line-through; }
.roll-blocked { margin: 0 0 .5rem; padding: .45rem .6rem; border-radius: 8px; background: rgba(184, 64, 42, .12); border-left: 4px solid #b8402a; font-weight: 600; }
.ability-desc { margin-top: -.2rem; }
.cat-status { margin-left: .3rem; }
@keyframes st-burn { 0%, 100% { filter: drop-shadow(0 0 2px #ff8a1e) brightness(1); } 50% { filter: drop-shadow(0 0 9px #ff4a1e) brightness(1.15); } }
@keyframes st-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .token.st-brennend .token-art, .token.st-betaeubt .token-art, .token.st-umgeworfen .token-art { animation: none; } }

/* Rundenmodus auf der Weltkarte */
.wm-turnbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .4rem 0 0; padding: .45rem .8rem; border-radius: 10px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(201, 162, 39, .45); color: #f3e2b8; font-size: .92rem; }
.wm-turnbar.mine { background: linear-gradient(90deg, rgba(201, 162, 39, .35), rgba(201, 162, 39, .12)); border-color: #ffd36b; box-shadow: 0 0 14px rgba(255, 211, 107, .35); }
.wm-turnbar .wm-turn-round { font-family: var(--heading); letter-spacing: .06em; color: #ffd36b; }
.wm-turnbar .wm-turn-me { color: #fff3c4; font-size: 1rem; }
.wm-turnbar .wm-turn-next, .wm-turnbar .wm-turn-wait { color: #c9b58a; }
.wm.wm-waiting .wm-figure.me, .wm.wm-waiting .wm-me { opacity: .75; }
.wm-turnpanel { margin: .4rem 0 .8rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid rgba(201, 162, 39, .45); background: rgba(0, 0, 0, .2); }
.wm-turnpanel.on { border-color: #ffd36b; background: rgba(201, 162, 39, .12); }
.wm-turnpanel h4 { margin: 0 0 .3rem; color: #ffd36b; font-family: var(--heading); }
.wm-turn-picks { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.wm-turn-players { list-style: none; margin: .3rem 0 .5rem; padding: 0; display: grid; gap: .3rem; }
.wm-turn-players li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .3rem .55rem; border-radius: 8px; background: rgba(255, 255, 255, .05); color: #f3e2b8; }
.wm-turn-players li.current { background: rgba(255, 211, 107, .18); font-weight: 600; }
.wm-turn-players li.out { opacity: .6; }
.wm-turn-time { display: inline-flex; align-items: center; gap: .3rem; }
.wm-turn-time input { width: 4.2rem; }
.wm-turn-clock { font-variant-numeric: tabular-nums; }

/* Zweites Ich: Spezial-Fähigkeiten (Nachtseite) */
.persona-abilities { margin-top: .8rem; padding: .6rem .8rem; border-radius: 10px; background: rgba(40, 30, 70, .12); border: 1px solid rgba(120, 100, 200, .35); }
.persona-abilities h3 { margin: 0 0 .3rem; }
.persona-ab-list { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.persona-ab-list li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 8px; background: rgba(60, 40, 110, .1); }
.ability-grouphead.persona-head { color: #5a3a9a; }
.persona-alter .ability-grouphead.persona-head { color: #c8b8ff; }
.grp-persona .ability { border-left: 3px solid rgba(140, 110, 230, .7); padding-left: .4rem; }
.src-chip.src-persona { color: #4a2a8a; border-color: #8a6ad6; background: rgba(90, 60, 180, .14); }
.persona-alter .src-chip.src-persona { color: #d8ccff; }
.tag.persona-tag { background: #2a1f4a; color: #d8ccff; border-color: #6a5aa8; }
.persona-check { grid-column: 1 / -1; }
.rk-tools { display: flex; align-items: center; gap: .8rem; margin: .2rem 1.2rem .8rem; flex-wrap: wrap; }
.rk-search { flex: 1; max-width: 26rem; }
.rk-count { color: var(--muted, #7a6a55); }

/* ---- Baumenü (Clan): eigenes Fenster über der Karte ---- */
.wm-bm { z-index: 7; padding: .8rem; }
.wm-bm-card { position: relative; width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--noise), linear-gradient(180deg, #f8eed4, #ecdcb2); color: var(--ink); border: 2px solid #b08a3a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 24px 50px rgba(0, 0, 0, .6); animation: wm-enc-in .35s cubic-bezier(.2, .9, .3, 1.2); }
.wm-bm-head { flex: none; padding: 1rem 2.6rem .5rem 1.1rem; border-bottom: 1px solid rgba(120, 80, 20, .25); }
.wm-bm-head h3 { margin: 0; font-family: var(--heading); color: var(--blood); font-size: 1.3rem; }
.wm-bm-head .wm-kicker { margin: .1rem 0 .5rem; }
.wm-bm-note { margin: .35rem 0 0; font-size: .78rem; color: var(--ink-soft); }
.wm-bm-wallet { display: flex; flex-wrap: wrap; gap: .3rem; }
.wm-bm-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem; padding: .12rem .5rem; border-radius: 999px; background: rgba(46, 138, 69, .14); color: #1f5a30; border: 1px solid rgba(46, 138, 69, .3); white-space: nowrap; }
.wm-bm-chip.no { background: rgba(168, 50, 42, .14); color: #8a221a; border-color: rgba(168, 50, 42, .4); font-weight: 600; }
.wm-bm-chip.gold { background: linear-gradient(180deg, #fff3c4, #f1d98a); color: #6b4e10; border-color: #c9a227; font-weight: 600; }
.wm-bm-chip.none { background: rgba(0, 0, 0, .05); color: var(--ink-soft); border-color: rgba(0, 0, 0, .1); }
.wm-bm-warn { margin: .4rem 0 0; padding: .35rem .6rem; border-radius: 8px; background: rgba(168, 50, 42, .12); color: #7e1a14; font-size: .85rem; font-weight: 600; }
.wm-bm-tabs { flex: none; display: flex; gap: .25rem; padding: .5rem .8rem 0; border-bottom: 1px solid rgba(120, 80, 20, .25); overflow-x: auto; scrollbar-width: thin; }
.wm-bm-tab { flex: none; padding: .5rem .85rem; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--ink-soft); font: 600 .92rem/1.1 inherit; cursor: pointer; }
.wm-bm-tab.on { background: rgba(255, 252, 240, .85); color: var(--blood); border-color: rgba(120, 80, 20, .3); margin-bottom: -1px; }
.wm-bm-tab:hover:not(.on) { color: var(--ink); background: rgba(255, 255, 255, .35); }
.wm-bm-body { flex: 1; overflow: auto; padding: .8rem 1rem 1.1rem; background: rgba(255, 252, 240, .55); text-align: left; overscroll-behavior: contain; }
.wm-bm-sec { margin-bottom: 1rem; }
.wm-bm-sec h4 { margin: 0 0 .45rem; font-family: var(--heading); font-size: 1.02rem; color: #5a3a1e; }
.wm-slots.big i { width: 16px; height: 16px; border-radius: 4px; }
.wm-bm-have { display: grid; gap: .5rem; }
.wm-bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.wm-bm-building, .wm-bm-new { display: grid; gap: .35rem; padding: .6rem .7rem; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(120, 80, 20, .22); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.wm-bm-new.off { opacity: .72; background: rgba(255, 255, 255, .4); }
.wm-bm-bhead { display: flex; align-items: center; gap: .6rem; }
.wm-bm-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgba(120, 80, 20, .1); }
.wm-bm-icon svg { width: 34px; height: 34px; }
.wm-bm-icon.txt { font-size: 1.4rem; }
.wm-bm-lv { display: flex; align-items: center; gap: .2rem; margin-top: .1rem; }
.wm-bm-lv small, .wm-bm-text { color: var(--ink-soft); font-size: .8rem; }
.wm-bm-hp { position: relative; display: block; width: 140px; max-width: 100%; height: 12px; margin-top: .25rem; border-radius: 6px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.wm-bm-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4f9a5c, #79bf63); }
.wm-bm-hp.low i { background: linear-gradient(90deg, #c26a1d, #e3a03c); }
.wm-bm-hp.ruined i { background: #a8322a; }
.wm-bm-hp small { position: relative; display: block; font-size: .66rem; line-height: 12px; text-align: center; color: #2a1d10; font-weight: 600; }
.wm-bm-acts { display: grid; gap: .4rem; }
.wm-bm-act { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.wm-bm-act > small { flex-basis: 100%; color: var(--ink-soft); font-size: .78rem; }
.wm-bm-act > small.wm-bm-why { color: #8a221a; }
.wm-bm-act.off .btn { opacity: .55; }
.wm-bm-cost { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.wm-bm-locked { margin-top: .6rem; }
.wm-bm-locked > summary, .wm-bm-help > summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); padding: .3rem 0; }
.wm-bm-split { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1rem; align-items: start; }
.wm-bm-octwrap { display: grid; gap: .3rem; justify-items: center; }
.wm-bm-oct { width: 100%; max-width: 240px; height: auto; touch-action: manipulation; }
.wm-bm-octfill { fill: rgba(120, 160, 80, .22); stroke: none; }
.wm-bm-oct .wm-bm-octlabel { font: italic 11px Georgia, serif; fill: #6b5a3e; text-anchor: middle; pointer-events: none; }
.wm-bm-edge, .wm-bm-corner { cursor: pointer; outline: none; }
.wm-bm-edge .hit { stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.wm-bm-edge .vis { stroke: #b9a682; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 5 5; transition: stroke .15s, stroke-width .15s; }
.wm-bm-edge.wall .vis { stroke: #7a5230; stroke-dasharray: none; stroke-width: 7; }
.wm-bm-edge.wall.l3 .vis, .wm-bm-edge.wall.l4 .vis, .wm-bm-edge.wall.l5 .vis { stroke: #6b6f78; stroke-width: 9; }
.wm-bm-edge.gate .vis { stroke: #b8892f; stroke-dasharray: 10 4; stroke-width: 8; }
.wm-bm-edge.ruined .vis { stroke: #a8322a; stroke-dasharray: 3 4; stroke-width: 7; }
.wm-bm-edge.can .vis { filter: drop-shadow(0 0 3px rgba(79, 154, 92, .9)); }
.wm-bm-edge:hover .vis, .wm-bm-edge:focus-visible .vis { stroke-width: 11; }
.wm-bm-edge.sel .vis { stroke-width: 12; filter: drop-shadow(0 0 4px #2f5fb0) drop-shadow(0 0 2px #2f5fb0); }
.wm-bm-edge .roadmark { fill: #d8c08a; stroke: #6b4e10; stroke-width: 1.5; pointer-events: none; }
.wm-bm-dir { font: 600 11px Georgia, serif; text-anchor: middle; fill: #6b5a3e; pointer-events: none; }
.wm-bm-dir.fremd { fill: #a8322a; }
.wm-bm-dir.wasser { fill: #2f5fb0; }
.wm-bm-dir.eigen { fill: #2e8a45; }
.wm-bm-corner circle { fill: #f6ead0; stroke: #9a8358; stroke-width: 2; transition: r .15s; }
.wm-bm-corner.tower circle { fill: #6b6f78; stroke: #2a2d33; }
.wm-bm-corner.ruined circle { fill: #a8322a; }
.wm-bm-corner.can circle { stroke: #4f9a5c; stroke-width: 3; }
.wm-bm-corner.sel circle { stroke: #2f5fb0; stroke-width: 4; }
.wm-bm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .7rem; margin: 0; font-size: .74rem; color: var(--ink-soft); }
.wm-bm-legend .wm-bm-k { display: inline-flex; align-items: center; white-space: nowrap; }
.wm-bm-legend .wm-bm-k::before { content: ''; display: inline-block; width: 14px; height: 4px; margin-right: .25rem; vertical-align: middle; border-radius: 2px; background: #b9a682; }
.wm-bm-legend .wm-bm-k.wall::before { background: #7a5230; height: 6px; }
.wm-bm-legend .wm-bm-k.gate::before { background: #b8892f; height: 6px; }
.wm-bm-legend .wm-bm-k.ruined::before { background: #a8322a; }
.wm-bm-legend .wm-bm-k.can::before { background: #4f9a5c; box-shadow: 0 0 4px #4f9a5c; }
.wm-bm-detail { display: grid; gap: .5rem; padding: .7rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(120, 80, 20, .22); }
.wm-bm-detail h4 { margin: 0; }
.wm-bm-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; }
.wm-bm-summary .wm-bm-open { width: 100%; margin-top: .3rem; font-size: 1rem; padding: .6rem; }
.wm-bm-summary .wm-bm-warn { margin: .2rem 0; }
@media (max-width: 620px) {
  .wm-bm { padding: 0; align-items: end; }
  .wm-bm-card { width: 100%; max-height: 92%; border-radius: 16px 16px 0 0; }
  .wm-bm-split { grid-template-columns: 1fr; }
  .wm-bm-oct { max-width: 200px; }
  .wm-bm-hp { width: 100%; }
}
.wm-bm-legend .wm-bm-k.sel::before { background: #2f5fb0; height: 6px; }
/* Baustellen und Clanlager im Baumenü */
.wm-building.site { opacity: .45; filter: grayscale(.4); }
.wm-site { pointer-events: none; }
.wm-bm-site { margin: .2rem 0; font-size: .85rem; font-weight: 600; color: #6b4e10; }
.wm-bm-building.site { border-style: dashed; border-color: #b8892f; background: repeating-linear-gradient(135deg, rgba(255, 246, 214, .9) 0 12px, rgba(240, 222, 170, .9) 12px 24px); }
.wm-bm-prog { position: relative; display: block; width: 220px; max-width: 100%; height: 16px; margin: .25rem 0; border-radius: 8px; background: rgba(0, 0, 0, .12); overflow: hidden; }
.wm-bm-prog i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(135deg, #c9a227 0 8px, #e0bf6a 8px 16px); animation: wm-bm-stripes 1.2s linear infinite; background-size: 22.6px 22.6px; }
@keyframes wm-bm-stripes { to { background-position: 22.6px 0; } }
.wm-bm-prog small { position: relative; display: block; text-align: center; font-size: .7rem; line-height: 16px; font-weight: 700; color: #2a1d10; }
.wm-bm-store { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .5rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(120, 80, 20, .2); }
.wm-bm-store > strong { min-width: 6.5rem; }
.wm-bm-chip small { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .wm-bm-prog i { animation: none; } }

/* Fähigkeiten lernen */
.ln-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; margin: .6rem 0; }
.ln-tiercard { display: grid; gap: .15rem; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .45); }
.ln-tiercard small { color: var(--ink-soft); font-size: .8rem; }
.ln-tiercard.tier1 { border-left: 4px solid #4f9a5c; }
.ln-tiercard.tier2 { border-left: 4px solid #2f5fb0; }
.ln-tiercard.tier3 { border-left: 4px solid #8a3cb0; }
.ln-list { display: grid; gap: .35rem; margin-top: .6rem; }
.ln-item { border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .5); }
.ln-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .5rem .7rem; cursor: pointer; list-style: none; }
.ln-item > summary::-webkit-details-marker { display: none; }
.ln-item.ready { border-color: #c9a227; box-shadow: 0 0 0 1px rgba(201, 162, 39, .45), 0 0 12px rgba(201, 162, 39, .25); }
.ln-item.known { opacity: .65; }
.ln-name { font-weight: 700; }
.ln-cat { font-size: .78rem; color: var(--ink-soft); }
.ln-tier { font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; color: #fff; font-weight: 600; letter-spacing: .02em; }
.ln-tier.tier1 { background: #4f9a5c; }
.ln-tier.tier2 { background: #2f5fb0; }
.ln-tier.tier3 { background: #8a3cb0; }
.ln-state { margin-left: auto; font-size: .82rem; color: var(--ink-soft); }
.ln-item.ready .ln-state { color: #8a6420; font-weight: 700; }
.ln-body { padding: 0 .8rem .7rem; }
.ln-meta { font-size: .82rem; color: var(--ink-soft); margin: .2rem 0 .4rem; }
.ln-reqs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
.ln-req { font-size: .78rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid; }
.ln-req.ok { background: rgba(46, 138, 69, .12); color: #1f5a30; border-color: rgba(46, 138, 69, .35); }
.ln-req.no { background: rgba(168, 50, 42, .1); color: #8a221a; border-color: rgba(168, 50, 42, .35); }
.ln-where { font-size: .86rem; margin: .3rem 0; }
.ln-ready { font-weight: 700; color: #8a6420; }
.ln-result { text-align: center; }
.ln-big { font-size: 3rem; margin: .2rem 0; }
.ln-result.win .ln-big { animation: ln-pop .6s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes ln-pop { from { transform: scale(.3) rotate(-15deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ln-dice { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.ln-dice span { padding: .2rem .5rem; border-radius: 8px; font-weight: 700; }
.ln-dice span.ok { background: rgba(46, 138, 69, .15); color: #1f5a30; }
.ln-dice span.no { background: rgba(168, 50, 42, .15); color: #8a221a; }
.ln-fx { list-style: none; padding: 0; color: var(--ink-soft); font-size: .88rem; }
.wm-teach .wm-actions { border-left: 3px solid #8a3cb0; }
.combo-hint { margin: .3rem 0; }
.combo-now { margin: .2rem 0; padding: .35rem .6rem; border-radius: 8px; background: linear-gradient(90deg, rgba(201, 162, 39, .25), rgba(201, 162, 39, .05)); font-weight: 700; color: #6b4e10; animation: combo-glow 1.6s ease-in-out infinite alternate; }
@keyframes combo-glow { from { box-shadow: 0 0 0 rgba(201, 162, 39, 0); } to { box-shadow: 0 0 12px rgba(201, 162, 39, .55); } }
.combo-list summary { cursor: pointer; font-size: .85rem; color: var(--ink-soft); }
.combo-list ul { margin: .3rem 0; padding-left: 1rem; font-size: .84rem; }
.combo-list li.mine { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .combo-now { animation: none; } }
/* Schwankende Preise */
.trend { display: inline-block; font-size: .72rem; font-weight: 700; padding: .02rem .4rem; border-radius: 999px; margin-left: .25rem; white-space: nowrap; }
.trend.up { background: rgba(168, 50, 42, .14); color: #8a221a; }
.trend.down { background: rgba(46, 138, 69, .14); color: #1f5a30; }
/* Auktionshaus */
.ware-tile.auction { border-style: double; border-width: 3px; }
.ware-tile.leading { box-shadow: 0 0 0 2px #c9a227, 0 0 12px rgba(201, 162, 39, .4); }
.auc-bid { font-weight: 700; display: flex; align-items: baseline; gap: .25rem; flex-wrap: wrap; }
.auc-bid small { font-weight: 400; color: var(--ink-soft); }
.auc-time { color: #8a221a; font-weight: 600; }
.auc-done { margin: 0; padding-left: 1.1rem; }
.wm-svg .wm-caravan { pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.wm-svg .wm-caravan .halo { fill: rgba(232, 196, 120, .35); stroke: #e8c478; stroke-width: 1.6; }
.wm-moving .wm-svg .wm-caravan { filter: none; }
.wm-evchip.caravan { background: linear-gradient(180deg, #f5deb0, #e3c07a); color: #4a3510; }
/* Wetter auf der Karte */
.wm-svg .wm-weather { pointer-events: none; }
.wm-svg .wm-wx.k-regen, .wm-svg .wm-wx.k-gewitter { opacity: .9; }
.wm-svg .wm-wx.k-nebel { opacity: .85; }
.wm-svg .wm-wx-flash { fill: #fff; opacity: 0; animation: wm-flash 7s linear infinite; }
@keyframes wm-flash { 0%, 91%, 93.5%, 95.5%, 100% { opacity: 0; } 92% { opacity: .35; } 95% { opacity: .22; } }
.wm-far .wm-weather { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .wm-svg .wm-wx-flash { animation: none; } }
/* Dungeon */
.wm-dg { z-index: 8; padding: .8rem; }
.dg-card { width: min(820px, 100%); background: var(--noise), linear-gradient(180deg, #e9dcc0, #cdb98f); }
.dg-card .wm-bm-head { background: linear-gradient(180deg, #2b2420, #3a302a); color: #f3e6c8; }
.dg-card .wm-bm-head h3 { color: #ffd889; }
.dg-card .wm-bm-head .wm-kicker { color: #d9c6a0; }
.dg-lep { width: 200px; }
.dg-lep i { background: linear-gradient(90deg, #a8322a, #d65a4a) !important; }
.dg-body { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1rem; align-items: start; }
.dg-grid { --n: 5; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); gap: 10px; aspect-ratio: 1; padding: 10px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #3b332c, #1d1814); box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); }
.dg-room { position: relative; display: grid; place-items: center; border-radius: 8px; border: 2px solid #6b5a44; background: #4a3f34; color: #f3e6c8; font-size: 1.15rem; cursor: default; padding: 0; transition: transform .15s, box-shadow .15s; }
.dg-room::before, .dg-room::after { content: none; position: absolute; background: #6b5a44; }
.dg-room.d-n::before { content: ''; left: 40%; width: 20%; top: -12px; height: 10px; }
.dg-room.d-w::after { content: ''; top: 40%; height: 20%; left: -12px; width: 10px; }
.dg-room.unknown { background: repeating-linear-gradient(45deg, #2a241f 0 6px, #332c26 6px 12px); border-style: dashed; color: #8a7a64; }
.dg-room.here { border-color: #ffd889; box-shadow: 0 0 0 2px #ffd889, 0 0 18px rgba(255, 216, 137, .6); background: #6a5640; }
.dg-room.reach { cursor: pointer; border-color: #c9a227; }
.dg-room.reach:hover { transform: scale(1.06); box-shadow: 0 0 12px rgba(201, 162, 39, .6); }
.dg-room.cleared:not(.here) { opacity: .7; }
.dg-room.t-hort { background: linear-gradient(180deg, #7a5a20, #4a3410); }
.dg-room.t-monster:not(.cleared) { background: #5a2a24; }
.dg-room.t-falle:not(.cleared) { background: #5a4a20; }
.dg-room.t-quelle { background: #24485a; }
.dg-room-panel h4 { margin: 0 0 .3rem; font-family: var(--heading); color: var(--blood); }
.dg-text { font-style: italic; margin: 0 0 .6rem; }
.dg-result { margin: .4rem 0 .7rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid; animation: wm-enc-in .35s ease-out; }
.dg-result.ok { background: rgba(46, 138, 69, .12); border-color: rgba(46, 138, 69, .4); }
.dg-result.bad { background: rgba(168, 50, 42, .1); border-color: rgba(168, 50, 42, .4); }
.dg-result p { margin: .25rem 0 0; }
.dg-rolls { display: inline-flex; gap: .3rem; margin-left: .5rem; }
.dg-rolls span { font-size: .78rem; font-weight: 700; padding: .05rem .4rem; border-radius: 6px; }
.dg-rolls .ok { background: rgba(46, 138, 69, .2); color: #1f5a30; }
.dg-rolls .no { background: rgba(168, 50, 42, .2); color: #8a221a; }
.dg-fx { font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 620px) {
  .wm-dg { padding: 0; align-items: end; }
  .dg-body { grid-template-columns: 1fr; }
  .dg-grid { max-width: 280px; margin: 0 auto; }
}

/* ---- Dungeons II: Pergament-Grundriss, Fackelschein, Raumbild ---- */
.dg-card { width: min(980px, 100%); }
.dg-card.t-moor .dg-head { background: linear-gradient(180deg, #1d2a1f, #33432d); }
.dg-card.t-frost .dg-head { background: linear-gradient(180deg, #1c2c3a, #34506a); }
.dg-card.t-sand .dg-head { background: linear-gradient(180deg, #3a2a16, #5e4524); }
.dg-card.t-mine .dg-head { background: linear-gradient(180deg, #221a12, #3e2e1c); }
.dg-status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .35rem; }
.dg-chip { font-size: .78rem; padding: .12rem .55rem; border-radius: 999px; background: rgba(255, 216, 137, .15); color: #f3e6c8; border: 1px solid rgba(255, 216, 137, .35); }
.dg-chip.dark { background: rgba(0, 0, 0, .4); color: #b8a888; }
.dg-chip.gold { background: rgba(201, 162, 39, .35); color: #ffe7a6; }
.dg-body { grid-template-columns: minmax(260px, 1.1fr) minmax(260px, 1fr); }
.dg-svg { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .2); background: #e9dcbc; }
.dg-svg .dg-floor.fresh { stroke-dasharray: 520; stroke-dashoffset: 520; fill-opacity: 0; animation: dg-ink 1.2s ease-out forwards; }
.dg-svg .dg-glyph.fresh { opacity: 0; animation: dg-fade .6s .8s ease-out forwards; }
@keyframes dg-ink { 60% { stroke-dashoffset: 0; fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes dg-fade { to { opacity: 1; } }
.dg-svg .dg-hero { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.dg-svg .dg-hero.walk { transition: transform .75s cubic-bezier(.45, .05, .35, 1); }
.dg-svg .dg-hit { fill: transparent; cursor: pointer; outline: none; }
.dg-svg .dg-hit:hover, .dg-svg .dg-hit:focus-visible { fill: rgba(255, 216, 137, .18); stroke: #ffd889; stroke-width: 2; stroke-dasharray: 4 4; }
.dg-scene { display: block; width: 100%; height: auto; border-radius: 12px; margin-bottom: .6rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); background: #111; }
.dg-scene .dg-flame { transform-origin: 0 0; animation: dg-flame .5s ease-in-out infinite alternate; }
@keyframes dg-flame { to { transform: scale(1.12, .9) translateY(1px); } }
.dg-scene .dg-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .6s; }
.dg-scene .dg-chest.opened .dg-lid { transform: rotate(-35deg); }
.dg-scene.anim-open .dg-lid { animation: dg-lid .8s ease-out both; }
@keyframes dg-lid { from { transform: rotate(0); } to { transform: rotate(-35deg); } }
.dg-scene.anim-defeat .dg-foe, .dg-scene.anim-defeat-hero .dg-foe { animation: dg-fall 1s ease-in forwards; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes dg-fall { to { opacity: 0; transform: translateY(20px) rotate(12deg) scale(.9); } }
.dg-scene.anim-hit, .dg-scene.anim-trap { animation: dg-shake .5s; }
.dg-scene.anim-hit .dg-flash, .dg-scene.anim-trap .dg-flash { animation: dg-red .6s; }
@keyframes dg-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes dg-red { 0% { opacity: 0; } 25% { opacity: .45; } 100% { opacity: 0; } }
.dg-scene.anim-heal .dg-sparkle { animation: dg-spark 1.2s ease-out 2; transform-box: fill-box; }
@keyframes dg-spark { 50% { transform: translateY(-14px); opacity: .3; } }
.dg-scene.anim-key .dg-key { animation: dg-float 1.2s ease-out forwards; transform-box: fill-box; }
@keyframes dg-float { to { transform: translateY(-40px); opacity: 0; } }
.dg-scene.anim-secret .dg-vig, .dg-scene.anim-fight .dg-vig { animation: dg-glowin 1s ease-out; }
@keyframes dg-glowin { from { opacity: .2; } }
.dg-scene.anim-sneak .dg-foe { opacity: .55; }
.dg-scene .dg-foe { animation: dg-breathe 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes dg-breathe { 50% { transform: scale(1.02, .985); } }
.dg-fightbox { margin: .4rem 0 .7rem; padding: .6rem .8rem; border-radius: 10px; background: linear-gradient(90deg, rgba(126, 26, 20, .18), rgba(126, 26, 20, .05)); border: 1px solid rgba(126, 26, 20, .4); }
.dg-fightbox p { margin: .25rem 0; }
.btn.dg-fight { background: linear-gradient(180deg, #a8322a, #6e1610); }
/* Editor */
.dge-brushes { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0; }
.dge-brush { font-size: .82rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); cursor: pointer; }
.dge-brush.on { background: #3b342c; color: #ffd889; border-color: #3b342c; }
.dge-wrap { overflow-x: auto; padding: .4rem 0; }
.dge-grid { --n: 5; display: grid; grid-template-columns: repeat(var(--n), 56px 14px); grid-template-rows: repeat(var(--n), 56px 14px); width: max-content; margin: 0 auto; padding: 10px; border-radius: 12px; background: #e9dcbc; box-shadow: inset 0 0 0 2px rgba(59, 52, 44, .4); }
.dge-cell { border: 2px dashed rgba(59, 52, 44, .35); border-radius: 8px; background: transparent; font-size: 1.3rem; cursor: pointer; padding: 0; }
.dge-cell[class*=" t-"] { border-style: solid; border-color: #3b342c; background: #dcd2bf; }
.dge-cell.t-hort { background: #e8c878; }
.dge-cell.t-eingang { background: #c8d8b8; }
.dge-cell.sel { box-shadow: 0 0 0 3px #c9a227; }
.dge-door { border: 0; padding: 0; background: transparent; cursor: pointer; position: relative; }
.dge-door:disabled { cursor: default; }
.dge-door.h::after, .dge-door.v::after { content: ''; position: absolute; border-radius: 3px; }
.dge-door.h::after { left: 0; right: 0; top: 40%; height: 20%; }
.dge-door.v::after { top: 0; bottom: 0; left: 40%; width: 20%; }
.dge-door.open::after { background: #3b342c; }
.dge-door.locked::after { background: #c9a227; box-shadow: 0 0 0 2px #7a4a22; }
.dge-door:not(:disabled).none:hover::after { background: rgba(59, 52, 44, .25); }
.dge-text { display: grid; gap: .3rem; margin: .5rem 0; }
.dge-text textarea { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .dg-svg .dg-floor.fresh, .dg-svg .dg-glyph.fresh { animation: none; stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
  .dg-scene *, .dg-scene { animation: none !important; }
}
@media (max-width: 760px) { .dg-body { grid-template-columns: 1fr; } }

/* ---- Clanseite: ganze Breite, Dashboard ohne Lücken, Seitenleiste ---- */
body.page-wide main, body.page-wide .topbar-row, body.page-wide .mainnav { max-width: min(1720px, 100%); }
body.page-wide main { padding-left: 1.5rem; padding-right: 1.5rem; }
.clan-home { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: stretch; min-height: calc(100vh - 380px); }
.clan-home .clan-dash { margin: 0; display: flex; flex-direction: column; }
/* Kacheln wachsen, bis jede Reihe voll ist – keine Lücken mehr */
.clan-home .dash-grid { display: flex; flex-wrap: wrap; gap: .8rem; align-content: stretch; flex: 1; }
.clan-home .dash-grid > .dw { flex: 1 1 250px; }
.clan-home .dash-grid > .dw.wide { flex-basis: 100%; }
.clan-home .dash-grid > .dw.cd-gebiet, .clan-home .dash-grid > .dw.cd-chronik, .clan-home .dash-grid > .dw.cd-mitglieder { flex: 2 1 340px; }
.dw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .4rem; }
.dw-stats > div { display: grid; text-align: center; padding: .35rem .2rem; border-radius: 8px; background: rgba(120, 80, 20, .08); }
.dw-stats strong { font-size: 1.25rem; font-family: var(--heading); }
.dw-stats small { color: var(--ink-soft); font-size: .72rem; }
.dw-warn { color: #8a221a; font-weight: 600; display: block; }
.dw-cols { columns: 2; column-gap: 1rem; }
.dw-list li.dim { opacity: .5; }
.clan-side { display: flex; flex-direction: column; gap: .8rem; }
.cs-box { padding: .8rem .9rem; border-radius: 14px; background: var(--parchment-light) var(--noise); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cs-box h3 { display: flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; font-family: var(--heading); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.cs-box h3 .icon { width: 18px; height: 18px; color: var(--blood); }
.cs-members { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cs-members li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 .5rem; }
.cs-members li.leader .cs-name { color: var(--blood); font-weight: 700; }
.cs-members small { color: var(--ink-soft); font-size: .75rem; }
.cs-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.cs-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark, #8a6420), var(--gold, #c9a227)); }
.cs-chron { margin: 0 0 .4rem; padding-left: 1rem; font-size: .88rem; display: grid; gap: .3rem; }
.cs-box:nth-child(2) { flex: 1; }
.cs-links { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.cs-links a { display: flex; align-items: center; gap: .35rem; padding: .45rem .55rem; border-radius: 9px; background: rgba(120, 80, 20, .08); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .86rem; }
.cs-links a:hover { background: rgba(201, 162, 39, .18); border-color: var(--gold, #c9a227); }
.cs-links .icon { width: 16px; height: 16px; color: var(--blood); }
@media (max-width: 1100px) { .clan-home { grid-template-columns: 1fr; min-height: 0; } }
.clan-home .dash-grid > .dw.auto { border-top-color: rgba(201, 162, 39, .45); opacity: .96; }
/* Dashboard gestalten: runder Knopf mit Stift */
.dash-edit { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--acc, var(--gold)); background: rgba(0, 0, 0, .35); color: var(--acc-text, var(--gold-light)); cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.dash-edit svg { width: 17px; height: 17px; }
.dash-edit:hover, .dash-edit:focus-visible { background: var(--acc, var(--gold)); color: #1d1610; transform: rotate(-12deg) scale(1.08); box-shadow: 0 0 10px rgba(201, 162, 39, .5); outline: none; }

/* --------------------------------------------------------------------------
   Seitenleiste (ab 900 px Breite): Reiter nach Bereichen, einklappbar.
   Beim Überfahren fliegen goldene und weiße Blöcke von rechts nach links herein.
   -------------------------------------------------------------------------- */

:root { --side-w: 236px; --side-slim: 68px; --top-h: 63px; }
.sidenav, .crumb { display: none; }

@media (min-width: 900px) {
  body.has-side { padding-left: var(--side-w); transition: padding-left .25s ease; }
  body.has-side.side-slim { padding-left: var(--side-slim); }
  body.has-side .topbar .brand, body.has-side #nav { display: none; }
  body.has-side .topbar-row { max-width: none; min-height: calc(var(--top-h) - 3px); padding: .4rem 1.5rem; }
  body.has-side .userbox a.gm-link { display: none; }
  body.has-side .crumb {
    display: flex; align-items: center; gap: .55rem; min-width: 0;
    font-family: var(--heading); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 210, 126, .55);
  }
  body.has-side .crumb b { color: var(--gold-light); font-size: 1rem; letter-spacing: .08em; white-space: nowrap; }
  body.has-side .crumb span + b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 .7rem .15rem 0; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); }

  body.has-side .sidenav {
    position: fixed; inset: 0 auto 0 0; z-index: 15; width: var(--side-w);
    display: flex; flex-direction: column;
    background: var(--noise), linear-gradient(180deg, #2e1e10 0%, #1c120a 55%, #140d08 100%);
    border-right: 3px double var(--gold-dark);
    box-shadow: 6px 0 22px rgba(0, 0, 0, .5);
    transition: width .25s ease;
  }
  body.has-side.side-slim .sidenav { width: var(--side-slim); }
}

.sn-brand {
  display: flex; align-items: center; gap: .65rem; flex: none; height: var(--top-h); padding: 0 1rem;
  border-bottom: 3px double var(--gold-dark);
  font-family: var(--display); font-weight: 900; font-size: 1.18rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, #3a2614 0%, #24170c 100%);
}
.sn-brand .sn-label {
  background: linear-gradient(180deg, #f6e3a1 0%, #d4ad3a 55%, #9b7520 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.sn-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .7rem .6rem 1rem; scrollbar-width: thin; scrollbar-color: var(--gold-dark) transparent; }
.sn-group + .sn-group { margin-top: .85rem; }
.sn-group h4 {
  margin: 0 0 .3rem .55rem; white-space: nowrap; overflow: hidden;
  font-family: var(--display); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(236, 210, 126, .5);
}

.sn-link, .sn-toggle {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: .75rem; width: 100%; margin: 1px 0; padding: .5rem .75rem .5rem .9rem;
  font-family: var(--heading); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--parchment-dark); text-decoration: none; background: none; border: 0; border-radius: 3px; cursor: pointer;
  transition: color .18s ease .08s;
}
.sn-link .icon, .sn-toggle .sn-chevron { position: relative; z-index: 2; width: 1.25rem; height: 1.25rem; }
.sn-label { position: relative; z-index: 2; overflow: hidden; text-overflow: ellipsis; }

/* Goldene Fläche: wächst von rechts herein, verschwindet nach links. */
.sn-link::before, .sn-toggle::before {
  content: ""; position: absolute; inset: 0 8px 0 -14px; z-index: -1;
  background: linear-gradient(100deg, #f6e3a1 0%, var(--gold-light) 30%, var(--gold) 72%, var(--gold-dark) 100%);
  transform: skewX(-18deg) scaleX(0); transform-origin: left center;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.sn-link:hover::before, .sn-link:focus-visible::before, .sn-toggle:hover::before, .sn-toggle:focus-visible::before {
  transform: skewX(-18deg) scaleX(1); transform-origin: right center; transition-delay: .07s;
}
.sn-link:hover, .sn-link:focus-visible, .sn-toggle:hover, .sn-toggle:focus-visible { color: var(--ink); outline: none; }

/* Die Blöcke */
.sn-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sn-fx i { position: absolute; left: 105%; opacity: 0; transform: skewX(-18deg); }
.sn-fx i:nth-child(1) { top: 0; bottom: 0; width: 5px; background: #fffaf0; box-shadow: 0 0 8px rgba(255, 250, 240, .8); }
.sn-fx i:nth-child(2) { top: 14%; height: 72%; width: 20px; background: var(--gold-light); }
.sn-fx i:nth-child(3) { top: 30%; height: 40%; width: 4px; background: #fff; }
.sn-fx i:nth-child(4) { top: 0; bottom: 0; width: 11px; background: var(--gold); }
.sn-fx i:nth-child(5) { bottom: 3px; height: 2px; width: 34px; background: #fff; }
.sn-link:hover .sn-fx i, .sn-link:focus-visible .sn-fx i, .sn-toggle:hover .sn-fx i, .sn-toggle:focus-visible .sn-fx i {
  animation: sn-streak .42s cubic-bezier(.25, .7, .3, 1) both;
}
.sn-link:hover .sn-fx i:nth-child(1), .sn-link:focus-visible .sn-fx i:nth-child(1), .sn-toggle:hover .sn-fx i:nth-child(1), .sn-toggle:focus-visible .sn-fx i:nth-child(1) {
  animation: sn-park .38s cubic-bezier(.2, .8, .2, 1) .1s both;
}
.sn-fx i:nth-child(2) { animation-delay: 0s !important; }
.sn-fx i:nth-child(3) { animation-delay: .04s !important; }
.sn-fx i:nth-child(4) { animation-delay: .07s !important; }
.sn-fx i:nth-child(5) { animation-delay: .02s !important; }
@keyframes sn-streak {
  0% { left: 105%; opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { left: -25%; opacity: 0; }
}
@keyframes sn-park {
  0% { left: 105%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 3px; opacity: 1; }
}

/* Aktueller Reiter: Pergament mit goldenem Rand links */
.sn-link.active { color: var(--blood); background: var(--noise), linear-gradient(90deg, var(--parchment-light), var(--parchment)); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); box-shadow: inset 4px 0 0 var(--gold), 0 2px 8px rgba(0, 0, 0, .35); }
.sn-link.active:hover { color: var(--ink); }
.sn-link.nav-awaken { color: #ffe39a; }

.sn-toggle { flex: none; margin: 0; padding: .7rem 1rem; border-top: 1px solid rgba(201, 162, 39, .25); border-radius: 0; color: rgba(236, 210, 126, .6); font-size: .7rem; }
.sn-chevron { display: grid; place-items: center; }
.sn-chevron::after { content: ""; width: 8px; height: 8px; margin-left: 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }

/* Eingeklappt: nur Symbole, Überschriften werden zu Trennlinien */
body.side-slim .sn-label { display: none; }
body.side-slim .sn-brand { justify-content: center; padding: 0; }
body.side-slim .sn-scroll { padding-left: .45rem; padding-right: .45rem; }
body.side-slim .sn-group h4 { height: 1px; margin: .2rem .4rem .45rem; font-size: 0; background: rgba(201, 162, 39, .3); }
body.side-slim .sn-link, body.side-slim .sn-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
body.side-slim .sn-chevron::after { margin: 0 3px 0 0; transform: rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
  .sn-fx { display: none; }
  .sn-link::before, .sn-toggle::before { transition: none; }
  body.has-side, body.has-side .sidenav { transition: none; }
}

/* --------------------------------------------------------------------------
   Neue Finalkills: Zweigeteilt, Gift, Versteinern, Schattenschlund, Licht,
   Explosion, Ranken, Versinken
   -------------------------------------------------------------------------- */

@keyframes fk-show { to { opacity: 1; } }
@keyframes fk-fade { to { opacity: 0; } }
@keyframes fk-draw { to { stroke-dashoffset: 0; } }
@keyframes fk-spin { to { transform: rotate(360deg); } }
.fk-zweigeteilt .fk-stage::before, .fk-gift .fk-stage::before, .fk-versteinern .fk-stage::before, .fk-schattenschlund .fk-stage::before,
.fk-licht .fk-stage::before, .fk-explosion .fk-stage::before, .fk-ranken .fk-stage::before, .fk-versinken .fk-stage::before { animation: fk-in .4s ease-out both, fk-glow-out 1.2s 1.6s ease-in forwards; }

/* Zweigeteilt: ein Schnitt, zwei Hälften gleiten auseinander */
.fk-zweigeteilt .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-hide .01s .85s forwards; }
.fk-half { animation: fk-split 1.8s .85s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes fk-split {
  0% { opacity: 1; transform: none; }
  14% { opacity: 1; transform: translate(calc(var(--dx) * .25), calc(var(--dy) * .25)) rotate(calc(var(--rot) * .2)); }
  65% { opacity: 1; transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + 150px)) rotate(calc(var(--rot) * 1.5)); }
}
.fk-cutline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.fk-cutline path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px #ff5a3a) drop-shadow(0 0 10px #ffb199); animation: fk-draw .28s .6s ease-out forwards, fk-fade .5s 1.5s forwards; }
.fk-zweigeteilt .fk-slash { transform: rotate(-25.6deg) scaleX(0); animation-name: fk-slash-z; }
@keyframes fk-slash-z { 0% { transform: rotate(-25.6deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-25.6deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-25.6deg) scaleX(1); opacity: 0; } }
.fk-blood i { width: 6px; height: 6px; border-radius: 50%; background: #c2281e; box-shadow: 0 0 4px rgba(255, 60, 40, .6); animation: fk-fall 1.3s ease-in; }
@keyframes fk-fall { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s)); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 1.5), 150px) scale(var(--s)); } }

/* Gift: grün anlaufen, zerfließen, Pfütze und Blasen */
.fk-gift .fk-art { transform-origin: 50% 100%; animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-poison 2s .8s ease-in forwards; }
@keyframes fk-poison {
  0% { filter: none; transform: none; }
  22% { filter: hue-rotate(75deg) saturate(2.4) brightness(1.1) drop-shadow(0 0 14px #7dff5a); transform: skewX(5deg); }
  45% { transform: skewX(-6deg) scaleY(.88) scaleX(1.05); }
  100% { filter: hue-rotate(85deg) saturate(1.6) brightness(.45) blur(4px); transform: scaleY(.04) scaleX(1.35); opacity: .15; }
}
.fk-puddle { position: absolute; left: 10%; right: 10%; bottom: 0; height: 15%; border-radius: 50%; background: radial-gradient(ellipse, rgba(150, 255, 100, .9), rgba(50, 140, 35, .65) 55%, transparent 72%); transform: scaleX(0); filter: blur(1px); animation: fk-grow 1.3s 1.4s ease-out both; pointer-events: none; }
@keyframes fk-grow { to { transform: scaleX(1); } }
.fk-bubbles i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #a8ff84; background: rgba(150, 255, 110, .25); animation: fk-rise 1.7s ease-out; }

/* Versteinern: grau werden, Risse, dann zerbröckeln */
.fk-versteinern .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-stone .8s .75s ease-out forwards, fk-hide .01s 1.95s forwards; }
@keyframes fk-stone { to { filter: grayscale(1) sepia(.25) contrast(1.35) brightness(.8); } }
.fk-stonecracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; animation: fk-hide .01s 1.95s forwards; }
.fk-stonecracks path { fill: none; stroke: #120d09; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); animation: fk-draw .55s 1.3s ease-in forwards; }
.fk-versteinern .fk-shard { filter: grayscale(1) sepia(.25) contrast(1.35) brightness(.8); animation: fk-crumble 1.3s 1.95s cubic-bezier(.5, 0, .85, .55) both; }
@keyframes fk-crumble { 0% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx) * .25), calc(230px + var(--dy) * .25)) rotate(var(--rot)); } }
.fk-pebbles i { width: 8px; height: 7px; border-radius: 35%; background: #8d857a; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .35); animation: fk-fall 1.2s ease-in; }

/* Schattenschlund: ein Wirbel verschluckt den Gegner */
.fx-finalkill.fk-schattenschlund { background: radial-gradient(ellipse at center, rgba(34, 6, 54, .9), rgba(0, 0, 0, .97) 70%); }
.fk-vortex { position: absolute; inset: -22%; border-radius: 50%; opacity: 0; animation: fk-vortex-in .6s .75s ease-out both, fk-vortex-out .5s 2.45s ease-in forwards; pointer-events: none; }
.fk-vortex i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #000, #4a1172, #000 25%, #7a2fc0 45%, #000 60%, #36085a 80%, #000); -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .9) 42%, transparent 70%); mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .9) 42%, transparent 70%); animation: fk-spin 1.1s linear infinite; }
.fk-vortex i + i { inset: 20%; animation-duration: .7s; animation-direction: reverse; opacity: .85; }
@keyframes fk-vortex-in { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: scale(1); } }
@keyframes fk-vortex-out { to { opacity: 0; transform: scale(.05); } }
.fk-schattenschlund .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-swallow 1.5s 1.05s cubic-bezier(.6, 0, .9, .5) forwards; }
@keyframes fk-swallow { 0% { transform: none; filter: none; } 30% { filter: brightness(.65) drop-shadow(0 0 14px #a45dff); } 100% { transform: rotate(560deg) scale(0); filter: brightness(0); opacity: .2; } }
.fk-shadow i { width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: radial-gradient(circle, #d3a2ff, rgba(90, 20, 150, 0) 70%); animation: fk-suck 1.3s ease-in; }
@keyframes fk-suck { 0% { opacity: 0; transform: translate(calc(var(--x) * 4.5), calc(var(--y) * 4.5)) scale(var(--s)); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) scale(.2); } }

/* Licht: Strahlen, Lichtsäule, Auflösen nach oben */
.fx-finalkill.fk-licht { background: radial-gradient(ellipse at center, rgba(80, 58, 14, .84), rgba(0, 0, 0, .93) 70%); }
.fk-rays { position: absolute; inset: -70%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 170, 0) 0deg 7deg, rgba(255, 236, 170, .38) 10deg 13deg, rgba(255, 236, 170, 0) 16deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%); mask: radial-gradient(circle, #000 12%, transparent 60%);
  animation: fk-show .8s .7s ease-out forwards, fk-spin 9s linear infinite, fk-fade 1s 2.4s forwards; }
.fk-beam { position: absolute; left: 28%; right: 28%; top: -140%; bottom: -10%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 250, 220, 0), rgba(255, 246, 200, .85) 62%, rgba(255, 240, 180, 0)); filter: blur(7px); transform: scaleX(0); animation: fk-beam 1.7s .85s ease-out both; }
@keyframes fk-beam { 0% { transform: scaleX(0); opacity: 0; } 20% { transform: scaleX(1); opacity: 1; } 70% { opacity: .9; } 100% { transform: scaleX(.25); opacity: 0; } }
.fk-licht .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-ascend 1.8s 1s ease-in forwards; }
@keyframes fk-ascend { 0% { filter: none; } 30% { filter: brightness(2.2) sepia(.4) drop-shadow(0 0 22px #fff2b0); } 100% { filter: brightness(4) blur(6px); opacity: 0; transform: translateY(-60px) scale(.9); } }
.fk-motes i { width: 6px; height: 6px; border-radius: 50%; background: #fff6cf; box-shadow: 0 0 9px #ffd96b; animation: fk-rise 2s ease-out; }

/* Explosion: aufblähen, Druckwelle, Trümmer */
.fk-explosion .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-swell .55s .45s ease-in forwards, fk-hide .01s 1s forwards; }
@keyframes fk-swell { 0% { transform: scale(1); filter: none; } 60% { transform: scale(1.12, 1.07); filter: brightness(1.5) sepia(1) saturate(4) hue-rotate(-25deg); } 100% { transform: scale(1.28); filter: brightness(3.2); } }
.fk-explosion .fk-shard { animation: fk-blast 1.4s 1s cubic-bezier(.1, .8, .3, 1) both; }
@keyframes fk-blast { 0% { opacity: 1; transform: none; filter: brightness(2) sepia(1) saturate(3) hue-rotate(-20deg); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 2.3), calc(var(--dy) * 2.3)) rotate(calc(var(--rot) * 4)); filter: brightness(.25); } }
.fk-shockwave { position: absolute; inset: 0; pointer-events: none; }
.fk-shockwave i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 7px solid rgba(255, 224, 150, .95); box-shadow: 0 0 30px rgba(255, 140, 40, .85), inset 0 0 22px rgba(255, 180, 80, .6); opacity: 0; animation: fk-wave .9s 1s ease-out forwards; }
.fk-shockwave i + i { animation-delay: 1.14s; border-width: 3px; }
@keyframes fk-wave { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(13); } }
.fk-explosion .fk-flash { animation: fk-flash .45s .3s ease-out both, fk-flash2 .35s 1s ease-out both; }
@keyframes fk-flash2 { 0% { opacity: 0; } 10% { opacity: .5; background: #ffd08a; } 100% { opacity: 0; } }
.fk-explosion .fk-stage { animation: fx-shake-xy .6s 1s ease-in-out; }
.fk-embers i { width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 7px #ff6a00; animation: fk-burst 1.3s cubic-bezier(.1, .8, .3, 1); }
@keyframes fk-burst { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s)); } 8% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 5), calc(var(--y) * 5 + 30px)) scale(calc(var(--s) * .4)); } }

/* Ranken: Ranken wachsen hoch und ziehen den Gegner in den Boden */
.fk-vines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.fk-vines path { fill: none; stroke: #3e8a2c; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 2px #0b2a06); animation: fk-draw 1s .75s ease-out forwards; }
.fk-vines path:nth-of-type(2) { animation-delay: .85s; }
.fk-vines path:nth-of-type(3) { animation-delay: .95s; stroke-width: 5; }
.fk-vines path:nth-of-type(n+4) { stroke-width: 3.5; animation-delay: 1.05s; }
.fk-leafset ellipse { fill: #63c043; stroke: #2a6a1c; stroke-width: .8; opacity: 0; animation: fk-show .3s 1.45s forwards; }
.fk-ranken .fk-art, .fk-ranken .fk-vines { animation: fk-pulldown 1.3s 1.75s cubic-bezier(.6, 0, .9, .6) forwards; }
.fk-ranken .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-pulldown 1.3s 1.75s cubic-bezier(.6, 0, .9, .6) forwards; }
@keyframes fk-pulldown { 0% { transform: none; clip-path: inset(-10% -10% 0 -10%); } 100% { transform: translateY(85%); clip-path: inset(-10% -10% 85% -10%); filter: brightness(.45); } }
.fk-leaves i { width: 10px; height: 5px; border-radius: 50%; background: #6cc04a; animation: fk-flutter 1.8s ease-in; }
@keyframes fk-flutter { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } 50% { transform: translate(var(--x), 60px) rotate(180deg); } 100% { opacity: 0; transform: translate(calc(var(--x) * -1), 140px) rotate(400deg); } }

/* Versinken: im Morast untergehen, Blasen und Wellenringe */
.fk-versinken .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-sink 1.9s 1s cubic-bezier(.5, 0, .8, .7) forwards; }
@keyframes fk-sink {
  0% { transform: none; clip-path: inset(-10% -10% 0 -10%); }
  15% { transform: translateY(5%) rotate(-3deg); clip-path: inset(-10% -10% 5% -10%); }
  100% { transform: translateY(88%) rotate(4deg); clip-path: inset(-10% -10% 88% -10%); filter: brightness(.5) sepia(.6); }
}
.fk-versinken .fk-puddle { left: -8%; right: -8%; bottom: -6%; height: 20%; background: radial-gradient(ellipse, #9a7444, #6a4a26 45%, #3d2a15 62%, rgba(40, 26, 10, 0) 72%); box-shadow: 0 0 24px rgba(160, 120, 70, .25); filter: none; animation: fk-grow .7s .8s ease-out both; }
.fk-ripples { position: absolute; inset: 0; pointer-events: none; }
.fk-ripples i { position: absolute; left: 50%; bottom: 2%; width: 70px; height: 16px; margin-left: -35px; border-radius: 50%; border: 2px solid rgba(214, 184, 130, .75); opacity: 0; animation: fk-ripple 1.3s 1.3s ease-out infinite; }
.fk-ripples i:nth-child(2) { animation-delay: 1.75s; }
.fk-ripples i:nth-child(3) { animation-delay: 2.2s; }
@keyframes fk-ripple { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.4); } }
.fk-mudbubbles i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #c19a66; background: rgba(110, 80, 40, .4); animation: fk-pop 1.2s ease-out; }
@keyframes fk-pop { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(var(--s)); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(calc(var(--s) * 1.7)); } }

/* --------------------------------------------------------------------------
   Hintergründe (Einstellungen → Hintergründe). Die Ebene #bg-layer liegt hinter allem.
   -------------------------------------------------------------------------- */
body.has-bgx { background: transparent; }
.bg-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background-repeat: no-repeat; }
.bg-layer > i { position: absolute; inset: 0; display: block; background-repeat: repeat; will-change: transform; }
.bg-layer::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(0, 0, 0, .55) 100%); }
.bg-prev { position: absolute; z-index: 0; }
.bg-prev::after { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .35) 100%); }
.bgx-holz { background: none; }
.bgx-holz::after { display: none; }
.bg-prev.bgx-holz { background-image: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(201, 162, 39, .18), transparent 70%), radial-gradient(ellipse at 50% 120%, rgba(126, 26, 20, .25), transparent 60%), var(--noise), repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px), linear-gradient(180deg, var(--wood) 0%, var(--night) 100%); }
body.bg-still .bg-layer > i, body.motion-reduced .bg-layer > i { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .bg-layer > i { animation: none !important; } }
@keyframes bg-fall { to { transform: translateY(var(--tile)); } }
@keyframes bg-rise { to { transform: translateY(calc(var(--tile) * -1)); } }
@keyframes bg-drift { to { transform: translate(calc(var(--tile) * -1), calc(var(--tile) * -1)); } }
@keyframes bg-slide { to { transform: translateX(-50%); } }
@keyframes bg-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes bg-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.bgx-sternennacht { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cpath d='M0 89 Q100 100 200 114 Q300 120 400 118 Q500 71 600 75 Q700 91 800 137 Q900 150 1000 89 Q1100 137 1200 108 Q1300 121 1400 108 Q1500 121 1600 82 V200 H0Z' fill='%23130f22'/%3E%3Cpath d='M0 157 Q100 168 200 165 Q300 164 400 177 Q500 122 600 175 Q700 177 800 148 Q900 174 1000 159 Q1100 148 1200 127 Q1300 153 1400 135 Q1500 121 1600 154 V200 H0Z' fill='%23080610'/%3E%3Cpath d='M760 150 l26 -40 l26 40z' fill='%23080610'/%3E%3Ccircle cx='786' cy='150' r='5' fill='%23ffb347' opacity='.85'/%3E%3C/svg%3E"), radial-gradient(ellipse 120% 30% at 30% 35%, rgba(150, 140, 220, .14), transparent 70%), linear-gradient(180deg, #050816 0%, #12143a 55%, #2a1c30 85%, #1c120b 100%); background-size: 100% 26%, 100% 100%, 100% 100%; background-position: bottom, center, center; }
.bgx-sternennacht .bl1 { inset: 0 0 20% 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='118' cy='146' r='1.2' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='132' cy='153' r='0.6' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='164' cy='206' r='0.5' fill='%23ffffff' opacity='0.48'/%3E%3Ccircle cx='24' cy='211' r='1.0' fill='%23ffffff' opacity='0.33'/%3E%3Ccircle cx='255' cy='251' r='1.0' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='41' cy='4' r='0.9' fill='%23ffffff' opacity='0.34'/%3E%3Ccircle cx='49' cy='63' r='0.4' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='115' cy='219' r='0.9' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='130' cy='172' r='0.8' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='259' cy='259' r='1.2' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='82' cy='60' r='0.7' fill='%23ffffff' opacity='0.34'/%3E%3Ccircle cx='199' cy='104' r='1.2' fill='%23ffffff' opacity='0.53'/%3E%3Ccircle cx='249' cy='220' r='0.4' fill='%23ffffff' opacity='0.43'/%3E%3Ccircle cx='237' cy='122' r='1.3' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='19' cy='164' r='1.1' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='23' cy='86' r='1.3' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='31' cy='64' r='0.5' fill='%23ffffff' opacity='0.34'/%3E%3Ccircle cx='207' cy='46' r='0.9' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='50' cy='190' r='0.5' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='30' cy='109' r='0.6' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='252' cy='209' r='0.7' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='55' cy='103' r='1.2' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='26' cy='257' r='0.6' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='201' cy='86' r='0.7' fill='%23ffffff' opacity='0.34'/%3E%3Ccircle cx='23' cy='152' r='0.6' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='97' cy='118' r='1.3' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='149' cy='225' r='0.6' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='236' cy='213' r='0.6' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='192' cy='245' r='0.6' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='229' cy='157' r='0.8' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='10' cy='250' r='0.6' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='67' cy='214' r='0.9' fill='%23ffffff' opacity='0.48'/%3E%3Ccircle cx='46' cy='187' r='0.5' fill='%23ffffff' opacity='0.44'/%3E%3Ccircle cx='145' cy='222' r='1.0' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='239' cy='53' r='0.4' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='116' cy='16' r='0.6' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='149' cy='34' r='0.7' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='255' cy='171' r='1.0' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='36' cy='9' r='0.4' fill='%23ffffff' opacity='0.85'/%3E%3Ccircle cx='182' cy='250' r='0.4' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='125' cy='190' r='0.7' fill='%23ffffff' opacity='0.90'/%3E%3Ccircle cx='20' cy='142' r='1.1' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='192' cy='183' r='1.1' fill='%23ffffff' opacity='0.85'/%3E%3Ccircle cx='91' cy='178' r='1.2' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='108' cy='206' r='1.2' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='162' cy='99' r='0.9' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='21' cy='166' r='1.3' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='189' cy='101' r='1.1' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='115' cy='218' r='0.5' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='8' cy='156' r='0.8' fill='%23ffffff' opacity='0.44'/%3E%3Ccircle cx='182' cy='129' r='1.0' fill='%23ffffff' opacity='0.85'/%3E%3Ccircle cx='67' cy='3' r='0.7' fill='%23ffffff' opacity='0.71'/%3E%3Ccircle cx='53' cy='44' r='1.2' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='115' cy='232' r='0.7' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='52' cy='112' r='1.1' fill='%23ffffff' opacity='0.85'/%3E%3Ccircle cx='229' cy='100' r='0.9' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='35' cy='129' r='1.2' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='185' cy='247' r='0.6' fill='%23ffffff' opacity='0.40'/%3E%3Ccircle cx='117' cy='72' r='0.6' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='163' cy='128' r='0.7' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='255' cy='118' r='0.5' fill='%23ffffff' opacity='0.32'/%3E%3Ccircle cx='227' cy='11' r='1.0' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='80' cy='206' r='0.4' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='118' cy='6' r='1.1' fill='%23ffffff' opacity='0.44'/%3E%3Ccircle cx='37' cy='12' r='1.0' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='164' cy='170' r='1.1' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='178' cy='52' r='0.8' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='3' cy='123' r='1.0' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='71' cy='90' r='1.0' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='160' cy='197' r='0.8' fill='%23ffffff' opacity='0.78'/%3E%3C/svg%3E"); background-size: 260px 260px; }
.bgx-sternennacht .bl2 { inset: 0 0 25% 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Ccircle cx='199' cy='276' r='1.5' fill='%23fff6d8' opacity='0.57'/%3E%3Ccircle cx='5' cy='157' r='0.9' fill='%23fff6d8' opacity='0.91'/%3E%3Ccircle cx='290' cy='253' r='1.3' fill='%23fff6d8' opacity='0.83'/%3E%3Ccircle cx='61' cy='185' r='0.7' fill='%23fff6d8' opacity='0.95'/%3E%3Ccircle cx='25' cy='344' r='0.5' fill='%23fff6d8' opacity='0.84'/%3E%3Ccircle cx='142' cy='170' r='1.8' fill='%23fff6d8' opacity='0.51'/%3E%3Ccircle cx='26' cy='384' r='1.3' fill='%23fff6d8' opacity='0.55'/%3E%3Ccircle cx='415' cy='398' r='0.6' fill='%23fff6d8' opacity='0.71'/%3E%3Ccircle cx='57' cy='131' r='1.5' fill='%23fff6d8' opacity='0.58'/%3E%3Ccircle cx='293' cy='22' r='0.7' fill='%23fff6d8' opacity='0.91'/%3E%3Ccircle cx='168' cy='176' r='1.4' fill='%23fff6d8' opacity='0.74'/%3E%3Ccircle cx='162' cy='13' r='1.6' fill='%23fff6d8' opacity='0.98'/%3E%3Ccircle cx='410' cy='279' r='1.0' fill='%23fff6d8' opacity='0.68'/%3E%3Ccircle cx='290' cy='283' r='0.6' fill='%23fff6d8' opacity='0.62'/%3E%3C/svg%3E"); background-size: 420px 420px; animation: bg-twinkle 4s ease-in-out infinite; }

.bgx-karte { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23e6c47a' stroke-opacity='.22'%3E%3Ccircle cx='100' cy='100' r='92' stroke-width='2'/%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Ccircle cx='100' cy='100' r='30'/%3E%3C/g%3E%3Cg fill='%23e6c47a' fill-opacity='.16'%3E%3Cpath d='M100 8 L112 100 L100 192 L88 100Z'/%3E%3Cpath d='M8 100 L100 88 L192 100 L100 112Z'/%3E%3C/g%3E%3Cg fill='%23e6c47a' fill-opacity='.09'%3E%3Cpath d='M35 35 L106 94 L165 165 L94 106Z'/%3E%3Cpath d='M165 35 L106 106 L35 165 L94 94Z'/%3E%3C/g%3E%3Ctext x='100' y='26' text-anchor='middle' font-family='serif' font-size='16' fill='%23e6c47a' fill-opacity='.35'%3EN%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23e6c47a' stroke-opacity='.10' stroke-width='1.2'%3E%3Cellipse cx='90' cy='110' rx='16' ry='10' transform='rotate(-6 90 110)'/%3E%3Cellipse cx='90' cy='110' rx='33' ry='21' transform='rotate(-6 90 110)'/%3E%3Cellipse cx='90' cy='110' rx='57' ry='38' transform='rotate(16 90 110)'/%3E%3Cellipse cx='90' cy='110' rx='70' ry='48' transform='rotate(-13 90 110)'/%3E%3Cellipse cx='90' cy='110' rx='87' ry='58' transform='rotate(-17 90 110)'/%3E%3Cellipse cx='300' cy='260' rx='21' ry='14' transform='rotate(18 300 260)'/%3E%3Cellipse cx='300' cy='260' rx='38' ry='22' transform='rotate(-11 300 260)'/%3E%3Cellipse cx='300' cy='260' rx='55' ry='37' transform='rotate(21 300 260)'/%3E%3Cellipse cx='300' cy='260' rx='75' ry='46' transform='rotate(6 300 260)'/%3E%3Cellipse cx='300' cy='260' rx='91' ry='60' transform='rotate(-19 300 260)'/%3E%3Cellipse cx='330' cy='60' rx='18' ry='10' transform='rotate(26 330 60)'/%3E%3Cellipse cx='330' cy='60' rx='39' ry='24' transform='rotate(-12 330 60)'/%3E%3Cellipse cx='330' cy='60' rx='57' ry='36' transform='rotate(23 330 60)'/%3E%3Cellipse cx='330' cy='60' rx='75' ry='48' transform='rotate(-5 330 60)'/%3E%3Cellipse cx='330' cy='60' rx='91' ry='60' transform='rotate(-20 330 60)'/%3E%3C/g%3E%3Cpath d='M0 330 C80 300 140 360 220 320 S340 300 400 330' fill='none' stroke='%237fb0c9' stroke-opacity='.12' stroke-width='3'/%3E%3C/svg%3E"), repeating-linear-gradient(0deg, rgba(230, 196, 122, .05) 0 1px, transparent 1px 140px), repeating-linear-gradient(90deg, rgba(230, 196, 122, .05) 0 1px, transparent 1px 140px), var(--noise), radial-gradient(ellipse at 50% 30%, #4a3520, #2a1c0f 70%, #160e07); background-size: min(46vw, 520px) auto, 400px 400px, auto, auto, 220px 220px, 100% 100%; background-position: right 4% bottom 6%, 0 0, 0 0, 0 0, 0 0, center; background-repeat: no-repeat, repeat, repeat, repeat, repeat, no-repeat; }

.bgx-burg { background-image: radial-gradient(circle at 6% 28%, rgba(255, 150, 60, .32), transparent 22%), radial-gradient(circle at 94% 28%, rgba(255, 150, 60, .32), transparent 22%), linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg stroke='%23120e0b' stroke-width='3' fill='%23332c26'%3E%3Crect x='1' y='1' width='78' height='38' rx='3'/%3E%3Crect x='81' y='1' width='78' height='38' rx='3' fill='%232d2722'/%3E%3Crect x='-39' y='41' width='78' height='38' rx='3' fill='%23302925'/%3E%3Crect x='41' y='41' width='78' height='38' rx='3' fill='%23362f29'/%3E%3Crect x='121' y='41' width='78' height='38' rx='3' fill='%23302925'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.03'%3E%3Crect x='6' y='5' width='60' height='6'/%3E%3Crect x='86' y='5' width='50' height='5'/%3E%3Crect x='46' y='45' width='55' height='6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%, 100% 100%, 100% 100%, 160px 80px; background-repeat: no-repeat, no-repeat, no-repeat, repeat; }
.bgx-burg .bl1 { background: radial-gradient(circle at 6% 28%, rgba(255, 190, 90, .22), transparent 14%), radial-gradient(circle at 94% 28%, rgba(255, 190, 90, .22), transparent 14%); animation: bg-pulse 2.6s ease-in-out infinite; }

.bgx-wueste { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q160 142 320 147 Q480 104 640 128 Q800 158 960 156 Q1120 130 1280 131 Q1440 85 1600 106 V300 H0Z' fill='%237a4219'/%3E%3Cpath d='M0 222 Q133 157 267 165 Q400 168 533 225 Q667 201 800 163 Q933 217 1067 179 Q1200 222 1333 171 Q1467 197 1600 177 V300 H0Z' fill='%23552d10'/%3E%3Cpath d='M0 271 Q114 270 229 272 Q343 255 457 229 Q571 252 686 246 Q800 235 914 232 Q1029 236 1143 247 Q1257 226 1371 248 Q1486 261 1600 229 V300 H0Z' fill='%23331a08'/%3E%3C/svg%3E"), radial-gradient(circle at 72% 30%, #ffe2a0 0 4%, rgba(255, 190, 90, .55) 6%, rgba(255, 140, 60, .12) 20%, transparent 40%), linear-gradient(180deg, #2a1220 0%, #6a2c1c 35%, #a2531f 60%, #5a2e12 100%); background-size: 100% 45%, 100% 100%, 100% 100%; background-position: bottom, center, center; }
.bgx-wueste .bl1 { inset: 0 -100% 0 0; background: linear-gradient(90deg, transparent, rgba(255, 210, 150, .06) 25%, transparent 50%, rgba(255, 210, 150, .05) 75%, transparent); background-size: 50% 100%; animation: bg-slide 40s linear infinite; }

.bgx-frostwald { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cpath d='M-20 188 L1 231 L-11 229 L10 267 L-5 264 L18 293 L-17 293 V300 H-23 V293 L-58 293 L-35 264 L-50 267 L-29 229 L-41 231Z M8 139 L38 200 L22 197 L52 252 L30 248 L63 290 L13 290 V300 H4 V290 L-47 290 L-14 248 L-36 252 L-5 197 L-22 200Z M48 172 L72 221 L59 218 L83 262 L65 259 L91 292 L51 292 V300 H44 V292 L4 292 L31 259 L13 262 L37 218 L24 221Z M76 160 L102 213 L88 210 L114 258 L95 255 L124 292 L80 292 V300 H72 V292 L29 292 L57 255 L38 258 L64 210 L50 213Z M117 171 L141 220 L128 217 L152 261 L135 259 L161 292 L121 292 V300 H114 V292 L73 292 L100 259 L82 261 L106 217 L93 220Z M158 104 L195 178 L175 175 L211 241 L185 237 L225 288 L163 288 V300 H153 V288 L91 288 L131 237 L105 241 L141 175 L121 178Z M187 120 L220 189 L202 185 L236 246 L211 243 L248 289 L192 289 V300 H182 V289 L126 289 L162 243 L138 246 L172 185 L153 189Z M222 136 L252 199 L236 195 L266 251 L244 248 L277 290 L226 290 V300 H217 V290 L166 290 L200 248 L177 251 L208 195 L191 199Z M268 178 L291 224 L278 222 L301 263 L284 261 L309 293 L271 293 V300 H264 V293 L226 293 L251 261 L235 263 L257 222 L245 224Z M294 68 L338 156 L314 151 L357 230 L326 226 L373 286 L300 286 V300 H288 V286 L215 286 L263 226 L231 230 L274 151 L251 156Z M328 164 L354 216 L340 213 L365 259 L347 257 L374 292 L332 292 V300 H325 V292 L282 292 L310 257 L291 259 L317 213 L303 216Z M361 143 L390 202 L374 199 L404 253 L382 250 L414 291 L365 291 V300 H357 V291 L307 291 L339 250 L318 253 L347 199 L331 202Z M406 163 L432 215 L418 212 L443 259 L425 256 L453 292 L410 292 V300 H402 V292 L359 292 L387 256 L369 259 L394 212 L380 215Z M436 114 L471 185 L452 181 L487 244 L462 240 L500 289 L441 289 V300 H431 V289 L373 289 L411 240 L386 244 L420 181 L401 185Z M473 66 L517 155 L493 150 L537 230 L505 225 L553 286 L480 286 V300 H467 V286 L394 286 L441 225 L410 230 L453 150 L429 155Z M516 144 L545 203 L529 200 L558 253 L537 250 L569 291 L520 291 V300 H512 V291 L463 291 L495 250 L473 253 L503 200 L487 203Z M546 81 L587 164 L565 160 L606 234 L576 230 L620 287 L552 287 V300 H540 V287 L472 287 L516 230 L487 234 L527 160 L505 164Z M592 186 L613 229 L602 227 L623 266 L607 264 L631 293 L595 293 V300 H589 V293 L553 293 L576 264 L561 266 L582 227 L571 229Z M633 77 L674 162 L651 157 L693 233 L663 229 L708 287 L639 287 V300 H626 V287 L557 287 L602 229 L572 233 L614 157 L591 162Z M672 162 L697 214 L683 211 L709 258 L690 256 L719 292 L675 292 V300 H668 V292 L625 292 L653 256 L634 258 L660 211 L646 214Z M713 95 L752 173 L731 169 L769 239 L741 234 L783 288 L719 288 V300 H708 V288 L644 288 L686 234 L658 239 L696 169 L675 173Z M743 107 L780 180 L760 176 L796 242 L770 238 L809 288 L749 288 V300 H738 V288 L678 288 L717 238 L691 242 L727 176 L707 180Z M774 185 L795 228 L784 226 L805 265 L789 263 L813 293 L777 293 V300 H771 V293 L735 293 L758 263 L742 265 L764 226 L752 228Z M806 147 L835 205 L820 202 L848 254 L827 251 L859 291 L811 291 V300 H802 V291 L754 291 L786 251 L765 254 L793 202 L778 205Z M840 106 L877 180 L857 176 L893 242 L867 238 L906 288 L846 288 V300 H835 V288 L774 288 L814 238 L788 242 L824 176 L804 180Z M883 65 L927 154 L903 150 L947 230 L915 225 L963 286 L890 286 V300 H877 V286 L803 286 L851 225 L819 230 L863 150 L839 154Z M929 61 L973 152 L949 147 L994 228 L961 223 L1010 286 L935 286 V300 H922 V286 L847 286 L896 223 L864 228 L908 147 L884 152Z M970 150 L998 207 L983 204 L1011 255 L991 252 L1021 291 L975 291 V300 H966 V291 L920 291 L950 252 L930 255 L958 204 L942 207Z M1000 109 L1036 182 L1016 178 L1052 243 L1026 239 L1065 289 L1005 289 V300 H995 V289 L935 289 L974 239 L948 243 L984 178 L964 182Z M1037 102 L1074 177 L1054 173 L1091 241 L1064 237 L1104 288 L1042 288 V300 H1032 V288 L970 288 L1010 237 L983 241 L1020 173 L1000 177Z M1065 165 L1090 216 L1076 214 L1102 259 L1083 257 L1111 292 L1068 292 V300 H1061 V292 L1019 292 L1046 257 L1028 259 L1053 214 L1040 216Z M1109 112 L1144 183 L1125 180 L1160 244 L1135 240 L1173 289 L1114 289 V300 H1104 V289 L1045 289 L1084 240 L1058 244 L1093 180 L1074 183Z M1149 178 L1172 224 L1159 222 L1182 263 L1166 261 L1191 293 L1152 293 V300 H1146 V293 L1107 293 L1132 261 L1116 263 L1139 222 L1126 224Z M1183 72 L1226 158 L1202 154 L1245 232 L1214 227 L1261 286 L1189 286 V300 H1177 V286 L1105 286 L1152 227 L1121 232 L1164 154 L1140 158Z M1222 61 L1267 152 L1242 147 L1287 228 L1255 224 L1303 286 L1229 286 V300 H1216 V286 L1141 286 L1190 224 L1157 228 L1202 147 L1177 152Z M1252 131 L1284 195 L1266 192 L1298 249 L1275 246 L1310 290 L1257 290 V300 H1247 V290 L1194 290 L1229 246 L1206 249 L1238 192 L1220 195Z M1294 132 L1325 196 L1308 193 L1340 250 L1317 246 L1351 290 L1299 290 V300 H1289 V290 L1237 290 L1271 246 L1248 250 L1280 193 L1263 196Z M1336 117 L1370 187 L1351 183 L1386 245 L1361 241 L1398 289 L1341 289 V300 H1331 V289 L1274 289 L1311 241 L1286 245 L1320 183 L1302 187Z M1364 177 L1387 224 L1375 221 L1398 263 L1381 261 L1406 293 L1367 293 V300 H1361 V293 L1322 293 L1347 261 L1331 263 L1354 221 L1341 224Z M1410 174 L1433 222 L1420 220 L1444 262 L1427 260 L1452 292 L1413 292 V300 H1406 V292 L1367 292 L1393 260 L1376 262 L1399 220 L1386 222Z M1440 146 L1468 205 L1453 202 L1481 254 L1461 251 L1492 291 L1444 291 V300 H1436 V291 L1387 291 L1419 251 L1398 254 L1427 202 L1411 205Z M1480 79 L1521 163 L1499 159 L1540 234 L1510 229 L1555 287 L1486 287 V300 H1474 V287 L1405 287 L1450 229 L1420 234 L1461 159 L1439 163Z M1515 125 L1548 192 L1530 188 L1563 248 L1539 244 L1575 290 L1520 290 V300 H1511 V290 L1456 290 L1492 244 L1468 248 L1501 188 L1483 192Z M1557 154 L1585 209 L1570 206 L1597 256 L1577 253 L1607 291 L1561 291 V300 H1553 V291 L1508 291 L1537 253 L1517 256 L1545 206 L1530 209Z M1591 110 L1626 182 L1607 179 L1642 243 L1616 239 L1655 289 L1596 289 V300 H1586 V289 L1526 289 L1565 239 L1539 243 L1575 179 L1555 182Z ' fill='%231a2a3e'/%3E%3Cpath d='M-20 222 L-5 252 L-13 250 L1 277 L-9 275 L6 295 L-18 295 V300 H-22 V295 L-46 295 L-31 275 L-41 277 L-27 250 L-35 252Z M6 200 L25 238 L14 236 L33 270 L19 268 L40 294 L9 294 V300 H3 V294 L-28 294 L-8 268 L-21 270 L-3 236 L-13 238Z M44 180 L66 226 L54 223 L77 264 L60 262 L85 293 L47 293 V300 H41 V293 L3 293 L28 262 L12 264 L34 223 L22 226Z M79 220 L94 250 L86 249 L101 276 L90 274 L106 295 L81 295 V300 H77 V295 L52 295 L68 274 L57 276 L72 249 L64 250Z M110 146 L139 204 L123 201 L152 254 L131 251 L163 291 L114 291 V300 H106 V291 L58 291 L89 251 L68 254 L97 201 L81 204Z M142 136 L172 198 L156 195 L186 251 L164 247 L198 290 L146 290 V300 H137 V290 L86 290 L119 247 L97 251 L128 195 L111 198Z M179 193 L199 234 L189 231 L209 268 L194 266 L216 294 L182 294 V300 H177 V294 L143 294 L165 266 L150 268 L170 231 L159 234Z M201 154 L229 210 L214 207 L241 256 L221 253 L251 291 L205 291 V300 H198 V291 L152 291 L182 253 L162 256 L189 207 L174 210Z M226 229 L239 256 L232 255 L245 279 L235 277 L250 296 L228 296 V300 H224 V296 L202 296 L216 277 L206 279 L220 255 L212 256Z M261 146 L290 204 L274 201 L303 254 L282 251 L313 291 L265 291 V300 H257 V291 L208 291 L240 251 L219 254 L248 201 L232 204Z M298 135 L329 197 L312 194 L343 250 L320 247 L354 290 L302 290 V300 H293 V290 L242 290 L275 247 L253 250 L284 194 L267 197Z M324 222 L338 252 L330 250 L345 277 L334 275 L350 295 L326 295 V300 H321 V295 L297 295 L313 275 L302 277 L317 250 L309 252Z M348 132 L379 196 L362 193 L393 250 L371 246 L405 290 L352 290 V300 H343 V290 L291 290 L325 246 L302 250 L333 193 L316 196Z M372 214 L388 247 L379 245 L395 274 L383 272 L401 295 L374 295 V300 H369 V295 L343 295 L360 272 L348 274 L364 245 L356 247Z M394 225 L408 254 L401 252 L415 278 L404 276 L420 296 L396 296 V300 H392 V296 L369 296 L384 276 L374 278 L388 252 L380 254Z M417 195 L437 235 L426 233 L445 268 L431 266 L453 294 L420 294 V300 H414 V294 L381 294 L403 266 L388 268 L408 233 L397 235Z M442 199 L461 237 L450 235 L469 270 L455 268 L476 294 L445 294 V300 H439 V294 L407 294 L428 268 L414 270 L433 235 L423 237Z M480 213 L497 246 L488 244 L504 274 L492 272 L510 295 L483 295 V300 H478 V295 L451 295 L469 272 L457 274 L473 244 L464 246Z M517 156 L544 211 L529 208 L556 257 L537 254 L566 291 L521 291 V300 H513 V291 L468 291 L498 254 L478 257 L505 208 L490 211Z M549 172 L573 221 L560 218 L584 262 L567 259 L593 292 L553 292 V300 H546 V292 L506 292 L532 259 L515 262 L539 218 L526 221Z M585 171 L609 220 L596 218 L620 261 L603 259 L629 292 L589 292 V300 H582 V292 L541 292 L568 259 L550 261 L574 218 L561 220Z M611 197 L631 236 L620 234 L639 269 L625 267 L646 294 L614 294 V300 H609 V294 L576 294 L597 267 L583 269 L603 234 L592 236Z M638 190 L658 232 L647 230 L668 267 L653 265 L675 293 L641 293 V300 H635 V293 L600 293 L623 265 L608 267 L628 230 L617 232Z M678 187 L699 230 L687 228 L708 266 L693 264 L716 293 L681 293 V300 H674 V293 L639 293 L662 264 L647 266 L668 228 L656 230Z M701 182 L723 227 L711 225 L733 265 L717 262 L741 293 L704 293 V300 H698 V293 L661 293 L685 262 L669 265 L691 225 L679 227Z M737 185 L759 229 L747 227 L769 266 L753 263 L776 293 L741 293 V300 H734 V293 L698 293 L722 263 L706 266 L728 227 L716 229Z M772 221 L787 251 L779 249 L794 276 L783 275 L799 295 L774 295 V300 H770 V295 L745 295 L761 275 L751 276 L765 249 L757 251Z M795 164 L821 216 L807 213 L832 259 L814 256 L841 292 L799 292 V300 H791 V292 L749 292 L777 256 L758 259 L784 213 L770 216Z M818 200 L837 238 L827 236 L845 270 L832 268 L852 294 L821 294 V300 H815 V294 L784 294 L804 268 L791 270 L810 236 L799 238Z M847 211 L864 245 L855 243 L871 273 L859 271 L877 295 L849 295 V300 H845 V295 L817 295 L835 271 L823 273 L839 243 L830 245Z M870 229 L883 256 L876 255 L889 279 L879 277 L894 296 L872 296 V300 H868 V296 L846 296 L860 277 L850 279 L864 255 L856 256Z M909 161 L935 214 L921 211 L947 258 L928 256 L956 292 L913 292 V300 H905 V292 L862 292 L890 256 L871 258 L897 211 L883 214Z M948 181 L970 226 L958 224 L980 264 L964 262 L988 293 L951 293 V300 H945 V293 L907 293 L932 262 L915 264 L938 224 L926 226Z M987 144 L1016 203 L1000 200 L1030 253 L1008 250 L1040 291 L991 291 V300 H983 V291 L934 291 L966 250 L945 253 L974 200 L958 203Z M1020 177 L1043 224 L1031 222 L1054 263 L1037 261 L1062 293 L1024 293 V300 H1017 V293 L979 293 L1004 261 L987 263 L1010 222 L997 224Z M1051 207 L1069 243 L1059 241 L1077 272 L1064 270 L1083 294 L1054 294 V300 H1049 V294 L1020 294 L1039 270 L1026 272 L1043 241 L1034 243Z M1080 158 L1107 212 L1092 209 L1119 257 L1099 254 L1128 291 L1084 291 V300 H1076 V291 L1032 291 L1061 254 L1041 257 L1068 209 L1054 212Z M1106 145 L1135 204 L1119 201 L1148 254 L1127 250 L1158 291 L1110 291 V300 H1101 V291 L1053 291 L1085 250 L1063 254 L1092 201 L1077 204Z M1137 170 L1161 219 L1148 217 L1172 261 L1155 258 L1181 292 L1140 292 V300 H1133 V292 L1092 292 L1119 258 L1101 261 L1126 217 L1112 219Z M1174 165 L1199 217 L1185 214 L1210 260 L1192 257 L1219 292 L1177 292 V300 H1170 V292 L1128 292 L1155 257 L1137 260 L1162 214 L1148 217Z M1198 205 L1216 241 L1206 239 L1224 272 L1211 270 L1230 294 L1201 294 V300 H1195 V294 L1166 294 L1185 270 L1172 272 L1190 239 L1180 241Z M1220 227 L1234 255 L1226 253 L1240 278 L1230 277 L1245 296 L1222 296 V300 H1218 V296 L1195 296 L1210 277 L1200 278 L1214 253 L1206 255Z M1259 171 L1283 220 L1270 217 L1294 261 L1277 259 L1303 292 L1263 292 V300 H1256 V292 L1215 292 L1242 259 L1224 261 L1248 217 L1235 220Z M1299 152 L1326 208 L1311 205 L1339 256 L1319 253 L1349 291 L1303 291 V300 H1295 V291 L1248 291 L1279 253 L1258 256 L1286 205 L1271 208Z M1326 133 L1358 197 L1341 193 L1372 250 L1349 247 L1383 290 L1331 290 V300 H1322 V290 L1270 290 L1304 247 L1281 250 L1312 193 L1295 197Z M1365 184 L1387 228 L1375 226 L1396 265 L1381 263 L1404 293 L1368 293 V300 H1362 V293 L1326 293 L1349 263 L1333 265 L1355 226 L1343 228Z M1388 198 L1407 237 L1397 235 L1416 269 L1402 267 L1423 294 L1391 294 V300 H1386 V294 L1354 294 L1375 267 L1361 269 L1380 235 L1369 237Z M1413 193 L1433 234 L1423 232 L1442 268 L1428 266 L1450 294 L1416 294 V300 H1411 V294 L1377 294 L1399 266 L1384 268 L1404 232 L1394 234Z M1437 159 L1463 212 L1449 210 L1475 258 L1456 255 L1485 292 L1441 292 V300 H1433 V292 L1389 292 L1418 255 L1398 258 L1425 210 L1411 212Z M1477 209 L1494 244 L1484 242 L1501 273 L1489 271 L1508 295 L1479 295 V300 H1474 V295 L1446 295 L1464 271 L1452 273 L1469 242 L1460 244Z M1513 172 L1537 220 L1524 218 L1548 261 L1530 259 L1556 292 L1516 292 V300 H1509 V292 L1469 292 L1495 259 L1478 261 L1502 218 L1489 220Z M1543 139 L1573 200 L1557 197 L1587 252 L1565 249 L1598 290 L1548 290 V300 H1539 V290 L1489 290 L1521 249 L1500 252 L1530 197 L1513 200Z M1572 148 L1601 206 L1585 203 L1613 254 L1593 251 L1624 291 L1576 291 V300 H1568 V291 L1520 291 L1551 251 L1531 254 L1559 203 L1544 206Z M1595 133 L1626 197 L1609 193 L1640 250 L1617 247 L1651 290 L1599 290 V300 H1590 V290 L1538 290 L1572 247 L1549 250 L1581 193 L1564 197Z M1620 230 L1633 256 L1626 255 L1639 279 L1630 277 L1644 296 L1622 296 V300 H1618 V296 L1596 296 L1610 277 L1601 279 L1614 255 L1607 256Z ' fill='%230b1420'/%3E%3Crect y='288' width='1600' height='12' fill='%23dfe9f3' opacity='.25'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 0%, rgba(160, 200, 255, .18), transparent 60%), linear-gradient(180deg, #0b1626 0%, #1b3048 55%, #2b4560 80%, #0d1824 100%); background-size: 100% 42%, 100% 100%, 100% 100%; background-position: bottom, center, center; }
.bgx-frostwald .bl1 { --tile: 240px; inset: -240px 0 0 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='91' cy='55' r='0.7' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='139' cy='166' r='1.5' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='176' cy='138' r='2.0' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='201' cy='105' r='0.7' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='174' cy='40' r='1.7' fill='%23ffffff' opacity='0.78'/%3E%3Ccircle cx='14' cy='188' r='0.5' fill='%23ffffff' opacity='0.89'/%3E%3Ccircle cx='202' cy='52' r='1.9' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='30' cy='161' r='0.6' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='165' cy='235' r='0.5' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='149' cy='146' r='0.8' fill='%23ffffff' opacity='0.90'/%3E%3Ccircle cx='203' cy='72' r='0.7' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='98' cy='159' r='1.4' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='5' cy='32' r='1.3' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='102' cy='179' r='1.5' fill='%23ffffff' opacity='0.90'/%3E%3Ccircle cx='157' cy='77' r='0.7' fill='%23ffffff' opacity='0.53'/%3E%3Ccircle cx='10' cy='207' r='2.1' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='26' cy='159' r='0.7' fill='%23ffffff' opacity='0.90'/%3E%3Ccircle cx='157' cy='180' r='1.6' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='204' cy='231' r='0.9' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='176' cy='163' r='1.2' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='232' cy='66' r='0.8' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='66' cy='215' r='1.1' fill='%23ffffff' opacity='0.92'/%3E%3Ccircle cx='91' cy='212' r='1.9' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='51' cy='39' r='0.5' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='160' cy='15' r='0.9' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='37' cy='79' r='0.9' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='28' cy='239' r='1.6' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='133' cy='119' r='2.3' fill='%23ffffff' opacity='0.90'/%3E%3C/svg%3E"); background-size: 240px 240px; animation: bg-fall 9s linear infinite; }
.bgx-frostwald .bl2 { --tile: 360px; inset: -360px 0 0 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Ccircle cx='230' cy='9' r='1.3' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='265' cy='244' r='3.3' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='152' cy='11' r='1.1' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='10' cy='72' r='2.5' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='79' cy='212' r='3.0' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='290' cy='251' r='1.5' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='345' cy='121' r='0.7' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='305' cy='217' r='3.0' fill='%23ffffff' opacity='0.89'/%3E%3Ccircle cx='193' cy='350' r='1.6' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='299' cy='223' r='3.2' fill='%23ffffff' opacity='0.83'/%3E%3C/svg%3E"); background-size: 360px 360px; animation: bg-fall 6s linear infinite; }

.bgx-schmiede { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M110 70 H300 C300 92 276 100 250 102 L240 130 H270 V150 H130 V130 H160 L150 102 C120 100 90 92 70 74 Z' fill='%23080504'/%3E%3Crect x='60' y='150' width='280' height='50' fill='%23080504'/%3E%3C/svg%3E"), radial-gradient(ellipse 60% 35% at 50% 100%, rgba(255, 110, 30, .55), rgba(180, 40, 10, .25) 45%, transparent 75%), linear-gradient(180deg, #0b0605 0%, #1c0c07 55%, #3a1408 100%); background-size: min(38vw, 420px) auto, 100% 100%, 100% 100%; background-position: center bottom, center, center; }
.bgx-schmiede .bl1 { --tile: 260px; inset: 0 0 -260px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='63' cy='131' r='0.7' fill='%23ffb347' opacity='0.93'/%3E%3Ccircle cx='60' cy='144' r='1.9' fill='%23ffb347' opacity='0.76'/%3E%3Ccircle cx='252' cy='190' r='1.3' fill='%23ffb347' opacity='0.85'/%3E%3Ccircle cx='152' cy='94' r='2.0' fill='%23ffb347' opacity='0.76'/%3E%3Ccircle cx='256' cy='222' r='0.4' fill='%23ffb347' opacity='0.70'/%3E%3Ccircle cx='124' cy='212' r='0.7' fill='%23ffb347' opacity='0.85'/%3E%3Ccircle cx='95' cy='204' r='1.9' fill='%23ffb347' opacity='0.90'/%3E%3Ccircle cx='50' cy='198' r='1.1' fill='%23ffb347' opacity='0.93'/%3E%3Ccircle cx='122' cy='236' r='2.0' fill='%23ffb347' opacity='0.93'/%3E%3Ccircle cx='215' cy='213' r='1.3' fill='%23ffb347' opacity='0.67'/%3E%3Ccircle cx='256' cy='121' r='0.4' fill='%23ffb347' opacity='0.77'/%3E%3Ccircle cx='108' cy='52' r='1.9' fill='%23ffb347' opacity='0.64'/%3E%3Ccircle cx='235' cy='143' r='0.7' fill='%23ffb347' opacity='0.74'/%3E%3Ccircle cx='117' cy='31' r='1.6' fill='%23ffb347' opacity='0.86'/%3E%3Ccircle cx='255' cy='216' r='1.7' fill='%23ffb347' opacity='1.00'/%3E%3Ccircle cx='242' cy='167' r='1.3' fill='%23ffb347' opacity='0.81'/%3E%3Ccircle cx='212' cy='241' r='1.7' fill='%23ffb347' opacity='0.94'/%3E%3Ccircle cx='7' cy='109' r='0.5' fill='%23ffb347' opacity='0.83'/%3E%3Ccircle cx='151' cy='146' r='1.8' fill='%23ffb347' opacity='0.69'/%3E%3Ccircle cx='189' cy='152' r='0.7' fill='%23ffb347' opacity='0.99'/%3E%3Ccircle cx='14' cy='121' r='1.3' fill='%23ffb347' opacity='0.84'/%3E%3Ccircle cx='255' cy='143' r='1.8' fill='%23ffb347' opacity='0.72'/%3E%3C/svg%3E"); background-size: 260px 260px; animation: bg-rise 7s linear infinite; }
.bgx-schmiede .bl2 { --tile: 380px; inset: 0 0 -380px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380'%3E%3Ccircle cx='372' cy='21' r='2.3' fill='%23ff7a1a' opacity='0.69'/%3E%3Ccircle cx='358' cy='155' r='2.8' fill='%23ff7a1a' opacity='0.56'/%3E%3Ccircle cx='378' cy='157' r='0.9' fill='%23ff7a1a' opacity='0.64'/%3E%3Ccircle cx='240' cy='13' r='1.4' fill='%23ff7a1a' opacity='0.50'/%3E%3Ccircle cx='26' cy='65' r='1.0' fill='%23ff7a1a' opacity='0.61'/%3E%3Ccircle cx='296' cy='158' r='2.6' fill='%23ff7a1a' opacity='0.86'/%3E%3Ccircle cx='340' cy='360' r='1.9' fill='%23ff7a1a' opacity='0.77'/%3E%3Ccircle cx='335' cy='207' r='0.8' fill='%23ff7a1a' opacity='0.71'/%3E%3Ccircle cx='201' cy='68' r='0.6' fill='%23ff7a1a' opacity='0.57'/%3E%3C/svg%3E"); background-size: 380px 380px; animation: bg-rise 4.5s linear infinite; }

.bgx-elfenhain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='none'%3E%3Cpath d='M40 600 C45 400 30 200 42 0 H85 C75 200 93 400 111 600Z M180 600 C185 400 170 200 173 0 H220 C210 200 228 400 243 600Z M1380 600 C1385 400 1370 200 1374 0 H1425 C1415 200 1433 400 1443 600Z M1520 600 C1525 400 1510 200 1507 0 H1560 C1550 200 1568 400 1583 600Z M300 600 C305 400 290 200 308 0 H357 C347 200 365 400 380 600Z M1260 600 C1265 400 1250 200 1257 0 H1300 C1290 200 1308 400 1313 600Z ' fill='%23050c07' opacity='.85'/%3E%3Cpath d='M0 546 Q133 548 267 500 Q400 518 533 504 Q667 511 800 544 Q933 500 1067 520 Q1200 549 1333 548 Q1467 497 1600 500 V600 H0Z' fill='%23081208'/%3E%3C/svg%3E"), repeating-linear-gradient(100deg, transparent 0 140px, rgba(255, 250, 200, .045) 140px 200px, transparent 200px 360px), radial-gradient(ellipse at 50% 10%, rgba(180, 255, 160, .16), transparent 60%), linear-gradient(180deg, #0c1f12 0%, #12301c 60%, #071209 100%); background-size: 100% 100%; }
.bgx-elfenhain .bl1 { --tile: 320px; inset: 0 -320px -320px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Ccircle cx='104' cy='198' r='0.4' fill='%23e6ff8a' opacity='0.99'/%3E%3Ccircle cx='263' cy='320' r='1.0' fill='%23e6ff8a' opacity='0.76'/%3E%3Ccircle cx='18' cy='62' r='0.5' fill='%23e6ff8a' opacity='0.91'/%3E%3Ccircle cx='117' cy='261' r='2.1' fill='%23e6ff8a' opacity='0.80'/%3E%3Ccircle cx='53' cy='111' r='0.5' fill='%23e6ff8a' opacity='0.89'/%3E%3Ccircle cx='61' cy='48' r='2.4' fill='%23e6ff8a' opacity='0.83'/%3E%3Ccircle cx='303' cy='314' r='1.9' fill='%23e6ff8a' opacity='0.77'/%3E%3Ccircle cx='47' cy='79' r='2.0' fill='%23e6ff8a' opacity='0.85'/%3E%3Ccircle cx='95' cy='6' r='1.2' fill='%23e6ff8a' opacity='0.82'/%3E%3Ccircle cx='22' cy='80' r='1.0' fill='%23e6ff8a' opacity='0.82'/%3E%3C/svg%3E"); background-size: 320px 320px; filter: drop-shadow(0 0 4px #d9ff6a); animation: bg-drift 30s linear infinite; }
.bgx-elfenhain .bl2 { --tile: 450px; inset: 0 -450px -450px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='450' viewBox='0 0 450 450'%3E%3Ccircle cx='33' cy='267' r='3.0' fill='%23f4ffb0' opacity='0.74'/%3E%3Ccircle cx='245' cy='168' r='2.3' fill='%23f4ffb0' opacity='0.87'/%3E%3Ccircle cx='269' cy='439' r='2.2' fill='%23f4ffb0' opacity='0.74'/%3E%3Ccircle cx='171' cy='285' r='2.2' fill='%23f4ffb0' opacity='0.69'/%3E%3Ccircle cx='364' cy='201' r='2.4' fill='%23f4ffb0' opacity='0.64'/%3E%3Ccircle cx='143' cy='8' r='1.5' fill='%23f4ffb0' opacity='0.70'/%3E%3Ccircle cx='156' cy='99' r='2.6' fill='%23f4ffb0' opacity='0.85'/%3E%3Ccircle cx='157' cy='224' r='0.9' fill='%23f4ffb0' opacity='0.98'/%3E%3C/svg%3E"); background-size: 450px 450px; filter: drop-shadow(0 0 5px #e6ff8a); animation: bg-drift 44s linear infinite reverse, bg-pulse 3s ease-in-out infinite; }

.bgx-gruft { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1600V600H0Z M60 600V260Q200 60 340 260V600Z M460 600V260Q600 60 740 260V600Z M860 600V260Q1000 60 1140 260V600Z M1260 600V260Q1400 60 1540 260V600Z' fill='%230c0910'/%3E%3Cg fill='%23171220'%3E%3Crect x='20' y='0' width='40' height='600'/%3E%3Crect x='420' y='0' width='40' height='600'/%3E%3Crect x='820' y='0' width='40' height='600'/%3E%3Crect x='1220' y='0' width='40' height='600'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 45%, rgba(170, 160, 210, .28), transparent 65%), linear-gradient(180deg, #1a1626, #2a2438 60%, #120e18); background-size: 100% 100%; }
.bgx-gruft .bl1 { top: auto; height: 45%; inset-inline: 0 -100%; background: radial-gradient(ellipse 22% 60% at 25% 80%, rgba(200, 195, 225, .22), transparent 70%), radial-gradient(ellipse 30% 50% at 70% 90%, rgba(200, 195, 225, .18), transparent 70%); background-size: 50% 100%; animation: bg-slide 38s linear infinite; }
.bgx-gruft .bl2 { top: auto; height: 32%; inset-inline: 0 -100%; background: radial-gradient(ellipse 28% 60% at 40% 95%, rgba(220, 215, 240, .2), transparent 70%), radial-gradient(ellipse 20% 50% at 85% 85%, rgba(220, 215, 240, .16), transparent 70%); background-size: 50% 100%; animation: bg-slide 24s linear infinite reverse; }

.bgx-mondsee { background-image: radial-gradient(circle at 50% 20%, #fdfaf0 0 3.2%, rgba(240, 240, 255, .5) 3.6%, rgba(180, 200, 255, .14) 12%, transparent 30%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300 L0 200 L180 90 L300 170 L460 60 L640 190 L780 120 L960 210 L1120 80 L1300 180 L1440 110 L1600 200 V300Z' fill='%23111a33'/%3E%3Cpath d='M0 300 L0 240 L240 170 L420 230 L620 160 L860 250 L1080 180 L1300 240 L1600 190 V300Z' fill='%230a1124'/%3E%3C/svg%3E"), radial-gradient(ellipse 6% 28% at 50% 78%, rgba(235, 240, 255, .32), transparent 75%), linear-gradient(180deg, #070b1d 0%, #16224a 46%, #0a1430 56%, #050a18 100%); background-size: 100% 100%, 100% 26%, 100% 100%, 100% 100%; background-position: center, center 52%, center, center; }
.bgx-mondsee .bl1 { top: 64%; background: repeating-linear-gradient(180deg, transparent 0 10px, rgba(200, 215, 255, .07) 10px 11px); -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); animation: bg-pulse 4s ease-in-out infinite; }
.bgx-mondsee .bl2 { inset: 0 0 50% 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='152' cy='136' r='0.8' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='250' cy='48' r='0.8' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='182' cy='272' r='0.6' fill='%23ffffff' opacity='0.48'/%3E%3Ccircle cx='91' cy='40' r='0.5' fill='%23ffffff' opacity='0.56'/%3E%3Ccircle cx='89' cy='174' r='1.2' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='234' cy='99' r='0.7' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='70' cy='247' r='0.6' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='167' cy='288' r='1.0' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='105' cy='105' r='1.1' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='216' cy='29' r='0.4' fill='%23ffffff' opacity='0.51'/%3E%3Ccircle cx='92' cy='80' r='1.1' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='67' cy='30' r='0.6' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='217' cy='115' r='1.2' fill='%23ffffff' opacity='0.31'/%3E%3Ccircle cx='161' cy='40' r='1.1' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='72' cy='175' r='1.1' fill='%23ffffff' opacity='0.31'/%3E%3Ccircle cx='69' cy='271' r='0.7' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='279' cy='284' r='0.7' fill='%23ffffff' opacity='0.40'/%3E%3Ccircle cx='8' cy='223' r='1.0' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='207' cy='106' r='0.6' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='238' cy='141' r='0.8' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='247' cy='287' r='0.6' fill='%23ffffff' opacity='0.78'/%3E%3Ccircle cx='244' cy='121' r='0.6' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='163' cy='177' r='1.2' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='211' cy='156' r='0.5' fill='%23ffffff' opacity='0.34'/%3E%3Ccircle cx='246' cy='77' r='0.9' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='64' cy='205' r='0.5' fill='%23ffffff' opacity='0.34'/%3E%3Ccircle cx='299' cy='120' r='0.7' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='63' cy='238' r='0.6' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='226' cy='33' r='0.7' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='147' cy='130' r='0.5' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='284' cy='297' r='0.8' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='40' cy='283' r='0.9' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='257' cy='72' r='1.0' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='91' cy='52' r='1.0' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='50' cy='114' r='0.7' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='67' cy='293' r='0.5' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='226' cy='137' r='0.6' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='224' cy='74' r='1.1' fill='%23ffffff' opacity='0.62'/%3E%3Ccircle cx='52' cy='287' r='0.7' fill='%23ffffff' opacity='0.37'/%3E%3Ccircle cx='287' cy='226' r='0.8' fill='%23ffffff' opacity='0.58'/%3E%3C/svg%3E"); background-size: 300px 300px; animation: bg-twinkle 5s ease-in-out infinite; }

.bgx-drachenhort { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 240'%3E%3Cdefs%3E%3CradialGradient id='h' cx='.5' cy='.9' r='.7'%3E%3Cstop offset='0' stop-color='%23ffe07a'/%3E%3Cstop offset='.45' stop-color='%23d8a02a'/%3E%3Cstop offset='1' stop-color='%236a3c0a'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cpath d='M0 240 C80 200 140 190 220 170 C300 150 360 110 470 105 C580 100 640 150 720 160 C820 172 900 200 1000 225 V240Z' fill='url(%23h)'/%3E %3Cpath d='M330 120 l18 -30 l18 30z M640 150 c0 -26 30 -26 30 0z' fill='%23c8901e' stroke='%237a4c0a' stroke-width='2'/%3E%3Cellipse cx='467' cy='174' rx='8' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='66' cy='183' rx='11' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='548' cy='190' rx='7' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='679' cy='179' rx='10' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='269' cy='157' rx='9' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='580' cy='200' rx='9' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='149' cy='169' rx='10' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='431' cy='156' rx='8' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='307' cy='203' rx='8' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='834' cy='154' rx='9' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='81' cy='178' rx='11' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='585' cy='158' rx='9' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='239' cy='151' rx='7' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='75' cy='156' rx='9' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='430' cy='176' rx='10' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='570' cy='161' rx='9' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='108' cy='186' rx='9' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='296' cy='215' rx='11' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='681' cy='212' rx='8' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='98' cy='174' rx='10' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='742' cy='156' rx='8' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='574' cy='179' rx='9' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='566' cy='151' rx='10' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='442' cy='164' rx='9' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='138' cy='191' rx='7' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='82' cy='201' rx='10' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='684' cy='166' rx='10' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='263' cy='213' rx='9' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='817' cy='174' rx='10' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='802' cy='167' rx='7' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='212' cy='212' rx='11' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='70' cy='154' rx='8' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='598' cy='213' rx='8' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='555' cy='159' rx='7' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='672' cy='154' rx='9' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='732' cy='175' rx='11' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='690' cy='200' rx='11' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='147' cy='153' rx='9' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='614' cy='155' rx='10' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='71' cy='161' rx='9' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='402' cy='161' rx='9' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='531' cy='211' rx='7' ry='5' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='842' cy='185' rx='9' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='860' cy='154' rx='10' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='324' cy='197' rx='10' ry='3' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Cellipse cx='676' cy='179' rx='9' ry='4' fill='%23ffd75a' stroke='%239a6a14' stroke-width='1.5'/%3E%3Ccircle cx='300' cy='170' r='5' fill='%23d0263a' stroke='%23fff' stroke-opacity='.5'/%3E%3Ccircle cx='560' cy='160' r='5' fill='%2330c070' stroke='%23fff' stroke-opacity='.5'/%3E%3Ccircle cx='720' cy='185' r='5' fill='%233a7bff' stroke='%23fff' stroke-opacity='.5'/%3E%3Ccircle cx='430' cy='195' r='5' fill='%23d0263a' stroke='%23fff' stroke-opacity='.5'/%3E%3C/svg%3E"), radial-gradient(ellipse 60% 30% at 50% 100%, rgba(255, 190, 60, .35), transparent 70%), radial-gradient(ellipse at 50% 55%, rgba(120, 20, 12, .45), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34' viewBox='0 0 60 34'%3E%3Cg fill='none' stroke='%23e8b84a' stroke-opacity='.10' stroke-width='1.5'%3E%3Cpath d='M0 34 A30 30 0 0 1 60 34'/%3E%3Cpath d='M-30 17 A30 30 0 0 1 30 17'/%3E%3Cpath d='M30 17 A30 30 0 0 1 90 17'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #120505, #240a07 60%, #3a1a08); background-size: min(96vw, 1200px) auto, 100% 100%, 100% 100%, 60px 34px, 100% 100%; background-position: center bottom, center, center, 0 0, center; background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat; }
.bgx-drachenhort .bl1 { --tile: 280px; inset: 0 0 -280px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Ccircle cx='23' cy='48' r='1.5' fill='%23ffcf5a' opacity='0.66'/%3E%3Ccircle cx='266' cy='236' r='1.6' fill='%23ffcf5a' opacity='0.79'/%3E%3Ccircle cx='232' cy='68' r='1.4' fill='%23ffcf5a' opacity='0.75'/%3E%3Ccircle cx='137' cy='270' r='0.7' fill='%23ffcf5a' opacity='0.90'/%3E%3Ccircle cx='215' cy='24' r='2.0' fill='%23ffcf5a' opacity='0.78'/%3E%3Ccircle cx='152' cy='85' r='1.3' fill='%23ffcf5a' opacity='0.98'/%3E%3Ccircle cx='98' cy='205' r='1.7' fill='%23ffcf5a' opacity='0.95'/%3E%3Ccircle cx='193' cy='121' r='0.9' fill='%23ffcf5a' opacity='0.75'/%3E%3Ccircle cx='105' cy='248' r='1.7' fill='%23ffcf5a' opacity='0.69'/%3E%3Ccircle cx='74' cy='12' r='1.9' fill='%23ffcf5a' opacity='0.62'/%3E%3Ccircle cx='109' cy='51' r='0.7' fill='%23ffcf5a' opacity='0.98'/%3E%3Ccircle cx='122' cy='177' r='1.7' fill='%23ffcf5a' opacity='0.81'/%3E%3Ccircle cx='229' cy='216' r='1.4' fill='%23ffcf5a' opacity='0.83'/%3E%3Ccircle cx='248' cy='189' r='0.9' fill='%23ffcf5a' opacity='0.96'/%3E%3Ccircle cx='230' cy='266' r='1.5' fill='%23ffcf5a' opacity='0.78'/%3E%3Ccircle cx='99' cy='175' r='0.7' fill='%23ffcf5a' opacity='0.89'/%3E%3Ccircle cx='198' cy='246' r='0.7' fill='%23ffcf5a' opacity='0.83'/%3E%3Ccircle cx='154' cy='168' r='1.1' fill='%23ffcf5a' opacity='0.60'/%3E%3C/svg%3E"); background-size: 280px 280px; animation: bg-rise 9s linear infinite; }
.bgx-drachenhort .bl2 { background: radial-gradient(ellipse 60% 26% at 50% 100%, rgba(255, 150, 50, .3), transparent 70%); animation: bg-pulse 3.4s ease-in-out infinite; }

.bgx-wildnis { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 140'%3E%3Cg transform='translate(40 40) scale(1.45)'%3E%3Cpath d='M10 40 C9 24 26 12 46 12 C60 12 70 15 78 24 C84 26 89 33 89 42 C89 50 86 58 84 60 C83 54 83 48 80 45 L79 58 L72 58 L71 46 C66 47 62 47 59 46 L58 58 L51 58 L50 46 L33 46 L32 58 L25 58 L24 45 C20 45 18 44 16 43 L15 58 L9 58 Z' fill='%23060b0a'/%3E%3Cpath d='M84 50 C93 57 98 52 99 45' stroke='%23cfc6b6' stroke-width='2.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate(210 62) scale(1.1)'%3E%3Cpath d='M10 40 C9 24 26 12 46 12 C60 12 70 15 78 24 C84 26 89 33 89 42 C89 50 86 58 84 60 C83 54 83 48 80 45 L79 58 L72 58 L71 46 C66 47 62 47 59 46 L58 58 L51 58 L50 46 L33 46 L32 58 L25 58 L24 45 C20 45 18 44 16 43 L15 58 L9 58 Z' fill='%23060b0a'/%3E%3Cpath d='M84 50 C93 57 98 52 99 45' stroke='%23cfc6b6' stroke-width='2.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate(340 76) scale(0.85)'%3E%3Cpath d='M10 40 C9 24 26 12 46 12 C60 12 70 15 78 24 C84 26 89 33 89 42 C89 50 86 58 84 60 C83 54 83 48 80 45 L79 58 L72 58 L71 46 C66 47 62 47 59 46 L58 58 L51 58 L50 46 L33 46 L32 58 L25 58 L24 45 C20 45 18 44 16 43 L15 58 L9 58 Z' fill='%23060b0a'/%3E%3Cpath d='M84 50 C93 57 98 52 99 45' stroke='%23cfc6b6' stroke-width='2.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate(450 86) scale(0.7)'%3E%3Cpath d='M10 40 C9 24 26 12 46 12 C60 12 70 15 78 24 C84 26 89 33 89 42 C89 50 86 58 84 60 C83 54 83 48 80 45 L79 58 L72 58 L71 46 C66 47 62 47 59 46 L58 58 L51 58 L50 46 L33 46 L32 58 L25 58 L24 45 C20 45 18 44 16 43 L15 58 L9 58 Z' fill='%23060b0a'/%3E%3Cpath d='M84 50 C93 57 98 52 99 45' stroke='%23cfc6b6' stroke-width='2.4' fill='none'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cpath d='M0 204 Q133 223 267 185 Q400 198 533 221 Q667 186 800 208 Q933 189 1067 186 Q1200 186 1333 210 Q1467 179 1600 224 V300 H0Z' fill='%23121f1c'/%3E%3Cpath d='M0 245 Q100 246 200 258 Q300 258 400 261 Q500 258 600 252 Q700 242 800 257 Q900 258 1000 256 Q1100 266 1200 256 Q1300 252 1400 262 Q1500 245 1600 247 V300 H0Z' fill='%23070d0c'/%3E%3C/svg%3E"), linear-gradient(180deg, #02070d 0%, #08161f 50%, #11262a 80%, #070d0c 100%); background-size: min(46vw, 640px) auto, 100% 30%, 100% 100%; background-position: right 6% bottom 3%, bottom, center; }
.bgx-wildnis .bl1 { inset: 0 -100% 30% 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cdefs%3E %3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%2350ffb0' stop-opacity='.55'/%3E%3Cstop offset='.5' stop-color='%2340e0a0' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='%2340e0a0' stop-opacity='0'/%3E%3C/linearGradient%3E %3ClinearGradient id='b' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%2360d8ff' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%2360d8ff' stop-opacity='0'/%3E%3C/linearGradient%3E %3ClinearGradient id='v' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23b070ff' stop-opacity='.4'/%3E%3Cstop offset='1' stop-color='%23b070ff' stop-opacity='0'/%3E%3C/linearGradient%3E %3Cg id='a'%3E%3Cpath d='M0 230 C120 180 220 260 340 210 S560 150 680 220 S880 260 1000 230 L1000 80 C860 90 760 30 640 70 S420 120 300 60 S100 40 0 80Z' fill='url(%23g)'/%3E %3Cpath d='M0 300 C150 260 260 320 420 280 S700 230 860 290 S960 300 1000 300 L1000 190 C880 200 760 140 600 180 S330 220 200 170 S60 160 0 190Z' fill='url(%23b)'/%3E %3Cpath d='M400 190 C520 150 680 240 880 170 C780 90 620 60 400 190Z' fill='url(%23v)'/%3E%3C/g%3E%3C/defs%3E %3Cuse href='%23a'/%3E%3C/svg%3E"); background-size: 50% 100%; background-repeat: repeat-x; filter: blur(16px); animation: bg-slide 60s linear infinite, bg-pulse 7s ease-in-out infinite; }
.bgx-wildnis .bl2 { inset: 0 0 35% 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='248' cy='64' r='1.2' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='119' cy='185' r='0.5' fill='%23ffffff' opacity='0.42'/%3E%3Ccircle cx='126' cy='69' r='0.9' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='115' cy='83' r='0.6' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='271' cy='105' r='1.0' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='228' cy='72' r='0.9' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='261' cy='228' r='0.5' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='138' cy='65' r='0.6' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='282' cy='5' r='0.4' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='284' cy='267' r='1.0' fill='%23ffffff' opacity='0.74'/%3E%3Ccircle cx='145' cy='147' r='1.1' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='205' cy='216' r='0.5' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='51' cy='290' r='1.0' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='175' cy='292' r='0.7' fill='%23ffffff' opacity='0.42'/%3E%3Ccircle cx='207' cy='271' r='0.5' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='117' cy='206' r='0.8' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='173' cy='290' r='1.2' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='281' cy='228' r='0.5' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='82' cy='14' r='0.4' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='262' cy='22' r='0.9' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='109' cy='216' r='0.9' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='144' cy='294' r='0.7' fill='%23ffffff' opacity='0.43'/%3E%3Ccircle cx='36' cy='77' r='0.5' fill='%23ffffff' opacity='0.86'/%3E%3Ccircle cx='40' cy='252' r='1.0' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='15' cy='61' r='1.1' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='234' cy='37' r='0.4' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='105' cy='62' r='0.9' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='168' cy='95' r='0.7' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='166' cy='117' r='0.9' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='97' cy='178' r='0.5' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='160' cy='178' r='0.8' fill='%23ffffff' opacity='0.37'/%3E%3Ccircle cx='263' cy='3' r='0.6' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='277' cy='210' r='1.1' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='165' cy='180' r='0.6' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='102' cy='26' r='0.4' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='258' cy='184' r='1.0' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='145' cy='267' r='0.7' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='87' cy='22' r='0.4' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='190' cy='59' r='0.8' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='226' cy='72' r='0.8' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='216' cy='269' r='0.4' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='57' cy='267' r='0.6' fill='%23ffffff' opacity='0.78'/%3E%3Ccircle cx='155' cy='230' r='1.0' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='266' cy='121' r='0.9' fill='%23ffffff' opacity='0.85'/%3E%3Ccircle cx='239' cy='133' r='1.1' fill='%23ffffff' opacity='0.77'/%3E%3Ccircle cx='133' cy='133' r='0.7' fill='%23ffffff' opacity='0.86'/%3E%3Ccircle cx='69' cy='287' r='0.5' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='221' cy='212' r='0.6' fill='%23ffffff' opacity='0.48'/%3E%3Ccircle cx='170' cy='228' r='0.7' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='129' cy='249' r='1.1' fill='%23ffffff' opacity='0.68'/%3E%3C/svg%3E"); background-size: 300px 300px; animation: bg-twinkle 6s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Würfel-Designs (Einstellungen → Würfel). Gelten für den Wurf und die Würfel im Ergebnis.
   -------------------------------------------------------------------------- */
.d-face { fill: var(--die-face, #8e1b18); stroke: var(--die-line, #f3d67a); stroke-width: 3; }
.d-inner { fill: var(--die-inner, #a3241d); stroke: var(--die-line, #f3d67a); stroke-width: 2; }
.d-edges { fill: none; stroke: var(--die-line, #f3d67a); stroke-width: 1.5; opacity: .7; }
.d-shine { fill: #fff; opacity: var(--die-shine, .12); pointer-events: none; }
.d-face6 { fill: var(--die6-face, #f7ecd0); stroke: var(--die6-line, #8a6a1c); stroke-width: 4; }
.fx-die-num { fill: var(--die-num, #fff3c4); }
.fx-die-num.dark { fill: var(--die6-num, #2b1c0f); }
.d-deco { display: none; fill: none; stroke: var(--die-deco, transparent); stroke-width: 1.4; stroke-linecap: round; }
.d-stars { fill: var(--die-deco, #fff); stroke: none; }
.fx-die-svg { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)) var(--die-glow-f, drop-shadow(0 0 0 transparent)); }
.die { color: var(--chip-fg, var(--ink)); background: var(--chip-bg, linear-gradient(145deg, #fffaf0, #e6d4a8)); border-color: var(--chip-line, #8a6a3a); box-shadow: 0 2px 0 var(--chip-line, #8a6a3a); }
.fx-crit .fx-die-svg .d-face { fill: #c9a227; }
.dice-drachenglut .d-cracks { filter: drop-shadow(0 0 3px #ff6a00); animation: die-glow 1.6s ease-in-out infinite; }
.dice-runen .d-runes { filter: drop-shadow(0 0 3px #6fd3ff); animation: die-glow 2.2s ease-in-out infinite; stroke-width: 2; }
.dice-sterne .d-stars { filter: drop-shadow(0 0 2px #fff); }
@keyframes die-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.dice-klassisch { --die-face: #8e1b18; --die-inner: #a3241d; --die-line: #f3d67a; --die-num: #fff3c4; --die6-face: #f7ecd0; --die6-line: #8a6a1c; --die6-num: #2b1c0f; --die-shine: 0.12; --die-deco: transparent; --chip-bg: linear-gradient(145deg, #fffaf0, #e6d4a8); --chip-fg: #2b1c0f; --chip-line: #8a6a3a; --die-glow-f: drop-shadow(0 0 0 transparent); }
.dice-knochen { --die-face: #e9dfc7; --die-inner: #d9ccb0; --die-line: #7a6a50; --die-num: #3b2c1c; --die6-face: #ece3cd; --die6-line: #7a6a50; --die6-num: #3b2c1c; --die-shine: 0.25; --die-deco: rgba(90,70,50,.45); --chip-bg: linear-gradient(145deg, #f4ecd8, #d4c6a6); --chip-fg: #3b2c1c; --chip-line: #7a6a50; --die-glow-f: drop-shadow(0 0 0 transparent); }
.dice-knochen .d-cracks { display: inline; }
.dice-holz { --die-face: #7a4a24; --die-inner: #8b5a2e; --die-line: #d9a94a; --die-num: #ffe9b0; --die6-face: #8b5a2e; --die6-line: #d9a94a; --die6-num: #ffe9b0; --die-shine: 0.1; --die-deco: rgba(40,20,5,.4); --chip-bg: linear-gradient(145deg, #a06a38, #6e4220); --chip-fg: #ffe9b0; --chip-line: #4a2c12; --die-glow-f: drop-shadow(0 0 0 transparent); }
.dice-holz .d-grain { display: inline; }
.dice-obsidian { --die-face: #141018; --die-inner: #1f1824; --die-line: #d4af37; --die-num: #f3d67a; --die6-face: #17121c; --die6-line: #d4af37; --die6-num: #f3d67a; --die-shine: 0.2; --die-deco: rgba(212,175,55,.6); --chip-bg: linear-gradient(145deg, #2a2430, #0d0a10); --chip-fg: #f3d67a; --chip-line: #d4af37; --die-glow-f: drop-shadow(0 0 10px rgba(212,175,55,.45)); }
.dice-obsidian .d-cracks { display: inline; }
.dice-eis { --die-face: #a9dcf0; --die-inner: #cdeef9; --die-line: #ffffff; --die-num: #1d4b66; --die6-face: #d2f0fa; --die6-line: #7fc3dc; --die6-num: #1d4b66; --die-shine: 0.45; --die-deco: rgba(255,255,255,.6); --chip-bg: linear-gradient(145deg, #eefafe, #a9d9ec); --chip-fg: #1d4b66; --chip-line: #6fb3cf; --die-glow-f: drop-shadow(0 0 10px #9fe6ff); }
.dice-eis .d-cracks { display: inline; }
.dice-smaragd { --die-face: #0f6a3e; --die-inner: #168a52; --die-line: #d8e2e6; --die-num: #f0fff6; --die6-face: #127a48; --die6-line: #d8e2e6; --die6-num: #f0fff6; --die-shine: 0.2; --die-deco: transparent; --chip-bg: linear-gradient(145deg, #22955c, #0b5a33); --chip-fg: #f0fff6; --chip-line: #c0ccd2; --die-glow-f: drop-shadow(0 0 10px rgba(60,220,140,.45)); }
.dice-amethyst { --die-face: #5b2a86; --die-inner: #7440a6; --die-line: #e2d8f0; --die-num: #fbefff; --die6-face: #6a36a0; --die6-line: #e2d8f0; --die6-num: #fbefff; --die-shine: 0.22; --die-deco: transparent; --chip-bg: linear-gradient(145deg, #8a5bb8, #4f2275); --chip-fg: #fbefff; --chip-line: #cfc0e3; --die-glow-f: drop-shadow(0 0 10px rgba(190,120,255,.45)); }
.dice-sterne { --die-face: #0e1640; --die-inner: #18235e; --die-line: #b9c7ff; --die-num: #fff8d6; --die6-face: #121c50; --die6-line: #b9c7ff; --die6-num: #fff8d6; --die-shine: 0.15; --die-deco: #ffffff; --chip-bg: linear-gradient(145deg, #22307a, #0b1238); --chip-fg: #fff8d6; --chip-line: #8fa2ff; --die-glow-f: drop-shadow(0 0 10px rgba(140,160,255,.5)); }
.dice-sterne .d-stars { display: inline; }
.dice-koenigsgold { --die-face: #d4a62a; --die-inner: #ecc552; --die-line: #7a5410; --die-num: #7e1a14; --die6-face: #e2b83c; --die6-line: #7a5410; --die6-num: #7e1a14; --die-shine: 0.35; --die-deco: transparent; --chip-bg: linear-gradient(145deg, #ffe68a, #c9961f); --chip-fg: #7e1a14; --chip-line: #8a6a1c; --die-glow-f: drop-shadow(0 0 10px rgba(255,215,90,.6)); }
.dice-drachenglut { --die-face: #1c0d08; --die-inner: #2a110a; --die-line: #ff7a1a; --die-num: #ffd27a; --die6-face: #1f0e08; --die6-line: #ff7a1a; --die6-num: #ffd27a; --die-shine: 0.08; --die-deco: #ff6a00; --chip-bg: linear-gradient(145deg, #3a1408, #120604); --chip-fg: #ffb347; --chip-line: #ff7a1a; --die-glow-f: drop-shadow(0 0 10px rgba(255,110,20,.6)); }
.dice-drachenglut .d-cracks { display: inline; }
.dice-runen { --die-face: #5d6066; --die-inner: #6c7077; --die-line: #2d3036; --die-num: #e6f6ff; --die6-face: #64676d; --die6-line: #2d3036; --die6-num: #e6f6ff; --die-shine: 0.15; --die-deco: #6fd3ff; --chip-bg: linear-gradient(145deg, #7a7e86, #4a4d53); --chip-fg: #e6f6ff; --chip-line: #2d3036; --die-glow-f: drop-shadow(0 0 10px rgba(110,210,255,.5)); }
.dice-runen .d-runes { display: inline; }

/* --------------------------------------------------------------------------
   Einstellungen
   -------------------------------------------------------------------------- */
html.fs-klein { font-size: 93.75%; }
html.fs-gross { font-size: 112.5%; }
body.fs-klein { font-size: 16.5px; }
body.fs-gross { font-size: 20px; }
body.motion-reduced *, body.motion-reduced *::before, body.motion-reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

.sn-bottom { flex: none; padding: .35rem .6rem; border-top: 1px solid rgba(201, 162, 39, .22); }
body.side-slim .sn-bottom { padding-left: .45rem; padding-right: .45rem; }
.btn.gold { color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: var(--gold-dark); }
.btn.gold:hover { background: linear-gradient(180deg, #fff1b8, var(--gold-light)); color: var(--ink); }

.set-gold { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: 99px; font-family: var(--heading); font-weight: 700; color: var(--gold-light); background: rgba(0, 0, 0, .35); border: 1px solid var(--gold-dark); }
.set-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.set-nav {
  position: sticky; top: 5rem; display: flex; flex-direction: column; gap: .2rem; padding: .6rem;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .3); border-radius: 12px; box-shadow: var(--shadow);
}
.set-nav a {
  display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: 6px;
  font-family: var(--heading); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--parchment-dark); text-decoration: none;
}
.set-nav a .icon { width: 1.2rem; height: 1.2rem; }
.set-nav a small { margin-left: auto; font-family: var(--body); font-weight: 600; font-size: .8rem; letter-spacing: 0; text-transform: none; color: rgba(236, 210, 126, .6); }
.set-nav a:hover { color: var(--gold-light); background: rgba(201, 162, 39, .12); }
.set-nav a.active { color: var(--blood); background: var(--noise), linear-gradient(90deg, var(--parchment-light), var(--parchment)); box-shadow: inset 4px 0 0 var(--gold); }
.set-nav a.active small { color: var(--ink-soft); }
.set-panel > .hint { margin-bottom: .4rem; }
.set-sub { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--blood); font-size: 1.05rem; }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.set-row:first-of-type { border-top: 0; }
.set-text strong { display: block; font-family: var(--heading); font-size: .95rem; color: var(--ink); }
.set-text small { display: block; margin-top: .1rem; color: var(--ink-soft); line-height: 1.35; }
.set-ctl { flex: none; }
.set-ctl select { min-width: 12rem; }

.set-switch { position: relative; display: inline-flex; width: 54px; height: 30px; cursor: pointer; }
.set-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.set-knob { position: relative; width: 100%; height: 100%; border-radius: 99px; background: #9a8a70; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); transition: background .2s; }
.set-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #fffaf0, #e6d4a8); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.set-switch input:checked + .set-knob { background: linear-gradient(180deg, #34994d, #1f6a32); }
.set-switch input:checked + .set-knob::after { transform: translateX(24px); }
.set-switch input:focus-visible + .set-knob { outline: 2px solid var(--gold); outline-offset: 3px; }

.set-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 99px; background: rgba(110, 78, 38, .16); border: 1px solid var(--line); }
.set-seg button { border: 0; background: none; padding: .38rem .9rem; border-radius: 99px; cursor: pointer; font-family: var(--heading); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.set-seg button:hover { color: var(--blood); }
.set-seg button.on { color: #f8e7b6; background: linear-gradient(180deg, #a8322a, #7e1a14); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.set-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; margin-top: 1rem; }
.set-item { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: rgba(255, 250, 235, .65); border: 1px solid var(--line); box-shadow: 0 2px 0 rgba(110, 78, 38, .2); transition: transform .15s, box-shadow .15s; }
.set-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.set-item.active { border-color: var(--gold-dark); box-shadow: 0 0 0 2px var(--gold), 0 6px 16px rgba(0, 0, 0, .22); }
.set-item.locked .set-prev > :first-child { filter: brightness(.88); }
.set-item.locked.blocked .set-prev > :first-child { filter: grayscale(.6) brightness(.7); }
.set-item.locked.blocked .set-prev::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .12) 0 8px, transparent 8px 16px); pointer-events: none; }
.set-prev { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1a110b; isolation: isolate; }
.set-prev .bg-prev { inset: 0; }
.set-anim { position: absolute; right: .45rem; top: .45rem; z-index: 2; padding: .1rem .5rem; border-radius: 99px; font-family: var(--heading); font-size: .66rem; letter-spacing: .06em; color: var(--gold-light); background: rgba(0, 0, 0, .6); }
.set-item-body { flex: 1; display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem .8rem; }
.set-item-body strong { font-family: var(--heading); font-size: .92rem; color: var(--ink); }
.set-item-body small { color: var(--ink-soft); line-height: 1.3; }
.set-item-foot { margin-top: auto; padding-top: .55rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.set-item-foot > :last-child { margin-left: auto; }
.set-active { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--heading); font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--forest); }
.set-locked { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); }
.set-locked .icon { width: 1rem; height: 1rem; }
.set-prog { display: block; flex-basis: 100%; height: 5px; border-radius: 99px; background: rgba(110, 78, 38, .2); overflow: hidden; }
.set-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }

.set-dice { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; padding-bottom: .9rem; background: radial-gradient(circle at 50% 40%, #4a3020, #160e08 75%); }
.set-dice .fx-die-svg { width: 78px; height: 78px; }
.set-dice .fx-die-svg.die6 { width: 56px; height: 56px; }
.set-dice .die { position: absolute; bottom: .45rem; min-width: 1.5rem; height: 1.5rem; font-size: .8rem; }
.set-dice .die:nth-of-type(1) { right: 2.4rem; }
.set-dice .die:nth-of-type(2) { right: .5rem; }

.set-fin { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, var(--fin-glow, rgba(150, 40, 30, .55)), #0b0605 72%); }
.set-fin svg { width: 58%; height: 58%; filter: drop-shadow(0 0 6px rgba(255, 220, 160, .35)); }
.set-fin.auto .icon { width: 38%; height: 38%; color: var(--gold-light); }
.fin-vereisen, .fin-eis { --fin-glow: rgba(120, 200, 255, .5); }
.fin-blitz { --fin-glow: rgba(150, 200, 255, .45); }
.fin-seele, .fin-licht { --fin-glow: rgba(255, 236, 170, .45); }
.fin-gift, .fin-ranken { --fin-glow: rgba(100, 220, 80, .45); }
.fin-schattenschlund { --fin-glow: rgba(140, 60, 220, .55); }
.fin-versinken, .fin-zerfall { --fin-glow: rgba(150, 110, 60, .5); }
.fin-versteinern, .fin-zerschmettern { --fin-glow: rgba(160, 150, 140, .45); }
.fin-explosion, .fin-verbrennen { --fin-glow: rgba(255, 130, 40, .55); }

@media (max-width: 760px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: .4rem; }
  .set-nav a { flex: none; padding: .5rem .65rem; }
  .set-nav a small { display: none; }
  .set-row { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .set-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
}

/* Seltenheit bei Würfeln und Finishern */
.set-item-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.set-item-head .tag { font-size: .62rem; }
.set-item[class*=" r-"] { border-top: 4px solid var(--rc, var(--line)); }
.set-item.r-legendaer .set-prev, .set-item.r-mythisch .set-prev { box-shadow: inset 0 0 22px color-mix(in srgb, var(--rc) 55%, transparent); }
.set-item.r-mythisch { box-shadow: 0 0 0 1px color-mix(in srgb, var(--r-mythisch) 45%, transparent), 0 4px 14px rgba(198, 40, 40, .25); }
.set-item.r-mythisch.active { box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgba(198, 40, 40, .35); }
.set-price { font-family: var(--heading); font-size: .8rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   Gesamtthemen: Eisreich, Totenreich, Drachenhort, Nordlicht. Färben die ganze Oberfläche um
   (Karten, Knöpfe, Reiter, Seitenleiste, Ranglisten). Klasse theme-… am body oder an einer Vorschau.
   -------------------------------------------------------------------------- */
.theme-frostwald { --parchment-light: #f6fcff; --parchment: #dfeff8; --parchment-dark: #bcd8ea; --ink: #0f2639; --ink-soft: #3b5870; --line: rgba(40, 90, 130, .3); --blood: #1b6aa3; --blood-light: #3a92cf; --gold: #a9d3ee; --gold-light: #eaf7ff; --gold-dark: #5f94bb; --wood: #0f2236; --night: #06101b; --forest: #1f7a6a; --t-btn1: #5fb3e8; --t-btn2: #2276b5; --t-btn3: #123f66; --t-btn-text: #f4fbff; --t-btn-shadow: #0b2a45; --t-border: #7fb1d4; --t-glow: rgba(120, 190, 240, .35); --t-aura: rgba(170, 225, 255, .25); --t-bar1: #16324d; --t-bar2: #0b1b2c; --t-title1: #ffffff; --t-title2: #bfe6ff; --t-title3: #5fa6d6; --t-ornament: hue-rotate(175deg) saturate(.7) brightness(1.15); --t-row-alt: rgba(255, 255, 255, .45); --t-head: rgba(40, 110, 170, .12); --t-me: rgba(150, 210, 250, .5); --t-sheen: rgba(255, 255, 255, .75); --t-first: linear-gradient(90deg, rgba(190, 230, 255, .7), rgba(255, 255, 255, .2)); }
.theme-gruft { --parchment-light: #f3eff7; --parchment: #ded6e8; --parchment-dark: #bfb1d1; --ink: #1d142c; --ink-soft: #544468; --line: rgba(70, 40, 110, .3); --blood: #6a2ca6; --blood-light: #8f52d6; --gold: #8fe0bd; --gold-light: #d8ffee; --gold-dark: #3c8c69; --wood: #170f20; --night: #0a0610; --forest: #2f8a63; --t-btn1: #9a5fe0; --t-btn2: #5d2595; --t-btn3: #36125c; --t-btn-text: #eafff5; --t-btn-shadow: #1d0832; --t-border: #7d62a3; --t-glow: rgba(110, 60, 170, .3); --t-aura: rgba(120, 255, 190, .18); --t-bar1: #24163a; --t-bar2: #110a1c; --t-title1: #e9fff5; --t-title2: #a8f0cf; --t-title3: #7b4cc0; --t-ornament: hue-rotate(235deg) saturate(.9); --t-row-alt: rgba(255, 255, 255, .35); --t-head: rgba(90, 50, 140, .12); --t-me: rgba(170, 255, 215, .45); --t-sheen: rgba(150, 255, 205, .55); --t-first: linear-gradient(90deg, rgba(150, 255, 205, .45), rgba(160, 110, 230, .15)); }
.theme-drachenhort { --parchment-light: #fff6de; --parchment: #f6dba3; --parchment-dark: #e0ac55; --ink: #2a0c05; --ink-soft: #6e2c12; --line: rgba(150, 60, 15, .3); --blood: #b11d0c; --blood-light: #e0461c; --gold: #f2b42a; --gold-light: #ffe27a; --gold-dark: #a6620a; --wood: #2a0a05; --night: #120302; --t-btn1: #ff8a2a; --t-btn2: #c4230e; --t-btn3: #6e0a04; --t-btn-text: #fff3c4; --t-btn-shadow: #3a0602; --t-border: #d68a18; --t-glow: rgba(200, 90, 20, .35); --t-aura: rgba(255, 120, 30, .35); --t-bar1: #3e0f06; --t-bar2: #1c0603; --t-title1: #fff6c8; --t-title2: #ffc23c; --t-title3: #d4400f; --t-ornament: saturate(1.8) brightness(1.15) hue-rotate(-12deg); --t-row-alt: rgba(255, 240, 200, .45); --t-head: rgba(180, 60, 10, .12); --t-me: rgba(255, 200, 90, .55); --t-sheen: rgba(255, 230, 140, .8); --t-first: linear-gradient(90deg, rgba(255, 150, 40, .55), rgba(255, 220, 120, .2)); }
.theme-wildnis { --parchment-light: #f0fcf8; --parchment: #d4efe6; --parchment-dark: #a6d6c6; --ink: #0a2522; --ink-soft: #2f5a53; --line: rgba(20, 100, 90, .3); --blood: #0c8270; --blood-light: #14ad95; --gold: #6fe3c1; --gold-light: #d0fff2; --gold-dark: #23856f; --wood: #061615; --night: #030b0b; --forest: #12805a; --t-btn1: #22c9a0; --t-btn2: #1a8fb8; --t-btn3: #5b3fb0; --t-btn-text: #f0fffb; --t-btn-shadow: #06302c; --t-border: #4fb8a2; --t-glow: rgba(40, 180, 160, .3); --t-aura: rgba(110, 255, 210, .25); --t-bar1: #0b2826; --t-bar2: #04100f; --t-title1: #d6fff1; --t-title2: #6ff0c8; --t-title3: #8c6cff; --t-ornament: hue-rotate(105deg) saturate(1.1); --t-row-alt: rgba(255, 255, 255, .4); --t-head: rgba(20, 130, 120, .12); --t-me: rgba(140, 255, 220, .45); --t-sheen: rgba(150, 255, 230, .7); --t-first: linear-gradient(90deg, rgba(90, 240, 190, .45), rgba(140, 110, 255, .2)); }

:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) ::selection { background: var(--gold); color: var(--ink); }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) { scrollbar-color: var(--gold-dark) var(--night); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .card { border-color: var(--t-border); box-shadow: inset 0 0 45px var(--t-glow), inset 0 0 0 5px rgba(255, 255, 255, .3), var(--shadow), 0 0 22px var(--t-aura); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .card::before, :is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .card::after { filter: var(--t-ornament); }
/* Kacheln und Eingabefelder nehmen die Pergamentfarbe des Themas an (seltene Kacheln behalten ihre eigene). */
:where(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) :is(.ware-tile, .bag-tile, .shop-slot) { background: linear-gradient(180deg, color-mix(in srgb, var(--parchment-light) 90%, transparent), color-mix(in srgb, var(--parchment) 80%, transparent)); }
:where(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) :is(input, select, textarea) { background-color: color-mix(in srgb, var(--parchment-light) 70%, transparent); border-color: var(--line); }
:where(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .set-item { background: color-mix(in srgb, var(--parchment-light) 70%, transparent); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) :is(.card > h2, .card summary h2)::after, :is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .card hr { filter: var(--t-ornament); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .btn:not(.secondary):not(.gold):not(.danger):not(.dark):not(.vault-btn) { color: var(--t-btn-text); background: linear-gradient(180deg, var(--t-btn1) 0%, var(--t-btn2) 55%, var(--t-btn3) 100%); border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 2px 0 var(--t-btn-shadow), 0 3px 10px rgba(0, 0, 0, .3); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .btn.secondary:hover { color: var(--blood); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) :is(.card .tabs a.active, .chips a.active, .set-seg button.on) { color: var(--t-btn-text); background: linear-gradient(180deg, var(--t-btn1), var(--t-btn2)); border-color: var(--gold); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .tabs a { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .tag.gold { color: var(--ink); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) :is(.page-title h1, .hero-banner h1, .clan-banner h1) { background: linear-gradient(180deg, var(--t-title1), var(--t-title2) 60%, var(--t-title3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) :is(.topbar, .sn-brand) { background: var(--noise), linear-gradient(180deg, var(--t-bar1), var(--t-bar2)); border-bottom-color: var(--gold-dark); }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .sidenav { background: var(--noise), linear-gradient(180deg, var(--t-bar1) 0%, var(--t-bar2) 60%, var(--night) 100%); border-right-color: var(--gold-dark); }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .sn-brand .sn-label, body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .topbar .brand { background: linear-gradient(180deg, var(--t-title1), var(--t-title2) 55%, var(--t-title3)); -webkit-background-clip: text; background-clip: text; }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) :is(.sn-link, .sn-toggle)::before { background: linear-gradient(100deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%); }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .sn-group h4, body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .crumb { color: color-mix(in srgb, var(--gold-light) 55%, transparent); }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .crumb b { color: var(--gold-light); }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .crumb span + b::before { border-color: var(--gold); }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) :is(.userbox a, .userbox button) { color: var(--gold-light); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* Ranglisten im Thema */
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row { border-bottom-color: var(--line); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row:nth-child(even) { background: var(--t-row-alt); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row.rk-head { background: var(--t-head); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row.real { box-shadow: inset 4px 0 0 var(--gold); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row.me { background: var(--t-me) !important; box-shadow: inset 4px 0 0 var(--blood); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row.top { position: relative; isolation: isolate; }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row.gold { background: var(--t-first); }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row.top::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 35%, var(--t-sheen) 50%, transparent 65%); background-size: 260% 100%; animation: t-sheen 4.5s linear infinite; }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row.silver::after { animation-delay: 1.2s; opacity: .7; }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-row.bronze::after { animation-delay: 2.4s; opacity: .5; }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-name.gold-name { background: linear-gradient(180deg, var(--t-title2), var(--t-title3)); -webkit-background-clip: text; background-clip: text; }
:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .rk-board-head h2 { background: linear-gradient(90deg, var(--blood), var(--blood-light) 50%, var(--gold-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes t-sheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes t-pulse { 0%, 100% { box-shadow: 0 0 8px var(--c1); } 50% { box-shadow: 0 0 20px var(--c1), 0 0 34px var(--c2); } }
@keyframes t-aurora { to { background-position: -300% 0; } }

/* Eisreich: Eiskristall-Medaillen, Frostrand */
.theme-frostwald .rk-row.gold .rk-rank { background: radial-gradient(circle at 35% 30%, #ffffff, #9fd8ff 60%, #4f9bd0); --c1: rgba(160, 220, 255, .9); --c2: rgba(255, 255, 255, .6); animation: t-pulse 2.6s ease-in-out infinite; }
.theme-frostwald .rk-row.silver .rk-rank { background: radial-gradient(circle at 35% 30%, #ffffff, #cfdbe6); }
.theme-frostwald .rk-row.bronze .rk-rank { background: radial-gradient(circle at 35% 30%, #e6f2ff, #7ea7c6); }
.theme-frostwald .card { border-image: linear-gradient(180deg, #ffffff, #7fb1d4 40%, #cfe9fb) 1; }

/* Totenreich: Geisterlicht pulsiert um die Spitze */
.theme-gruft .rk-row.gold .rk-rank { background: radial-gradient(circle at 35% 30%, #eafff5, #7fe0b0 60%, #2f8a63); --c1: rgba(120, 255, 190, .9); --c2: rgba(150, 90, 230, .6); animation: t-pulse 2.2s ease-in-out infinite; }
.theme-gruft .rk-row.silver .rk-rank { background: radial-gradient(circle at 35% 30%, #f5f0ff, #b9a6d6); }
.theme-gruft .rk-row.bronze .rk-rank { background: radial-gradient(circle at 35% 30%, #e6dcf5, #7a5aa6); }
.theme-gruft .rk-board { --c1: rgba(120, 255, 190, .25); --c2: rgba(120, 60, 200, .2); animation: t-pulse 4s ease-in-out infinite; }

/* Drachenhort: Glut, Flammenschein und brennende Medaille */
.theme-drachenhort .btn:not(.secondary):not(.gold):not(.danger):not(.dark):not(.vault-btn):hover { box-shadow: 0 0 16px rgba(255, 120, 30, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.theme-drachenhort .rk-row.gold .rk-rank { background: radial-gradient(circle at 35% 30%, #fff6c8, #ffb020 55%, #c43a0c); --c1: rgba(255, 140, 30, .95); --c2: rgba(255, 60, 20, .6); animation: t-pulse 1.6s ease-in-out infinite; }
.theme-drachenhort .rk-row.gold::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 30% 100% at 15% 100%, rgba(255, 110, 20, .45), transparent 70%), radial-gradient(ellipse 25% 90% at 60% 100%, rgba(255, 70, 10, .35), transparent 70%); animation: t-flicker 1.1s ease-in-out infinite alternate; }
@keyframes t-flicker { from { opacity: .55; transform: scaleY(.9); transform-origin: bottom; } to { opacity: 1; transform: scaleY(1.08); transform-origin: bottom; } }
.theme-drachenhort .card { border-width: 2px; border-color: #d68a18; }

/* Nordlicht: Knöpfe, Titel und Spitzenplätze schimmern in Polarfarben */
.theme-wildnis .btn:not(.secondary):not(.gold):not(.danger):not(.dark):not(.vault-btn), .theme-wildnis :is(.card .tabs a.active, .chips a.active, .set-seg button.on) { background: linear-gradient(90deg, #1fc79c, #1a9fd0, #7b5fd6, #1fc79c); background-size: 300% 100%; animation: t-aurora 9s linear infinite; }
.theme-wildnis :is(.page-title h1, .hero-banner h1, .clan-banner h1), .theme-wildnis .rk-board-head h2 { background: linear-gradient(90deg, #d6fff1, #6ff0c8, #6fc8ff, #b49cff, #d6fff1); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: t-aurora 12s linear infinite; }
.theme-wildnis .rk-row.top::after { background: linear-gradient(100deg, transparent 30%, rgba(110, 255, 200, .55) 44%, rgba(120, 200, 255, .5) 50%, rgba(180, 140, 255, .45) 56%, transparent 70%); background-size: 260% 100%; }
.theme-wildnis .rk-row.gold .rk-rank { background: conic-gradient(from 0deg, #6ff0c8, #6fc8ff, #b49cff, #6ff0c8); --c1: rgba(110, 255, 210, .9); --c2: rgba(160, 120, 255, .6); animation: t-pulse 2.4s ease-in-out infinite; }
body:is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) .sn-link.active { box-shadow: inset 4px 0 0 var(--gold), 0 2px 10px var(--t-aura); }

@media (prefers-reduced-motion: reduce) { :is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) *, :is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) *::before, :is(.theme-frostwald, .theme-gruft, .theme-drachenhort, .theme-wildnis) *::after { animation: none !important; } }

/* Vorschau in den Einstellungen */
.set-theme { position: absolute; inset: 0; }
.set-themebadge { position: absolute; left: .45rem; top: .45rem; z-index: 3; padding: .12rem .55rem; border-radius: 99px; font-family: var(--heading); font-size: .64rem; font-weight: 700; letter-spacing: .06em; color: #2b1c0f; background: linear-gradient(90deg, #ffe27a, #f2b42a); box-shadow: 0 0 10px rgba(255, 210, 90, .6); }
.theme-mock { position: absolute; right: 7%; bottom: 9%; width: 58%; z-index: 2; }
.tm-card { display: grid; gap: 2px; padding: .35rem .45rem .45rem; border: 1px solid var(--t-border); border-radius: 4px; color: var(--ink); background: radial-gradient(ellipse at 50% 40%, var(--parchment-light), var(--parchment) 60%, var(--parchment-dark)); box-shadow: inset 0 0 14px var(--t-glow), 0 4px 12px rgba(0, 0, 0, .45), 0 0 14px var(--t-aura); font-size: .6rem; line-height: 1.2; }
.tm-title { font-family: var(--heading); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blood); margin-bottom: 1px; }
.tm-row { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1rem 1fr auto; align-items: center; gap: .3rem; padding: 1px 3px; border-radius: 2px; }
.tm-row:nth-of-type(even) { background: var(--t-row-alt); }
.tm-row.gold { background: var(--t-first); }
.tm-row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 35%, var(--t-sheen) 50%, transparent 65%); background-size: 260% 100%; animation: t-sheen 4.5s linear infinite; }
.tm-rank { display: grid; place-items: center; width: .95rem; height: .95rem; border-radius: 50%; font-size: .52rem; font-weight: 700; color: #1d130b; background: radial-gradient(circle at 35% 30%, #fff, #bbb); }
.tm-row.gold .tm-rank { background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, var(--gold-dark)); }
.tm-name { font-family: var(--heading); font-weight: 700; }
.tm-val { font-family: var(--heading); color: var(--ink-soft); }
.tm-btn { justify-self: end; margin-top: 2px; padding: 1px .45rem; border-radius: 3px; font-family: var(--heading); font-size: .5rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-btn-text); background: linear-gradient(180deg, var(--t-btn1), var(--t-btn2) 55%, var(--t-btn3)); border: 1px solid var(--gold); }


/* Vorschau-Karten: Motive relativ zur kleinen Fläche statt zum Fenster */
.bg-prev.bgx-drachenhort { background-size: 100% auto, 100% 100%, 100% 100%, 30px 17px, 100% 100%; }
.bg-prev.bgx-wildnis { background-size: 46% auto, 100% 30%, 100% 100%; }
.bg-prev.bgx-schmiede { background-size: 38% auto, 100% 100%, 100% 100%; }
.bg-prev.bgx-karte { background-size: 46% auto, 200px 200px, auto, auto, 220px 220px, 100% 100%; }

/* Spielleiter ⇄ Spieler */
.userbox button.mode-switch { border-color: var(--gold); }
.userbox button.mode-switch.playing { color: var(--gold-light); background: rgba(126, 26, 20, .45); }
.userbox button.mode-switch.playing:hover { background: rgba(168, 50, 42, .6); }

/* Schriftzug „DSAO“: kurz, daher größer und gesperrt */
.sn-brand { font-family: var(--heading); font-weight: 700; font-size: 1.6rem; letter-spacing: .16em; }
.topbar .brand { font-family: var(--heading); font-weight: 700; letter-spacing: .14em; }

/* ---- Season: Friedhof mit Kamerafahrt und „Coming soon“ in Blut ---------- */
.hw-graveyard { background: #04030a; border-color: #4a0a0a; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .5), inset 0 0 0 5px rgba(160, 20, 20, .35), 0 0 40px rgba(120, 0, 0, .25), var(--shadow); align-items: flex-start; padding-top: clamp(2rem, 7vh, 4.5rem); }
.hw-graveyard::after { background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(4, 2, 8, .55), transparent 75%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .65) 100%); }
.hw-graveyard .hw-content { width: 100%; max-width: 900px; }
.hw-graveyard .hw-kicker { color: #d9cfe6; text-shadow: 0 0 10px rgba(150, 120, 200, .5); opacity: 0; animation: hw-fade-in 1.2s ease-out .6s forwards; }
.hw-blood { display: block; width: min(100%, 880px); height: auto; margin: 0 auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(170, 0, 0, .35)) drop-shadow(0 3px 2px rgba(0, 0, 0, .7)); }
.hw-blood-text { font-family: var(--display); font-weight: 900; font-size: 132px; font-variant-ligatures: none; font-kerning: none; font-feature-settings: "liga" 0, "dlig" 0, "calt" 0, "kern" 0; fill: url(#hwBloodFill); stroke: #320000; stroke-width: 2.5px; paint-order: stroke; }
.hw-brush { stroke-dasharray: 300; stroke-dashoffset: 300; animation: hw-paint 2.6s cubic-bezier(.55, .05, .4, 1) 5.8s forwards; }
.hw-drip { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: hw-drip 1.8s cubic-bezier(.5, 0, .7, 1) forwards; }
.hw-drop { opacity: 0; transform-box: fill-box; animation: hw-drop 3.8s ease-in infinite; }
.hw-replay { position: absolute; right: .8rem; bottom: .8rem; z-index: 2; padding: .3rem .8rem; border-radius: 99px; border: 1px solid rgba(200, 40, 40, .5); background: rgba(10, 4, 8, .7); color: #e7c9c9; font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; cursor: pointer; opacity: 0; animation: hw-fade-in .8s ease-out 9s forwards; }
.hw-replay:hover, .hw-replay:focus-visible { background: rgba(90, 8, 8, .8); color: #fff; }

/* Kamera: alle Ebenen gleiten nach rechts, die vorderen schneller (Tiefe); dazu ein leichter Zoom heraus. */
.hw .hw-cam { transform-origin: 600px 430px; animation: hw-cam 6.8s cubic-bezier(.45, .05, .25, 1) .3s both; }
.hw .hw-pan { animation: 6.5s cubic-bezier(.5, .05, .25, 1) .3s both; }
.hw .hw-pan-far { animation-name: hw-pan-far; }
.hw .hw-pan-mid { animation-name: hw-pan-mid; }
.hw .hw-pan-near { animation-name: hw-pan-near; }
.hw .hw-clouds { animation: hw-drift 34s ease-in-out infinite alternate; }
.hw .hw-wisp { animation: hw-wisp 6s ease-in-out infinite; filter: drop-shadow(0 0 6px #7fffd4); }
@keyframes hw-pan-far { from { transform: translateX(0); } to { transform: translateX(-560px); } }
@keyframes hw-pan-mid { from { transform: translateX(0); } to { transform: translateX(-1080px); } }
@keyframes hw-pan-near { from { transform: translateX(0); } to { transform: translateX(-1800px); } }
@keyframes hw-cam { from { transform: scale(1.14) translateY(14px); } to { transform: scale(1); } }
@keyframes hw-paint { to { stroke-dashoffset: 0; } }
@keyframes hw-drip { to { transform: scaleY(1); } }
@keyframes hw-drop { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 55% { opacity: .95; transform: translateY(70px); } 62%, 100% { opacity: 0; transform: translateY(80px); } }
@keyframes hw-wisp { 0%, 100% { opacity: .15; transform: translate(0, 0); } 50% { opacity: .9; transform: translate(14px, -18px); } }
@keyframes hw-fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hw .hw-cam { animation: none; }
  .hw .hw-pan { animation: none; }
  .hw .hw-pan-far { transform: translateX(-560px); } .hw .hw-pan-mid { transform: translateX(-1080px); } .hw .hw-pan-near { transform: translateX(-1800px); }
  .hw-brush { animation: none; stroke-dashoffset: 0; }
  .hw-drip { animation: none; transform: none; }
  .hw-drop, .hw .hw-wisp, .hw .hw-clouds { animation: none; }
  .hw-graveyard .hw-kicker, .hw-replay { animation: none; opacity: 1; }
}
body.motion-reduced .hw .hw-pan-far { transform: translateX(-560px); } body.motion-reduced .hw .hw-pan-mid { transform: translateX(-1080px); } body.motion-reduced .hw .hw-pan-near { transform: translateX(-1800px); }

/* Season als Vollbild: Szene füllt den Inhaltsbereich unter der Kopfleiste, keine Fußzeile */
body.page-full { min-height: 100vh; min-height: 100dvh; }
body.page-full main { max-width: none; padding: 0; display: flex; flex-direction: column; }
body.page-full .site-footer { display: none; }
body.page-full .hw { flex: 1; min-height: 420px; border: 0; border-radius: 0; box-shadow: none; }
.hw-gm-btn { right: auto; left: .8rem; }

/* --------------------------------------------------------------------------
   Update-Bildschirm: erscheint einmal je Update beim Betreten des Spiels
   -------------------------------------------------------------------------- */
body.upd-open { overflow: hidden; }
.upd-backdrop { position: fixed; inset: 0; z-index: 2050; display: grid; place-items: center; padding: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, rgba(70, 40, 14, .78), rgba(8, 4, 2, .94) 70%); backdrop-filter: blur(4px);
  animation: upd-fade .45s ease-out both; }
.upd-backdrop.closing { animation: upd-fade-out .32s ease-in both; }
.upd-backdrop.closing .upd-card { animation: upd-card-out .32s ease-in both; }
.upd-rays { position: absolute; left: 50%; top: 32%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; pointer-events: none; opacity: .32;
  background: repeating-conic-gradient(from 0deg, rgba(243, 214, 122, .55) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 55%); mask: radial-gradient(circle, #000 0, transparent 55%);
  animation: upd-spin 60s linear infinite, upd-fade 1.2s ease-out both; }
.upd-sparks { position: absolute; inset: 0; pointer-events: none; }
.upd-sparks i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffd77a; box-shadow: 0 0 8px 2px rgba(255, 200, 90, .8);
  opacity: 0; animation: upd-spark 8s linear infinite; }
.upd-card { position: relative; width: min(820px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 1.6rem 1.6rem 1.3rem; border-radius: 10px; color: #f1e7d0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, .22), transparent 55%), linear-gradient(180deg, #2c1b0e, #160d06);
  border: 2px solid #c9a227; box-shadow: inset 0 0 0 5px #120a05, inset 0 0 0 6px rgba(201, 162, 39, .45), 0 30px 80px rgba(0, 0, 0, .75), 0 0 60px rgba(201, 162, 39, .18);
  transform-origin: 50% 30%; animation: upd-card-in .8s cubic-bezier(.2, 1.15, .35, 1) .1s both; }
.upd-close { position: absolute; top: .7rem; right: .7rem; z-index: 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  font-size: 1.05rem; color: #f3d67a; background: rgba(0, 0, 0, .45); border: 1px solid rgba(201, 162, 39, .7); transition: transform .2s, background .2s; }
.upd-close:hover, .upd-close:focus-visible { background: #7e1a14; color: #fff3c4; transform: rotate(90deg); outline: none; }
.upd-head { text-align: center; padding: 0 2.2rem; }
.upd-emblem { position: relative; display: inline-grid; place-items: center; width: 96px; height: 96px; margin-bottom: .3rem; }
.upd-emblem img { position: relative; width: 84px; height: 84px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); animation: upd-emblem-in 1s cubic-bezier(.2, 1.3, .4, 1) .35s both; }
.upd-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(243, 214, 122, .7); box-shadow: 0 0 22px rgba(243, 214, 122, .45);
  animation: upd-ring 2.6s ease-out 1.1s infinite; opacity: 0; }
.upd-kicker { margin: 0; font-family: var(--heading); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: #c9a227; animation: upd-up .6s ease-out .55s both; }
.upd-title { margin: .25rem 0 .35rem; font-family: var(--display); font-size: clamp(1.6rem, 4.2vw, 2.5rem); line-height: 1.1; letter-spacing: .02em;
  background: linear-gradient(100deg, #b8891b 0%, #f6e3a1 30%, #fffbe8 45%, #f3d67a 60%, #b8891b 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
  animation: upd-up .7s ease-out .6s both, upd-shine 4.5s ease-in-out 1.4s infinite; }
.upd-lead { margin: 0 auto 1.1rem; max-width: 56ch; font-style: italic; color: #d9c9a4; animation: upd-up .6s ease-out .7s both; }
.upd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.upd-tile { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; text-align: left; font: inherit; color: inherit; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 240, 200, .06), rgba(255, 240, 200, .02)); border: 1px solid rgba(201, 162, 39, .28);
  animation: upd-tile-in .55s cubic-bezier(.2, 1.1, .4, 1) both; transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
button.upd-tile { cursor: pointer; }
button.upd-tile:hover, button.upd-tile:focus-visible { transform: translateY(-2px); border-color: #f3d67a; background: linear-gradient(180deg, rgba(255, 230, 160, .12), rgba(255, 230, 160, .04)); box-shadow: 0 8px 20px rgba(0, 0, 0, .4), 0 0 14px rgba(243, 214, 122, .2); outline: none; }
.upd-tile.highlight { grid-column: span 2; padding: .9rem 1rem; border-color: rgba(243, 214, 122, .6);
  background: radial-gradient(ellipse at 0% 50%, rgba(201, 162, 39, .22), transparent 60%), linear-gradient(180deg, rgba(255, 240, 200, .08), rgba(255, 240, 200, .02)); }
.upd-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: #2b1c0f;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227 70%, #8a6a1c); box-shadow: 0 0 0 2px #1a0f07, 0 0 12px rgba(243, 214, 122, .35); }
.upd-icon .icon { width: 1.25rem; height: 1.25rem; }
.upd-tile.highlight .upd-icon { width: 3rem; height: 3rem; }
.upd-tile.highlight .upd-icon .icon { width: 1.6rem; height: 1.6rem; }
.upd-tile-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.upd-tile-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.upd-tile-head strong { font-family: var(--heading); font-size: .98rem; letter-spacing: .02em; color: #fff3d0; }
.upd-tile.highlight .upd-tile-head strong { font-size: 1.15rem; color: #f3d67a; }
.upd-tag { padding: .02rem .45rem; border-radius: 999px; font-family: var(--heading); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.upd-tag.new { color: #10240f; background: linear-gradient(180deg, #b9f0a6, #5fbf55); }
.upd-tag.rework { color: #0b1a33; background: linear-gradient(180deg, #cfe3ff, #7aa7e6); }
.upd-tag.gm { color: #2a0b08; background: linear-gradient(180deg, #ffc6b8, #d9705c); }
.upd-text { font-size: .9rem; line-height: 1.45; color: #d9c9a4; }
.upd-tile.highlight .upd-text { font-size: .98rem; color: #eadcb8; }
.upd-go { font-family: var(--heading); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #c9a227; }
.upd-foot { display: flex; justify-content: center; margin-top: 1.1rem; animation: upd-up .5s ease-out 1.5s both; }
.upd-enter { min-width: 14rem; justify-content: center; box-shadow: 0 0 18px rgba(243, 214, 122, .35); }
@media (max-width: 640px) {
  .upd-card { padding: 1.2rem .9rem 1rem; }
  .upd-head { padding: 0 1.8rem; }
  .upd-grid { grid-template-columns: 1fr; }
  .upd-tile.highlight { grid-column: auto; }
}
@keyframes upd-fade { from { opacity: 0; } }
@keyframes upd-fade-out { to { opacity: 0; } }
@keyframes upd-spin { to { transform: rotate(360deg); } }
@keyframes upd-card-in { 0% { opacity: 0; transform: perspective(900px) translateY(40px) rotateX(18deg) scale(.86); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes upd-card-out { to { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes upd-emblem-in { 0% { opacity: 0; transform: scale(.2) rotate(-200deg); } 70% { opacity: 1; transform: scale(1.12) rotate(10deg); } 100% { transform: none; } }
@keyframes upd-ring { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes upd-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes upd-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes upd-tile-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes upd-spark { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 80% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--drift, 0), -105vh); } }
@media (prefers-reduced-motion: reduce) {
  .upd-backdrop *, .upd-backdrop { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .upd-sparks, .upd-rays { display: none; }
}
body.motion-reduced .upd-backdrop, body.motion-reduced .upd-backdrop * { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
body.motion-reduced .upd-sparks, body.motion-reduced .upd-rays { display: none; }

/* --------------------------------------------------------------------------
   Clan-Ränge: Abzeichen je Rang und der Editor „Ränge & Rechte“
   -------------------------------------------------------------------------- */
.rc-gold { --rc: #c9a227; --rc-hi: #f6e3a1; --rc-deep: #6b4f12; }
.rc-silber { --rc: #9aa4b2; --rc-hi: #eef2f7; --rc-deep: #4a525e; }
.rc-bronze { --rc: #a8652c; --rc-hi: #f0c08a; --rc-deep: #5a3212; }
.rc-blut { --rc: #a3241d; --rc-hi: #ff9b8a; --rc-deep: #4f0c08; }
.rc-wald { --rc: #2f7a3f; --rc-hi: #a6e8b2; --rc-deep: #12391b; }
.rc-nacht { --rc: #2a3f7a; --rc-hi: #a9c0ff; --rc-deep: #101a3a; }
.rc-eis { --rc: #3f8fb5; --rc-hi: #d6f2ff; --rc-deep: #12384a; }
.rc-violett { --rc: #6a3a9a; --rc-hi: #dcc2ff; --rc-deep: #2c1342; }
.rank-badge { display: inline-grid; place-items: center; width: 1.7rem; height: 1.95rem; vertical-align: middle; color: var(--rc-hi);
  background: linear-gradient(180deg, var(--rc), var(--rc-deep)); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.rank-badge .icon { width: .95rem; height: .95rem; margin-top: -.2rem; }
.tag.rank-tag { color: var(--rc-deep); background: color-mix(in srgb, var(--rc) 22%, #fff8e6); border-color: color-mix(in srgb, var(--rc) 60%, transparent); }
.rk-dialog { max-width: 980px; }
.rk-editor { display: grid; gap: .9rem; }
.rk-top { display: grid; gap: .4rem; }
.rk-ladder { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: .6rem .7rem; border-radius: 8px;
  background: linear-gradient(180deg, #2c1b0e, #1a0f07); border: 1px solid #6b4e1f; }
.rk-ladder li { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .3rem; border-radius: 999px; color: #f1e7d0; font-family: var(--heading); font-size: .82rem; background: rgba(255, 255, 255, .06); }
.rk-ladder li + li::before { content: '›'; margin: 0 .25rem 0 -.1rem; color: #8a7a62; }
.rk-ladder li.lead { background: rgba(201, 162, 39, .18); }
.rk-card { position: relative; padding: .7rem .8rem .7rem 1rem; border-radius: 8px; background: rgba(255, 252, 240, .7); border: 1px solid var(--line);
  box-shadow: inset 4px 0 0 var(--rc); }
.rk-card.leader { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 18%, #fff8e6), #fff8e6 60%); border-color: color-mix(in srgb, var(--rc) 50%, transparent); }
.rk-card header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rk-card .rank-badge { width: 2.2rem; height: 2.5rem; }
.rk-card .rank-badge .icon { width: 1.2rem; height: 1.2rem; }
.rk-name { flex: 1 1 160px; min-width: 0; font-family: var(--heading); font-size: 1.05rem; font-weight: 700; padding: .3rem .5rem; }
.rk-count { font-size: .82rem; color: var(--ink-soft); }
.rk-tag { padding: .1rem .5rem; border-radius: 999px; font-family: var(--heading); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: rgba(0, 0, 0, .06); }
.rk-tag.off { color: #6b4f12; background: rgba(201, 162, 39, .25); }
.rk-order { display: inline-flex; flex-direction: column; gap: 2px; }
.rk-order button, .rk-del { display: grid; place-items: center; width: 1.6rem; height: 1.1rem; padding: 0; font-size: .6rem; line-height: 1; cursor: pointer; color: var(--ink-soft); background: rgba(0, 0, 0, .05); border: 1px solid var(--line); border-radius: 4px; }
.rk-del { width: 1.8rem; height: 1.8rem; font-size: .85rem; border-radius: 50%; }
.rk-del:hover:not(:disabled) { color: #fff; background: var(--blood); }
.rk-order button:disabled, .rk-del:disabled { opacity: .35; cursor: default; }
.rk-all { margin: .5rem 0 .3rem; font-style: italic; color: var(--ink-soft); }
.rk-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem .9rem; margin: .7rem 0 .5rem; }
.rk-group h4 { margin: 0 0 .3rem; font-family: var(--heading); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.rk-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.rk-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem .25rem .4rem; font: inherit; font-size: .84rem; cursor: pointer; color: var(--ink-soft);
  background: rgba(255, 255, 255, .55); border: 1px dashed rgba(110, 78, 38, .45); border-radius: 999px; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.rk-chip .icon { width: .95rem; height: .95rem; opacity: .55; }
.rk-chip:hover { transform: translateY(-1px); border-color: var(--rc); }
.rk-chip.on { color: #fff8e6; background: linear-gradient(180deg, var(--rc), var(--rc-deep)); border: 1px solid var(--rc-deep); box-shadow: 0 2px 6px color-mix(in srgb, var(--rc) 45%, transparent); }
.rk-chip.on .icon { opacity: 1; }
.rk-chip.peek.on { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 2px 8px color-mix(in srgb, var(--rc) 50%, transparent); }
.rk-card footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.rk-looks { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.rk-swatches, .rk-icons { display: flex; flex-wrap: wrap; gap: .25rem; }
.rk-swatch { width: 1.35rem; height: 1.35rem; padding: 0; cursor: pointer; border-radius: 50%; background: linear-gradient(180deg, var(--rc-hi), var(--rc) 55%, var(--rc-deep)); border: 2px solid rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.rk-swatch.on { box-shadow: 0 0 0 2px var(--ink); transform: scale(1.12); }
.rk-iconpick { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; cursor: pointer; color: var(--ink-soft); background: rgba(255, 255, 255, .5); border: 1px solid var(--line); border-radius: 5px; }
.rk-iconpick .icon { width: 1rem; height: 1rem; }
.rk-iconpick.on { color: #fff8e6; background: var(--ink); border-color: var(--ink); }
.rk-quick { display: inline-flex; gap: .3rem; }
.rk-add { padding: .7rem; font-family: var(--heading); letter-spacing: .06em; cursor: pointer; color: var(--ink-soft); background: transparent; border: 2px dashed rgba(110, 78, 38, .45); border-radius: 8px; }
.rk-add:hover { color: var(--ink); border-color: var(--gold-dark); background: rgba(201, 162, 39, .08); }
.rk-save { position: sticky; bottom: 0; padding-top: .6rem; background: linear-gradient(180deg, transparent, var(--parchment) 40%); }
.peek-hint { display: flex; align-items: center; gap: .3rem; }
.auto-fight-note strong { font-family: var(--heading); font-size: 1.05rem; color: var(--blood); }
.auto-fight-note p { margin: .3rem 0 .5rem; }
.wallet.inv-gold .coins { font-weight: 700; }
.cp-hidden { margin: .6rem 0 0; font-style: italic; color: var(--ink-soft); }
/* ---- Die Krone – freigeschaltet ---- */
.kr-page { display: grid; gap: 1rem; }
.kr-preview { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; padding: .55rem .9rem; border-radius: 8px; font-size: .88rem; color: #3b2a08; background: repeating-linear-gradient(135deg, rgba(255, 220, 120, .55) 0 14px, rgba(255, 236, 170, .55) 14px 28px); border: 1px dashed #b08a25; }
.kr-hall { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(217, 172, 58, .55); }
.kr-hall .soon-figure { border-radius: 0; box-shadow: none; }
.kr-hall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 60% at 50% 45%, rgba(255, 215, 110, .22), transparent 70%); animation: kr-glow 4s ease-in-out infinite alternate; }
.kr-hall.empty::after { background: radial-gradient(ellipse 45% 60% at 50% 45%, rgba(160, 170, 220, .12), transparent 70%); }
@keyframes kr-glow { from { opacity: .55; } to { opacity: 1; } }
.kr-hall-kicker { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); font-family: var(--heading); font-size: clamp(.6rem, 1.6vw, .85rem); letter-spacing: .3em; text-transform: uppercase; color: #ffe7a6; text-shadow: 0 0 10px rgba(0, 0, 0, .9), 0 0 18px rgba(255, 200, 90, .5); white-space: nowrap; }
.kr-banner-crest { position: absolute; top: 27%; width: 6.4%; display: grid; place-items: center; transform-origin: 50% -80%; animation: kr-sway 5s ease-in-out infinite alternate; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.kr-banner-crest svg { width: 100%; height: auto; }
.kr-banner-crest.left { left: 18.9%; }
.kr-banner-crest.right { left: 74.7%; animation-delay: -2s; }
@keyframes kr-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.kr-sparkle { position: absolute; left: 42%; right: 42%; top: 22%; height: 34%; pointer-events: none; }
.kr-sparkle i { position: absolute; left: calc(var(--i) * 8.5%); bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffd36b; opacity: 0; animation: kr-rise 3.6s ease-in infinite; animation-delay: calc(var(--i) * -.31s); }
@keyframes kr-rise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120%); opacity: 0; } }
.kr-plate { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; width: min(640px, calc(100% - 2rem)); margin: -3.2rem auto 0; padding: .8rem 1.1rem; border-radius: 14px; color: #f6e6bb; background: var(--noise), linear-gradient(180deg, #3a2410, #1b0f07); border: 2px solid #c9a227; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 231, 166, .25); }
.kr-plate::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 231, 166, .35) 50%, transparent 65%); background-size: 260% 100%; animation: t-sheen 5s linear infinite; }
.kr-plate-crest { position: relative; flex: none; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a3c18, #20130a); border: 2px solid #e3b23c; box-shadow: 0 0 18px rgba(255, 200, 90, .45); }
.kr-plate-crown { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); color: #ffd36b; filter: drop-shadow(0 0 6px rgba(255, 211, 107, .9)); }
.kr-plate-crown svg { width: 1.6rem; height: 1.6rem; }
.kr-plate.vacant .kr-plate-crown { position: static; transform: none; color: #9aa3c7; filter: none; }
.kr-plate-text { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.kr-plate-text small { font-family: var(--heading); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #c9b58a; }
.kr-plate-text strong { font-family: var(--display); font-size: clamp(1.15rem, 3vw, 1.6rem); line-height: 1.15; background: linear-gradient(180deg, #fff3c4, #e3b23c 60%, #a87a1a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kr-plate-tag { -webkit-text-fill-color: #f0a58a; font-size: .75em; }
.kr-plate-text > span { font-size: .85rem; color: #d9c79c; }
.kr-plate-bonus { flex: none; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227 60%, #8a6512); color: #2a1a05; box-shadow: 0 0 14px rgba(255, 211, 107, .6); }
.kr-plate-bonus b { font-family: var(--display); font-size: 1.05rem; line-height: 1; }
.kr-plate-bonus small { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }
.kr-stats { margin: .2rem 0 0; }
.kr-stats .kr-storm { background: linear-gradient(180deg, #3a2410, #1d120a); border-color: #c9a227; }
.kr-stats .kr-storm strong { color: #ffd36b; font-variant-numeric: tabular-nums; }
.kr-stats .kr-storm span { color: #c9b58a; }
.kr-card h2 { display: flex; align-items: center; gap: .45rem; }
.kr-card h2 svg { width: 1.1em; height: 1.1em; color: var(--gold-dark, #8a6512); }
.kr-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; counter-reset: ph; }
.kr-phases li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .8rem .9rem; border-radius: 10px; background: rgba(255, 250, 235, .45); border: 1px solid var(--line); }
.kr-phases li:not(:last-child)::after { content: "➜"; position: absolute; right: -.75rem; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--gold-dark, #8a6512); font-size: .9rem; }
.kr-phases li.now { border-color: #c9a227; background: linear-gradient(180deg, rgba(255, 228, 150, .7), rgba(255, 245, 215, .7)); box-shadow: 0 0 0 2px rgba(201, 162, 39, .35), 0 6px 16px rgba(201, 162, 39, .25); }
.kr-phases li.done { opacity: .6; }
.kr-phases li .tag { position: absolute; top: .5rem; right: .5rem; }
.kr-phase-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: #ffe7a6; background: radial-gradient(circle at 35% 30%, #6a4418, #2a1709); border: 1px solid #c9a227; }
.kr-phase-icon svg { width: 1.2rem; height: 1.2rem; }
.kr-phases small { font-family: var(--heading); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.kr-phases strong { display: block; font-family: var(--heading); font-size: 1rem; }
.kr-phases p { margin: .2rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.kr-claims { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.kr-claim { display: grid; grid-template-columns: 1.8rem auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .35rem .6rem; border-radius: 8px; background: rgba(255, 250, 235, .45); border: 1px solid var(--line); }
.kr-claim.challenger { border-color: rgba(155, 42, 32, .45); }
.kr-claim.me { background: rgba(236, 210, 126, .5); box-shadow: inset 4px 0 0 var(--blood); }
.kr-claim-place { font-family: var(--display); text-align: center; color: var(--ink-soft); }
.kr-claim.challenger .kr-claim-place { color: var(--blood); }
.kr-claim-main { min-width: 0; display: grid; gap: .25rem; }
.kr-claim-name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-family: var(--heading); overflow: hidden; }
.kr-claim-name a { color: inherit; text-decoration: none; }
.kr-claim-name a:hover { color: var(--blood); }
.kr-claim-name small { color: var(--blood); }
.kr-badge { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .45rem; border-radius: 99px; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #fbe9c4; background: linear-gradient(180deg, #9b2a20, #5e130d); }
.kr-badge svg { width: .8rem; height: .8rem; }
.kr-claim-val { font-family: var(--heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.kr-bar { height: 7px; border-radius: 99px; background: rgba(110, 78, 38, .15); overflow: hidden; }
.kr-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b08a25, #ffd36b); animation: kr-fill 1.1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.kr-claim.challenger .kr-bar span { background: linear-gradient(90deg, #7a1c14, #d9472f); }
@keyframes kr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kr-mine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; padding: .6rem .8rem; border-radius: 8px; background: rgba(155, 42, 32, .08); border-left: 3px solid var(--blood); }
.kr-mine.gold { background: rgba(255, 220, 120, .3); border-left-color: #c9a227; }
.kr-mine p { margin: 0; }
.kr-guard { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.kr-guard li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; }
.kr-guard-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; color: #ffe7a6; background: linear-gradient(180deg, #4a3a66, #22183a); border: 1px solid #8a7bb8; }
.kr-guard-icon svg { width: 1.1rem; height: 1.1rem; }
.kr-guard-head { display: flex; justify-content: space-between; font-size: .9rem; }
.kr-bar.guard { height: 9px; }
.kr-bar.guard span { background: linear-gradient(90deg, #4a5fa8, #8fb0ff); }
.kr-guard li.high .kr-bar span { background: linear-gradient(90deg, #2f7a4a, #7fd69a); }
.kr-guard li.low .kr-bar span { background: linear-gradient(90deg, #7a1c14, #d9472f); }
.kr-sub { display: flex; align-items: center; gap: .4rem; margin: 1.1rem 0 .5rem; font-size: 1rem; }
.kr-sub svg { width: 1.1rem; height: 1.1rem; color: #c9a227; }
.kr-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.kr-perks li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center; }
.kr-perk-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #2a1a05; background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); }
.kr-perk-icon svg { width: 1rem; height: 1rem; }
.kr-perks strong { display: block; font-family: var(--heading); font-size: .92rem; }
.kr-perks small { color: var(--ink-soft); }
.kr-timeline { list-style: none; margin: .6rem 0 0; padding: 1.4rem 0 .4rem; display: flex; gap: 1rem; overflow-x: auto; position: relative; scroll-snap-type: x proximity; }
.kr-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 2.65rem; height: 2px; background: linear-gradient(90deg, transparent, #c9a227 8%, #c9a227 92%, transparent); }
.kr-timeline li { position: relative; flex: none; width: 10.5rem; display: grid; justify-items: center; gap: .15rem; text-align: center; scroll-snap-align: start; }
.kr-timeline strong { font-family: var(--heading); font-size: .9rem; }
.kr-timeline small { color: var(--ink-soft); font-size: .76rem; }
.kr-days { font-style: italic; }
.kr-medal { position: relative; z-index: 1; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid #6b4c0c; }
.kr-medal svg { width: 1.3rem; height: 1.3rem; }
.kr-medal.gold { color: #3b2a08; background: radial-gradient(circle at 35% 30%, #fff3c4, #e3b23c 60%, #8a6512); box-shadow: 0 0 14px rgba(255, 211, 107, .8); animation: t-pulse 2.6s ease-in-out infinite; --c1: rgba(255, 211, 107, .9); --c2: rgba(255, 240, 200, .5); }
.kr-medal.silber { color: #2b2f36; background: radial-gradient(circle at 35% 30%, #ffffff, #b9c2cc 60%, #6d7680); border-color: #59616b; }
@media (max-width: 760px) {
  .kr-phases { grid-template-columns: 1fr; }
  .kr-phases li:not(:last-child)::after { content: "⬇"; right: auto; left: 1.4rem; top: auto; bottom: -.85rem; transform: none; }
  .kr-plate { margin-top: -1.2rem; gap: .7rem; padding: .7rem .8rem; }
  .kr-plate-crest { width: 3.4rem; height: 3.4rem; }
  .kr-plate-crest > svg { width: 44px; height: 44px; }
  .kr-plate-bonus { width: 3.3rem; height: 3.3rem; }
  .kr-plate-bonus b { font-size: .85rem; }
}
.kr-claim-parts { color: var(--ink-soft); font-size: .72rem; }
.kr-stats .kr-storm.fallen { background: linear-gradient(180deg, #5e130d, #2a0806); border-color: #d9472f; }
.kr-stats .kr-storm.fallen strong { color: #ffb08a; }
.kr-hall.ruined::after { background: radial-gradient(ellipse 45% 60% at 50% 45%, rgba(255, 90, 40, .22), transparent 70%); }
.kr-guard li.none .kr-bar span { width: 0 !important; }
.kr-defs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .45rem; }
.kr-def { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: center; padding: .45rem .6rem; border-radius: 8px; background: rgba(255, 250, 235, .5); border: 1px solid var(--line); }
.kr-def strong { display: block; font-family: var(--heading); font-size: .86rem; }
.kr-def small { color: var(--ink-soft); font-size: .74rem; }
.kr-def-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; color: #ffe7a6; background: linear-gradient(180deg, #5a4636, #2a1d14); border: 1px solid #8a6a3a; }
.kr-def-icon svg { width: 1.05rem; height: 1.05rem; }
.kr-def-emoji { font-size: 1.1rem; line-height: 1; }
.kr-def.turret .kr-def-icon { background: radial-gradient(circle at 40% 35%, #6a4a20, #24160a); border-color: #c9a227; box-shadow: 0 0 10px rgba(255, 200, 90, .35); }
.kr-def.turret.tesla .kr-def-icon { background: radial-gradient(circle at 40% 35%, #3a5ea8, #101a38); border-color: #8fb0ff; box-shadow: 0 0 12px rgba(120, 170, 255, .55); animation: kr-zap 2.4s ease-in-out infinite; }
@keyframes kr-zap { 0%, 88%, 100% { box-shadow: 0 0 10px rgba(120, 170, 255, .45); } 92% { box-shadow: 0 0 22px rgba(170, 210, 255, .95); } }
.kr-def.base { border-color: #c9a227; background: rgba(255, 228, 150, .45); }
.kr-def.reloading .kr-def-icon { opacity: .65; }
.kr-def.damaged { border-color: rgba(155, 42, 32, .35); }
.kr-def.ruined { opacity: .55; }
.kr-def.ruined .kr-def-icon { filter: grayscale(1); }
.kr-def.group { grid-column: 1 / -1; }
.world-import { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-top: .8rem; padding: .7rem .9rem; border-radius: 8px; background: rgba(255, 228, 150, .35); border: 1px dashed #b08a25; }
.world-import strong { display: block; font-family: var(--heading); }
.world-import small { color: var(--ink-soft); }
/* Schnell steigern: kleine +2 / +3 neben +1 */
.raise-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .2rem; min-width: 0; }
.raise-row .raise-btn { flex: 1 1 auto; min-width: 0; }
.raise-quicks { display: inline-flex; gap: .2rem; }
.raise-row .raise-quicks { flex: 1 1 auto; }
.raise-row .raise-quick { flex: 1 1 0; }
.raise-quick {
  min-width: 1.7rem; padding: .1rem .3rem; border-radius: 3px; cursor: pointer;
  font-family: var(--heading); font-size: .62rem; font-weight: 700;
  color: #f2f6e9; background: linear-gradient(180deg, #3f8a49, var(--forest)); border: 1px solid rgba(46, 99, 52, .8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.raise-quick:hover { filter: brightness(1.12); }
.raise-quick:active { transform: translateY(1px); }
.raise-stack { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; }
.raise-stack .raise-quicks .raise-quick { flex: 1 1 0; }
/* Steigern hinter dem Pfeil: erst nach einem Klick sichtbar */
body:not(.raise-open) .raise-row, body:not(.raise-open) .raise-stack { display: none; }
body.raise-open .raise-row, body.raise-open .raise-stack { animation: raise-in .22s ease-out both; }
@keyframes raise-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.card > .raise-toggle { position: absolute; top: .9rem; right: .9rem; z-index: 2; }
.raise-toggle {
  display: inline-flex; align-items: center; gap: .25rem; height: 2rem; min-width: 2rem; padding: 0 .45rem; border-radius: 999px; cursor: pointer;
  color: var(--ink-soft); background: rgba(255, 250, 235, .75); border: 1px solid var(--line);
  font-family: var(--heading); font-size: .7rem; font-weight: 700;
}
.raise-toggle svg { width: 1rem; height: 1rem; transition: transform .2s; }
.raise-toggle.ready { color: #f2f6e9; background: linear-gradient(180deg, #3f8a49, var(--forest)); border-color: rgba(46, 99, 52, .8); box-shadow: 0 0 0 0 rgba(63, 138, 73, .55); animation: raise-pulse 2.4s ease-out infinite; }
.raise-toggle.on { animation: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
.raise-toggle.on svg { transform: rotate(180deg); }
.raise-toggle:hover { filter: brightness(1.08); }
@keyframes raise-pulse { 0% { box-shadow: 0 0 0 0 rgba(63, 138, 73, .55); } 70% { box-shadow: 0 0 0 8px rgba(63, 138, 73, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 138, 73, 0); } }
@media (prefers-reduced-motion: reduce) { .raise-toggle.ready { animation: none; } }
.raise-toggle-ap small { font-size: .62em; opacity: .85; }
/* ---- Anmeldung im DSAO-Design: dunkles Leder, Gold, W20 im Achteck ---- */
.gate { max-width: 440px; margin: 9vh auto 0; }
.gate .gate-card {
  position: relative; overflow: visible; padding: 4.4rem 2rem 1.6rem; text-align: left; color: var(--parchment-light);
  background: var(--noise), radial-gradient(ellipse 120% 70% at 50% 0%, rgba(201, 162, 39, .16), transparent 60%), linear-gradient(180deg, rgba(58, 36, 16, .96), rgba(27, 15, 7, .97));
  border: 2px solid #c9a227; border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 231, 166, .18), inset 0 0 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .55), 0 30px 70px rgba(0, 0, 0, .75), 0 0 60px rgba(201, 162, 39, .12);
  backdrop-filter: blur(2px);
}
.gate .gate-card::before, .gate .gate-card::after { opacity: .55; filter: sepia(1) saturate(2.4) brightness(1.1); }
/* Gold-Schimmer über den Rand */
.gate .gate-card > .gate-title { position: relative; }
.gate-logo { position: absolute; top: -64px; left: 50%; width: 120px; height: 120px; transform: translateX(-50%); display: grid; place-items: center; z-index: 2; }
.gate-logo img { position: relative; width: 112px; height: 112px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .8)) drop-shadow(0 0 18px rgba(255, 200, 90, .35)); animation: gate-float 5s ease-in-out infinite; }
.gate-logo-ring { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 110, .4), rgba(255, 190, 80, .08) 55%, transparent 70%); animation: gate-glow 3.6s ease-in-out infinite; }
.gate-logo-ring.two { inset: -4px; background: none; border: 1px dashed rgba(255, 215, 110, .45); animation: gate-spin 40s linear infinite; }
@keyframes gate-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes gate-glow { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes gate-spin { to { transform: rotate(360deg); } }
.gate .gate-title {
  margin: 0 0 .15rem; text-align: center; font-family: var(--display); font-weight: 900; font-size: 3rem; letter-spacing: .14em;
  background: linear-gradient(180deg, #fff3c4 0%, #e6b93f 50%, #9b7520 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
}
.gate .gate-sub { margin: 0 0 1.3rem; text-align: center; font-style: italic; color: #d9c79c; }
.gate .gate-sub::after { content: ""; display: block; width: 160px; height: 12px; margin: .55rem auto 0; background: var(--divider) center / contain no-repeat; filter: sepia(1) saturate(2) brightness(1.3); opacity: .8; }
/* Umschalter Anmelden / Neuer Held */
.gate-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 1.1rem; padding: 3px; border-radius: 99px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .45); }
.gate-switch a { padding: .45rem .6rem; border-radius: 99px; text-align: center; text-decoration: none; font-family: var(--heading); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #d9c79c; transition: background .2s, color .2s; }
.gate-switch a:hover { color: #fff3c4; }
.gate-switch a.active { color: #2a1a05; background: linear-gradient(180deg, #fff3c4, #e6b93f 60%, #b08a25); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
/* Felder und Texte auf dunklem Grund */
.gate .gate-card .hint { color: #c9b58a; }
.gate .gate-card .hint a { color: #ffd36b; }
.gate .gate-card label, .gate .gate-card .field > span, .gate .gate-card .field label { color: #e8d6a8; }
.gate .gate-card input {
  color: var(--ink); background: linear-gradient(180deg, #fbf3df, #f1e2bd); border: 1px solid #b08a25;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}
.gate .gate-card input:focus { outline: none; border-color: #ffd36b; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 3px rgba(255, 211, 107, .35); }
.gate .gate-card .error { color: #ffb08a; }
.gate .gate-card .btn.big { min-width: 12rem; letter-spacing: .14em; box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 211, 107, .35); }
@media (max-aspect-ratio: 4/5) {
  body.gate-page .gate { margin-top: 30vh; }
  body.gate-page .gate .gate-card { padding-top: 3.8rem; }
}
@media (max-width: 480px) {
  .gate .gate-card { padding: 3.8rem 1.1rem 1.3rem; }
  .gate-logo { top: -54px; width: 100px; height: 100px; }
  .gate-logo img { width: 92px; height: 92px; }
  .gate .gate-title { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) { .gate-logo img, .gate-logo-ring { animation: none; } }
.gate .gate-card .field label > span { color: #e8d6a8; opacity: 1; }

/* ==========================================================================
   Weltkarte als Spielfeld über den ganzen Bildschirm (#/welt)
   ========================================================================== */
body.world-mode { overflow: hidden; }
body.world-mode .sidenav, body.world-mode .topbar, body.world-mode .site-footer { display: none !important; }
body.world-mode.has-side { padding-left: 0; }
body.world-mode main { max-width: none; padding: 0; margin: 0; }
.wm.wm-immersive { position: fixed; inset: 0; z-index: 50; margin: 0; border: 0; border-radius: 0; box-shadow: none; display: block; }
.wm-immersive .wm-body { position: absolute; inset: 0; }
.wm-immersive .wm-stage { position: absolute; inset: 0; height: auto; }
/* Schwebende Teile: dunkles Glas mit Goldrand */
.wm-immersive :is(.wm-menu-btn, .wm-hud, .wm-rail, .wm-dock, .wm-drawer, .wm-figtoggle) {
  background: linear-gradient(180deg, rgba(43, 29, 18, .88), rgba(20, 13, 8, .9)); border: 1px solid rgba(201, 162, 39, .6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 231, 166, .08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Oben links: zum Menü */
.wm-menu-btn { position: absolute; z-index: 8; top: .8rem; left: .8rem; display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .9rem .35rem .4rem; border-radius: 14px; text-decoration: none; color: #ffe7a6; transition: transform .15s, border-color .15s; }
.wm-menu-btn:hover { transform: translateY(-1px); border-color: #ffd36b; }
.wm-menu-btn .brand-mark { width: 38px; height: 38px; }
.wm-menu-label { display: grid; line-height: 1.05; }
.wm-menu-label b { font-family: var(--heading); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.wm-menu-label small { font-family: var(--display); font-size: .65rem; letter-spacing: .25em; color: #c9b58a; }
.wm-menu-label b::before { content: "☰ "; color: #ffd36b; }
/* Oben Mitte: Titel, Reisepunkte, Zeit, Filter */
.wm-hud { position: absolute; z-index: 7; top: .8rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 26rem); padding: .4rem .8rem; border-radius: 16px; }
.wm-hud .wm-title { margin: 0 .3rem 0 0; }
.wm-hud .wm-chips { gap: .25rem; }
.wm-immersive .wm-top-right { position: absolute; z-index: 6; top: 4.6rem; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 2rem)); display: grid; gap: .4rem; justify-items: center; pointer-events: none; }
.wm-immersive .wm-top-right > * { pointer-events: auto; }
/* Rechts: Ansicht */
.wm-rail { position: absolute; z-index: 7; right: .8rem; top: 50%; transform: translateY(-50%); display: grid; gap: .35rem; padding: .4rem; border-radius: 14px; }
.wm-rail .wm-btn { width: 2.5rem; height: 2.5rem; font-size: 1.15rem; border-radius: 10px; }
/* Unten: Dock mit dem kleinen Menü */
.wm-dock { position: absolute; z-index: 7; bottom: .9rem; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: .25rem; padding: .35rem; border-radius: 18px; max-width: calc(100% - 1.6rem); overflow-x: auto; }
.wm-dock-btn { display: grid; justify-items: center; gap: .1rem; min-width: 4.4rem; padding: .35rem .55rem; border: 0; border-radius: 12px; background: transparent; color: #f3e2b0; cursor: pointer; text-decoration: none; font: inherit; transition: background .15s, transform .15s; }
.wm-dock-btn:hover { background: rgba(201, 162, 39, .18); transform: translateY(-2px); }
.wm-dock-btn.on, .wm-dock-btn.admin.on { background: linear-gradient(180deg, #fff3c4, #e6b93f 60%, #b08a25); color: #2a1a05; }
.wm-dock-ic { font-size: 1.35rem; line-height: 1.2; }
.wm-dock-label { font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.wm-dock-btn.admin { background: linear-gradient(180deg, rgba(155, 42, 32, .55), rgba(94, 19, 13, .55)); }
.wm-dock-search { display: grid; align-items: center; padding: 0 .3rem 0 .5rem; margin-left: .2rem; border-left: 1px solid rgba(201, 162, 39, .35); }
.wm-dock-search .wm-select { height: 2.4rem; max-width: 11rem; }
/* Spielleitung: Schublade links */
.wm-drawer { position: absolute; z-index: 9; top: 4.6rem; left: .8rem; bottom: 6.2rem; width: min(460px, calc(100% - 1.6rem)); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; animation: wm-drawer-in .25s ease-out; }
@keyframes wm-drawer-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.wm-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-bottom: 1px solid rgba(201, 162, 39, .45); background: linear-gradient(180deg, rgba(155, 42, 32, .5), rgba(94, 19, 13, .35)); }
.wm-drawer-head strong { font-family: var(--heading); letter-spacing: .1em; text-transform: uppercase; color: #ffe7a6; }
.wm-drawer-head .wm-x { position: static; color: #ffe39a; background: rgba(255, 255, 255, .08); }
.wm-drawer-body { flex: 1; overflow: auto; padding: .2rem .2rem .6rem; }
.wm-immersive .wm-drawer .wm-gm { display: block !important; margin: 0; border: 0; background: transparent; }
.wm-immersive .wm-drawer .wm-gm-in { padding: .6rem .7rem; }
/* Panels nicht unter Menü, Leiste und Dock */
.wm-immersive .wm-info { top: 4.6rem; right: 4.6rem; max-height: calc(100% - 11rem); }
.wm-immersive :is(.wm-legend, .wm-journal) { top: 4.6rem; left: .8rem; max-height: calc(100% - 11rem); z-index: 8; }
.wm-immersive.wm-is-gm :is(.wm-legend, .wm-journal) { left: auto; right: 4.6rem; }
.wm-immersive .wm-figtoggle { top: auto; bottom: 6.2rem; right: .8rem; }
.wm-immersive .wm-compass { left: auto; right: 1rem; bottom: 9rem; }
.wm-immersive .wm-banner { top: 4.6rem; z-index: 6; }
/* Handy: Menü und Leisten kompakter, Dock scrollt */
@media (max-width: 760px) {
  .wm-hud { top: auto; bottom: 5.6rem; max-width: calc(100% - 1.6rem); padding: .3rem .5rem; gap: .35rem; }
  .wm-hud .wm-title, .wm-hud .wm-chips { display: none; }
  .wm-menu-btn { top: .6rem; left: .6rem; padding-right: .7rem; }
  .wm-menu-btn .brand-mark { width: 32px; height: 32px; }
  .wm-rail { top: .6rem; right: .6rem; transform: none; grid-auto-flow: row; }
  .wm-rail .wm-btn { width: 2.2rem; height: 2.2rem; }
  .wm-dock { bottom: .6rem; left: .6rem; right: .6rem; transform: none; max-width: none; justify-content: flex-start; }
  .wm-dock-btn { min-width: 3.9rem; }
  .wm-dock-search { display: none; }
  .wm-drawer { top: 3.8rem; left: .6rem; right: .6rem; bottom: 5.4rem; width: auto; }
  .wm-immersive .wm-info { top: auto; bottom: 5.6rem; right: .6rem; left: .6rem; width: auto; max-height: 55%; }
  .wm-immersive :is(.wm-legend, .wm-journal) { top: 3.8rem; left: .6rem; right: .6rem; width: auto; max-height: calc(100% - 9.5rem); }
  .wm-immersive .wm-figtoggle { bottom: auto; top: 3.9rem; left: .6rem; right: auto; }
  .wm-immersive .wm-compass { display: none; }
  .wm-immersive .wm-top-right { top: 3.6rem; }
}
/* Versiegelte Karte */
.world-locked { max-width: 640px; margin: 8vh auto 0; text-align: center; padding: 2.2rem 1.6rem 1.6rem; }
.world-locked h1 { margin: .8rem 0 .5rem; }
.world-locked-seal { position: relative; width: 96px; height: 96px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; color: #ffe7a6; background: radial-gradient(circle at 40% 35%, #6a4418, #2a1709); border: 2px solid #c9a227; box-shadow: 0 0 22px rgba(201, 162, 39, .4); }
.world-locked-seal > svg { width: 46px; height: 46px; opacity: .55; }
.world-locked-lock { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #c0392b, #5e130d); border: 2px solid #e3b23c; }
.world-locked-lock svg { width: 20px; height: 20px; }
.btn.wm-unlock { background: linear-gradient(180deg, #3f8a49, var(--forest)); color: #f2f6e9; border-color: rgba(46, 99, 52, .8); }
/* Feinschliff Vollbild: Ereignis-Leiste unter dem Kopf, Dock-Knöpfe schrumpfen nicht */
.wm-immersive .wm-top-right { top: 6.4rem; }
.wm-immersive .wm-evbar { justify-content: center; }
.wm-dock-btn { flex: none; }
@media (max-width: 760px) {
  .wm-menu-btn { padding: .3rem .6rem .3rem .3rem; }
  .wm-menu-label small { display: none; }
  .wm-hud { top: 3.9rem; bottom: auto; left: .6rem; right: 3.6rem; transform: none; max-width: none; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; border-radius: 12px; }
  .wm-hud :is(.wm-ap, .wm-time) { flex: none; font-size: .66rem; }
  .wm-immersive .wm-top-right { top: 6.7rem; left: .6rem; right: 3.6rem; width: auto; transform: none; justify-items: stretch; }
  .wm-immersive :is(.wm-evbar, .wm-turnbar) { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
  .wm-immersive .wm-evbar > * { flex: none; font-size: .7rem; }
  .wm-immersive .wm-figtoggle { top: auto; bottom: 5.6rem; left: .6rem; right: auto; }
  .wm-dock-btn { min-width: 3.6rem; padding: .3rem .4rem; }
  .wm-dock-ic { font-size: 1.15rem; }
  .wm-dock-label { font-size: .55rem; letter-spacing: .04em; }
  .wm-immersive :is(.wm-legend, .wm-journal) { top: 6.7rem; }
  .wm-drawer { top: 3.9rem; }
}
/* Spielerzeilen in der Spielleiter-Schublade: Werkzeuge unter Name und Farben */
.wm-drawer .wm-gm-row { grid-template-columns: 30px minmax(0, 1fr); }
.wm-drawer .wm-gm-tools { grid-column: 1 / -1; justify-content: flex-start; padding-top: .35rem; border-top: 1px dashed rgba(201, 162, 39, .25); }
.wm-drawer .wm-gm-main small { display: inline; }
.wm-drawer .wm-gm-in { background: transparent; border-top: 0; }
/* ---- Der Große Sturm rings um die Welt ---- */
.wm-svg .wm-storm { pointer-events: none; }
.wm-svg .wm-storm-l { animation: wm-storm-drift 20s ease-in-out infinite alternate; }
.wm-svg .wm-storm-l1 { animation-name: wm-storm-drift2; }
.wm-svg .wm-storm-l3 { animation-name: wm-storm-drift2; }
@keyframes wm-storm-drift { from { transform: translate(-28px, 10px); } to { transform: translate(28px, -12px); } }
@keyframes wm-storm-drift2 { from { transform: translate(24px, 14px); } to { transform: translate(-24px, -10px); } }
.wm-svg .wm-rain { animation: wm-rain .9s linear infinite; }
@keyframes wm-rain { from { transform: translate(0, 0); } to { transform: translate(-24px, 40px); } }
.wm-svg .wm-bolt { opacity: 0; animation: wm-bolt 9s linear infinite; }
.wm-svg .wm-bolt-line { fill: none; stroke: #f4f8ff; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }

@keyframes wm-bolt { 0%, 88%, 91%, 93%, 100% { opacity: 0; } 89% { opacity: 1; } 92% { opacity: .7; } }
.wm-svg .wm-storm-label { font-family: var(--display); font-size: 92px; letter-spacing: .3em; fill: rgba(220, 228, 240, .55); stroke: rgba(10, 14, 22, .6); stroke-width: 6; paint-order: stroke; text-anchor: middle; }
.wm-svg .wm-storm-label.small { font-family: var(--body); font-style: italic; font-size: 54px; letter-spacing: .12em; }
.wm-stage { background: radial-gradient(ellipse at center, #232c3a, #10141c 75%); }
@media (prefers-reduced-motion: reduce) { .wm-svg .wm-storm-l, .wm-svg .wm-rain, .wm-svg .wm-bolt { animation: none; } }
.wm-svg .wm-storm-label.side { font-size: 46px; fill: rgba(220, 228, 240, .42); }


/* Obere Leiste: Ortssuche und Zahnrad rechts, darunter nichts */
.wm-hud { gap: .6rem; }
.wm-hud-search .wm-select { height: 2.1rem; max-width: 12rem; }
.wm-gear { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #ffe39a; background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .55); transition: transform .3s, border-color .2s; }
.wm-gear svg { width: 1.15rem; height: 1.15rem; }
.wm-gear:hover { border-color: #ffd36b; transform: rotate(60deg); }
.wm-svg.wm-no-storm .wm-storm { display: none; }
@media (max-width: 760px) {
  .wm-hud-search .wm-select { max-width: 8.5rem; font-size: .8rem; }
  .wm-hud .wm-gear { flex: none; }
}
/* Obere Leiste in einer Zeile: Titel · Reisepunkte · Filter · Suche · Zahnrad (rechts) */
.wm-immersive .wm-hud { flex-wrap: nowrap; justify-content: flex-start; }
.wm-hud .wm-title { order: 0; flex: none; }
.wm-hud .wm-ap { order: 1; flex: none; }
.wm-hud .wm-chips { order: 2; flex-wrap: nowrap; }
.wm-hud .wm-chip { white-space: nowrap; }
.wm-hud .wm-hud-search { order: 3; margin-left: auto; flex: none; }
.wm-hud .wm-gear { order: 4; flex: none; }
@media (max-width: 1250px) { .wm-hud .wm-chips { display: none; } }
@media (max-width: 760px) {
  .wm-hud .wm-hud-search { margin-left: auto; }
}
/* Leiste so breit wie ihr Inhalt, mittig (statt halber Bildschirmbreite als Grenze) */
@media (min-width: 761px) {
  .wm-immersive .wm-hud { left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 22rem); transform: none; }
}
/* Suchen und Markieren: kleine Fenster über dem Dock */
.wm-popover { position: absolute; z-index: 8; bottom: 6.6rem; left: 50%; transform: translateX(-50%); width: min(380px, calc(100% - 1.6rem)); padding: .6rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(43, 29, 18, .95), rgba(20, 13, 8, .96)); border: 1px solid rgba(201, 162, 39, .6); box-shadow: 0 10px 28px rgba(0, 0, 0, .55); animation: wm-pop-up .18s ease-out; }
@keyframes wm-pop-up { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.wm-search-bar { display: flex; align-items: center; gap: .45rem; padding: 0 .6rem; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .55); }
.wm-search-bar:focus-within { border-color: #ffd36b; box-shadow: 0 0 0 3px rgba(255, 211, 107, .2); }
.wm-search-bar .wm-search-in { flex: 1; min-width: 0; height: 2.4rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff3d6; font: inherit; font-size: 1rem; outline: none; }
.wm-search-bar .wm-search-in::placeholder { color: #a8956a; font-style: italic; }
.wm-search-res { list-style: none; margin: .4rem 0 0; padding: 0; max-height: 18rem; overflow: auto; }
.wm-search-res:empty { display: none; }
.wm-search-res button { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; gap: .4rem; width: 100%; padding: .4rem .5rem; border: 0; border-radius: 8px; background: transparent; color: #f3e2b0; text-align: left; font: inherit; cursor: pointer; }
.wm-search-res button:hover, .wm-search-res button:focus-visible { background: rgba(201, 162, 39, .18); outline: none; }
.wm-search-res b { display: block; font-family: var(--heading); font-size: .9rem; }
.wm-search-res small { color: #c9b58a; font-size: .74rem; }
.wm-search-res .ic { text-align: center; }
.wm-search-res .empty { padding: .4rem .5rem; color: #c9b58a; font-style: italic; font-size: .85rem; }
.wm-pop-mark h4 { margin: .1rem .2rem .5rem; font-family: var(--heading); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #ffd36b; }
.wm-pop-mark .wm-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.wm-pop-mark .wm-chip { padding: .55rem .6rem; border-radius: 10px; font-size: .8rem; }
.wm-pop-mark .wm-chip.on { color: #2a1a05; background: linear-gradient(180deg, #fff3c4, #e6b93f 60%, #b08a25); border-color: #ffd36b; }
@media (max-width: 760px) { .wm-popover { bottom: 5.8rem; } }

/* ---- Band oben links: Menü · Titel · Reisepunkte ---- */
.wm-menu-band { position: absolute; z-index: 8; top: .8rem; left: .8rem; display: flex; align-items: center; gap: .8rem; padding: .3rem .9rem .3rem .4rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(43, 29, 18, .88), rgba(20, 13, 8, .9)); border: 1px solid rgba(201, 162, 39, .6); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 231, 166, .08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wm-immersive .wm-menu-band .wm-menu-btn { position: static; padding: .05rem .8rem .05rem 0; border: 0; border-right: 1px solid rgba(201, 162, 39, .4); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.wm-menu-band .wm-menu-btn:hover { transform: none; }
.wm-menu-band .wm-menu-btn:hover .wm-menu-label b { color: #fff3c4; }
.wm-menu-band .wm-title { margin: 0; }
.wm-menu-band .wm-ap { flex: none; }
.wm-dock-gear svg { width: 1.3rem; height: 1.3rem; }

/* ---- Band oben ---- */
.wm-dock-oben .wm-dock { top: .8rem; bottom: auto; left: auto; right: .8rem; transform: none; }
.wm-dock-oben .wm-popover { top: 6.4rem; bottom: auto; left: auto; right: .8rem; transform: none; animation: none; }
.wm-dock-oben .wm-info { top: 6.4rem; }
.wm-dock-oben .wm-top-right { top: 6.4rem; }
.wm-dock-oben .wm-rail { top: auto; bottom: .8rem; transform: none; grid-auto-flow: column; }
.wm-dock-oben .wm-compass { bottom: 4.6rem; }

/* ---- Band rechts ---- */
.wm-dock-rechts .wm-dock { top: 50%; bottom: auto; left: auto; right: .8rem; transform: translateY(-50%); flex-direction: column; max-height: calc(100% - 7rem); overflow-x: hidden; overflow-y: auto; }
.wm-dock-rechts .wm-dock-btn { min-width: 4.8rem; }
.wm-dock-rechts .wm-popover { top: 50%; bottom: auto; left: auto; right: 7rem; transform: translateY(-50%); animation: none; }
.wm-dock-rechts .wm-rail { top: auto; bottom: .8rem; right: .8rem; transform: none; grid-auto-flow: column; }
.wm-dock-rechts .wm-compass { right: auto; left: 1rem; bottom: 1rem; }
.wm-dock-rechts .wm-info { right: 7rem; }
.wm-dock-rechts.wm-is-gm :is(.wm-legend, .wm-journal) { right: 7rem; }

@media (max-width: 760px) {
  .wm-menu-band { top: .6rem; left: .6rem; gap: .5rem; padding: .25rem .5rem .25rem .3rem; max-width: calc(100% - 4.4rem); }
  .wm-menu-band .wm-title { display: none; }
  .wm-menu-band .wm-ap { font-size: .66rem; }
  .wm-dock-oben .wm-dock { top: 4rem; left: .6rem; right: .6rem; }
  .wm-dock-oben .wm-popover { top: 9rem; left: .6rem; right: .6rem; width: auto; }
  .wm-dock-oben .wm-rail { top: auto; bottom: .6rem; right: .6rem; grid-auto-flow: column; }
  .wm-dock-oben .wm-info { top: 9rem; bottom: auto; }
  .wm-dock-oben .wm-top-right { top: 9rem; }
  .wm-dock-rechts .wm-dock { right: .6rem; top: 50%; bottom: auto; transform: translateY(-50%); max-height: calc(100% - 9rem); }
  .wm-dock-rechts .wm-dock-btn { min-width: 0; width: 3rem; padding: .3rem 0; }
  .wm-dock-rechts .wm-dock-label { display: none; }
  .wm-dock-rechts .wm-popover { top: 4rem; right: 4.4rem; left: .6rem; width: auto; transform: none; }
  .wm-dock-rechts .wm-rail { top: auto; bottom: .6rem; left: .6rem; right: auto; grid-auto-flow: column; }
  .wm-dock-rechts .wm-info { right: 4.4rem; left: .6rem; }
}

/* ---- Clanseite: Hintergrund im Kopf, große Clans mit Rangordnung und Suche ---- */
.cp-hero.has-bg { background: #120707; }
.cp-hero-bg { position: absolute; inset: 0; opacity: .9; pointer-events: none; }
.cp-hero.has-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10, 4, 4, .55), rgba(10, 4, 4, .15) 70%); }
.cp-hero.has-bg > :not(.cp-hero-bg) { position: relative; z-index: 1; }
.cp-ladder { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; counter-reset: rung; }
.cp-rung { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem .3rem .35rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 250, 235, .55); font-family: var(--heading); font-size: .85rem; }
.cp-rung b { font-family: var(--display); color: var(--ink-soft); font-weight: 600; }
.cp-rung.lead { border-color: var(--gold-dark); background: linear-gradient(180deg, #fff5d6, #f2dfae); }
.cp-rung + .cp-rung::before { content: "›"; margin: 0 .15rem 0 -.35rem; color: var(--ink-soft); order: -1; display: none; }
.cp-sub { margin: 1.1rem 0 .55rem; font-family: var(--heading); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cp-person-list.lead .cp-person { background: linear-gradient(180deg, rgba(255, 245, 214, .9), rgba(242, 223, 174, .6)); border-color: rgba(176, 138, 60, .55); }
.cp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .55rem; }
.cp-search { flex: 1 1 220px; max-width: 360px; }
.cp-count { color: var(--ink-soft); }
.cp-rank-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.cp-rank-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem .25rem .3rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: .82rem; cursor: pointer; }
.cp-rank-chip:first-child { padding-left: .7rem; }
.cp-rank-chip b { color: var(--ink-soft); font-weight: 600; }
.cp-rank-chip.active { background: var(--ink, #2b1d10); border-color: var(--ink, #2b1d10); color: #f6e7c1; }
.cp-rank-chip.active b { color: #e7c873; }
.cp-rank-chip .rank-badge { width: 1.3rem; height: 1.3rem; }
.cp-more-row { display: flex; justify-content: center; margin-top: .8rem; }
.cp-more[hidden] { display: none; }

/* ---- Spielleitung: Reiter Spieler / Welt / Runde ---- */
.wm-gm-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: .6rem 0 .7rem; padding: .25rem; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(201, 162, 39, .3); }
.wm-gm-tab { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .5rem; border: 0; border-radius: 9px; background: transparent; color: #d9c79c; font-family: var(--heading); font-size: .82rem; letter-spacing: .04em; cursor: pointer; transition: background .15s, color .15s; }
.wm-gm-tab:hover { color: #ffe7a6; background: rgba(255, 231, 166, .06); }
.wm-gm-tab.on { color: #2b1d10; background: linear-gradient(180deg, #ffe7a6, #d9a93a); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.wm-gm-badge { min-width: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: #b3261e; color: #fff; font-size: .7rem; line-height: 1.25rem; text-align: center; font-family: system-ui, sans-serif; }
.wm-gm-badge.live { background: #3f8a49; animation: wm-live 1.6s ease-in-out infinite; }
@keyframes wm-live { 50% { opacity: .45; } }
.wm-gm-pane { display: grid; gap: .55rem; }
.wm-gm-pane > .wm-gm-set, .wm-gm-pane > .wm-turnpanel { margin: 0; }
.wm-gate { padding: .65rem .75rem; border-radius: 12px; border: 1px solid rgba(201, 162, 39, .35); background: rgba(255, 231, 166, .05); }
.wm-gate.has-wait { border-color: rgba(120, 200, 120, .55); background: linear-gradient(180deg, rgba(63, 138, 73, .22), rgba(63, 138, 73, .06)); }
.wm-gate-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.wm-gate-head strong { color: #ffe7a6; font-family: var(--heading); font-size: .9rem; }
.wm-gate-toggle { font-size: .8rem; color: #d9c79c; }
.wm-gate-list { display: grid; gap: .4rem; margin-top: .6rem; }
.wm-gate-card { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.wm-gate-card .wm-gm-pawn { width: 20px; height: 30px; }
.wm-gate-card span { display: grid; min-width: 0; }
.wm-gate-card b { color: #fff3cf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-gate-card small { color: #c9b58a; font-size: .74rem; }
.wm-gate-all { margin-top: .5rem; }

/* ---- Geschehen: Jahreszeit, Rennen, Marktstände … als Fenster über dem Band ---- */
.wm-dock-btn.happen { position: relative; }
.wm-dock-badge { position: absolute; top: .1rem; right: .55rem; min-width: 1.15rem; padding: 0 .28rem; border-radius: 999px; background: #b3261e; color: #fff; font: 600 .66rem/1.15rem system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px rgba(20, 13, 8, .9); }
.wm-dock-badge[hidden] { display: none; }
.wm-popover.wm-pop-happen { width: min(420px, calc(100% - 1.6rem)); max-height: min(70vh, 560px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.wm-pop-happen[hidden] { display: none; }
.wm-hp-head { display: flex; align-items: center; justify-content: space-between; padding: .55rem .5rem .45rem .9rem; }
.wm-hp-head h4 { margin: 0; font-family: var(--heading); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #ffd36b; }
.wm-hp-head .wm-x { position: static; width: 1.8rem; height: 1.8rem; color: #ffe39a; background: rgba(255, 255, 255, .08); }
.wm-hp-season { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin: 0 .6rem .5rem; padding: .7rem .8rem; border-radius: 12px; overflow: hidden;
  color: #fff6dc; border: 1px solid rgba(255, 231, 166, .35); background: linear-gradient(120deg, #6d4a1f, #3a2410); }
.wm-hp-season.s-fruehling { background: linear-gradient(120deg, #4f8a3a, #24481d); border-color: #9be07a; }
.wm-hp-season.s-sommer { background: linear-gradient(120deg, #c98a1d, #7a3f0e); border-color: #ffc46b; }
.wm-hp-season.s-herbst { background: linear-gradient(120deg, #a2531c, #4d2109); border-color: #d98b3a; }
.wm-hp-season.s-winter { background: linear-gradient(120deg, #5b7fa3, #233a55); border-color: #bfe3ff; }
.wm-hp-season::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .22), transparent 45%); }
.wm-hp-season-ic { font-size: 2rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
.wm-hp-season small { display: block; font-family: var(--heading); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.wm-hp-season strong { display: block; font-family: var(--display, var(--heading)); font-size: 1.25rem; line-height: 1.15; }
.wm-hp-season p { margin: .15rem 0 0; font-size: .78rem; line-height: 1.3; opacity: .9; }
.wm-hp-until { align-self: start; padding: .15rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: .72rem; white-space: nowrap; }
.wm-hp-body { overflow: auto; padding: 0 .6rem .6rem; display: grid; gap: .55rem; }
.wm-hp-sec h5 { display: flex; align-items: center; gap: .45rem; margin: .2rem .2rem .35rem; font-family: var(--heading); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #c9b58a; }
.wm-hp-sec h5 span { padding: 0 .4rem; border-radius: 999px; background: rgba(255, 231, 166, .12); color: #ffe7a6; letter-spacing: 0; }
.wm-hp-sec h5::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 162, 39, .45), transparent); }
.wm-hp-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.wm-hp-item { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; width: 100%; padding: .45rem .55rem; border-radius: 10px; border: 1px solid rgba(201, 162, 39, .22);
  background: rgba(255, 231, 166, .05); color: #f3e2b0; font: inherit; text-align: left; }
button.wm-hp-item { cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
button.wm-hp-item:hover { background: rgba(255, 231, 166, .12); border-color: rgba(255, 211, 107, .6); transform: translateX(2px); }
.wm-hp-ic { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(0, 0, 0, .3); font-size: 1.05rem; }
.wm-hp-txt { display: grid; min-width: 0; }
.wm-hp-txt b { color: #fff3cf; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-hp-txt small { color: #c9b58a; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-hp-meta { padding: .12rem .45rem; border-radius: 999px; background: rgba(0, 0, 0, .3); color: #ffd36b; font-size: .72rem; white-space: nowrap; }
.wm-hp-item.race .wm-hp-ic { background: rgba(179, 38, 30, .35); }
.wm-hp-item.fest { border-color: rgba(255, 196, 107, .55); background: linear-gradient(90deg, rgba(201, 162, 39, .2), rgba(255, 231, 166, .04)); }
.wm-hp-item.gold .wm-hp-meta, .wm-hp-item.fest .wm-hp-meta { background: linear-gradient(180deg, #ffe7a6, #d9a93a); color: #2b1d10; }
.wm-hp-item.treasure .wm-hp-ic { background: rgba(255, 138, 106, .3); }
.wm-hp-empty { margin: .4rem 0 .2rem; text-align: center; font-style: italic; color: #c9b58a; }
.wm-drawer .wm-gm-head h3 { display: none; }
.wm-drawer .wm-gm-head { justify-content: flex-end; }

/* ==== Finalkill II: Szene mit Partikeln, Splittern, Impact-Frame ==== */
.fk2 { --tint: #2a0a08; display: grid; place-items: center; align-content: center; gap: 1.1rem; background: #000; }
.fk2-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--tint) 85%, #fff 6%) 0%, color-mix(in srgb, var(--tint) 55%, #000) 38%, #000 78%); animation: fx-in .4s ease-out; transition: background .6s; }
.fk2-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .75) 100%); }
.fk2-bars i { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 6; animation: fk2-bar .45s cubic-bezier(.2, .8, .3, 1) both; }
.fk2-bars i:first-child { top: 0; transform-origin: top; }
.fk2-bars i:last-child { bottom: 0; transform-origin: bottom; }
@keyframes fk2-bar { from { transform: scaleY(0); } }
.fk2-cam { position: relative; z-index: 2; }
.fk2-stage { position: relative; width: min(58vw, 300px); aspect-ratio: 1; perspective: 700px; }
.fk2-art, .fk2-piece, .fk2-ghost { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; }
.fk2-figure { width: 100%; height: 100%; display: grid; place-items: center; filter: drop-shadow(0 0 2px rgba(255, 230, 170, .85)) drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.fk2-figure > svg, .fk2-figure .creature-art { width: 100%; height: 100%; }
.fk2-figure .portrait, .fk2-figure img { width: 82%; height: 82%; border-radius: 50%; object-fit: cover; }
.fk2-figure .portrait { display: grid; place-items: center; font-size: 4rem; }
.fk2-art { animation: fk2-enter .5s cubic-bezier(.2, 1.3, .4, 1) both, fk2-breathe 1.6s .5s ease-in-out infinite alternate; }
@keyframes fk2-enter { from { transform: scale(.55) translateY(20px); opacity: 0; filter: blur(8px) brightness(2); } }
@keyframes fk2-breathe { to { transform: scale(1.015) translateY(-2px); } }
.fk2-shadow { position: absolute; left: 18%; right: 18%; bottom: -2%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 70%); }
.fk2-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.fk2-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
/* Impact-Frame: zwei Bilder lang Negativ */
.fk2-impact .fk2-bg { background: #fff; }
.fk2-impact .fk2-cam { filter: invert(1) grayscale(1) contrast(5); }
/* Schwung */
.fk2-swoosh { position: absolute; inset: -25%; width: 150%; height: 150%; overflow: visible; z-index: 3; pointer-events: none; transform: rotate(var(--rot, -15deg)); }
.fk2-swoosh path { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: fk2-swoosh .32s cubic-bezier(.3, .7, .2, 1) forwards, fk2-swoosh-out .35s .3s ease-in forwards; }
.fk2-swoosh .sw-glow { stroke: var(--sw, #fff); stroke-width: 14; opacity: .35; filter: blur(4px); }
.fk2-swoosh .sw-core { stroke: #fff; stroke-width: 3.5; filter: drop-shadow(0 0 6px var(--sw, #fff)); }
@keyframes fk2-swoosh { to { stroke-dashoffset: 0; } }
@keyframes fk2-swoosh-out { to { stroke-dashoffset: -100; opacity: 0; } }
/* Titel */
.fk2-title { position: relative; z-index: 7; display: grid; justify-items: center; gap: .25rem; text-align: center; opacity: 0; pointer-events: none; }
.fk2-title.on { opacity: 1; }
.fk2-word { position: relative; display: flex; font-family: var(--heading); font-size: clamp(2.3rem, 8.5vw, 4.8rem); line-height: 1; letter-spacing: .08em; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 140, 60, .45)); }
.fk2-word span { display: inline-block; background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%), linear-gradient(180deg, #fffbe8 0%, #ffe08a 38%, #c9861f 52%, #ffe7a6 66%, #8a4a10 100%); background-size: 400% 100%, 100% 100%; background-position: 120% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(-40px) scale(1.8) rotate(-8deg); }
.fk2-title.on .fk2-word span { animation: fk2-letter .42s calc(var(--i) * 45ms) cubic-bezier(.2, 1.6, .4, 1) forwards, fk2-shine .5s calc(700ms + var(--i) * 55ms) ease-in-out forwards; }
@keyframes fk2-letter { 60% { opacity: 1; transform: translateY(4px) scale(.94) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes fk2-shine { to { background-position: -20% 0, 0 0; } }
.fk2-title strong { font-family: var(--heading); font-size: 1.4rem; color: #fff; letter-spacing: .05em; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.fk2-title small { font-style: italic; color: #e3c88a; }
.fk2-title.on strong, .fk2-title.on small { animation: fx-in .5s .5s both; }
.fk2-title::before { content: ""; position: absolute; left: -12%; right: -12%; top: 8%; height: 58%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .75) 18%, rgba(0, 0, 0, .75) 82%, transparent); transform: scaleX(0) skewX(-12deg); }
.fk2-title.on::before { animation: fk2-brush .35s ease-out forwards; }
@keyframes fk2-brush { to { transform: scaleX(1) skewX(-12deg); } }
/* Bodenspuren */
.fk2-decal { position: absolute; left: 8%; right: 8%; bottom: -6%; height: 20%; border-radius: 50%; opacity: 0; animation: fx-in .5s forwards; }
.fk2-ash { background: radial-gradient(ellipse, #2a2422 0, #1a1514 40%, transparent 70%); }
.fk2-scorch { background: radial-gradient(ellipse, #000 0, rgba(30, 14, 6, .9) 40%, rgba(255, 120, 40, .25) 55%, transparent 72%); }
.fk2-puddle { left: 0; right: 0; background: radial-gradient(ellipse, rgba(170, 255, 110, .95), rgba(70, 160, 40, .75) 45%, transparent 72%); filter: drop-shadow(0 0 10px #8aff5a); animation: fk2-grow 1.8s .2s ease-out forwards; transform: scaleX(.2); }
.fk2-mud { left: -10%; right: -10%; height: 24%; background: radial-gradient(ellipse, #9a7444, #6a4a26 45%, #3d2a15 62%, transparent 74%); animation: fk2-grow .6s ease-out forwards; transform: scaleX(.2); }
.fk2-crater { left: -14%; right: -14%; height: 26%; background: radial-gradient(ellipse, #fff3c0 0, #ff9a2a 18%, #6a1e08 40%, #1a0c06 56%, transparent 72%); animation: fx-in .2s forwards, fk2-cool 2.6s .4s forwards; }
@keyframes fk2-grow { to { opacity: 1; transform: scaleX(1); } }
@keyframes fk2-cool { to { filter: brightness(.45) saturate(.6); } }
/* Risse, Eis, Schnitt, Ranken */
.fk2-cracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.fk2-cracks path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #ffd68a); animation: fk2-draw .3s ease-out forwards; }
.fk2-vereisen .fk2-cracks path { filter: drop-shadow(0 0 4px #bff0ff); }
.fk2-versteinern .fk2-cracks path { stroke: #140e0a; filter: none; stroke-width: 2.2; }
@keyframes fk2-draw { to { stroke-dashoffset: 0; } }
.fk2-ice { position: absolute; left: -6%; right: -6%; bottom: -4%; height: 92%; width: 112%; z-index: 3; pointer-events: none; transform-origin: bottom; animation: fk2-ice .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.fk2-ice polygon { fill: rgba(200, 240, 255, .55); stroke: #e8fbff; stroke-width: .6; filter: drop-shadow(0 0 4px #9fe6ff); }
.fk2-ice polygon.hi { fill: rgba(255, 255, 255, .75); stroke: none; }
@keyframes fk2-ice { from { transform: scaleY(0); } }
.fk2 .gone { animation: fk2-gone .25s ease-in forwards !important; }
@keyframes fk2-gone { to { opacity: 0; transform: scale(1.15); } }
.fk2-cut { position: absolute; inset: -20%; width: 140%; height: 140%; z-index: 3; pointer-events: none; overflow: visible; }
.fk2-cut path { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #ff9a6a); animation: fk2-draw .16s ease-out forwards, fk2-gone .6s 1s forwards; }
.fk2-vines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.fk2-vines path { fill: none; stroke: #3e8a2c; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px #1c3a12); animation: fk2-draw .9s ease-out forwards; }
.fk2-vines path:nth-of-type(2) { animation-delay: .12s; }
.fk2-vines path:nth-of-type(3) { animation-delay: .2s; stroke-width: 5; }
.fk2-vines path:nth-of-type(n+4) { stroke-width: 3.5; animation-delay: .3s; }
.fk2-vines .lv ellipse { fill: #63c043; stroke: #2a6a1c; stroke-width: .8; opacity: 0; animation: fx-in .3s .7s forwards; }
/* Geist, Stein, Strahl, Strahlen, Wirbel */
.fk2-stone .fk2-figure { filter: grayscale(1) sepia(.25) contrast(1.35) brightness(.8) drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.fk2-beam { position: absolute; left: 22%; right: 22%; top: -160%; bottom: -8%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--beam) 70%, transparent) 40%, var(--beam) 85%, transparent); filter: blur(6px); mix-blend-mode: screen; transform-origin: top; animation: fk2-beam 2.4s ease-out forwards; }
.fk2-beam.strong { left: 12%; right: 12%; filter: blur(3px); }
@keyframes fk2-beam { 0% { transform: scaleX(0); opacity: 0; } 15% { transform: scaleX(1); opacity: 1; } 75% { opacity: .9; } 100% { transform: scaleX(.3); opacity: 0; } }
.fk2-rays { position: absolute; inset: -80%; z-index: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255, 240, 180, .32) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); animation: fx-in .5s both, fk2-spin 10s linear infinite; }
@keyframes fk2-spin { to { transform: rotate(360deg); } }
.fk2-vortex { position: absolute; inset: -30%; border-radius: 50%; z-index: 0; animation: fk2-vortex 2.6s cubic-bezier(.3, .8, .4, 1) forwards; }
.fk2-vortex i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #000, #4a1172, #000 25%, #9a4fe0 45%, #000 60%, #36105a 80%, #000); -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .6) 45%, transparent 70%); mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .6) 45%, transparent 70%); animation: fk2-spin 1.1s linear infinite; }
.fk2-vortex i:nth-child(2) { inset: 18%; animation-duration: .7s; animation-direction: reverse; opacity: .8; }
.fk2-vortex i:nth-child(3) { inset: 36%; background: radial-gradient(circle, #000 40%, #2a0a44); animation: none; }
@keyframes fk2-vortex { 0% { transform: scale(.1); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 80% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(.02); opacity: 0; } }
/* Stimmungen */
.fk2-storm .fk2-bg { background: radial-gradient(ellipse at 50% 30%, #1a2a4a, #050812 70%); }
.fk2-night .fk2-bg { background: radial-gradient(ellipse at 50% 70%, #1a1438, #04040e 70%); }
.fk2-redsky .fk2-bg { background: radial-gradient(ellipse at 50% 35%, #6a0a10, #200204 55%, #000 85%); }
.fk2-steel .fk2-bg { background: radial-gradient(ellipse at 50% 40%, #2a3040, #0a0c12 70%); }
/* Blutmond */
.fk2-moon { position: absolute; left: 50%; top: 50%; width: 135%; aspect-ratio: 1; margin: -95% 0 0 -67.5%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 42% 38%, #ff8a6a 0, #d01e14 30%, #7a0608 60%, #3a0204 72%, transparent 73%); box-shadow: 0 0 120px 40px rgba(200, 20, 20, .35); animation: fk2-moon 1.4s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fk2-moon { from { transform: translateY(40%) scale(.6); opacity: 0; } }
.fk2-crescent { position: absolute; inset: -40%; width: 180%; height: 180%; z-index: 3; pointer-events: none; overflow: visible; transform-origin: 50% 50%; animation: fk2-reap .55s cubic-bezier(.5, 0, .3, 1) both; }
.fk2-crescent path { fill: #fff0f0; filter: drop-shadow(0 0 6px #ff4a4a) drop-shadow(0 0 22px #c2140c); }
@keyframes fk2-reap { 0% { transform: rotate(-120deg) scale(.6); opacity: 0; } 30% { opacity: 1; } 70% { transform: rotate(40deg) scale(1); opacity: 1; } 100% { transform: rotate(80deg) scale(1.05); opacity: 0; } }
/* Runenkreis */
.fk2-circle { position: absolute; inset: -32%; width: 164%; height: 164%; z-index: 0; overflow: visible; pointer-events: none; transform: rotateX(62deg) translateY(28%); animation: fx-in .6s both; }
.fk2-circle circle, .fk2-circle path { fill: none; stroke: #7ff3e6; stroke-width: 1.4; filter: drop-shadow(0 0 3px #2fc9c0); }
.fk2-circle .c-a { animation: fk2-spin 8s linear infinite; transform-origin: 0 0; }
.fk2-circle .c-b { animation: fk2-spin 12s linear infinite reverse; transform-origin: 0 0; }
.fk2-circle .c-c { animation: fk2-spin 5s linear infinite; transform-origin: 0 0; }
.fk2-runes-on .fk2-circle circle, .fk2-runes-on .fk2-circle path { stroke: #e0fffb; stroke-width: 2; filter: drop-shadow(0 0 5px #7ff3e6) drop-shadow(0 0 14px #2fc9c0); }
.fk2-bigrune { position: absolute; inset: 22%; width: 56%; height: 56%; z-index: 3; overflow: visible; pointer-events: none; animation: fk2-rune .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.fk2-bigrune path { fill: none; stroke: #e0fffb; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #7ff3e6) drop-shadow(0 0 18px #2fc9c0); }
@keyframes fk2-rune { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
/* Drachenaugen */
.fk2-eyes { position: absolute; left: -85%; top: -22%; width: 90%; height: 30%; z-index: 0; display: flex; justify-content: space-around; align-items: center; pointer-events: none; animation: fk2-eyes 3.4s ease-in-out forwards; }
.fk2-eyes i { width: 26%; height: 34%; border-radius: 50%; background: radial-gradient(ellipse at center, #000 0 12%, #ffef9a 14%, #ff9a1a 45%, #a02a06 75%, transparent 78%); -webkit-mask: radial-gradient(ellipse 50% 50%, #000 70%, transparent 72%); mask: radial-gradient(ellipse 50% 50%, #000 70%, transparent 72%); filter: drop-shadow(0 0 14px #ff7a1a); transform: scaleY(0); animation: fk2-blink .35s .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.fk2-eyes i:last-child { transform: scaleY(0) scaleX(-1); }
@keyframes fk2-blink { to { transform: scaleY(1); } }
@keyframes fk2-eyes { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.fk2-still .fk2-title { opacity: 1; }
.fk2-still .fk2-word span { opacity: 1; transform: none; }
@media (max-width: 560px) { .fk2-stage { width: min(68vw, 260px); } .fk2-bars i { height: 7vh; } }

/* ---- Quests für Sammelstücke ---- */
.qb { margin-bottom: 1.2rem; }
.qb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .8rem; }
.qb-card { position: relative; display: grid; gap: .55rem; padding: .85rem .9rem; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 250, 235, .7), rgba(242, 226, 190, .45)); box-shadow: var(--shadow); }
.qb-card header { display: flex; align-items: center; gap: .6rem; }
.qb-card header strong { display: block; font-family: var(--heading); font-size: 1.02rem; }
.qb-card header small { color: var(--ink-soft); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.qb-seal { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; color: #fff3cf; font-size: 1rem; background: radial-gradient(circle at 35% 30%, #c0392b, #5a0d08); box-shadow: inset 0 0 0 2px rgba(255, 220, 150, .5), 0 2px 6px rgba(0, 0, 0, .3); }
.qb-card.active { border-color: var(--gold-dark); box-shadow: var(--shadow), 0 0 0 2px rgba(201, 162, 39, .45), 0 0 22px rgba(201, 162, 39, .25); }
.qb-card.active .qb-seal { background: radial-gradient(circle at 35% 30%, #ffe7a6, #b0801a); color: #3a2408; animation: qb-pulse 1.8s ease-in-out infinite; }
@keyframes qb-pulse { 50% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 0 14px rgba(255, 210, 110, .8); } }
.qb-card.done { opacity: .78; }
.qb-card.done .qb-seal { background: radial-gradient(circle at 35% 30%, #6fbf6a, #24602a); }
.qb-card p { margin: 0; font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.qb-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.qb-goals li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; font-size: .88rem; }
.qb-goals li b { font-variant-numeric: tabular-nums; }
.qb-goals li.done span:first-child::before { content: "✓ "; color: var(--forest); font-weight: 700; }
.qb-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(110, 78, 38, .15); overflow: hidden; }
.qb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b0801a, #ffd36b); transition: width .4s; }
.qb-goals li.done .qb-bar i { background: linear-gradient(90deg, #3f8a49, #8fd18a); }
.qb-reward { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 10px; background: radial-gradient(ellipse at 0 50%, rgba(120, 20, 10, .28), rgba(20, 10, 6, .82) 70%); color: #f3e2b0; }
.qb-reward-art { width: 3.2rem; height: 3.2rem; border-radius: 8px; background: radial-gradient(circle, rgba(255, 200, 120, .35), transparent 70%); }
.qb-reward-art svg { width: 100%; height: 100%; }
.qb-reward small { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #c9b58a; }
.qb-reward strong { font-family: var(--heading); color: #ffe7a6; margin-right: .35rem; }
.qb-foot { display: flex; justify-content: flex-end; }
.qb-wait { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--ink-soft); }
.qb-wait svg { width: 1rem; height: 1rem; }

.fk2-piece .fk2-figure, .fk2-ghost .fk2-figure { filter: none; }
.fk2-shardbox { position: absolute; inset: 0; perspective: 700px; }

/* ---- Gericht: In Prüfung, Richter, direkt eintragen, Clan-Suche ---- */
.court-reviews { margin-top: 1.4rem; }
.court-reviews .court-sub { display: flex; align-items: center; gap: .5rem; }
.review-count { min-width: 1.5rem; padding: 0 .45rem; border-radius: 999px; background: #b0801a; color: #fff8e0; font-size: .8rem; line-height: 1.5rem; text-align: center; }
.review-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.review-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid rgba(176, 128, 26, .5);
  background: repeating-linear-gradient(-45deg, rgba(201, 162, 39, .08) 0 12px, transparent 12px 24px), linear-gradient(180deg, rgba(255, 248, 225, .85), rgba(242, 226, 190, .6)); box-shadow: var(--shadow); }
.review-body { display: grid; gap: .1rem; min-width: 0; }
.review-body strong { font-family: var(--heading); font-size: 1.02rem; }
.review-parties { color: var(--ink); }
.review-body small, .review-meta small { color: var(--ink-soft); }
.review-meta { display: grid; justify-items: end; gap: .15rem; text-align: right; }
.review-stamp { padding: .15rem .6rem; border: 2px solid #b0801a; border-radius: 6px; color: #8a5a10; font-family: var(--heading); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-3deg); background: rgba(255, 236, 170, .5); }
.review-hourglass { position: relative; width: 1.6rem; height: 2.2rem; }
.review-hourglass i { position: absolute; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, #e2bf63, #8a5a10); clip-path: polygon(0 0, 100% 0, 55% 100%, 45% 100%); }
.review-hourglass i:last-child { top: 50%; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); opacity: .55; }
.review-hourglass { animation: review-turn 3.2s ease-in-out infinite; }
@keyframes review-turn { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@media (max-width: 620px) { .review-item { grid-template-columns: auto minmax(0, 1fr); } .review-meta { grid-column: 1 / -1; justify-items: start; text-align: left; } }
.ruling-judge { display: flex; align-items: center; gap: .3rem; margin: .2rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.ruling-judge svg { width: .95rem; height: .95rem; }
.case-judge { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; font-size: .88rem; color: var(--ink-soft); }
.case-judge span { font-family: var(--heading); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.case-judge select { max-width: 18rem; padding: .25rem .4rem; }
.case-judge svg { width: 1rem; height: 1rem; }
.direct-card { margin-top: 1.2rem; }
.direct-card summary { cursor: pointer; font-family: var(--heading); display: flex; align-items: center; gap: .4rem; }
.direct-card summary svg { width: 1.1rem; height: 1.1rem; }
.direct-form { display: grid; gap: .5rem; margin-top: .6rem; }
.clan-picker { display: grid; gap: .35rem; }
.clan-search { width: 100%; }
.clan-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.clan-hits li.empty { color: var(--ink-soft); font-style: italic; font-size: .88rem; }
.clan-hit { display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 250, 235, .7); color: inherit; font: inherit; font-size: .88rem; cursor: pointer; }
.clan-hit:hover { border-color: var(--gold-dark); }
.clan-hit.on { background: var(--ink, #2b1d10); color: #f6e7c1; border-color: var(--ink, #2b1d10); }
.clan-hit small { color: inherit; opacity: .7; }
.cp-pick { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink-soft); }
.cp-pick svg { width: 1rem; height: 1rem; }
.cp-chosen.on { color: var(--ink); font-weight: 600; }


/* ---- Karte ohne Animationen (Einstellungen → Karte): flüssiger auf schwachen Geräten ---- */
.wm-still .wm-svg *, .wm-still .wm-svg, .wm-still .wm-stage * { animation: none !important; transition: none !important; }
.wm-still .wm-svg { will-change: auto; }
.slot-vaulted { position: absolute; top: .3rem; right: 1.6rem; width: 1rem; height: 1rem; color: #b0801a; }
.slot-vaulted svg { width: 100%; height: 100%; }
.slot.filled { position: relative; }
.vault-worn { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: 4px; background: rgba(63, 138, 73, .18); color: var(--forest); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* ---- Notizbuch (private Notizen zu anderen Spielern) ---- */
.pn-btn { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; margin-left: .3rem; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; font-size: .85rem; line-height: 1; cursor: pointer; opacity: .45; vertical-align: middle; transition: opacity .15s, background .15s, border-color .15s; }
.pn-btn:hover, .pn-btn:focus-visible { opacity: 1; background: rgba(255, 236, 170, .55); border-color: var(--gold-dark, #b0801a); }
.rk-row:hover .pn-btn, .cp-person:hover .pn-btn, .member:hover .pn-btn { opacity: .9; }
.cp-person-name { display: flex; align-items: center; min-width: 0; }
.pn-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 760px) { .pn-layout { grid-template-columns: 1fr; } }
.pn-side { display: grid; gap: .6rem; position: sticky; top: 1rem; max-height: calc(100vh - 6rem); overflow: auto; }
@media (max-width: 760px) { .pn-side { position: static; max-height: 45vh; } }
.pn-search { width: 100%; }
.pn-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.pn-person { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .45rem .6rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pn-person:hover { background: rgba(255, 236, 170, .4); }
.pn-person.on { background: var(--ink, #2b1d10); color: #f6e7c1; }
.pn-person-name small { opacity: .65; }
.pn-count { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: #b0801a; color: #fff8e0; font-size: .75rem; line-height: 1.4rem; text-align: center; }
.pn-other { display: flex; gap: .35rem; }
.pn-other input { flex: 1; min-width: 0; }
.pn-main h2 small { opacity: .6; font-size: .7em; }
.pn-box { display: grid; gap: .8rem; }
.pn-form { display: grid; gap: .4rem; }
.pn-form textarea { width: 100%; }
.pn-form-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pn-note { padding: .6rem .75rem; border-radius: 8px; border-left: 4px solid #c9a227; background: linear-gradient(180deg, #fff8dc, #f6e9bf); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); color: var(--ink, #2b1d10); }
.pn-note.pinned { border-left-color: #8e1b18; background: linear-gradient(180deg, #fff1e6, #f8dccb); }
.pn-note p { margin: 0 0 .35rem; white-space: pre-line; }
.pn-note footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem; }
.pn-note small { color: var(--ink-soft); }
.pn-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.pn-empty { color: var(--ink-soft); font-style: italic; }
.vault-locked { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .7rem; padding: .55rem .7rem; border-radius: 8px; border: 1px solid rgba(142, 27, 24, .45); background: rgba(142, 27, 24, .1); color: var(--blood, #8e1b18); }
.vault-locked svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; }

/* ==========================================================================
   Handy wie PC: Seitenleiste als Schublade, kompakte Leisten, Karte ohne Wischen
   ========================================================================== */
.nav-burger, .sn-close, .sn-who { display: none; }
.sn-head { display: contents; }
.sn-backdrop { display: none; }
/* Spielleiter-Werkzeuge stehen in der Seitenleiste, nicht mehr oben rechts */
body.has-side .userbox a.gm-link { display: none; }
@media (min-width: 900px) {
  body.has-side .nav-burger { display: none; }
}
@media (max-width: 899px) {
  body.has-side .sidenav:not([hidden]) {
    position: fixed; inset: 0 auto 0 0; z-index: 950; width: min(86vw, 310px);
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    background: var(--noise), linear-gradient(180deg, #2e1e10 0%, #1c120a 55%, #140d08 100%);
    border-right: 3px double var(--gold-dark);
    box-shadow: 10px 0 30px rgba(0, 0, 0, .6);
    transform: translateX(-105%); visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
  }
  body.side-open .sidenav:not([hidden]) { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  body.world-mode.side-open .sidenav:not([hidden]) { display: flex !important; }
  .sn-backdrop { display: block; position: fixed; inset: 0; z-index: 949; background: rgba(8, 4, 2, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  body.side-open .sn-backdrop { opacity: 1; pointer-events: auto; }
  body.side-open { overflow: hidden; }
  .sn-head { display: flex; align-items: stretch; flex: none; border-bottom: 3px double var(--gold-dark); background: linear-gradient(180deg, #3a2614 0%, #24170c 100%); }
  .sn-head .sn-brand { flex: 1; border-bottom: 0; background: none; }
  .sn-close { display: grid; place-items: center; flex: none; width: 3.2rem; padding: 0; border: 0; border-left: 1px solid rgba(201, 162, 39, .25); background: none; color: var(--gold-light); font-size: 1.8rem; line-height: 1; cursor: pointer; }
  .sn-close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -4px; }
  .sn-who { display: flex; align-items: center; gap: .55rem; flex: none; padding: .6rem 1rem; border-bottom: 1px solid rgba(201, 162, 39, .22); color: var(--parchment); font-family: var(--heading); font-size: .85rem; letter-spacing: .04em; }
  .sn-who .icon { width: 1.1rem; height: 1.1rem; color: var(--gold); }
  .sn-who .tag { margin-left: auto; }
  .sidenav .sn-link { padding-top: .72rem; padding-bottom: .72rem; font-size: .84rem; }
  .sidenav .sn-group h4 { margin-top: .2rem; }
  .sidenav .sn-toggle { display: none; }
  /* Einklappen gibt es nur am PC */
  body.side-slim .sidenav .sn-label { display: inline; }
  body.side-slim .sidenav .sn-group h4 { height: auto; margin: .2rem 0 .3rem .55rem; font-size: .66rem; background: none; }
  body.side-slim .sidenav :is(.sn-link, .sn-brand) { justify-content: flex-start; padding-left: .9rem; padding-right: .75rem; }
  body.side-slim .sidenav .sn-brand { padding: 0 1rem; }
  body.side-slim .sidenav :is(.sn-scroll, .sn-bottom) { padding-left: .6rem; padding-right: .6rem; }

  /* ☰ oben links in der Kopfleiste */
  body.has-side .nav-burger {
    display: inline-grid; align-content: center; justify-items: center; gap: 4px; flex: none;
    width: 2.5rem; height: 2.5rem; margin-right: .2rem; padding: 0; border-radius: 10px;
    border: 1px solid rgba(201, 162, 39, .55); background: rgba(0, 0, 0, .28); cursor: pointer;
  }
  .nav-burger span { display: block; width: 1.1rem; height: 2px; border-radius: 2px; background: var(--gold-light); transition: transform .2s ease, opacity .2s ease; }
  body.side-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.side-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.side-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-burger:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
  .topbar-row { flex-wrap: nowrap; }
  .userbox { min-width: 0; flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  body.has-side .sidenav, .sn-backdrop, .nav-burger span { transition: none !important; }
}

/* Gericht: Instanzenzug auch auf dem Handy, nur kompakter */
@media (max-width: 640px) {
  .court-rail { display: grid; }
  .court-rail a { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; row-gap: .25rem; margin-right: 10px; padding: .45rem .3rem; text-align: center; }
  .court-rail b { grid-row: auto; width: 1.6rem; height: 1.6rem; font-size: .85rem; }
  .court-rail span { font-size: .66rem; letter-spacing: .02em; }
  .court-rail small { display: none; }
  .court-rail li + li::before { left: -10px; width: 16px; }
  .court-rail li + li::after { left: 2px; border-width: 4px; border-left-width: 5px; top: calc(50% - 4px); }
}

/* Karte auf dem Handy: alle Dock-Knöpfe sichtbar (zwei Reihen statt Wischen), Fenster rücken darüber */
@media (max-width: 760px) {
  .wm-dock-unten .wm-dock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .2rem; overflow: visible; padding: .3rem; }
  .wm-dock-unten .wm-dock-btn { min-width: 0; width: auto; padding: .3rem .1rem; }
  .wm-dock-unten .wm-dock-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .52rem; }
  .wm-dock-unten .wm-popover { bottom: calc(var(--wm-dock-h, 4.4rem) + 1.1rem); }
  .wm-dock-unten.wm-immersive .wm-info { bottom: calc(var(--wm-dock-h, 4.4rem) + 1rem); }
  .wm-dock-unten.wm-immersive .wm-figtoggle { bottom: calc(var(--wm-dock-h, 4.4rem) + 1rem); }
  .wm-dock-unten .wm-drawer { bottom: calc(var(--wm-dock-h, 4.4rem) + .9rem); }
  .wm-dock-unten.wm-immersive :is(.wm-legend, .wm-journal) { max-height: calc(100% - 7.3rem - var(--wm-dock-h, 4.4rem)); }
}
.wm-l-short { display: none; }
@media (max-width: 760px) {
  .wm-l-long { display: none; }
  .wm-l-short { display: inline; }
}
@media (max-width: 760px) {
  /* Fenster über dem Dock enden unter den Zoom-Knöpfen rechts oben */
  .wm-dock-unten .wm-popover { max-height: calc(100% - var(--wm-dock-h, 4.4rem) - 15.5rem); overflow-y: auto; }
}

/* ==========================================================================
   Allianzen: Bündnisse zwischen Clans
   ========================================================================== */
.al-page { display: grid; gap: 1rem; }
.al-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.al-grid > div { display: grid; gap: 1rem; min-width: 0; }
.al-grid > div > .card { margin: 0; }
@media (max-width: 900px) { .al-grid { grid-template-columns: 1fr; } }

/* Kopf: Bündnisbanner */
.al-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.4rem;
  padding: 1.4rem 1.6rem; border-radius: 14px; color: #f3e6c4;
  background: var(--noise), radial-gradient(120% 140% at 0% 0%, #3d2a5c 0%, #22163a 45%, #120c1e 100%);
  border: 2px solid var(--gold-dark); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 231, 166, .12);
}
.al-hero-glow { position: absolute; inset: -40% auto auto -10%; width: 60%; height: 180%; background: radial-gradient(closest-side, rgba(255, 210, 120, .28), transparent); pointer-events: none; animation: al-breathe 6s ease-in-out infinite; }
@keyframes al-breathe { 50% { opacity: .55; transform: scale(1.06); } }
.al-hero-crest { position: relative; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 210, 120, .35)); }
.al-hero-text { position: relative; min-width: 0; }
.al-kicker { font-family: var(--heading); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #e7c66a; }
.al-hero h2 { margin: .1rem 0 .2rem; font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: #ffe7a6; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.al-tag { font-size: .6em; color: #e0c27a; letter-spacing: .06em; }
.al-motto { margin: 0; font-style: italic; color: #f1dca5; }
.al-sub { margin: .2rem 0 .6rem; font-size: .8rem; color: #bfa98a; }
.al-bond { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.al-bond-clan { position: relative; display: grid; justify-items: center; gap: .1rem; padding: .3rem .35rem .2rem; border-radius: 10px; text-decoration: none; color: #f3e6c4; transition: transform .15s, background .15s; }
.al-bond-clan:hover, .al-bond-clan:focus-visible { transform: translateY(-3px); background: rgba(255, 231, 166, .1); outline: none; }
.al-bond-clan small { font-family: var(--heading); font-size: .62rem; letter-spacing: .06em; max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-bond-clan.lead { background: rgba(255, 210, 120, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, .4); }
.al-lead-crown { position: absolute; top: -.5rem; left: 50%; transform: translateX(-50%); color: #ffd36b; font-size: .9rem; text-shadow: 0 0 6px rgba(255, 200, 90, .8); }
.al-link { width: 1.6rem; height: 8px; border-radius: 4px; border: 2px solid #c9a227; background: linear-gradient(90deg, transparent 30%, rgba(201, 162, 39, .5) 50%, transparent 70%); box-shadow: 0 0 6px rgba(201, 162, 39, .4); }
.al-stats { position: relative; display: grid; grid-template-columns: repeat(2, minmax(5.5rem, auto)); gap: .5rem .9rem; margin: 0; }
.al-stats div { padding: .45rem .7rem; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .35); text-align: center; }
.al-stats dt { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #cdb37a; }
.al-stats dd { margin: 0; font-family: var(--heading); font-weight: 700; font-size: 1.15rem; color: #ffe7a6; }
@media (max-width: 760px) {
  .al-hero { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; gap: .9rem; }
  .al-hero-crest svg { width: 72px; height: auto; }
  .al-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .al-stats div { padding: .35rem .2rem; }
  .al-stats dd { font-size: .95rem; }
}
.al-desc { margin: 0; padding: .8rem 1.1rem; border-left: 3px solid var(--gold); background: rgba(0, 0, 0, .18); color: var(--parchment); font-style: italic; white-space: pre-line; border-radius: 0 10px 10px 0; }

/* Bündnisclans */
.al-clans, .al-wars, .al-pendings, .al-posts, .al-log, .al-cards, .al-benefits, .al-pick-list { list-style: none; margin: 0; padding: 0; }
.al-clan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem; padding: .55rem .2rem; border-bottom: 1px dashed rgba(120, 90, 40, .3); }
.al-clan:last-child { border-bottom: 0; }
.al-clan.lead { background: linear-gradient(90deg, rgba(201, 162, 39, .14), transparent 70%); border-radius: 8px; }
.al-clan-main { display: grid; min-width: 0; }
.al-clan-name { font-family: var(--heading); font-weight: 700; color: var(--ink); text-decoration: none; }
.al-clan-name:hover { color: var(--blood); }
.al-clan-main small { color: var(--ink-soft); }
.al-clan-tools { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .35rem; }

/* Bündnisfall */
.al-wars li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; background: rgba(120, 30, 20, .08); border: 1px solid rgba(160, 50, 40, .25); }
.al-wars li + li { margin-top: .4rem; }
.al-wars li.aid { background: linear-gradient(90deg, rgba(168, 50, 42, .2), rgba(201, 162, 39, .12)); border-color: rgba(168, 50, 42, .55); animation: al-pulse 2.4s ease-in-out infinite; }
@keyframes al-pulse { 50% { box-shadow: 0 0 0 3px rgba(168, 50, 42, .18); } }
.al-war-ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #c0392b, #5e130d); }
.al-war-ic svg { width: 1rem; height: 1rem; }
.al-wars small { display: block; color: var(--ink-soft); }

/* Einladen */
.al-invite { display: grid; gap: .45rem; }
.al-pick-list { display: grid; gap: .2rem; max-height: 15rem; overflow: auto; }
.al-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 100%; padding: .35rem .5rem; border-radius: 8px; border: 1px solid transparent; background: rgba(0, 0, 0, .04); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.al-pick:hover, .al-pick:focus-visible { border-color: var(--gold); outline: none; }
.al-pick.on { border-color: var(--gold-dark); background: rgba(201, 162, 39, .2); }
.al-pick small { color: var(--ink-soft); font-size: .75rem; }
.al-pick-list .empty { padding: .4rem; font-style: italic; color: var(--ink-soft); }
.al-invite-send { display: flex; gap: .4rem; flex-wrap: wrap; }
.al-invite-send input { flex: 1 1 12rem; min-width: 0; }
.al-sub-h { margin: .9rem 0 .3rem; font-family: var(--heading); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blood); }
.al-pending { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .3rem .6rem; padding: .4rem 0; border-bottom: 1px dashed rgba(120, 90, 40, .25); }
.al-pending small { display: block; color: var(--ink-soft); }
.al-pending.invite { padding: .6rem .5rem; border: 1px solid var(--gold); border-radius: 10px; background: linear-gradient(90deg, rgba(201, 162, 39, .18), transparent); }
@media (max-width: 600px) { .al-pending { grid-template-columns: auto minmax(0, 1fr); } .al-pending > .btn { grid-column: span 1; } }

/* Brett & Chronik */
.al-post-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: end; margin-bottom: .6rem; }
.al-posts li { padding: .5rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .35); border: 1px solid rgba(120, 90, 40, .2); }
.al-posts li + li { margin-top: .4rem; }
.al-posts header { display: flex; align-items: baseline; gap: .3rem; font-size: .85rem; }
.al-posts header small { color: var(--ink-soft); }
.al-posts time { margin-left: auto; font-size: .72rem; color: var(--ink-soft); }
.al-posts p { margin: .25rem 0 0; white-space: pre-line; }
.al-x { border: 0; background: none; color: var(--blood); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.al-log li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed rgba(120, 90, 40, .2); }
.al-log-ic { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--gold-dark); background: rgba(201, 162, 39, .15); }
.al-log-ic svg { width: .9rem; height: .9rem; }
.al-log p { margin: 0; }
.al-log time { font-size: .72rem; color: var(--ink-soft); }

/* Vorteile */
.al-benefits { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; }
.al-benefits li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: start; padding: .5rem; border-radius: 10px; background: rgba(201, 162, 39, .08); }
.al-b-ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff4d0; background: radial-gradient(circle at 35% 30%, #5a3f8c, #2a1c46); border: 1px solid var(--gold); }
.al-b-ic svg { width: 1rem; height: 1rem; }
.al-benefits strong { display: block; font-family: var(--heading); font-size: .85rem; }
.al-benefits small { color: var(--ink-soft); }

/* Ohne Allianz: Einleitung */
.al-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 1.2rem; padding: 1rem; border-radius: 14px; background: var(--noise), linear-gradient(160deg, #2a1d3d, #120c1e); border: 2px solid var(--gold-dark); color: #f3e6c4; }
.al-intro .soon-figure, .al-intro .alliance-image { border-radius: 10px; overflow: hidden; max-height: 280px; }
.al-intro h2 { margin: 0 0 .4rem; font-family: var(--display); color: #ffe7a6; }
.al-intro p { margin: 0; }
@media (max-width: 760px) { .al-intro { grid-template-columns: 1fr; } }
.al-wait { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .6rem .8rem; border-radius: 10px; background: rgba(120, 30, 20, .12); border: 1px solid rgba(160, 50, 40, .35); }
.al-wait svg { width: 1rem; height: 1rem; flex: none; }

/* Formular */
.al-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.al-form-crest { display: grid; justify-items: center; gap: .4rem; padding: .7rem; border-radius: 12px; background: radial-gradient(circle, rgba(201, 162, 39, .22), transparent 70%); }
.al-form-name { font-family: var(--heading); text-align: center; max-width: 9rem; }
.al-form-fields { display: grid; gap: .5rem; min-width: 0; }
.al-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }
.al-field { display: grid; gap: .15rem; min-width: 0; }
.al-field > span { font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.al-field select, .al-field input, .al-field textarea { width: 100%; min-width: 0; }
.al-tag-in { text-transform: uppercase; }
@media (max-width: 600px) { .al-form { grid-template-columns: 1fr; } }

/* Liste aller Allianzen */
.al-cards { display: grid; gap: .5rem; }
.al-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 12px; background: rgba(255, 255, 255, .3); border: 1px solid rgba(120, 90, 40, .25); }
.al-card-main { display: grid; gap: .1rem; min-width: 0; }
.al-card-name { font-family: var(--heading); font-weight: 700; color: var(--ink); text-decoration: none; }
.al-card-name:hover { color: var(--blood); }
.al-card-main em { font-size: .85rem; color: var(--ink-soft); }
.al-card-main > small { color: var(--ink-soft); }
.al-card-clans { display: flex; gap: .15rem; flex-wrap: wrap; }
.al-card-act { display: grid; gap: .25rem; justify-items: end; }
@media (max-width: 600px) { .al-card { grid-template-columns: auto minmax(0, 1fr); } .al-card-act { grid-column: 1 / -1; justify-items: start; display: flex; } }

/* Spielleitung: Clans wählen */
.al-gm-clans { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .25rem; max-height: 14rem; overflow: auto; margin-bottom: .8rem; padding: .4rem; border-radius: 10px; background: rgba(0, 0, 0, .05); }
.al-gm-clan { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }

.al-actions { justify-content: flex-end; }

/* Abzeichen im Clanbanner */
.al-badge { display: inline-flex; align-items: center; gap: .35rem; margin: .1rem 0 .35rem; padding: .15rem .6rem .15rem .3rem; border-radius: 999px; text-decoration: none; font-family: var(--heading); font-size: .78rem; letter-spacing: .04em; color: #ffe7a6; background: linear-gradient(90deg, rgba(61, 42, 92, .9), rgba(34, 22, 58, .85)); border: 1px solid var(--gold); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.al-badge:hover, .al-badge:focus-visible { box-shadow: 0 0 0 2px rgba(255, 211, 107, .4); outline: none; }
.al-badge small { color: #d9bf7a; }

/* Rangliste: Allianzen */
.rk-row.al-row .al-clans { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.al-mini { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .al-hero-glow, .al-wars li.aid { animation: none; } }
@media (max-width: 600px) { .al-post-form { grid-template-columns: 1fr; } .al-post-form .btn { justify-self: end; } }

/* Bündnisregeln */
.al-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.al-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 10px; background: rgba(0, 0, 0, .04); border: 1px solid rgba(120, 90, 40, .2); transition: background .2s, border-color .2s; }
.al-rule.active { background: linear-gradient(90deg, rgba(90, 63, 140, .12), rgba(201, 162, 39, .08)); border-color: rgba(201, 162, 39, .45); }
.al-rule:not(.active) .al-b-ic { filter: grayscale(1) opacity(.55); }
.al-rule strong { display: block; font-family: var(--heading); font-size: .88rem; }
.al-rule small { color: var(--ink-soft); }
.al-switch { position: relative; display: inline-flex; cursor: pointer; }
.al-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.al-switch-track { position: relative; width: 3rem; height: 1.6rem; border-radius: 999px; background: #9a8a70; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); transition: background .2s; }
.al-switch-track i { position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff8e6; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .2s; }
.al-switch input:checked + .al-switch-track { background: linear-gradient(180deg, #6b4fa3, #3f2a6b); }
.al-switch input:checked + .al-switch-track i { transform: translateX(1.4rem); background: #ffe7a6; }
.al-switch input:focus-visible + .al-switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }
.al-seg { display: inline-flex; border: 1px solid var(--gold-dark); border-radius: 999px; overflow: hidden; }
.al-seg button { padding: .3rem .6rem; border: 0; background: transparent; color: var(--ink); font-family: var(--heading); font-size: .72rem; letter-spacing: .03em; cursor: pointer; white-space: nowrap; }
.al-seg button + button { border-left: 1px solid rgba(120, 90, 40, .35); }
.al-seg button.on { background: linear-gradient(180deg, #6b4fa3, #3f2a6b); color: #ffe7a6; }
.al-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.al-rule-state { padding: .15rem .55rem; border-radius: 999px; font-family: var(--heading); font-size: .72rem; white-space: nowrap; background: rgba(0, 0, 0, .08); }
.al-rule-state.on, .al-rule-state.t-frei { background: #3f2a6b; color: #ffe7a6; }
.al-rule-state.t-halb { background: rgba(201, 162, 39, .35); }
@media (max-width: 600px) {
  .al-rule { grid-template-columns: auto minmax(0, 1fr); }
  .al-rule > :last-child { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .al-switch-track, .al-switch-track i { transition: none; } }
@media (max-width: 600px) {
  .al-rule > .al-seg { grid-column: 1 / -1; justify-self: stretch; display: flex; }
  .al-seg button { flex: 1; padding: .35rem .2rem; font-size: .68rem; }
}

/* Push-Nachrichten */
.push-state { display: flex; align-items: flex-start; gap: .45rem; margin: .4rem 0; padding: .6rem .8rem; border-radius: 10px; background: rgba(0, 0, 0, .05); border: 1px solid rgba(120, 90, 40, .25); }
.push-state .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; }
.push-state.on { background: linear-gradient(90deg, rgba(46, 99, 52, .16), transparent); border-color: rgba(46, 99, 52, .5); color: var(--forest); }
.push-state.warn { background: rgba(168, 50, 42, .1); border-color: rgba(168, 50, 42, .4); }
.push-actions { flex-wrap: wrap; }
.push-devices ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.push-devices li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .3); }
.push-devices li.here { box-shadow: inset 3px 0 0 var(--gold); }
.push-devices li .icon { width: 1rem; height: 1rem; }
.push-devices small { color: var(--ink-soft); font-size: .75rem; }
.push-kind.off strong { opacity: .6; }
.push-ic { display: inline-block; width: 1.3rem; text-align: center; }
@media (max-width: 600px) { .push-devices li { grid-template-columns: auto minmax(0, 1fr) auto; } .push-devices li small { grid-column: 2; } }

/* Clangebiete: Fläche, durchgehende Grenze, eigenes Gebiet mit Goldsaum, Allianzsaum */
.wm-svg .wm-terr { fill-opacity: .2; pointer-events: none; }
.wm-svg .wm-terr.ally { fill-opacity: .24; }
.wm-svg .wm-terr.mine { fill-opacity: .32; }
.wm-svg .wm-claim { fill-opacity: .14; stroke: none; stroke-dasharray: none; }
.wm-svg .wm-claim.base { fill-opacity: .24; stroke: none; }
.wm-svg .wm-claim.mine { fill-opacity: .2; }
.wm-svg .wm-border-case { fill: none; stroke: rgba(20, 12, 6, .75); stroke-width: 8; stroke-linecap: round; pointer-events: none; }
.wm-svg .wm-border { fill: none; stroke-width: 4.5; stroke-linecap: round; pointer-events: none; }
.wm-svg .wm-border-case.mine { stroke-width: 10; }
.wm-svg .wm-border.mine { stroke-width: 6; filter: drop-shadow(0 0 4px rgba(255, 215, 110, .9)); }
.wm-svg .wm-border-inner { fill: none; stroke: #ffd96b; stroke-width: 2.2; stroke-dasharray: 7 5; stroke-linecap: round; opacity: .95; pointer-events: none; animation: wm-mine-march 2.6s linear infinite; }
.wm-svg .wm-border-ally { fill: none; stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .95; pointer-events: none; }
.wm-svg .wm-border-ally.mine { stroke-width: 3.6; }
@keyframes wm-mine-march { to { stroke-dashoffset: -24; } }
.wm-still .wm-svg .wm-border-inner { animation: none; }
@media (prefers-reduced-motion: reduce) { .wm-svg .wm-border-inner { animation: none; } }
.wm-legend-clans li.mine { font-weight: 700; }
.wm-mine-tag, .wm-ally-tag { display: inline-block; margin-right: .35rem; padding: 0 .4rem; border-radius: 999px; font-size: .7rem; font-family: var(--heading); letter-spacing: .04em; color: #2a1a05; background: linear-gradient(180deg, #fff3c4, #e6b93f); }
.wm-ally-tag { color: #fff; background: linear-gradient(180deg, #7a5fb5, #3f2a6b); }
.wm-legend-note { list-style: none; font-size: .78rem; font-style: italic; opacity: .85; }
.wm-svg .wm-border-ally { stroke-width: 5; stroke-dasharray: 0.1 9; stroke-linecap: round; opacity: 1; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.wm-svg .wm-border-ally.mine { stroke-width: 5.5; }

/* Allianzkasse & -lager */
.al-treasure { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; margin-bottom: .4rem; }
.al-gold { display: grid; justify-items: center; gap: .1rem; padding: .6rem .9rem; border-radius: 12px; background: radial-gradient(circle at 50% 30%, rgba(255, 215, 110, .35), rgba(201, 162, 39, .1)); border: 1px solid var(--gold); }
.al-gold .icon { width: 1.4rem; height: 1.4rem; color: var(--gold-dark); }
.al-gold b { font-family: var(--heading); font-size: 1.5rem; }
.al-gold small { font-size: .7rem; color: var(--ink-soft); text-align: center; }
.al-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.al-items li { padding: .2rem .55rem; border-radius: 999px; font-size: .82rem; background: rgba(255, 255, 255, .45); border: 1px solid rgba(120, 90, 40, .25); }
.al-tform { display: grid; gap: .4rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed rgba(120, 90, 40, .3); }
.al-tform .btn { justify-self: start; }
.al-trow { display: flex; flex-wrap: wrap; gap: .4rem; }
.al-trow > * { flex: 1 1 9rem; min-width: 0; }
.al-trow .al-qty { flex: 0 0 4.5rem; }
.al-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 14rem; overflow: auto; }
.al-ledger li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .3rem; font-size: .85rem; }
.al-ledger li > span { font-weight: 700; text-align: center; }
.al-ledger li.in > span { color: var(--forest); }
.al-ledger li.out > span { color: var(--blood); }
.al-ledger p { margin: 0; }
.al-ledger time { font-size: .7rem; color: var(--ink-soft); }
@media (max-width: 600px) { .al-treasure { grid-template-columns: 1fr; } }

/* Allianzkrieg */
.al-aws { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.al-aw { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 10px; background: rgba(0, 0, 0, .05); border: 1px solid rgba(120, 90, 40, .25); }
.al-aw.active { background: linear-gradient(90deg, rgba(168, 50, 42, .2), rgba(0, 0, 0, .03)); border-color: rgba(168, 50, 42, .55); }
.al-aw.ended { opacity: .7; }
.al-aw-crests { display: inline-flex; align-items: center; gap: .2rem; }
.al-aw-crests b { color: var(--blood); }
.al-aw small { display: block; color: var(--ink-soft); }
.al-declare { margin-top: .5rem; }
@media (max-width: 600px) { .al-aw { grid-template-columns: auto minmax(0, 1fr); } .al-aw > :last-child { grid-column: 1 / -1; justify-self: start; } }

/* ==========================================================================
   Welten & Dimensionen (kommt bald): kosmischer Riss, schwebende Welten
   ========================================================================== */
.dw {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(80vh, 760px); display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem 6rem; border-radius: 8px; background: #05030c;
  border: 1px solid #3a2a6a;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .4), inset 0 0 0 5px rgba(150, 110, 255, .35), 0 0 40px rgba(120, 80, 255, .2), var(--shadow);
}
body.page-full .dw { flex: 1; min-height: 420px; border: 0; border-radius: 0; box-shadow: none; }
.dw-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.dw::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 42% at 50% 46%, rgba(5, 3, 14, .62), rgba(5, 3, 14, .2) 70%, transparent 92%); }
.dw-content { max-width: 760px; text-align: center; }
.dw-kicker { margin: 0 0 .5rem; font-family: var(--heading); font-weight: 700; font-size: .85rem; letter-spacing: .34em; text-transform: uppercase; color: #b9e9ff; text-shadow: 0 0 12px rgba(110, 220, 255, .8); opacity: 0; animation: hw-fade-in 1s ease-out 2.6s forwards; }
.dw-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(2.8rem, 10vw, 6rem); line-height: 1; letter-spacing: .03em; white-space: nowrap; }
.dw-title span {
  display: inline-block; opacity: 0; transform: translateY(18px) scale(.7); filter: blur(8px);
  background: linear-gradient(180deg, #ffffff 0%, #bfeaff 32%, #a77bff 70%, #6b2fd6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dw-letter .9s cubic-bezier(.2, .9, .2, 1.2) forwards, dw-shimmer 5s ease-in-out 5s infinite;
}
.dw-title span.sp { width: .35em; }
.dw-title { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 28px rgba(140, 100, 255, .65)); }
.dw-sub { margin: 1rem auto 1.1rem; max-width: 36rem; font-style: italic; font-size: 1.15rem; color: #e7defc; text-shadow: 0 1px 4px #000; opacity: 0; animation: hw-fade-in 1.2s ease-out 4.6s forwards; }
.dw-rumors { list-style: none; margin: 0 auto; padding: 0; max-width: 34rem; display: grid; gap: .3rem; font-style: italic; color: #c9bdf0; font-size: .95rem; text-shadow: 0 1px 3px #000; opacity: 0; animation: hw-fade-in 1.2s ease-out 5.6s forwards; }
.dw-rumors li::before { content: '✦ '; color: #9be7ff; font-style: normal; }
.dw-gm { margin: 1rem 0 0; font-size: .8rem; color: #ffd27a; opacity: .85; }
.dw-replay { border-color: rgba(150, 110, 255, .55); color: #d9ccff; animation-delay: 6.5s; }
.dw-replay:hover, .dw-replay:focus-visible { background: rgba(60, 30, 120, .85); }

/* Kamera: aus dem Riss heraus */
.dw .dw-cam { transform-origin: 600px 330px; animation: dw-cam 5.2s cubic-bezier(.5, .02, .2, 1) both; }
@keyframes dw-cam { from { transform: scale(3.4) rotate(-14deg); opacity: .2; } 30% { opacity: 1; } to { transform: scale(1) rotate(0); } }
/* Sterne, Nebel, Riss */
.dw .dw-twinkle { animation: twinkle 3.6s ease-in-out infinite; }
.dw .dw-neb { transform-box: fill-box; transform-origin: center; animation: dw-neb 14s ease-in-out infinite alternate; }
.dw .dw-neb-2 { animation-duration: 18s; }
@keyframes dw-neb { from { transform: scale(1) translate(0, 0); opacity: .85; } to { transform: scale(1.12) translate(20px, -10px); opacity: 1; } }
.dw .dw-ring { animation: dw-rot 30s linear infinite; }
.dw .dw-ring-2 { animation-duration: 18s; animation-direction: reverse; }
.dw .dw-ring-3 { animation-duration: 12s; }
.dw .dw-swirl { animation: dw-rot 6s linear infinite; opacity: .8; }
.dw .dw-corepulse { transform-box: fill-box; transform-origin: center; animation: dw-core 3.2s ease-in-out infinite; }
@keyframes dw-rot { to { transform: rotate(360deg); } }
@keyframes dw-core { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.08); opacity: 1; } }
.dw .dw-mote { animation: dw-suck 6s ease-in infinite; }
@keyframes dw-suck { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.dw .dw-thread { animation: dw-flow 2.4s linear infinite; opacity: .7; }
@keyframes dw-flow { to { stroke-dashoffset: -28; } }
/* Welten */
.dw .dw-bob { animation: dw-bob 6s ease-in-out infinite; }
@keyframes dw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.dw .dw-glowpulse { animation: hw-pulse 3s ease-in-out infinite; }
.dw .dw-flicker { animation: hw-flicker 2.6s steps(1, end) infinite; }
.dw .dw-spin { transform-box: fill-box; transform-origin: center; animation: dw-rot 8s linear infinite; }
.dw .dw-spin-slow { animation: dw-rot-at 20s linear infinite; }
@keyframes dw-rot-at { from { transform: translate(0, -52px) rotate(0); } to { transform: translate(0, -52px) rotate(360deg); } }
.dw .dw-floaty { animation: dw-bob 3.6s ease-in-out infinite; }
.dw .dw-runes { animation: hw-pulse 2.2s ease-in-out infinite; }
.dw-labels text { font-family: var(--heading); font-weight: 700; font-size: 17px; letter-spacing: .08em; fill: #ffe7a6; paint-order: stroke; stroke: rgba(10, 5, 20, .85); stroke-width: 4px; }
.dw-labels text.bad { fill: #ff8a7a; font-size: 15px; }
.dw-forbidden { filter: saturate(.75); }
.dw-unknown text { font-family: var(--display); font-size: 20px; fill: rgba(220, 210, 255, .35); }
@keyframes dw-letter { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes dw-shimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .dw *, .dw .dw-cam { animation: none !important; }
  .dw-title span, .dw-kicker, .dw-sub, .dw-rumors, .dw-replay { opacity: 1; transform: none; filter: none; }
}

/* Handy-Reiterleiste füllt immer die ganze Breite: so viele gleich breite Spalten, wie Reiter sichtbar sind */
@media (max-width: 640px) {
  .mainnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
/* Auf allen Handys dieselbe gut lesbare Beschriftung (Grundschrift, keine Großbuchstaben) – mit etwas mehr Platz auch etwas größer */
@media (max-width: 640px) {
  .mainnav a, .nav-more { font-family: var(--body); font-weight: 700; font-size: clamp(.6rem, 2.6vw, .78rem); letter-spacing: -.01em; text-transform: none; padding-left: 0; padding-right: 0; }
  .mainnav a .icon, .nav-more .icon { width: clamp(1.25rem, 5.4vw, 1.6rem); height: clamp(1.25rem, 5.4vw, 1.6rem); }
  .mainnav { gap: clamp(.12rem, .8vw, .25rem); padding-left: clamp(.2rem, 1.2vw, .5rem); padding-right: clamp(.2rem, 1.2vw, .5rem); }
}
/* Handy: Kopfleiste bündig mit der Reiterleiste (gleicher Rand links und rechts) */
@media (max-width: 640px) {
  .topbar-row { padding-left: clamp(.2rem, 1.2vw, .5rem); padding-right: clamp(.2rem, 1.2vw, .5rem); max-width: none; }
  body.has-side .nav-burger { margin-left: 0; }
  .userbox { margin-right: 0; }
}

/* ---- Handwerk: Meisterpfad (Rezepte nach Heldenstufe) ---------------------------- */
.ml-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.ml-level { flex: none; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b84f 55%, #9a6a17); border: 2px solid var(--gold-dark); box-shadow: 0 2px 8px rgba(80, 50, 10, .35); }
.ml-level small { font-family: var(--heading); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #5a3d0a; }
.ml-level strong { font-family: var(--heading); font-size: 1.6rem; line-height: 1; color: #4a2f05; }
.ml-info { flex: 1; min-width: 0; }
.ml-info p { margin: 0 0 .4rem; }
.ml-bar { height: .5rem; border-radius: 99px; background: rgba(110, 78, 38, .18); overflow: hidden; margin-bottom: .2rem; }
.ml-bar span { display: block; height: 100%; background: linear-gradient(90deg, #c99a2e, #f2d272); border-radius: inherit; }
.ml-ladder { position: relative; display: flex; flex-direction: column; gap: .35rem; padding-left: .2rem; }
.ml-ladder::before { content: ''; position: absolute; left: 1.32rem; top: .8rem; bottom: .8rem; width: 2px; background: linear-gradient(var(--gold-dark), rgba(110, 78, 38, .2)); }
.ml-step { position: relative; border-radius: 8px; }
.ml-step summary { display: flex; align-items: center; gap: .7rem; padding: .3rem .5rem .3rem 0; cursor: pointer; list-style: none; border-radius: 8px; }
.ml-step summary::-webkit-details-marker { display: none; }
.ml-step summary:hover { background: rgba(255, 250, 235, .45); }
.ml-badge { position: relative; z-index: 1; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-content: center;
  font-family: var(--heading); font-size: .95rem; background: #e9dcc0; border: 2px solid rgba(110, 78, 38, .35); color: var(--ink-soft); }
.ml-title { flex: 1; min-width: 0; font-family: var(--heading); letter-spacing: .04em; display: flex; flex-direction: column; }
.ml-title small { font-family: var(--body); letter-spacing: 0; font-size: .82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-state { flex: none; font-size: .75rem; font-family: var(--heading); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ml-recipes { display: flex; flex-wrap: wrap; gap: .3rem; padding: .2rem 0 .6rem 3rem; }
.ml-chip { padding: .1rem .5rem; border-radius: 99px; font-size: .82rem; background: rgba(255, 250, 235, .75); border: 1px solid var(--line); }
.ml-open .ml-badge { background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b84f 60%, #a8781e); border-color: var(--gold-dark); color: #4a2f05; }
.ml-open .ml-state { color: var(--forest); }
.ml-next .ml-badge { background: #fff6dc; border-color: var(--gold); color: #7a4f0a; animation: ml-pulse 2.2s ease-in-out infinite; }
.ml-next summary { background: rgba(255, 244, 205, .6); }
.ml-next .ml-state { color: #8a5a0a; }
.ml-locked .ml-title, .ml-locked .ml-recipes { opacity: .6; }
.ml-locked .ml-badge b { opacity: .7; }
@keyframes ml-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 40, .5); } 50% { box-shadow: 0 0 0 6px rgba(212, 160, 40, 0); } }
@media (prefers-reduced-motion: reduce) { .ml-next .ml-badge { animation: none; } }
.recipe-lv { font-size: .75rem; font-family: var(--heading); letter-spacing: .05em; color: #8a5a0a; margin: .1rem 0 .2rem; }
.craft-groups { margin: .5rem 0 .8rem; }
@media (max-width: 640px) {
  .ml-head { gap: .7rem; }
  .ml-level { width: 3.6rem; height: 3.6rem; }
  .ml-level strong { font-size: 1.3rem; }
  .ml-state { display: none; }
  .ml-recipes { padding-left: 2.6rem; }
}
/* Katalog → Rezepte: Name oben, Stufe und Knöpfe darunter */
.rec-row { flex-wrap: wrap; row-gap: .25rem; }
.rec-row .cat-name { flex: 1 1 100%; }
.rec-row small { flex: 1 1 auto; }
.rec-row input.mini { width: 4.2rem; }

/* Update-Bildschirm: verpasste ältere Updates, eingeklappt mit Datum */
.upd-older { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid rgba(201, 162, 39, .3); animation: upd-up .6s ease-out both; }
.upd-older-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; margin: 0 0 .6rem;
  font-family: var(--heading); font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: #f3d67a; }
.upd-older-title small { font-family: var(--body); font-size: .85rem; letter-spacing: 0; text-transform: none; color: #b9a67e; font-style: italic; }
.upd-past { border: 1px solid rgba(201, 162, 39, .28); border-radius: 8px; background: rgba(0, 0, 0, .18); margin-bottom: .45rem; }
.upd-past summary { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; cursor: pointer; list-style: none; border-radius: 8px; }
.upd-past summary::-webkit-details-marker { display: none; }
.upd-past summary::after { content: '▾'; flex: none; color: #c9a227; transition: transform .2s; }
.upd-past[open] summary::after { transform: rotate(180deg); }
.upd-past summary:hover, .upd-past summary:focus-visible { background: rgba(255, 230, 160, .07); outline: none; }
.upd-past-date { flex: none; min-width: 6.5rem; font-family: var(--heading); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #c9a227; }
.upd-past-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.upd-past-title strong { font-family: var(--heading); font-size: 1rem; color: #fff3d0; }
.upd-past-title small { color: #b9a67e; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-past-count { flex: none; font-size: .8rem; color: #b9a67e; }
.upd-grid-past { padding: .2rem .7rem .8rem; }
.upd-tile.compact { padding: .55rem .7rem; animation: none; }
.upd-tile.compact .upd-icon { width: 2rem; height: 2rem; }
.upd-tile.compact .upd-icon .icon { width: 1.05rem; height: 1.05rem; }
.upd-tile.compact .upd-text { font-size: .85rem; }
@media (max-width: 640px) {
  .upd-past summary { flex-wrap: wrap; gap: .2rem .6rem; }
  .upd-past-date { min-width: 0; }
  .upd-past-title { order: 3; flex-basis: 100%; }
  .upd-past-title small { white-space: normal; }
}

/* ---- Spielleitung: Todeschat ----------------------------------------------------- */
.dc-card { color: #e9dfcf; background: radial-gradient(ellipse at 50% -10%, rgba(140, 20, 20, .35), transparent 60%), linear-gradient(180deg, #1d1514, #110c0b);
  border: 1px solid #5a1d18; box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .18), 0 10px 30px rgba(0, 0, 0, .35); }
.dc-card > h2 { color: #f0c9a0; display: flex; align-items: center; gap: .4rem; }
.dc-card > h2 .icon { color: #d64535; }
.dc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin-bottom: .6rem; }
.dc-head p { margin: 0; font-size: .88rem; font-style: italic; color: #b8a58e; }
.dc-list { display: flex; flex-direction: column; gap: .7rem; max-height: min(70vh, 760px); overflow-y: auto; overscroll-behavior: contain; padding: .3rem .4rem .6rem .1rem; scroll-behavior: smooth; }
.dc-day { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; color: #9b8670; font-family: var(--heading); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.dc-day::before, .dc-day::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .35), transparent); }
.dc-msg { display: flex; align-items: flex-start; gap: .65rem; animation: dc-in .45s ease-out both; }
.dc-avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; border: 2px solid #6e2a22; box-shadow: 0 0 10px rgba(180, 30, 30, .35); background: #2a1715; }
.dc-skull { display: grid; place-items: center; color: #e6d3b5; }
.dc-skull .icon { width: 1.3rem; height: 1.3rem; }
.dc-body { flex: 1; min-width: 0; }
.dc-from { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .2rem .2rem; font-size: .8rem; color: #b8a58e; }
.dc-from span:first-child { font-family: var(--heading); letter-spacing: .04em; color: #f0c9a0; }
.dc-from time { font-size: .75rem; color: #8f7b66; }
.dc-new { padding: 0 .4rem; border-radius: 99px; font-family: var(--heading); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #fff1e6; background: #b3261e; }
.dc-bubble { display: flex; flex-direction: column; gap: .4rem; width: 100%; padding: .6rem .8rem; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border-radius: 4px 14px 14px 14px; background: linear-gradient(180deg, rgba(255, 235, 210, .08), rgba(255, 235, 210, .03)); border: 1px solid rgba(201, 162, 39, .25);
  transition: border-color .2s, background .2s, box-shadow .2s; }
.dc-bubble:hover, .dc-bubble:focus-visible { border-color: rgba(243, 214, 122, .6); background: rgba(255, 235, 210, .1); outline: none; }
.dc-bubble.unseen { border-color: rgba(214, 69, 53, .75); box-shadow: 0 0 0 1px rgba(214, 69, 53, .3), 0 0 16px rgba(214, 69, 53, .2); }
.dc-bubble.open { border-radius: 4px 14px 0 0; }
.dc-line { line-height: 1.4; }
.dc-line strong { color: #fff3e2; }
.dc-cause { color: #d9c4a8; }
.dc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.dc-chip { padding: .05rem .5rem; border-radius: 99px; font-size: .78rem; background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .25); color: #d9c9a4; }
.dc-chip.gold { color: #f3d67a; }
.dc-chip.rare { color: #ffb347; border-color: rgba(255, 179, 71, .5); }
.dc-hint { margin-left: auto; font-family: var(--heading); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #c9a227; }
.dc-details { padding: .6rem .8rem .7rem; border: 1px solid rgba(201, 162, 39, .25); border-top: 0; border-radius: 0 0 14px 14px; background: rgba(0, 0, 0, .28); animation: dc-open .25s ease-out both; }
.dc-group { margin-bottom: .55rem; }
.dc-group h4 { margin: 0 0 .3rem; font-family: var(--heading); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #b8a58e; }
.dc-items { display: flex; flex-wrap: wrap; gap: .3rem; }
.dc-item { padding: .1rem .5rem; border-radius: 99px; font-size: .84rem; background: rgba(255, 245, 225, .9); border: 1px solid rgba(110, 78, 38, .35); }
.dc-item b { font-weight: 700; color: #3a2a1a; }
.dc-kept h4 { color: #7fbf7a; }
.dc-gold { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .2rem 0 .55rem; font-size: .88rem; color: #d9c9a4; }
.dc-gold b { color: #f3d67a; }
.dc-none { margin: 0 0 .5rem; font-style: italic; color: #b8a58e; }
.dc-link { font-family: var(--heading); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #f3d67a; }
.dc-empty { margin: 1.5rem 0; text-align: center; font-style: italic; color: #9b8670; }
.dc-more { display: flex; justify-content: center; }
@keyframes dc-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes dc-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dc-msg, .dc-details { animation: none; } }
@media (max-width: 640px) {
  .dc-avatar { width: 2.1rem; height: 2.1rem; }
  .dc-hint { margin-left: 0; flex-basis: 100%; }
}
/* Welten & Dimensionen: Ton-Knopf */
.dw-sound { position: absolute; left: .8rem; bottom: .8rem; z-index: 2; padding: .3rem .8rem; border-radius: 99px; border: 1px solid rgba(150, 110, 255, .55);
  background: rgba(10, 6, 24, .7); color: #d9ccff; font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; cursor: pointer; }
.dw-sound:hover, .dw-sound:focus-visible { background: rgba(60, 30, 120, .85); color: #fff; outline: none; }
.dw-sound.waiting { color: #fff3c4; border-color: rgba(255, 215, 120, .8); animation: dw-sound-wait 1.6s ease-in-out infinite; }
@keyframes dw-sound-wait { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 120, .45); } 50% { box-shadow: 0 0 0 7px rgba(255, 215, 120, 0); } }
@media (prefers-reduced-motion: reduce) { .dw-sound.waiting { animation: none; } }
/* Handwerk: Meisterschaft je Rezept */
.cm { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: .25rem 0 .35rem; font-size: .82rem; }
.cm-name { font-family: var(--heading); letter-spacing: .03em; color: #6b4a1a; }
.cm-name small { font-family: var(--body); letter-spacing: 0; color: var(--ink-soft); }
.cm-perks { color: var(--forest); font-size: .78rem; }
.cm-bar { height: .3rem; border-radius: 99px; background: rgba(110, 78, 38, .15); overflow: hidden; }
.cm-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b88a2a, #e8c35e); }
.cm-0 .cm-perks { color: var(--ink-soft); }
.cm-4 .cm-name, .cm-5 .cm-name { color: #8a2a12; }
.cm-5 .cm-bar span { background: linear-gradient(90deg, #c0392b, #f3d67a, #c0392b); }
/* Rohstoff-Bilder */
.res-art { flex: none; display: block; filter: drop-shadow(0 1px 1px rgba(40, 20, 5, .25)); }
.bag-icon.res, .vault-lock.res { background: radial-gradient(circle at 40% 35%, #fff8e6, #e6d3a8); }
.material .res-art { align-self: center; }
.ingredients .ing-name { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.recipe header .res-art { margin-right: -.1rem; }
.recipe header h3 { flex: 1; }
.mat-cell { display: flex; align-items: center; gap: .5rem; }
.ware-name .res-art { display: inline-block; vertical-align: middle; margin-right: .3rem; }
.shop-icon.res { background: radial-gradient(circle at 40% 35%, #fff8e6, #e6d3a8); }