:root {
    --gold: #c79a42;
    --gold-light: #ffe4a1;
    --gold-dark: #5f4218;
    --fel: #73ff64;
    --fel-light: #d2ffac;
    --fel-dark: #174b20;
    --text: #eadcb9;
    --muted: #9d9583;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;

    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    background: #030503;
}

/* Hintergrund */
.sky {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 58%,
            rgba(73, 255, 77, 0.16),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 72% 12%,
            rgba(135, 187, 198, 0.17),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #101a2a 0%,
            #0a1015 43%,
            #060a07 70%,
            #010201 100%
        );
}

.sky::before {
    position: absolute;
    z-index: 1;
    inset: -20%;

    content: "";

    background:
        radial-gradient(
            ellipse at 40% 60%,
            rgba(65, 255, 85, 0.15),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 67% 67%,
            rgba(40, 164, 58, 0.11),
            transparent 38%
        );

    filter: blur(62px);

    animation: skyFog 15s ease-in-out infinite alternate;
}

.sky::after {
    position: absolute;
    z-index: 7;
    right: -15%;
    bottom: -23%;
    left: -15%;

    height: 55%;

    content: "";

    background:
        radial-gradient(
            ellipse at center,
            rgba(62, 222, 76, 0.13),
            transparent 64%
        );

    filter: blur(75px);

    animation: groundFog 10s ease-in-out infinite alternate;
}

/* Sterne */
.stars {
    position: absolute;
    z-index: 0;
    inset: 0;

    pointer-events: none;
}

.stars-one {
    opacity: 0.32;

    background-image:
        radial-gradient(circle, #ffffff 0 1px, transparent 1.5px),
        radial-gradient(circle, #a6ded8 0 1px, transparent 1.4px);

    background-position:
        0 0,
        82px 48px;

    background-size:
        180px 180px,
        245px 245px;

    animation: starDrift 45s linear infinite;
}

.stars-two {
    opacity: 0.16;

    background-image:
        radial-gradient(circle, #ffffff 0 1.3px, transparent 1.8px);

    background-position: 40px 20px;
    background-size: 330px 330px;

    animation: starDrift 70s linear infinite reverse;
}

/* Mond */
.moon {
    position: absolute;
    z-index: 1;
    top: 5%;
    right: 8%;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 34%,
            rgba(237, 255, 247, 0.88),
            rgba(169, 205, 191, 0.58) 29%,
            rgba(95, 137, 130, 0.34) 58%,
            rgba(49, 75, 72, 0.14) 72%,
            transparent 74%
        );

    box-shadow:
        0 0 45px rgba(186, 230, 215, 0.28),
        0 0 125px rgba(116, 176, 165, 0.19);

    animation: moonBreath 8s ease-in-out infinite;
}

.moon::before,
.moon::after {
    position: absolute;

    border-radius: 50%;

    content: "";

    background: rgba(67, 101, 96, 0.14);
}

.moon::before {
    top: 31%;
    left: 24%;

    width: 36px;
    height: 28px;
}

.moon::after {
    right: 26%;
    bottom: 28%;

    width: 26px;
    height: 24px;
}

/* Nebel */
.mist {
    position: absolute;
    z-index: 5;

    border-radius: 50%;

    pointer-events: none;
}

.mist-one {
    right: -15%;
    bottom: 1%;

    width: 76%;
    height: 22%;

    background:
        radial-gradient(
            ellipse,
            rgba(95, 255, 111, 0.14),
            transparent 69%
        );

    filter: blur(48px);

    animation: mistOne 13s ease-in-out infinite alternate;
}

.mist-two {
    bottom: 5%;
    left: -16%;

    width: 70%;
    height: 20%;

    background:
        radial-gradient(
            ellipse,
            rgba(57, 181, 70, 0.11),
            transparent 70%
        );

    filter: blur(50px);

    animation: mistTwo 16s ease-in-out infinite alternate;
}

/* Portal-Szene */
.portal-scene {
    position: absolute;
    z-index: 3;
    top: 56%;
    left: 50%;

    display: grid;
    width: 1000px;
    height: 1000px;
    place-items: center;

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

    pointer-events: none;
}

.portal-aura,
.portal-arch,
.portal-core,
.portal-vortex,
.portal-runes,
.portal-particles,
.portal-pedestal {
    grid-area: 1 / 1;
}

.portal-aura {
    width: 990px;
    height: 980px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(120, 255, 103, 0.42) 0%,
            rgba(52, 221, 67, 0.24) 31%,
            rgba(21, 105, 31, 0.1) 52%,
            transparent 73%
        );

    filter: blur(50px);

    animation: auraPulse 4s ease-in-out infinite;
}

.portal-arch {
    position: relative;

    border-radius: 50% 50% 44% 44%;
}

.portal-arch-outer {
    z-index: 3;

    width: 780px;
    height: 900px;

    border: 48px solid #252c24;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05),
            transparent 20% 80%,
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        inset 0 0 48px rgba(0, 0, 0, 0.94),
        inset 0 0 10px rgba(117, 255, 105, 0.38),
        0 0 28px rgba(105, 255, 103, 0.72),
        0 0 88px rgba(66, 233, 80, 0.35),
        0 35px 75px rgba(0, 0, 0, 0.8);

    animation: archPulse 4.6s ease-in-out infinite;
}

.portal-arch-outer::before,
.portal-arch-outer::after {
    position: absolute;
    top: 55px;
    bottom: 50px;

    width: 50px;

    border-radius: 42%;

    content: "";

    background:
        repeating-linear-gradient(
            180deg,
            #424b3c 0 42px,
            #1b211b 43px 52px,
            #313a2f 53px 92px
        );

    box-shadow:
        inset 0 0 13px #000000,
        0 0 13px rgba(101, 255, 100, 0.25);
}

.portal-arch-outer::before {
    left: -78px;
}

.portal-arch-outer::after {
    right: -78px;
}

.portal-arch-inner {
    z-index: 4;

    width: 690px;
    height: 810px;

    border: 12px solid rgba(115, 255, 100, 0.34);

    box-shadow:
        inset 0 0 25px rgba(7, 38, 12, 0.82),
        0 0 32px rgba(94, 255, 91, 0.74);

    animation: innerArchPulse 3s ease-in-out infinite;
}

.portal-core {
    position: relative;
    z-index: 2;

    width: 655px;
    height: 775px;
    overflow: hidden;

    border-radius: 50% 50% 45% 45%;

    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgba(234, 255, 213, 0.98) 0%,
            rgba(167, 255, 137, 0.96) 13%,
            rgba(67, 228, 77, 0.96) 35%,
            rgba(20, 116, 32, 0.99) 68%,
            rgba(4, 29, 9, 1) 100%
        );

    box-shadow:
        inset 0 0 80px rgba(244, 255, 226, 0.9),
        inset 0 0 190px rgba(112, 255, 95, 0.76),
        0 0 38px rgba(104, 255, 103, 0.95),
        0 0 120px rgba(62, 242, 76, 0.64);

    animation: corePulse 2.6s ease-in-out infinite;
}

.portal-core::before {
    position: absolute;
    inset: 5%;

    border-radius: inherit;

    content: "";

    opacity: 0.7;

    background:
        repeating-radial-gradient(
            ellipse at center,
            transparent 0 26px,
            rgba(218, 255, 194, 0.18) 31px,
            transparent 46px
        );

    animation: currentSpin 7s linear infinite;
}

.portal-core::after {
    position: absolute;
    inset: 0;

    content: "";

    background:
        linear-gradient(
            115deg,
            transparent 0 37%,
            rgba(255, 255, 255, 0.12) 42%,
            transparent 48% 100%
        );

    animation: energySweep 4.8s ease-in-out infinite;
}

.portal-vortex {
    z-index: 5;

    width: 610px;
    height: 730px;

    border-radius: 50%;

    opacity: 0.58;

    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(226, 255, 204, 0.36),
            transparent 20%,
            rgba(110, 255, 104, 0.3),
            transparent 45%,
            rgba(231, 255, 214, 0.29),
            transparent 71%,
            rgba(104, 255, 111, 0.28),
            transparent
        );

    filter: blur(8px);
    mix-blend-mode: screen;

    animation: vortexSpin 9s linear infinite;
}

.portal-runes {
    z-index: 6;

    width: 725px;
    height: 845px;

    border: 2px dashed rgba(174, 255, 146, 0.18);
    border-radius: 50%;

    box-shadow:
        inset 0 0 20px rgba(134, 255, 119, 0.09),
        0 0 18px rgba(134, 255, 119, 0.08);

    animation: runeSpin 35s linear infinite;
}

.portal-pedestal {
    z-index: 7;

    width: 820px;
    height: 120px;
    margin-top: 780px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            #303a2d 0 24%,
            #171d17 48%,
            transparent 72%
        );

    filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.75));
}

/* Partikel */
.portal-particles {
    position: relative;
    z-index: 8;

    width: 840px;
    height: 900px;
}

.portal-particles span {
    position: absolute;
    bottom: 105px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    opacity: 0;

    background: #c7ffa6;

    box-shadow:
        0 0 9px #b4ff94,
        0 0 22px rgba(103, 255, 104, 0.95);

    animation: particleRise 6.4s linear infinite;
}

.portal-particles span:nth-child(1)  { left: 24%; animation-delay: 0s; }
.portal-particles span:nth-child(2)  { left: 31%; animation-delay: 0.4s; }
.portal-particles span:nth-child(3)  { left: 39%; animation-delay: 0.8s; }
.portal-particles span:nth-child(4)  { left: 47%; animation-delay: 1.2s; }
.portal-particles span:nth-child(5)  { left: 55%; animation-delay: 1.6s; }
.portal-particles span:nth-child(6)  { left: 63%; animation-delay: 2s; }
.portal-particles span:nth-child(7)  { left: 71%; animation-delay: 2.4s; }
.portal-particles span:nth-child(8)  { left: 78%; animation-delay: 2.8s; }
.portal-particles span:nth-child(9)  { left: 28%; animation-delay: 3.2s; }
.portal-particles span:nth-child(10) { left: 37%; animation-delay: 3.6s; }
.portal-particles span:nth-child(11) { left: 46%; animation-delay: 4s; }
.portal-particles span:nth-child(12) { left: 54%; animation-delay: 4.4s; }
.portal-particles span:nth-child(13) { left: 62%; animation-delay: 4.8s; }
.portal-particles span:nth-child(14) { left: 69%; animation-delay: 5.2s; }
.portal-particles span:nth-child(15) { left: 75%; animation-delay: 5.6s; }
.portal-particles span:nth-child(16) { left: 34%; animation-delay: 6s; }

/* Berge und Vordergrund */
.mountains {
    position: absolute;
    z-index: 5;
    bottom: 0;

    width: 62%;
    height: 42%;

    background:
        linear-gradient(
            180deg,
            #11170f,
            #030503
        );

    clip-path:
        polygon(
            0 100%,
            0 55%,
            10% 42%,
            21% 52%,
            34% 13%,
            47% 58%,
            59% 27%,
            72% 67%,
            86% 35%,
            100% 72%,
            100% 100%
        );

    box-shadow:
        inset 0 25px 40px rgba(74, 145, 68, 0.08);
}

.mountains-left {
    left: 0;

    opacity: 0.9;
}

.mountains-right {
    right: 0;

    transform: scaleX(-1);
}

.foreground {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    left: 0;

    height: 12%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(1, 3, 1, 0.9) 55%,
            #010201
        );
}

/* Navigation */
.back {
    position: fixed;
    z-index: 30;
    top: 18px;
    left: 20px;

    color: #e5c473;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    text-decoration: none;

    text-shadow: 0 2px 6px #000000;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.back:hover {
    color: #fff0b5;

    transform: translateX(-3px);
}

/* Seiteninhalt */
.page {
    position: relative;
    z-index: 20;

    display: flex;
    min-height: 100vh;
    padding: 38px 18px 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.realm-header {
    margin-bottom: 18px;

    text-align: center;
    text-shadow: 0 3px 8px #000000;
}

.realm-header p {
    margin: 0;

    color: #badf96;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.realm-header h1 {
    margin: 7px 0 6px;

    color: var(--gold-light);

    font-size: clamp(38px, 6vw, 66px);
    line-height: 1;
    text-transform: uppercase;

    text-shadow:
        0 3px 0 #4a3010,
        0 8px 16px rgba(0, 0, 0, 0.95),
        0 0 28px rgba(113, 255, 101, 0.13);
}

.realm-header span {
    color: #a8ff80;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Formularrahmen */
.frame {
    position: relative;

    width: min(510px, 100%);
    padding: 12px;

    border: 2px solid #9a7431;

    background:
        linear-gradient(
            145deg,
            rgba(38, 33, 25, 0.97),
            rgba(13, 13, 10, 0.98)
        );

    box-shadow:
        0 0 0 1px rgba(31, 21, 7, 0.9),
        0 18px 55px rgba(0, 0, 0, 0.92),
        0 0 42px rgba(79, 255, 80, 0.09);
}

.frame::before,
.frame::after {
    position: absolute;
    z-index: -1;
    top: 50%;

    width: 72px;
    height: 64%;

    content: "";

    transform: translateY(-50%);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(106, 78, 31, 0.75) 18%,
            rgba(52, 38, 18, 0.92) 50%,
            rgba(106, 78, 31, 0.75) 82%,
            transparent
        );

    clip-path:
        polygon(
            100% 0,
            70% 18%,
            100% 35%,
            73% 50%,
            100% 66%,
            68% 84%,
            100% 100%,
            0 100%,
            0 0
        );
}

.frame::before {
    left: -55px;
}

.frame::after {
    right: -55px;

    transform: translateY(-50%) scaleX(-1);
}

.frame-corner {
    position: absolute;
    z-index: 3;

    width: 29px;
    height: 29px;

    border-color: var(--gold);
    border-style: solid;
}

.frame-corner-tl {
    top: 5px;
    left: 5px;

    border-width: 2px 0 0 2px;
}

.frame-corner-tr {
    top: 5px;
    right: 5px;

    border-width: 2px 2px 0 0;
}

.frame-corner-bl {
    bottom: 5px;
    left: 5px;

    border-width: 0 0 2px 2px;
}

.frame-corner-br {
    right: 5px;
    bottom: 5px;

    border-width: 0 2px 2px 0;
}

.inner {
    padding: 34px;

    border: 1px solid #5e4825;

    text-align: center;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(78, 103, 53, 0.11),
            transparent 38%
        ),
        linear-gradient(
            rgba(31, 31, 23, 0.97),
            rgba(9, 11, 8, 0.99)
        );

    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.62);
}

.kicker {
    margin: 0 0 7px;

    color: #9be46f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.inner h2 {
    margin: 4px 0 8px;

    color: var(--gold-light);

    font-size: 31px;
    font-weight: normal;
}

.intro {
    margin: 0 0 18px;

    color: #aaa38e;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    line-height: 1.6;
}

/* Meldungen */
.message {
    padding: 12px;
    margin: 16px 0;

    border: 1px solid;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    line-height: 1.5;
}

.message.success {
    border-color: #568c42;

    color: #c8ffac;

    background: #19331a;
}

.message.error {
    border-color: #a34c42;

    color: #ffd0c5;

    background: #3d1716;
}

/* Formular */
form {
    margin-top: 16px;
}

label {
    display: block;
    margin: 15px 0;

    color: #e8d7ae;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    text-align: left;
}

input {
    width: 100%;
    margin-top: 7px;
    padding: 13px;

    border: 1px solid #725c32;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    outline: none;

    background:
        linear-gradient(
            180deg,
            #0d100c,
            #070907
        );

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

input:hover {
    border-color: #8d7440;
}

input:focus {
    border-color: #9ee76c;

    background: #0b0f0a;

    box-shadow:
        0 0 9px rgba(120, 255, 91, 0.38),
        inset 0 0 10px rgba(85, 255, 94, 0.05);
}

label small {
    display: block;
    margin-top: 5px;

    color: #85816f;

    font-size: 11px;
}

.trap {
    position: absolute;
    left: -9999px;
}

button {
    position: relative;

    width: 100%;
    margin-top: 12px;
    padding: 14px;
    overflow: hidden;

    border: 1px solid #b68a39;

    color: #17200f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    cursor: pointer;

    background:
        linear-gradient(
            180deg,
            #d7f4a0,
            #75aa47
        );

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.4),
        0 0 15px rgba(115, 231, 83, 0.14);

    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

button::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;

    width: 28%;

    content: "";

    transform: skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.36),
            transparent
        );

    transition: left 400ms ease;
}

button span {
    position: relative;
    z-index: 2;
}

button:hover {
    filter: brightness(1.11);

    transform: translateY(-1px);

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.45),
        0 0 23px rgba(115, 231, 83, 0.25);
}

button:hover::before {
    left: 108%;
}

button:active {
    transform: translateY(0);
}

.footer-text {
    margin: 22px 0 0;

    color: #8f8877;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    line-height: 1.5;
}

/* Animationen */
@keyframes skyFog {
    from {
        transform: translate(-45px, 10px) scale(1);
    }

    to {
        transform: translate(55px, -18px) scale(1.05);
    }
}

@keyframes groundFog {
    from {
        opacity: 0.55;
        transform: translateX(-3%) scale(1);
    }

    to {
        opacity: 1;
        transform: translateX(3%) scale(1.08);
    }
}

@keyframes starDrift {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-80px, 35px);
    }
}

@keyframes moonBreath {
    0%,
    100% {
        opacity: 0.78;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes mistOne {
    from {
        transform: translateX(-40px) scale(1);
    }

    to {
        transform: translateX(65px) scale(1.1);
    }
}

@keyframes mistTwo {
    from {
        transform: translateX(55px) scale(1.06);
    }

    to {
        transform: translateX(-35px) scale(0.98);
    }
}

@keyframes auraPulse {
    0%,
    100% {
        opacity: 0.62;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes archPulse {
    0%,
    100% {
        filter: brightness(0.9);
        transform: scale(1);
    }

    50% {
        filter: brightness(1.13);
        transform: scale(1.012);
    }
}

@keyframes innerArchPulse {
    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

@keyframes corePulse {
    0%,
    100% {
        filter: brightness(0.91);
        transform: scale(0.975);
    }

    50% {
        filter: brightness(1.16);
        transform: scale(1.025);
    }
}

@keyframes currentSpin {
    from {
        transform: rotate(0deg) scale(1);
    }

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

@keyframes energySweep {
    0%,
    15% {
        transform: translateX(-70%) skewX(-10deg);
    }

    65%,
    100% {
        transform: translateX(75%) skewX(-10deg);
    }
}

@keyframes vortexSpin {
    from {
        transform: rotate(0deg);
    }

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

@keyframes runeSpin {
    from {
        transform: rotate(0deg);
    }

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

@keyframes particleRise {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3);
    }

    13% {
        opacity: 1;
    }

    70% {
        opacity: 0.82;
    }

    100% {
        opacity: 0;
        transform: translate(55px, -650px) scale(1.6);
    }
}

/* Responsive */
@media (max-width: 1000px) {
    .portal-scene {
        transform: translate(-50%, -50%) scale(0.82);
    }

    .moon {
        width: 190px;
        height: 190px;
    }
}

@media (max-width: 720px) {
    .moon {
        top: 5%;
        right: -35px;

        width: 145px;
        height: 145px;
    }

    .portal-scene {
        top: 57%;

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

    .mountains {
        width: 78%;
        height: 33%;
    }

    .page {
        padding-top: 58px;
    }

    .frame::before,
    .frame::after {
        display: none;
    }
}

@media (max-width: 560px) {
    .page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .realm-header h1 {
        font-size: 39px;
    }

    .realm-header span {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .frame {
        padding: 8px;
    }

    .inner {
        padding: 25px 18px;
    }
}

@media (max-width: 440px) {
    .portal-scene {
        top: 60%;

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

    .back {
        top: 12px;
        left: 12px;

        font-size: 12px;
    }
}

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