/* =========================================================
   EVIS KIOSK & ARCADE ZONE
   NEON ARCADE DESIGN
========================================================= */


/* =========================================================
   GRUNDLAGEN
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #05020a;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

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

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


/* =========================================================
   HINTERGRUND
========================================================= */

.background-glow {
    position: fixed;
    width: 700px;
    height: 700px;
    top: -250px;
    left: 50%;
    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255, 0, 190, 0.25) 0%,
            rgba(132, 0, 255, 0.15) 35%,
            transparent 70%
        );

    filter: blur(30px);
    pointer-events: none;
    z-index: -2;
}


.grid-background {
    position: fixed;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 0, 204, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 0, 204, 0.06) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   NAVBAR – SCHMAL
========================================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 999;

    padding: 7px 4%;

    background: rgba(5, 2, 10, 0.82);

    backdrop-filter: blur(12px);

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

    transition: 0.3s ease;
}


.navbar.scrolled {

    background:
        rgba(5, 2, 10, 0.96);

    box-shadow:
        0 0 25px
        rgba(255, 0, 200, 0.15);
}


.nav-container {

    max-width:
        1400px;

    height:
        58px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;
}


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

.logo img {

    width:
        1ßßpx;

    border-radius:
        8px;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255, 0, 204, 0.45)
        );
}


/* =========================================================
   NAVIGATION
========================================================= */

.navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;
}


.navigation a {

    position:
        relative;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        500;

    transition:
        0.3s ease;
}


.navigation a::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -7px;

    width:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #ff00cc,
            #ff8a00
        );

    transform:
        translateX(-50%);

    transition:
        0.3s ease;

    box-shadow:
        0 0 10px
        #ff00cc;
}


.navigation a:hover {

    color:
        #ff4bd8;

    text-shadow:
        0 0 10px
        #ff00cc;
}


.navigation a:hover::after {

    width:
        100%;
}


/* =========================================================
   NAV BUTTON
========================================================= */

.nav-button {

    padding:
        8px 15px;

    border-radius:
        7px;

    background:
        linear-gradient(
            135deg,
            #8c00ff,
            #ff009d
        );

    border:
        1px solid
        rgba(255,255,255,0.2);

    box-shadow:
        0 0 12px
        rgba(255,0,204,0.35);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        0.3s ease;
}


.nav-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 0 20px
        rgba(255,0,204,0.65);
}


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

.hero {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        115px 20px 80px;

    position:
        relative;
}


.hero-content {

    width:
        100%;

    max-width:
        1100px;

    margin:
        auto;
}


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

.hero-logo img {

    width:
        min(500px, 90vw);

    margin:
        0 auto 35px;

    border-radius:
        20px;

    filter:

        drop-shadow(
            0 0 15px
            rgba(255,0,200,0.55)
        )

        drop-shadow(
            0 0 40px
            rgba(140,0,255,0.35)
        );

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


@keyframes neonPulse {

    0% {

        filter:
            drop-shadow(
                0 0 15px
                rgba(255,0,200,0.45)
            );
    }

    50% {

        filter:
            drop-shadow(
                0 0 35px
                rgba(255,0,200,0.8)
            );
    }

    100% {

        filter:
            drop-shadow(
                0 0 15px
                rgba(255,0,200,0.45)
            );
    }
}


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

.neon-small {

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        13px;

    letter-spacing:
        5px;

    color:
        #ff63df;

    margin-bottom:
        15px;

    text-shadow:
        0 0 10px
        #ff00cc;
}


.hero h1 {

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            35px,
            5vw,
            65px
        );

    font-weight:
        900;

    line-height:
        1.1;

    background:
        linear-gradient(
            90deg,
            #c82cff,
            #ff00b7,
            #ff8a00
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    text-shadow:
        0 0 35px
        rgba(255,0,200,0.25);
}


.hero h1 span {

    display:
        block;

    font-size:
        0.55em;

    margin-top:
        12px;

    letter-spacing:
        3px;
}


.hero-text p {

    margin-top:
        25px;

    color:
        #cfcfcf;

    font-size:
        17px;

    letter-spacing:
        2px;
}


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

.hero-buttons {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        35px;
}


.neon-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        14px 25px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #8c00ff,
            #ff00a8
        );

    border:
        1px solid
        rgba(255,255,255,0.25);

    box-shadow:
        0 0 20px
        rgba(255,0,200,0.45);

    font-weight:
        700;

    transition:
        0.3s ease;
}


.neon-button:hover {

    transform:
        translateY(-4px)
        scale(1.02);

    box-shadow:
        0 0 35px
        rgba(255,0,200,0.8);
}


.neon-button.orange {

    background:
        linear-gradient(
            135deg,
            #ff5200,
            #ff9a00
        );

    box-shadow:
        0 0 20px
        rgba(255,120,0,0.4);
}


.neon-button.orange:hover {

    box-shadow:
        0 0 35px
        rgba(255,120,0,0.8);
}


/* =========================================================
   SECTIONS
========================================================= */

.section {

    max-width:
        1300px;

    margin:
        auto;

    padding:
        110px 5%;
}


.dark-section {

    max-width:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(12,4,18,0.2),
            rgba(16,4,22,0.8)
        );

    border-top:
        1px solid
        rgba(255,0,200,0.08);

    border-bottom:
        1px solid
        rgba(255,0,200,0.08);
}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title {

    text-align:
        center;

    margin-bottom:
        55px;
}


.section-title span {

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        13px;

    letter-spacing:
        5px;

    color:
        #ff42d1;

    text-shadow:
        0 0 12px
        #ff00cc;
}


.section-title h2 {

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    margin:
        10px 0;

    background:
        linear-gradient(
            90deg,
            #d334ff,
            #ff20b8,
            #ff8900
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.section-title p {

    color:
        #aaa;

    font-size:
        16px;
}


/* =========================================================
   ARCADE CARDS
========================================================= */

.feature-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        20px;
}


.feature-card {

    position:
        relative;

    padding:
        35px 25px;

    min-height:
        260px;

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(38,8,48,0.9),
            rgba(10,5,17,0.95)
        );

    border:
        1px solid
        rgba(255,0,204,0.3);

    box-shadow:
        0 0 25px
        rgba(255,0,204,0.08);

    overflow:
        hidden;

    transition:
        0.35s ease;
}


.feature-card::before {

    content:
        "";

    position:
        absolute;

    top:
        -100px;

    right:
        -100px;

    width:
        200px;

    height:
        200px;

    background:
        radial-gradient(
            circle,
            rgba(255,0,204,0.25),
            transparent 70%
        );

    transition:
        0.35s ease;
}


.feature-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(255,0,204,0.8);

    box-shadow:
        0 0 35px
        rgba(255,0,204,0.3);
}


.feature-card:hover::before {

    transform:
        scale(1.5);
}


.feature-icon {

    font-size:
        48px;

    margin-bottom:
        25px;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,0,200,0.5)
        );
}


.feature-card h3 {

    font-family:
        "Orbitron",
        sans-serif;

    color:
        #ff54d7;

    margin-bottom:
        15px;
}


.feature-card p {

    color:
        #aaa;

    line-height:
        1.7;
}


/* =========================================================
   KIOSK
========================================================= */

.kiosk-grid {

    max-width:
        1000px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        25px;
}


.kiosk-card {

    padding:
        40px 30px;

    text-align:
        center;

    border-radius:
        18px;

    background:
        rgba(10,5,16,0.85);

    border:
        1px solid
        rgba(255,123,0,0.3);

    transition:
        0.3s ease;
}


.kiosk-card:hover {

    transform:
        translateY(-6px);

    border-color:
        #ff8500;

    box-shadow:
        0 0 30px
        rgba(255,100,0,0.25);
}


.kiosk-icon {

    font-size:
        50px;

    margin-bottom:
        20px;
}


.kiosk-card h3 {

    font-family:
        "Orbitron",
        sans-serif;

    color:
        #ff941c;

    margin-bottom:
        15px;
}


.kiosk-card p {

    color:
        #aaa;

    line-height:
        1.6;
}


/* =========================================================
   PREISLISTE
========================================================= */

.price-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        25px;
}


.price-card {

    background:
        linear-gradient(
            145deg,
            rgba(28,6,36,0.95),
            rgba(7,4,12,0.95)
        );

    border:
        1px solid
        rgba(255,0,200,0.35);

    border-radius:
        18px;

    overflow:
        hidden;

    box-shadow:
        0 0 20px
        rgba(255,0,200,0.08);
}


.price-header {

    padding:
        25px;

    background:
        linear-gradient(
            135deg,
            rgba(140,0,255,0.3),
            rgba(255,0,150,0.2)
        );

    border-bottom:
        1px solid
        rgba(255,0,200,0.25);
}


.price-header h3 {

    font-family:
        "Orbitron",
        sans-serif;

    color:
        #ff4fd4;
}


.price-items {

    padding:
        10px 25px 20px;
}


.price-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 0;

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


.price-item:last-child {

    border-bottom:
        none;
}


.price-item strong {

    display:
        block;

    font-size:
        14px;
}


.price-item small {

    display:
        block;

    color:
        #777;

    margin-top:
        4px;
}


.price-item > span {

    white-space:
        nowrap;

    color:
        #ff8a16;

    font-weight:
        700;

    font-size:
        16px;
}


.empty-price {

    color:
        #777;

    padding:
        20px 0;
}


/* =========================================================
   ÖFFNUNGSZEITEN
========================================================= */

.opening-box {

    max-width:
        750px;

    margin:
        auto;

    padding:
        25px;

    border:
        1px solid
        rgba(255,0,200,0.35);

    border-radius:
        18px;

    background:
        rgba(10,5,16,0.9);

    box-shadow:
        0 0 30px
        rgba(255,0,200,0.1);
}


.opening-status {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 15px;

    margin-bottom:
        10px;

    color:
        #00ff9d;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        13px;

    letter-spacing:
        2px;
}


.status-dot {

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #00ff9d;

    box-shadow:
        0 0 15px
        #00ff9d;

    animation:
        statusPulse 2s infinite;
}


@keyframes statusPulse {

    0% {
        box-shadow:
            0 0 5px
            #00ff9d;
    }

    50% {
        box-shadow:
            0 0 20px
            #00ff9d;
    }

    100% {
        box-shadow:
            0 0 5px
            #00ff9d;
    }
}


.opening-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        17px 15px;

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


.opening-row:last-child {

    border-bottom:
        none;
}


.opening-row strong {

    color:
        #ffffff;
}


.opening-row span {

    color:
        #ff59d8;

    font-weight:
        600;
}


.opening-row .closed {

    color:
        #ff4d67;
}


/* =========================================================
   GALERIE
========================================================= */

.gallery-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;
}


.gallery-item {

    position:
        relative;

    height:
        260px;

    overflow:
        hidden;

    border-radius:
        16px;

    border:
        1px solid
        rgba(255,0,200,0.3);

    background:
        #100716;
}


.gallery-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        0.5s ease;
}


.gallery-item:hover img {

    transform:
        scale(1.08);

    filter:
        brightness(0.65);
}


.gallery-title {

    position:
        absolute;

    bottom:
        0;

    left:
        0;

    right:
        0;

    padding:
        18px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.9)
        );

    font-weight:
        600;
}


.gallery-placeholder {

    grid-column:
        1 / -1;

    padding:
        80px 20px;

    text-align:
        center;

    border:
        1px dashed
        rgba(255,0,200,0.35);

    border-radius:
        18px;

    color:
        #777;
}


.gallery-placeholder div {

    font-size:
        50px;

    margin-bottom:
        15px;
}


/* =========================================================
   KONTAKT
========================================================= */

.contact-section {

    padding-bottom:
        130px;
}


.contact-grid {

    max-width:
        1000px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;
}


.contact-card {

    text-align:
        center;

    padding:
        35px 20px;

    border:
        1px solid
        rgba(255,0,200,0.3);

    border-radius:
        18px;

    background:
        rgba(10,5,16,0.8);

    transition:
        0.3s ease;
}


.contact-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #ff00cc;

    box-shadow:
        0 0 25px
        rgba(255,0,200,0.25);
}


.contact-icon {

    font-size:
        40px;

    margin-bottom:
        18px;
}


.contact-card h3 {

    font-family:
        "Orbitron",
        sans-serif;

    color:
        #ff4fd4;

    margin-bottom:
        12px;
}


.contact-card p {

    color:
        #aaa;

    line-height:
        1.6;
}


.contact-card a {

    color:
        #ff59d8;

    transition:
        0.3s;
}


.contact-card a:hover {

    color:
        #ff8a00;
}


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

.footer {

    text-align:
        center;

    padding:
        50px 20px;

    background:
        #030107;

    border-top:
        1px solid
        rgba(255,0,200,0.2);
}


.footer-logo img {

    width:
        190px;

    margin:
        0 auto 20px;

    border-radius:
        12px;

    opacity:
        0.9;
}


.footer p {

    color:
        #777;

    font-size:
        13px;

    letter-spacing:
        2px;
}


.footer-line {

    width:
        100px;

    height:
        2px;

    margin:
        25px auto;

    background:
        linear-gradient(
            90deg,
            #ff00cc,
            #ff8a00
        );

    box-shadow:
        0 0 12px
        #ff00cc;
}


.footer .copyright {

    color:
        #555;

    font-size:
        11px;

    letter-spacing:
        1px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .navigation {
        gap:
            18px;
    }


    .navigation a {
        font-size:
            12px;
    }


    .feature-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .price-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .gallery-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


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

@media (max-width: 700px) {

    .navbar {

        position:
            absolute;

        padding:
            8px 15px;
    }


    .nav-container {

        height:
            auto;

        flex-direction:
            column;

        gap:
            10px;

    }


    .logo img {

        width:
            105px;

    }


    .navigation {

        flex-wrap:
            wrap;

        justify-content:
            center;

        gap:
            8px 14px;

    }


    .navigation a {

        font-size:
            11px;

    }


    .nav-button {

        display:
            none;

    }


    .hero {

        padding:
            190px 20px 80px;

    }


    .hero-logo img {

        width:
            min(380px, 90vw);

    }


    .hero h1 {

        font-size:
            32px;

    }


    .hero h1 span {

        font-size:
            0.55em;

        letter-spacing:
            1px;

    }


    .hero-text p {

        font-size:
            14px;

        letter-spacing:
            1px;

    }


    .section {

        padding:
            80px 20px;

    }


    .feature-grid,
    .kiosk-grid,
    .price-grid,
    .gallery-grid,
    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .feature-card {

        min-height:
            auto;

    }


    .gallery-item {

        height:
            240px;

    }


    .opening-row {

        font-size:
            14px;

    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 400px) {

    .hero-buttons {

        flex-direction:
            column;

    }


    .neon-button {

        width:
            100%;

    }


    .opening-row {

        padding:
            14px 5px;

    }
    /* =====================================================
   UNSER TEAM
===================================================== */

.team-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    max-width: 1200px;

    margin: 0 auto;
}


.team-card {

    position: relative;

    overflow: hidden;

    border-radius: 18px;

    background:
        rgba(15,15,25,.85);

    border:
        1px solid rgba(255,255,255,.08);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.team-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255,0,170,.45);

    box-shadow:
        0 15px 40px
        rgba(255,0,170,.12);
}


.team-image {

    width: 100%;

    height: 280px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ff00aa,
            #7000ff
        );
}


.team-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.team-card:hover
.team-image img {

    transform:
        scale(1.05);
}


.team-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family:
        Orbitron,
        sans-serif;

    font-size: 80px;

    font-weight: 800;

    color: #fff;

    text-shadow:
        0 0 20px
        rgba(255,255,255,.4);
}


.team-content {

    padding: 22px;

    text-align: center;
}


.team-content h3 {

    margin: 0;

    font-family:
        Orbitron,
        sans-serif;

    font-size: 20px;

    letter-spacing: 1px;
}


.team-role {

    display: inline-block;

    margin-top: 9px;

    padding: 6px 12px;

    border-radius: 20px;

    color: #ff00aa;

    background:
        rgba(255,0,170,.08);

    border:
        1px solid
        rgba(255,0,170,.2);

    font-size: 11px;

    font-weight: 700;
}


.team-content p {

    margin:
        16px 0 0;

    color: #999;

    font-size: 13px;

    line-height: 1.7;
}


.team-empty {

    grid-column:
        1 / -1;

    padding: 60px 20px;

    text-align: center;

    border-radius: 18px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.06);
}


.team-empty > div {

    font-size: 45px;

    margin-bottom: 10px;
}


.team-empty h3 {

    margin: 0 0 8px;

    font-family:
        Orbitron,
        sans-serif;
}


.team-empty p {

    color: #777;

    font-size: 13px;
}


@media (max-width: 900px) {

    .team-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 600px) {

    .team-grid {

        grid-template-columns:
            1fr;

    }

}

}