/* ============================================================
   D4 Builds — Main Stylesheet (Diablo 4 Dark Theme)
   ============================================================ */

/* --- Self-hosted Fonts (GDPR-compliant, no external requests) --- */

/* Old Fenris — Diablo heading font */
@font-face {
    font-family: 'OldFenris';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/old-fenris.woff') format('woff');
}

/* Roboto — used for class names in build editor/view */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Alegreya Sans — body font */
@font-face {
    font-family: 'Alegreya Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/alegreya-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Alegreya Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/alegreya-sans-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Alegreya Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/alegreya-sans-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Alegreya Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/alegreya-sans-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- CSS Custom Properties (Theme) --- */
:root {
    /* Seite ist nativ dunkel → Browser-Auto-/Force-Dark (Opera GX "Dark mode for web pages",
       Chrome Auto-Dark) soll NICHT zusaetzlich invertieren (sonst werden Icons weiss). */
    color-scheme: dark;

    /* Backgrounds */
    --bg-primary: #15161a;
    --bg-secondary: #1a1b20;
    --bg-panel: #1A1B1F;
    --bg-panel-hover: #22232a;
    --bg-input: #1F2025;
    --bg-overlay: rgba(0, 0, 0, 0.85);

    /* Lesefläche für Langtext (News-/Guide-Artikel) — minimal über --bg-panel,
       damit der Fließtext eine eigene Fläche bekommt, ohne dass Artikel und
       Sidebar-Karten wie zwei verschiedene Ebenen wirken. */
    --bg-reading: #1b1c21;
    /* Gold-Haarlinie der Kartenhülle — Artikel-Panel und Seitenleisten-Karten
       teilen sich diese Kante, damit beide Spalten dasselbe Material sind. */
    --border-reading: rgba(196, 162, 78, 0.18);

    /* Accent colors */
    --gold: #a50905;
    --gold-bright: #d40b06;
    --gold-dark: #7a0704;
    --gold-dim: #4e0503;
    --red: #a50905;
    --red-bright: #d40b06;
    --red-dark: #7a0704;
    --red-glow: rgba(165, 9, 5, 0.35);
    --legendary-purple: var(--rarity-legendary, #d98c3c);
    --unique-gold: var(--rarity-unique, #d1a781);
    --mythic-red: var(--rarity-mythic, #c0a1d8);
    --rare-yellow: var(--rarity-rare, #f1f25c);
    --magic-blue: var(--rarity-magic, #6d6ed9);
    --set-green: var(--rarity-set, #00ff7f);

    /* Text */
    --text-primary: #e0ddd5;
    --text-secondary: #a09d94;
    --text-dimmed: #7a7870;
    --text-dark: #4a4840;
    /* Fließtext auf der Lesefläche: bewusst eine Spur unter --text-primary.
       Auf dunklem Grund franst nahezu weißer Text bei langen Strecken aus
       (Halation); 11.7:1 liegt weiterhin klar über dem AAA-Minimum von 7:1. */
    --text-reading: #d9d6ce;
    --text-reading-strong: #efece4;

    /* Borders */
    --border-color: #2a2a35;
    --border-panel: #252830;
    --border-gold: rgba(196, 162, 78, 0.25);
    --border-hover: #3a3a45;

    /* Functional */
    --success: #4ade80;
    --error: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* Fonts */
    --font-heading: 'OldFenris', 'Times New Roman', serif;
    --font-body: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Sizes */
    --header-height: 64px;
    --max-width: 1280px;
    --border-radius: 4px;
    --border-radius-lg: 8px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Editor-specific (ported from old project) */
    --editor-bg: #1a1a2e;
    --editor-surface: #16213e;
    --editor-surface-hover: #1f2b47;
    --editor-border: #2a3f5f;
    --editor-primary: #a50905;
    --editor-primary-hover: #d40b06;

    /* Rarity Colors — set by ThemeColors (admin), fallbacks only */
    /* --rarity-* variables are injected by ThemeColors::cssVars() in <head> */

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Z-Index Layers */
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-modal-backdrop: 1000;
    --z-modal: 1010;
    --z-toast: 2000;
    --z-tooltip: 99999;

    /* Responsive */
    --content-padding: 2rem;
    --modal-height: 650px;
    --tap-target: 44px;
}

/* Responsive Custom Property overrides */
@media (max-width: 768px) {
    :root {
        --content-padding: 0.75rem;
        --modal-height: 85vh;
    }
}
@media (max-width: 480px) {
    :root {
        --content-padding: 0.5rem;
    }
}

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    /* CLS: reserve the scrollbar gutter so overlay ads (vignette/anchor) toggling
       the scrollbar don't reflow .main-content width. Overlay scrollbars (mobile)
       are unaffected. */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Subtle noise texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(196, 169, 98, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--gold-bright);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* --- Header / Navigation --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(21, 22, 26, 0.98) 0%, rgba(21, 22, 26, 0.95) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
}

.header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header__logo:hover {
    color: var(--text-primary);
}

.header__logo-d4 {
    color: #c83030;
}

.header__logo-icon {
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: -6px;
}

.header__beta-badge {
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: -2px;
    align-self: center;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
    /* Innenabstand der Nav-Links als Variable: die festen Slot-Breiten weiter
       unten rechnen damit, darum darf er nur hier veraendert werden. */
    --nav-pad: 0.8rem;
}

.header__nav a {
    padding: 0.5rem var(--nav-pad);
    /* Helles Warmweiss statt --text-secondary (#7a7870, ~4.3:1 — zu blass fuer die
       Hauptnavigation, Wunsch 11.09.2026). Hover/aktiv bleiben rot, S14 gruen. */
    color: #d6d2c9;
    font-size: 1rem; /* 16px — glatter Wert, so gross wie der Fliesstext (Wunsch 11.09.2026: groesser) */
    font-weight: 500;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.header__nav a:hover,
.header__nav a.active {
    color: var(--red-bright);
    background: rgba(165, 9, 5, 0.1);
}

/* --- Feste Slot-Breiten der Hauptnavigation -------------------------------
   EN- und DE-Labels sind unterschiedlich breit ("Loot Table" vs.
   "Loot-Tabelle", "Database" vs. "Datenbank"). Ohne feste Breiten wandert
   beim Sprachwechsel die komplette Leiste nach links/rechts. Jeder Punkt
   bekommt darum einen Slot in Breite des laengeren der beiden Labels und
   zentriert seinen Text darin — Positionen bleiben so sprachunabhaengig.
   --nav-slot ist die reine Textbreite (0.9rem/500, inkl. Caret) plus kleiner
   Reserve; der Innenabstand kommt ueber --nav-pad dazu und schrumpft damit
   automatisch im kompakten Header unter 1281px mit.
   ANPASSEN, wenn ein Label umbenannt wird: neue Breite in beiden Sprachen
   messen (getBoundingClientRect) und den groesseren Wert eintragen. */
.header__nav > a,
.header__nav-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
    min-width: calc(var(--nav-slot, 0px) + 2 * var(--nav-pad));
}

.header__nav [data-nav="home"]     { --nav-slot: 49px; }
.header__nav [data-nav="builds"]   { --nav-slot: 49px; }
.header__nav [data-nav="database"] { --nav-slot: 64px; }
.header__nav [data-nav="guides"]   { --nav-slot: 41px; }
.header__nav [data-nav="loot"]     { --nav-slot: 70px; }
.header__nav [data-nav="bosses"]   { --nav-slot: 39px; }
.header__nav [data-nav="season"]   { --nav-slot: 34px; } /* "S14"/"S15" + Caret (vorher "Saison 14": 77px) */
.header__nav [data-nav="ptr"]      { --nav-slot: 27px; }

/* Desktop: die Leiste steht mittig zwischen Logo und Such-Button (Wunsch
   11.09.2026) — .header__nav fuellt per flex:1 den Raum dazwischen und zentriert
   ihre Punkte (justify-content: center oben). Frueher startete sie mit festem
   Abstand hinter dem Logo, damit sie beim Sprach-/Login-Wechsel nicht wandert;
   der gleiche Abstand links und rechts ist jetzt wichtiger. */

.header__nav-item--disabled {
    padding: 0.5rem 0.8rem;
    color: var(--text-dimmed);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: default;
    position: relative;
    user-select: none;
}

.header__soon-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: #000;
    color: var(--red-bright);
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1;
    position: absolute;
    top: 2px;
    right: -4px;
}

.header__new-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: #dc2626;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1;
    position: absolute;
    top: 2px;
    right: -4px;
}

/* Menu wrapper — flex row on desktop, column dropdown on mobile */
.header__menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}
.header__profile-link {
    position: relative;
}
.header__notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    font-size: 0.65rem; font-weight: 700; line-height: 1;
    color: #fff; background: #ef4444;
    border-radius: 8px; margin-left: 4px;
    transition: transform 0.2s;
}
.header__notif-badge--pulse {
    animation: notif-pulse 0.6s ease-in-out 3;
}
@keyframes notif-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}

/* Hamburger — hidden on desktop */
.header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.header__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.25s;
}
/* Animated X when open */
.header--mobile-open .header__hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header--mobile-open .header__hamburger span:nth-child(2) {
    opacity: 0;
}
.header--mobile-open .header__hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Language Toggle */
.header__lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}
.lang-toggle__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 0.1rem;
    border-radius: 4px;
    line-height: 0;
    opacity: 0.4;
    filter: grayscale(0.55);
    transition: opacity 0.15s, filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
.lang-toggle__link:hover {
    opacity: 0.9;
    filter: grayscale(0);
    transform: translateY(-1px);
}
.lang-toggle__link--active {
    opacity: 1;
    filter: grayscale(0);
    box-shadow: 0 0 0 2px var(--gold, #c4a24e);
}
.lang-toggle__flag {
    width: 22px;
    height: 15px;
    display: block;
    border-radius: 2px;
}
/* Code bleibt fuer Screenreader/SEO, visuell nur Flaggen (Wunsch: keine Text-Labels). */
.lang-toggle__code {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile lang toggle: hidden on desktop, shown on mobile next to hamburger */
.header__lang-toggle--mobile {
    display: none;
}

/* Support-Link (Herz) — links neben dem Sprach-Switcher */
.header__support-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--red-bright, #d40b06);
    opacity: 0.8;
    line-height: 0;
    transition: opacity 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.header__support-link:hover {
    opacity: 1;
    border-color: var(--red-glow, rgba(165, 9, 5, 0.35));
    background: rgba(165, 9, 5, 0.1);
    transform: translateY(-1px);
}
.header__support-link--mobile {
    display: none;
}
/* Desktop-Variante als Text-CTA (statt Icon) */
.header__support-link--desktop {
    line-height: 1;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold, #c4a24e);
}
.header__support-link--desktop:hover {
    border-color: var(--gold, #c4a24e);
    background: rgba(196, 162, 78, 0.1);
    color: var(--gold, #c4a24e);
}

/* Such-Button im Header (Desktop: Lupe + Label + Kuerzel; mobil: nur Lupe) */
.header__search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.45rem 0.35rem 0.6rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary, #7a7870);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.header__search-btn:hover,
.header__search-btn:focus-visible {
    color: var(--text-primary, #e0ddd5);
    border-color: var(--red-glow, rgba(165, 9, 5, 0.35));
    background: rgba(165, 9, 5, 0.08);
}
.header__search-btn__kbd {
    white-space: nowrap; /* "Strg K" brach sonst auf zwei Zeilen um */
    font: 600 0.68rem/1 ui-monospace, Consolas, monospace;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 3px;
    color: var(--text-secondary, #7a7870);
}
.header__search-btn--mobile {
    display: none;
}
@media (max-width: 1280px) {
    .header__search-btn__label { display: none; }
}
/* Knapp ueber dem Hamburger-Cutoff (1081–1180px) reicht der Platz mit Home-Punkt
   nicht fuer das Kuerzel — dort nur die Lupe, sonst 30px Querscrollen. */
@media (max-width: 1180px) {
    .header__search-btn__kbd { display: none; }
    .header__search-btn { padding: 0.35rem 0.45rem; }
    /* 7 Punkte inkl. Loot-Tabelle: Innenabstand hier noch einmal enger,
       die Slot-Breiten rechnen ueber --nav-pad automatisch mit. */
    .header__nav { --nav-pad: 0.45rem; }
}
/* 1121–1150px: die letzten Pixel bis zum Hamburger-Cutoff (DE lief 4px ueber) */
@media (max-width: 1150px) {
    .header__nav { --nav-pad: 0.38rem; }
}
/* Such-Dialog (#site-search) */
.site-search {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10vh 1rem 1rem;
}
.site-search[hidden] { display: none; }
html.site-search-open { overflow: hidden; }
.site-search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 8, 0.75);
}
.site-search__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: 78vh;
    background: #0d0f14;
    border: 1px solid var(--border, #2a2a35);
    border-top: 2px solid var(--red-bright, #d40b06);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.site-search__field {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border, #2a2a35);
    color: var(--text-secondary, #7a7870);
}
.site-search__glass { flex: none; }
.site-search.is-loading .site-search__glass { animation: site-search-pulse 0.9s ease-in-out infinite; }
@keyframes site-search-pulse { 50% { opacity: 0.35; } }
.site-search__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    color: var(--text-primary, #e0ddd5);
    font: inherit;
    font-size: 1.05rem;
}
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* ✕ neben Esc: leert die Eingabe, Dialog bleibt offen (nur sichtbar mit Text) */
.site-search__clear {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 4px;
    background: none;
    color: var(--text-secondary, #7a7870);
    cursor: pointer;
}
.site-search__clear[hidden] { display: none; }
.site-search__clear:hover,
.site-search__clear:focus-visible {
    color: var(--text-primary, #e0ddd5);
    border-color: var(--red-glow, rgba(165, 9, 5, 0.35));
}
.site-search__close {
    flex: none;
    font: 600 0.7rem/1 ui-monospace, Consolas, monospace;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 4px;
    background: none;
    color: var(--text-secondary, #7a7870);
    cursor: pointer;
}
.site-search__close:hover,
.site-search__close:focus-visible { color: var(--text-primary, #e0ddd5); }
.site-search__results {
    overflow-y: auto;
    padding: 0.35rem;
}
.site-search__results:empty { display: none; }
.site-search__group {
    padding: 0.7rem 0.7rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary, #7a7870);
}
.site-search__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    color: var(--text-primary, #e0ddd5);
    text-decoration: none;
}
.site-search__item.is-active {
    background: rgba(165, 9, 5, 0.16);
}
.site-search__icon {
    flex: none;
    width: 28px;
    height: 28px;
    object-fit: contain;
}
/* Guides/News: Hero-Bild als kleines Vorschaubild (breites Motiv, darum cover) */
.site-search__icon--cover {
    width: 44px;
    object-fit: cover;
    border-radius: 4px;
}
/* Kategorie-Icon als Rueckfall: etwas zurueckgenommen, damit echte Icons vorgehen */
.site-search__icon--fallback {
    opacity: 0.7;
}
.site-search__icon--empty {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}
.site-search__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-search__meta {
    flex: none;
    max-width: 55%; /* Builds: Klasse · Typ · Tier · Season */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--text-secondary, #7a7870);
}
/* Build-Badges wie auf den Build-Karten (builds-list.css .build-card__label):
   gleiche Form und dieselben Farb-Tokens (Admin-Farben via ThemeColors) —
   hier global, weil builds-list.css nicht auf jeder Seite geladen ist. */
.site-search__badges {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
}
.site-search__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--border-radius, 4px);
}
.site-search__badge--endgame  { background: color-mix(in srgb, var(--buildtype-endgame, #a50905) 35%, transparent); border-color: color-mix(in srgb, var(--buildtype-endgame, #a50905) 50%, transparent); }
.site-search__badge--leveling { background: color-mix(in srgb, var(--buildtype-leveling, #4ade80) 30%, transparent); border-color: color-mix(in srgb, var(--buildtype-leveling, #4ade80) 45%, transparent); }
.site-search__badge--season   { background: color-mix(in srgb, var(--label-season, #4ade80) 25%, transparent); border-color: color-mix(in srgb, var(--label-season, #4ade80) 40%, transparent); }
.site-search__badge--eternal  { background: color-mix(in srgb, var(--label-eternal, #c4a24e) 30%, transparent); border-color: color-mix(in srgb, var(--label-eternal, #c4a24e) 50%, transparent); }
.site-search__badge--tier-s { background: color-mix(in srgb, var(--tier-s, #a50905) 45%, transparent); border-color: color-mix(in srgb, var(--tier-s, #a50905) 60%, transparent); }
.site-search__badge--tier-a { background: color-mix(in srgb, var(--tier-a, #4ade80) 30%, transparent); border-color: color-mix(in srgb, var(--tier-a, #4ade80) 45%, transparent); }
.site-search__badge--tier-b { background: color-mix(in srgb, var(--tier-b, #3b82f6) 30%, transparent); border-color: color-mix(in srgb, var(--tier-b, #3b82f6) 45%, transparent); }
.site-search__badge--tier-c { background: color-mix(in srgb, var(--tier-c, #f59e0b) 30%, transparent); border-color: color-mix(in srgb, var(--tier-c, #f59e0b) 45%, transparent); }
.site-search__badge--tier-d { background: color-mix(in srgb, var(--tier-d, #ef4444) 30%, transparent); border-color: color-mix(in srgb, var(--tier-d, #ef4444) 45%, transparent); }
@media (max-width: 600px) {
    /* Schmal: Klassenname weg, damit Name + Badges in eine Zeile passen */
    .site-search__item .site-search__meta + .site-search__badges { margin-left: 0; }
    .site-search__item:has(.site-search__badges) .site-search__meta { display: none; }
    .site-search__badge { padding: 0.12rem 0.35rem; font-size: 0.62rem; }
}
/* Build-Tooltip in der Suche — Optik wie .tier-tooltip (tierlist.css), aber
   global und ueber dem Such-Modal (z-index 1000). */
.site-search-tip {
    position: fixed;
    z-index: 1100;
    width: 280px;
    padding: 0.75rem;
    background: #111118;
    border: 1px solid var(--border-panel, #2a2a35);
    border-radius: var(--border-radius, 6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    color: var(--text-primary, #e0ddd5);
}
.site-search-tip--visible { opacity: 1; }
.site-search-tip__title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--gold);
}
.site-search-tip__meta {
    font-size: 0.75rem;
    color: var(--text-dimmed);
    margin-bottom: 0.375rem;
}
.site-search-tip__author {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}
.site-search-tip__skills {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}
.site-search-tip__skill {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--border-panel, #2a2a35);
}
.site-search-tip__stats {
    font-size: 0.7rem;
    color: var(--text-dimmed);
}
@media (prefers-reduced-motion: reduce) {
    .site-search-tip { transition: none; }
}
.site-search__msg {
    margin: 0;
    padding: 1.1rem 1rem;
    text-align: center;
    color: var(--text-secondary, #7a7870);
}
.site-search__corrected {
    margin: 0;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #7a7870);
    border-bottom: 1px solid var(--border, #2a2a35);
}
.site-search__corrected strong { color: var(--text-primary, #e0ddd5); }
.site-search__foot {
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--border, #2a2a35);
    font-size: 0.75rem;
    color: var(--text-secondary, #7a7870);
}
.site-search__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
@media (max-width: 768px) {
    .site-search { padding: 0; }
    .site-search__panel {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .site-search__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-search.is-loading .site-search__glass { animation: none; }
}

/* --- Game-Version Switcher (Dropdown: Season 14 / 13 / 12) --- */
.d4-version-switcher {
    position: relative;
    display: inline-flex;
    margin-left: 0.5rem;
}
.d4-version-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted, #7a7870);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border, #2a2a35);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.d4-version-switcher:hover .d4-version-switcher__toggle,
.d4-version-switcher:focus-within .d4-version-switcher__toggle {
    color: var(--gold, #c4a24e);
    border-color: rgba(196, 162, 78, 0.5);
}
.d4-version-switcher__caret {
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}
.d4-version-switcher:hover .d4-version-switcher__caret,
.d4-version-switcher:focus-within .d4-version-switcher__caret {
    transform: rotate(180deg);
}
.d4-version-switcher__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    margin-top: 2px;
    padding: 0.3rem;
    background: #0d0f14;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    z-index: 200;
}
.d4-version-switcher:hover .d4-version-switcher__menu,
.d4-version-switcher:focus-within .d4-version-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.d4-version-switcher__opt {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    color: var(--text-primary, #e0ddd5);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.d4-version-switcher__opt:hover:not(.d4-version-switcher__opt--disabled):not(.d4-version-switcher__opt--active) {
    color: var(--gold, #c4a24e);
    background: rgba(196, 162, 78, 0.08);
}
.d4-version-switcher__opt--active {
    color: #fff;
    background: var(--gold, #c4a24e);
    box-shadow: 0 0 6px rgba(196, 162, 78, 0.35);
}
.d4-version-switcher__opt--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Vorschau-Eintrag (kommende Season): Legendary-Lila statt Gold, damit er sich
   optisch klar von der laufenden Season und den Archiv-Eintraegen abhebt. */
.d4-version-switcher__opt--preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.d4-version-switcher__opt--preview:hover:not(.d4-version-switcher__opt--active) {
    color: #b794f6;
    background: rgba(139, 92, 246, 0.1);
}
.d4-version-switcher__tag {
    padding: 0.05rem 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #b794f6;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 3px;
}
.d4-version-switcher__opt--active .d4-version-switcher__tag {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
}

/* Breadcrumb-Variante: kein extra margin-left (links steht der Pfad). */
.d4-version-switcher--breadcrumb {
    margin-left: 0;
    flex: 0 0 auto;
}

/* "Spende" rechts in der Breadcrumb-Zeile (partials/crumb-donate.php, 11.09.2026) —
   Textlink wie "Bug melden" auf den Build-Seiten. .crumbs--donate macht jede
   Breadcrumb-Variante zur Flex-Zeile; der Link schiebt sich per margin-left:auto
   nach rechts. Steht rechts schon etwas (Versions-Umschalter, Bug-Link), sitzt er
   mit senkrechtem Trenner direkt dahinter. */
.crumbs--donate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}
.crumbs--donate > ol {
    flex: 1 1 auto;
    min-width: 0;
}
a.crumb-donate {
    flex: none;
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-dimmed, #7a7870);
    text-decoration: none;
    white-space: nowrap;
    pointer-events: auto;
}
@media (max-width: 640px) {
    a.crumb-donate { display: none; }
}
a.crumb-donate:hover,
a.crumb-donate:focus-visible {
    color: var(--gold-bright, var(--gold, #c4a24e));
    text-decoration: underline;
}
.d4-version-switcher--breadcrumb + a.crumb-donate,
.editor-tabs__bug-report + a.crumb-donate {
    margin-left: 0;
}
.d4-version-switcher--breadcrumb + a.crumb-donate::before,
.editor-tabs__bug-report + a.crumb-donate::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.85em;
    margin-right: 0.75rem;
    background: var(--border-hover, #3a3a45);
    vertical-align: -0.1em;
}
/* Build-Seiten: gleicher Abstand wie der Trenner zwischen Datum und Bug-Link */
.build-hero-crumbs__right .editor-tabs__bug-report + a.crumb-donate::before {
    margin-right: 1rem;
}
@media (max-width: 768px) {
    a.crumb-donate { font-size: 0.72rem; }
}

/* Breadcrumb-Zeile mit Switcher rechtsbuendig.
   Basis-Styles fuer .db-breadcrumbs liegen pro Bereich (database.css, guides-public.css);
   hier nur das Layout fuer die switcher-Variante, damit sie auch auf Seiten ohne
   bereichs-spezifische CSS greift (builds-list, loot-table, tierlist). */
/* Volle Inhaltsbreite fuer Seiten ohne 960/1200px-Spalte (Bosse, Boss-Detail,
   Loot-Tabelle). Steht hier, weil die Basis-Styles je nach Bereich aus
   database.css ODER guides-public.css kommen — main.css laedt ueberall. */
.db-breadcrumbs.db-breadcrumbs--wide {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.db-breadcrumbs--with-switcher {
    max-width: 1200px;
    margin: -0.5rem auto 0.75rem;
    padding: 0.25rem 1rem 0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.db-breadcrumbs--with-switcher ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}
.db-breadcrumbs--with-switcher li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted, #7a7870);
}
.db-breadcrumbs--with-switcher li:not(:last-child)::after {
    content: '\203A';
    margin-left: 0.25rem;
    color: var(--text-muted, #7a7870);
}
.db-breadcrumbs--with-switcher a {
    color: var(--text-dimmed, #7a7870);
    text-decoration: none;
}
.db-breadcrumbs--with-switcher a:hover {
    color: var(--gold, #c4a24e);
    text-decoration: underline;
}
.db-breadcrumbs--with-switcher li:last-child a {
    color: var(--text-primary, #e0ddd5);
    pointer-events: none;
}
.db-breadcrumbs--with-switcher .d4-version-switcher--breadcrumb {
    margin-left: auto;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    line-height: 1;
}

.btn--primary {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    color: #fff;
    border-color: var(--red);
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--red-bright) 0%, var(--red) 100%);
    color: #fff;
    box-shadow: 0 0 20px var(--red-glow);
    transform: translateY(-1px);
}

.btn--secondary {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn--secondary:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: var(--bg-panel);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn--ghost:hover {
    color: var(--red-bright);
    background: rgba(165, 9, 5, 0.1);
}

.btn--danger-ghost {
    color: var(--red-bright, #ef4444);
    border-color: transparent;
}

.btn--danger-ghost:hover {
    color: #fff;
    background: var(--red-bright, #ef4444);
}

.btn--sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn--icon {
    padding: 0.35rem;
    line-height: 0;
    background: transparent;
    border: 1px solid var(--border-primary, #2a2a35);
    border-radius: 4px;
    color: var(--text-dimmed, #7a7870);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.btn--icon:hover {
    color: #fff;
    border-color: #ff6b6b;
    background: #ff6b6b;
}

.btn--lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

/* --- Site Info Banner (Pre-Launch Hinweis direkt unter der Nav) --- */
.site-banner {
    position: relative;
    z-index: 1;
    width: 100%;
    background: linear-gradient(180deg, rgba(196, 162, 78, 0.18) 0%, rgba(196, 162, 78, 0.08) 100%);
    border-bottom: 1px solid rgba(196, 162, 78, 0.35);
    color: var(--text-primary, #e0ddd5);
}
.site-banner__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}
.site-banner__icon {
    color: var(--gold, #c4a24e);
    font-size: 1rem;
    flex-shrink: 0;
}
.site-banner__text {
    flex: 0 1 auto;
}
@media (max-width: 768px) {
    .site-banner__inner { padding: 0.5rem 1rem; font-size: 0.82rem; }
}

/* --- Event-Banner (BlizzCon 2026): Karte in Content-Breite unter der Navigation --- */
.evb {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 1.5rem 0;
}
.evb__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    padding: 0.7rem 1.5rem;
    border: 1px solid rgba(165, 9, 5, 0.5);
    border-radius: var(--border-radius, 4px);
    background-color: #0a0a0f;
    /* ?v= bei jeder Bildaenderung hochzaehlen: /assets/* liefert max-age=1 Jahr
       und die CSS-interne URL wird vom Deploy nicht mitgestempelt. */
    background-image: url('/assets/img/events/event-banner-blizzcon.webp?v=4');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
/* Season-Start-Termine tragen kein BlizzCon-Wasserzeichen. */
.evb__inner--season {
    background-image: url('/assets/img/events/event-banner-season15.webp?v=4');
}
.evb__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    min-width: 0;
}
.evb__clock {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    line-height: 1;
}
.evb__clock-label {
    color: var(--text-muted, #7a7870);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.evb__cell {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid rgba(212, 11, 6, 0.35);
    border-radius: 3px;
    background: rgba(10, 10, 15, 0.72);
}
.evb__cell b {
    color: var(--text-primary, #e0ddd5);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.evb__cell i {
    color: var(--text-muted, #7a7870);
    font-size: 0.6rem;
    font-style: normal;
    text-transform: uppercase;
}
.evb__clock--live .evb__clock-label--live {
    color: var(--red-bright, #d40b06);
    font-weight: 700;
}
.evb__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red-bright, #d40b06);
    box-shadow: 0 0 0 0 rgba(212, 11, 6, 0.6);
    animation: evb-pulse 1.8s ease-out infinite;
}
@keyframes evb-pulse {
    70%  { box-shadow: 0 0 0 7px rgba(212, 11, 6, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 11, 6, 0); }
}
.evb__title {
    margin: 0;
    /* Deckel, damit der laengste Termin-Titel umbricht statt bis an die
       Kartenkante ueber das Artwork zu laufen. */
    max-width: 700px;
    font-family: var(--font-heading, inherit);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-primary, #e0ddd5);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
.evb__links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.evb__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.9rem;
    border: 1px solid rgba(212, 11, 6, 0.55);
    border-radius: var(--border-radius, 4px);
    background: rgba(10, 10, 15, 0.72);
    color: var(--text-primary, #e0ddd5);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.evb__btn:hover {
    border-color: var(--red-bright, #d40b06);
    background: rgba(212, 11, 6, 0.18);
    color: #fff;
}
.evb__btn--primary {
    border-color: var(--gold, #a50905);
    background: var(--gold, #a50905);
    color: #fff;
}
.evb__btn--primary:hover {
    border-color: var(--red-bright, #d40b06);
    background: var(--red-bright, #d40b06);
}
/* Season-Farbe des Projekts (Admin-konfigurierbar, per Default gruen).
   Bewusst nur getoent statt vollflaechig: der Button soll sich vom roten
   Primaer-Button absetzen, ihm aber nicht die Aufmerksamkeit wegnehmen. */
.evb__btn--season {
    border-color: color-mix(in srgb, var(--label-season, #4ade80) 50%, transparent);
    background: color-mix(in srgb, var(--label-season, #4ade80) 14%, transparent);
    color: color-mix(in srgb, var(--label-season, #4ade80) 70%, #ffffff);
}
.evb__btn--season:hover {
    border-color: color-mix(in srgb, var(--label-season, #4ade80) 80%, transparent);
    background: color-mix(in srgb, var(--label-season, #4ade80) 24%, transparent);
    color: color-mix(in srgb, var(--label-season, #4ade80) 45%, #ffffff);
}

@media (max-width: 900px) {
    .evb__inner { flex-direction: column; gap: 0.7rem; }
}
@media (max-width: 768px) {
    .evb { padding: 0.75rem 1rem 0; }
    .evb__inner {
        padding: 0.6rem 0.9rem 0.7rem;
        background-position: left center;
        box-shadow: inset 0 0 0 100vmax rgba(10, 10, 15, 0.55);
    }
    .evb__title { font-size: 1.1rem; }
    .evb__clock { flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
    .evb__btn { padding: 0.38rem 0.75rem; font-size: 0.68rem; }
}

/* --- Main Content --- */
.main-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 1.5rem;
    flex: 1;
}

/* --- Cards / Panels --- */
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}

.panel--hover:hover {
    border-color: var(--border-hover);
    background: var(--bg-panel-hover);
}

/* --- Class Selection Grid (Landing Page) --- */
.hero {
    text-align: center;
    padding: 0.5rem 0 1rem;
    margin-top: -1rem;
}

.hero__title {
    font-size: 3rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 40px rgba(165, 9, 5, 0.3);
}

.hero__seo-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--gold);
    max-width: 820px;
    margin: 0 auto 0.5rem;
    letter-spacing: 0.01em;
}

.hero__subtitle {
    font-size: 1.1rem;
    color: var(--text-dimmed);
    max-width: 720px;
    margin: 0 auto 1rem;
}

@media (max-width: 768px) {
    .hero__seo-subtitle { font-size: 1.1rem; }
}

/* --- Season Banner (Startseite) -------------------------------------------
   Artwork-Panel + Fakten-Spalte im Raster 2fr/1fr — dasselbe Raster wie die
   News-Sektion direkt darunter (2 News-Karten + BluePost-Spalte). Die
   Kartenhuelle (Grund, Gold-Haarlinie, 8px) ist die von .home-news-card /
   .class-card, damit der Seitenkopf aus denselben Bausteinen besteht. */
.season-banner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.85rem;
    align-items: stretch;
    /* 2rem + die 8px margin-top der News-Sektion = 40px, also derselbe Abstand,
       den alle weiteren Home-Sektionen untereinander haben. */
    margin-bottom: 2rem;
}

.season-banner__main {
    position: relative;
    overflow: hidden;
    background: #0a0a0f;
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg);
}

/* Artwork bewusst gedimmt — dieselbe Behandlung wie .class-card__art */
.season-banner__art {
    position: absolute;
    inset: 0;
    background-position: 50% 20%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.8) saturate(0.9);
}

/* Schleier laeuft nach rechts aus, damit die Textspalte links lesbar bleibt */
.season-banner__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(10, 10, 15, 0.95) 0%,
        rgba(10, 10, 15, 0.80) 50%,
        rgba(10, 10, 15, 0.22) 100%);
}

.season-banner__content {
    position: relative;
    padding: 2rem 2.15rem 1.9rem;
}

.season-banner__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
}

.season-banner__badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--red-bright);
    background: rgba(212, 11, 6, 0.12);
    border: 1px solid rgba(212, 11, 6, 0.3);
    padding: 2px 8px;
    border-radius: var(--border-radius);
}

/* Season badge in page heroes ("Season N") — same green as the event banner's
   season CTA (.evb__btn--season). Modifier on top of each hero's own badge class;
   :is() lifts specificity so it also wins over builds-list.css (loads later). */
:is(.season-banner__badge, .planner-hero__badge, .page-hero__badge, .builds-hero__badge).season-badge {
    color: color-mix(in srgb, var(--label-season, #4ade80) 70%, #ffffff);
    background: color-mix(in srgb, var(--label-season, #4ade80) 14%, transparent);
    border-color: color-mix(in srgb, var(--label-season, #4ade80) 50%, transparent);
}

.season-banner__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.82rem;
    color: var(--text-dimmed);
}

.season-banner__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5fae83;
    box-shadow: 0 0 6px rgba(95, 174, 131, 0.6);
}

.season-banner__title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    line-height: 1.12;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.875rem;
    text-shadow: 0 0 40px rgba(165, 9, 5, 0.45);
}

.season-banner__subtitle {
    font-size: 1.03rem;
    line-height: 1.45;
    color: var(--text-secondary);
    max-width: 36rem;
    margin: 0 0 1.5rem;
}

.season-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* components.css definiert .btn spaeter erneut (padding/radius/border) — der
   Zwei-Klassen-Selektor haelt die Groesse der beiden Banner-CTAs fest. */
.season-banner__actions .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.97rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
}

.season-banner__actions .btn--secondary {
    background: rgba(21, 22, 26, 0.6);
    border-color: var(--border-color);
}

/* Fakten-Spalte — Muster der BluePost-Spalte, in Gold statt Blau */
.season-facts {
    display: flex;
    flex-direction: column;
    padding: 0.85rem;
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.28);
    border-radius: var(--border-radius-lg);
    min-width: 0;
}

.season-facts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(196, 162, 78, 0.22);
}

.season-facts__title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold-bright);
}

/* Liste und Zeilen wachsen mit — sonst klafft je nach Anzahl der vorhandenen
   Fakten eine Luecke zwischen letzter Zeile und dem CTA am Spaltenfuss. */
/* Linkliste fuellt die Panelhoehe — die Zeilen wachsen mit, damit die Spalte
   auch dann buendig zum Banner abschliesst, wenn ein Season-Guide fehlt. */
.season-facts__links {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.season-facts__link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.3rem;
    padding: 0 0.15rem;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px dashed rgba(196, 162, 78, 0.15);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.season-facts__link:last-child {
    border-bottom: none;
}

.season-facts__link:hover {
    background: rgba(196, 162, 78, 0.07);
    color: var(--red-bright);
}

.season-facts__bullet {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red-bright);
    opacity: 0.7;
}

.season-facts__link-label {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.season-facts__chevron {
    flex: none;
    color: var(--red-bright);
    opacity: 0.5;
}

.season-facts__link:hover .season-facts__chevron {
    opacity: 1;
}

/* Fusszeile: Patch, Build-Zahl, optionaler Countdown, PTR-Link */
.season-facts__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(196, 162, 78, 0.22);
    font-size: 0.76rem;
    color: var(--text-dimmed);
}

.season-facts__meta strong {
    color: var(--text-secondary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.season-facts__meta a {
    color: inherit;
    text-decoration: none;
}

.season-facts__meta a:hover strong,
.season-facts__meta a:hover {
    color: var(--red-bright);
}

.season-facts__sep {
    color: var(--border-hover);
}

.season-facts__ptr {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mythic-red);
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.3);
    padding: 1px 7px;
    border-radius: var(--border-radius);
    white-space: nowrap;
}

.season-facts__ptr:hover {
    background: rgba(255, 107, 107, 0.16);
    color: #ff9a9a;
}

/* Ab hier passt die Fakten-Spalte nicht mehr neben das Panel */
@media (max-width: 1024px) {
    .season-banner {
        grid-template-columns: 1fr;
    }
    .season-banner__title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .season-banner__content {
        padding: 1.5rem 1.25rem 1.4rem;
    }
    .season-banner__title {
        font-size: 1.6rem;
        letter-spacing: 0.04em;
    }
    .season-banner__subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }
    /* Schleier ganzflaechig, sonst steht Text auf dem hellen Bildrand */
    .season-banner__veil {
        background: linear-gradient(90deg,
            rgba(10, 10, 15, 0.94) 0%,
            rgba(10, 10, 15, 0.86) 60%,
            rgba(10, 10, 15, 0.62) 100%);
    }
    .season-banner__actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.class-grid {
    display: grid;
    /* one equal-width column per class, regardless of class count (7 or 8 per game version) */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.85rem;
}

/* Used as the class filter on /builds — sits directly under the page intro. */
.class-grid--filter {
    margin: -0.5rem 0 0.75rem;
}

/* Portrait class tile — class artwork with the icon anchored on it.
   Card shell mirrors .home-news-card (guides-public.css) so the class grid,
   the news cards and the guide cards read as one component family. */
.class-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.5rem 0.6rem;
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.class-card:hover {
    border-color: rgba(212, 11, 6, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212, 11, 6, 0.15);
}

.class-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: #0a0a0f;
}

.class-card__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.66) saturate(0.9) contrast(1.03);
    transition: filter 0.22s, transform 0.35s;
}

.class-card:hover .class-card__art {
    filter: brightness(0.88) saturate(1) contrast(1.03);
    transform: scale(1.04);
}

/* Class colour lives in the artwork gradient and the rule, not in the card fill */
.class-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--class-color, #1a1a24) 42%, transparent) 0%,
        rgba(10, 10, 15, 0.45) 38%,
        rgba(10, 10, 15, 0) 78%);
}

.class-card__rule {
    height: 2px;
    margin: 0 1px;
    border-radius: 0 0 3px 3px;
    background: color-mix(in srgb, var(--class-color, #1a1a24) 62%, transparent);
}

.class-card__icon {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.8));
    transition: transform 0.22s, filter 0.22s;
}

.class-card:hover .class-card__icon {
    transform: translateX(-50%) scale(1.06);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--class-color, #1a1a24) 50%, transparent))
            drop-shadow(0 2px 7px rgba(0, 0, 0, 0.8));
}

.class-card__icon--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dimmed);
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
}

.class-card__body {
    padding: 0.45rem 0.15rem 0;
    min-width: 0;
}

.class-card__name {
    display: block;
    max-width: 100%;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.class-card__resource {
    display: block;
    max-width: 100%;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-dimmed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selected class in the /builds filter */
.class-card--active {
    border-color: color-mix(in srgb, var(--class-color, #1a1a24) 55%, rgba(196, 162, 78, 0.18));
}

.class-card--active .class-card__art {
    filter: brightness(0.88) saturate(1) contrast(1.03);
}

.class-card--active .class-card__name {
    color: #fff;
}

@media (max-width: 1199px) {
    .class-grid {
        grid-auto-flow: row;
        /* minmax(0, …) statt 1fr: die Klassennamen stehen auf nowrap, ohne die
           0-Untergrenze wachsen die Spalten auf deren Mindestbreite und das
           Raster laeuft ueber den Rand hinaus. */
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Portrait crops get unwieldy at two columns — go landscape instead */
    .class-card__thumb {
        aspect-ratio: 4 / 3;
    }

    /* As a filter the grid is not the content — eight stacked cards would push
       the build list off-screen. Swipeable row instead, like the old icon bar. */
    .class-grid--filter {
        display: flex;
        grid-auto-flow: initial;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
    }
    .class-grid--filter::-webkit-scrollbar { display: none; }
    .class-grid--filter .class-card {
        flex: 0 0 104px;
        scroll-snap-align: start;
        padding: 0.35rem 0.35rem 0.45rem;
    }
    .class-grid--filter .class-card__thumb {
        aspect-ratio: 3 / 4;
    }
    .class-grid--filter .class-card__icon {
        width: 38px;
        height: 38px;
    }
    .class-grid--filter .class-card__name {
        font-size: 0.8rem;
    }
    .class-grid--filter .class-card__resource {
        font-size: 0.72rem;
    }
}

/* --- Featured builds (home) --- */
/* Same compact row as the class grid: class artwork dimmed in the back, colour
   fading in from the right, icon left, tier pinned right so the ratings line up. */
.featured-builds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.featured-build-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 76px;
    padding: 12px 14px;
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.featured-build-card:hover {
    border-color: rgba(212, 11, 6, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212, 11, 6, 0.15);
}

.featured-build-card__art {
    position: absolute;
    inset: 0;
    background-position: center 25%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.3) saturate(0.75);
    transition: filter 0.2s;
}

.featured-build-card:hover .featured-build-card__art {
    filter: brightness(0.44) saturate(0.9);
}

.featured-build-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(10, 10, 15, 0.9) 0%,
        rgba(10, 10, 15, 0.6) 55%,
        color-mix(in srgb, var(--class-color, #1a1a24) 34%, transparent) 100%);
}

.featured-build-card__icon {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.85));
}

.featured-build-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.featured-build-card__title {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.featured-build-card__class {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark hairline keeps the S badge readable on the red Barbarian gradient */
.featured-build-card__tier {
    position: relative;
    flex: none;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 4px;
    color: #0a0a0f;
    background: var(--tier-color, #7a7870);
    box-shadow: 0 0 0 1px rgba(10, 10, 15, 0.55);
}

/* --- Forms --- */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.form-input {
    width: 100%;
    padding: 0.65rem 0.875rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--gold-dark);
    box-shadow: 0 0 0 2px rgba(165, 9, 5, 0.15);
}

.form-input::placeholder {
    color: var(--text-dark);
}

.form-input--locked {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-error {
    font-size: 0.8rem;
    color: var(--error);
    margin-top: 0.25rem;
}

/* --- Auth Pages --- */
.auth-container {
    max-width: 400px;
    margin: 4rem auto;
}

.auth-container h2 {
    text-align: center;
    color: var(--gold);
    margin-bottom: 2rem;
}

.auth-container .panel {
    padding: 2rem;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-dimmed);
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

.alert--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--error);
}

.alert--success {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: var(--success);
}

/* --- OAuth Buttons --- */
.auth-modal__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--text-dimmed);
    font-size: 0.8rem;
}
.auth-modal__divider::before,
.auth-modal__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-modal__oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn--oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: #fff;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    line-height: 1;
}
.btn--oauth:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.btn--oauth img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.btn--battlenet {
    background: #0074e0;
    border-color: #005bb5;
}
.btn--battlenet:hover {
    background: #0082fc;
}

.btn--twitch {
    background: #9146ff;
    border-color: #7c3bd4;
}
.btn--twitch:hover {
    background: #a366ff;
}

.btn--steam {
    background: #171a21;
    border-color: #2a3040;
}
.btn--steam:hover {
    background: #1e2330;
}

/* "Mit D4Guides anmelden" — einziger Login-Weg auf d5 (pages/login.php) */
.btn--d4guides {
    background: #8b1a1a;
    border-color: #6e1313;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
}
.btn--d4guides:hover {
    background: #a52020;
}

/* Linked accounts on profile page */
.oauth-accounts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.oauth-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.oauth-account__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.oauth-account__info {
    flex: 1;
    min-width: 0;
}

.oauth-account__provider {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.oauth-account__name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oauth-account__status {
    font-size: 0.8rem;
    color: var(--text-dimmed);
}

/* --- Footer ---
   Markenpanel links (Logo, Claim, Discord/RSS), fuenf Linkspalten rechts, darunter
   Disclaimer und Copyright. Umbau 09.09.2026. */
.site-footer {
    /* Gleiche Flaeche wie die News-Karten (.home-news-card): setzt den Footer
       als eigenes Band vom Seitenhintergrund ab. */
    background: rgba(10, 10, 15, 0.55);
    border-top: 1px solid var(--border-color);
    padding: 1.75rem 1.5rem 1rem;
    color: var(--text-dimmed);
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 3.5rem;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding-right: 2.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__logo { display: block; }
.site-footer__logo img {
    height: 36px;
    width: auto;
    display: block;
}
.site-footer__logo-text {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.site-footer__claim {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.site-footer__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--red-bright);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.site-footer__more:hover { color: var(--text-primary); }

/* Social-Icons: quadratische Icon-Buttons (Discord, Twitch, X, Instagram, RSS). */
.site-footer__social {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-panel);
    color: var(--text-secondary);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.site-footer__social-link:hover {
    color: #fff;
    border-color: var(--brand, var(--red));
    background: var(--brand, var(--red));
}
/* Markenfarben der Netzwerke fuer den Hover (offizielle Brand-Farben). */
.site-footer__social-link--discord   { --brand: #5865f2; }
.site-footer__social-link--twitch    { --brand: #9146ff; }
.site-footer__social-link--x         { --brand: #000000; }
.site-footer__social-link--instagram { --brand: #e1306c; }
.site-footer__social-link--youtube   { --brand: #ff0000; }
.site-footer__social-link--rss       { --brand: #f26522; }
.site-footer__social-link--x:hover   { border-color: var(--border-hover); }

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    /* Vertikal mittig zum hoeheren Markenpanel links. */
    align-self: center;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.site-footer__heading {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin: 0 0 0.25rem;
}

/* Verlinkte Spaltenueberschrift behaelt die Ueberschriften-Optik —
   .site-footer__col a wuerde sie sonst auf Link-Groesse herunterziehen. */
.site-footer__col .site-footer__heading a {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: inherit;
    color: inherit;
}
.site-footer__col .site-footer__heading a:hover { color: var(--red-bright); }

/* Links in text-dimmed statt text-dark: das alte #4a4840 lag bei 1,9:1 Kontrast. */
.site-footer__col a {
    color: var(--text-dimmed);
    text-decoration: none;
    font-size: 0.8125rem;
    line-height: 20px;
    transition: color var(--transition-fast);
}
.site-footer__col a:hover { color: var(--red-bright); }

.site-footer__col--truncate a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__disclaimer {
    font-size: 0.6875rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.4;
    flex: 1 1 0;
}

.site-footer__copy {
    color: var(--text-dark);
    margin: 0;
    font-size: 0.75rem;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    .site-footer__brand {
        padding-right: 0;
        padding-bottom: 1.25rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .site-footer__columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
        align-self: stretch;
    }
}

@media (max-width: 768px) {
    .site-footer__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding: 1.25rem 1rem 0.75rem;
    }
    .site-footer__columns {
        gap: 1rem;
    }
}

/* --- Legal Pages --- */
.legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.legal-page__title {
    color: var(--gold);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.legal-page__content {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    color: var(--text-light);
    line-height: 1.7;
}

.legal-page__content h2 {
    color: var(--gold);
    font-size: 1.2rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

.legal-page__content h2:first-child {
    margin-top: 0;
}

.legal-page__content h3 {
    color: var(--text-light);
    font-size: 1rem;
    margin: 1.25rem 0 0.5rem;
}

.legal-page__content p {
    margin: 0.5rem 0;
}

.legal-page__content ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.legal-page__content li {
    margin: 0.3rem 0;
}

.legal-page__content a {
    color: var(--gold);
}

.legal-page__content a:hover {
    text-decoration: underline;
}

.legal-page__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.legal-page__content th,
.legal-page__content td {
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.legal-page__content th {
    background: rgba(196, 162, 78, 0.1);
    color: var(--gold);
    font-weight: 600;
}

@media (max-width: 768px) {
    .legal-page {
        padding: 1rem 0.75rem;
    }
    .legal-page__content {
        padding: 1.25rem;
    }
    .legal-page__content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        font-size: 0.8rem;
    }
    .legal-page__content th,
    .legal-page__content td {
        padding: 0.4rem 0.5rem;
    }
}

/* --- Cookie Consent Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    transform: translateY(100%);
    transition: transform 0.35s ease;
}

.cookie-banner--visible {
    transform: translateY(0);
}

.cookie-banner__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cookie-banner__text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cookie-banner__text a {
    color: var(--gold);
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cookie-banner__inner {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    .cookie-banner__actions {
        width: 100%;
        justify-content: center;
    }
}

/* --- Consent Manager (Datenschutz page) --- */
.consent-manager {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.consent-manager__title { margin: 0 0 0.5rem; font-size: 1rem; color: var(--text-primary); }
.consent-manager__status { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-secondary); }
.consent-manager__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.consent-manager__actions .btn--active { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Utility Classes --- */
.text-gold { color: var(--gold); }
.text-dimmed { color: var(--text-dimmed); }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* --- Responsive --- */
@media (max-width: 768px) {
    /* Defense-in-depth safety net. Container-level caps prevent overflow at
       the source; clip avoids the iOS Safari position:fixed/sticky quirks of
       overflow-x:hidden. */
    body {
        overflow-x: clip;
    }

    .main-content {
        padding: 1.25rem 0.75rem;
    }

    .hero__title {
        font-size: 2rem;
    }

}

/* Header: compact nav just above the hamburger cutoff — the full desktop
   header needs ~1050px (DE labels), so tighten paddings below 1280px */
@media (max-width: 1280px) {
    .header__nav {
        --nav-pad: 0.65rem;
    }

    .header__nav-item--disabled {
        padding: 0.5rem 0.65rem;
    }

    .header__actions {
        gap: 0.5rem;
    }
}

/* --- Mobile Hamburger Menu ---
   Cutoff at 1120px (not 768px): below it the desktop nav's min-content width
   (7 items, DE labels, search, donate, auth) exceeds the viewport. Was 1080px
   until 11.09.2026 — keep in sync with the dropdown block further down, the
   (min-width: 1121px) rule and DESKTOP in header-classic.js. */
@media (max-width: 1120px) {
    .header__inner {
        padding: 0 0.75rem;
    }

    .header__lang-toggle--mobile {
        display: inline-flex;
        order: 2;
        margin-left: auto;
    }

    /* Herz-Link mobil: links von der Flagge; das Herz uebernimmt den
       margin-left:auto-Push, die Flagge rueckt dicht daneben. */
    .header__support-link--mobile {
        display: inline-flex;
        order: 2;
        margin-left: auto;
    }
    .header__support-link--mobile ~ .header__lang-toggle--mobile {
        margin-left: 0.4rem;
    }

    /* Lupe mobil: ganz links in der Gruppe, uebernimmt den margin-left:auto-Push */
    .header__search-btn--mobile {
        display: inline-flex;
        order: 2;
        margin-left: auto;
        padding: 0.3rem 0.4rem;
        line-height: 0;
    }
    .header__search-btn--mobile ~ .header__support-link--mobile {
        margin-left: 0.4rem;
    }
    .header__search-btn--desktop {
        display: none;
    }

    .header__lang-toggle--desktop {
        display: none;
    }

    .header__support-link--desktop {
        display: none;
    }

    .header__beta-badge {
        margin-right: 0;
    }

    .header__hamburger {
        display: flex;
        order: 3;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

    .header__menu {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: #15161a;
        border-bottom: 1px solid var(--border-color);
        flex-direction: column;
        align-items: stretch; /* Sektionen fuellen die volle Panel-Breite (nicht zentriert schrumpfen) */
        padding: 0.75rem 1rem 1rem;
        gap: 0.5rem;
        z-index: 99;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }

    .header--mobile-open .header__menu {
        display: flex;
    }

    .header__nav {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* volle Breite -> Eintraege wirklich linksbuendig */
        gap: 0;
        flex: none;
        justify-content: flex-start;
        padding-left: 0;
        order: -2; /* Navigation zuerst, Profil/Login darunter (Wunsch 11.09.2026) */
        margin: -0.75rem -1rem 0; /* volle Zeilen bis an den Panel-Rand, buendig oben */
    }

    .header__nav a {
        padding: 0.64rem 1rem; /* ~15% niedrigere Zeilen, volle Breite */
        font-size: 1rem;
        text-align: left;
        border-radius: 0;
        border-bottom: 1px solid rgba(42, 42, 53, 0.5);
    }

    /* Hauptnavigationspunkte etwas dunkler als das Panel */
    .header__nav > a,
    .header__nav-dropdown__toggle {
        background: #101116;
    }

    /* Im Hamburger-Panel steht jeder Punkt in einer eigenen vollen Zeile —
       die festen Slot-Breiten und die Zentrierung vom Desktop sind hier hinfaellig. */
    .header__nav > a,
    .header__nav-dropdown__toggle {
        display: flex;
        justify-content: flex-start;
        min-width: 0;
    }

    /* Auth-Aktionen (Login/Profil/Admin/Logout) als zentrierte Reihe unter der Navigation */
    .header__actions {
        order: 1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        margin: 0 -1rem; /* Trennlinie komplett bis an den Panel-Rand */
        padding: 0.7rem 1rem 0;
        border-top: 1px solid var(--border-color);
        border-bottom: 0;
    }

    .header__actions .btn {
        flex: 0 0 auto; /* natuerliche Breite -> Buttons mittig gruppiert */
        text-align: center;
        justify-content: center;
    }

    .site-header {
        position: sticky;
    }

    /* Safety net: the header is the only element that overflowed in this
       range; clip guards against any remaining sub-pixel overflow */
    body {
        overflow-x: clip;
    }
}

@media (max-width: 480px) {
    .hero__title {
        font-size: 1.6rem;
    }

    .header__logo span {
        font-size: 0.85rem;
    }
}

/* --- Home: Featured & Top Sections --- */
.home-section {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
}

.home-section__title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0;
    position: relative;
}

/* Kopfzeile jeder Home-Sektion: Titel + Unterzeile links, "Alle anzeigen" rechts.
   nowrap haelt den Button auf derselben Zeile — bei langen Ueberschriften
   (Guides, Latest Feed) fiel er sonst auf Zeile 2 und stand dort linksbuendig.
   Die Unterzeile gibt stattdessen per Ellipse nach. */
.home-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color, #2a2a35);
}

/* Gestapelt statt auf einer Grundlinie: nebeneinander lasen sich Ueberschrift
   und Unterzeile als ein durchlaufender Satz, und die Unterzeile musste per
   Ellipse abgeschnitten werden, sobald der Titel lang wurde. */
.home-section__titles {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.home-section__head > :last-child {
    flex: none;
}

/* Zentrierte Variante — auf dem Build-Planer traegt die Kopfzeile die Ansprache
   und hat kein Gegenstueck rechts. */
.home-section__head--center {
    justify-content: center;
}

.home-section__head--center .home-section__titles {
    align-items: center;
    text-align: center;
}

/* Klassenraster im Build-Planer: die Ueberschrift soll optisch mittig zwischen
   Kopfband und Karten sitzen. Oben zaehlt nur der groessere der beiden
   aneinandergrenzenden Abstaende (Band-Abstand 1.75rem kollabiert mit diesem
   margin-top) — 44px. Unten ergeben 20px Innenabstand + 1px Linie + 23px
   Aussenabstand dieselben 44px. Standardwerte waren oben deutlich luftiger. */
.home-section--planner-classes {
    margin-top: 2.75rem;
}

.home-section--planner-classes .home-section__head {
    padding-bottom: 20px;
    margin-bottom: 23px;
}

/* Sekundaer-Navigation, kein CTA: goldener Textlink mit demselben SVG-Chevron
   wie die Season-Spalte. Ohne Rahmen laeuft er auch nicht mehr parallel zur
   1px-Linie der Kopfzeile. */
.home-section__all {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.35rem 0.15rem;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* Gleiche Farbe wie ".home-news-card__more" und die Links der Season-Spalte —
       Sekundaer-Navigation ist auf dieser Seite bereits rot, nicht gold. */
    color: var(--red-bright);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.home-section__all:hover {
    color: #ff1a14;
}

.home-section__all-chevron {
    flex: none;
    opacity: 0.65;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.home-section__all:hover .home-section__all-chevron {
    opacity: 1;
    transform: translateX(2px);
}

.home-section__sub {
    margin: 0;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.4;
}

/* Guide-Karten der Startseite in die Kartenfamilie holen. Scope auf die
   Sektion, weil .chub-card (content-hub.css) auch /guides und /news traegt —
   die bleiben unveraendert. */
.home-section--guides .chub-card {
    background: rgba(10, 10, 15, 0.55);
    border-color: rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg);
}

.home-section--guides .chub-card:hover {
    border-color: rgba(212, 11, 6, 0.5);
    box-shadow: 0 6px 18px rgba(212, 11, 6, 0.15);
}

.home-section--guides .chub-card:hover .chub-card__title {
    color: var(--red-bright);
}

.home-section--guides .chub-card__meta {
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(196, 162, 78, 0.15);
}

/* Schwierigkeits-Badge in derselben Machart wie die uebrigen Outline-Badges */
.home-section--guides .chub-diff {
    background: rgba(10, 10, 15, 0.72);
}

@media (max-width: 768px) {
    /* Lange Section-Titel auf Mobilgeraeten umbrechen statt abschneiden */
    .home-section__title {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    /* Stack title block and right-hand controls (filters, "view all") so the
       heading uses the full width instead of wrapping after a few words. */
    .home-section__head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .home-section__head--center {
        align-items: center;
    }
    .home-section__head > .home-section__all {
        align-self: flex-start;
    }
}

.home-section__more {
    text-align: center;
    margin-top: 1.25rem;
}

/* --- Home: Unified "Latest" Feed (news-style list) --- */
.latest-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Schale und Hover exakt wie .home-news-card / .class-card / .featured-build-card,
   damit die Seite von oben bis unten eine Kartenfamilie bleibt. */
.latest-feed__item {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 0.85rem;
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.latest-feed__item:hover {
    border-color: rgba(212, 11, 6, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212, 11, 6, 0.15);
}

/* Feste Breite statt 33%-Anteil (dort war das Bild ~400px breit und die Zeile
   ueber 220px hoch). Doppelte Breite der News-Karten-Thumbs, weil die Feed-Zeile
   ueber die volle Seitenbreite laeuft und ein kleines Bild darin verloren wirkt. */
.latest-feed__thumb {
    position: relative;        /* Anker für hero_img_style bei Zoom < 100 % */
    flex: 0 0 300px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #0a0a0f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.latest-feed__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-feed__thumb-fallback {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--gold-dark, #a37e2c);
    opacity: 0.5;
}

.latest-feed__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2px 4px;
}

.latest-feed__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(196, 162, 78, 0.15);
}

/* Outline statt Vollflaeche — dieselbe Machart wie .home-news-card__badge,
   nur der Farbton unterscheidet die Inhaltsart. */
.latest-feed__badge {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1.6px 7.2px;
    border-radius: var(--border-radius);
    border: 1px solid currentColor;
}

.latest-feed__badge--news  { color: #4a90d9; background: rgba(74, 144, 217, 0.12); }
.latest-feed__badge--build { color: var(--gold-bright); background: rgba(212, 11, 6, 0.12); }
.latest-feed__badge--guide { color: #a78bfa; background: rgba(139, 92, 246, 0.12); }

.latest-feed__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latest-feed__head .latest-feed__badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
}
.latest-feed__head {
    padding-right: 70px;
}

.latest-feed__excerpt {
    margin: 0 0 auto;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-feed__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.latest-feed__tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-elevated, #1c1f27);
    border: 1px solid var(--border-color, #2a2a35);
    color: var(--text-secondary);
}

/* News-Items: Section-Headlines als Stichpunkte unter dem Teaser.
   Scope auf [data-type="news"], damit Build-/Guide-Items unverändert bleiben. */
.latest-feed__item[data-type="news"] .latest-feed__excerpt { margin-bottom: 6px; }
.latest-feed__item[data-type="news"] .latest-feed__foot { margin-top: auto; }
.latest-feed__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 14px;
}
.latest-feed__points li {
    position: relative;
    padding-left: 14px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.latest-feed__points li::before {
    content: '';
    position: absolute;
    left: 3px; top: 0.62em;
    width: 4px; height: 4px;
    background: var(--gold, #c4a24e);
    transform: rotate(45deg);
}
@media (max-width: 560px) {
    .latest-feed__points { grid-template-columns: 1fr; }
}

.latest-feed__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(196, 162, 78, 0.15);
    font-size: 0.78rem;
}

.latest-feed__byline {
    color: var(--text-secondary);
}

.latest-feed__more {
    color: var(--red-bright);
    font-weight: 600;
    white-space: nowrap;
}

/* Build meta strip — abgespeckte Card-Infos im News-Zeilen-Body, als Card hinterlegt
   (Hintergrund analog zu .build-card: Klassen-Verlauf links + BG-Bild rechts) */
.latest-feed__buildmeta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-panel, #13151a);
    border: 1px solid var(--border-color, #2a2a35);
}
.latest-feed__buildmeta::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: linear-gradient(to right, color-mix(in srgb, var(--class-color, transparent) 25%, transparent), transparent);
    pointer-events: none;
    z-index: 0;
}
.latest-feed__buildmeta::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 70%;
    background-image: var(--card-bg, none);
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent, black 40%);
    -webkit-mask-image: linear-gradient(to right, transparent, black 40%);
}
.latest-feed__buildmeta:not([style*="--card-bg"])::after { display: none; }
.latest-feed__buildmeta > * { position: relative; z-index: 1; }

.latest-feed__bm-labels {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-right: auto;
}
.latest-feed__bm-labels .build-card__label {
    white-space: nowrap;
}
.latest-feed__bm-skills {
    display: flex;
    gap: 3px;
}
.latest-feed__bm-tier {
    margin: -10px -14px -10px 0;
    align-self: stretch;
    border-radius: 0 8px 8px 0;
}
.latest-feed__bm-tier--empty {
    background: color-mix(in srgb, var(--text-secondary, #7a7870) 22%, transparent);
    color: var(--text-secondary, #7a7870);
}

/* Die fuenf Filter standen als volle Sekundaer-Buttons dort, wo jede andere
   Sektion EINEN "Alle anzeigen"-Link hat — sie lasen sich als fuenf
   gleichrangige CTAs. Jetzt Text-Umschalter; der aktive traegt einen roten
   2px-Unterstrich, also dieselbe Linien-Sprache wie die Section-Header. */
.latest-feed__filters {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.latest-feed__filter {
    padding: 0.35rem 0.15rem;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-secondary);
    background: none;
    border: 0;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color var(--transition-fast), box-shadow var(--transition-fast);
}

.latest-feed__filter:hover {
    color: var(--text-primary);
}

.latest-feed__filter--active {
    font-weight: 700;
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--red);
}

@media (max-width: 768px) {
    /* Ohne Rahmen fehlt den Textlinks Hoehe — auf Touch mindestens 44px. */
    .home-section__all,
    .latest-feed__filter {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .latest-feed__filters { gap: 0.9rem; }

    .latest-feed__item { gap: 10px; padding: 0.7rem; }
    .latest-feed__thumb { flex-basis: 33%; }
    .latest-feed__title { font-size: 0.92rem; white-space: normal; }
    .latest-feed__excerpt { -webkit-line-clamp: 2; font-size: 0.8rem; }

    /* Filters as one swipeable row below the heading */
    .latest-feed__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: -6px 0 -14px;
    }
    .latest-feed__filters::-webkit-scrollbar { display: none; }
    .latest-feed__filter { flex: none; }

    /* Build strip: builds-list.css makes .build-card__tier absolute on mobile,
       which laid it over labels and skills. Grid instead: labels left + tier
       right on row 1, skills on row 2 — each box only as wide as its content. */
    .latest-feed__buildmeta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 8px;
        padding: 6px 8px;
    }
    .latest-feed__bm-labels,
    .latest-feed__bm-skills {
        justify-self: start;
        max-width: 100%;
        margin: 0;
        padding: 4px 5px;
    }
    .latest-feed__bm-labels {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .latest-feed__buildmeta .latest-feed__bm-tier {
        position: static;
        /* Flush right edge, full height — same as the desktop column */
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        width: 2.75rem;
        min-width: 2.75rem;
        margin: -6px -8px -6px 0;
        padding: 0;
        border-radius: 0 8px 8px 0;
    }
    .latest-feed__bm-skills {
        grid-column: 1;
        flex-wrap: wrap;
        gap: 3px;
    }
    .latest-feed__bm-skills .build-card__skill-icon { width: 36px; height: 36px; }
}

/* Narrow phones: image on top, content full width below — side by side the
   text column was squeezed to ~60 % and the build strip broke apart. */
@media (max-width: 560px) {
    .latest-feed__item { flex-direction: column; }
    .latest-feed__thumb { flex: none; width: 100%; }
    /* Badge now sits on the image corner — needs an opaque ground */
    .latest-feed__head .latest-feed__badge {
        top: calc(0.7rem + 8px);
        right: calc(0.7rem + 8px);
        background-color: rgba(10, 10, 15, 0.85);
    }
    .latest-feed__head { padding-right: 0; }
}

/* --- Home: Builds Tab System --- */
.home-builds {
    margin-top: 2.5rem;
}

.home-builds__tabs {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color, #2a2a35);
    padding-bottom: 0;
}

.home-builds__tab {
    position: relative;
    background: none;
    border: none;
    color: var(--text-dimmed, #7a7870);
    font-family: var(--font-heading, inherit);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.home-builds__tab:hover {
    color: var(--text-primary, #e0ddd5);
}

.home-builds__tab--active {
    color: var(--gold, #c4a24e);
    border-bottom-color: var(--gold, #c4a24e);
}

.home-builds__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-panel, #13151a);
    border: 1px solid var(--border-panel, #252830);
    border-radius: var(--border-radius-lg, 8px);
    margin-bottom: 1.25rem;
}

.home-builds__loading {
    text-align: center;
    padding: 3rem;
    color: var(--text-dimmed, #7a7870);
}

.home-builds__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-dimmed, #7a7870);
    font-size: 0.95rem;
}

.home-builds__more {
    text-align: center;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .home-builds__tabs {
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .home-builds__tabs::-webkit-scrollbar { display: none; }

    .home-builds__tab {
        font-size: 0.8rem;
        padding: 0.5rem 0.85rem;
        white-space: nowrap;
    }

    .home-builds__filters {
        padding: 0.65rem 0.85rem;
        gap: 0.5rem;
    }
}

/* --- 404 Page --- */
.page-404 {
    text-align: center;
    padding: 6rem 2rem;
}

.page-404 h1 {
    font-size: 6rem;
    color: var(--gold-dark);
    line-height: 1;
}

.page-404 p {
    color: var(--text-dimmed);
    margin: 1rem 0 2rem;
}

/* --- 500 Page --- */
.page-500 {
    text-align: center;
    padding: 6rem 2rem;
}

.page-500 h1 {
    font-size: 6rem;
    color: #ff6b6b;
    line-height: 1;
}

.page-500 p {
    color: var(--text-dimmed);
    margin: 1rem 0 2rem;
}

.page-500__debug {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 1rem;
    margin: 1.5rem auto;
    max-width: 600px;
    text-align: left;
    font-size: 0.8rem;
    color: #ff6b6b;
    overflow-x: auto;
    border-radius: 8px;
}

/* --- Breadcrumbs --- */
/* ============ KEYFRAME ANIMATIONS ============ */

@keyframes d4-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes d4-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes d4-slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes d4-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes d4-glow-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(165, 9, 5, 0.3); }
    50% { box-shadow: 0 0 12px rgba(165, 9, 5, 0.6); }
}

/* Utility animation classes */
.animate-fade-in {
    animation: d4-fade-in 0.3s ease forwards;
}

.animate-slide-up {
    animation: d4-slide-up 0.3s ease forwards;
}

/* Tab content fade transition */
.editor-tab-content {
    animation: none;
}

.editor-tab-content--active {
    animation: d4-fade-in 0.2s ease;
}

/* ============ TOUCH DEVICE ============ */

/* iOS zoom prevention: inputs < 16px trigger auto-zoom on iOS Safari */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Larger touch targets on touch devices */
.touch-device .btn {
    min-height: 44px;
    min-width: 44px;
}

.touch-device .btn--sm {
    min-height: 36px;
}

.touch-device .filter-bar__select,
.touch-device .filter-bar__search {
    min-height: 44px;
    font-size: 1rem;
}

/* Touch-friendly interactive elements */
@media (max-width: 768px) {
    .btn {
        min-height: var(--tap-target);
    }
    .btn--sm {
        min-height: 36px;
    }
}

/* Disable hover effects on touch (avoids sticky hover states) */
@media (hover: none) {
    .btn--primary:hover {
        transform: none;
    }

    .build-card:hover {
        transform: none;
    }
}

/* ============ MOBILE IMPROVEMENTS ============ */

@media (max-width: 576px) {
    body {
        font-size: 15px;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .content-wrap {
        padding: 0.75rem;
    }

    .site-header__inner {
        padding: 0 0.75rem;
    }

    /* Stack navigation vertically on very small screens */
    .site-nav__list {
        gap: 0.25rem;
    }

    .site-nav__link {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ============ TWITCH LIVE BADGE (Header) ============ */

.header__twitch-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(145, 70, 255, 0.15);
    border: 1px solid #9146ff;
    border-radius: 4px;
    color: #d4b8ff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    margin-left: 10px;
    white-space: nowrap;
    line-height: 1;
}

.header__twitch-live:hover {
    background: rgba(145, 70, 255, 0.3);
    box-shadow: 0 0 8px rgba(145, 70, 255, 0.4);
}

.header__twitch-live__dot {
    width: 8px;
    height: 8px;
    background: #eb0400;
    border-radius: 50%;
    animation: twitch-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.header__twitch-live__icon {
    width: 14px;
    height: 14px;
    fill: #9146ff;
    flex-shrink: 0;
}

@keyframes twitch-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ============ TWITCH MINI-PLAYER ============ */

.twitch-player {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 440px;
    z-index: 500;
    background: #0e0e10;
    border: 1px solid #2a2a35;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.twitch-player--expanding {
    transition: width 0.3s ease;
}

.twitch-player--expanded {
    width: 640px;
}

.twitch-player__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #18181b;
    border-bottom: 1px solid #2a2a35;
    border-radius: 8px 8px 0 0;
}

.twitch-player__info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.twitch-player__dot {
    width: 8px;
    height: 8px;
    background: #eb0400;
    border-radius: 50%;
    animation: twitch-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.twitch-player__name {
    color: #d4b8ff;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twitch-player__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.twitch-player__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    color: #7a7870;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}

.twitch-player__btn:hover {
    color: #e0ddd5;
    background: rgba(255, 255, 255, 0.08);
}

.twitch-player__btn svg {
    width: 14px;
    height: 14px;
}

.twitch-player__embed {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    contain: layout style;
}

.twitch-player__embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Mobile: hide mini-player, smaller badge */
@media (max-width: 767px) {
    .twitch-player {
        display: none !important;
    }

    .header__twitch-live {
        padding: 3px 6px;
        font-size: 0.65rem;
        margin-left: 6px;
        gap: 4px;
    }

    .header__twitch-live__dot {
        width: 6px;
        height: 6px;
    }

    .header__twitch-live__icon {
        width: 12px;
        height: 12px;
    }
}

/* ============ REDUCED MOTION ============ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Bug Report Modal (global) ---- */

.bug-report-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.bug-report-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.bug-report-modal {
    background: var(--bg-secondary, #13151a);
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: 8px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.bug-report-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #2a2a35);
}

.bug-report-modal__title {
    font-family: var(--font-heading);
    color: var(--gold, #c4a24e);
    font-size: 1.1rem;
    margin: 0;
}

.bug-report-modal__close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.bug-report-modal__close:hover {
    color: var(--text-primary);
}

.bug-report-modal__form {
    padding: 1.25rem;
}

.bug-report-modal__field {
    margin-bottom: 1rem;
    position: relative;
}

.bug-report-modal__field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bug-report-modal__field input,
.bug-report-modal__field textarea {
    width: 100%;
    background: var(--bg-primary, #0a0a0f);
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: 4px;
    color: var(--text-primary, #e0ddd5);
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.bug-report-modal__field input:focus,
.bug-report-modal__field textarea:focus {
    outline: none;
    border-color: var(--gold, #c4a24e);
}

.bug-report-modal__url {
    opacity: 0.6;
    cursor: default;
}

.bug-report-modal__counter {
    position: absolute;
    right: 0.5rem;
    bottom: -1.2rem;
    font-size: 0.7rem;
    color: var(--text-dimmed, #7a7870);
}

.bug-report-modal__row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.bug-report-modal__field--grow {
    flex: 1;
    min-width: 0;
}

.bug-report-modal__toggle-group {
    display: flex;
    gap: 0;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color, #2a2a35);
}

.bug-report-modal__toggle {
    flex: 1;
    padding: 0.45rem 0.75rem;
    background: var(--bg-primary, #0a0a0f);
    border: none;
    color: var(--text-secondary, #7a7870);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.bug-report-modal__toggle + .bug-report-modal__toggle {
    border-left: 1px solid var(--border-color, #2a2a35);
}

.bug-report-modal__toggle:hover {
    color: var(--text-primary, #e0ddd5);
    background: rgba(255, 255, 255, 0.05);
}

.bug-report-modal__toggle--active {
    background: var(--gold, #c4a24e);
    color: #fff;
}

.bug-report-modal__toggle--active:hover {
    background: var(--gold, #c4a24e);
    color: #fff;
}

.bug-report-modal__select {
    width: 100%;
    background: var(--bg-primary, #0a0a0f);
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: 5px;
    color: var(--text-primary, #e0ddd5);
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
}

.bug-report-modal__select:focus {
    outline: none;
    border-color: var(--gold, #c4a24e);
}

.bug-report-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ===== Bio Language Tabs ===== */
.bio-lang-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.bio-lang-tabs__tab {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: transparent;
    color: var(--text-secondary, #7a7870);
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.bio-lang-tabs__tab:hover {
    color: var(--text-primary, #e0ddd5);
}
.bio-lang-tabs__tab--active {
    color: var(--accent-gold, #c4a24e);
    border-color: var(--accent-gold, #c4a24e);
    border-bottom-color: transparent;
}
.bio-char-count {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-secondary, #7a7870);
    margin-top: 0.25rem;
}

/* Premium-Badge — ⭐ neben dem Username */
.user-premium-badge {
    display: inline-block;
    margin-left: 0.2em;
    color: #c4a24e;
    font-size: 0.9em;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(196, 162, 78, 0.5));
    cursor: help;
}

/* LoH-Navigations-Highlight */
.header__nav a.header__nav-loh {
    color: var(--set-green, #00ff7f);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(0, 255, 127, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.header__nav a.header__nav-loh:hover {
    color: #5cffab;
    text-shadow: 0 0 12px rgba(0, 255, 127, 0.55);
}

/* PTR-Uebersicht — bewusst rot, damit sie sich vom gruenen Season-Punkt daneben
   absetzt und als "Testrealm, nicht final" lesbar ist. Gleiche Form wie oben. */
.header__nav a.header__nav-ptr {
    color: var(--mythic, #ff6b6b);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.header__nav a.header__nav-ptr:hover,
.header__nav a.header__nav-ptr.active {
    color: #ff9a9a;
    text-shadow: 0 0 12px rgba(255, 107, 107, 0.6);
}

/* LoH Addon Dropdown-Menue */
.header__nav-dropdown {
    position: relative;
}
.header__nav-dropdown__caret {
    transition: transform 0.15s ease;
}
.header__nav-dropdown:hover .header__nav-dropdown__caret,
.header__nav-dropdown:focus-within .header__nav-dropdown__caret {
    transform: rotate(180deg);
}
.header__nav-dropdown--active .header__nav-dropdown__toggle {
    color: #ff1a14;
    background: rgba(165, 9, 5, 0.1);
    border-radius: var(--border-radius);
}
/* LoH-Toggle (Saison) bleibt auch aktiv grün statt rot */
.header__nav-dropdown--active .header__nav-loh {
    color: var(--set-green, #00ff7f);
    background: rgba(0, 255, 127, 0.1);
}
.header__nav-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    padding: 0.35rem;
    background: #0d0f14;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    z-index: 200;
}
/* Linksbuendiges Dropdown-Menue (fuer Nav-Items am linken Rand, z.B. Builds) */
.header__nav-dropdown--left .header__nav-dropdown__menu {
    right: auto;
    left: 0;
}
/* Steuerungs-Sektion im Mobile-Menue (Versions-Umschalter) — auf Desktop ausgeblendet */
.header__mobile-controls { display: none; }
.header__nav-dropdown:hover .header__nav-dropdown__menu,
.header__nav-dropdown:focus-within .header__nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.header__nav-dropdown__menu a {
    display: block;
    padding: 0.5rem 0.85rem;
    color: var(--text-primary, #e0ddd5);
    font-size: 0.9375rem; /* 15px — eine Stufe unter den Hauptpunkten (16px) */
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}
.header__nav-dropdown__menu a:hover {
    background: rgba(165, 9, 5, 0.15);
    color: #ff1a14;
}
.header__nav-dropdown__menu a.active {
    color: #d40b06;
    background: rgba(165, 9, 5, 0.12);
}
/* Mehrspaltiges Dropdown (Datenbank): Spalten mit Gruppen-Ueberschrift */
.header__nav-dropdown__menu--cols {
    display: grid;
    /* Jede Spalte nur so breit wie ihr Inhalt — mit fester Mindestbreite (10.5rem)
       schleppten die kurzen Spalten rechts ~55px Leerraum mit, das Menue wirkte schief. */
    grid-template-columns: repeat(3, max-content);
    column-gap: 1rem;
    width: max-content;
    gap: 0 0.5rem;
    padding: 0.5rem;
}
.header__nav-dropdown__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Spalten-Ueberschrift: Diablo-Gold + feine Linie, damit sie als Kopf der Spalte
   erkannt wird (vorher grau wie Nebentext). Rot scheidet aus — das markiert schon
   aktive/gehoverte Links. */
.header__nav-dropdown__group {
    margin: 0 0.85rem 0.3rem;
    padding: 0.55rem 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c4a24e;
    border-bottom: 1px solid rgba(196, 162, 78, 0.22);
}
/* PTR-Eintrag im Season-Menue: abgesetzt und rot wie frueher der eigene Punkt */
.header__nav-dropdown__menu a.header__nav-dropdown__ptr {
    margin-top: 0.3rem;
    border-top: 1px solid var(--border, #2a2a35);
    border-radius: 0 0 4px 4px;
    color: var(--mythic, #ff6b6b);
    font-weight: 700;
}
.header__nav-dropdown__menu a:focus-visible {
    outline: 2px solid var(--red-bright, #d40b06);
    outline-offset: -2px;
}
/* Builds-Menue: Klassen-Raster links, Links rechts.
   max-content statt auto: die Spalten tragen min-width:0, eine auto-Spur liesse
   das Grid die Klassen-Spalte sonst auf 0 px zusammenschrumpfen (absolutes Menue
   mit Shrink-to-fit) — das Raster lief dann unter die Stoebern-Spalte. */
.header__nav-dropdown__menu--builds {
    display: grid;
    grid-template-columns: max-content minmax(11rem, max-content);
    width: max-content;
    gap: 0 0.75rem;
    padding: 0.5rem;
}
.header__nav-classes {
    display: grid;
    grid-template-columns: repeat(4, 5.75rem);
    gap: 0.35rem;
    padding: 0 0.35rem 0.35rem;
}
.header__nav-dropdown__menu a.header__nav-class {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.25rem;
    border: 1px solid var(--border, #2a2a35);
    font-size: 0.8125rem; /* 13px — "Totenbeschwörer" muss in die feste Kachelbreite passen */
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}
.header__nav-class img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.header__nav-dropdown__menu a.header__nav-class:hover,
.header__nav-dropdown__menu a.header__nav-class.active {
    border-color: var(--red-glow, rgba(165, 9, 5, 0.35));
}
/* Klassenmotiv im Hintergrund (--tile-bg aus layout.php): abgedunkelt, beim Hover
   deutlicher. Eigene Ebene (::before, z-index -1 in isolierter Kachel) — Icon und
   Name bleiben darueber. Das Bild haengt nur am GEOEFFNETEN Menue (Hover/Fokus bzw.
   mobil .is-open), sonst wuerden die 8 Motive auf jeder Seite mitgeladen. */
.header__nav-dropdown__menu a.header__nav-class {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.header__nav-class::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-position: center 22%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.28;
    filter: brightness(0.6) saturate(0.85);
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.3s ease;
}
@media (min-width: 1121px) {
    .header__nav-dropdown:hover .header__nav-class::before,
    .header__nav-dropdown:focus-within .header__nav-class::before {
        background-image: var(--tile-bg);
    }
}
.header__nav-dropdown.is-open .header__nav-class::before {
    background-image: var(--tile-bg);
}
.header__nav-class:hover::before,
.header__nav-class:focus-visible::before,
.header__nav-class.active::before {
    opacity: 0.62;
    filter: brightness(0.85) saturate(1);
    transform: scale(1.06);
}
.header__nav-class span {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Auf dem aufgehellten Motiv waere die rote Hover-/Aktiv-Schrift der Untermenue-
   Eintraege kaum lesbar: bei den Kacheln weiss, das Hervortreten uebernehmen das
   hellere Motiv und der rote Rahmen. */
.header__nav-dropdown__menu a.header__nav-class:hover,
.header__nav-dropdown__menu a.header__nav-class:focus-visible,
.header__nav-dropdown__menu a.header__nav-class.active {
    color: #fff;
    background: transparent;
}
@media (prefers-reduced-motion: reduce) {
    .header__nav-class::before { transition: none; }
    .header__nav-class:hover::before,
    .header__nav-class:focus-visible::before,
    .header__nav-class.active::before { transform: none; }
}
/* "Alle Guides" am Ende des Guides-Menues abgesetzt */
.header__nav-dropdown__menu a.header__nav-dropdown__all {
    margin-top: 0.3rem;
    border-top: 1px solid var(--border, #2a2a35);
    border-radius: 0 0 4px 4px;
}
/* Akkordeon-Knopf (header-classic.js) — nur im Hamburger-Menue sichtbar */
.header__nav-expander {
    display: none;
}
/* Mittig unter dem Menuepunkt aufklappen (Datenbank: die mittlere Spalte steht unter
   "Datenbank"). Nur Desktop — mobil ist das Menue ein statischer Block. Die
   Einblend-Bewegung (translateY) steckt mit im selben transform. */
@media (min-width: 1121px) {
    .header__nav-dropdown--center .header__nav-dropdown__menu {
        left: 50%;
        right: auto;
        transform: translate(-50%, -4px);
    }
    .header__nav-dropdown--center:hover .header__nav-dropdown__menu,
    .header__nav-dropdown--center:focus-within .header__nav-dropdown__menu {
        transform: translate(-50%, 0);
    }
    /* .header__nav-Praefix: muss die spaetere .is-dismissed-Regel (gleiche
       Spezifitaet ohne Praefix) schlagen, sonst springt das Menue beim Esc zur Seite. */
    .header__nav .header__nav-dropdown--center.is-dismissed .header__nav-dropdown__menu {
        transform: translate(-50%, -4px);
    }
}
/* Menues setzen an der Unterkante der Sticky-Leiste an (Wunsch 11.09.2026), nicht
   unter dem niedrigeren, vertikal zentrierten Menuepunkt. Die Leiste ist border-box
   (64px inkl. 1px Trennlinie) — ihre Mitte liegt bei 31.5px, darum +0.5px: das Menue
   beginnt genau an der Unterkante (64px). Ohne eigene obere Rahmenlinie bildet die
   Trennlinie der Leiste die Oberkante des Menues: ein Strich statt zwei.
   Hover-Bruecke ueber die Luecke zwischen Menuepunkt und Leisten-Unterkante: als
   ::after am Menuepunkt selbst (nur so breit wie der Punkt). NICHT als ::before am
   Menue — das ist so breit wie das Menue und lag unter den Nachbarpunkten: von Home
   nach rechts zu Builds blieb Home offen und Builds ging nicht auf. */
@media (min-width: 1121px) {
    .header__nav .header__nav-dropdown__menu {
        top: calc(50% + var(--header-height) / 2 + 0.5px);
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .header__nav .header__nav-dropdown::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: calc((var(--header-height) - 100%) / 2 + 1px);
    }
}
/* Esc schliesst ein per Hover/Fokus offenes Menue (header-classic.js) */
@media (min-width: 1121px) {
    .header__nav-dropdown.is-dismissed .header__nav-dropdown__menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
    }
}

/* ── Benutzermenue (Profil-Button mit Hover-Dropdown) ─────────────────────
   Nutzt dieselbe Hover-/:focus-within-Mechanik wie .header__nav-dropdown. */
.header__auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.header__user-menu {
    position: relative;
    /* Flex statt block: als Block-Wrapper erzeugt der inline-flex-Toggle einen
       Zeilenkasten mit Unterlaenge — der Button saesse dann 1-2px zu hoch. */
    display: flex;
    align-items: center;
}
/* Hoehe auf Sprach-Switcher/Support-Herz getrimmt (26px): der Avatar ist hoeher
   als die Textzeile, das Standard-Button-Padding wuerde den Toggle aufblasen.
   Der .header__auth-Prefix ist noetig, weil components.css nach main.css laedt
   und .btn dort erneut mit padding: 0.5rem 1rem definiert — ein Selektor aus nur
   einer Klasse wuerde dagegen verlieren. */
.header__auth .header__user-menu__toggle {
    padding: 0.2rem 0.7rem;
    gap: 0.4rem;
    border-radius: 6px; /* wie Sprach-Switcher + Support-Herz (.btn waere 4px) */
}
/* Ein Anmelden-Button statt Anmelden + Registrieren: Personen-Symbol + Text,
   Hoehe wie Sprach-Switcher/Support-Herz. */
.header__auth .header__login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    /* btn--primary hat keinen Rahmen — 1px in Buttonfarbe haelt die Hoehe
       gleich mit Sprach-Switcher/Spende (beide 1px Rahmen). */
    border: 1px solid var(--red, #a50905);
    border-radius: 6px;
    white-space: nowrap;
}
/* Im Anmelden-Formular: sichtbarer Weg zur Registrierung (ersetzt den roten
   Registrieren-Button im Header) */
.auth-modal__switch {
    margin: 1rem 0 0;
    font-size: 0.88rem;
    text-align: center;
    color: var(--text-secondary, #7a7870);
}
.auth-modal__switch-link {
    color: var(--red-bright, #d40b06);
    font-weight: 600;
    text-decoration: none;
}
.auth-modal__switch-link:hover,
.auth-modal__switch-link:focus-visible {
    text-decoration: underline;
}
/* Voll rot erst beim Aufklappen (Hover/Focus), nicht im Ruhezustand */
.header__user-menu:hover .header__user-menu__toggle,
.header__user-menu:focus-within .header__user-menu__toggle {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    border-color: var(--red);
    color: #fff;
}
.header__user-menu:hover .header__nav-dropdown__caret,
.header__user-menu:focus-within .header__nav-dropdown__caret {
    transform: rotate(180deg);
}
/* Auf dem roten Button wuerde der rote Standard-Badge verschwinden */
.header__user-menu:hover .header__notif-badge,
.header__user-menu:focus-within .header__notif-badge {
    background: #fff;
    color: var(--red-dark);
}

/* Avatar-Kreis — Fallback ist die Initiale (Projekt-Konvention, kein Platzhalterbild) */
.header__user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
}
.header__user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.header__user-avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    background: var(--bg-panel);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.header__user-menu__panel {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 230px;
    padding: 0.35rem;
    background: #0d0f14;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    z-index: 200;
}
.header__user-menu:hover .header__user-menu__panel,
.header__user-menu:focus-within .header__user-menu__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header__user-menu__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem 0.7rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.35rem;
}
.header__user-menu__ident {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.header__user-menu__name {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header__user-menu__public {
    font-size: 0.75rem;
    color: var(--text-dimmed);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.1s;
}
.header__user-menu__public:hover {
    color: var(--red-bright);
    text-decoration: underline;
}

.header__user-menu__group a {
    display: block;
    padding: 0.5rem 0.85rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}
.header__user-menu__group a:hover {
    background: rgba(165, 9, 5, 0.15);
    color: #ff1a14;
}
/* Abgesetzte Gruppen (Admin, Abmelden) */
.header__user-menu__group--sep {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-color);
}

/* Mobile: Dropdown aufgeklappt als Liste statt Overlay (Cutoff wie Hamburger-Menue) */
@media (max-width: 1120px) {
    .header__nav-dropdown__menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: #1d1f27; /* Untermenue-Zeilen etwas heller als das Panel */
        padding: 0;
        margin: 0;
    }
    .header__nav-dropdown__caret {
        display: none;
    }

    /* Dropdown-Toggles (Builds, LoH) linksbuendig wie die uebrigen Nav-Links */
    .header__nav a.header__nav-loh,
    .header__nav a.header__nav-dropdown__toggle {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.35rem;
    }

    /* Steuerungs-Sektion: Versions-Umschalter unten im aufgeklappten Menue */
    .header__mobile-controls {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding-top: 0.85rem;
        border-top: 1px solid var(--border-color);
    }
    .header__mobile-controls__label {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-secondary, #7a7870);
        text-align: center;
    }
    .d4-version-switcher--mobilemenu {
        margin-left: 0;
        width: 100%;
        font-size: 0.85rem;
    }
    .d4-version-switcher--mobilemenu .d4-version-switcher__opt {
        flex: 1 1 0;
        text-align: center;
        padding: 0.6rem 0.4rem;
    }

    /* Untermenue-Eintraege eingerueckt (ohne rote Linie), etwas kompakter */
    .header__nav-dropdown__menu a {
        text-align: left;
        padding: 0.5rem 1rem 0.5rem 2rem;
        font-size: 0.9375rem; /* 15px wie auf dem Desktop */
        color: var(--text-secondary, #b8b5ad);
    }
    /* Datenbank-Menue mobil: zwei Spalten halten die lange Liste kurz */
    .header__nav-dropdown__menu--cols {
        padding: 0;
        gap: 0;
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .header__nav-dropdown__group {
        /* Linie + Text buendig mit den eingerueckten Eintraegen (2rem links) */
        margin: 0 1rem 0.2rem 2rem;
        padding: 0.55rem 0 0.3rem;
    }
    /* Builds-Menue mobil: Klassen-Raster ueber den Links, vier Kacheln pro Reihe */
    .header__nav-dropdown__menu--builds {
        grid-template-columns: 1fr;
        width: auto;
        padding: 0;
        gap: 0;
    }
    .header__nav-classes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 0.25rem 1rem 0.5rem 2rem;
    }
    .header__nav-dropdown__menu a.header__nav-class {
        padding: 0.5rem 0.2rem;
        font-size: 0.72rem;
    }
    /* Akkordeon: Toggle-Link | Pfeil-Knopf in einer Zeile, Untermenue darunter und
       nur offen mit .is-open. Ohne JS fehlt --accordion, die Menues bleiben offen. */
    .header__nav--accordion .header__nav-dropdown {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .header__nav--accordion .header__nav-dropdown > .header__nav-dropdown__menu {
        grid-column: 1 / -1;
    }
    .header__nav--accordion .header__nav-dropdown:not(.is-open) > .header__nav-dropdown__menu {
        display: none;
    }
    .header__nav-expander {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        padding: 0;
        background: none;
        border: 0;
        border-left: 1px solid var(--border-color, #2a2a35);
        color: var(--text-secondary, #7a7870);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .header__nav-expander svg {
        transition: transform 0.15s ease;
    }
    .header__nav-dropdown.is-open > .header__nav-expander {
        color: var(--text-primary, #e0ddd5);
    }
    .header__nav-dropdown.is-open > .header__nav-expander svg {
        transform: rotate(180deg);
    }

    /* Benutzermenue: Hover ist auf Touch nicht bedienbar — im Hamburger-Panel
       liegt das Menue darum dauerhaft offen als flache Liste. */
    .header__auth {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
    }
    .header__user-menu {
        flex: 1 1 100%;
        /* Panel ist hier static — muss unter den Toggle, nicht daneben */
        flex-direction: column;
        align-items: stretch;
    }
    .header__user-menu__toggle {
        width: 100%;
        justify-content: center;
    }
    .header__user-menu__panel {
        /* Das ganze .header__menu ist bis zum Oeffnen display:none — das Panel
           darf hier also dauerhaft sichtbar sein. */
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin-top: 0.4rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .header__user-menu__head {
        justify-content: center;
        padding: 0.5rem 0 0.6rem;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }
    .header__user-menu__group a {
        text-align: center;
        padding: 0.55rem 1rem;
        font-size: 0.92rem;
        color: var(--text-secondary, #b8b5ad);
    }
    .header__user-menu__group--sep {
        margin-top: 0;
        padding-top: 0;
    }
    .header__user-menu .header__nav-dropdown__caret {
        display: none;
    }
}

/* --- Build-Planner: Kopfband ------------------------------------------------
   Flaches Band statt zentriertem Hero. Die Klassen-Karten darunter sind die
   Handlungsaufforderung — hier steht bewusst kein konkurrierender Button, nur
   die drei Schritte, die erklaeren was nach dem Klick passiert. */
.planner-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.375rem;
    margin-bottom: 1.75rem;
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg);
}

.planner-hero__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 190% at 88% 50%, rgba(165, 9, 5, 0.34) 0%, transparent 68%);
}

.planner-hero__text {
    position: relative;
    flex: 1;
    min-width: 0;
}

.planner-hero__badge {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--red-bright);
    background: rgba(212, 11, 6, 0.12);
    border: 1px solid rgba(212, 11, 6, 0.3);
    padding: 2px 8px;
    border-radius: var(--border-radius);
}

.planner-hero__title {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    line-height: 1.15;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.3rem;
    text-shadow: 0 0 30px rgba(165, 9, 5, 0.4);
}

.planner-hero__subtitle {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.planner-hero__steps {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.planner-hero__step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.planner-hero__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--red-bright);
    background: rgba(212, 11, 6, 0.12);
    border: 1px solid rgba(212, 11, 6, 0.3);
    border-radius: 50%;
}

@media (max-width: 1100px) {
    /* Schritte unter den Text statt daneben — nebeneinander wird beides zu eng. */
    .planner-hero {
        flex-wrap: wrap;
        gap: 0.9rem;
    }
    .planner-hero__text,
    .planner-hero__steps {
        flex: 1 1 100%;
    }
    .planner-hero__steps {
        flex-wrap: wrap;
        gap: 0.65rem 1rem;
    }
}

@media (max-width: 768px) {
    .planner-hero {
        padding: 0.9rem 1rem;
    }
    .planner-hero__title {
        font-size: 1.3rem;
    }
    .planner-hero__subtitle {
        font-size: 0.9rem;
    }
}

/* --- Build-Planner: Info-Bereiche unter dem Klassenraster ------------------- */
.planner-info__intro {
    max-width: 74ch;
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.planner-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.planner-feature {
    padding: 1.1rem 1.15rem 1.2rem;
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg);
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.planner-feature:hover {
    border-color: rgba(212, 11, 6, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212, 11, 6, 0.15);
}

.planner-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.7rem;
    color: var(--red-bright);
    background: rgba(212, 11, 6, 0.12);
    border: 1px solid rgba(212, 11, 6, 0.3);
    border-radius: 8px;
}

.planner-feature__title {
    margin: 0 0 0.35rem;
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-primary);
}

.planner-feature__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Aktivitaets-Marker — Chip-Flaeche wie in der Builds-Werkzeugleiste */
.planner-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.planner-tag {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.planner-tag--type {
    font-weight: 700;
    color: var(--red-bright);
    background: rgba(212, 11, 6, 0.12);
    border-color: rgba(212, 11, 6, 0.3);
}

/* FAQ — dieselbe Klapp-Machart wie der SEO-Block auf /builds */
.planner-faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planner-faq__item {
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg);
}

.planner-faq__q {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}

.planner-faq__q::-webkit-details-marker {
    display: none;
}

.planner-faq__caret {
    margin-left: auto;
    flex: none;
    color: var(--red-bright);
    transition: transform 0.18s ease;
}

.planner-faq__item[open] .planner-faq__caret {
    transform: rotate(180deg);
}

.planner-faq__a {
    margin: 0;
    padding: 0 1.1rem 1rem;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 1024px) {
    .planner-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .planner-features {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Interner Verweis am Fuss jeder Feature-Karte */
.planner-feature__link,
.planner-tags__link {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    margin-top: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--red-bright);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.planner-feature__link svg {
    flex: none;
    opacity: 0.65;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.planner-feature__link:hover {
    color: #ff1a14;
}

.planner-feature__link:hover svg {
    opacity: 1;
    transform: translateX(2px);
}

.planner-tags__link {
    margin: 0 0 0 0.35rem;
    align-self: center;
}

/* --- Wiederverwendbarer Seiten-Kopf ----------------------------------------
   Flaches Band in der Kartenhuelle: Badge, H1, Unterzeile, optional eine
   Notizzeile, rechts Verweise. Dieselbe Machart wie der Planer-Kopf; gedacht
   fuer Listen- und Werkzeugseiten ohne eigenes Artwork. */
.page-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.375rem;
    margin-bottom: 1.75rem;
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg);
}

/* Hero mit Konzeptzeichnung im Hintergrund (z. B. FAQ) — Motiv rechts, Text links auf Schleier */
.page-hero--art { isolation: isolate; min-height: 220px; background: #0a0a0f; }
.page-hero__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.1) saturate(1.05); }
.page-hero--art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.85) 30%, rgba(10,10,15,0.4) 55%, rgba(10,10,15,0.1) 80%, rgba(10,10,15,0.25) 100%); pointer-events: none; }
.page-hero--art .page-hero__glow { display: none; }
@media (max-width: 768px) {
    .page-hero--art { padding-top: 6rem; }
    .page-hero--art::after { background: linear-gradient(180deg, rgba(10,10,15,0.3) 0%, rgba(10,10,15,0.9) 50%, rgba(10,10,15,0.97) 100%); }
}

.page-hero__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 190% at 88% 50%, rgba(165, 9, 5, 0.34) 0%, transparent 68%);
}

/* Optionales Motiv links — z. B. das Boss-Bild auf den Detailseiten. */
.page-hero__icon {
    position: relative;
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(196, 162, 78, 0.25);
}

.page-hero__text {
    position: relative;
    flex: 1;
    min-width: 0;
}

.page-hero__badge {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--red-bright);
    background: rgba(212, 11, 6, 0.12);
    border: 1px solid rgba(212, 11, 6, 0.3);
    padding: 2px 8px;
    border-radius: var(--border-radius);
}

.page-hero__title {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    line-height: 1.15;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.3rem;
    text-shadow: 0 0 30px rgba(165, 9, 5, 0.4);
}

.page-hero__subtitle {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Sachhinweis — vorher rot-kursiv und damit lauter als die Ueberschrift. */
.page-hero__note {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-dimmed);
}

.page-hero__actions {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page-hero__actions .btn {
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    justify-content: center;
    white-space: nowrap;
    background: rgba(21, 22, 26, 0.6);
    border: 1px solid var(--border-color);
}

@media (max-width: 900px) {
    .page-hero {
        flex-wrap: wrap;
        gap: 0.9rem;
        padding: 0.9rem 1rem;
    }
    .page-hero__text,
    .page-hero__actions {
        flex: 1 1 100%;
    }
    .page-hero__actions {
        flex-direction: row;
    }
    .page-hero__actions .btn {
        flex: 1;
    }
    .page-hero__title {
        font-size: 1.3rem;
    }
    .page-hero__icon {
        width: 52px;
        height: 52px;
    }
}

/* BluePost-Variante des Seiten-Kopfs: die Seite ist durchgehend blau kodiert
   (Badges, Zeilen, Modal), deshalb hier Blau statt Rot. */
.page-hero--blue {
    border-color: rgba(74, 144, 217, 0.28);
}

.page-hero--blue .page-hero__glow {
    background: radial-gradient(60% 190% at 88% 50%, rgba(74, 144, 217, 0.28) 0%, transparent 68%);
}

.page-hero--blue .page-hero__badge {
    color: #6fb0e8;
    background: rgba(74, 144, 217, 0.12);
    border-color: rgba(74, 144, 217, 0.35);
}

.page-hero--blue .page-hero__title {
    color: #6fb0e8;
    text-shadow: 0 0 30px rgba(74, 144, 217, 0.35);
}

/* ============================================================
   Anmelde-Formulare im neuen Seiten-Design
   /login, /register, /forgot-password, /reset-password teilen sich
   .auth-container. Bewusst schmal — ein Formular ueber die volle
   Seitenbreite waere schlechter zu lesen, nicht besser.
   ============================================================ */
.auth-container {
    max-width: 440px;
    margin: 3rem auto 4rem;
}
/* Der alte zentrierte Titel steht jetzt in der Karte */
.auth-container > h2 { display: none; }

.auth-card {
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg, 8px);
    padding: 1.25rem 1.5rem 1.5rem;
}

.auth-card__head {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding-bottom: 0.7rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--border-color, #252830);
}

.auth-card .form-group { margin-bottom: 1rem; }
.auth-card label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.auth-card .form-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-panel, #252830);
    border-radius: var(--border-radius, 6px);
    color: var(--text-primary, #e0ddd5);
    font-size: 0.95rem;
}
.auth-card .form-input:focus {
    border-color: rgba(196, 162, 78, 0.45);
    outline: none;
}
.auth-card .form-input::placeholder { color: var(--text-dimmed, #7a7870); }
.auth-card .btn--primary { margin-top: 0.25rem; }

.auth-card .alert {
    border-radius: var(--border-radius, 6px);
    font-size: 0.9rem;
}

.auth-footer {
    margin-top: 1.25rem;
    color: var(--text-dimmed);
}
.auth-footer a {
    color: var(--red-bright, #d40b06);
    font-weight: 600;
}

/* ============================================================
   Rechtstexte im neuen Seiten-Design
   Inhaltsverzeichnis links (aus den <h2> gebaut), Text rechts in der
   Kartenhuelle. Die Textspalte bleibt auf Lesebreite begrenzt — ein
   Rechtstext ueber 1400px waere schlechter lesbar, nicht besser.
   ============================================================ */
.legal-page {
    max-width: none;
    margin: 0;
    padding: 0;
}
.legal-page__title { display: none; }

.legal-cols {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}
.legal-cols > .legal-page__content { max-width: none; min-width: 0; }

.legal-toc {
    position: sticky;
    top: calc(var(--header-height, 64px) + 24px);
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg, 8px);
    padding: 1rem 1.1rem;
    max-height: calc(100vh - var(--header-height, 64px) - 48px);
    overflow-y: auto;
}
.legal-toc__head {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color, #252830);
}
.legal-toc__list { list-style: none; margin: 0; padding: 0; }
.legal-toc__list a {
    display: block;
    padding: 6px 0 6px 12px;
    color: var(--text-secondary, #a09d94);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.legal-toc__list a:hover {
    color: var(--text-primary, #e0ddd5);
    border-left-color: var(--red-bright, #d40b06);
}

.legal-page__content {
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(196, 162, 78, 0.18);
    border-radius: var(--border-radius-lg, 8px);
    padding: 1.5rem 1.75rem;
    color: var(--text-secondary, #a09d94);
}
.legal-page__content h2 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 2.25rem 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color, #252830);
    scroll-margin-top: calc(var(--header-height, 64px) + 24px);
}
.legal-page__content h3 { color: var(--text-primary, #e0ddd5); }
.legal-page__content a { color: var(--red-bright, #d40b06); }

/* Ueber-uns-Seite: Verweise unter den Listenpunkten als Chip-Reihe. */
.about-page__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.about-page__links a {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: var(--border-radius, 4px);
    font-size: 0.8rem;
    color: var(--text-secondary, #a09d94);
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.about-page__links a:hover {
    color: var(--text-primary, #e0ddd5);
    border-color: var(--border-hover, #3a3a45);
}

@media (max-width: 1024px) {
    .legal-cols { grid-template-columns: minmax(0, 1fr); }
    .legal-toc { position: static; max-height: none; }
}

/* --- Planer-Kacheln mit Bildbeleg -----------------------------------------
   Zweigeteilt: links ein Detailausschnitt aus genau der Ansicht, die der Text
   beschreibt, rechts Titel, Beschreibung und Verweis. Kacheln ohne Ausschnitt
   (z. B. die S12-Season-Mechanik) behalten das Symbol-Layout. */
.planner-feature--shot {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.planner-feature__shot {
    flex: 0 0 38%;
    max-width: 38%;
    position: relative;
    background: #0d0e12;
    border-right: 1px solid rgba(196, 162, 78, 0.14);
}
.planner-feature__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Der Ausschnitt soll die Kachel tragen, nicht dominieren */
    opacity: 0.92;
    transition: opacity 0.18s, transform 0.35s;
}
/* Weicher Verlauf zur Textseite, damit die Kante nicht schneidet */
.planner-feature__shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 15, 0.35) 0%, transparent 35%, rgba(10, 10, 15, 0.55) 100%);
    pointer-events: none;
}
.planner-feature--shot:hover .planner-feature__shot img {
    opacity: 1;
    transform: scale(1.04);
}

.planner-feature--shot .planner-feature__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.1rem 1.15rem 1.2rem;
}

@media (max-width: 640px) {
    .planner-feature--shot { flex-direction: column; }
    .planner-feature__shot {
        flex: 0 0 auto;
        max-width: none;
        height: 130px;
        border-right: 0;
        border-bottom: 1px solid rgba(196, 162, 78, 0.14);
    }
    .planner-feature__shot::after {
        background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 15, 0.55) 100%);
    }
}

/* ── Konto-Menü: Ergänzungen für das Mega-Menü ───────────────────────────── */

/* Der Toggle trägt jetzt den Anzeigenamen statt des Wortes "Profil" — lange
   Namen dürfen die Leiste nicht auseinanderziehen. */
.header__user-menu__label {
    max-width: 11ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menüzeilen mit Icon: aus block wird flex, damit Icon und Zähler sitzen. */
.header__user-menu__group a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.header__user-menu__icon {
    flex: none;
    color: var(--text-dimmed);
}
.header__user-menu__group a:hover .header__user-menu__icon {
    color: inherit;
}

/* Zähler am rechten Rand einer Menüzeile (ungelesene Antworten). */
.header__user-menu__count {
    margin-left: auto;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--gold);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    text-align: center;
}

/* Kennzahlen-Reihe: drei anklickbare Kacheln direkt unter dem Namen. */
.header__user-menu__stats {
    display: flex;
    gap: 0.35rem;
    padding: 0 0.35rem 0.55rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}
.header__user-menu__stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.45rem 0.25rem;
    border-radius: var(--border-radius);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-panel);
    text-decoration: none;
    transition: border-color var(--transition-fast);
}
.header__user-menu__stat:hover {
    border-color: rgba(212, 11, 6, 0.5);
}
.header__user-menu__stat strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}
.header__user-menu__stat span {
    font-size: 0.68rem;
    color: var(--text-dimmed);
    white-space: nowrap;
}

.header__user-menu__logout {
    color: var(--red-bright) !important;
}

@media (max-width: 1120px) {
    /* Im Hamburger-Panel liegt das Menü flach offen — der Name darf hier lang sein. */
    .header__user-menu__label {
        max-width: none;
    }
    .header__user-menu__stats {
        padding-bottom: 0.7rem;
    }
}

/* ── Typeahead-Trefferliste der Datenbanksuche ────────────────────────────
   Aus database.css hierher gezogen: die Suche steckt jetzt auch im Mega-Menü
   und darf dort nicht davon abhängen, dass database.css geladen ist.
   Die Sidebar-Sonderfälle (.db-sidebar__search …) bleiben in database.css. */

.db-hub__search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #13151a;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    max-height: 420px;
    overflow-y: auto;
    z-index: 60;
}

.db-hub__search-group {
    padding: 0.5rem 0.9rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, var(--text-dimmed));
    border-top: 1px solid var(--border-color);
}

.db-hub__search-group:first-child {
    border-top: none;
}

.db-hub__search-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.db-hub__search-item:hover {
    background: rgba(196, 162, 78, 0.08);
}

.db-hub__search-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.db-hub__search-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-hub__search-cat {
    color: var(--text-muted, var(--text-dimmed));
    font-size: 0.72rem;
    flex-shrink: 0;
}

.db-hub__search-msg {
    padding: 0.75rem 0.9rem;
    margin: 0;
    color: var(--text-muted, var(--text-dimmed));
    font-size: 0.85rem;
}

/* ── Brotkrumen-Zeile (geteilte Komponente) ───────────────────────────────
   Das Partial `db-breadcrumb-row.php` wird inzwischen auch außerhalb von
   /database eingesetzt (Guide- und News-Editor). Die Grundformatierung gehört
   deshalb hierher — sonst fällt die Zeile dort auf eine nummerierte Liste
   zurück. database.css und guides-public.css laden später und behalten ihre
   seitenspezifischen Abweichungen (Breite, Abstände). */

.db-breadcrumbs {
    max-width: var(--max-width, 1280px);
    margin: -1.5rem auto 0.5rem;
    padding: 0.25rem 1rem 0;
    font-size: 0.85rem;
}
.db-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}
.db-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-dimmed, #7a7870);
}
.db-breadcrumbs li:not(:last-child)::after {
    content: '›';
    margin-left: 0.25rem;
    color: var(--text-dimmed, #7a7870);
}
.db-breadcrumbs a {
    color: var(--text-dimmed, #7a7870);
    text-decoration: none;
}
.db-breadcrumbs a:hover {
    color: var(--red-bright, #d40b06);
    text-decoration: underline;
}
.db-breadcrumbs li:last-child a {
    color: var(--text-primary, #e0ddd5);
    pointer-events: none;
}

/* Mobil trägt main.main-content nur 20px Innenabstand statt 32px — mit dem
   -24px-Zug der Krumen-Zeile ergäbe das -4px, die Zeile schöbe sich also unter
   den Kopf. -12px hält den Abstand auch hier bei 8px. Gilt für alle drei
   Krumen-Varianten (Datenbank/Seiten, Content-Hub, Horadrischer Würfel). */
@media (max-width: 768px) {
    .db-breadcrumbs,
    .chub-breadcrumbs,
    .hcube-crumbs {
        margin-top: -12px;
    }
}