/* ================================================
   QUIZSTAGE: Globale Styles mit THEME SYSTEM
   ================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap");

/* ================================================
      THEME CSS VARIABLEN
      ================================================ */

:root {
    /* DEFAULT: Dark Theme */
    --primary-color: #7c3aed;
    --primary-light: #c084fc;
    --primary-dark: #6d28d9;
    --secondary-color: #8b5cf6;
    --accent-color: #a78bfa;
    --bg-primary: #05010d;
    --bg-secondary: #0a0219;
    --bg-tertiary: #130a2a;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: rgba(139, 92, 246, 0.2);
    --glow-color: #4c1d95;
    --gold: #fbbf24;
    --red: #dc2626;
    --bg-gradient-1: rgba(123, 31, 162, 0.15);
    --bg-gradient-2: rgba(106, 13, 173, 0.15);
    /* Barrierefreiheit: Schrift auf Primary-Flaechen (--on-primary),
       Verlaufsende der Knoepfe (--primary-grad-end) und Fokusrahmen
       (--focus-color). Jedes Theme setzt alle drei als feste Werte -
       var()-Verweise wuerden am html-Element aufgeloest und bei einem
       Theme nur auf body falsch erben. Geprueft: Schrift >= 4.5:1 gegen
       Start und Ende des Verlaufs, Fokus >= 3:1 gegen bg-primary und
       bg-secondary. */
    --on-primary: #ffffff;
    --primary-grad-end: #6d28d9;
    --focus-color: #c084fc;
}

/* NEON THEME */
html.theme-neon,
body.theme-neon {
    --primary-color: #ec4899;
    --primary-light: #f472b6;
    --primary-dark: #be185d;
    --secondary-color: #06b6d4;
    --accent-color: var(--gold);
    --bg-primary: #0f0a1a;
    --bg-secondary: #1a0525;
    --bg-tertiary: #2d0740;
    --text-primary: #fef08a;
    --text-secondary: #e0e7ff;
    --text-muted: #d8b4fe;
    --border-color: rgba(236, 72, 153, 0.3);
    --glow-color: #ec4899;
    --bg-gradient-1: rgba(236, 72, 153, 0.15);
    --bg-gradient-2: rgba(6, 182, 212, 0.15);
    /* Helles Pink: dunkle Schrift, Verlauf endet heller als primary-dark */
    --on-primary: #0b0b12;
    --primary-grad-end: #e5408f;
    --focus-color: #f472b6;
}

/* CANDY THEME - "Midnight Berry" Edition 🍭 */
html.theme-candy,
body.theme-candy {
    --primary-color: #ff7eb9; /* Sanftes Rosa */
    --primary-light: #ffb1d8; /* Pastell Pink */
    --primary-dark: #d4428a; /* Beeren-Ton */
    --secondary-color: #7afcff; /* Helles Türkis (Zuckerwatte-Kontrast) */
    --accent-color: #ffb1d8;

    /* Hintergrund: Tiefes Dunkelblau-Violett statt Neon-Pink */
    --bg-primary: #120b1e;
    --bg-secondary: #1a1229;
    --bg-tertiary: #251a3a;

    --text-primary: #ffffff;
    --text-secondary: #ffdeeb;
    --text-muted: #a78bfa;

    --border-color: rgba(255, 126, 185, 0.3);
    --glow-color: rgba(255, 126, 185, 0.5);

    /* Weiche, neblige Verläufe */
    --bg-gradient-1: rgba(255, 126, 185, 0.1);
    --bg-gradient-2: rgba(122, 252, 255, 0.08);
    --on-primary: #0b0b12;
    --primary-grad-end: #d4428a;
    --focus-color: #ffb1d8;
}

/* OCEAN THEME */
html.theme-ocean,
body.theme-ocean {
    --primary-color: #0369a1;
    /* primary-light, accent und bg-tertiary fuer Kontrast >= 4.5:1
       angepasst (vorher #0ea5e9 / #10b981 / #187a96) */
    --primary-light: #38bdf8;
    --primary-dark: #075985;
    --secondary-color: #06b6d4;
    --accent-color: #34d399;
    --bg-primary: #0c1e2e;
    --bg-secondary: #164863;
    --bg-tertiary: #0f3d57;
    --text-primary: #e0f2fe;
    --text-secondary: #cffafe;
    --text-muted: #7dd3fc;
    --border-color: rgba(6, 182, 212, 0.3);
    --glow-color: #0369a1;
    --bg-gradient-1: rgba(3, 105, 161, 0.15);
    --bg-gradient-2: rgba(6, 182, 212, 0.15);
    --on-primary: #ffffff;
    --primary-grad-end: #075985;
    --focus-color: #7dd3fc;
}

/* SLATE THEME */
html.theme-slate,
body.theme-slate {
    --primary-color: #94a3b8;
    --primary-light: #cbd5e1;
    --primary-dark: #64748b;
    --secondary-color: #e2e8f0;
    --accent-color: #f1f5f9;
    --bg-primary: #0f1117;
    --bg-secondary: #1e2028;
    --bg-tertiary: #2a2d37;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: rgba(148, 163, 184, 0.25);
    --glow-color: #94a3b8;
    --bg-gradient-1: rgba(148, 163, 184, 0.08);
    --bg-gradient-2: rgba(226, 232, 240, 0.05);
    --on-primary: #0b0b12;
    --primary-grad-end: #7c8ba1;
    --focus-color: #cbd5e1;
}

/* HACKER THEME */
html.theme-hacker,
body.theme-hacker {
    --primary-color: #10b981;
    --primary-light: #6ee7b7;
    --primary-dark: #059669;
    --secondary-color: #14b8a6;
    --accent-color: #20c997;
    --bg-primary: #0a1628;
    --bg-secondary: #0f2e3d;
    --bg-tertiary: #164e52;
    /* Schrift und Symbole stehen in Weiss, nicht im giftigen Gruen:
       #00ff00 auf dunklem Grund flimmert beim Lesen, und die Icons
       erben ihre Farbe vom Text. Gruen bleibt das Theme trotzdem, es
       steckt jetzt in Rahmen, Knoepfen und dem Schimmer. */
    --text-primary: #ffffff;
    --text-secondary: #e2f5ef;
    --text-muted: #9fc7bb;
    --border-color: rgba(16, 185, 129, 0.4);
    --glow-color: #10b981;
    --bg-gradient-1: rgba(16, 185, 129, 0.15);
    --bg-gradient-2: rgba(20, 184, 166, 0.15);
    --on-primary: #0b0b12;
    --primary-grad-end: #059669;
    --focus-color: #6ee7b7;
}

html.theme-forest,
body.theme-forest {
    --primary-color: #2d6a4f;
    --primary-light: #52b788;
    --primary-dark: #1b4332;
    --secondary-color: #40916c;
    --accent-color: #95d5b2;
    --bg-primary: #081c15;
    --bg-secondary: #0f2b1f;
    --bg-tertiary: #1b4332;
    --text-primary: #d8f3dc;
    --text-secondary: #b7e4c7;
    --text-muted: #74c69d;
    --border-color: rgba(45, 106, 79, 0.4);
    --glow-color: #2d6a4f;
    --bg-gradient-1: rgba(45, 106, 79, 0.15);
    --bg-gradient-2: rgba(82, 183, 136, 0.1);
    --on-primary: #ffffff;
    --primary-grad-end: #1b4332;
    --focus-color: #74c69d;
}

html.theme-blood,
body.theme-blood {
    --primary-color: #b91c1c;
    --primary-light: #ef4444;
    --primary-dark: #7f1d1d;
    --secondary-color: #dc2626;
    --accent-color: #fca5a5;
    --bg-primary: #130606;
    --bg-secondary: #1f0a0a;
    --bg-tertiary: #2d1212;
    --text-primary: #fef2f2;
    --text-secondary: #fecaca;
    --text-muted: #f87171;
    --border-color: rgba(185, 28, 28, 0.4);
    --glow-color: #b91c1c;
    --bg-gradient-1: rgba(185, 28, 28, 0.15);
    --bg-gradient-2: rgba(220, 38, 38, 0.1);
    --on-primary: #ffffff;
    --primary-grad-end: #7f1d1d;
    --focus-color: #fca5a5;
}

/* BERRY THEME
   Vorher lagen primary, secondary und accent alle auf demselben Magenta,
   damit sahen Knoepfe, Rahmen und Akzente identisch aus und das Theme war
   vom Standard kaum zu unterscheiden. Jetzt tragen sich zwei echte Beeren
   gegenueber: Brombeere als Violett, Himbeere als Rot-Pink. */
html.theme-berry,
body.theme-berry {
    --primary-color: #9333ea;
    --primary-light: #d946ef;
    --primary-dark: #6b21a8;
    --secondary-color: #f43f5e;
    --accent-color: #fb7185;
    --bg-primary: #120418;
    --bg-secondary: #1c0a26;
    --bg-tertiary: #2a1038;
    --text-primary: #faf5ff;
    --text-secondary: #f0dcff;
    --text-muted: #c4a0e8;
    --border-color: rgba(217, 70, 239, 0.32);
    --glow-color: #9333ea;
    --bg-gradient-1: rgba(147, 51, 234, 0.16);
    --bg-gradient-2: rgba(244, 63, 94, 0.12);
    --on-primary: #ffffff;
    --primary-grad-end: #6b21a8;
    --focus-color: #e879f9;
}

/* APP GLOW THEME
   Gibt es nur fuer alle, die die App installiert haben. Tiefes
   Nachtblau mit Cyan und Pink, angelehnt an das Pfeil-Labyrinth. */
html.theme-app,
body.theme-app {
    --primary-color: #06b6d4;
    --primary-light: #67e8f9;
    --primary-dark: #0e7490;
    --secondary-color: #ec4899;
    --accent-color: #22d3ee;
    --bg-primary: #070b1f;
    --bg-secondary: #0d1530;
    --bg-tertiary: #152044;
    --text-primary: #f0f9ff;
    --text-secondary: #cfe8f7;
    --text-muted: #8fb3cc;
    --border-color: rgba(34, 211, 238, 0.28);
    --glow-color: #06b6d4;
    --bg-gradient-1: rgba(6, 182, 212, 0.16);
    --bg-gradient-2: rgba(236, 72, 153, 0.12);
    --on-primary: #ffffff;
    --primary-grad-end: #db2777;
    --focus-color: #67e8f9;
}

/* WOLKEN THEME
   Lila und Grau: die Farbe steckt im Licht, der Grund bleibt neutrales
   Anthrazit. Dazu gehoert der Hintergrundeffekt "wolken", der oben eine
   leuchtende Wolkendecke aufspannt. */
html.theme-wolken,
body.theme-wolken {
    --primary-color: #7c3aed;
    --primary-light: #a78bfa;
    --primary-dark: #5b21b6;
    --secondary-color: #8b8b9e;
    --accent-color: #c4b5fd;
    --bg-primary: #0e0e13;
    --bg-secondary: #17171f;
    --bg-tertiary: #22222d;
    --text-primary: #f4f4f7;
    --text-secondary: #d2d2dc;
    --text-muted: #9a9aab;
    --border-color: rgba(167, 139, 250, 0.28);
    --glow-color: #6d28d9;
    --bg-gradient-1: rgba(124, 58, 237, 0.18);
    --bg-gradient-2: rgba(148, 148, 168, 0.1);
    --on-primary: #ffffff;
    --primary-grad-end: #5b21b6;
    --focus-color: #c4b5fd;
}

/* HALLOWEEN THEME (bis 1.11.2026)
   Kuerbis-Orange und Kerzengelb auf fast schwarzem Grund, ganz ohne
   Lila. Gruen war vorher die zweite Farbe und hat sich im Nebel mit dem
   Orange zu Braun gemischt. Die Easter Eggs dazu stehen in halloween.js. */
html.theme-halloween,
body.theme-halloween {
    --primary-color: #f97316;
    --primary-light: #fb923c;
    --primary-dark: #c2410c;
    --secondary-color: #dc2626;
    --accent-color: #fbbf24;
    --bg-primary: #0b0807;
    --bg-secondary: #16100d;
    --bg-tertiary: #241914;
    --text-primary: #fff7ed;
    --text-secondary: #fed7aa;
    --text-muted: #c4a484;
    --border-color: rgba(249, 115, 22, 0.3);
    --glow-color: #f97316;
    --bg-gradient-1: rgba(249, 115, 22, 0.1);
    --bg-gradient-2: rgba(220, 38, 38, 0.08);
    --on-primary: #1a0b02;
    --primary-grad-end: #c2410c;
    --focus-color: #fdba74;
}

/* Strichicons statt Emoji. Sie nehmen Groesse und Farbe vom umgebenden
   Text, verhalten sich also wie ein Schriftzeichen und ziehen bei einem
   Theme-Wechsel mit. Emoji konnten beides nicht. */
.qs-i {
    /* Etwas groesser als 1em: Strichicons wirken leichter als Emoji, bei
       gleicher Kastengroesse saehen sie neben dem Text zu klein aus. */
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

* {
    box-sizing: border-box;
}

/* Kein seitliches Scrollen auf dem Handy. Scrollen darf nur html:
   Standen html und body beide auf 100 % Hoehe mit overflow-x: hidden,
   wurden beide zum Scrollbereich, und lange Seiten wie das Profil hatten
   zwei Scrollleisten nebeneinander. clip schneidet ab, ohne body zum
   Scrollbereich zu machen. */
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
body {
    width: 100%;
    overflow-x: clip;
}

/* 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;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 6px;
    border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-primary);
}

body {
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(
            circle at 20% 30%,
            var(--bg-gradient-1),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            var(--bg-gradient-2),
            transparent 40%
        );
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: "Plus Jakarta Sans", sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition:
        background-color 0.3s ease,
        background-image 0.3s ease,
        color 0.3s ease;
}

/* body ist ein Flex-Container. Seine Kinder duerfen deshalb von sich aus
   nicht schmaler werden als ihr laengstes unteilbares Stueck Inhalt - ein
   Wort wie "Datenschutzerklaerung" in einer grossen Ueberschrift macht so
   den ganzen Kasten breiter als das Handy. Und weil body zugleich
   overflow-x: hidden hat, wird der Ueberstand nicht scrollbar, sondern
   stillschweigend abgeschnitten. Darum hier ausdruecklich erlauben, dass
   die Kinder schrumpfen. */
body > * {
    min-width: 0;
}

.bg-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 50% -20%,
        var(--glow-color) 0%,
        transparent 50%
    );
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
    transition: background 0.3s ease;
}

/* ================================================
      NAVBAR
      ================================================ */

/* FLOATING NAV, bei Rückbau: width→100%, left→0, border-radius→0, top→0 */
nav {
    width: calc(100% - 80px);
    left: 40px;
    top: 12px;
    border-radius: 18px;
    background: var(--bg-secondary);
    /* Drei Spalten: Logo links, Menue exakt mittig, Aktionen rechts.
       Mit space-between wandert das Menue je nach Textlaenge hin und
       her, mit den gleich breiten Aussenspalten steht es still. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.6rem 1.5rem;
    position: fixed;
    z-index: 1000;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        border-radius 0.3s ease;
}

.nav-logo {
    font-weight: 800;
    font-size: 1.6rem;
    background: linear-gradient(
        135deg,
        var(--primary-light) 0%,
        var(--secondary-color) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    letter-spacing: -1px;
    z-index: 1001;
    transition: background 0.3s ease;
}

.beta-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    background: linear-gradient(
        135deg,
        var(--secondary-color),
        var(--primary-color)
    );
    color: var(--text-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
    z-index: 1001;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
}

/* Wird nicht mehr gebaut, steht aber noch in aelteren Seiten. */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Die Eintraege sitzen in einer eigenen Pille. Das trennt Navigation
   von Logo und Konto, ohne dass es dafuer Striche oder Kaesten
   braucht. */
.nav-menu {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-self: center;
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px;
}

.nav-item {
    position: relative;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 8px 16px;
    border-radius: 999px;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        background 0.25s ease;
}
/* Icons und Kopfzeile gibt es nur im Handy-Menue. */
.nav-ico,
.nav-mob-head,
.nav-mob-version {
    display: none;
}
.nav-item:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.nav-item.active {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.nav-item:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Changelog ist ein <button>, soll aber aussehen wie die Links
   daneben. */
.nav-item-btn {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    line-height: inherit;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: end;
}

.discord-btn,
.user-btn {
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--primary-grad-end) 100%
    );
    color: var(--on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    box-shadow: 0 4px 15px
        color-mix(in srgb, var(--glow-color) 60%, transparent);
    text-decoration: none;
    white-space: nowrap;
}
/* Angemeldet stehen rechts zwei Knoepfe nebeneinander: Bild und Name
   fuehren zum eigenen Profil, der schmale Knopf daneben klappt das
   Menue mit allem Uebrigen auf. */
.user-area {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px;
}

.user-menu-btn {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}
.user-menu-btn:hover {
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    color: var(--text-primary);
}
.user-menu-btn:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}
.user-menu-btn svg {
    width: 16px;
    height: 16px;
}

.user-btn {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-primary);
    padding: 0 6px 0 0;
    gap: 9px;
    max-width: 190px;
}
.user-btn:hover {
    color: var(--primary-light);
}
.user-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}
.user-btn img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}

.discord-btn:focus-visible,
.user-btn:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    /* Es ist ein <button>: ohne diese Zeilen malt der Browser seinen
       eigenen hellen Kasten mit Rahmen um die drei Striche. */
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    /* Die drei Striche sind zusammen nur 25x19 Pixel gross - mit dem
       Daumen trifft man das kaum. Der Knopf bekommt deshalb eine
       Trefferflaeche in Daumengroesse, ohne dass die Striche selbst
       groesser oder weiter auseinander werden. */
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 4px;
    border-radius: 4px;
}
.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 10px;
    transition: 0.3s;
}

/* User Dropdown Menü */
.user-menu {
    position: absolute;
    top: 55px;
    right: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: 14px;
    width: 140px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.2s ease-out;
}
.logout-item {
    color: #fb7185;
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
}
.logout-item:hover {
    background: rgba(251, 113, 133, 0.1);
}

.profile-item {
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}
.profile-item:hover {
    background: rgba(139, 92, 246, 0.1);
}

/* Notification-Bubble (wie Discord) */
.notif-bubble {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    /* #dc2626 statt #ef4444: weisse Ziffer 4.8:1 statt 3.8:1 */
    background: #dc2626;
    border: 2px solid var(--bg-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 5;
    pointer-events: none;
}
.notif-menu-count {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

@keyframes supportToastIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ================================================
      SPRACH-DROPDOWN
      ================================================ */

.lang-dropdown {
    position: relative;
    user-select: none;
}

.lang-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-color);
}

.lang-options {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    min-width: 100px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.lang-options.show {
    display: block;
    animation: slideIn 0.2s ease-out;
}

.lang-option {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-secondary);
}
.lang-option:hover {
    background: var(--border-color);
}
.lang-option:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Der Button, den du wahrscheinlich meinst (Changelog / Quests) */
#quests-btn,
.changelog-btn {
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--primary-grad-end) 100%
    ) !important;
    color: var(--on-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px var(--glow-color) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease !important;
}

#quests-btn:hover,
.changelog-btn:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px var(--glow-color) !important;
}

/* ================================================
      CHANGELOG MODAL
      ================================================ */

#changelogModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Der Button, der das Modal öffnet (falls vorhanden) */
.changelog-open-btn {
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--primary-grad-end) 100%
    );
    color: var(--on-primary);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--glow-color);
    transition: all 0.3s ease;
}

.changelog-open-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px var(--glow-color);
}

/* Die Box innerhalb des Modals hast du ja schon fast fertig, hier die Optimierung: */
.changelog-box {
    background: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: 32px;
    padding: 30px;
    box-shadow: 0 0 40px var(--glow-color);
}

.changelog-title {
    background: linear-gradient(
        135deg,
        var(--primary-light) 0%,
        var(--secondary-color) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.changelog-admin-area {
    display: none;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 20px;
    border: 1px dashed var(--primary-color);
}

.changelog-input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--primary-color);
    color: var(--text-primary);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-family: inherit;
}

.changelog-entry {
    border-left: 3px solid var(--primary-color);
    padding-left: 15px;
    margin-bottom: 15px;
}
.changelog-entry b {
    color: var(--primary-light);
}
.changelog-entry p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: pre-line;
    margin: 4px 0 0;
}

#logDisplay::-webkit-scrollbar {
    width: 8px;
}
#logDisplay::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
#logDisplay::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

/* ================================================
      BUG REPORT MODAL
      ================================================ */

.bug-report-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 1, 13, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
}

.modal-content-bug {
    background: var(--bg-secondary);
    border: 1px solid var(--gold);
    padding: 30px;
    border-radius: 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
}

.modal-content-bug h2 {
    color: var(--gold);
    margin-top: 0;
}

.modal-input-bug {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    padding: 12px;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-family: inherit;
}
.modal-input-bug:focus {
    outline: none;
    border-color: var(--gold);
}
.modal-input-bug:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.bug-item {
    color: var(--gold);
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
}
.bug-item:hover {
    background: rgba(251, 191, 36, 0.1);
}

.all-logout-item {
    color: var(--red);
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
}
.all-logout-item:hover {
    background: rgba(251, 113, 133, 0.1);
}

/* ================================================
      ANIMATIONEN
      ================================================ */

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes pulseGlow {
    0%,
    100% {
        box-shadow: 0 0 20px var(--glow-color);
    }
    50% {
        box-shadow: 0 0 35px var(--glow-color);
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

/* ================================================
   ENHANCED HERO SECTION
   ================================================ */

.hero-section {
    position: relative;
    text-align: center;
    padding: 0 24px;
}

.hero-title {
    font-size: clamp(2.8rem, 10vw, 6rem);
    font-weight: 800;
    margin-top: 160px;
    margin-bottom: 0;
    letter-spacing: -3px;
    background: linear-gradient(
        180deg,
        var(--text-primary) 30%,
        var(--primary-light) 70%,
        var(--secondary-color) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 0.8s ease-out;
    line-height: 1.1;
}

.hero-section .hero-title {
    margin-top: 16px;
}

.hero-subtitle {
    color: var(--text-muted);
    font-size: 1.15rem;
    margin-top: 12px;
    margin-bottom: 30px;
    animation: fadeInUp 0.8s ease-out 0.15s both;
}

.qs-hero-eyebrow {
    display: inline-block;
    margin-top: 130px;
    padding: 6px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--secondary-color) 35%, transparent);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    animation: fadeInUp 0.8s ease-out both;
}

.qs-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    animation: fadeInUp 0.8s ease-out 0.25s both;
}

.qs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 14px;
    font-size: 0.98rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Verlauf endet nicht mehr bei --secondary-color: in mehreren Themes
   (z. B. candy, slate) war das so hell, dass weisse Schrift unter 2:1 fiel. */
.qs-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-grad-end));
    color: var(--on-primary);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--glow-color) 45%, transparent);
}

.qs-btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--glow-color) 60%, transparent);
}

.qs-btn-secondary {
    background: color-mix(in srgb, var(--secondary-color) 18%, transparent);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--secondary-color) 45%, transparent);
}

.qs-btn-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--secondary-color);
}

.qs-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.qs-btn-ghost:hover {
    transform: translateY(-2px);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

.qs-hero-trust {
    color: #10b981;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    animation: fadeInUp 0.8s ease-out 0.35s both;
}

.qs-hero-faq {
    text-align: center;
    margin-bottom: 22px;
    animation: fadeInUp 0.8s ease-out 0.32s both;
}

.qs-hero-faq .qs-btn {
    padding: 9px 20px;
    font-size: 0.85rem;
}

.hero-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    opacity: 0.08;
    pointer-events: none;
    z-index: -1;
}

/* ================================================
   ENHANCED CARDS
   ================================================ */

.enhanced-grid {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.enhanced-card {
    position: relative;
    width: 290px;
    padding: 50px 24px 40px;
    border-radius: 28px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    text-align: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: fadeInUp 0.6s ease-out both;
}
a.enhanced-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.enhanced-card:hover {
    animation:
        fadeInUp 0.6s ease-out both,
        float 5s ease-in-out infinite;
}

.enhanced-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

.enhanced-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.enhanced-card:hover::after {
    opacity: 1;
}

.enhanced-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border-color: transparent;
}

.enhanced-card:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}

.enhanced-card:active {
    transform: scale(0.97);
}

.enhanced-card-icon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

/* Das Kachel-Icon ist eine Grafik, kein Schriftzeichen mehr. Ohne feste
   Groesse zieht sich ein SVG auf die volle Kachelbreite, die 3.5rem oben
   gelten nur noch fuer den Abstand. */
.enhanced-card-icon svg {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto;
}

.enhanced-card:hover .enhanced-card-icon {
    transform: scale(1.15);
}

.enhanced-card-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    display: block;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.enhanced-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 8px;
    display: block;
    font-weight: 600;
}

.enhanced-card-tag {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.enhanced-card:nth-child(2) {
    animation-delay: 0.15s;
}
.enhanced-card:nth-child(3) {
    animation-delay: 0.3s;
}
.enhanced-card:nth-child(4) {
    animation-delay: 0.45s;
}
.enhanced-card:nth-child(5) {
    animation-delay: 0.6s;
}
.enhanced-card:nth-child(6) {
    animation-delay: 0.75s;
}
.enhanced-card:nth-child(7) {
    animation-delay: 0.9s;
}
.enhanced-card:nth-child(8) {
    animation-delay: 1.05s;
}
.enhanced-card:nth-child(9) {
    animation-delay: 1.2s;
}

/* Card Color Themes */
.card-purple {
    --ch: 262;
    --cs: 70%;
    --cl: 55%;
}
.card-yellow {
    --ch: 45;
    --cs: 90%;
    --cl: 50%;
}
.card-cyan {
    --ch: 187;
    --cs: 95%;
    --cl: 43%;
}
.card-gray {
    --ch: 210;
    --cs: 20%;
    --cl: 65%;
}
.card-red {
    --ch: 0;
    --cs: 85%;
    --cl: 60%;
}
.card-green {
    --ch: 142;
    --cs: 70%;
    --cl: 50%;
}
.card-blue {
    --ch: 217;
    --cs: 92%;
    --cl: 60%;
}
.card-pink {
    --ch: 335;
    --cs: 80%;
    --cl: 60%;
}
.card-orange {
    --ch: 25;
    --cs: 95%;
    --cl: 53%;
}
.card-amber {
    --ch: 40;
    --cs: 92%;
    --cl: 50%;
}
.card-top100 {
    --ch: 44;
    --cs: 90%;
    --cl: 55%;
}

.card-purple,
.card-yellow,
.card-cyan,
.card-gray,
.card-red,
.card-green,
.card-blue,
.card-pink,
.card-orange,
.card-amber,
.card-top100 {
    background: linear-gradient(
        145deg,
        hsla(var(--ch), var(--cs), var(--cl), 0.2),
        hsla(var(--ch), var(--cs), var(--cl), 0.08)
    );
    border: 1px solid hsla(var(--ch), var(--cs), var(--cl), 0.3);
    box-shadow: 0 8px 32px hsla(var(--ch), var(--cs), var(--cl), 0.12);
}
.card-purple:hover,
.card-yellow:hover,
.card-cyan:hover,
.card-gray:hover,
.card-red:hover,
.card-green:hover,
.card-blue:hover,
.card-pink:hover,
.card-orange:hover,
.card-amber:hover,
.card-top100:hover {
    background: linear-gradient(
        145deg,
        hsla(var(--ch), var(--cs), var(--cl), 0.3),
        hsla(var(--ch), var(--cs), var(--cl), 0.15)
    );
    box-shadow: 0 8px 40px hsla(var(--ch), var(--cs), var(--cl), 0.25);
}

/* True or Fake: Verlauf von TRUE-Gruen nach FAKE-Rot */
.card-truefake {
    background: linear-gradient(
        135deg,
        hsla(142, 70%, 50%, 0.22),
        hsla(142, 70%, 50%, 0.06) 45%,
        hsla(350, 85%, 60%, 0.06) 55%,
        hsla(350, 85%, 60%, 0.22)
    );
    border: 1px solid hsla(142, 70%, 50%, 0.3);
    border-right-color: hsla(350, 85%, 60%, 0.35);
    border-bottom-color: hsla(350, 85%, 60%, 0.35);
    box-shadow: -6px 8px 32px hsla(142, 70%, 50%, 0.1), 6px 8px 32px hsla(350, 85%, 60%, 0.1);
}
.card-truefake:hover {
    background: linear-gradient(
        135deg,
        hsla(142, 70%, 50%, 0.32),
        hsla(142, 70%, 50%, 0.12) 45%,
        hsla(350, 85%, 60%, 0.12) 55%,
        hsla(350, 85%, 60%, 0.32)
    );
    box-shadow: -6px 8px 40px hsla(142, 70%, 50%, 0.22), 6px 8px 40px hsla(350, 85%, 60%, 0.22);
}

.enhanced-card.coming-soon {
    opacity: 0.4;
    cursor: not-allowed;
    animation: none;
    filter: grayscale(0.5);
}
.enhanced-card.coming-soon:hover {
    transform: none;
    box-shadow: none;
}

/* ================================================
   ENHANCED GAME LIST GRID
   ================================================ */

/* ================================================
      KATEGORIE-FILTER & SUCHE (Quizzes / Minispiele)
      ================================================ */
.qs-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 900px;
    margin: 10px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.qs-filter-search {
    width: 100%;
    max-width: 420px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.qs-filter-search:focus {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow-color) 25%, transparent);
}

.qs-filter-search::placeholder {
    color: var(--text-muted);
}

.qs-filter-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.qs-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}

.qs-chip:hover {
    color: var(--text-primary);
    border-color: var(--primary-light);
}

.qs-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--on-primary);
    box-shadow: 0 0 14px color-mix(in srgb, var(--glow-color) 45%, transparent);
}

.qs-filter-empty {
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    margin: 10px 0 30px;
    position: relative;
    z-index: 1;
}

.game-list-enhanced {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

@media (max-width: 600px) {
    .game-list-enhanced {
        flex-direction: column;
        align-items: center;
    }
    .enhanced-card {
        width: 100%;
        max-width: 350px;
    }
}

/* ================================================
      RESPONSIVE (Mobile)
      ================================================ */

@media (max-width: 900px) {
    .menu-toggle {
        display: flex;
    }

    nav {
        width: 100%;
        left: 0;
        top: 0;
        border-radius: 0;
        padding: 0.8rem 1rem;
        /* Auf dem Handy liegt das Menue als Schublade ueber der Seite.
           Ein Raster mit leerer Mittelspalte wuerde nur eine Luecke
           hinterlassen. */
        display: flex;
        justify-content: space-between;
    }

    .nav-menu {
        border: none;
        border-radius: 0;
        padding: 0;
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 100%;
        height: 100dvh;
        z-index: 1;
        /* Ganzer Bildschirm, zwei Kacheln pro Reihe. So bleibt kein
           Leerraum und das Logo ragt nicht mehr hinein. */
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: start;
        padding: 96px 16px 24px;
        background:
            radial-gradient(120% 50% at 100% 0%, color-mix(in srgb, var(--primary-color) 28%, transparent), transparent 70%),
            radial-gradient(90% 40% at 0% 100%, rgba(236, 72, 153, 0.14), transparent 70%),
            var(--bg-secondary);
        border-left: 1px solid var(--border-color);
        transition:
            right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.4s ease;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        gap: 12px;
        overflow-y: auto;
    }
    .nav-menu.active {
        right: 0;
    }
    /* Logo und Knoepfe bleiben ueber dem Menue sichtbar. */
    nav .nav-brand,
    nav .nav-actions {
        position: relative;
        z-index: 2;
    }

    .nav-mob-head {
        display: block;
        grid-column: 1 / -1;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-secondary, #9ca3af);
        opacity: 0.7;
        margin: 0 4px 6px;
    }

    /* Jeder Eintrag wird eine Karte mit farbigem Icon und Pfeil. */
    .nav-menu .nav-item {
        --nav-c: var(--primary-light);
        display: flex !important;
        align-items: center;
        gap: 14px;
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        border-radius: 18px;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-primary);
        background: color-mix(in srgb, var(--text-primary) 4%, transparent);
        border: 1px solid color-mix(in srgb, var(--nav-c) 18%, transparent);
        opacity: 0;
        transform: translateX(28px);
        transition:
            opacity 0.35s ease,
            transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2),
            background 0.2s ease,
            border-color 0.2s ease;
    }
    .nav-menu .qs-ticket-link[style*="display:none"],
    .nav-menu .qs-ticket-link[style*="display: none"] {
        display: none !important;
    }
    .nav-menu .nav-item::after {
        content: "";
        margin-left: auto;
        width: 8px;
        height: 8px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: 0.35;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .nav-menu .nav-item:active {
        transform: scale(0.97);
    }
    .nav-menu .nav-item:hover,
    .nav-menu .nav-item.active {
        background: color-mix(in srgb, var(--nav-c) 14%, transparent);
        border-color: color-mix(in srgb, var(--nav-c) 55%, transparent);
    }
    .nav-menu .nav-item.active::after,
    .nav-menu .nav-item:hover::after {
        opacity: 0.9;
        transform: translateX(3px) rotate(45deg);
    }
    .nav-ico {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 13px;
        color: var(--nav-c);
        background: color-mix(in srgb, var(--nav-c) 18%, transparent);
        box-shadow: 0 0 18px color-mix(in srgb, var(--nav-c) 30%, transparent);
    }
    .nav-ico svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .nav-menu .nav-item #ticketBadge {
        position: static !important;
        margin-left: auto;
    }

    /* Beim Oeffnen gleiten die Karten nacheinander herein. */
    .nav-menu.active .nav-item {
        opacity: 1;
        transform: none;
    }
    .nav-menu.active .nav-item:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
    .nav-menu.active .nav-item:nth-child(3) { transition-delay: 0.14s, 0.14s, 0s, 0s; }
    .nav-menu.active .nav-item:nth-child(4) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
    .nav-menu.active .nav-item:nth-child(5) { transition-delay: 0.26s, 0.26s, 0s, 0s; }
    /* Kachel-Optik: Icon oben gross, Name darunter. */
    .nav-menu .nav-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        min-height: 128px;
        padding: 16px;
        border-radius: 22px;
        transform: translateY(18px);
        background:
            radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--nav-c) 20%, transparent), transparent 70%),
            color-mix(in srgb, var(--text-primary) 4%, transparent);
    }
    .nav-menu .nav-item::after {
        position: absolute;
        top: 22px;
        right: 20px;
    }
    .nav-menu .nav-item .nav-ico {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
    .nav-menu .nav-item .nav-ico svg {
        width: 26px;
        height: 26px;
    }
    .nav-menu .nav-item #ticketBadge {
        position: absolute !important;
        top: 14px !important;
        right: 40px !important;
    }
    @media (prefers-reduced-motion: reduce) {
        .nav-menu .nav-item { transform: none; transition: none; }
    }

    .user-btn span {
        display: none;
    }
    .user-btn {
        padding: 0;
    }

    #current-lang-text {
        display: none;
    }

    /* Rechts stehen jetzt Sprache, Konto und Hamburger nebeneinander.
       Auf schmalen Geraeten passt das nur, wenn Logo und Login-Knopf
       etwas Platz abgeben. */
    .nav-actions {
        gap: 0.5rem;
    }
    .nav-logo {
        font-size: 1.25rem;
    }
    .discord-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 420px) {
    /* Beta bleibt sichtbar, nur etwas kleiner. */
    .beta-badge {
        font-size: 0.55rem;
        padding: 2px 6px;
    }
    .discord-btn {
        padding: 9px;
    }
    .discord-btn-text {
        display: none;
    }
}

/* ================================================
      FOOTER STYLES
      ================================================ */

.qs-footer {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 24px;
    margin: 60px 20px 20px;
    padding: 40px;
    z-index: 2;
    flex-shrink: 0;
    margin-top: auto;
}

.qs-footer-glow {
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    opacity: 0.1;
    pointer-events: none;
}

.qs-static-footer {
    margin: 60px 20px 20px;
    padding: 36px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 24px;
    text-align: center;
}

.qs-static-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: center;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.qs-static-footer-inner a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.qs-static-footer-inner a:hover {
    color: var(--text-primary);
}

.qs-static-footer-brand {
    font-weight: 800;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--primary-light), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.qs-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.qs-footer-top > div:first-child {
    text-align: center;
}

.qs-logo {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(
        135deg,
        var(--primary-light) 0%,
        var(--secondary-color) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.qs-tagline {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.qs-discord-btn {
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--primary-grad-end) 100%
    );
    color: var(--on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px
        color-mix(in srgb, var(--glow-color) 60%, transparent);
    transition: all 0.3s ease;
}

.qs-discord-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px
        color-mix(in srgb, var(--glow-color) 60%, transparent);
}

/* Spaltenueberschriften sind h2 (vorher h4: Sprung h1 -> h4). Farbe
   primary-light statt primary-color: kleine Schrift braucht 4.5:1. */
.qs-footer-col h2,
.qs-footer-col h4 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-light);
    margin: 0 0 14px;
}

.qs-footer-col a,
.qs-footer-col .qs-footer-linkbtn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 10px;
    transition:
        color 0.2s,
        transform 0.2s;
    cursor: pointer;
}

.qs-footer-col a:hover,
.qs-footer-col .qs-footer-linkbtn:hover {
    color: var(--primary-light);
    transform: translateX(4px);
}

.qs-footer-col a i,
.qs-footer-col .qs-footer-linkbtn i {
    font-size: 18px;
}

.qs-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0 16px;
    position: relative;
    z-index: 1;
    opacity: 0.6;
}

.qs-footer-bottom {
    /* Drei Spalten mit gleich breiten Außenspalten, damit der
       Inspiration-Link wirklich mittig sitzt */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

.qs-footer-bottom > :first-child {
    justify-self: start;
    text-align: left;
}

.qs-footer-bottom > .qs-status {
    justify-self: end;
}

.qs-footer-credit a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #e4dcf5;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.qs-footer-credit a:hover {
    color: #fff;
}

.qs-footer-credit svg {
    width: 18px;
    height: 13px;
    flex: none;
}

.qs-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.qs-status:hover {
    opacity: 0.8;
}

.qs-status-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 6px #10b981;
    animation: pulse 2s ease-in-out infinite;
}

@media (max-width: 768px) {
    .qs-footer {
        padding: 32px 20px 20px;
        border-radius: 16px;
        margin: 60px 20px 0;
    }
    .qs-footer-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .qs-tagline {
        max-width: 100%;
    }
    .qs-footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ================================================
   STATUS MODAL
   ================================================ */

.qs-status-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 1, 13, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.qs-status-window {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 32px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 60px color-mix(in srgb, var(--glow-color) 30%, transparent);
    animation: fadeInUp 0.3s ease-out;
}

.qs-glow {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 200px;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    opacity: 0.12;
    pointer-events: none;
}

.qs-content {
    position: relative;
    z-index: 1;
}

.qs-header {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
}

.qs-title {
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(
        135deg,
        var(--primary-light) 0%,
        var(--secondary-color) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.qs-overall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #10b981;
}

.qs-dot {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: pulse 2s ease-in-out infinite;
}

.qs-section {
    margin-bottom: 20px;
}

.qs-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.qs-service-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qs-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.qs-service-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qs-service-icon {
    width: 38px;
    height: 38px;
    background: var(--bg-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-light);
    flex-shrink: 0;
}

.qs-service-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.qs-service-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.qs-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.qs-badge.online {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.qs-badge.degraded {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.qs-badge.offline {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.qs-badge.maintenance {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.qs-incident {
    background: rgba(251, 191, 36, 0.08);
    border-left: 3px solid #fbbf24;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.qs-incident.red {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: #ef4444;
}

.qs-incident-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.qs-incident-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.qs-admin {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qs-admin-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.qs-admin-select {
    flex: 1;
    min-width: 120px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
}

.qs-admin-select:focus {
    outline: none;
    border-color: var(--primary-color);
}
.qs-admin-select:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.qs-admin-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.qs-admin-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.qs-admin-btn.primary {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--primary-grad-end)
    );
    border: none;
    color: var(--on-primary);
}

.qs-admin-btn.success {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

.status-open-btn {
    display: none;
}

.qs-status-modal::-webkit-scrollbar {
    width: 8px;
}
.qs-status-modal::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
.qs-status-modal::-webkit-scrollbar-track {
    background: transparent;
}

/* ================================================
   COOKIE BANNER
   ================================================ */

.qs-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: var(--bg-secondary);
    border-top: 2px solid var(--primary-color);
    box-shadow: 0 -10px 40px
        color-mix(in srgb, var(--glow-color) 30%, transparent);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
}

.qs-cookie-banner.qs-cookie-show {
    transform: translateY(0);
    visibility: visible;
}
/* Versteckt ragte der Banner samt Schatten ein paar Pixel ins Bild und
   blitzte beim Laden auf. Jetzt schiebt er sich ganz raus und ist bis
   zum Einblenden unsichtbar. */
.qs-cookie-banner:not(.qs-cookie-show) {
    transform: translateY(calc(100% + 60px));
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.5s;
}

.qs-cookie-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.qs-cookie-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-light);
}

.qs-cookie-text {
    flex: 1;
    min-width: 0;
}

.qs-cookie-text strong {
    color: var(--text-primary);
    font-size: 1rem;
    display: block;
    margin-bottom: 4px;
}

.qs-cookie-text p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.qs-cookie-text a {
    color: var(--accent-color);
    text-decoration: underline;
}

.qs-cookie-text a:hover {
    color: var(--primary-light);
}

.qs-cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.qs-cookie-btn {
    border: none;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.qs-cookie-accept {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--primary-grad-end)
    );
    color: var(--on-primary);
    box-shadow: 0 4px 15px
        color-mix(in srgb, var(--glow-color) 35%, transparent);
}

.qs-cookie-accept:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.qs-cookie-decline {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-muted);
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.qs-cookie-decline:hover {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .qs-cookie-content {
        flex-direction: column;
        padding: 16px 20px;
        gap: 12px;
        text-align: center;
    }
    .qs-cookie-icon {
        display: none;
    }
    .qs-cookie-actions {
        width: 100%;
        justify-content: center;
    }
    .qs-cookie-btn {
        flex: 1;
        text-align: center;
    }
}

/* ================================================
   INFO SECTIONS (Preise, Zielgruppe, Anleitung, ...)
   ================================================ */

.qs-info-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 24px 20px;
    position: relative;
    z-index: 1;
}

.qs-info-section + .qs-info-section {
    padding-top: 40px;
}

.qs-info-section .qs-section-kicker {
    display: inline-block;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.qs-info-section h2 {
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 800;
    margin: 0 0 12px;
    background: linear-gradient(
        135deg,
        var(--primary-light) 0%,
        var(--secondary-color) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.qs-info-section h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-light);
    margin: 26px 0 10px;
}

.qs-info-section p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 14px;
}

.qs-info-section strong {
    color: var(--text-primary);
}

.qs-info-section ul,
.qs-info-section ol {
    color: var(--text-secondary);
    line-height: 1.7;
    padding-left: 24px;
    margin: 0 0 16px;
}

.qs-info-section li {
    margin-bottom: 8px;
}

/* Knoepfe ausnehmen: diese Regel ist spezifischer als .qs-btn-primary
   und faerbte deren weisse Schrift sonst um - auf dem Farbverlauf sah
   das nach Fehler aus. Die Unterstreichung beim Ueberfahren gehoert
   ebenfalls nur an echte Textlinks. */
.qs-info-section a:not(.qs-btn) {
    color: var(--secondary-color);
    text-decoration: none;
}

.qs-info-section a:not(.qs-btn):hover {
    text-decoration: underline;
}

.qs-lead {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.qs-highlight-box {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    border-left: 4px solid var(--primary-color);
    border-radius: 16px;
    padding: 18px 22px;
    margin: 20px 0;
}

.qs-highlight-box p {
    margin: 0;
    color: var(--text-secondary);
}

.qs-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 20px 0;
}

.qs-feature-card {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary-color) 14%, transparent),
        color-mix(in srgb, var(--primary-color) 5%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: 18px;
    padding: 20px 22px;
}

.qs-feature-card h3 {
    margin: 0 0 8px;
}

.qs-feature-card p {
    margin: 0;
    font-size: 0.92rem;
}

.qs-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 24px 0;
}

/* Ein einzelner Preis soll nicht auf volle Spaltenbreite auseinander
   gezogen werden, sonst steht viel Luft um drei Zeilen Text. */
.qs-pricing-single {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

.qs-price-card {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary-color) 16%, transparent),
        color-mix(in srgb, var(--primary-color) 5%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 18px;
    padding: 24px;
    text-align: center;
}

.qs-price-card.qs-price-featured {
    border-color: var(--gold);
    box-shadow: 0 0 40px color-mix(in srgb, var(--gold) 18%, transparent);
}

.qs-price-card .qs-price-name {
    font-weight: 800;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.qs-price-card .qs-price-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-light);
    margin: 10px 0;
}

.qs-price-card .qs-price-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.qs-steps {
    counter-reset: qs-step;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.qs-steps li {
    position: relative;
    padding: 18px 22px 18px 64px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 16px;
    margin-bottom: 14px;
    counter-increment: qs-step;
}

.qs-steps li::before {
    content: counter(qs-step);
    position: absolute;
    left: 18px;
    top: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--primary-grad-end)
    );
    color: var(--on-primary);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.qs-steps li strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.qs-steps li span {
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.6;
}

.qs-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ================================================
   INHALTSVERZEICHNIS (Anker-Links)
   ================================================ */

.qs-toc {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 0;
    position: relative;
    z-index: 1;
}

.qs-toc-inner {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary-color) 12%, transparent),
        color-mix(in srgb, var(--primary-color) 4%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: 18px;
    padding: 22px 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    align-items: center;
}

.qs-toc-label {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-color);
    white-space: nowrap;
}

.qs-toc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.qs-toc-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.qs-toc-links a:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* ================================================
   FAQ-ACCORDION (kompakte Sektionen)
   ================================================ */

.qs-acc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    width: 100%;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-radius: 18px;
    padding: 18px 22px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}

.qs-acc-head:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
}

.qs-acc-head .qs-section-kicker {
    margin-bottom: 0;
}

.qs-acc-title {
    font-size: clamp(1.35rem, 3.5vw, 1.9rem);
    font-weight: 800;
    background: linear-gradient(
        135deg,
        var(--primary-light) 0%,
        var(--secondary-color) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.qs-acc-icon {
    margin-left: auto;
    align-self: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    transition:
        transform 0.35s ease,
        background 0.3s ease;
}

.qs-acc-open .qs-acc-icon {
    transform: rotate(45deg);
}

.qs-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s ease;
}

.qs-acc-open .qs-acc-body {
    grid-template-rows: 1fr;
}

.qs-acc-inner {
    overflow: hidden;
    min-height: 0;
}

.qs-acc-inner > :first-child {
    margin-top: 24px;
}

/* Anker-Sprung nicht unter der fixierten Navbar */
.qs-info-section {
    scroll-margin-top: 90px;
}

/* ================================================
   SCROLL-REVEAL
   ================================================ */

.qs-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.qs-reveal-visible {
    opacity: 1;
    transform: none;
}

/* ================================================
   NACH-OBEN-BUTTON
   ================================================ */

.qs-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--primary-light);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        background 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 900;
}

.qs-top-btn-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.qs-top-btn:hover {
    background: var(--primary-color);
    color: var(--on-primary);
}

@media (max-width: 640px) {
    .qs-top-btn {
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ================================================
   404-SEITE
   ================================================ */

.qs-404 {
    max-width: 640px;
    margin: 0 auto;
    padding: 90px 24px 60px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.qs-404-code {
    font-size: clamp(4.5rem, 18vw, 8rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(
        135deg,
        var(--primary-light) 0%,
        var(--secondary-color) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.qs-404 h1 {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.qs-404 p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 28px;
}

.qs-404-btn {
    display: inline-block;
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--primary-grad-end) 100%
    );
    color: var(--on-primary);
    text-decoration: none;
    font-weight: 700;
    padding: 13px 32px;
    border-radius: 14px;
    box-shadow: 0 4px 18px
        color-mix(in srgb, var(--glow-color) 55%, transparent);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.qs-404-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px
        color-mix(in srgb, var(--glow-color) 70%, transparent);
}


/* ── Ticket-Kennzeichen ───────────────────────────────────────────
   Jede Kategorie bekommt eine eigene Farbe. In einer langen Liste
   erkennt man die Art eines Tickets dann am Fleck, bevor man den Text
   gelesen hat. Der Rahmen traegt die Farbe mit, weil die zarte
   Hintergrundfuellung allein auf dunklem Grund kaum auffaellt. */
.pill.cat {
    border: 1px solid transparent;
}
.pill.cat-problem {
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}
.pill.cat-idee {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fcd34d;
}
.pill.cat-frage {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.45);
    color: #93c5fd;
}
.pill.cat-konto {
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.45);
    color: #6ee7b7;
}

/* Prioritaet steht als reiner Text in der Seitenleiste - hier genuegt
   die Schriftfarbe, ein weiteres Faehnchen waere zu viel. */
.prio-niedrig {
    color: #94a3b8;
}
.prio-normal {
    color: #93c5fd;
}
.prio-hoch {
    color: #fca5a5;
}

@media (max-width: 768px) {
    .qs-footer-bottom > :first-child {
        text-align: center;
    }
}

/* ================================================
      BARRIEREFREIHEIT (WCAG 2.1/2.2 AA)
      ================================================ */

/* Nur fuer Screenreader sichtbar (z. B. versteckte h1, Live-Regionen) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* "Zum Inhalt springen": unsichtbar, bis er per Tab den Fokus bekommt */
.qs-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.15s ease;
}
.qs-skip-link:focus,
.qs-skip-link:focus-visible {
    transform: none;
    outline: 3px solid var(--focus-color);
    outline-offset: 2px;
}

/* Aus <div>/<a> gewordene Knoepfe sollen exakt so aussehen wie vorher */
.qs-btn-reset {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    line-height: inherit;
}

/* Grund-Fokusrahmen fuer alles Bedienbare ohne eigene Fokus-Regel */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible,
select:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}


/* Knopf-Resets fuer Elemente, die frueher <div>/<a> waren. :where() hat
   Spezifitaet 0 - die bestehenden Klassenregeln (Farbe, Rahmen, Schrift-
   groesse, Hover) gewinnen also weiterhin, nur die Browser-Vorgaben fuer
   <button> fallen weg. */
:where(button.enhanced-card),
:where(button.lang-option),
:where(button.qs-status),
:where(.user-menu button),
:where(button.qs-footer-linkbtn) {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}
:where(button.enhanced-card) {
    display: block;
}
:where(button.lang-option),
:where(.user-menu button) {
    width: 100%;
    text-align: left;
}
:where(button.qs-status),
:where(button.qs-footer-linkbtn) {
    padding: 0;
}
:where(button.lang-selected),
:where(button.discord-btn) {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Hinweis zu den Nutzungsbedingungen am Login-Button. Hing frueher frei
   unter dem Button, ragte aus der Navbar und brach unsauber um. Jetzt ein
   kleines Popover, das beim Zeigen auf den Button erscheint. */
.qs-login-terms {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1001;
  width: max-content; max-width: 220px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--card-bg, #1a1030); border: 1px solid var(--border-color, rgba(255,255,255,.12));
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-size: 0.72rem; line-height: 1.35; color: var(--text-muted); text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.qs-login-terms::before {
  content: ""; position: absolute; top: -6px; right: 22px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: inherit; border-left: inherit; border-top: inherit;
}
.qs-login-terms a { color: inherit; text-decoration: underline; }
#auth-container:hover .qs-login-terms,
#auth-container:focus-within .qs-login-terms {
  opacity: 1; visibility: visible; transform: none;
}

/* Kleiner Hinweis unten am Rand (qsHinweis in quizstage.js). */
.qs-hinweis {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    max-width: min(92vw, 440px);
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    font-weight: 600;
    font-size: 0.92rem;
    text-align: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.qs-hinweis.zeigen {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* QR-Scanner und Einladen (quizstage.js) */
.qs-scan {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: 16px;
}
.qs-scan-in {
    position: relative;
    width: min(92vw, 420px);
    text-align: center;
    color: #fff;
}
.qs-scan-in video {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 24px;
    background: #000;
}
.qs-scan-rahmen {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    aspect-ratio: 1;
    border: 3px solid var(--primary-light);
    border-radius: 20px;
    box-shadow: 0 0 24px var(--glow-color);
    pointer-events: none;
}
.qs-scan-in button,
.qs-einladen button {
    margin-top: 14px;
    background: var(--primary-color);
    color: var(--on-primary, #fff);
    border: 0;
    border-radius: 14px;
    padding: 10px 22px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.qs-einladen {
    width: min(92vw, 400px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 22px;
    color: var(--text-primary);
}
.qs-einladen h3 { margin: 0 0 6px; }
.qs-einladen p { margin: 0 0 14px; color: var(--text-secondary); font-size: 0.9rem; }
.qs-einladen input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
}
.qs-einladen-liste { margin-top: 10px; display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.qs-einladen-liste .zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.qs-einladen-liste img { width: 30px; height: 30px; border-radius: 50%; }
.qs-einladen-liste span { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-einladen-liste button { margin: 0; padding: 6px 12px; font-size: 0.85rem; }
.qs-einladen-liste .leer { color: var(--text-secondary); font-size: 0.88rem; padding: 6px 2px; }
.qs-einladen .qs-einladen-zu { width: 100%; }

/* Update-Banner der Android-App */
.qs-update {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-radius: 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--primary-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.92rem;
}
.qs-update span { flex: 1; }
.qs-update-los {
    background: var(--primary-color);
    color: var(--on-primary, #fff);
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.qs-update button {
    background: none;
    border: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    padding: 6px;
}

/* Handy-Menue als schmale Schublade unter der Leiste. Die Kacheln stehen
   untereinander und behalten ihre Groesse von vorher (halbe Bildschirm-
   breite). Links bleibt die Seite sichtbar. */
@media (max-width: 900px) {
    .nav-menu {
        top: var(--qs-nav-h, 64px);
        height: calc(100dvh - var(--qs-nav-h, 64px));
        width: clamp(190px, calc((100vw - 44px) / 2 + 32px), 260px);
        right: -300px;
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 0 0 0;
        border-top: 1px solid var(--border-color);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.45);
        overscroll-behavior: contain;
    }
    .nav-menu.active {
        right: 0;
    }
    .nav-mob-head {
        margin-top: 4px;
    }
}

/* Versionszeile ganz unten im Handy-Menue */
@media (max-width: 900px) {
    .nav-mob-version {
        display: block;
        margin-top: 6px;
        padding: 10px 4px 0;
        border-top: 1px solid var(--border-color);
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-muted);
        text-align: center;
    }
}