@font-face{font-family:BBErfolgszahlen;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/source-serif-ziffern.woff2') format('woff2')}
/* Erfolge im WoW-Stil: Symbole, Punkteschild, Einblendung "Erfolg errungen" */
.eg-symbol{--eg:#c08a5a;position:relative;display:inline-grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2b241c,#120f0c 70%);border:2px solid var(--eg);
  box-shadow:inset 0 0 0 2px #00000080,inset 0 0 14px color-mix(in srgb,var(--eg) 35%,transparent),0 0 0 1px #00000099}
.eg-symbol img{width:74%;height:74%;object-fit:contain;filter:none}
.eg-symbol svg{width:24px;height:24px;fill:none;stroke:var(--eg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eg-symbol.eg-gross{width:58px;height:58px}.eg-symbol.eg-gross svg{width:30px;height:30px}
.eg-bronze{--eg:#c9925f}.eg-silber{--eg:#cdd3de}.eg-gold{--eg:#f0c060}.eg-legendaer{--eg:#ff9443}
.eg-symbol.eg-offen{filter:grayscale(1);opacity:.42}
.eg-symbol.eg-offen:has(img){filter:none;opacity:.8}
.eg-schild{position:relative;display:inline-grid;place-items:center;width:34px;height:38px;flex:none}
.eg-schild svg{position:absolute;inset:0;width:100%;height:100%;fill:#2a2116;stroke:#e3ad4f;stroke-width:1.4}
.eg-schild b{position:relative;font:700 12px Inter,sans-serif;color:#f8d690;margin-top:-2px;letter-spacing:-.02em}
.eg-schild.eg-lang{width:44px;height:42px}.eg-schild.eg-lang b{font-size:12.5px}
.eg-summe .eg-schild.eg-lang{width:58px;height:54px}.eg-summe .eg-schild.eg-lang b{font-size:15px}

/* Einblendung unten mittig, wie das Erfolgsbanner im Spiel */
.eg-hinweise{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9000;display:grid;gap:10px;pointer-events:none;width:min(420px,calc(100vw - 32px))}
.eg-banner{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;text-decoration:none;color:#f3eadb;
  background:linear-gradient(180deg,#2a2218f2,#15110df2);border:1px solid #e3ad4f;border-radius:4px;
  box-shadow:0 0 0 1px #000,0 0 28px -6px #e3ad4f88,0 18px 40px -12px #000;
  opacity:0;transform:translateY(18px) scale(.96);transition:opacity .4s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.eg-banner.an{opacity:1;transform:none}
.eg-banner-text{flex:1;min-width:0;display:grid}
.eg-banner-text small{font:600 10.5px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#e3ad4f}
.eg-banner-text b{font:700 17px Cinzel,serif;color:#fff3d6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eg-banner-text .eg-mehr{letter-spacing:.02em;text-transform:none;color:#cbbfa9;font-weight:500;font-size:12px}
@media (prefers-reduced-motion:reduce){.eg-banner{transition:opacity .2s;transform:none}}

/* Liste (Profil und Erfolgsseite) */
.eg-reiter{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.eg-reiter button{all:unset;cursor:pointer;font-size:13px;padding:6px 12px;border:1px solid var(--rand2,#ffffff22);color:var(--leise,#cbbfa9);background:linear-gradient(150deg,rgba(213,229,233,.055),rgba(15,22,29,.12) 70%),rgba(12,19,25,.66);-webkit-backdrop-filter:blur(8px) saturate(80%);backdrop-filter:blur(8px) saturate(80%)}
.eg-reiter button[aria-pressed="true"]{color:#21160a;background:linear-gradient(180deg,var(--gold2,#f8d690),var(--gold,#e3ad4f));border-color:transparent;font-weight:600}
.eg-reiter button small{opacity:.75;margin-left:4px}
.eg-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.eg-karte{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px;min-width:0;background:transparent;border:0}
.eg-karte::after{content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid rgba(224,230,229,.13);border-top-color:rgba(227,173,79,.8);border-radius:0;box-sizing:border-box;background:linear-gradient(150deg,rgba(213,229,233,.055),rgba(15,22,29,.12) 70%),rgba(12,19,25,.48);-webkit-backdrop-filter:blur(8px) saturate(80%);backdrop-filter:blur(8px) saturate(80%)}
.eg-kopf{display:flex;align-items:flex-start;gap:10px;min-width:0}
.eg-kopf .eg-symbol{width:38px;height:38px}.eg-kopf .eg-symbol svg{width:21px;height:21px}
.eg-titel{flex:1;min-width:0}.eg-titel b{display:block;font-size:14.5px;line-height:1.45;color:#f3eadb;font-weight:600;overflow-wrap:anywhere}
.eg-titel small{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold,#e3ad4f);line-height:1.4;margin-bottom:3px}
.eg-kopf>.eg-schild{margin-left:auto;width:30px;height:34px;flex:none}.eg-kopf>.eg-schild b{font-size:11px}
.eg-karte:not(.erhalten) .eg-titel b{color:#bdb3a3}
.eg-karte-text{min-width:0;margin-top:auto}.eg-karte-text>span{display:block;font-size:13px;line-height:1.6;color:var(--leise,#cbbfa9);overflow-wrap:anywhere}
.eg-status:empty{display:none}.eg-status>small{display:block;font-size:11.5px;color:#e3ad4fcc;margin-top:4px}
.eg-balken{height:5px;margin:0 0 5px;background:#ffffff10;overflow:hidden}
.eg-balken i{display:block;height:100%;background:linear-gradient(90deg,#8a6a2c,#e3ad4f)}
.eg-karte:not(.erhalten) .eg-schild{filter:grayscale(1);opacity:.55}
.eg-gruppentitel{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:14px 0 2px;padding:0 0 8px;border-bottom:1px solid #e3ad4f33;font:600 15px Inter,sans-serif;color:var(--gold2,#f8d690)}
.eg-gruppentitel:first-child{margin-top:0}.eg-gruppentitel small{font:400 12px Inter,sans-serif;color:var(--matt,#9a8f7e)}
.eg-karte .ef-v{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;width:auto;min-width:0}
.eg-karte .ef-v>span{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:6px 8px;border:1px solid #ffffff14;color:var(--matt,#9a8f7e);font-size:12px;line-height:1.5;min-width:0}
.eg-karte .ef-v>span.ja{color:#cfe9c4;border-color:#7ee2b040;background:#7ee2b00d}
.eg-karte .ef-v i{font-style:normal;overflow-wrap:anywhere;min-width:0}.eg-karte .ef-v strong{font-weight:500;font-size:11.5px;white-space:nowrap}
.eg-karte>.ef-anteil{display:block;font-size:11px;line-height:1.5;color:var(--matt,#9a8f7e);margin:0}
.eg-summe{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 14px}
.eg-summe .eg-schild{width:44px;height:50px}.eg-summe .eg-schild b{font-size:14px}
.eg-summe strong{font:700 24px Cinzel,serif;color:var(--gold2,#f8d690)}
.eg-summe span{color:var(--matt,#9a8f7e);font-size:13.5px}
.eg-gesamtbalken{flex:1;min-width:160px;height:8px;background:#ffffff10;overflow:hidden}
.eg-gesamtbalken i{display:block;height:100%;background:linear-gradient(90deg,#8a6a2c,#e3ad4f)}
@media (max-width:520px){.eg-liste{grid-template-columns:minmax(0,1fr)}}

/* Identischer Glas-Untergrund bleibt von Anfang an sichtbar; Fortschritt auch im Vergleich. */
.eg-fortschritt{min-width:0;width:100%}
.eg-fortschritt .eg-balken{height:6px;margin:0 0 5px;background:#ffffff16}
.eg-fortschritt>small{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;font-size:11.5px;line-height:1.5;color:var(--leise,#cbbfa9)}
.eg-fortschritt>small>span{color:var(--matt,#9a8f7e);white-space:nowrap}
.eg-karte .ef-v .eg-fortschritt{flex-basis:100%}
.eg-karte .ef-v>span.ja .eg-balken i{background:linear-gradient(90deg,#4a8c65,#91cf9b)}
.eg-status>.eg-fortschritt{margin-top:7px}

/* Aufeinanderfolgende Ziele teilen sich eine Karte. */
.eg-stufe{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font-size:11.5px;line-height:1.5;color:var(--gold2,#f8d690)}
.eg-stufe>span{font-size:10.5px;color:var(--matt,#9a8f7e)}
.eg-stufenstand{min-width:0;width:100%;display:grid;gap:6px}
.eg-stufenstand>small{font-size:11.5px;line-height:1.5;color:var(--matt,#9a8f7e)}
.eg-stufenstand>span{font-size:12px;line-height:1.6;color:var(--leise,#cbbfa9)}
.eg-karte .ef-v .eg-stufenstand{flex-basis:100%}

.eg-karte.eg-suchziel::after{border-color:#e3ad4f99;box-shadow:inset 0 0 0 1px #e3ad4f22,0 0 24px -14px #e3ad4f88}

/* Mediävalformen UND feste Ziffernbreite; nur Erfolgspunkte. */
.eg-schild b,.eg-summe>strong,.ef-seite strong{font-family:BBErfolgszahlen,Georgia,serif!important;font-variant-numeric:oldstyle-nums tabular-nums;font-feature-settings:'onum' 1,'tnum' 1;font-kerning:none;letter-spacing:0}