/* =========================================================
   THE MYSTIC'S DREAM
   CLEAN MASTER STYLESHEET
   Landingpage + Hero + Portalhalle + Welt-Overlays
========================================================= */

/* =========================================================
   1. GRUNDWERTE
========================================================= */

:root {
    --color-night: #050913;
    --color-night-soft: #0a1020;
    --color-panel: #101827;

    --color-gold: #c9a45d;
    --color-gold-light: #f1d291;

    --color-purple: #7258d8;
    --color-cyan: #54c8d6;

    --color-text: #ede8dc;
    --color-text-muted: #b9b4ab;

    --font-heading: "Cinzel", serif;
    --font-body: "Inter", sans-serif;

    --content-width: 1600px;
    --header-height: 60px;

    --transition-fast: 180ms ease;
    --transition-medium: 350ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

    background: var(--color-night);
    color: var(--color-text);

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
}

body.menu-open {
    overflow: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

.content-container {
    width: min(calc(100% - 96px), var(--content-width));
    margin-inline: auto;
}


/* =========================================================
   2. HEADER / NAVIGATION
========================================================= */

.site-header {
    position: fixed;
    z-index: 50;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    border-bottom: 1px solid rgba(201, 164, 93, 0.34);

    background:
        linear-gradient(
            180deg,
            rgba(2, 5, 12, 0.96),
            rgba(5, 9, 19, 0.88)
        );

    backdrop-filter: blur(14px);

    transition:
        height var(--transition-medium),
        background var(--transition-medium),
        box-shadow var(--transition-medium);
}

.site-header.is-scrolled {
    height: 56px;

    background: rgba(3, 7, 15, 0.97);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.32);
}

.site-header__inner {
    width: min(calc(100% - 64px), var(--content-width));
    height: 100%;
    margin-inline: auto;
}

.main-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    height: 100%;
}

.main-navigation__side {
    display: flex;
    align-items: center;
    gap: 34px;
}

.main-navigation__side--right {
    justify-content: flex-end;
}

.main-navigation a {
    position: relative;

    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    color: rgba(237, 232, 220, 0.88);

    transition:
        color var(--transition-fast),
        text-shadow var(--transition-fast);
}

.main-navigation__side > a:not(.login-link)::after {
    position: absolute;

    right: 50%;
    bottom: -10px;
    left: 50%;

    height: 1px;

    content: "";

    background: var(--color-gold);

    transition:
        right var(--transition-medium),
        left var(--transition-medium);
}

.main-navigation__side > a:hover {
    color: var(--color-gold-light);

    text-shadow:
        0 0 18px rgba(201, 164, 93, 0.45);
}

.main-navigation__side > a:hover::after {
    right: 0;
    left: 0;
}


/* Windrose in der Mitte */

.header-emblem {
    position: relative;
    z-index: 5;

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border: none;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    overflow: visible;

    transform: translateY(1px);

    transition:
        transform var(--transition-medium),
        filter var(--transition-medium);
}

.header-emblem img {
    width: 58px;
    height: 58px;

    object-fit: contain;

    transform: scale(1.22);

    filter:
        drop-shadow(0 0 3px rgba(213, 171, 85, 0.28))
        drop-shadow(0 0 6px rgba(112, 76, 185, 0.14));
}

.header-emblem::before,
.header-emblem::after {
    position: absolute;
    top: 50%;

    width: 58px;
    height: 1px;

    content: "";
    pointer-events: none;

    opacity: 0.72;
}

.header-emblem::before {
    right: calc(100% + 12px);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207, 169, 92, 0.72)
        );
}

.header-emblem::after {
    left: calc(100% + 12px);

    background:
        linear-gradient(
            90deg,
            rgba(207, 169, 92, 0.72),
            transparent
        );
}

.header-emblem:hover {
    transform:
        translateY(1px)
        scale(1.04);
}

.header-emblem:hover img {
    filter:
        drop-shadow(0 0 4px rgba(238, 201, 126, 0.40))
        drop-shadow(0 0 8px rgba(120, 79, 202, 0.22));
}

.site-header.is-scrolled .header-emblem {
    width: 54px;
    height: 54px;
    transform: translateY(1px);
}

.site-header.is-scrolled .header-emblem img {
    width: 54px;
    height: 54px;
    transform: scale(1.22);
}


/* Loginbutton */

.login-link {
    position: relative;

    display: inline-grid;
    place-items: center;

    min-width: 126px;
    height: 44px;

    padding: 0 20px;

    border: 1px solid rgba(201, 164, 93, 0.58);

    background:
        linear-gradient(
            180deg,
            rgba(201, 164, 93, 0.08),
            rgba(5, 9, 17, 0.92)
        );

    text-align: center;

    box-shadow:
        inset 0 0 14px rgba(201, 164, 93, 0.05),
        0 0 12px rgba(0, 0, 0, 0.25);

    transition:
        color 250ms ease,
        border-color 250ms ease,
        background 250ms ease,
        box-shadow 250ms ease;
}

.login-link::before {
    position: absolute;
    inset: 4px;

    content: "";
    pointer-events: none;

    border: 1px solid rgba(201, 164, 93, 0.12);
}

.login-link::after {
    position: absolute;
    inset: -1px;

    content: "";
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            transparent 0 7px,
            rgba(226, 194, 119, 0.92) 7px 8px,
            transparent 8px
        ) top left / 18px 18px no-repeat,

        linear-gradient(
            225deg,
            transparent 0 7px,
            rgba(226, 194, 119, 0.92) 7px 8px,
            transparent 8px
        ) top right / 18px 18px no-repeat,

        linear-gradient(
            45deg,
            transparent 0 7px,
            rgba(226, 194, 119, 0.92) 7px 8px,
            transparent 8px
        ) bottom left / 18px 18px no-repeat,

        linear-gradient(
            315deg,
            transparent 0 7px,
            rgba(226, 194, 119, 0.92) 7px 8px,
            transparent 8px
        ) bottom right / 18px 18px no-repeat;
}

.login-link:hover {
    color: #fff0c7;

    border-color: rgba(240, 211, 148, 0.88);

    background:
        linear-gradient(
            180deg,
            rgba(116, 78, 164, 0.28),
            rgba(10, 13, 24, 0.95)
        );

    box-shadow:
        0 0 18px rgba(119, 79, 190, 0.20),
        inset 0 0 14px rgba(201, 164, 93, 0.06);
}


/* Mobile Navigation */

.mobile-menu-button,
.mobile-menu {
    display: none;
}


/* =========================================================
   3. HERO
========================================================= */

.hero {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 900px;
    padding-bottom: 20px;

    overflow: hidden;
    isolation: isolate;

    background: var(--color-night);
}

.hero__background,
.hero__overlay,
.hero__vignette {
    position: absolute;
    inset: 0;
}

.hero__background {
    z-index: 0;

    background-image:
        url("assets/backgrounds/hero-hall.png");

    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}

.hero__overlay {
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(3, 7, 15, 0.23) 0%,
            rgba(3, 7, 15, 0.12) 45%,
            rgba(3, 7, 15, 0.9) 100%
        );
}

.hero__vignette {
    z-index: 2;

    background:
        radial-gradient(
            circle at center,
            transparent 26%,
            rgba(2, 5, 11, 0.2) 55%,
            rgba(2, 5, 11, 0.82) 100%
        );
}

.hero__content {
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(calc(100% - 48px), 960px);

    padding-top: calc(var(--header-height) + 34px);

    text-align: center;
}

.hero__branding {
    position: relative;
    z-index: 8;

    transform: translateY(-8px);
}

.hero__small-emblem {
    width: 48px;
    height: 48px;

    margin: 0 auto 10px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 16px rgba(201, 164, 93, 0.4));
}

.hero h1 {
    max-width: 760px;

    margin: 0 auto;

    font-family: var(--font-heading);
    font-size: clamp(36px, 3.2vw, 46px);
    font-weight: 500;
    line-height: 1.06;

    letter-spacing: 2.4px;
    text-transform: uppercase;

    color: #f0dfb5;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.7),
        0 0 26px rgba(201, 164, 93, 0.2);
}

.hero__tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin: 12px 0 0;

    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: rgba(237, 232, 220, 0.84);
}

.hero__tagline::before,
.hero__tagline::after {
    width: 54px;
    height: 1px;

    content: "";
}

.hero__tagline::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 164, 93, 0.75)
        );
}

.hero__tagline::after {
    background:
        linear-gradient(
            90deg,
            rgba(201, 164, 93, 0.75),
            transparent
        );
}


/* Portal */

.portal-stage {
    position: relative;
    z-index: 5;

    display: grid;
    place-items: center;

    width: 530px;
    height: 495px;

    margin-top: 8px;

    overflow: visible;
    isolation: isolate;

    transform: translateY(6px);
}

.portal-stage::before {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width: 650px;
    height: 650px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(137, 83, 239, 0.44) 0%,
            rgba(101, 61, 196, 0.30) 28%,
            rgba(64, 62, 154, 0.17) 48%,
            rgba(25, 38, 82, 0.08) 62%,
            transparent 76%
        );

    filter: blur(36px);

    opacity: 0.96;

    transform: translate(-50%, -50%);

    animation: final-portal-mist 7s ease-in-out infinite;
}

.portal-stage::after {
    position: absolute;
    z-index: 2;

    top: 50%;
    left: 50%;

    width: 590px;
    height: 590px;

    content: "";
    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 230, 169, 0.95) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle,
            rgba(220, 174, 91, 0.88) 0 1.2px,
            transparent 2.2px
        ),
        radial-gradient(
            circle,
            rgba(255, 241, 195, 0.8) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle,
            rgba(194, 139, 64, 0.72) 0 1.5px,
            transparent 2.5px
        );

    background-size:
        92px 112px,
        134px 158px,
        118px 142px,
        168px 188px;

    background-position:
        10px 14px,
        32px 20px,
        8px 38px,
        52px 6px;

    opacity: 0.72;

    filter:
        drop-shadow(0 0 4px rgba(255, 215, 137, 0.42));

    transform: translate(-50%, -50%);

    animation: final-gold-particles 18s linear infinite;
}

.portal-stage__light {
    position: absolute;
    z-index: 3;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 48% 45%,
            rgba(8, 7, 28, 0.48) 0%,
            rgba(24, 15, 67, 0.50) 22%,
            rgba(74, 45, 145, 0.40) 44%,
            rgba(126, 88, 215, 0.24) 61%,
            rgba(73, 125, 184, 0.10) 73%,
            transparent 82%
        ),
        radial-gradient(
            ellipse at 35% 28%,
            rgba(216, 199, 255, 0.22),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 72% 68%,
            rgba(111, 164, 255, 0.17),
            transparent 27%
        );

    box-shadow:
        inset 0 0 75px rgba(3, 3, 18, 0.62),
        inset 0 0 24px rgba(147, 102, 232, 0.24),
        0 0 45px rgba(112, 71, 217, 0.40),
        0 0 95px rgba(82, 68, 184, 0.22);

    filter: blur(2px);

    opacity: 0.74;

    animation: final-energy-pulse 5.8s ease-in-out infinite;
}

.portal-stage__light::before,
.portal-stage__light::after {
    position: absolute;

    content: "";

    border-radius: 50%;
    pointer-events: none;
}

.portal-stage__light::before {
    inset: 28px;

    background:
        conic-gradient(
            from 30deg,
            transparent 0deg,
            rgba(177, 141, 255, 0.16) 32deg,
            transparent 65deg,
            rgba(87, 149, 227, 0.13) 108deg,
            transparent 150deg,
            rgba(211, 171, 255, 0.13) 214deg,
            transparent 270deg,
            rgba(78, 123, 216, 0.12) 325deg,
            transparent 360deg
        );

    filter: blur(9px);

    opacity: 0.75;

    animation: final-energy-rotate 32s linear infinite;
}

.portal-stage__light::after {
    inset: 64px;

    background:
        radial-gradient(
            circle at 36% 24%,
            rgba(255, 255, 255, 0.82) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 72% 36%,
            rgba(220, 206, 255, 0.72) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 42% 69%,
            rgba(160, 197, 255, 0.67) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 67% 78%,
            rgba(255, 229, 179, 0.62) 0 1px,
            transparent 2px
        );

    opacity: 0.75;
}

.portal-stage__ring {
    position: absolute;
    z-index: 4;

    top: 50%;
    left: 50%;

    width: 500px;
    height: 500px;

    object-fit: contain;

    transform: translate(-50%, -50%);

    filter:
        drop-shadow(0 0 13px rgba(255, 218, 142, 0.42))
        drop-shadow(0 0 27px rgba(201, 164, 93, 0.3))
        drop-shadow(0 0 48px rgba(111, 71, 217, 0.43));

    animation: final-ring-pulse 6.4s ease-in-out infinite;
}

.portal-stage__key {
    position: absolute;
    z-index: 7;

    top: 50%;
    left: 50%;

    width: 104px;
    height: 278px;

    object-fit: contain;

    transform-origin: center center;

    filter:
        drop-shadow(0 0 7px rgba(255, 244, 205, 0.90))
        drop-shadow(0 0 17px rgba(229, 179, 87, 0.78))
        drop-shadow(0 0 34px rgba(126, 78, 216, 0.42));

    animation: final-key-float 4.8s ease-in-out infinite;
}


/* Hero Button */

.dream-button {
    position: relative;
    z-index: 8;

    display: inline-grid;
    place-items: center;

    width: 270px;
    height: 54px;

    margin-top: -2px;

    border: 1px solid rgba(218, 181, 107, 0.82);

    background:
        linear-gradient(
            180deg,
            rgba(29, 24, 38, 0.92),
            rgba(7, 10, 19, 0.96)
        );

    box-shadow:
        inset 0 0 18px rgba(201, 164, 93, 0.08),
        0 0 26px rgba(0, 0, 0, 0.42);

    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    color: #ead4a0;

    transition:
        color var(--transition-medium),
        border-color var(--transition-medium),
        background var(--transition-medium),
        box-shadow var(--transition-medium);
}

.dream-button::before,
.dream-button::after {
    position: absolute;
    top: 50%;

    width: 24px;
    height: 1px;

    content: "";

    background: var(--color-gold);
}

.dream-button::before {
    right: calc(100% + 12px);
}

.dream-button::after {
    left: calc(100% + 12px);
}

.dream-button:hover {
    color: #fff4d4;

    border-color: var(--color-gold-light);

    background:
        linear-gradient(
            180deg,
            rgba(59, 41, 82, 0.88),
            rgba(12, 15, 27, 0.95)
        );

    box-shadow:
        inset 0 0 18px rgba(201, 164, 93, 0.12),
        0 0 26px rgba(114, 88, 216, 0.32);
}

.scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 15px;

    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 2.2px;
    text-transform: uppercase;

    color: rgba(237, 232, 220, 0.68);

    transition: color var(--transition-fast);
}

.scroll-cue:hover {
    color: var(--color-gold-light);
}

.scroll-cue__arrow {
    margin-top: 2px;

    font-family: serif;
    font-size: 25px;
    line-height: 1;

    animation: scroll-arrow 2s ease-in-out infinite;
}


/* Hero Partikel */

.hero__particles {
    position: absolute;
    z-index: 3;

    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.hero__particles span {
    position: absolute;

    top: var(--y);
    left: var(--x);

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: rgba(245, 221, 167, 0.75);

    box-shadow:
        0 0 8px rgba(201, 164, 93, 0.65);

    animation:
        particle-drift 12s ease-in-out infinite;

    animation-delay: var(--delay);
}


/* =========================================================
   4. HALLE DER PORTALE
========================================================= */

.portal-hall {
    position: relative;

    min-height: 900px;

    padding: 105px 0 125px;

    overflow: hidden;
    isolation: isolate;

    border-top: 1px solid rgba(201, 164, 93, 0.26);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(90, 59, 157, 0.22),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #070c16 0%,
            #080d18 48%,
            #050914 100%
        );
}

.portal-hall__glow {
    position: absolute;
    z-index: -1;

    top: 80px;
    left: 50%;

    width: 1100px;
    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(114, 88, 216, 0.13),
            transparent 68%
        );

    filter: blur(40px);

    transform: translateX(-50%);
}

.portal-hall__header {
    max-width: 760px;
    margin: 0 auto 72px;
    text-align: center;
}

.section-eyebrow {
    margin: 0 0 12px;

    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--color-gold);
}

.portal-hall__header h2 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.1;

    letter-spacing: 1.7px;
    text-transform: uppercase;

    color: #eedcb2;

    text-shadow:
        0 0 24px rgba(201, 164, 93, 0.14);
}

.portal-hall__intro {
    max-width: 620px;

    margin: 20px auto 0;

    color: var(--color-text-muted);
}

.portal-hall__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-top: 28px;
}

.portal-hall__ornament span {
    width: 90px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 164, 93, 0.65)
        );
}

.portal-hall__ornament span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(201, 164, 93, 0.65),
            transparent
        );
}

.portal-hall__ornament img {
    width: 32px;
    height: 32px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 6px rgba(201, 164, 93, 0.3));
}


/* Kartenraster */

.world-portals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;

    align-items: stretch;
}

.world-portal {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: visible;

    border: 1px solid rgba(201, 164, 93, 0.42);

    background:
        linear-gradient(
            180deg,
            rgba(18, 25, 40, 0.88),
            rgba(7, 11, 21, 0.97)
        );

    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.32);

    transition:
        transform 400ms ease,
        border-color 400ms ease,
        box-shadow 400ms ease;
}

.world-portal:hover {
    transform: translateY(-8px);

    border-color: rgba(231, 197, 126, 0.75);

    box-shadow:
        0 34px 75px rgba(0, 0, 0, 0.42),
        0 0 32px rgba(114, 88, 216, 0.12);
}


/* =========================================================
   WELTENKARTEN – GESCHWUNGENE ECKVERZIERUNGEN
========================================================= */

.world-portal {
    position: relative;
    overflow: visible;

    border: 1px solid rgba(201, 164, 93, 0.42);

    box-shadow:
        inset 0 0 0 1px rgba(201, 164, 93, 0.08),
        0 28px 60px rgba(0, 0, 0, 0.32);
}

/* obere Eckornamente */
.world-portal::before,
.world-portal::after {
    position: absolute;
    inset: 0;

    content: "";
    pointer-events: none;

    z-index: 9;
}

/* TOP */
.world-portal::before {
    background:
        /* oben links – geschwungene Doppelkurve */
        radial-gradient(circle at top left,
            transparent 0 14px,
            rgba(226, 194, 119, 0.96) 14px 15px,
            transparent 15px 22px,
            rgba(226, 194, 119, 0.62) 22px 23px,
            transparent 23px
        ) top left / 52px 52px no-repeat,

        linear-gradient(
            90deg,
            rgba(226, 194, 119, 0.96),
            rgba(226, 194, 119, 0.35)
        ) top 15px left 15px / 28px 1px no-repeat,

        linear-gradient(
            180deg,
            rgba(226, 194, 119, 0.96),
            rgba(226, 194, 119, 0.35)
        ) top 15px left 15px / 1px 28px no-repeat,

        radial-gradient(circle at 15px 15px,
            rgba(255, 232, 178, 0.95) 0 1.6px,
            transparent 2.2px
        ) top left / 52px 52px no-repeat,

        /* oben rechts – geschwungene Doppelkurve */
        radial-gradient(circle at top right,
            transparent 0 14px,
            rgba(226, 194, 119, 0.96) 14px 15px,
            transparent 15px 22px,
            rgba(226, 194, 119, 0.62) 22px 23px,
            transparent 23px
        ) top right / 52px 52px no-repeat,

        linear-gradient(
            270deg,
            rgba(226, 194, 119, 0.96),
            rgba(226, 194, 119, 0.35)
        ) top 15px right 15px / 28px 1px no-repeat,

        linear-gradient(
            180deg,
            rgba(226, 194, 119, 0.96),
            rgba(226, 194, 119, 0.35)
        ) top 15px right 15px / 1px 28px no-repeat,

        radial-gradient(circle at calc(100% - 15px) 15px,
            rgba(255, 232, 178, 0.95) 0 1.6px,
            transparent 2.2px
        ) top right / 52px 52px no-repeat;
}

/* BOTTOM */
.world-portal::after {
    background:
        /* unten links – geschwungene Doppelkurve */
        radial-gradient(circle at bottom left,
            transparent 0 14px,
            rgba(226, 194, 119, 0.96) 14px 15px,
            transparent 15px 22px,
            rgba(226, 194, 119, 0.62) 22px 23px,
            transparent 23px
        ) bottom left / 52px 52px no-repeat,

        linear-gradient(
            90deg,
            rgba(226, 194, 119, 0.96),
            rgba(226, 194, 119, 0.35)
        ) bottom 15px left 15px / 28px 1px no-repeat,

        linear-gradient(
            0deg,
            rgba(226, 194, 119, 0.96),
            rgba(226, 194, 119, 0.35)
        ) bottom 15px left 15px / 1px 28px no-repeat,

        radial-gradient(circle at 15px calc(100% - 15px),
            rgba(255, 232, 178, 0.95) 0 1.6px,
            transparent 2.2px
        ) bottom left / 52px 52px no-repeat,

        /* unten rechts – geschwungene Doppelkurve */
        radial-gradient(circle at bottom right,
            transparent 0 14px,
            rgba(226, 194, 119, 0.96) 14px 15px,
            transparent 15px 22px,
            rgba(226, 194, 119, 0.62) 22px 23px,
            transparent 23px
        ) bottom right / 52px 52px no-repeat,

        linear-gradient(
            270deg,
            rgba(226, 194, 119, 0.96),
            rgba(226, 194, 119, 0.35)
        ) bottom 15px right 15px / 28px 1px no-repeat,

        linear-gradient(
            0deg,
            rgba(226, 194, 119, 0.96),
            rgba(226, 194, 119, 0.35)
        ) bottom 15px right 15px / 1px 28px no-repeat,

        radial-gradient(circle at calc(100% - 15px) calc(100% - 15px),
            rgba(255, 232, 178, 0.95) 0 1.6px,
            transparent 2.2px
        ) bottom right / 52px 52px no-repeat;
}

/* leichte Welten-spezifische Färbung */
.world-portal--everafter::before,
.world-portal--everafter::after {
    filter:
        drop-shadow(0 0 4px rgba(63, 200, 213, 0.14));
}

.world-portal--westeros::before,
.world-portal--westeros::after {
    filter:
        drop-shadow(0 0 4px rgba(170, 210, 232, 0.14));
}

.world-portal--prime::before,
.world-portal--prime::after {
    filter:
        drop-shadow(0 0 5px rgba(170, 91, 226, 0.18));
}
/* Kartenbilder */

.world-portal__visual {
    position: relative;

    height: 390px;

    overflow: hidden;

    background: #090f1d;
}

.world-portal__image,
.world-portal__overlay,
.world-portal__ring {
    position: absolute;
    inset: 0;
}

.world-portal__image {
    background-position: center;
    background-size: cover;

    transition:
        transform 700ms ease,
        filter 500ms ease;
}

.world-portal:hover .world-portal__image {
    transform: scale(1.045);
}

.world-portal__overlay {
    z-index: 2;

    background:
        linear-gradient(
            180deg,
            transparent 22%,
            rgba(4, 8, 16, 0.14) 52%,
            rgba(4, 8, 16, 0.9) 100%
        );
}

.world-portal__ring {
    z-index: 3;

    top: 50%;
    left: 50%;
    inset: auto;

    width: 285px;
    height: 285px;

    border: 2px solid rgba(201, 164, 93, 0.7);
    border-radius: 50%;

    box-shadow:
        inset 0 0 35px rgba(114, 88, 216, 0.15),
        0 0 24px rgba(201, 164, 93, 0.18);

    transform: translate(-50%, -50%);

    transition:
        border-color 400ms ease,
        box-shadow 400ms ease,
        transform 600ms ease;
}

.world-portal:hover .world-portal__ring {
    border-color: rgba(244, 211, 143, 0.92);

    box-shadow:
        inset 0 0 42px rgba(114, 88, 216, 0.24),
        0 0 32px rgba(201, 164, 93, 0.38);

    transform:
        translate(-50%, -50%)
        scale(1.025);
}

.world-portal__symbol {
    position: absolute;
    z-index: 4;

    top: 50%;
    left: 50%;

    font-family: var(--font-heading);
    font-size: 34px;

    color: var(--color-gold-light);

    text-shadow:
        0 0 16px rgba(201, 164, 93, 0.62);

    transform: translate(-50%, -50%);
}


/* Weltenbilder */

.world-portal--everafter .world-portal__image {
    background-image:
        linear-gradient(
            180deg,
            rgba(4, 12, 22, 0.05) 0%,
            rgba(4, 12, 22, 0.12) 48%,
            rgba(4, 8, 16, 0.86) 100%
        ),
        url("assets/worlds/everafter/preview.webp");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.world-portal--westeros .world-portal__image {
    background-image:
        linear-gradient(
            180deg,
            rgba(5, 9, 15, 0.06) 0%,
            rgba(5, 9, 15, 0.18) 48%,
            rgba(4, 7, 13, 0.88) 100%
        ),
        url("assets/worlds/westeros/preview.webp");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.world-portal--prime .world-portal__image {
    background-image:
        linear-gradient(
            180deg,
            rgba(6, 8, 18, 0.06) 0%,
            rgba(6, 8, 18, 0.18) 48%,
            rgba(4, 6, 14, 0.88) 100%
        ),
        url("assets/worlds/prime-earth/preview.webp");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* Kartentexte */

.world-portal__content {
    position: relative;

    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;

    padding: 34px 34px 38px;

    text-align: center;
}

.world-portal__genre {
    margin: 0 0 8px;

    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 2.4px;
    text-transform: uppercase;

    color: var(--color-gold);
}

.world-portal h3 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: 31px;
    font-weight: 500;

    color: #f0dfb5;
}

.world-portal__content > p:not(.world-portal__genre) {
    max-width: 330px;

    margin: 17px auto 28px;

    color: var(--color-text-muted);
}

.world-portal__button {
    display: inline-grid;
    place-items: center;

    width: 210px;
    height: 46px;

    margin-top: auto;

    border: 1px solid rgba(201, 164, 93, 0.62);

    background: rgba(201, 164, 93, 0.04);

    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: #ead4a0;

    cursor: pointer;

    transition:
        color 250ms ease,
        border-color 250ms ease,
        background 250ms ease,
        box-shadow 250ms ease;
}

.world-portal__button:hover {
    color: #fff1c9;

    border-color: var(--color-gold-light);

    background: rgba(114, 88, 216, 0.13);

    box-shadow:
        0 0 20px rgba(114, 88, 216, 0.22);
}


/* Everafter */

.world-portal--everafter {
    border-color: rgba(220, 190, 112, 0.48);

    background:
        linear-gradient(
            180deg,
            rgba(16, 31, 42, 0.90),
            rgba(8, 16, 24, 0.98)
        );
}

.world-portal--everafter:hover {
    border-color: rgba(243, 214, 140, 0.82);

    box-shadow:
        0 34px 75px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(63, 200, 213, 0.16),
        0 0 24px rgba(201, 164, 93, 0.10);
}

.world-portal--everafter .world-portal__visual::before {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width: 320px;
    height: 320px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(80, 220, 214, 0.26) 0%,
            rgba(63, 200, 213, 0.16) 32%,
            rgba(217, 185, 103, 0.12) 56%,
            transparent 74%
        );

    filter: blur(18px);

    transform: translate(-50%, -50%);
}

.world-portal--everafter .world-portal__ring {
    border: 2px solid rgba(227, 197, 118, 0.84);

    box-shadow:
        inset 0 0 20px rgba(70, 212, 215, 0.14),
        inset 0 0 48px rgba(217, 185, 103, 0.08),
        0 0 18px rgba(63, 200, 213, 0.18),
        0 0 32px rgba(201, 164, 93, 0.18);

    background:
        radial-gradient(
            circle,
            rgba(80, 220, 214, 0.08),
            transparent 68%
        );
}

.world-portal--everafter .world-portal__ring::before {
    position: absolute;
    inset: 14px;

    content: "";

    border: 1px solid rgba(94, 225, 218, 0.45);
    border-radius: 50%;

    box-shadow:
        0 0 16px rgba(63, 200, 213, 0.12);
}

.world-portal--everafter .world-portal__ring::after {
    position: absolute;
    inset: -10px;

    content: "";

    border: 1px solid rgba(226, 194, 112, 0.22);
    border-radius: 50%;

    opacity: 0.9;
}

.world-portal--everafter:hover .world-portal__ring {
    border-color: rgba(246, 220, 151, 0.96);

    box-shadow:
        inset 0 0 26px rgba(87, 226, 219, 0.18),
        inset 0 0 56px rgba(225, 193, 111, 0.10),
        0 0 26px rgba(63, 200, 213, 0.24),
        0 0 40px rgba(201, 164, 93, 0.24);

    transform:
        translate(-50%, -50%)
        scale(1.03);
}

.world-portal--everafter .world-portal__symbol {
    color: #f2deaa;

    text-shadow:
        0 0 10px rgba(242, 222, 170, 0.42),
        0 0 18px rgba(63, 200, 213, 0.24);
}

.world-portal--everafter .world-portal__genre {
    color: #d8bb74;
}

.world-portal--everafter .world-portal__button:hover {
    background: rgba(63, 200, 213, 0.12);

    box-shadow:
        0 0 18px rgba(63, 200, 213, 0.16),
        0 0 10px rgba(201, 164, 93, 0.10);
}


/* Westeros */

.world-portal--westeros {
    border-color: rgba(170, 190, 207, 0.42);

    background:
        linear-gradient(
            180deg,
            rgba(23, 31, 42, 0.94),
            rgba(7, 12, 20, 0.99)
        );
}

.world-portal--westeros:hover {
    border-color: rgba(214, 229, 239, 0.82);

    box-shadow:
        0 34px 75px rgba(0, 0, 0, 0.46),
        0 0 34px rgba(128, 184, 218, 0.16),
        0 0 22px rgba(196, 216, 230, 0.10);
}

.world-portal--westeros .world-portal__visual::before {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(176, 222, 247, 0.24) 0%,
            rgba(91, 159, 202, 0.16) 32%,
            rgba(139, 166, 188, 0.10) 54%,
            transparent 74%
        );

    filter: blur(20px);

    transform: translate(-50%, -50%);
}

.world-portal--westeros .world-portal__ring {
    border: 2px solid rgba(198, 218, 232, 0.82);

    background:
        radial-gradient(
            circle,
            rgba(110, 178, 215, 0.08),
            transparent 68%
        );

    box-shadow:
        inset 0 0 22px rgba(141, 207, 239, 0.13),
        inset 0 0 48px rgba(203, 220, 231, 0.07),
        0 0 18px rgba(111, 174, 211, 0.18),
        0 0 34px rgba(189, 215, 231, 0.16);
}

.world-portal--westeros .world-portal__ring::before {
    position: absolute;
    inset: 14px;

    content: "";

    border: 1px solid rgba(154, 213, 240, 0.42);
    border-radius: 50%;

    box-shadow:
        inset 0 0 12px rgba(196, 231, 246, 0.08),
        0 0 18px rgba(112, 179, 217, 0.12);
}

.world-portal--westeros .world-portal__ring::after {
    position: absolute;
    inset: -10px;

    content: "";

    border: 1px solid rgba(202, 221, 233, 0.21);
    border-radius: 50%;

    opacity: 0.9;
}

.world-portal--westeros:hover .world-portal__ring {
    border-color: rgba(231, 243, 249, 0.96);

    box-shadow:
        inset 0 0 28px rgba(161, 221, 246, 0.18),
        inset 0 0 58px rgba(214, 232, 241, 0.09),
        0 0 28px rgba(113, 183, 221, 0.25),
        0 0 43px rgba(198, 222, 236, 0.20);

    transform:
        translate(-50%, -50%)
        scale(1.03);
}

.world-portal--westeros .world-portal__symbol {
    color: #e2edf3;

    text-shadow:
        0 0 10px rgba(225, 239, 246, 0.45),
        0 0 20px rgba(102, 175, 216, 0.28);
}

.world-portal--westeros .world-portal__genre {
    color: #a9c7d8;
}

.world-portal--westeros .world-portal__button:hover {
    color: #f0f8fb;

    border-color: rgba(210, 231, 242, 0.88);

    background: rgba(102, 168, 207, 0.12);

    box-shadow:
        0 0 20px rgba(99, 170, 210, 0.18),
        0 0 10px rgba(205, 225, 237, 0.09);
}


/* Prime Earth */

.world-portal--prime {
    border-color: rgba(150, 96, 205, 0.46);

    background:
        linear-gradient(
            180deg,
            rgba(31, 20, 49, 0.94),
            rgba(8, 10, 24, 0.99)
        );
}

.world-portal--prime:hover {
    border-color: rgba(211, 153, 248, 0.84);

    box-shadow:
        0 34px 75px rgba(0, 0, 0, 0.46),
        0 0 36px rgba(153, 75, 226, 0.20),
        0 0 24px rgba(76, 155, 235, 0.12);
}

.world-portal--prime .world-portal__visual::before {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width: 340px;
    height: 340px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(183, 85, 245, 0.28) 0%,
            rgba(112, 75, 220, 0.20) 30%,
            rgba(55, 137, 220, 0.13) 52%,
            transparent 75%
        );

    filter: blur(21px);

    transform: translate(-50%, -50%);
}

.world-portal--prime .world-portal__ring {
    border: 2px solid rgba(194, 129, 236, 0.84);

    background:
        radial-gradient(
            circle,
            rgba(148, 75, 217, 0.10),
            transparent 68%
        );

    box-shadow:
        inset 0 0 24px rgba(181, 92, 235, 0.16),
        inset 0 0 52px rgba(72, 143, 230, 0.08),
        0 0 20px rgba(153, 77, 219, 0.22),
        0 0 38px rgba(70, 139, 225, 0.16);
}

.world-portal--prime .world-portal__ring::before {
    position: absolute;
    inset: 14px;

    content: "";

    border: 1px solid rgba(114, 170, 241, 0.46);
    border-radius: 50%;

    box-shadow:
        inset 0 0 14px rgba(181, 106, 242, 0.10),
        0 0 20px rgba(83, 147, 229, 0.14);
}

.world-portal--prime .world-portal__ring::after {
    position: absolute;
    inset: -10px;

    content: "";

    border: 1px solid rgba(187, 112, 236, 0.24);
    border-radius: 50%;

    opacity: 0.9;
}

.world-portal--prime:hover .world-portal__ring {
    border-color: rgba(226, 173, 255, 0.98);

    box-shadow:
        inset 0 0 30px rgba(192, 103, 247, 0.22),
        inset 0 0 62px rgba(75, 147, 234, 0.10),
        0 0 30px rgba(165, 82, 232, 0.30),
        0 0 48px rgba(69, 142, 230, 0.22);

    transform:
        translate(-50%, -50%)
        scale(1.03);
}

.world-portal--prime .world-portal__symbol {
    color: #dba7fa;

    text-shadow:
        0 0 10px rgba(222, 166, 251, 0.52),
        0 0 22px rgba(78, 146, 232, 0.34);
}

.world-portal--prime .world-portal__genre {
    color: #bd91df;
}

.world-portal--prime .world-portal__button:hover {
    color: #f5e8ff;

    border-color: rgba(213, 158, 246, 0.90);

    background:
        linear-gradient(
            90deg,
            rgba(151, 74, 216, 0.15),
            rgba(65, 130, 218, 0.13)
        );

    box-shadow:
        0 0 22px rgba(151, 74, 216, 0.22),
        0 0 12px rgba(69, 137, 224, 0.14);
}


/* =========================================================
   5. WELTEN-OVERLAYS
========================================================= */

.world-modal {
    position: fixed;
    z-index: 200;

    inset: 0;

    display: grid;
    place-items: center;

    padding: 32px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 350ms ease,
        visibility 350ms ease;
}

.world-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.world-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(2, 5, 12, 0.88);
    backdrop-filter: blur(12px);
}

.world-modal__dialog {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);
    max-height: calc(100vh - 64px);

    overflow: auto;

    border: 1px solid rgba(201, 164, 93, 0.52);

    background: #080d17;

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(114, 88, 216, 0.12);

    transform: translateY(24px) scale(0.98);

    transition: transform 400ms ease;
}

.world-modal.is-open .world-modal__dialog {
    transform: translateY(0) scale(1);
}

.world-modal__close {
    position: absolute;
    z-index: 10;

    top: 18px;
    right: 20px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(201, 164, 93, 0.52);

    background: rgba(4, 8, 16, 0.78);
    color: #ecd9aa;

    font-family: var(--font-heading);
    font-size: 25px;

    cursor: pointer;

    transition:
        color 200ms ease,
        border-color 200ms ease,
        background 200ms ease;
}

.world-modal__close:hover {
    color: #fff1c9;
    border-color: var(--color-gold-light);
    background: rgba(114, 88, 216, 0.18);
}

.world-panel {
    display: none;
    grid-template-columns: 44% 56%;

    min-height: 660px;
}

.world-panel.is-active {
    display: grid;
}

.world-panel__image {
    min-height: 660px;

    background-position: center;
    background-size: cover;
}

.world-panel--everafter .world-panel__image {
    background-image:
        linear-gradient(
            180deg,
            rgba(4, 10, 18, 0.06),
            rgba(4, 10, 18, 0.58)
        ),
        url("assets/worlds/everafter/preview.webp");
}

.world-panel--westeros .world-panel__image {
    background-image:
        linear-gradient(
            180deg,
            rgba(4, 8, 14, 0.08),
            rgba(4, 8, 14, 0.66)
        ),
        url("assets/worlds/westeros/preview.webp");
}

.world-panel--prime .world-panel__image {
    background-image:
        linear-gradient(
            180deg,
            rgba(6, 7, 18, 0.06),
            rgba(6, 7, 18, 0.64)
        ),
        url("assets/worlds/prime-earth/preview.webp");
}

.world-panel__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 74px 68px 64px;

    background:
        radial-gradient(
            circle at top right,
            rgba(114, 88, 216, 0.14),
            transparent 35%
        ),
        #080d17;
}

.world-panel__eyebrow {
    margin: 0 0 10px;

    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 2.8px;
    text-transform: uppercase;

    color: var(--color-gold);
}

.world-panel h2 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.05;

    color: #efddb2;
}

.world-panel__story {
    max-width: 620px;

    margin: 22px 0 32px;

    color: var(--color-text-muted);
}

.world-panel__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.world-panel__links a {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;

    padding: 16px;

    border: 1px solid rgba(201, 164, 93, 0.22);

    background: rgba(255, 255, 255, 0.018);

    transition:
        border-color 250ms ease,
        background 250ms ease,
        transform 250ms ease;
}

.world-panel__links a:hover {
    border-color: rgba(201, 164, 93, 0.62);
    background: rgba(114, 88, 216, 0.08);

    transform: translateY(-2px);
}

.world-panel__links span {
    grid-row: 1 / span 2;

    font-family: var(--font-heading);
    font-size: 11px;

    color: var(--color-gold);
}

.world-panel__links strong {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;

    color: #ead9b0;
}

.world-panel__links small {
    color: #918e89;
}

.world-panel__enter {
    display: inline-grid;
    place-items: center;

    width: 260px;
    height: 52px;

    margin-top: 34px;

    border: 1px solid rgba(201, 164, 93, 0.7);

    background:
        linear-gradient(
            180deg,
            rgba(201, 164, 93, 0.08),
            rgba(8, 12, 22, 0.9)
        );

    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    color: #ecd7a4;

    transition:
        color 250ms ease,
        border-color 250ms ease,
        background 250ms ease,
        box-shadow 250ms ease;
}

.world-panel__enter:hover {
    color: #fff1c8;
    border-color: var(--color-gold-light);

    background:
        linear-gradient(
            180deg,
            rgba(114, 88, 216, 0.18),
            rgba(8, 12, 22, 0.96)
        );

    box-shadow:
        0 0 24px rgba(114, 88, 216, 0.2);
}

.world-panel--everafter .world-panel__eyebrow {
    color: #d8bd79;
}

.world-panel--westeros .world-panel__eyebrow {
    color: #accbdc;
}

.world-panel--prime .world-panel__eyebrow {
    color: #c598e4;
}


/* =========================================================
   6. ANIMATIONEN
========================================================= */

@keyframes final-key-float {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(7px)
            rotate(-0.35deg);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-11px)
            rotate(0.35deg);
    }
}

@keyframes final-ring-pulse {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
            drop-shadow(0 0 13px rgba(255, 218, 142, 0.38))
            drop-shadow(0 0 27px rgba(201, 164, 93, 0.28))
            drop-shadow(0 0 43px rgba(111, 71, 217, 0.36));
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.015);

        filter:
            drop-shadow(0 0 18px rgba(255, 225, 160, 0.56))
            drop-shadow(0 0 34px rgba(211, 169, 86, 0.42))
            drop-shadow(0 0 58px rgba(124, 78, 229, 0.5));
    }
}

@keyframes final-energy-pulse {
    0%,
    100% {
        opacity: 0.78;
        transform: scale(0.985);
    }

    50% {
        opacity: 0.96;
        transform: scale(1.025);
    }
}

@keyframes final-energy-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes final-portal-mist {
    0%,
    100% {
        opacity: 0.72;

        transform:
            translate(-50%, -50%)
            scale(0.97);
    }

    50% {
        opacity: 0.98;

        transform:
            translate(-50%, -50%)
            scale(1.045);
    }
}

@keyframes final-gold-particles {
    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg);

        opacity: 0.52;
    }

    50% {
        opacity: 0.82;
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(360deg);

        opacity: 0.52;
    }
}

@keyframes particle-drift {
    0%,
    100% {
        opacity: 0.2;
        transform: translate3d(0, 4px, 0);
    }

    50% {
        opacity: 0.9;
        transform: translate3d(5px, -6px, 0);
    }
}

@keyframes scroll-arrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}


/* =========================================================
   7. TABLET
========================================================= */

@media (max-width: 1100px) {

    .main-navigation__side {
        display: none;
    }

    .main-navigation {
        grid-template-columns: 1fr auto 1fr;
    }

    .header-emblem {
        grid-column: 2;
    }

    .header-emblem::before,
    .header-emblem::after {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;

        grid-column: 1;
        grid-row: 1;

        width: 42px;
        height: 42px;

        padding: 9px;

        border: 0;

        background: transparent;
        cursor: pointer;
    }

    .mobile-menu-button span {
        display: block;

        width: 100%;
        height: 1px;

        background: var(--color-gold-light);

        transition:
            transform var(--transition-medium),
            opacity var(--transition-medium);
    }

    .mobile-menu-button.is-active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .mobile-menu-button.is-active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.is-active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .mobile-menu {
        position: fixed;
        z-index: 45;

        top: var(--header-height);
        right: 0;
        left: 0;

        display: flex;
        flex-direction: column;

        padding: 24px;

        border-bottom: 1px solid rgba(201, 164, 93, 0.35);

        background: rgba(4, 8, 17, 0.98);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);

        transition:
            opacity var(--transition-medium),
            visibility var(--transition-medium),
            transform var(--transition-medium);
    }

    .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-menu a {
        padding: 12px 4px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.06);

        font-family: var(--font-heading);
        font-size: 13px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    .portal-stage {
        width: 450px;
        height: 430px;
    }

    .portal-stage__ring {
        width: 425px;
        height: 425px;
    }

    .portal-stage__light {
        width: 330px;
        height: 330px;
    }

    .portal-stage::before {
        width: 510px;
        height: 510px;
    }

    .portal-stage::after {
        width: 485px;
        height: 485px;
    }

    .portal-stage__key {
        width: 86px;
        height: 232px;
    }

    .world-portals {
        grid-template-columns: 1fr;
        gap: 30px;

        max-width: 680px;

        margin-inline: auto;
    }

    .world-portal {
        display: grid;
        grid-template-columns: 46% 54%;
    }

    .world-portal__visual {
        height: 100%;
        min-height: 390px;
    }
}


/* =========================================================
   8. SMARTPHONE
========================================================= */

@media (max-width: 767px) {

    :root {
        --header-height: 60px;
    }

    .site-header__inner {
        width: calc(100% - 32px);
    }

    .header-emblem {
        width: 48px;
        height: 48px;
        transform: none;
    }

    .header-emblem img {
        width: 48px;
        height: 48px;
        transform: scale(1.28);
    }

    .hero {
        min-height: 780px;
    }

    .hero__content {
        width: min(calc(100% - 32px), 560px);
        padding-top: 88px;
    }

    .hero__branding {
        transform: translateY(-3px);
    }

    .hero__small-emblem {
        width: 42px;
        height: 42px;
    }

    .hero h1 {
        max-width: 330px;

        font-size: clamp(29px, 8vw, 36px);
        line-height: 1.13;
        letter-spacing: 1.2px;
    }

    .hero__tagline {
        max-width: 280px;
        gap: 9px;

        margin-inline: auto;

        font-size: 10px;
        line-height: 1.6;
        letter-spacing: 2.6px;
    }

    .hero__tagline::before,
    .hero__tagline::after {
        width: 24px;
    }

    .portal-stage {
        width: 320px;
        height: 305px;

        margin-top: 10px;

        transform: translateY(2px);
    }

    .portal-stage__ring {
        width: 300px;
        height: 300px;
    }

    .portal-stage__light {
        width: 235px;
        height: 235px;
    }

    .portal-stage::before {
        width: 350px;
        height: 350px;

        filter: blur(24px);
    }

    .portal-stage::after {
        width: 332px;
        height: 332px;

        opacity: 0.52;
    }

    .portal-stage__key {
        width: 61px;
        height: 176px;
    }

    .dream-button {
        width: 224px;
        height: 49px;

        margin-top: 2px;
    }

    .dream-button::before,
    .dream-button::after {
        width: 12px;
    }

    .dream-button::before {
        right: calc(100% + 7px);
    }

    .dream-button::after {
        left: calc(100% + 7px);
    }

    .content-container {
        width: calc(100% - 40px);
    }

    .portal-hall {
        padding: 82px 0 95px;
    }

    .portal-hall__header {
        margin-bottom: 48px;
    }

    .portal-hall__ornament span {
        width: 45px;
    }

    .world-portal {
        display: flex;
    }

    .world-portal__visual {
        height: 325px;
        min-height: 0;
    }

    .world-portal__ring {
        width: 235px;
        height: 235px;
    }

    .world-portal__content {
        padding: 28px 24px 32px;
    }

    .world-modal {
        padding: 12px;
    }

    .world-modal__dialog {
        max-height: calc(100vh - 24px);
    }

    .world-panel {
        grid-template-columns: 1fr;
    }

    .world-panel__image {
        min-height: 245px;
    }

    .world-panel__content {
        padding: 42px 22px 34px;
    }

    .world-panel__links {
        grid-template-columns: 1fr;
    }

    .world-panel__enter {
        width: 100%;
    }
}


/* =========================================================
   9. REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   KORREKTUR:
   ECKORNAMENTE IN DER JEWEILIGEN WELTENFARBE
========================================================= */

/* Farbvariablen der drei Welten */

.world-portal--everafter {
    --corner-color: rgba(227, 197, 118, 0.96);
    --corner-soft: rgba(227, 197, 118, 0.48);
    --corner-point: rgba(255, 232, 178, 0.96);
}

.world-portal--westeros {
    --corner-color: rgba(198, 218, 232, 0.96);
    --corner-soft: rgba(154, 213, 240, 0.46);
    --corner-point: rgba(231, 243, 249, 0.96);
}

.world-portal--prime {
    --corner-color: rgba(194, 129, 236, 0.96);
    --corner-soft: rgba(114, 170, 241, 0.46);
    --corner-point: rgba(226, 173, 255, 0.98);
}


/* Obere geschwungene Eckverzierungen */

.world-portal::before {
    filter: none;

    background:
        /* oben links */
        radial-gradient(
            circle at top left,
            transparent 0 14px,
            var(--corner-color) 14px 15px,
            transparent 15px 22px,
            var(--corner-soft) 22px 23px,
            transparent 23px
        ) top left / 52px 52px no-repeat,

        linear-gradient(
            90deg,
            var(--corner-color),
            transparent
        ) top 15px left 15px / 28px 1px no-repeat,

        linear-gradient(
            180deg,
            var(--corner-color),
            transparent
        ) top 15px left 15px / 1px 28px no-repeat,

        radial-gradient(
            circle at 15px 15px,
            var(--corner-point) 0 1.6px,
            transparent 2.2px
        ) top left / 52px 52px no-repeat,

        /* oben rechts */
        radial-gradient(
            circle at top right,
            transparent 0 14px,
            var(--corner-color) 14px 15px,
            transparent 15px 22px,
            var(--corner-soft) 22px 23px,
            transparent 23px
        ) top right / 52px 52px no-repeat,

        linear-gradient(
            270deg,
            var(--corner-color),
            transparent
        ) top 15px right 15px / 28px 1px no-repeat,

        linear-gradient(
            180deg,
            var(--corner-color),
            transparent
        ) top 15px right 15px / 1px 28px no-repeat,

        radial-gradient(
            circle at calc(100% - 15px) 15px,
            var(--corner-point) 0 1.6px,
            transparent 2.2px
        ) top right / 52px 52px no-repeat;
}


/* Untere geschwungene Eckverzierungen */

.world-portal::after {
    filter: none;

    background:
        /* unten links */
        radial-gradient(
            circle at bottom left,
            transparent 0 14px,
            var(--corner-color) 14px 15px,
            transparent 15px 22px,
            var(--corner-soft) 22px 23px,
            transparent 23px
        ) bottom left / 52px 52px no-repeat,

        linear-gradient(
            90deg,
            var(--corner-color),
            transparent
        ) bottom 15px left 15px / 28px 1px no-repeat,

        linear-gradient(
            0deg,
            var(--corner-color),
            transparent
        ) bottom 15px left 15px / 1px 28px no-repeat,

        radial-gradient(
            circle at 15px calc(100% - 15px),
            var(--corner-point) 0 1.6px,
            transparent 2.2px
        ) bottom left / 52px 52px no-repeat,

        /* unten rechts */
        radial-gradient(
            circle at bottom right,
            transparent 0 14px,
            var(--corner-color) 14px 15px,
            transparent 15px 22px,
            var(--corner-soft) 22px 23px,
            transparent 23px
        ) bottom right / 52px 52px no-repeat,

        linear-gradient(
            270deg,
            var(--corner-color),
            transparent
        ) bottom 15px right 15px / 28px 1px no-repeat,

        linear-gradient(
            0deg,
            var(--corner-color),
            transparent
        ) bottom 15px right 15px / 1px 28px no-repeat,

        radial-gradient(
            circle at calc(100% - 15px) calc(100% - 15px),
            var(--corner-point) 0 1.6px,
            transparent 2.2px
        ) bottom right / 52px 52px no-repeat;
}


/* Passender leichter Schein */

.world-portal--everafter::before,
.world-portal--everafter::after {
    filter:
        drop-shadow(0 0 4px rgba(227, 197, 118, 0.18));
}

.world-portal--westeros::before,
.world-portal--westeros::after {
    filter:
        drop-shadow(0 0 4px rgba(154, 213, 240, 0.20));
}

.world-portal--prime::before,
.world-portal--prime::after {
    filter:
        drop-shadow(0 0 5px rgba(194, 129, 236, 0.24));
}


/* =========================================================
   ANMELDEBUTTON MIT GESCHWUNGENEN ECKVERZIERUNGEN
========================================================= */

.login-link {
    position: relative;

    overflow: visible;
    clip-path: none;

    border: 1px solid rgba(201, 164, 93, 0.62);

    box-shadow:
        inset 0 0 14px rgba(201, 164, 93, 0.05),
        0 0 12px rgba(0, 0, 0, 0.25);
}


/* Dezente innere Rahmenlinie */

.login-link::before {
    position: absolute;
    z-index: 1;

    inset: 5px;

    content: "";
    pointer-events: none;

    border: 1px solid rgba(201, 164, 93, 0.12);

    background: none;
}


/* Alle vier geschwungenen Ecken */

.login-link::after {
    position: absolute;
    z-index: 2;

    inset: -1px;

    content: "";
    pointer-events: none;

    background:
        /* oben links */
        radial-gradient(
            circle at top left,
            transparent 0 8px,
            rgba(226, 194, 119, 0.96) 8px 9px,
            transparent 9px 13px,
            rgba(226, 194, 119, 0.48) 13px 14px,
            transparent 14px
        ) top left / 30px 30px no-repeat,

        linear-gradient(
            90deg,
            rgba(226, 194, 119, 0.94),
            transparent
        ) top 9px left 9px / 15px 1px no-repeat,

        linear-gradient(
            180deg,
            rgba(226, 194, 119, 0.94),
            transparent
        ) top 9px left 9px / 1px 15px no-repeat,

        /* oben rechts */
        radial-gradient(
            circle at top right,
            transparent 0 8px,
            rgba(226, 194, 119, 0.96) 8px 9px,
            transparent 9px 13px,
            rgba(226, 194, 119, 0.48) 13px 14px,
            transparent 14px
        ) top right / 30px 30px no-repeat,

        linear-gradient(
            270deg,
            rgba(226, 194, 119, 0.94),
            transparent
        ) top 9px right 9px / 15px 1px no-repeat,

        linear-gradient(
            180deg,
            rgba(226, 194, 119, 0.94),
            transparent
        ) top 9px right 9px / 1px 15px no-repeat,

        /* unten links */
        radial-gradient(
            circle at bottom left,
            transparent 0 8px,
            rgba(226, 194, 119, 0.96) 8px 9px,
            transparent 9px 13px,
            rgba(226, 194, 119, 0.48) 13px 14px,
            transparent 14px
        ) bottom left / 30px 30px no-repeat,

        linear-gradient(
            90deg,
            rgba(226, 194, 119, 0.94),
            transparent
        ) bottom 9px left 9px / 15px 1px no-repeat,

        linear-gradient(
            0deg,
            rgba(226, 194, 119, 0.94),
            transparent
        ) bottom 9px left 9px / 1px 15px no-repeat,

        /* unten rechts */
        radial-gradient(
            circle at bottom right,
            transparent 0 8px,
            rgba(226, 194, 119, 0.96) 8px 9px,
            transparent 9px 13px,
            rgba(226, 194, 119, 0.48) 13px 14px,
            transparent 14px
        ) bottom right / 30px 30px no-repeat,

        linear-gradient(
            270deg,
            rgba(226, 194, 119, 0.94),
            transparent
        ) bottom 9px right 9px / 15px 1px no-repeat,

        linear-gradient(
            0deg,
            rgba(226, 194, 119, 0.94),
            transparent
        ) bottom 9px right 9px / 1px 15px no-repeat;
}


.login-link:hover::after {
    filter:
        drop-shadow(0 0 4px rgba(241, 210, 145, 0.38));
}
/* =========================================================
   LOGINBUTTON ALS BUTTON
========================================================= */

button.login-link {
    appearance: none;
    cursor: pointer;

    color: rgba(237, 232, 220, 0.88);
}

.login-link--user {
    max-width: 190px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Mobiler Loginbutton */

.mobile-login-button {
    width: 100%;

    padding: 12px 4px;

    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    background: transparent;

    color: inherit;

    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1.4px;
    text-align: left;
    text-transform: uppercase;

    cursor: pointer;
}


/* =========================================================
   ANMELDE-POPUP
========================================================= */

.login-modal {
    position: fixed;
    z-index: 300;

    inset: 0;

    display: grid;
    place-items: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.login-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.login-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(2, 5, 12, 0.9);

    backdrop-filter: blur(12px);
}

.login-modal__dialog {
    position: relative;
    z-index: 2;

    width: min(440px, 100%);

    padding: 54px 52px 46px;

    border: 1px solid rgba(201, 164, 93, 0.64);

    background:
        radial-gradient(
            circle at top,
            rgba(114, 88, 216, 0.17),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #0c1220,
            #060a13
        );

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.68),
        0 0 42px rgba(114, 88, 216, 0.17);

    transform:
        translateY(20px)
        scale(0.98);

    transition:
        transform 350ms ease;
}

.login-modal.is-open .login-modal__dialog {
    transform:
        translateY(0)
        scale(1);
}


/* Geschwungene Ornamentecken */

.login-modal__dialog::before,
.login-modal__dialog::after {
    position: absolute;

    inset: -1px;

    content: "";
    pointer-events: none;
}

.login-modal__dialog::before {
    background:
        radial-gradient(
            circle at top left,
            transparent 0 12px,
            rgba(226, 194, 119, 0.96) 12px 13px,
            transparent 13px 20px,
            rgba(226, 194, 119, 0.46) 20px 21px,
            transparent 21px
        ) top left / 46px 46px no-repeat,

        radial-gradient(
            circle at top right,
            transparent 0 12px,
            rgba(226, 194, 119, 0.96) 12px 13px,
            transparent 13px 20px,
            rgba(226, 194, 119, 0.46) 20px 21px,
            transparent 21px
        ) top right / 46px 46px no-repeat;
}

.login-modal__dialog::after {
    background:
        radial-gradient(
            circle at bottom left,
            transparent 0 12px,
            rgba(226, 194, 119, 0.96) 12px 13px,
            transparent 13px 20px,
            rgba(226, 194, 119, 0.46) 20px 21px,
            transparent 21px
        ) bottom left / 46px 46px no-repeat,

        radial-gradient(
            circle at bottom right,
            transparent 0 12px,
            rgba(226, 194, 119, 0.96) 12px 13px,
            transparent 13px 20px,
            rgba(226, 194, 119, 0.46) 20px 21px,
            transparent 21px
        ) bottom right / 46px 46px no-repeat;
}


/* Schließen */

.login-modal__close {
    position: absolute;
    z-index: 5;

    top: 15px;
    right: 17px;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(201, 164, 93, 0.44);

    background: rgba(4, 8, 16, 0.72);

    color: #ecd9aa;

    font-family: var(--font-heading);
    font-size: 22px;

    cursor: pointer;

    transition:
        color 200ms ease,
        border-color 200ms ease,
        background 200ms ease;
}

.login-modal__close:hover {
    color: #fff1c9;

    border-color: var(--color-gold-light);

    background: rgba(114, 88, 216, 0.18);
}


/* Ornament über der Überschrift */

.login-modal__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 23px;
}

.login-modal__ornament span {
    width: 54px;
    height: 1px;
}

.login-modal__ornament span:first-child {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 164, 93, 0.7)
        );
}

.login-modal__ornament span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(201, 164, 93, 0.7),
            transparent
        );
}

.login-modal__ornament img {
    width: 34px;
    height: 34px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 7px rgba(201, 164, 93, 0.28));
}


/* Texte */

.login-modal__eyebrow {
    margin: 0 0 8px;

    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;

    color: var(--color-gold);
}

.login-modal h2 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;

    color: #efddb2;
}

.login-modal__intro {
    margin: 12px 0 30px;

    color: var(--color-text-muted);

    text-align: center;
}


/* Formular */

.login-form {
    display: grid;
    gap: 19px;
}

.login-form__field {
    display: grid;
    gap: 7px;
}

.login-form__field label {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1.7px;
    text-transform: uppercase;

    color: #d2b978;
}

.login-form__field input {
    width: 100%;
    height: 48px;

    padding: 0 15px;

    border: 1px solid rgba(201, 164, 93, 0.3);
    outline: none;

    background: rgba(2, 6, 13, 0.72);

    color: var(--color-text);

    font-family: var(--font-body);
    font-size: 15px;

    transition:
        border-color 200ms ease,
        box-shadow 200ms ease,
        background 200ms ease;
}

.login-form__field input:focus {
    border-color: rgba(229, 197, 126, 0.78);

    background: rgba(4, 8, 18, 0.92);

    box-shadow:
        0 0 18px rgba(114, 88, 216, 0.17);
}

.login-form__remember {
    display: flex;
    align-items: center;
    gap: 10px;

    width: max-content;

    color: var(--color-text-muted);

    font-size: 13px;

    cursor: pointer;
}

.login-form__remember input {
    accent-color: var(--color-gold);
}


/* Formularbutton */

.login-form__submit {
    position: relative;

    height: 50px;

    margin-top: 5px;

    border: 1px solid rgba(201, 164, 93, 0.7);

    background:
        linear-gradient(
            180deg,
            rgba(201, 164, 93, 0.1),
            rgba(7, 10, 19, 0.96)
        );

    color: #ecd7a4;

    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 250ms ease,
        border-color 250ms ease,
        background 250ms ease,
        box-shadow 250ms ease;
}

.login-form__submit:hover {
    color: #fff1c8;

    border-color: var(--color-gold-light);

    background:
        linear-gradient(
            180deg,
            rgba(114, 88, 216, 0.2),
            rgba(7, 10, 19, 0.98)
        );

    box-shadow:
        0 0 24px rgba(114, 88, 216, 0.2);
}


/* Untere Links */

.login-modal__links {
    display: flex;
    justify-content: space-between;
    gap: 16px;

    margin-top: 24px;

    font-size: 12px;

    color: #a9a49a;
}

.login-modal__links a:hover {
    color: var(--color-gold-light);
}


/* Smartphone */

@media (max-width: 520px) {

    .login-modal {
        padding: 12px;
    }

    .login-modal__dialog {
        padding:
            50px
            24px
            34px;
    }

    .login-modal h2 {
        font-size: 30px;
    }

    .login-modal__links {
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================================
   HERO-TITEL – GOLDENER 3D-EFFEKT
========================================================= */

.hero__branding h1 {
    position: relative;

    margin: 0;

    color: #f3dfaa;

    font-family: "Cinzel", serif;
    font-weight: 500;
    letter-spacing: 3px;

    text-shadow:
        0 1px 0 #d7b86f,
        0 2px 0 #b88d45,
        0 3px 0 #805d29,
        0 4px 0 #493014,

        0 7px 10px rgba(0, 0, 0, 0.82),

        0 0 4px rgba(255, 232, 169, 0.32),
        0 0 14px rgba(195, 145, 58, 0.14);
}


/* sanfter Lichtglanz auf der Schrift */

.hero__branding h1::after {
    position: absolute;
    inset: 0;

    content: attr(data-title);

    color: transparent;

    background:
        linear-gradient(
            180deg,
            rgba(255, 251, 224, 0.92) 0%,
            rgba(255, 231, 163, 0.62) 32%,
            rgba(190, 139, 55, 0.18) 64%,
            transparent 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    pointer-events: none;

    opacity: 0.72;
}