/* ============================================================
EVOLVED PW — BASE STYLESHEET
Einmal ändern → alle Seiten aktualisiert
Einbinden:
============================================================ */
/* --- Google Fonts --- */
/* --- Lokale Fonts (kein Google Fonts) --- */
@font-face { font-family:'Cinzel Decorative'; src:url('../fonts/CinzelDecorative-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cinzel Decorative'; src:url('../fonts/CinzelDecorative-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Cinzel Decorative'; src:url('../fonts/CinzelDecorative-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('../fonts/Cinzel-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('../fonts/Cinzel-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('../fonts/Cinzel-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Crimson Pro'; src:url('../fonts/CrimsonPro-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Crimson Pro'; src:url('../fonts/CrimsonPro-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Crimson Pro'; src:url('../fonts/CrimsonPro-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Crimson Pro'; src:url('../fonts/CrimsonPro-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('../fonts/Raleway-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('../fonts/Raleway-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('../fonts/Raleway-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('../fonts/Raleway-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
/* --- Globale Tokens (die in ALLEN Seiten gleich sind) --- */
:root {
/* index.php Farben */
--gold: #c9a84c;
--gold-light: #f0d080;
--gold-dim: #7a601e;
--bg: #0a0c10;
--bg2: #0f1218;
--bg3: #141820;
--bg4: #1a2030;
--text: #d8d0c0;
--text-dim: #8a8070;
--text-muted: #6a6478;
--cyan: #4ec9d0;
--teal: #2a8a8f;
--red: #c04050;
--purple: #8060c0;
--green: #4a9060;
/* Typografie-Skala */
--font-xs: 0.72rem; /* ~11.5px — Badges, Labels */
--font-sm: 0.82rem; /* ~13px — Sekundär-Text */
--font-base: 0.88rem; /* ~14px — Body-Text */
--font-md: 0.95rem; /* ~15px — Leicht größer */
--font-lg: 1.15rem; /* ~18px — Größere Betonung */
/* Stat-Farben */
--str-c: #e8c070;
--dex-c: #72d44a;
--vit-c: #70d0d8;
--mag-c: #c070e0;
--hp-c: #e05050;
/* Klassen-Farbe: pro Seite überschrieben */
--accent: #c9a84c;
--accent2: #f0d080;
--accent-dim: #7a601e;
--bg-dark: #0a0c10;
--bg-card: #0f1218;
--bg-card2: #141820;
--border: #1a2040;
}
/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* --- Text Links (inline) --- */
.text-link {
color: var(--gold);
font-weight: bold;
text-decoration: none;
border-bottom: 1px dashed rgba(201,168,76,0.4);
transition: border-bottom-color 0.2s;
}
.text-link:hover { border-bottom-color: var(--gold); }
/* --- Guide Cross-Links (visuell identisch zu .text-link) --- */
.guide-link { color:var(--gold); font-weight:bold; text-decoration:none; border-bottom:1px dashed rgba(201,168,76,0.4); transition:border-bottom-color 0.2s; }
.guide-link:hover { border-bottom-color:var(--gold); }
/* --- Body --- */
body {
background: var(--bg);
color: var(--text);
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.7;
overflow-x: hidden;
}
/* Starfield background — index.php */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 20% 20%, rgba(78,201,208,0.04) 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(128,96,192,0.05) 0%, transparent 60%),
radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.02) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* --- Page Header --- */
.page-header {
text-align: center;
padding: 55px 20px 35px;
position: relative;
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--accent-rgb, 201,168,76), 0.07) 0%, transparent 70%);
pointer-events: none;
}
/* --- Emblem / Klassen-Icon --- */
.emblem {
font-size: 52px;
line-height: 1;
margin-bottom: 12px;
filter: drop-shadow(0 0 20px rgba(var(--accent-rgb, 201,168,76), 0.6));
animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% { filter: drop-shadow(0 0 18px rgba(var(--accent-rgb, 201,168,76), 0.4)); }
50% { filter: drop-shadow(0 0 34px rgba(var(--accent-rgb, 201,168,76), 0.9)); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* --- H1 --- */
h1 {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(1.4rem, 3.5vw, 2.4rem);
color: var(--accent2);
letter-spacing: 0.07em;
text-shadow: 0 0 28px rgba(var(--accent-rgb, 201,168,76), 0.5), 0 2px 4px #000;
line-height: 1.2;
margin-bottom: 6px;
text-wrap: balance;
}
h2 { font-family: 'Cinzel', serif; font-size: 1.25rem; color: var(--gold-light); font-weight: 700; line-height: 1.3; }
h3 { font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--gold); font-weight: 600; line-height: 1.3; }
h4 { font-family: 'Cinzel', serif; font-size: var(--font-md); color: var(--gold-dim); font-weight: 600; }
h5, h6 { font-size: var(--font-base); color: var(--text); font-weight: 600; }
.subtitle {
font-size: 0.95rem;
color: var(--text-muted);
font-style: italic;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* --- Divider --- */
.divider {
display: flex;
align-items: center;
gap: 14px;
max-width: 660px;
margin: 26px auto;
padding: 0 20px;
}
.divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-dim), transparent); }
.divider-gem { color: var(--accent); font-size: 13px; }
/* --- Container --- */
.container {
max-width: 920px;
margin: 0 auto;
padding: 0 18px 70px;
}
/* --- Section Title --- */
.section-title {
font-family: 'Cinzel Decorative', serif;
font-size: 0.95rem;
color: var(--gold);
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 44px 0 16px;
display: flex;
align-items: center;
gap: 12px;
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--gold-dim), transparent);
}
/* --- Card --- */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
padding: 20px 24px;
margin-bottom: 14px;
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
}
.card-title {
font-family: 'Cinzel Decorative', serif;
font-size: 0.8rem;
color: var(--accent2);
letter-spacing: 0.1em;
margin-bottom: 12px;
}
/* --- Alert / Hinweis --- */
.alert {
border-left: 3px solid var(--accent);
background: rgba(var(--accent-rgb, 201,168,76), 0.06);
padding: 12px 16px;
border-radius: 0 4px 4px 0;
margin: 14px 0;
font-size: 0.93rem;
}
.alert.warn { border-left-color: #e0b030; background: rgba(200,160,40,0.07); }
.alert.danger { border-left-color: var(--red); background: rgba(220,80,80,0.07); }
.alert.good { border-left-color: var(--green); background: rgba(88,214,141,0.07); }
.alert strong { color: var(--accent2); }
.alert.warn strong { color: #e8c060; }
.alert.danger strong { color: var(--red); }
.alert.good strong { color: var(--green); }
/* --- Tabellen --- */
.stat-table-wrap { overflow-x: auto; margin: 14px 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.91rem; }
th {
background: rgba(var(--accent-rgb, 201,168,76), 0.1);
color: var(--accent2);
font-family: 'Cinzel Decorative', serif;
font-size: 0.68rem;
letter-spacing: 0.1em;
padding: 9px 13px;
text-align: center;
border-bottom: 1px solid var(--accent-dim);
white-space: nowrap;
}
td {
padding: 8px 13px;
text-align: center;
border-bottom: 1px solid rgba(var(--border-rgb, 42,42,42), 0.8);
color: var(--text);
}
tr:hover td { background: rgba(var(--accent-rgb, 201,168,76), 0.04); }
td.label { text-align: left; color: var(--accent2); font-weight: 600; white-space: nowrap; }
td.dex-c { color: var(--dex-c); }
td.str-c { color: var(--str-c); }
td.vit-c { color: var(--vit-c); }
td.mag-c { color: var(--mag-c); }
td.hp-c { color: var(--hp-c); font-weight: 600; }
td.note { font-style: italic; color: var(--text-muted); font-size: 0.83rem; }
tr.hl td { background: rgba(var(--accent-rgb, 201,168,76), 0.05); color: var(--accent2); }
/* --- Tags --- */
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.73rem;
font-family: 'Cinzel Decorative', serif;
font-weight: 700;
}
/* --- Build Grid --- */
.build-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; }
.build-box {
background: var(--bg-card2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 16px;
text-align: center;
position: relative;
}
.build-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
border-radius: 4px 4px 0 0;
}
.build-label {
font-size: 0.75rem;
color: var(--text-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 6px;
}
.build-name { font-family: 'Cinzel Decorative', serif; font-size: 0.82rem; margin-bottom: 10px; }
.build-formula {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(0.78rem, 1.7vw, 0.95rem);
letter-spacing: 0.05em;
margin: 8px 0;
line-height: 1.8;
}
.f-dex { color: var(--dex-c); }
.f-str { color: var(--str-c); }
.f-vit { color: var(--vit-c); }
.f-mag { color: var(--mag-c); }
.f-dim { color: var(--text-muted); margin: 0 4px; }
/* --- Pro/Con Liste --- */
.pro-con { list-style: none; font-size: 0.88rem; }
.pro-con li { padding: 3px 0 3px 20px; position: relative; }
.pro-con li::before { position: absolute; left: 0; }
.pro-con .pro::before { content: '✦'; color: var(--green); }
.pro-con .con::before { content: '✧'; color: var(--red); }
/* --- Tips Grid --- */
.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 14px 0; }
.tip-card {
background: var(--bg-card2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 14px 16px;
font-size: 0.89rem;
}
.tip-num {
font-family: 'Cinzel Decorative', serif;
font-size: 1.3rem;
color: var(--accent-dim);
float: left;
margin-right: 8px;
line-height: 1;
}
/* --- Gem Grid --- */
.gem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin: 14px 0; }
.gem-box {
background: var(--bg-card2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 16px;
position: relative;
}
.gem-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 4px 4px 0 0; }
.gem-box.budget::before { background: linear-gradient(90deg, #a0a040, #c8c840); }
.gem-box.whale::before { background: linear-gradient(90deg, var(--accent), var(--accent-dim)); }
.gem-title { font-family: 'Cinzel Decorative', serif; font-size: 0.82rem; margin-bottom: 12px; }
.gem-box.budget .gem-title { color: #c8c840; }
.gem-box.whale .gem-title { color: var(--accent2); }
/* --- Legend Grid --- */
.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 24px; }
.legend-grid div span { color: var(--accent2); font-weight: 600; }
/* --- Focus-visible --- */
.back-btn:focus-visible,
.back-home:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
.lang-btn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.toc-link:focus-visible {
outline: 2px solid var(--gold-dim);
outline-offset: 2px;
border-radius: 2px;
}
/* --- Legend button resets --- */
button.legend-tab {
appearance: none;
font: inherit;
}
button.legend-close {
appearance: none;
background: none;
border: none;
padding: 0;
line-height: 1;
font-size: 18px;
font-family: sans-serif;
}
button.legend-close:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
button.legend-tab:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* --- Responsive --- */
@media (max-width: 600px) {
.page-header { padding: 36px 14px 24px; }
.container { padding: 0 12px 50px; }
th, td { padding: 7px 9px; }
}
/* ── NAV: BACK-BTN + LANG-SWITCHER + EV-BTN ─────────────── */
.back-nav {
position: fixed; top: 10px; left: 16px; z-index: 9999;
display: flex; align-items: center; gap: 7px; height: 30px;
}
.top-nav-right {
position: fixed; top: 10px; right: 16px; z-index: 9999;
display: flex; align-items: stretch; gap: 8px;
}
.back-home {
text-decoration: none;
opacity: 0.72; transition: opacity 0.2s;
display: inline-flex; align-items: center;
line-height: 1;
touch-action: manipulation;
}
.back-home:hover { opacity: 1; }
.back-home svg { display: block; position: relative; top: -2px; }
.back-dot {
color: var(--gold);
font-size: 9px;
line-height: 1;
opacity: 0.6;
user-select: none;
display: flex; align-items: center;
position: relative; top: -1px;
}
.back-btn {
color: var(--gold);
text-decoration: none;
font-family: 'Cinzel Decorative', serif;
font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em;
opacity: 0.75; transition: opacity 0.2s;
display: flex; align-items: center;
touch-action: manipulation;
}
.back-btn:hover { opacity: 1; }
.lang-switcher {
display: flex; align-items: center;
background: rgba(12,20,24,0.92);
border: 1px solid rgba(201,168,76,0.2);
border-radius: 6px; padding: 4px 6px; gap: 2px;
backdrop-filter: blur(8px);
}
.lang-btn {
background: none;
border: 1px solid rgba(201,168,76,0.35);
cursor: pointer;
color: var(--text-muted);
font-family: 'Cinzel Decorative', serif;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
padding: 3px 10px; border-radius: 3px;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
touch-action: manipulation;
}
.lang-btn.active { background: rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.7); color: var(--gold); }
.lang-btn:hover:not(.active) { color: #d0cfc0; background: rgba(255,255,255,0.04); }
.lang-divider { width: 4px; }
body.lang-transitioning [data-i18n] { opacity: 0; transition: opacity 0.12s ease; }
body:not(.lang-transitioning) [data-i18n] { opacity: 1; transition: opacity 0.18s ease; }
/* ── MOBILE: Back-Nav + Top-Nav-Right nicht sticky ──────── */
@media (max-width: 1024px) {
.back-nav {
position: relative;
top: auto; left: auto;
padding-right: 148px;
}
.top-nav-right {
position: absolute;
top: 8px; right: 14px;
}
}
/* ── LEGENDE OVERLAY ──────────────────────────────────────── */
.legend-tab {
position: fixed; top: -9999px; left: calc(50% + 468px); z-index: 9000;
writing-mode: vertical-rl; padding: 14px 7px;
background: rgba(201,168,76,0.07); border: 1px solid rgba(201,168,76,0.2);
border-radius: 4px;
font-family: 'Cinzel Decorative', serif; font-size: 11px;
letter-spacing: 0.18em; color: var(--gold-dim);
cursor: pointer; transition: background 0.2s, color 0.2s; user-select: none;
}
.legend-tab:hover { background: rgba(201,168,76,0.15); color: var(--gold); border-color: rgba(201,168,76,0.4); }
.legend-overlay {
display: none; position: fixed; inset: 0; z-index: 9001;
background: rgba(0,0,0,0.65); cursor: pointer;
}
.legend-panel {
display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
z-index: 9002; background: var(--bg-card2);
border: 1px solid var(--border); border-radius: 6px; padding: 30px 36px;
box-shadow: 0 16px 60px rgba(0,0,0,0.85); width: min(820px,90vw); max-height: 80vh; overflow-y: auto;
}
.legend-panel-title {
font-family: 'Cinzel Decorative', serif; font-size: 13px; color: var(--gold);
letter-spacing: 0.12em; margin-bottom: 20px; padding-bottom: 12px;
border-bottom: 1px solid rgba(201,168,76,0.2);
display: flex; justify-content: space-between; align-items: center;
}
.legend-close { cursor: pointer; font-size: 13px; font-family: sans-serif; writing-mode: horizontal-tb; color: var(--gold-dim); background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.3); border-radius: 4px; padding: 3px 9px; line-height: 1.4; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.legend-close:hover { background: rgba(201,168,76,0.2); color: var(--gold); border-color: rgba(201,168,76,0.55); }
.legend-panel .legend-grid { grid-template-columns: repeat(2,1fr); gap: 8px 32px; font-size: 0.88rem; }
.legend-panel .legend-grid div { padding: 5px 0; border-bottom: 1px solid rgba(201,168,76,0.06); line-height: 1.5; display: flex; gap: 8px; }
.legend-panel .legend-grid div span:first-child { min-width: 110px; font-weight: 600; font-family: 'Cinzel Decorative', serif; font-size: 0.78rem; flex-shrink: 0; }
.legend-overlay.open { display: block; }
.legend-panel.open { display: block; }
@media (max-width: 979px) { .legend-tab { display: none !important; } }
/* ── INHALTSVERZEICHNIS ───────────────────────────────────── */
.toc-box { background:var(--bg-card); border:1px solid var(--border); border-radius:4px; padding:18px 22px; margin:0 auto 28px; max-width:700px; }
.toc-title { font-family:'Cinzel Decorative',serif; font-size:0.78rem; letter-spacing:.1em; color:var(--gold); margin-bottom:12px; }
.toc-list { list-style:none; padding:0; margin:0; columns:2; gap:16px; }
.toc-list li { margin-bottom:5px; break-inside:avoid; }
.toc-link { color:var(--text-muted); font-size:0.88rem; text-decoration:none; transition:color .2s; }
.toc-link:hover { color:var(--gold); }
@media (max-width:600px) { .toc-list { columns:1; } }
/* ── PAGE TOC (Guide-Seiten) ─────────────────────────────── */
.page-toc { background:var(--bg-card2); border:1px solid var(--border); border-radius:6px; padding:14px 18px; margin-bottom:32px; font-size:var(--font-sm); }
.page-toc-title { font-family:'Cinzel',serif; font-size:var(--font-xs); letter-spacing:0.12em; color:var(--gold-dim); text-transform:uppercase; margin-bottom:10px; }
.page-toc ol { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.page-toc li a { color:var(--text-muted); text-decoration:none; border-bottom:1px dashed rgba(201,168,76,0.25); }
.page-toc li a:hover { color:var(--gold); border-bottom-color:rgba(201,168,76,0.5); }
.page-toc .toc-badge { font-size:var(--font-xs); margin-left:6px; padding:1px 6px; border-radius:3px; vertical-align:middle; }
.toc-badge.culti { background:rgba(152,112,200,.12); border:1px solid rgba(152,112,200,.3); color:#b090e0; }
.toc-badge.weekly { background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.25); color:var(--gold-dim); }
/* ── KLASSEN-FARBEN ───────────────────────────────────────── */
.page-archer { --accent:#c8a840; --accent2:#f0d060; --accent-dim:#7a6010; --accent-rgb:200,168,64; --border-rgb:42,42,42; --bow:#c8a840; --bow2:#f0d060; --water:#50b8e8; }
.page-assassin { --accent:#60d8f0; --accent2:#90eeff; --accent-dim:#204050; --accent-rgb:96,216,240; --border-rgb:42,42,42; --blade:#60d8f0; --blade2:#90eeff; --shadow:#304060; --poison:#80d040; }
.page-barbarian { --accent:#c87030; --accent2:#f0a050; --accent-dim:#704010; --accent-rgb:200,112,48; --border-rgb:42,42,42; --bear:#c87030; --bear2:#f0a050; --tiger:#e0c020; --tiger2:#f8e050; }
.page-bard { --accent:#c070e0; --accent2:#f0a0ff; --accent-dim:#602080; --accent-rgb:192,112,224; --border-rgb:42,42,42; --melody:#c070e0; --melody2:#f0a0ff; --crit:#e0b030; --crit2:#ffe060; --tide:#4090d0; --tide2:#70c0ff; }
.page-blademaster { --accent:#e05050; --accent2:#ff8070; --accent-dim:#701010; --accent-rgb:224,80,80; --border-rgb:42,42,42; --axe-c:#e05050; --axe2:#ff8070; --pole-c:#60c0e0; --pole2:#90e0f8; --sword-c:#c0d060; --sword2:#e0f080; --fist-c:#c060e0; --fist2:#e090ff; }
.page-cleric { --accent:#5fd4a0; --accent2:#90ffe0; --accent-dim:#1a6040; --accent-rgb:95,212,160; --border-rgb:42,42,42; --heal:#5fd4a0; --heal-dim:#1a6040; }
.page-duskblade { --accent:#c040a0; --accent2:#f060c0; --accent-dim:#601050; --accent-rgb:192,64,160; --border-rgb:42,42,42; --reaper:#c040a0; --reaper2:#f060c0; --moon:#6090e0; --moon2:#90c0ff; }
.page-edgerunner { --accent:#e0c060; --accent2:#ffe080; --accent-dim:#806010; --accent-rgb:224,192,96; --border-rgb:42,42,42; --phys:#e0c060; --phys2:#ffe080; --elem:#6090e0; --elem2:#90c0ff; --shield:#c0a030; --shield2:#ffe060; }
.page-mystic { --accent:#60d060; --accent2:#90e890; --accent-dim:#206020; --accent-rgb:96,208,96; --border-rgb:42,42,42; --nature:#60d060; --nature2:#90e890; --wood:#a0c840; --wood2:#c8e860; --heal:#50e8c0; --heal2:#80ffdc; --summon:#c0a840; --summon2:#e8cc60; --plant:#48d080; }
.page-psychic { --accent:#50c8f0; --accent2:#80e0ff; --accent-dim:#104060; --accent-rgb:80,200,240; --border-rgb:42,42,42; --water:#50c8f0; --water2:#80e0ff; --earth:#a0c060; --earth2:#c8e880; --soul:#c060e0; --soul2:#e090ff; }
.page-seeker { --accent:#c0d8e0; --accent2:#e0f0f8; --accent-dim:#406070; --accent-rgb:192,216,224; --border-rgb:42,42,42; --silver:#c0d8e0; --silver2:#e0f0f8; --metal:#80a8c0; --stance-nsw:#60d0a0; --stance-pd:#e0b040; --stance-sm:#e06080; }
.page-stormbringer { --accent:#e0c030; --accent2:#ffe060; --accent-dim:#806010; --accent-rgb:224,192,48; --border-rgb:42,42,42; --thunder:#e0c030; --thunder2:#ffe060; --ice:#60d0f0; --ice2:#a0f0ff; --reaper:#a060e0; --reaper2:#d090ff; }
.page-technician { --accent:#ff6030; --accent2:#ffb060; --accent-dim:#802010; --accent-rgb:255,96,48; --border-rgb:42,42,42; --fire:#ff6030; --fire2:#ffb060; --tech:#d0a030; --tech2:#ffe080; }
.page-venomancer { --accent:#e07830; --accent2:#f8a860; --accent-dim:#703010; --accent-rgb:224,120,48; --border-rgb:42,42,42; --fox:#e07830; --fox2:#f8a860; --poison:#a0d040; --poison2:#c8f060; --purple:#b060e0; --water:#50b8e8; }
.page-wildwalker { --accent:#c87030; --accent2:#f09050; --accent-dim:#603010; --accent-rgb:200,112,48; --border-rgb:42,42,42; --ape-c:#c87030; --ape2:#f09050; --human2:#88e060; --yin2:#c090ff; --yang2:#ffd060; }
.page-wizard { --accent:#f07030; --accent2:#f8a060; --accent-dim:#802010; --accent-rgb:240,112,48; --border-rgb:42,42,42; --fire:#f07030; --fire2:#f8a060; --water:#50b8e8; --earth:#90c850; }
/* Special pages */
.page-constellation { --cyan:#70d8f0; }
.page-crazy-stone { --cyan:#40c8e0; --silver:#c0d8e0; }
.page-dq { --silver:#c0d8e0; --silver2:#e0f0f8; --metal:#80a8c0; --dq20:#58d68d; --dq31:#40b0e0; --dq41:#c9a84c; --dq51:#e08040; --dq61:#d060c0; --dq71:#a060e8; --dq81:#e05050; --dq91:#f0d080; }
.page-faction-base { --faction-color:#d4a830; --faction-dim:#7a5c10; --blue:#70a8e0; --purple:#b870e0; }
.page-farming { --cyan:#4ec9d0; }
.page-gear { --cyan:#58a8c8; --cyan-dim:rgba(88,168,200,0.15); --purple:#9870c8; --purple-dim:rgba(152,112,200,0.15); }
.page-titles { --cyan:#70d8f0; --title-color:#d4c060; --title-dim:#8a7030; }
.page-treasure { --cyan:#4ec9d0; }
.page-trivia { --cyan:#58a8c8; }
.page-videos { --cyan:#4ec9d0; }
.page-barbtank { --class-color:#b870e0; --cyan:#58a8c8; --orange:#c87840; }
.page-clericg { --class-color:#4ec9d0; --class-color2:#2a8a8f; --cyan:#4ec9d0; --orange:#c87840; --purple:#9870c8; }
.page-roadmap { --cyan:#4ec9d0; --teal:#2a8a8f; --purple:#8060c0; --p1:#4ec9d0; --p2:#6ab880; --p3:#c9a84c; --p4:#a070d0; --p5:#c04050; --p6:#e0a030; }
/* ── COLLAPSIBLE FAQ ITEMS (globales Pattern — wiederverwendbar) ── */
.faq-item { border:1px solid rgba(184,160,112,0.1); border-radius:6px; overflow:hidden; transition:border-color .15s; margin-bottom:0; }
.faq-item:hover { border-color:rgba(184,160,112,0.22); }
.faq-item.open { border-color:rgba(184,160,112,0.28); }
.faq-q { display:flex; align-items:center; gap:10px; padding:9px 13px; cursor:pointer; user-select:none; }
.faq-q:hover { background:rgba(255,255,255,0.025); }
.faq-num { font-family:'Cinzel',serif; font-size:9px; letter-spacing:.1em; padding:2px 7px; border-radius:3px; white-space:nowrap; flex-shrink:0; background:rgba(201,168,76,0.1); color:var(--gold-dim); border:1px solid rgba(201,168,76,0.2); }
.faq-q-text { flex:1; font-size:var(--font-base); color:var(--text); }
.faq-toggle { color:var(--gold-dim); font-size:16px; flex-shrink:0; transition:transform .2s; }
.faq-item.open .faq-toggle { transform:rotate(45deg); }
.faq-a { display:none; padding:8px 13px 10px; background:rgba(184,160,112,0.04); border-top:1px solid rgba(184,160,112,0.1); }
.faq-item.open .faq-a { display:block; }
details[open] .faq-a { display:block; }
.faq-a-label { font-family:'Cinzel',serif; font-size:9px; letter-spacing:.1em; color:var(--gold-dim); margin-bottom:3px; }
.faq-a-val { color:var(--gold-light); font-weight:600; font-size:0.9rem; }
/* ── COLLAPSIBLE SECTION TOGGLE (globales Pattern — Faction Base / Exam Room Stil) ── */
.exam-level-toggle {
width:100%; text-align:left; background:rgba(201,168,76,0.08);
border:1px solid rgba(201,168,76,0.2); border-radius:6px;
padding:10px 16px; cursor:pointer; margin-bottom:4px;
font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:0.1em;
color:var(--gold); display:flex; justify-content:space-between; align-items:center;
box-sizing:border-box; -webkit-appearance:none; appearance:none;
}
.exam-level-toggle:hover { background:rgba(201,168,76,0.14); }
.exam-level-toggle .arrow { transition:transform 0.2s; font-size:var(--font-xs); }
.exam-level-toggle.open .arrow { transform:rotate(180deg); }
.exam-qa-list { display:none; margin:0 0 12px; padding:6px 8px; border:1px solid rgba(201,168,76,0.1); border-radius:0 0 6px 6px; }
.exam-qa-list.open { display:block; }
.exam-section { margin:0 0 14px; }
.exam-qa-list + .exam-level-toggle { margin-top:14px; }
/* Global: Tabellen linksbündig, Box-Text justify */
table td, table th { text-align: left; }
td.num { font-variant-numeric: tabular-nums; }
.tip-box, .warn-box, .evolved-box, .prose { text-align: justify; }
/* ── FAQ: button-Reset (faq-q als