/* Eternadex-Thema „Hell“: helle Flächen, Forever-Blau als Akzent, Kopfzeile in sattem Blau (Logo bleibt lesbar).
   Überschreibt design.html, kopf.html und die Farben der Seitenvorlagen. Item-Tooltips bleiben dunkel wie im Spiel.
   Wichtig: design.html und kopf.html stehen im <body> (also nach einem <link> im <head>), die Seitenvorlagen definieren
   eigene :root-Variablen und design.html setzt einige Farben mit !important. Damit die Datei unabhängig von ihrer Position
   wirkt, tragen Variablen und Regeln !important, und jeder Selektor beginnt mit „html“ (eine Stufe mehr Spezifität). */

/* ---------- Farbwerte ---------- */
:root {
  --soot: #f2f7fc !important; --iron: #ffffff !important; --iron-2: #eef4fa !important; --iron-3: #dfe9f4 !important;
  --bone: #12263b !important; --ash: #5a6f84 !important;
  --blood: #1f7ae0 !important; --blood-deep: #145cb3 !important; --brass: #1f7ae0 !important; --frost: #1f7ae0 !important;
  --sky: #1f7ae0 !important; --blue: #1f7ae0 !important; --ok: #1b8a3a !important;
  --line: rgba(18, 60, 110, 0.13) !important;
  --zx-accent: #1f7ae0 !important; --zx-gold: #b07a1e !important; --ex-gold-hell: #12263b !important;
  --ex-auf-akzent: #ffffff !important;
  --ex-glas: #ffffff !important; --ex-glas-rand: rgba(18, 60, 110, 0.14) !important;
  --ex-goldlinie: linear-gradient(90deg, transparent, rgba(31, 122, 224, 0.35), transparent) !important;
  /* Qualitätsfarben, auf Weiß lesbar */
  --q0: #6f7780 !important; --q1: #3a4757 !important; --q2: #17872b !important; --q3: #0a63c7 !important; --q4: #8a2fd6 !important; --q5: #c45f00 !important;
  --q-poor: #6f7780 !important; --q-common: #3a4757 !important; --q-uncommon: #17872b !important; --q-rare: #0a63c7 !important; --q-epic: #8a2fd6 !important; --q-legendary: #c45f00 !important;
  /* Rezept-Schwierigkeit (Berufe): orange, gelb, grün, grau auf Weiß */
  --c-or: #d0570f !important; --c-ye: #a77a00 !important; --c-gr: #2a8f2a !important; --c-gy: #7a838c !important;
  /* Questgelb und Gold als Text auf hellem Grund */
  --hell-gold: #94600a;
  --fb: #0d2c52; --fb-2: #123a6b; --fb-hell: #7cc4ff;
  --karte-schatten: 0 1px 2px rgba(13, 44, 82, 0.05), 0 8px 24px -18px rgba(13, 44, 82, 0.35);
  color-scheme: light;
}

/* ---------- Grundlage ---------- */
html, body { background-color: var(--soot) !important; color: var(--bone) !important; }
html body { background-image: linear-gradient(180deg, #e3effb 0, var(--soot) 420px) !important; background-size: auto !important; background-attachment: scroll !important; }
html h1 { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--bone) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
html h1 span, html h2 span { color: var(--zx-accent) !important; -webkit-text-fill-color: var(--zx-accent) !important; text-shadow: none !important; }
html h2, html h3 { color: var(--bone); text-shadow: none !important; }
html a { color: var(--zx-accent); }
html ::selection { background: #cfe4fb !important; color: #0b1c2e !important; }
html .eyebrow { color: var(--zx-accent) !important; }
html .eyebrow::before { color: var(--zx-gold) !important; }
html mark { background: #fff0b8 !important; color: inherit !important; }
html dialog::backdrop { background: rgba(13, 30, 52, 0.45) !important; }
html hr { border-color: var(--line) !important; }
html code, html kbd { background: #eaf1f9 !important; color: #12263b !important; }

/* ---------- Kopfzeile: Forever-Blau ---------- */
html .zk { background: linear-gradient(180deg, var(--fb-2), var(--fb)) !important; border-bottom: 1px solid rgba(124, 196, 255, 0.25) !important; box-shadow: 0 6px 24px -12px rgba(13, 44, 82, 0.6) !important; backdrop-filter: none !important; }
html .zk::after { background: linear-gradient(90deg, transparent, rgba(124, 196, 255, 0.6), transparent) !important; }
html .zk-logo .zk-emblem { box-shadow: 0 0 14px rgba(124, 196, 255, 0.35) !important; }
html .zk-nav a { color: #d6e7f8 !important; }
html .zk-nav a:hover, html .zk-nav a[aria-current="page"] { color: #fff !important; }
html .zk-nav a[aria-current="page"]::after { background: var(--fb-hell) !important; box-shadow: 0 0 10px rgba(124, 196, 255, 0.8) !important; }
html .zk-cd, html .zk-cd span { color: #a9c7e6 !important; }
html .zk-cd b { color: #fff !important; -webkit-text-fill-color: #fff !important; } html .zk-cd i { color: var(--fb-hell) !important; }
html .zk-burger { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.28) !important; color: #fff !important; }
html .zk-burger:hover { background: rgba(255, 255, 255, 0.18) !important; }
/* Sprachwahl */
html .zk-sprache summary { color: #fff !important; border-color: rgba(255, 255, 255, 0.3) !important; }
html .zk-sprache summary:hover, html .zk-sprache[open] summary { background: rgba(255, 255, 255, 0.12) !important; }
html .zk-sprache div { background: #fff !important; border: 1px solid var(--line) !important; box-shadow: 0 18px 40px -16px rgba(13, 44, 82, 0.45) !important; }
html .zk-sprache a { color: #23384e !important; border-radius: 5px; }
html .zk-sprache a:hover, html .zk-sprache a[aria-current] { color: var(--zx-accent) !important; background: #eef5fd !important; }
/* Handy-Menü */
@media (max-width: 1140px) {
  html .zk-nav { background: var(--fb) !important; background-color: var(--fb) !important; border-bottom-color: rgba(124, 196, 255, 0.25) !important; box-shadow: 0 20px 40px -14px rgba(13, 44, 82, 0.6) !important; }
  html .zk-nav a { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
}

/* ---------- Knöpfe ---------- */
html .btn-primary, html .cta:not(div):not(section):not(aside), html .btn:not(.btn-ghost):not(.ghost), html .knopf { background: linear-gradient(180deg, #3b93f0, #1f7ae0) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: none !important; }
html .btn-primary:hover, html .cta:not(div):not(section):not(aside):hover, html .btn:not(.btn-ghost):not(.ghost):hover, html .knopf:hover { filter: brightness(1.06) drop-shadow(0 4px 10px rgba(31, 122, 224, 0.35)) !important; }
html .btn-ghost, html .btn.ghost { background: #fff !important; color: var(--zx-accent) !important; -webkit-text-fill-color: var(--zx-accent) !important; box-shadow: inset 0 0 0 1px rgba(31, 122, 224, 0.45) !important; }
html .btn-ghost:hover, html .btn.ghost:hover { background: #eaf3fd !important; color: var(--blood-deep) !important; -webkit-text-fill-color: var(--blood-deep) !important; }

/* ---------- Flächen: weiße Karten mit feinem Rand und weichem Schatten ---------- */
html .panel, html .slot, html .slotbox, html .post, html .ad, html .kcard, html .doll, html .gbox, html .shop, html .page, html .ctrl, html .press-item, html .idea, html details.dg, html .raid, html .bis-card, html .boss, html .quest, html .box, html .card, html .kachel, html .tile, html .kl-karte, html .bf-karte, html .must {
  background: #fff !important; border-color: var(--line) !important; color: var(--bone);
  box-shadow: var(--karte-schatten) !important;
}
html .kcard:hover, html .ad:hover, html .bis-card:hover, html .press-item:hover { border-color: rgba(31, 122, 224, 0.45) !important; box-shadow: 0 0 0 1px rgba(31, 122, 224, 0.35), 0 18px 40px -24px rgba(31, 122, 224, 0.5) !important; }
html .must { border-color: rgba(31, 122, 224, 0.4) !important; background: linear-gradient(140deg, #e8f2fd, #fff 60%) !important; }

/* ---------- Formulare und Tabellen ---------- */
html input, html select, html textarea { background-color: #fff !important; color: var(--bone) !important; border-color: rgba(18, 60, 110, 0.22) !important; }
html input:focus, html select:focus, html textarea:focus { border-color: var(--zx-accent) !important; outline: none; box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.18) !important; }
html input::placeholder, html textarea::placeholder { color: #8396a8 !important; }
html option { background: #fff; color: var(--bone); }
html table:not(.zt table):not(.tt table) { color: var(--bone); }
html thead th { color: var(--ash) !important; }
html tbody tr:hover { background: #f3f8fd; }

/* ---------- Plaketten und Kennzeichen ---------- */
html .new, html .badge.new { background: #1f7ae0 !important; color: #fff !important; }
html .pill, html .idea .badge.on { color: #fff !important; }
html .pill.blue, html .rz { background: #2a6fc4 !important; color: #fff !important; }
html .fac.H, html .fac.Horde, html .side.h, html .fac button[aria-pressed="true"] { background: #fde4e0 !important; color: #a3271a !important; }
html .fac.A, html .fac.Alliance, html .side.a, html .fac button[data-f="a"][aria-pressed="true"] { background: #dfeafb !important; color: #1b4f99 !important; }
html .kette { background: #fdf0d2 !important; color: #7a5200 !important; }
html .bis-top .tag { background: #1f7ae0 !important; color: #fff !important; }

/* ---------- Item-Qualität ---------- */
html .qq0 { --qc: var(--q0) !important; } html .qq1 { --qc: var(--q1) !important; } html .qq2 { --qc: var(--q2) !important; }
html .qq3 { --qc: var(--q3) !important; } html .qq4 { --qc: var(--q4) !important; } html .qq5 { --qc: var(--q5) !important; }
html .ico, html .it-ico, html .itm .ico, html .treffer .ico, html .zb-kopf .gross { background-color: #12263b !important; }
html .it-kopf .gross { background-color: #12263b !important; }
html .it-kopf h1 { color: var(--qc, var(--hell-gold)) !important; }

/* HUD-Ecken in Blau */
html .ex-hud::before, html .ex-hud::after { border-color: rgba(31, 122, 224, 0.55) !important; }

/* ---------- Footer ---------- */
html .ex-fuss { background: #fff !important; border-top-color: var(--line) !important; color: var(--ash) !important; }
html .ex-fuss a { color: #3f5870 !important; } html .ex-fuss a:hover { color: var(--zx-accent) !important; }
html .ex-fuss .ex-marke { color: var(--bone) !important; }
html .ex-fuss p { color: var(--ash) !important; opacity: 1 !important; }
html .ex-fuss img { box-shadow: 0 0 0 1px var(--line); }

/* ---------- Item-Tooltips bleiben dunkel wie im Spiel ---------- */
html .zt, html .zt-in, html .zt-fest, html .tt { color: #fff !important; -webkit-text-fill-color: currentColor !important; }
html .zt, html .tt { --q0: #9d9d9d !important; --q1: #ffffff !important; --q2: #1eff00 !important; --q3: #0070dd !important; --q4: #a335ee !important; --q5: #ff8000 !important; }
html .zt *, html .tt * { -webkit-text-fill-color: currentColor !important; }
html .zt-in { background: linear-gradient(180deg, rgba(10, 14, 30, 0.97), rgba(4, 6, 16, 0.97)) !important; border-color: #4b5b80 !important; }
html .zt table, html .zt td, html .zt th, html .zt p, html .zt li, html .zt small,
html .tt table, html .tt td, html .tt th, html .tt p, html .tt li { color: inherit !important; background: transparent !important; }
html .zt tr:hover, html .tt tr:hover { background: transparent !important; }
html .zt a { color: inherit !important; }
html .zt .q, html .tt .gold, html .zt-voll .q { color: #ffd100 !important; }
html .zt .q0, html .zt-voll .q0 { color: #9d9d9d !important; } html .zt .q1, html .zt-voll .q1 { color: #fff !important; } html .zt .q2, html .zt-voll .q2 { color: #1eff00 !important; }
html .zt .q3, html .zt-voll .q3 { color: #0070dd !important; } html .zt .q4, html .zt-voll .q4 { color: #a335ee !important; } html .zt .q5, html .zt-voll .q5 { color: #ff8000 !important; }
html .zt .q6, html .zt .q7 { color: #e6cc80 !important; } html .zt .q8 { color: #ffd100 !important; } html .zt .q9 { color: #71d5ff !important; } html .zt .q10 { color: #ff4040 !important; }
html .tt .grey { color: #a5a5a5 !important; } html .tt .green { color: #1eff00 !important; } html .tt .red { color: #ff4040 !important; }
html .tt { background: linear-gradient(180deg, #0b1020, #070a14) !important; }
html .tt small.hint { color: #8592ab !important; }

/* ---------- Klassenfarben: auf Weiß abgedunkelt, Farbton bleibt ---------- */
html .kl { color: color-mix(in srgb, var(--k) 48%, #12263b) !important; }
html .kl img { box-shadow: 0 0 10px -3px var(--k) !important; }
html .kcard h2 { color: color-mix(in srgb, var(--kc) 48%, #12263b) !important; }
html .classbar a[aria-current] { color: color-mix(in srgb, var(--kc) 48%, #12263b) !important; }
html .kl-karte b { color: color-mix(in srgb, var(--kf, #12263b) 48%, #12263b) !important; }
html .kl-intro a[style] { color: var(--bone) !important; }

/* ---------- Gelbe Spiel-Links (Quests, Beute, Nachbarn) auf hellem Grund ---------- */
html .qn, html .reihe a, html .qtab a, html .nachbarn a { color: var(--hell-gold) !important; }
html .qs h1, html .qd h2 { color: var(--hell-gold) !important; -webkit-text-fill-color: var(--hell-gold) !important; }
html .it-grid .box a, html .fz a { color: var(--zx-accent) !important; }
html a.itm, html .qtab a.itm { color: var(--qc, var(--bone)) !important; }
html .qn:hover, html .reihe a:hover, html .qtab a:hover, html .nachbarn a:hover, html .it-grid .box a:hover, html .fz a:hover { text-decoration: underline !important; }
html .geld .g::after { color: #a77a00 !important; } html .geld .s::after { color: #7d8790 !important; } html .geld .k::after { color: #a35a1f !important; }

/* ---------- Datenbank: Upgrade-Finder ---------- */
html .pick:first-of-type { background: #eef5fd !important; }

/* ---------- Quests: Liste, Dialog und Einzelseite ---------- */
html .qtext, html details.orig p { color: var(--bone) !important; }
html .qd { background: #fff !important; border-color: var(--line) !important; box-shadow: 0 30px 80px -24px rgba(13, 44, 82, 0.5) !important; color: var(--bone) !important; }
html .qd-x { background: #eef4fa !important; color: var(--bone) !important; }
html .qd .forever { color: #4b5f73 !important; background: #f3f8fd !important; }
html .box { background: #fff !important; }
html .reihe li.hier::before { color: #fff !important; }

/* ---------- BiS-Listen ---------- */
html .t.pve { background: #dfeafb !important; color: #1b4f99 !important; }
html .t.pvp { background: #fde4e0 !important; color: #a3271a !important; }
html .t.tank { background: #fbefd8 !important; color: #7a5200 !important; }
html .t.heal { background: #dcf3e2 !important; color: #1d6b34 !important; }
html .specs a[aria-current] { background: color-mix(in srgb, var(--k) 22%, #fff) !important; border-color: color-mix(in srgb, var(--k) 60%, #12263b) !important; color: #12263b !important; }
html .specs a[aria-current] .t { background: rgba(255, 255, 255, 0.7) !important; color: #12263b !important; }
html .doll { background: radial-gradient(420px 380px at 50% 45%, color-mix(in srgb, var(--k) 18%, transparent), transparent 70%), linear-gradient(180deg, #f7fbff, #e9f1f9) !important; }
html .doll::before { background: none !important; }
html .dslot { background: rgba(255, 255, 255, 0.92) !important; border-color: var(--line) !important; box-shadow: 0 1px 3px rgba(13, 44, 82, 0.08) !important; }
html .dslot:hover { background: #fff !important; border-color: color-mix(in srgb, var(--k) 60%, #12263b) !important; }
html .dstats section { background: rgba(255, 255, 255, 0.92) !important; border-color: var(--line) !important; }
html .slot > h2 { background: #f3f8fd !important; }
html .row { border-top-color: var(--line) !important; }
html .row:first-child .rank, html .best { color: #fff !important; }
html .kcard .chips span { background: #eef4fa !important; color: var(--bone) !important; }
html .classbar a img, html .kcard img { border-color: rgba(18, 60, 110, 0.3) !important; }

/* ---------- Berufe ---------- */
html .spine { background: linear-gradient(180deg, #ffffff, #eef4fa) !important; color: var(--bone) !important; border-color: var(--line) !important; }
html .spine small { color: var(--ash) !important; }
html .spine[aria-current="true"] { background: linear-gradient(180deg, #3b93f0, #1f7ae0) !important; border-color: #1f7ae0 !important; color: #fff !important; }
html .spine[aria-current="true"] small { color: #dcebfb !important; }
html .bar i { background: linear-gradient(90deg, #1f7ae0, #6fb4ff) !important; }
html .page { background: #fff !important; box-shadow: var(--karte-schatten) !important; }
html .trainer { background: #eef5fd !important; }
html .step { border-top-color: var(--line) !important; }
html .rtable td { border-bottom-color: var(--line) !important; }
html .farben .o { color: var(--c-or) !important; } html .farben .y { color: var(--c-ye) !important; }
html .farben .g { color: var(--c-gr) !important; } html .farben .x { color: var(--c-gy) !important; }
html .bf-intro span[style] { filter: brightness(0.5) saturate(1.6); }

/* ---------- Dungeons ---------- */
html .filters { background: rgba(242, 247, 252, 0.95) !important; border-color: var(--line) !important; backdrop-filter: blur(8px); }
html details.dg[open] { border-color: rgba(31, 122, 224, 0.45) !important; box-shadow: 0 20px 50px -30px rgba(31, 122, 224, 0.5) !important; }
html .boss img, html .boss-bild { background-color: #e9f1f9 !important; }
html .boss-bild { filter: drop-shadow(0 4px 8px rgba(13, 44, 82, 0.25)) !important; }
html .badge.fit { color: #fff !important; }
html .quest-head a.ql { color: var(--hell-gold) !important; }
html .dg-neu { color: #fff !important; }
html .dg-ban { background-color: #123a6b !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 20px -12px rgba(13, 44, 82, 0.5) !important; }
html .dg-ban.ersatz { background-color: #164377 !important; }
html .dg-ban.ersatz::after { background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(8, 26, 50, 0.45)) !important; }
html .dg-hero p { color: #f2f5f9 !important; }

/* ---------- Klassen und Talentplaner (Talentsymbole bleiben dunkel) ---------- */
html .tp-t { border-color: #9fb2c6 !important; }
html .tp-t.frei, html .tp-t.teil { border-color: #23a046 !important; }
html .tp-t.voll { border-color: #d9a300 !important; }
html .tp-t span { background: #fff !important; color: var(--bone) !important; border-color: #9fb2c6 !important; }
html .tp-t.voll span { color: #94600a !important; }
html .tp-info b { color: var(--hell-gold) !important; }

/* ---------- Startseite ---------- */
html .zahlen b { background: linear-gradient(180deg, #12263b, #1f7ae0) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; }
html .treffer { background: #fff !important; border-color: var(--line) !important; box-shadow: 0 30px 60px -24px rgba(13, 44, 82, 0.4) !important; }
html .suche input { border-color: rgba(31, 122, 224, 0.45) !important; box-shadow: 0 0 0 4px rgba(31, 122, 224, 0.08), 0 22px 60px -30px rgba(31, 122, 224, 0.55) !important; }
html .buehne img { filter: drop-shadow(0 10px 30px rgba(13, 44, 82, 0.18)) !important; }

/* ---------- Einsteiger ---------- */
html td.k[style] { filter: brightness(0.5) saturate(1.6); }
html div.cta, html section.cta, html aside.cta { background: linear-gradient(140deg, #e3effb, #ffffff 70%) !important; color: var(--bone) !important; -webkit-text-fill-color: currentColor !important; clip-path: none !important; border: 1px solid rgba(31, 122, 224, 0.3) !important; box-shadow: var(--karte-schatten) !important; filter: none !important; }
html div.cta h2, html div.cta p { color: inherit !important; }
html div.cta .lead { color: var(--ash) !important; }
html .head h2::after { background: linear-gradient(90deg, #1f7ae0, #7cc4ff) !important; }

/* ---------- News und Addons ---------- */
html .post .body strong { color: var(--bone) !important; }
html .post .act a { color: var(--zx-accent) !important; }
html .press-item .src.ff { color: #fff !important; }
html .filter button[aria-pressed="true"] { color: #fff !important; background: #1f7ae0 !important; border-color: #1f7ae0 !important; }
html .tags i.f { background: #dcf3e2 !important; color: #1d6b34 !important; }
html .tags i.g { background: #fde4e0 !important; color: #a3271a !important; }
html .meldung.schlecht { color: #c0321f !important; }
html .ablage { border-color: rgba(31, 122, 224, 0.5) !important; background: #f6faff !important; }

/* ---------- Makros, Tooltips-Anleitung, Release ---------- */
html .mk-code, html .tt-code { background: #f3f7fb !important; color: #0f4c8a !important; border-color: rgba(18, 60, 110, 0.18) !important; }
html .mk-anl code, html .box code { background: #eaf1f9 !important; color: #0f4c8a !important; border-radius: 3px; }
html .mk-fuss a, html .rl-liste a { color: var(--zx-accent) !important; }
/* Vorschau der eingebetteten Links: Spielfarben auf dunklem Grund wie auf fremden Seiten */
html a:has(> .edx-link-ico) { background: #12263b !important; padding: 1px 7px 1px 3px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Rechtliches und 404 ---------- */
html .recht p { color: var(--bone) !important; }
html .w p { color: var(--ash) !important; }