/* Farbwelt angelehnt an WoW Forever: türkise Seekarte, Bronze/Gold wie eine Kompassrose, Elfenbein-Schrift.
   Eigene Gestaltung, keine Blizzard-Logos oder -Grafiken. */
:root {
  --bg: #081a21; --bg2: #0c2530; --panel: #0f2c37; --panel2: #143845; --line: #1f4c59; --line2: #2f6674;
  --ink: #f2e8d2; --ink2: #b8cbc8; --ink3: #7e9c9f; --gold: #c9a24f; --gold2: #ecd08f; --bad: #e57c66; --ok: #8fd18a;
  --sea: #2b8aa3; --sea2: #5cc0d6;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --r: 10px; --cls: var(--gold);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  /* Seekarte: türkiser Schein oben, feine Höhenlinien, dunkle Ränder */
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(43, 138, 163, .45) 0%, transparent 62%),
    repeating-radial-gradient(circle at 18% 22%, rgba(92, 192, 214, .045) 0 1px, transparent 1px 34px),
    repeating-radial-gradient(circle at 82% 68%, rgba(92, 192, 214, .035) 0 1px, transparent 1px 46px),
    radial-gradient(140% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink); font: 16px/1.5 var(--sans); min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--gold2); }
button, input, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; margin: 0 0 .4em; }
h2 { font-size: 1.35rem; color: var(--gold2); }
h3 { font-size: 1.05rem; color: var(--ink); }
.muted { color: var(--ink2); }
.small { font-size: .875rem; }

/* Kopf */
.top {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 20px 0; background: rgba(8, 26, 33, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); text-decoration: none; font-family: var(--serif); font-size: 1.3rem; }
.brand b { color: var(--ink); font-weight: 600; }
.top > * { min-width: 0; }
.find { display: flex; gap: 8px; justify-self: end; width: min(460px, 100%); min-width: 0; }
.find select { flex: none; }
.find button { flex: none; padding-inline: 14px; }
.find input, .find select, .field {
  background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 9px 12px; min-height: 44px;
}
.find input { flex: 1; min-width: 0; }
.find input:focus, .field:focus, .find select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.btn, .find button {
  background: linear-gradient(#e2b45b, #b9862f); color: #1a1208; border: 0; border-radius: 8px; padding: 9px 16px;
  font-weight: 600; min-height: 44px; cursor: pointer;
}
.find button.lang { background: transparent; color: var(--ink); border: 1px solid var(--line2); font-weight: 600;
  min-width: 44px; padding-inline: 10px; letter-spacing: .04em; }
.find button.lang:hover { border-color: var(--gold); color: var(--gold2); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line2); font-weight: 500; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.btn:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
.tabs { grid-column: 1 / -1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs a {
  padding: 10px 14px 12px; color: var(--ink2); text-decoration: none; font-family: var(--serif); font-size: 1.02rem;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a[aria-current="page"] { color: var(--gold2); border-color: var(--gold); }
.banner { margin: 14px auto 0; width: min(1180px, calc(100% - 32px)); padding: 10px 14px; border-radius: var(--r);
  border: 1px dashed var(--line2); color: var(--ink2); font-size: .92rem; }
main { flex: 1; width: min(1180px, calc(100% - 32px)); margin: 20px auto 40px; outline: none; }
.foot { text-align: center; color: var(--ink3); font-size: .8rem; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 79, .07), 0 10px 30px rgba(0, 0, 0, .25); }
.empty { padding: 40px 20px; text-align: center; color: var(--ink2); }
.err { color: var(--bad); }
.chip { display: inline-block; padding: 2px 9px; border: 1px solid var(--line2); border-radius: 99px; font-size: .8rem; color: var(--ink2); }

/* Charakter */
.hero { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; color: var(--cls); text-shadow: 0 0 24px color-mix(in srgb, var(--cls) 35%, transparent); }
.hero .meta { color: var(--ink2); }
.hero .meta b { color: var(--ink); font-weight: 600; }
.doll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.slots { display: flex; flex-direction: column; gap: 8px; }
.slots.r .slot { flex-direction: row-reverse; text-align: right; }
.slot {
  display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; border: 1px solid transparent;
  background: none; width: 100%; text-align: left; cursor: pointer; min-height: 52px;
}
.slot:hover, .slot:focus-visible { background: var(--panel2); border-color: var(--line); outline: none; }
.sq {
  flex: none; width: 44px; height: 44px; border-radius: 8px; border: 2px solid var(--q, var(--line2)); display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--q, #555) 35%, #0f2a34), #091d24 75%);
  font-family: var(--serif); font-weight: 700; color: var(--q, var(--ink3)); font-size: 1.05rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .7);
}
.slot.leer .sq { border-style: dashed; color: var(--ink3); }
.slot .t { min-width: 0; }
.slot .n { color: var(--q, var(--ink3)); font-size: .93rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slot .s { color: var(--ink3); font-size: .78rem; }
.portrait {
  position: relative; aspect-ratio: 3 / 4.4; border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(70% 55% at 50% 45%, color-mix(in srgb, var(--cls) 30%, transparent), transparent 70%), #0a2029;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portrait svg { position: absolute; inset: 10% 12% 0; width: 76%; height: 90%; color: color-mix(in srgb, var(--cls) 55%, #000); }
.portrait .lvl {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: #061419e6; border: 1px solid var(--cls);
  color: var(--ink); border-radius: 99px; padding: 3px 14px; font-family: var(--serif); white-space: nowrap;
}
.weapons { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.weapons .slot { width: auto; flex: 1 1 140px; max-width: 220px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
.bar { height: 8px; border-radius: 99px; background: #061419; border: 1px solid var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #8f6a28, var(--gold2)); }
.prof { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 10px 0; font-size: .92rem; }
.prof .bar { grid-column: 1 / -1; }
.tip {
  position: fixed; z-index: 50; max-width: 300px; background: #061419f2; border: 1px solid var(--line2); border-radius: 10px;
  padding: 12px 14px; font-size: .9rem; box-shadow: 0 12px 40px #000c; pointer-events: none;
}
.tip .tn { font-weight: 600; color: var(--q, var(--ink)); }
.tip .ts { color: var(--ink2); }
.tip .tw { color: var(--ok); }

.sq img, .tal img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.tal:not(.teil):not(.voll) img { filter: grayscale(.85) brightness(.6); }

/* Talente */
.tbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tbar .ctrl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pts { font-family: var(--serif); font-size: 1.15rem; }
.pts b { color: var(--gold2); }
.trees { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tree { padding: 14px 12px 16px; }
.tree header { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 12px; }
.grid { position: relative; margin: 0 auto; }
.grid svg.lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tal {
  position: absolute; width: 52px; height: 52px; border-radius: 10px; border: 2px solid #2c5a66; background: #0b222b;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; color: #5f8389; cursor: pointer; padding: 0;
  transition: border-color .15s, box-shadow .15s, transform .1s; touch-action: manipulation;
}
.tal:active { transform: scale(.95); }
.tal.frei { border-color: var(--sea2); color: var(--ink2); }
.tal.teil { border-color: var(--ok); color: var(--ink); box-shadow: 0 0 12px #7fc97a40; }
.tal.voll { border-color: var(--gold); color: var(--gold2); box-shadow: 0 0 14px #d8a64a55; }
.tal.sel { outline: 2px solid var(--ink); outline-offset: 2px; }
.tal .rk {
  position: absolute; right: -8px; bottom: -8px; background: #061419; border: 1px solid currentColor; border-radius: 6px;
  font: 600 .7rem/1 var(--sans); padding: 3px 4px; color: inherit;
}
.tal.forever::after { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #69ccf0; box-shadow: 0 0 6px #69ccf0; }
.info { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.info p { margin: .2em 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--ink3); margin-top: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 2px solid; vertical-align: -1px; margin-right: 5px; }

/* Reise */
.leg > header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 8px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.item { display: flex; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.item .sq { width: 40px; height: 40px; font-size: .95rem; }
.item .n { color: var(--q); font-weight: 600; line-height: 1.25; }
.item .src { font-size: .85rem; color: var(--ink2); margin-top: 4px; }
.item .why { font-size: .83rem; color: var(--ink3); margin-top: 4px; }
.item.hat { border-color: var(--ok); }
.item .badge { font-size: .72rem; padding: 1px 7px; border-radius: 99px; border: 1px solid; margin-left: 6px; white-space: nowrap; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.dun { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: .9rem; }
.dun.passt { border-color: var(--cls); }

/* Guides */
.tips { margin: .4em 0; padding-left: 1.2em; }
.tips li { margin: .25em 0; }
.route { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.step { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.step b { color: var(--gold2); font-family: var(--serif); }
.step.jetzt, .zone.jetzt { border-color: var(--cls); box-shadow: 0 0 0 1px var(--cls) inset; }
.zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.zone header { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.zone p { margin: .45em 0 0; }
.rank { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rk-row { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); padding: 12px 14px; }
.dlist { display: grid; gap: 10px; }
.dg { padding: 0; }
.dg { overflow: hidden; }
.dg summary { list-style: none; cursor: pointer; padding: 10px 16px 10px 10px; display: flex; gap: 14px; min-height: 72px; align-items: center; }
.dg-head { display: flex; flex: 1; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: center; min-width: 0; }
.dg summary::-webkit-details-marker { display: none; }
.dg summary .dn::before { content: "▸ "; color: var(--gold); }
.dg[open] summary .dn::before { content: "▾ "; }
.dg.passt { border-color: var(--cls); }
.dbody { padding: 0 18px 16px; border-top: 1px solid var(--line); }
.dbody h4 { margin: 14px 0 4px; font-family: var(--serif); color: var(--gold2); font-weight: 600; }
.dbody ol, .dbody ul { margin: .2em 0; padding-left: 1.3em; }
.dbody li { margin: .2em 0; }

/* Freunde */
.friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.friend { display: flex; flex-direction: column; gap: 10px; }
.friend .top2 { display: flex; gap: 12px; align-items: center; }
.ava { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--cls); display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.4rem; color: var(--cls); background: #0a2029; overflow: hidden; flex: none; }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.friend h3 { margin: 0; color: var(--cls); }
.add { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.add .field { flex: 1 1 220px; }

@media (max-width: 860px) {
  .top { grid-template-columns: 1fr; padding-inline: 16px; }
  .find { justify-self: stretch; width: 100%; }
  .doll { grid-template-columns: 1fr 1fr; }
  .portrait { grid-column: 1 / -1; grid-row: 1; max-width: 320px; width: 100%; justify-self: center; }
  .slots.r .slot { flex-direction: row; text-align: left; }
}
@media (max-width: 520px) {
  .doll { grid-template-columns: 1fr; }
  .find select { width: 70px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Startseite Zephras Isle ---------- */
.st-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
body.start .top { background: linear-gradient(rgba(8, 26, 33, .72), rgba(8, 26, 33, 0)); border-bottom-color: transparent; backdrop-filter: none; }
body.start main, body.start .foot { position: relative; z-index: 1; }
body.start main { width: 100%; margin: 0; }
body.start .foot { background: rgba(8, 26, 33, .85); }
body.st-flat { background: radial-gradient(120% 80% at 30% 10%, #e7b978 0%, #2b6a74 45%, #0b2a3a 100%) fixed; }
.st { color: var(--ink); }
.st-hero { min-height: calc(100vh - 110px); display: grid; align-content: end; justify-items: center; text-align: center; padding: 6vh 20px 5vh; }
body.start .st-hero { background: radial-gradient(70% 45% at 50% 82%, rgba(8, 26, 33, .62), transparent 75%); }
.st-cue { background: rgba(8, 26, 33, .55); border: 1px solid rgba(236, 208, 143, .5); border-radius: 999px; padding: 8px 18px 4px !important; }
.st-eyebrow { font-size: .82rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold2); margin: 0 0 14px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.st-title { font-family: var(--serif); font-size: clamp(3rem, 9vw, 7rem); line-height: .92; margin: 0; font-weight: 600; letter-spacing: .01em;
  color: #fff6e0; text-shadow: 0 2px 0 rgba(90, 60, 20, .5), 0 0 40px rgba(255, 210, 140, .45), 0 10px 50px rgba(0, 0, 0, .55); }
.st-title b { display: inline-block; background: linear-gradient(180deg, #fff1c7 0%, #ecd08f 40%, #b9862f 100%); -webkit-background-clip: text;
  background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .5)); }
.st-sub { max-width: 34em; font-size: clamp(1rem, 2.2vw, 1.25rem); margin: 16px 0 18px; color: #f6efe0; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.st-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--gold2); text-decoration: none;
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .12em; min-height: 44px; padding: 8px 14px; }
.st-cue svg { width: 26px; height: 26px; animation: st-bob 2.2s ease-in-out infinite; }
@keyframes st-bob { 50% { transform: translateY(6px); } }
.st-mid { min-height: 150vh; display: grid; place-items: center; }
.st-mid p { font-family: var(--serif); font-size: clamp(1.4rem, 4vw, 2.6rem); color: #fff6e0; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); margin: 0; padding: 0 20px; text-align: center; }
.st-map { max-width: 1120px; margin: 0 auto; padding: 10vh 20px 14vh; }
.st-map h2 { text-align: center; font-size: clamp(1.8rem, 4.5vw, 3rem); color: #fff6e0; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); margin-bottom: 28px; }
.st-hero-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; max-width: 620px; margin: 0 auto 26px;
  padding: 14px 18px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: rgba(8, 26, 33, .72); border: 1px solid var(--cls); box-shadow: 0 0 30px color-mix(in srgb, var(--cls) 35%, transparent); backdrop-filter: blur(8px); }
.st-hero-card b { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--cls); }
.st-hero-card small { color: var(--ink2); }
.st-lvl { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gold); font-weight: 700;
  font-family: var(--serif); font-size: 1.2rem; color: var(--gold2); background: rgba(0, 0, 0, .35); }
.st-go { color: var(--gold2); font-size: .92rem; white-space: nowrap; }
.st-dest { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.st-card { display: grid; gap: 6px; align-content: start; padding: 18px; min-height: 150px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, rgba(15, 44, 55, .78), rgba(8, 26, 33, .86)); border: 1px solid rgba(201, 162, 79, .45);
  backdrop-filter: blur(8px); transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .25s; }
.st-card svg { width: 34px; height: 34px; color: var(--gold2); }
.st-card b { font-family: var(--serif); font-size: 1.3rem; color: #fff6e0; }
.st-card span { color: var(--ink2); font-size: .93rem; }
.st-card:hover, .st-card:focus-visible { transform: translateY(-4px); border-color: var(--gold2); box-shadow: 0 10px 34px rgba(236, 208, 143, .22); outline: none; }
@media (max-width: 560px) { .st-hero-card { grid-template-columns: auto 1fr; } .st-go { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .st-cue svg { animation: none; } .st-card { transition: none; } }

/* ---------- Bewegung (fx.js) ---------- */
.fx-ambient { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.fx-burst { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }
.top { transition: padding .35s ease, background .35s ease; }
body.scrolled:not(.start) .top { padding-top: max(6px, env(safe-area-inset-top)); background: rgba(8, 26, 33, .94); }
.fx-ch { display: inline-block; transform-origin: 50% 100%; }
.fx-glow { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--q, var(--gold2)) 26%, transparent), transparent 60%); }
.fx-glow:hover::after { opacity: 1; }
.tabs a { position: relative; transition: color .25s; }
.tabs a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 10px var(--gold); }
.tabs a:hover::after { transform: scaleX(.4); }
.tabs a[aria-current="page"]::after { transform: scaleX(1); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fx-spin { to { --ang: 360deg; } }
::view-transition-old(root) { animation: .28s ease both vt-out; }
::view-transition-new(root) { animation: .45s cubic-bezier(.2, .8, .2, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); } }

/* ---------- Level-Reise ---------- */
.jr-intro { text-align: center; padding: 30px 0 10px; display: grid; justify-items: center; gap: 6px; }
.jr-title { font-size: clamp(2.4rem, 7vw, 4.6rem); margin: 0; line-height: 1; perspective: 600px;
  background: linear-gradient(180deg, #fff1c7, #ecd08f 45%, #b9862f); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 24px rgba(236, 208, 143, .25)); }
.jr-title .fx-ch { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.jr-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 10px 0 14px; color: var(--ink2); }
.jr-stats b { display: block; font-family: var(--serif); font-size: 2rem; color: var(--gold2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.jr-intro .ctrl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jr-hud { position: sticky; top: calc(var(--hdr, 100px) + 8px); z-index: 5; display: flex; align-items: center; gap: 12px; margin: 18px auto 8px; max-width: 640px;
  padding: 8px 14px; border-radius: 99px; background: rgba(8, 26, 33, .82); border: 1px solid var(--line2); backdrop-filter: blur(10px);
  font-size: .85rem; color: var(--ink2); }
.jr-hud-t { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gold2); font-family: var(--serif); min-width: 0; max-width: 45%; }
.jr-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.jr-bar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #5cc0d6, #ecd08f, #ff9a3c); box-shadow: 0 0 12px #ecd08f; }
.jr { position: relative; display: grid; gap: 40px; padding: 20px 0 30px 96px; }
.jr-path { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; }
.jr-path path { fill: none; stroke-linecap: round; }
.jr-track { stroke: var(--line2); stroke-width: 2; stroke-dasharray: 2 8; opacity: .8; }
.jr-glow { stroke: url(#jrG); stroke-width: 10; opacity: .55; }
.jr-line { stroke: url(#jrG); stroke-width: 3.5; }
.jr-comet { fill: #fff6e0; filter: drop-shadow(0 0 8px #ecd08f) drop-shadow(0 0 18px #ff9a3c); }
.leg { position: relative; padding: 0; border: 0; }
.jr-node { position: absolute; left: -82px; top: -6px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #20505e, #0b2430 70%); border: 2px solid var(--line2); color: var(--ink3);
  transition: border-color .4s, color .4s, box-shadow .4s; }
.jr-lv { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.jr-ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold2); opacity: 0; pointer-events: none; }
.leg.lit .jr-node { border-color: var(--gold); color: var(--gold2); box-shadow: 0 0 22px rgba(236, 208, 143, .45), inset 0 0 14px rgba(236, 208, 143, .25); }
.leg.jetzt .jr-node { border-color: var(--cls); box-shadow: 0 0 26px color-mix(in srgb, var(--cls) 70%, transparent); }
.leg.jetzt .jr-node::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--cls); animation: jr-pulse 2s ease-out infinite; }
@keyframes jr-pulse { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.jr-pin { position: absolute; right: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cls); color: #1a0d14; font-weight: 800; font-size: .8rem; box-shadow: 0 0 12px var(--cls); }
.leg > header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 6px; }
.leg > header h3 { font-size: 1.5rem; margin: 0; }
.jr-here { color: var(--cls); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.jr-counts { display: flex; gap: 6px; margin-left: auto; }
.jr-counts i { font-style: normal; font-size: .75rem; min-width: 26px; text-align: center; padding: 1px 7px; border-radius: 99px; border: 1px solid currentColor; }
.jr-counts .q-epic, .item.q-epic { --qc: #a335ee; } .jr-counts .q-rare, .item.q-rare { --qc: #0070dd; }
.jr-counts .q-uncommon, .item.q-uncommon { --qc: #1eff00; } .jr-counts .q-common, .item.q-common { --qc: #ffffff; }
.jr-counts i { color: color-mix(in srgb, var(--qc) 80%, white); }
.leg .items { perspective: 1200px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.item { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--q) 30%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--q) 9%, var(--panel2)), var(--panel) 60%); transition: border-color .3s, box-shadow .3s; }
.item:hover { border-color: color-mix(in srgb, var(--q) 70%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 22px color-mix(in srgb, var(--q) 25%, transparent); }
.item .sq { position: relative; z-index: 1; box-shadow: 0 0 0 1px color-mix(in srgb, var(--q) 60%, transparent), 0 0 14px color-mix(in srgb, var(--q) 35%, transparent); }
.item > div { position: relative; z-index: 1; min-width: 0; }
.item.q-epic::before, .item.q-legendary::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 70%, var(--q) 85%, #fff 90%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-spin 4s linear infinite; }
.beam { position: absolute; left: 32px; bottom: 0; width: 48px; height: 0; transform: translateX(-50%); pointer-events: none; z-index: 0; opacity: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--q) 80%, white), transparent); filter: blur(6px); }
.item.drop .beam { animation: beam 1.4s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes beam { 0% { height: 0; opacity: .95; } 35% { height: 140%; opacity: .85; } 100% { height: 160%; opacity: 0; } }
.item.drop .sq { animation: icon-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes icon-pop { 0% { transform: scale(.4) rotate(-12deg); } 100% { transform: none; } }
.leg.done .item:not(.hat) { opacity: .78; }
@media (max-width: 700px) {
  .jr { padding-left: 58px; gap: 34px; }
  .jr-node { left: -56px; width: 46px; height: 46px; }
  .jr-lv { font-size: 1rem; }
  .jr-counts { margin-left: 0; }
}
html:not(.motion) .item.q-epic::before, html:not(.motion) .item.q-legendary::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .leg.jetzt .jr-node::before { animation: none; } }
main.enter { animation: page-in .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
body.start main.enter { animation: none; }
body.start .fx-ambient { display: none; }
.portrait.aura::after { content: ""; position: absolute; inset: -30%; pointer-events: none; z-index: 0; opacity: .55; mix-blend-mode: screen;
  background: conic-gradient(from var(--ang), transparent, color-mix(in srgb, var(--cls) 45%, transparent), transparent 30%, transparent 50%, color-mix(in srgb, var(--cls) 35%, transparent), transparent 80%);
  animation: fx-spin 9s linear infinite; filter: blur(18px); }
.portrait > * { position: relative; z-index: 1; }
.portrait svg { position: absolute; }
.tal { transition: box-shadow .3s, border-color .3s; }
.tal.voll { animation: tal-glow 2.6s ease-in-out infinite; }
@keyframes tal-glow { 50% { box-shadow: 0 0 22px #ecd08f88; } }
.zone, .step, .rk-row, .dg, .friend { transition: border-color .3s, box-shadow .3s, transform .3s; }
.dg:hover, .zone:hover { border-color: var(--line2); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
html:not(.motion) .portrait.aura::after, html:not(.motion) .tal.voll { animation: none; }
.crest { flex: none; filter: drop-shadow(0 0 6px rgba(236, 208, 143, .35)); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.brand:hover .crest { transform: rotate(-6deg) scale(1.08); }

/* ---------- Level-Guide mit Weltkarte ---------- */
.lv-best { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; margin: 18px 0 26px; border-color: color-mix(in srgb, var(--cls) 45%, var(--line)); }
.lv-best h3 { margin-top: 2px; }
.lv-best-ico img, .rk-ico img { display: block; border-radius: 10px; }
.lv-best-ico img { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--cls), 0 0 24px color-mix(in srgb, var(--cls) 60%, transparent); }
.lv-meters { display: grid; grid-template-columns: auto 120px; gap: 8px 10px; align-items: center; font-size: .85rem; color: var(--ink2); }
.meter, .rk-bar { display: block; height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.meter b, .rk-bar b { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); border-radius: 8px;
  background: linear-gradient(90deg, var(--cls), #fff6e0); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .2s; box-shadow: 0 0 10px var(--cls); }
.lv-best.on .meter b, .rk-row.on .rk-bar b { transform: scaleX(var(--v)); }
.lv-world { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 22px; align-items: start; margin-bottom: 34px; }
.lv-map { position: sticky; top: calc(var(--hdr, 100px) + 12px); }
.lv-map-in { position: relative; aspect-ratio: 1000 / 620; border-radius: 16px; background-size: 100% 100%; overflow: visible;
  box-shadow: 0 0 0 1px var(--line2), 0 20px 50px rgba(0, 0, 0, .45); will-change: transform; }
.lv-map { overflow: hidden; border-radius: 16px; }
.lv-map-note { margin: 8px 4px 0; }
.lv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lv-cont { fill: rgba(242, 232, 210, .5); font: 600 13px var(--serif); letter-spacing: .3em; text-anchor: middle; }
.lv-route-bg { fill: none; stroke: rgba(8, 26, 33, .55); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.lv-route { fill: none; stroke: #ecd08f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ff9a3c); }
.mk { cursor: pointer; }
.mk-dot { fill: var(--h); stroke: #081a21; stroke-width: 1.5; }
.mk-halo { fill: var(--h); opacity: 0; transition: opacity .3s; }
.mk-t { fill: #fff6e0; font: 600 10.5px var(--sans); text-anchor: middle; paint-order: stroke; stroke: rgba(8, 26, 33, .85); stroke-width: 3px; opacity: .85; }
.mk-l { fill: var(--h); font: 700 9px var(--sans); text-anchor: middle; paint-order: stroke; stroke: rgba(8, 26, 33, .9); stroke-width: 3px; opacity: 0; transition: opacity .3s; }
.mk.hl .mk-halo, .mk:hover .mk-halo { opacity: .35; }
.mk.hl .mk-l, .mk:hover .mk-l { opacity: 1; }
.mk.hl .mk-dot { r: 7.5; }
.mk.now .mk-halo { opacity: .5; animation: mk-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mk-pulse { from { transform: scale(.6); opacity: .7; } to { transform: scale(2); opacity: 0; } }
.lv-route-list { display: grid; gap: 10px; }
.lv-route-list h3 { margin-bottom: 4px; }
.lv-route-list .step { flex-direction: row; gap: 12px; align-items: start; transition: border-color .3s, background .3s, transform .3s; cursor: default; }
.lv-route-list .step > div { display: grid; gap: 3px; min-width: 0; }
.step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700;
  border: 1px solid var(--line2); color: var(--gold2); }
.step-z { color: var(--ink); }
.lv-route-list .step.act { border-color: var(--gold); background: linear-gradient(90deg, rgba(236, 208, 143, .12), var(--panel)); transform: translateX(-4px); }
.lv-route-list .step.act .step-n { background: var(--gold); color: #1a1208; border-color: var(--gold); box-shadow: 0 0 14px var(--gold); }
.lv-h { font-size: 1.5rem; margin: 6px 0 14px; }
.zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.zone { padding: 0 0 14px; overflow: hidden; border-color: color-mix(in srgb, var(--h) 25%, var(--line)); }
.zone > :not(.zone-map) { padding-inline: 14px; }
.zone header { margin: 10px 0 2px; font-family: var(--serif); font-size: 1.15rem; }
.zone-map { position: relative; aspect-ratio: 1 / .62; background-size: 100% 100%; background-repeat: no-repeat; border-bottom: 1px solid var(--line); }
.zone-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 26, 33, .65)); }
.zone-pin { position: absolute; left: var(--px); top: var(--py); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; z-index: 1;
  background: var(--h); box-shadow: 0 0 0 3px rgba(8, 26, 33, .7), 0 0 16px var(--h); }
.zone-pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--h); animation: mk-pulse 2.2s ease-out infinite; }
.zone-map .chip { position: absolute; right: 8px; bottom: 8px; z-index: 1; background: rgba(8, 26, 33, .8); color: var(--h); border-color: var(--h); }
.zone-map .badge.new { position: absolute; left: 8px; top: 8px; z-index: 1; color: #69ccf0; background: rgba(8, 26, 33, .8); font-size: .72rem; padding: 1px 8px; border-radius: 99px; border: 1px solid; }
.zone.jetzt { box-shadow: 0 0 0 1px var(--cls), 0 0 28px color-mix(in srgb, var(--cls) 30%, transparent); }
.zone.flash { animation: flash 1.5s ease; }
@keyframes flash { 20% { box-shadow: 0 0 0 2px var(--gold2), 0 0 40px var(--gold); } }
.lv-rank { display: grid; gap: 8px; margin-top: 34px; }
.rk-row { display: grid; grid-template-columns: 30px 40px minmax(120px, 220px) 1fr 44px; gap: 12px; align-items: center; padding: 8px 14px; border-radius: 12px;
  text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); }
.rk-row:hover { border-color: var(--cls); }
.rk-i { font-family: var(--serif); font-weight: 700; color: var(--gold2); text-align: center; }
.rk-ico img { width: 36px; height: 36px; border-radius: 8px; box-shadow: 0 0 0 1px var(--cls); }
.rk-n { display: grid; min-width: 0; } .rk-n b { color: var(--cls); font-family: var(--serif); } .rk-n small { color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-v { color: var(--ink2); font-size: .85rem; text-align: right; }
@media (max-width: 900px) {
  .lv-world { grid-template-columns: 1fr; }
  .lv-map { position: relative; top: 0; }
  .lv-best { grid-template-columns: auto 1fr; } .lv-meters { grid-column: 1 / -1; }
  .rk-row { grid-template-columns: 24px 36px 1fr 60px; } .rk-v { display: none; }
}
html:not(.motion) .mk.now .mk-halo, html:not(.motion) .zone-pin::after { animation: none; }
html, body { overflow-x: clip; }
.lv-seg { fill: none; stroke: rgba(236, 208, 143, .28); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 5; transition: stroke .4s, stroke-width .4s; }
.lv-seg.act { stroke: #ecd08f; stroke-width: 3.5; stroke-dasharray: none; filter: drop-shadow(0 0 5px #ff9a3c); }
.dg-thumb { flex: none; width: 104px; height: 52px; border-radius: 8px; background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px var(--line2), 0 6px 16px rgba(0, 0, 0, .35); transition: transform .4s cubic-bezier(.2, .8, .2, 1), filter .4s; filter: saturate(.85); }
.dg-thumb.none { display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; color: var(--gold2);
  background: radial-gradient(circle at 30% 30%, #20505e, #0b2430); }
.dg:hover .dg-thumb { transform: scale(1.06); filter: saturate(1.1); }
.dg-banner { height: 180px; margin: 0 -18px 6px; background-size: cover; background-position: center; position: relative; }
.dg-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--panel) 100%); }
@media (max-width: 560px) { .dg-thumb { width: 72px; height: 44px; } .dg-banner { height: 130px; } }
.cls-ico { width: 44px; height: 44px; border-radius: 10px; vertical-align: -6px; margin-right: 12px; box-shadow: 0 0 0 2px var(--cls), 0 0 20px color-mix(in srgb, var(--cls) 55%, transparent); }
/* Talentrechner: Spezialisierungssymbol, Rangtexte */
.tree h3 { display: flex; align-items: center; gap: 8px; }
.spec-ico { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line, #ffffff22); box-shadow: 0 0 10px #0006; }
.tip p { margin: .35em 0 0; max-width: 300px; }
#tInfo p.tw, .tip p.tw { color: var(--ok); }
#tInfo p, .tip p { white-space: pre-line; }
/* Questbuch: Seitenblatt */
.qs-btn { margin-top: 10px; }
.qs-btn span { color: var(--gold2, #ecd08f); }
html.qs-open { overflow: hidden; }
.qsheet { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.qs-back { position: absolute; inset: 0; background: #04121899; backdrop-filter: blur(3px); }
.qs-panel { position: relative; width: min(560px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #0d2b33f5, #081c22f8); border-left: 1px solid #ecd08f33; box-shadow: -30px 0 60px #0008;
  padding: 18px 18px 40px; }
.qs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: sticky; top: -18px;
  margin: -18px -18px 0; padding: 18px; background: #0b252cf2; z-index: 2; border-bottom: 1px solid #ecd08f22; }
.qs-head h2 { margin: .1em 0; }
.qs-filter { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0; }
.seg { display: inline-flex; border: 1px solid #ecd08f44; border-radius: 999px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--ink2); padding: 7px 14px; font: inherit; cursor: pointer; min-height: 36px; }
.seg button.on { background: #ecd08f; color: #102a30; font-weight: 600; }
.qs-fit { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.qs-fit input { width: 18px; height: 18px; accent-color: #8fd18a; }
.qs-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.qs-q { border: 1px solid #ffffff14; border-radius: 12px; background: #ffffff06; padding: 4px 12px 10px; transition: border-color .3s, background .3s; }
.qs-q.open { border-color: #ecd08f66; background: #ecd08f0d; }
.qs-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; color: inherit; font: inherit;
  text-align: left; padding: 8px 0 6px; cursor: pointer; align-items: baseline; }
.qs-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qs-m { display: flex; gap: 8px; white-space: nowrap; font-size: .85em; color: var(--ink2); }
.qs-m .xp { color: #b9a7ff; }
.coin::after { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-left: 2px; vertical-align: -1px; }
.coin.g::after { background: radial-gradient(circle at 35% 35%, #fff3b0, #d8a64a); }
.coin.s::after { background: radial-gradient(circle at 35% 35%, #fff, #9fb0b8); }
.coin.c::after { background: radial-gradient(circle at 35% 35%, #ffc9a0, #b0653a); }
.badge.elite { color: #ff9a3c; border-color: #ff9a3c66; }
.fx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fx-dot.horde { background: #d0392f; } .fx-dot.alliance { background: #3e7bd6; }
.qs-r { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qs-it { width: 34px; height: 34px; border-radius: 7px; border: 2px solid var(--q); overflow: hidden; display: grid; place-items: center;
  font-size: .8em; color: var(--q); background: #0006; position: relative; cursor: help; }
.qs-it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-it.choice { border-style: dashed; }
.qs-it.fit::after { content: "✓"; position: absolute; right: -1px; bottom: -1px; background: #8fd18a; color: #0b252c; font-size: 10px;
  font-weight: 700; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 4px 0 5px 0; }
.chip.rep { font-size: .78em; }
.qs-d p { margin: .6em 0 0; white-space: pre-line; line-height: 1.55; }
.qs-src { margin-top: 18px; }
@media (max-width: 600px) { .qs-panel { padding: 14px 14px 40px; } .qs-head { margin: -14px -14px 0; top: -14px; padding: 14px; } }
.badge.cls { color: var(--cls, #ecd08f); border-color: currentColor; }

/* ---------- Ziele und Sammlung ---------- */
.zl-tabs a { color: var(--ink2); padding: 7px 14px; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.zl-tabs a.on { background: #ecd08f; color: #102a30; font-weight: 600; }
.zl-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.zl-cnt { font-size: .78em; opacity: .75; font-variant-numeric: tabular-nums; }
.zl-src { margin-top: 24px; }
.zl-grid { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.zl-nav { position: sticky; top: 130px; padding: 10px; max-height: calc(100vh - 150px); overflow: auto; }
.zl-nav ul { list-style: none; margin: 0; padding: 0; }
.zl-nav ul ul { margin: 2px 0 6px 36px; }
.zl-nav a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--ink2); text-decoration: none; min-height: 36px; }
.zl-nav a span:first-of-type, .zl-nav ul ul a span:first-child { flex: 1; }
.zl-nav a:hover { background: #ffffff0d; color: var(--ink); }
.zl-nav a.on { background: #ecd08f1f; color: var(--gold2); }
.zl-ring { width: 26px; height: 26px; transform: rotate(-90deg); flex: none; }
.zl-ring circle { fill: none; stroke: var(--line2); stroke-width: 4; }
.zl-ring circle.on { stroke: var(--gold2); stroke-linecap: round; transition: stroke-dashoffset .6s; }
.zl-cat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.zl-cat h3 { font-size: 1.3rem; margin: 0; color: var(--gold2); }
.zl-list { display: grid; gap: 10px; perspective: 1200px; }
.zl-ach, .zl-rep, .zl-title { display: flex; gap: 14px; align-items: flex-start; padding: 14px; transition: border-color .3s, box-shadow .3s, background .3s; }
.zl-body { flex: 1; min-width: 0; }
.zl-body h3 { margin: 0 0 2px; }
.zl-body p { margin: 0; color: var(--ink2); font-size: .92rem; }
.zl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.zl-ico { width: 48px; height: 48px; flex: none; border-radius: 9px; border: 2px solid var(--gold); overflow: hidden; display: grid; place-items: center;
  background: #0b252c; color: var(--gold2); font-family: var(--serif); font-size: 1.3rem; box-shadow: 0 4px 14px #0007; }
.zl-ico img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.65) brightness(.8); transition: filter .4s; }
.done .zl-ico img, .zl-pet .zl-ico img { filter: none; }
.done.zl-ach, .done.zl-title { border-color: #ecd08f88; background: linear-gradient(180deg, #2a3f3a, var(--panel)); box-shadow: 0 0 24px #ecd08f22; }
.zl-crit { margin-top: 8px; font-size: .88rem; color: var(--ink2); }
.zl-crit summary { cursor: pointer; color: var(--sea2); }
.zl-crit ul { margin: 6px 0 0; padding-left: 18px; columns: 2 220px; }
.zl-chk { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid var(--line2); background: transparent; cursor: pointer; display: grid; place-items: center; transition: all .25s; }
.zl-chk svg { width: 20px; height: 20px; fill: none; stroke: #102a30; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s .05s; }
.zl-chk:hover { border-color: var(--gold); }
.zl-chk[aria-pressed="true"] { background: var(--gold2); border-color: var(--gold2); box-shadow: 0 0 16px #ecd08f88; }
.zl-chk[aria-pressed="true"] svg { stroke-dashoffset: 0; }
.zl-chk:focus-visible, .zl-mount:focus-visible, .zl-pet:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
.zl-group { margin: 22px 0 10px; color: var(--gold2); font-size: 1.15rem; }
.zl-reps { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.zl-rep { flex-wrap: wrap; border-left: 4px solid var(--rep); }
.zl-rep .zl-body { flex-basis: 100%; }
.zl-repbar { display: flex; gap: 3px; flex: 1; min-width: 200px; }
.zl-repbar button { flex: 1; height: 26px; border: 0; border-radius: 4px; background: #ffffff12; cursor: pointer; padding: 0; transition: background .25s, transform .15s; }
.zl-repbar button.on { background: var(--c); opacity: .85; }
.zl-repbar button:hover { transform: scaleY(1.25); }
.zl-stufe { min-width: 92px; text-align: right; color: var(--rep); font-weight: 600; font-size: .9rem; }
.done.zl-rep { box-shadow: 0 0 26px #cc88ff33; }
.zl-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.zl-title { align-items: center; }
.zl-tname { font-family: var(--serif); font-size: 1.1rem; color: var(--ink) !important; }
.zl-tname b { color: var(--cls); }
.zl-mounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; perspective: 1400px; }
.zl-mount, .zl-pet { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 12px; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 30%, #2a2a2a, #161616 70%); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-align: center;
  transition: border-color .3s, box-shadow .3s; font: inherit; }
.zl-mount img { width: 100%; aspect-ratio: 1; object-fit: cover; transform: scale(1.35); transform-origin: 50% 55%; filter: grayscale(.7) brightness(1.05); opacity: .8; transition: filter .5s, transform .6s, opacity .5s; }
.zl-mount:hover img { transform: scale(1.45); filter: grayscale(.2) brightness(1.3); opacity: 1; }
.zl-mount.done img { filter: brightness(1.45) contrast(1.05) saturate(1.1); opacity: 1; }
.zl-mount .zl-noimg { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font: 2.4rem var(--serif); color: var(--line2); }
.zl-mn { padding: 0 10px; font-size: .92rem; line-height: 1.3; position: relative; }
.zl-mount .fx-dot, .zl-pet .fx-dot { position: absolute; top: 10px; left: 10px; }
.zl-have { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  border: 2px solid #ffffff33; color: transparent; transition: all .3s; }
.done .zl-have { background: var(--gold2); border-color: var(--gold2); color: #102a30; box-shadow: 0 0 14px #ecd08faa; }
.zl-mount.done, .zl-pet.done { border-color: #ecd08f99; box-shadow: 0 0 24px #ecd08f2a, inset 0 -40px 60px -40px #ecd08f33; }
.zl-pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.zl-pet { padding: 16px 10px 12px; background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.zl-pet .zl-ico { width: 56px; height: 56px; border-color: var(--line2); }
.zl-pet:not(.done) .zl-ico img { filter: grayscale(.8) brightness(.7); }
.zl-pet.done .zl-ico { border-color: var(--gold2); }
.zl-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.zl-set { border-top: 3px solid var(--q); transition: box-shadow .4s, border-color .4s; }
.zl-set header { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-bottom: 10px; }
.zl-set header h3 { margin: 0; color: var(--q); }
.zl-set header .muted { grid-column: 1; }
.zl-setn { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 1rem; }
.zl-pieces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.zl-pieces .qs-it { width: 40px; height: 40px; position: relative; cursor: pointer; padding: 0; background: #0b252c; font: inherit; color: var(--ink2); }
.zl-pieces .qs-it:not(.fit) img { filter: grayscale(.7) brightness(.6); }
.zl-boni { margin: 0; padding: 0; list-style: none; font-size: .86rem; color: var(--ink3); display: grid; gap: 3px; }
.zl-boni li.on { color: var(--ok); }
.zl-set.done { box-shadow: 0 0 30px color-mix(in srgb, var(--q) 30%, transparent); }
[data-card][hidden] { display: none !important; }
@media (max-width: 820px) {
  .zl-grid { grid-template-columns: 1fr; }
  .zl-nav { position: static; max-height: none; padding: 6px; overflow-x: auto; }
  .zl-nav > ul { display: flex; gap: 4px; }
  .zl-nav ul ul { display: none; }
  .zl-nav a { white-space: nowrap; }
  .zl-reps, .zl-sets { grid-template-columns: 1fr; }
  .zl-mounts { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .zl-crit ul { columns: 1; }
}

/* Weltkarte aus den Spieldaten (js/karte.js) */
.km-bar { gap: 12px; }
.km-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--serif); font-size: 1.15rem; }
.km-trail a { text-decoration: none; }
.km-trail b { color: var(--gold2); }
.km-trail span { color: var(--ink3); }
.km-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.km { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line2); background: #1c1408;
  touch-action: none; cursor: grab; user-select: none; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.km:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }
.km.drag { cursor: grabbing; }
.km-in { position: absolute; inset: 0; transform-origin: 0 0; --s: 1; will-change: transform; }
.km-in img { display: block; width: 100%; height: 100%; pointer-events: none; }
.km-layer { position: absolute; inset: 0; pointer-events: none; }
.km-layer > * { pointer-events: auto; }
.km-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #1b1206; background: var(--ink); transform: scale(var(--s)); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.km-pin::after { content: ""; position: absolute; inset: -12px; }            /* größere Trefferfläche für Finger */
.km-pin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.km-pin.ort { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #f6ecd2; border-width: 1.5px; }
.km-pin.flug { border-radius: 4px; transform: scale(var(--s)) rotate(45deg); }
.km-pin.flug.allianz { background: #4a8cff; }
.km-pin.flug.horde { background: #e04b3a; }
.km-pin.flug.beide { background: #f2cf4a; }
.km-pin.inst { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: #6b2fb3 radial-gradient(circle, #d9b8ff 0 3px, transparent 4px); border-color: #f2e0ff; }
.km-pin.inst.raid { background: #b3541e radial-gradient(circle, #ffd7a8 0 3px, transparent 4px); border-color: #ffe9cc; }
.km-pin.inst.focus { animation: kmPulse 1.4s ease-out infinite; }
@keyframes kmPulse { 0% { box-shadow: 0 0 0 0 rgba(236, 208, 143, .9); } 100% { box-shadow: 0 0 0 18px rgba(236, 208, 143, 0); } }
.km-zone { position: absolute; transform: translate(-50%, -50%) scale(var(--s)); padding: 3px 9px; border-radius: 99px; text-decoration: none;
  white-space: nowrap; font: 600 .82rem/1.2 var(--sans); color: #fff6dc; background: rgba(20, 12, 4, .62); border: 1px solid rgba(236, 208, 143, .45);
  text-shadow: 0 1px 2px #000; transition: background .2s, border-color .2s; }
.km-zone small { margin-left: 6px; font-weight: 500; color: var(--gold2); }
.km-zone.big { font: 600 1.05rem/1.2 var(--serif); padding: 6px 14px; letter-spacing: .04em; }
.km-zone:hover, .km-zone:focus-visible { background: rgba(43, 138, 163, .85); border-color: var(--gold2); outline: none; }
.km-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.km-tools .btn { width: 40px; min-height: 40px; padding: 0; font-size: 1.2rem; }
.km-tip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); padding: 5px 10px; border-radius: 8px; pointer-events: none;
  background: rgba(8, 26, 33, .94); border: 1px solid var(--line2); color: var(--ink); font-size: .85rem; white-space: nowrap; z-index: 3; }
.km-side h3 { margin-top: 16px; font-size: .95rem; color: var(--gold2); }
.km-list { margin: 0; padding-left: 18px; }
.km-list.cols { columns: 2; column-gap: 18px; padding-left: 0; list-style: none; font-size: .9rem; }
.km-list.cols li { break-inside: avoid; padding: 2px 0; }
.km-layers { display: grid; gap: 8px; }
.km-chk { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.km-chk input { width: 18px; height: 18px; accent-color: var(--gold); }
.km-ico { width: 22px; text-align: center; }
.km-ico.flug { color: #f2cf4a; } .km-ico.inst { color: #d9b8ff; }
.km-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.km-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); margin-left: 6px; }
.km-dot.allianz { background: #4a8cff; } .km-dot.horde { background: #e04b3a; } .km-dot.beide { background: #f2cf4a; }
.zone-map.real { display: block; background-size: cover; background-position: center; text-decoration: none; }
.zone-map .chip.km-open { right: auto; left: 8px; color: var(--gold2); border-color: var(--line2); }
.km:not(.z2) .km-zone.city, .km:not(.z2) .km-zone small { display: none; }
.km:not(.z2) .km-zone:not(.big) { font-size: .72rem; padding: 2px 7px; }
@media (max-width: 900px) {
  .km-wrap { grid-template-columns: 1fr; }
  .km-trail { font-size: 1rem; }
  .km-zone { font-size: .7rem; padding: 2px 6px; }
  .km-zone small { display: none; }
}
@media (max-width: 600px) {
  .km:not(.z2) .km-zone:not(.big) { display: none; }
  .km-pin { transform: scale(calc(var(--s) * .7)); }
  .km-pin.flug { transform: scale(calc(var(--s) * .7)) rotate(45deg); }
  .km-tools { right: 6px; top: 6px; }
  .km-tools .btn { width: 34px; min-height: 34px; }
  .km-bar .ctrl, .km-bar .ctrl .field { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .km-pin.inst.focus { animation: none; } .km-in { transition: none !important; } }

/* Level-Route auf der Karte */
.km-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.km-route path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.km-route path.bg { stroke: rgba(27, 18, 6, .75); stroke-width: calc(7px * var(--s)); }
.km-route path.fg { stroke: #ffd84a; stroke-width: calc(4px * var(--s)); stroke-dasharray: calc(10px * var(--s)) calc(8px * var(--s)); animation: kmDash 18s linear infinite; }
@keyframes kmDash { to { stroke-dashoffset: -400; } }
.km-zone.rt { border-color: #f2cf4a; }
.km-zone .km-step { font-style: normal; display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 99px; background: #f2cf4a; color: #1b1206; font-size: .72rem; font-weight: 700; }
.km-zone.now { background: rgba(242, 207, 74, .9); color: #1b1206; text-shadow: none; box-shadow: 0 0 0 4px rgba(242, 207, 74, .35); }
.km-zone.now small { color: #1b1206; }
.km-zone.hl { background: rgba(43, 138, 163, .92); border-color: #fff; transform: translate(-50%, -50%) scale(calc(var(--s) * 1.12)); z-index: 2; }
.km.no-route .km-zone .km-step { display: none; }
.km.no-route .km-zone.rt { border-color: rgba(236, 208, 143, .45); }
.km-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.km-steps li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; }
.km-steps li:hover, .km-steps li:focus-within { border-color: var(--line2); background: rgba(43, 138, 163, .12); }
.km-steps li.now { border-color: #f2cf4a; background: rgba(242, 207, 74, .1); }
.km-steps li.away { opacity: .6; }
.km-steps .km-sn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #f2cf4a; color: #1b1206; font-weight: 700; font-size: .75rem; }
.km-steps small { color: var(--ink3); }
.km-onroute { font-size: .88rem; padding: 8px 10px; border-radius: 8px; border: 1px solid #f2cf4a66; background: rgba(242, 207, 74, .08); }
.km-ico.route { color: #f2cf4a; }
@media (prefers-reduced-motion: reduce) { .km-route path { animation: none; } }
.chip.kurz { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; color: var(--gold2); border-color: var(--gold); vertical-align: middle; }
.tal.forever:not(.neu)::after { background: transparent; border: 2px solid #69ccf0; width: 8px; height: 8px; }
.tcmp { margin-top: 12px; }
.tcmp summary { cursor: pointer; font-weight: 600; }

/* Schnellsuche (js/suche.js) */
.sx-btn { display: inline-grid; place-items: center; }
.sx { position: fixed; inset: 0; z-index: 100; background: rgba(4, 12, 16, .66); backdrop-filter: blur(4px); display: grid; justify-items: center; align-items: start; padding: 10vh 16px 16px; }
.sx[hidden] { display: none; }
.sx-in { width: min(680px, 100%); background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line2); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); overflow: hidden; display: flex; flex-direction: column; max-height: 75vh; }
.sx-in input { border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 16px 18px; font-size: 1.1rem; color: var(--ink); outline: none; }
.sx-in ul { list-style: none; margin: 0; padding: 6px; overflow: auto; }
.sx-in li a { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.sx-in li[aria-selected="true"] a, .sx-in li a:hover { background: rgba(43, 138, 163, .22); }
.sx-art { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); }
.sx-art.a-dungeon, .sx-art.a-raid { color: #d9b8ff; } .sx-art.a-zone, .sx-art.a-karte { color: var(--sea2); }
.sx-art.a-talent { color: var(--gold2); } .sx-art.a-quest { color: #f2cf4a; } .sx-art.a-item, .sx-art.a-set { color: #a335ee; }
.sx-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-n small { color: var(--ink3); margin-left: 6px; }
.sx-z { font-size: .8rem; color: var(--ink3); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.sx-hint { padding: 14px; color: var(--ink2); }
.sx-foot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink3); }
@media (max-width: 600px) { .sx-in li a { grid-template-columns: 70px minmax(0, 1fr); } .sx-z { display: none; } }

/* Gruppenplaner (js/gruppe.js) */
.gp-box { margin-top: 18px; }
.gp-mine { margin: 6px 0 10px; padding-left: 18px; }
.gp-runs ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.gp-runs li { display: grid; gap: 4px; }
.gp-whos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gp-who { font-size: .82rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--cls); color: var(--cls); }
.gp-who small { color: var(--ink2); }
.gp-warn { color: var(--bad); font-weight: 700; margin-left: -2px; }
.gp-members ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gp-members li { border-left: 3px solid var(--cls); padding-left: 10px; }
.tbar + .panel, .gp-runs + .panel, .gp-members + .panel { margin-top: 14px; }
.gp-dgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 6px; margin: 10px 0 14px; }
.gp-dg { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; min-height: 40px; }
.gp-dg i { font-style: normal; font-size: .75rem; color: var(--gold2); margin-left: 4px; }
.gp-dg small { color: var(--ink3); }
.gp-dg.far { opacity: .55; }
.gp-dg input { width: 18px; height: 18px; accent-color: var(--gold); }

/* Raids und Attunements (js/raids.js) */
.at-raids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; margin: 16px 0; }
.at-raid { display: grid; gap: 4px; text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.at-raid:hover { border-color: var(--gold); transform: translateY(-2px); }
.at-raid.on { border-color: var(--gold); box-shadow: 0 0 0 3px #ecd08f22; }
.at-seg a { padding: 7px 14px; color: var(--ink2); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.at-seg a.on { background: #ecd08f; color: #102a30; font-weight: 600; }
.at-prog { position: relative; height: 22px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; margin: 12px 0 16px; }
.at-prog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b9862f, #ecd08f); transition: width .4s; }
.at-prog span { position: relative; display: block; text-align: center; font: 600 .78rem/22px var(--sans); color: var(--ink); text-shadow: 0 1px 2px #000; }
.at-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.at-step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.at-step.done { border-color: #ecd08f66; background: linear-gradient(90deg, #ecd08f14, transparent); }
.at-step.done .at-head b { text-decoration: line-through; text-decoration-color: #ecd08f88; }
.at-step.vague { border-style: dashed; }
.at-chk { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line2); background: transparent; color: var(--ink2); cursor: pointer; font-weight: 700; }
.at-chk[aria-pressed="true"] { background: #ecd08f; border-color: #ecd08f; color: #102a30; }
.at-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.at-body p { margin: 4px 0 0; }
.at-fv { color: var(--sea2); }
.at-loot { color: var(--gold2); }
.chip.t-dungeon, .chip.t-raid { color: #d9b8ff; border-color: #d9b8ff66; }
.chip.t-gruppe { color: #ff9a3c; border-color: #ff9a3c66; }
.badge.vague { font-size: .72rem; padding: 1px 8px; border-radius: 99px; border: 1px dashed var(--ink3); color: var(--ink2); }
.at-key { margin-top: 14px; }
.at-key summary { cursor: pointer; }

/* Berufe (js/berufe.js) */
.bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.bf-card { display: grid; grid-template-columns: 48px 1fr; gap: 6px 12px; text-decoration: none; color: var(--ink); align-items: start; transition: border-color .2s; }
.bf-card:hover { border-color: var(--gold); }
.bf-card.empf { border-color: var(--cls); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cls) 35%, transparent); }
.bf-use { grid-column: 1 / -1; }
.bf-ico { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--bg2); border: 1px solid var(--line2); font-weight: 700; }
.bf-ico img { width: 100%; height: 100%; object-fit: cover; }
.bf-ico.big { width: 64px; height: 64px; }
.bf-dh { display: flex; gap: 14px; align-items: center; }
.chip.bf-tip { color: var(--cls); border-color: var(--cls); }
.bf-empf { margin-bottom: 14px; }
.bf-detail { margin-bottom: 18px; }
.bf-fv { color: var(--sea2); }
.bf-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bf-tbl th, .bf-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bf-tbl td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-tbl tr.vague td { opacity: .8; }
.tblwrap { overflow-x: auto; }
.bf-rez { display: grid; gap: 8px; padding-left: 18px; }
.bf-lehrer { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bf-lehrer ul { margin: 4px 0 0; padding-left: 18px; }

/* Raid-Vorbereitung (raids.js) */
.rp { margin: 16px 0; }
.rp-score { --p: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; align-content: center; text-align: center;
  background: conic-gradient(#ecd08f calc(var(--p) * 1%), var(--bg2) 0); position: relative; }
.rp-score::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }
.rp-score b, .rp-score small { position: relative; line-height: 1.1; }
.rp-score small { font-size: .7rem; color: var(--ink3); }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px 22px; }
.rp-grid h4 { margin: 4px 0 8px; font-family: var(--serif); color: var(--gold2); }
.rp-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 4px; border-bottom: 1px dashed var(--line); cursor: pointer; min-height: 38px; font-size: .9rem; }
.rp-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); }
.rp-row.on > span { color: var(--ink2); }
.rp-row.on > span > b, .rp-row.on .rp-it { text-decoration: line-through; text-decoration-color: #ecd08f88; }
.rp-it { display: inline-flex; align-items: center; gap: 6px; }
.rp-it img, .rp-it .ico { width: 22px; height: 22px; border-radius: 4px; }
.rp-roles { margin-bottom: 8px; }
.rp-roles a { padding: 6px 12px; color: var(--ink2); text-decoration: none; display: inline-flex; align-items: center; min-height: 34px; }
.rp-roles a.on { background: #ecd08f; color: #102a30; font-weight: 600; }
.chip.at-fvc { color: var(--sea2); border-color: var(--sea2); font-size: .7rem; padding: 0 7px; }

/* Gruppenplaner: Onyxia in der Gruppe */
.gp-ony { margin-top: 14px; }
.gp-onylist { display: grid; gap: 8px; margin-bottom: 12px; }
.gp-onyrow { display: grid; grid-template-columns: minmax(90px, 160px) minmax(80px, 1fr) auto; gap: 10px; align-items: center; border-left: 3px solid var(--cls); padding-left: 10px; }
.gp-bar { height: 10px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.gp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b9862f, #ecd08f); }
.gp-together { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gp-together li { display: grid; gap: 4px; }
.gp-ony h4 { margin: 4px 0 8px; font-family: var(--serif); color: var(--gold2); }
@media (max-width: 600px) { .gp-onyrow { grid-template-columns: 1fr; } }

/* Talent-Builds (talents.js) */
.tbuilds { margin-bottom: 14px; }
.tb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tb-row .btn.on { border-color: var(--cls); color: var(--cls); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cls) 30%, transparent); }
.tb-row .chip { font-size: .7rem; padding: 0 6px; margin-left: 4px; }
.tb-why { margin: 10px 0 0; }

/* Fortschritt sichern (js/sicherung.js) */
.sb-box { margin-top: 14px; }
.sb-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sb-load { cursor: pointer; }
.sb-msg { margin: 10px 0 0; }