* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #050304;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

img {
    user-select: none;
    -webkit-user-drag: none;
}

.landing {
    position: relative;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}


/* =========================
   BACKGROUND
========================= */

.background {
    position: absolute;
    inset: -3%;
    z-index: 0;

    background:
        url("/assets/img/background.webp")
        center center / cover no-repeat;

    transform: scale(1.02);
    animation: backgroundBreath 18s ease-in-out infinite alternate;
}

@keyframes backgroundBreath {
    0% {
        transform: scale(1.02) translate3d(0,0,0);
    }

    100% {
        transform: scale(1.055) translate3d(0,-0.4%,0);
    }
}


/* leichte Abdunklung außen */

.vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0,0,0,.15) 65%,
            rgba(0,0,0,.50) 110%
        );
}


/* =========================
   HERO
========================= */

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

    width: 100%;
    height: 100%;

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

    transform: translateY(-1.5vh);
}


/* =========================
   LOGO
========================= */

.logo-wrap {
    position: relative;

    width: min(42vw, 800px);

    animation:
        logoIntro 1.15s cubic-bezier(.17,.84,.33,1) both,
        logoFloat 6s ease-in-out 1.15s infinite;
}

.logo {
    display: block;
    width: 100%;
    height: auto;

    filter:
        drop-shadow(0 12px 20px rgba(0,0,0,.65))
        drop-shadow(0 0 10px rgba(160,0,20,.18));

    animation: logoPulse 4.5s ease-in-out infinite;
}

@keyframes logoIntro {
    from {
        opacity: 0;
        transform: translateY(-35px) scale(.91);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes logoFloat {
    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes logoPulse {
    0%,
    100% {
        filter:
            drop-shadow(0 12px 20px rgba(0,0,0,.65))
            drop-shadow(0 0 6px rgba(150,0,20,.16));
    }

    50% {
        filter:
            drop-shadow(0 15px 25px rgba(0,0,0,.72))
            drop-shadow(0 0 16px rgba(210,10,40,.32));
    }
}


/* =========================
   ENTER BUTTON
========================= */

.enter-button {
    position: relative;

    display: block;

    width: min(24vw, 460px);

    margin-top: clamp(18px, 2.2vh, 40px);

    text-decoration: none;

    transform:
        translateZ(0)
        scale(1);

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        filter .28s ease;

    animation: buttonIntro 1s .4s both;
}

.button-bg {
    display: block;

    width: 100%;
    height: auto;

    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.65))
        drop-shadow(0 0 8px rgba(180,0,30,.18));

    transition:
        filter .3s ease,
        transform .3s ease;
}


/* ENTER Text mittig */

.enter-text {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 42%;

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

    pointer-events: none;

    filter:
        drop-shadow(0 2px 4px rgba(0,0,0,.9));

    transition:
        filter .25s ease,
        transform .25s ease;
}


/* Lichtwelle */

.enter-glow {
    position: absolute;

    inset: 13% 7%;

    border-radius: 999px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    mix-blend-mode: screen;

    transition: opacity .25s ease;
}

.enter-glow::after {
    content: "";

    position: absolute;

    top: -40%;
    bottom: -40%;

    width: 22%;

    left: -35%;

    transform: skewX(-18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,30,55,.08),
            rgba(255,120,130,.58),
            rgba(255,30,55,.08),
            transparent
        );
}


/* Hover */

.enter-button:hover {
    transform:
        translateY(-6px)
        scale(1.035);
}

.enter-button:hover .button-bg {
    filter:
        drop-shadow(0 15px 22px rgba(0,0,0,.75))
        drop-shadow(0 0 15px rgba(225,0,35,.38));
}

.enter-button:hover .enter-text {
    transform:
        translate(-50%, -50%)
        translateY(-1%)
        scale(1.035);

    filter:
        drop-shadow(0 2px 5px rgba(0,0,0,.9))
        drop-shadow(0 0 8px rgba(210,10,35,.32));
}

.enter-button:hover .enter-glow {
    opacity: 1;
}

.enter-button:hover .enter-glow::after {
    animation: lightSweep .85s ease-out forwards;
}

@keyframes lightSweep {
    from {
        left: -35%;
    }

    to {
        left: 120%;
    }
}


/* Klick */

.enter-button:active {
    transform:
        translateY(1px)
        scale(.985);

    transition-duration: .08s;
}


/* Intro */

@keyframes buttonIntro {
    from {
        opacity: 0;
        transform:
            translateY(35px)
            scale(.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================
   EMBERS
========================= */

.embers {
    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;
    overflow: hidden;
}

.ember {
    position: absolute;

    bottom: -20px;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    background: rgba(255,45,55,.85);

    box-shadow:
        0 0 5px rgba(255,20,35,.8),
        0 0 10px rgba(180,0,20,.45);

    opacity: 0;

    animation:
        emberRise var(--duration)
        linear var(--delay)
        infinite;
}

@keyframes emberRise {
    0% {
        transform:
            translate3d(0,30px,0)
            scale(.4);

        opacity: 0;
    }

    10% {
        opacity: .7;
    }

    80% {
        opacity: .25;
    }

    100% {
        transform:
            translate3d(var(--drift),-105vh,0)
            scale(1.25);

        opacity: 0;
    }
}


/* =========================
   EXIT TRANSITION
========================= */

body.page-exit .hero {
    animation: heroExit .42s ease forwards;
}

body.page-exit .background {
    animation: backgroundExit .45s ease forwards;
}

body.page-exit::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 999;

    pointer-events: none;

    background: #070304;

    animation: fadeExit .45s ease forwards;
}

@keyframes heroExit {
    to {
        opacity: 0;
        transform:
            translateY(-1.5vh)
            scale(1.08);

        filter: blur(7px);
    }
}

@keyframes backgroundExit {
    to {
        transform: scale(1.09);
        filter: brightness(.45);
    }
}

@keyframes fadeExit {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


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

@media (max-width: 900px) {

    .logo-wrap {
        width: min(80vw, 620px);
    }

    .enter-button {
        width: min(58vw, 410px);
        margin-top: 16px;
    }

}


@media (max-width: 520px) {

    .hero {
        transform: translateY(-2vh);
    }

    .logo-wrap {
        width: 88vw;
    }

    .enter-button {
        width: 65vw;
    }

}


/* Reduced motion */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}

/* ===== QGAMING: STATIC LOGO + STATIC BUTTON ===== */

.logo-wrap,
.logo {
    animation: none !important;
    transform: none !important;
}

.enter-button,
.enter-button:hover,
.enter-button:active {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.enter-button:hover .button-bg,
.enter-button:active .button-bg {
    transform: none !important;
    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.65))
        drop-shadow(0 0 8px rgba(180,0,30,.18)) !important;
}

.enter-button:hover .enter-text,
.enter-button:active .enter-text {
    transform: translate(-50%, -50%) translateY(-1%) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.9)) !important;
}

.enter-glow {
    display: none !important;
}

/* ===== BUTTON + ENTER 50PX RUNTER ===== */
.enter-button {
    transform: translateY(50px) !important;
}

/* ===== BUTTON POSITION FEST - KEIN SPRINGEN ===== */
.enter-button,
.enter-button:hover,
.enter-button:active,
.enter-button:focus,
.enter-button:focus-visible {
    transform: translateY(50px) !important;
    animation: none !important;
    transition: none !important;
}

.enter-button:hover .button-bg,
.enter-button:active .button-bg,
.enter-button:focus .button-bg {
    transform: none !important;
    transition: none !important;
}

.enter-button:hover .enter-text,
.enter-button:active .enter-text,
.enter-button:focus .enter-text {
    transform: translate(-50%, -50%) translateY(-1%) !important;
    transition: none !important;
}

.enter-glow,
.enter-button:hover .enter-glow {
    display: none !important;
    animation: none !important;
}

/* ===== ENTER EXAKT MITTIG + GRÖSSER ===== */
.enter-text,
.enter-button:hover .enter-text,
.enter-button:active .enter-text,
.enter-button:focus .enter-text {
    left: 50% !important;
    top: 50% !important;
    width: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    transition: none !important;
}

/* ENTER TEXT 4PX HOCH */
.enter-text,
.enter-button:hover .enter-text,
.enter-button:active .enter-text,
.enter-button:focus .enter-text {
    transform: translate(-50%, calc(-50% - 4px)) !important;
}

/* ENTER NOCHMAL 4PX HOCH + 1% GRÖSSER */
.enter-text,
.enter-button:hover .enter-text,
.enter-button:active .enter-text,
.enter-button:focus .enter-text {
    width: 51% !important;
    transform: translate(-50%, calc(-50% - 8px)) !important;
}

/* ===== QGAMING LOGO GRÖSSER + HÖHER ===== */
.logo-wrap {
    width: min(45.5vw, 864px) !important;
    transform: translateY(-20px) !important;
    animation: none !important;
}

.logo {
    animation: none !important;
}

/* ===== QGAMING LOGO NOCH GRÖSSER ===== */
.logo-wrap {
    width: min(50vw, 950px) !important;
    transform: translateY(-20px) !important;
}

/* ===== BACKGROUND FINAL: 2% ZOOM, NULL BEWEGUNG ===== */
.background,
body.page-exit .background {
    inset: -3% !important;
    transform: scale(1.02) !important;
    animation: none !important;
    transition: none !important;
    translate: none !important;
}

.background:hover {
    transform: scale(1.02) !important;
}

/* ENTER TEXT 8PX RUNTER */
.enter-text {
    transform: translate(-50%, -50%) translateY(7px) !important;
}

/* ENTER TEXT 2PX HÖHER */
.enter-text {
    transform: translate(-50%, -50%) translateY(5px) !important;
}

/* ===== FINAL: ENTER POSITION + KEIN BUTTON HOVER-SPRUNG ===== */

.enter-text,
.enter-button:hover .enter-text,
.enter-button:active .enter-text {
    transform: translate(-50%, -50%) translateY(4px) !important;
}

.enter-button,
.enter-button:hover,
.enter-button:active {
    transform: translateY(50px) !important;
    transition: none !important;
}

.enter-button:hover .button-bg,
.enter-button:active .button-bg {
    transform: none !important;
}

.enter-glow {
    display: none !important;
}

/* ===== NUR ENTER HERE KLICKBAR ===== */
.enter-button {
    pointer-events: none !important;
    cursor: default !important;
}

.enter-text {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ==================================================
   QGAMING - MEHR GLUT + RAUCH VON UNTEN
   ================================================== */

.embers {
    z-index: 6 !important;
}

.ember {
    will-change: transform, opacity;
}

/* Rauch-Ebene */
.qg-smoke {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12%;
    height: 58%;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    opacity: .72;
    filter: blur(3px);
}

.qg-smoke-cloud {
    position: absolute;
    bottom: -28%;
    width: var(--w);
    height: var(--h);
    left: var(--x);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(45, 39, 42, .42) 0%,
            rgba(30, 25, 28, .32) 28%,
            rgba(20, 17, 19, .20) 48%,
            rgba(10, 8, 9, .08) 66%,
            transparent 76%
        );

    filter: blur(var(--blur));
    opacity: 0;

    transform: translate3d(0, 20%, 0) scale(.8);

    animation:
        qgSmokeRise var(--speed)
        ease-in-out var(--delay)
        infinite;

    will-change: transform, opacity;
}

.qg-smoke-cloud::after {
    content: "";
    position: absolute;
    inset: 12% 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(75, 25, 35, .12),
            rgba(40, 15, 22, .07) 42%,
            transparent 70%
        );

    filter: blur(18px);
}

@keyframes qgSmokeRise {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 18%, 0)
            scale(.72);
    }

    14% {
        opacity: .48;
    }

    45% {
        opacity: .62;
    }

    72% {
        opacity: .32;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(var(--drift), -92%, 0)
            scale(1.7);
    }
}

/* dichter Rauch direkt am unteren Rand */
.qg-smoke-floor {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -7%;
    height: 30%;
    z-index: 3;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 18% 100%,
            rgba(42,35,38,.38),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(38,31,34,.48),
            transparent 52%
        ),
        radial-gradient(
            ellipse at 82% 100%,
            rgba(42,35,38,.38),
            transparent 48%
        );

    filter: blur(25px);
    opacity: .75;

    animation: qgFloorSmoke 7s ease-in-out infinite alternate;
}

@keyframes qgFloorSmoke {
    from {
        transform: translate3d(-1.5%, 0, 0) scale(1);
    }

    to {
        transform: translate3d(1.5%, -2%, 0) scale(1.04);
    }
}

@media (max-width: 700px) {
    .qg-smoke {
        height: 48%;
        opacity: .58;
    }

    .qg-smoke-floor {
        opacity: .62;
    }
}


/* ===== MEHR SICHTBARE GLUT / FUNKEN ===== */

.ember {
    opacity: .95 !important;
    background: rgba(255,70,55,.98) !important;

    box-shadow:
        0 0 6px rgba(255,45,35,.95),
        0 0 14px rgba(220,15,25,.75),
        0 0 24px rgba(150,0,15,.38) !important;
}

@keyframes emberRise {
    0% {
        transform: translate3d(0,35px,0) scale(.5);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    45% {
        opacity: .9;
    }

    80% {
        opacity: .55;
    }

    100% {
        transform: translate3d(var(--drift),-108vh,0) scale(1.45);
        opacity: 0;
    }
}


/* ===== RAUCH DEUTLICH SICHTBARER ===== */

.qg-smoke {
    bottom: -8% !important;
    height: 72% !important;
    opacity: .95 !important;
    filter: blur(2px) !important;
}

.qg-smoke-cloud {
    background:
        radial-gradient(
            ellipse at center,
            rgba(70,62,66,.62) 0%,
            rgba(48,41,45,.52) 25%,
            rgba(30,25,28,.38) 48%,
            rgba(15,12,14,.18) 68%,
            transparent 80%
        ) !important;
}

.qg-smoke-floor {
    height: 38% !important;
    bottom: -5% !important;
    opacity: .95 !important;
    filter: blur(20px) !important;

    background:
        radial-gradient(
            ellipse at 15% 100%,
            rgba(70,60,65,.58),
            transparent 50%
        ),
        radial-gradient(
            ellipse at 40% 100%,
            rgba(60,50,55,.68),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 65% 100%,
            rgba(65,53,58,.64),
            transparent 54%
        ),
        radial-gradient(
            ellipse at 88% 100%,
            rgba(70,60,65,.58),
            transparent 50%
        ) !important;
}

/* ===== RAUCH ÜBER BUTTON + ENTER HERE ===== */
.qg-smoke,
.qg-smoke-floor {
    z-index: 20 !important;
}

.hero {
    z-index: 10 !important;
}

.embers {
    z-index: 21 !important;
}

/* ===== RAUCH FLÜSSIG - KEIN FLACKERN ===== */

.qg-smoke-cloud {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

@keyframes qgSmokeRise {
    0% {
        opacity: 0;
        transform: translate3d(0,18%,0) scale(.72);
    }

    12% {
        opacity: .18;
    }

    25% {
        opacity: .42;
    }

    40% {
        opacity: .58;
    }

    55% {
        opacity: .62;
    }

    70% {
        opacity: .55;
    }

    82% {
        opacity: .38;
    }

    92% {
        opacity: .16;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--drift),-92%,0) scale(1.7);
    }
}

/* Bodenrauch ebenfalls ruhiger */
.qg-smoke-floor {
    will-change: transform, opacity;
    backface-visibility: hidden;
    animation: qgFloorSmokeSmooth 12s ease-in-out infinite alternate !important;
}

@keyframes qgFloorSmokeSmooth {
    0% {
        transform: translate3d(-1%,0,0) scale(1);
    }

    50% {
        transform: translate3d(0,-1%,0) scale(1.025);
    }

    100% {
        transform: translate3d(1%,-2%,0) scale(1.04);
    }
}

/* ===== QGAMING FOOTER ===== */
.qg-footer {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 50;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 7px;

    white-space: nowrap;

    color: rgba(190, 185, 187, .72);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;

    text-shadow:
        0 2px 4px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.8);

    pointer-events: none;
}

.qg-copyright {
    font-size: 14px;
    color: rgba(220, 215, 216, .82);
}

.qg-footer-domain {
    color: rgba(170, 45, 55, .90);

    text-shadow:
        0 2px 4px rgba(0,0,0,.95),
        0 0 7px rgba(150,0,20,.28);
}

.qg-footer-separator {
    color: rgba(125, 120, 122, .60);
}

@media (max-width: 520px) {
    .qg-footer {
        bottom: 9px;
        gap: 5px;
        font-size: 9px;
        letter-spacing: .6px;
    }

    .qg-copyright {
        font-size: 11px;
    }
}

/* ===== FOOTER FINAL: MAGMA STRIPES + SILBER + RED GLOW ===== */

.qg-footer {
    bottom: 14px !important;
    z-index: 50 !important;

    color: #b9b9bd !important;

    text-shadow:
        0 1px 1px rgba(255,255,255,.14),
        0 2px 4px rgba(0,0,0,.95) !important;
}

/* MAGMA LINKS */
.qg-footer::before {
    content: "";
    position: absolute;

    right: calc(100% + 18px);
    top: 50%;

    width: min(28vw, 430px);
    height: 2px;

    transform: translateY(-50%);

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(80,0,8,.12) 18%,
        rgba(125,0,14,.28) 45%,
        rgba(185,5,20,.55) 70%,
        rgba(255,28,38,.95) 100%
    );

    box-shadow:
        0 0 3px rgba(120,0,10,.25),
        0 0 7px rgba(190,0,18,.30),
        0 0 12px rgba(255,15,30,.20);

    pointer-events: none;
}

/* MAGMA RECHTS */
.qg-footer::after {
    content: "";
    position: absolute;

    left: calc(100% + 18px);
    top: 50%;

    width: min(28vw, 430px);
    height: 2px;

    transform: translateY(-50%);

    background: linear-gradient(
        90deg,
        rgba(255,28,38,.95) 0%,
        rgba(185,5,20,.55) 30%,
        rgba(125,0,14,.28) 55%,
        rgba(80,0,8,.12) 82%,
        transparent 100%
    );

    box-shadow:
        0 0 3px rgba(120,0,10,.25),
        0 0 7px rgba(190,0,18,.30),
        0 0 12px rgba(255,15,30,.20);

    pointer-events: none;
}

/* COPYRIGHT + JAHR + ALL RIGHTS = SILBER */
.qg-footer > span:not(.qg-footer-domain) {
    color: #bfc0c3 !important;

    text-shadow:
        0 1px 1px rgba(255,255,255,.16),
        0 2px 4px rgba(0,0,0,.95) !important;
}

/* QGAMING.EU = INTENSIVES ROT */
.qg-footer-domain {
    color: #ff2638 !important;
    font-weight: 800 !important;

    text-shadow:
        0 0 3px rgba(255,30,45,.95),
        0 0 7px rgba(255,10,30,.75),
        0 0 14px rgba(210,0,20,.55),
        0 0 22px rgba(150,0,15,.30) !important;
}

/* ===== FOOTER HINTER RAUCH + QGAMING KLICKBAR ===== */

.qg-footer {
    z-index: 15 !important;
    pointer-events: none !important;
}

.qg-footer-domain {
    position: relative;
    z-index: 1;

    color: #e42a38 !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;

    /* weniger Glow */
    text-shadow:
        0 0 2px rgba(255,30,45,.65),
        0 0 5px rgba(210,0,25,.38),
        0 2px 4px rgba(0,0,0,.9) !important;
}

/* Rauch liegt über Footer */
.qg-smoke,
.qg-smoke-floor {
    z-index: 20 !important;
    pointer-events: none !important;
}

/* Funken weiterhin ganz oben */
.embers {
    z-index: 21 !important;
}

/* ==================================================
   QGAMING MOBILE FINAL
   Desktop bleibt unverändert
   ================================================== */

@media (max-width: 700px) {

    .landing {
        width: 100vw;
        height: 100svh;
        overflow: hidden;
    }

    .background {
        background-position: center center !important;
        background-size: cover !important;
        transform: scale(1.02) !important;
    }

    .hero {
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

        transform: translateY(-2vh) !important;
    }

    /* LOGO */
    .logo-wrap {
        width: 88vw !important;
        max-width: none !important;

        transform: translateY(-18px) !important;
    }

    .logo {
        width: 100%;
        height: auto;
    }

    /* BUTTON */
    .enter-button,
    .enter-button:hover,
    .enter-button:active,
    .enter-button:focus {
        width: 72vw !important;
        max-width: 420px;

        margin-top: 8px !important;

        transform: translateY(38px) !important;
    }

    /* ENTER HERE */
    .enter-text,
    .enter-button:hover .enter-text,
    .enter-button:active .enter-text,
    .enter-button:focus .enter-text {
        width: 51% !important;

        left: 50% !important;
        top: 50% !important;

        transform:
            translate(-50%, -50%)
            translateY(4px) !important;
    }

    /* RAUCH */
    .qg-smoke {
        height: 62% !important;
        bottom: -10% !important;
        opacity: .82 !important;
    }

    .qg-smoke-floor {
        height: 30% !important;
        bottom: -6% !important;
        opacity: .82 !important;
    }

    /* FOOTER */
    .qg-footer {
        bottom: 9px !important;

        font-size: 9px !important;
        letter-spacing: .45px !important;

        gap: 4px !important;

        width: max-content;
        max-width: 94vw;

        justify-content: center;
    }

    .qg-footer::before,
    .qg-footer::after {
        width: 12vw !important;
    }

    .qg-copyright {
        font-size: 10px !important;
    }

    .qg-footer-domain {
        font-size: 9px !important;
    }
}


/* sehr kleine Smartphones */
@media (max-width: 430px) {

    .logo-wrap {
        width: 92vw !important;
        transform: translateY(-14px) !important;
    }

    .enter-button,
    .enter-button:hover,
    .enter-button:active,
    .enter-button:focus {
        width: 78vw !important;
        transform: translateY(32px) !important;
    }

    .qg-footer {
        font-size: 8px !important;
        gap: 3px !important;
        letter-spacing: .25px !important;
    }

    .qg-footer::before,
    .qg-footer::after {
        width: 7vw !important;
    }
}

/* MOBILE: ENTER HERE 1PX HÖHER */
@media (max-width: 700px) {
    .enter-text,
    .enter-button:hover .enter-text,
    .enter-button:active .enter-text,
    .enter-button:focus .enter-text {
        transform: translate(-50%, -50%) translateY(3px) !important;
    }
}

/* ===== MOBILE: LOGO GRÖSSER + WALLPAPER ENDLOS FLÄCHE ===== */
@media (max-width: 700px) {

    /* Wallpaper mit Überstand auf allen Seiten */
    .background {
        inset: -8% !important;
        width: auto !important;
        height: auto !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        transform: scale(1.05) !important;
    }

    /* Logo größer */
    .logo-wrap {
        width: 98vw !important;
        max-width: 98vw !important;
    }
}

@media (max-width: 430px) {
    .logo-wrap {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}