/* =========================================================
   SZENEON – GLOBAL STYLESHEET
   Theater-Schmid / Michael Schmid
   ========================================================= */


/* =========================================================
   1. DESIGN-VARIABLEN
   ========================================================= */

:root {

    --bg: #0b0b0f;
    --bg-card: #15151c;
    --bg-card-hover: #1b1b24;

    --text: #f4f4f5;
    --text-muted: #b3b3bd;
    --text-dim: #777781;

    --pink: #ff4f81;
    --pink-light: #ff7da2;

    --blue: #29b6f6;
    --blue-light: #55c8ff;

    --purple: #8250ff;
    --orange: #ff9f1c;

    --border: rgba(255, 255, 255, 0.09);
    --border-light: rgba(255, 255, 255, 0.14);

    --max-width: 1200px;
    --content-width: 950px;

    --radius-small: 10px;
    --radius-medium: 18px;
    --radius-large: 24px;

    --shadow-card:
        0 10px 35px rgba(0, 0, 0, 0.18);

    --shadow-large:
        0 20px 60px rgba(0, 0, 0, 0.35);

    --transition:
        0.25s ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 79, 129, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at top left,
            rgba(130, 80, 255, 0.08),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.7;

    min-height: 100vh;
}


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


a {
    color: var(--pink-light);
    text-decoration: none;

    transition:
        color var(--transition);
}


a:hover {
    color: #ffffff;
    text-decoration: none;
}


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


/* =========================================================
   3. GLOBALES LAYOUT
   ========================================================= */

.page {
    width: 100%;
    max-width: var(--max-width);

    margin: 0 auto;

    padding:
        30px
        20px
        70px;
}


/* =========================================================
   4. BRAND
   ========================================================= */

.brand {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: var(--pink-light);
}


.brand-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--pink);

    box-shadow:
        0 0 15px
        rgba(255, 79, 129, 0.8);
}


/* =========================================================
   5. TYPOGRAFIE
   ========================================================= */

h1,
h2,
h3,
h4 {
    margin-top: 0;

    color: #ffffff;

    line-height: 1.15;

    letter-spacing: -0.03em;
}


h1 {
    font-size:
        clamp(36px, 6vw, 64px);

    margin-bottom: 18px;
}


h2 {
    font-size:
        clamp(26px, 4vw, 38px);

    margin-bottom: 15px;
}


h3 {
    font-size: 22px;

    margin-bottom: 10px;
}


p {
    margin-top: 0;
}


/* =========================================================
   6. TEXT-FARBEN
   ========================================================= */

.text-pink {
    color: var(--pink);
}


.text-blue {
    color: var(--blue);
}


.text-purple {
    color: var(--purple);
}


.text-orange {
    color: var(--orange);
}


/* =========================================================
   7. SZENEON FARBVERLAUF
   ========================================================= */

.text-gradient {
    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--purple),
            var(--blue-light)
        );

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

    color: transparent;
}


/* =========================================================
   8. STANDARD CARD
   ========================================================= */

.card {
    position: relative;

    padding:
        28px
        30px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-medium);

    background:
        rgba(21, 21, 28, 0.88);

    box-shadow:
        var(--shadow-card);

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}


.card:hover {
    transform:
        translateY(-3px);

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

    background:
        rgba(27, 27, 36, 0.95);
}


/* =========================================================
   9. NEON CARD
   ========================================================= */

.card-neon {
    position: relative;

    overflow: hidden;
}


.card-neon::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   10. HERO
   ========================================================= */

.hero {
    position: relative;

    overflow: hidden;

    margin-bottom: 35px;

    padding:
        45px
        35px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background:
        linear-gradient(
            135deg,
            rgba(255, 79, 129, 0.14),
            rgba(130, 80, 255, 0.08)
        ),
        var(--bg-card);

    box-shadow:
        var(--shadow-large);
}


.hero::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    top: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 79, 129, 0.35),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   11. HERO TEXT
   ========================================================= */

.hero-title {
    position: relative;

    z-index: 1;

    max-width: 850px;
}


.hero-description {
    position: relative;

    z-index: 1;

    max-width: 700px;

    margin: 0;

    color: var(--text-muted);

    font-size: 17px;
}


.hero-small {
    margin-top: 20px;

    color: var(--text-dim);

    font-size: 13px;
}


/* =========================================================
   12. CONTENT
   ========================================================= */

.content {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


/* =========================================================
   13. SECTION
   ========================================================= */

.section {
    padding:
        28px
        30px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-medium);

    background:
        rgba(21, 21, 28, 0.88);

    box-shadow:
        var(--shadow-card);
}


.section h2 {
    margin:
        0
        0
        15px;

    font-size: 22px;

    line-height: 1.3;

    color: #ffffff;
}


.section p {
    margin:
        0
        0
        14px;

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


.section p:last-child {
    margin-bottom: 0;
}


.section ul {
    margin:
        10px
        0
        0;

    padding-left: 24px;

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


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


/* =========================================================
   14. HIGHLIGHT BOX
   ========================================================= */

.highlight {
    margin-top: 18px;

    padding:
        18px
        20px;

    border-left:
        3px solid
        var(--pink);

    border-radius:
        var(--radius-small);

    background:
        rgba(255, 79, 129, 0.07);

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


.highlight strong {
    color: var(--text);
}


/* =========================================================
   15. CONTACT BOX
   ========================================================= */

.contact-box {
    display: grid;

    gap: 5px;

    margin-top: 15px;

    padding:
        18px
        20px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.025);
}


.contact-box strong {
    color: #ffffff;
}


/* =========================================================
   16. BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        12px
        24px;

    border: 0;

    border-radius:
        12px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}


.btn:hover {
    transform:
        translateY(-2px);

    text-decoration: none;
}


.btn-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            #ff2f91
        );

    box-shadow:
        0 8px 30px
        rgba(255, 79, 129, 0.35);
}


.btn-primary:hover {
    color: #ffffff;

    box-shadow:
        0 12px 40px
        rgba(255, 79, 129, 0.5);

    filter:
        brightness(1.08);
}


.btn-blue {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #168cff
        );

    box-shadow:
        0 8px 30px
        rgba(41, 182, 246, 0.3);
}


.btn-outline {
    color: var(--text);

    border:
        1px solid
        var(--border-light);

    background:
        rgba(255, 255, 255, 0.03);
}


.btn-outline:hover {
    color: #ffffff;

    border-color:
        rgba(255, 79, 129, 0.5);

    background:
        rgba(255, 79, 129, 0.06);
}


/* =========================================================
   17. BUTTON-GRUPPE
   ========================================================= */

.button-group {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;
}


/* =========================================================
   18. NAVIGATION
   ========================================================= */

.site-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 25px;
}


.site-logo {
    color: #ffffff;

    font-size: 20px;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.site-logo:hover {
    color: var(--pink);
}


.site-nav {
    display: flex;

    align-items: center;

    gap: 24px;
}


.site-nav a {
    color:
        var(--text-muted);

    font-size: 14px;

    font-weight: 600;

    transition:
        color var(--transition);
}


.site-nav a:hover {
    color:
        var(--pink-light);
}


/* =========================================================
   19. FOOTER
   ========================================================= */

footer {
    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid
        var(--border);

    text-align: center;

    color:
        var(--text-dim);

    font-size: 13px;
}


.footer-brand {
    margin-bottom: 8px;

    color:
        var(--pink-light);

    font-weight: 700;

    letter-spacing: 0.08em;
}


.footer-links {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 12px;
}


/* =========================================================
   20. NEON-LICHTEFFEKTE
   ========================================================= */

.neon-pink {
    text-shadow:
        0 0 10px
        rgba(255, 79, 129, 0.5),

        0 0 30px
        rgba(255, 79, 129, 0.25);
}


.neon-blue {
    text-shadow:
        0 0 10px
        rgba(41, 182, 246, 0.5),

        0 0 30px
        rgba(41, 182, 246, 0.25);
}


/* =========================================================
   21. TRENNLINIE
   ========================================================= */

.neon-line {
    width: 100%;
    height: 1px;

    margin:
        35px
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 79, 129, 0.5),
            rgba(41, 182, 246, 0.5),
            transparent
        );
}


/* =========================================================
   22. HERO – SZENEON STARTSEITE
   ========================================================= */

.hero-main {
    min-height: 650px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 20px;

    padding:
        55px
        45px;
}


.hero-content {
    position: relative;

    z-index: 5;
}


.hero-main .hero-title {
    font-size:
        clamp(42px, 5vw, 72px);

    line-height: 1.02;

    margin-bottom: 22px;
}


.hero-visual {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 480px;
}


.hero-image {
    position: relative;

    z-index: 3;

    width: 115%;

    max-width: 760px;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 25px
            rgba(255, 79, 129, 0.35)
        )
        drop-shadow(
            0 0 55px
            rgba(41, 182, 246, 0.20)
        );

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


.hero-image:hover {
    transform:
        scale(1.025)
        translateY(-5px);

    filter:
        drop-shadow(
            0 0 30px
            rgba(255, 79, 129, 0.50)
        )
        drop-shadow(
            0 0 70px
            rgba(41, 182, 246, 0.30)
        );
}


.hero-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    filter:
        blur(70px);

    opacity: 0.35;

    pointer-events: none;
}


.hero-glow-pink {
    background:
        radial-gradient(
            circle,
            rgba(255, 0, 140, 0.75),
            transparent 70%
        );

    right: 5%;
    top: 20%;
}


.hero-glow-blue {
    background:
        radial-gradient(
            circle,
            rgba(0, 160, 255, 0.75),
            transparent 70%
        );

    left: 5%;
    top: 25%;
}


.hero-main::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(41, 182, 246, 0.16),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   23. GAMES / SPIELANLEITUNGEN
   ========================================================= */

.games-section {
    gap: 25px;
}


.games-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


/* =========================================================
   24. SPIELKARTE
   ========================================================= */

.game-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-medium);

    background:
        rgba(21, 21, 28, 0.92);

    box-shadow:
        var(--shadow-card);

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


.game-card:hover {
    border-color:
        rgba(255, 79, 129, 0.35);

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.30);
}


/* =========================================================
   25. DETAILS / SUMMARY
   ========================================================= */

.game-card > summary {
    list-style: none;
}


.game-card > summary::-webkit-details-marker {
    display: none;
}


/* =========================================================
   26. KOPF DER SPIELKARTE
   ========================================================= */

.game-card-header {
    display: flex;

    align-items: center;

    gap: 25px;

    min-height: 110px;

    padding:
        15px
        25px;

    cursor: pointer;

    user-select: none;
}


/* =========================================================
   27. SPIEL-LOGO
   ========================================================= */

.game-logo {
    display: block;

    flex-shrink: 0;

    width: auto;
    height: auto;

    max-width: 260px;
    max-height: 60px;

    object-fit: contain;

    /*
     * Nur das Bild selbst bekommt
     * abgerundete Ecken.
     * Kein zusätzlicher Wrapper.
     */
    border-radius:
        12px;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


.game-card:hover .game-logo {
    transform:
        scale(1.03);

    filter:
        brightness(1.08);
}


/* =========================================================
   28. SPIELNAME
   ========================================================= */

.game-name {
    flex: 1;

    min-width: 0;

    font-size:
        clamp(25px, 3vw, 38px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing:
        0.045em;

    text-transform:
        uppercase;

    /*
     * SZENEON Farbverlauf:
     * Pink → Violett → Hellblau
     */
    background:
        linear-gradient(
            90deg,
            var(--pink) 0%,
            #ff72b6 28%,
            var(--purple) 60%,
            var(--blue-light) 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    -webkit-text-fill-color:
        transparent;
}


/* =========================================================
   29. GAME-ACTIONS
   ========================================================= */

.game-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


/* =========================================================
   30. VIDEO + SPIELANLEITUNG BUTTON
   ========================================================= */

.game-action-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding:
        9px
        14px;

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

    border-radius:
        10px;

    background:
        rgba(255, 79, 129, 0.06);

    color:
        var(--pink-light);

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.2;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}


.game-action-btn:hover {
    color:
        #ffffff;

    background:
        rgba(255, 79, 129, 0.12);

    border-color:
        rgba(255, 79, 129, 0.45);

    transform:
        translateY(-1px);
}


/* =========================================================
   31. SPIELANLEITUNG BUTTON
   ========================================================= */

.game-open {
    font-size:
        13px;
}


.game-card:hover .game-open {
    color:
        #ffffff;

    background:
        rgba(255, 79, 129, 0.12);

    border-color:
        rgba(255, 79, 129, 0.45);
}


/* =========================================================
   32. PFEIL
   ========================================================= */

.game-arrow {
    display: inline-block;

    font-size:
        18px;

    line-height:
        1;

    transition:
        transform 0.3s ease;
}


.game-card[open] .game-arrow {
    transform:
        rotate(180deg);
}


/* =========================================================
   33. GEÖFFNETE SPIELKARTE
   ========================================================= */

.game-card[open] {
    border-color:
        rgba(255, 79, 129, 0.35);

    box-shadow:
        0 15px 50px
        rgba(255, 79, 129, 0.08);
}


.game-card[open] .game-open {
    background:
        rgba(255, 79, 129, 0.12);

    border-color:
        rgba(255, 79, 129, 0.40);
}


/* =========================================================
   34. SPIELANLEITUNG
   ========================================================= */

.game-instructions {
    padding:
        0
        25px
        25px;
}


.game-instructions-inner {
    position: relative;

    padding:
        25px;

    border:
        1px solid
        rgba(255, 79, 129, 0.18);

    border-radius:
        var(--radius-medium);

    background:
        linear-gradient(
            135deg,
            rgba(255, 79, 129, 0.07),
            rgba(130, 80, 255, 0.06)
        );
}


/* =========================================================
   35. ANLEITUNG ÜBERSCHRIFT
   ========================================================= */

.game-instructions-title {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom:
        15px;

    color:
        var(--pink-light);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.game-instructions-title .brand-dot {
    width: 7px;
    height: 7px;
}


.game-instructions-inner h3 {
    margin:
        0
        0
        15px;

    font-size:
        24px;
}


.game-instructions-inner p {
    max-width:
        850px;

    margin:
        0
        0
        14px;

    color:
        var(--text-muted);

    font-size:
        16px;
}


/* =========================================================
   36. SCHLIESSEN-HINWEIS
   ========================================================= */

.game-close-hint {
    margin-top:
        22px;

    color:
        var(--text-dim);

    font-size:
        12px;

    font-weight:
        600;

    text-align:
        right;
}


/* =========================================================
   37. MOBILE – HERO
   ========================================================= */

@media (max-width: 850px) {

    .hero-main {
        grid-template-columns:
            1fr;

        text-align:
            center;

        padding:
            45px
            25px;
    }


    .hero-main .brand {
        justify-content:
            center;
    }


    .hero-main .hero-description {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .hero-main .button-group {
        justify-content:
            center;
    }


    .hero-visual {
        min-height:
            auto;

        margin-top:
            10px;
    }


    .hero-image {
        width:
            105%;

        max-width:
            650px;
    }
}


/* =========================================================
   38. MOBILE – SPIELE
   ========================================================= */

@media (max-width: 700px) {

    .game-card-header {
        display: grid;

        grid-template-columns:
            auto
            1fr;

        gap:
            12px
            16px;

        min-height:
            auto;

        padding:
            16px;
    }


    .game-logo {
        max-width:
            190px;

        max-height:
            55px;
    }


    .game-name {
        align-self:
            center;

        font-size:
            clamp(23px, 6vw, 32px);
    }


    .game-actions {
        grid-column:
            1 / -1;

        display:
            flex;

        width:
            100%;

        gap:
            10px;
    }


    .game-action-btn {
        flex:
            1;

        min-height:
            42px;

        padding:
            9px
            10px;

        font-size:
            12px;
    }
}


/* =========================================================
   39. MOBILE – HERO KLEIN
   ========================================================= */

@media (max-width: 500px) {

    .page {
        padding:
            15px
            12px
            45px;
    }


    .hero {
        padding:
            32px
            22px;

        border-radius:
            19px;
    }


    .hero-description {
        font-size:
            16px;
    }


    .hero-main {
        padding:
            35px
            18px;
    }


    .hero-main .hero-title {
        font-size:
            clamp(36px, 12vw, 50px);
    }


    .hero-visual {
        margin-left:
            -10px;

        margin-right:
            -10px;
    }


    .hero-image {
        width:
            115%;
    }


    .hero-glow {
        width:
            280px;

        height:
            280px;

        filter:
            blur(50px);
    }


    .section,
    .card {
        padding:
            22px
            20px;

        border-radius:
            15px;
    }


    .section h2 {
        font-size:
            20px;
    }


    .button-group {
        flex-direction:
            column;
    }


    .btn {
        width:
            100%;
    }


    .site-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .site-nav {
        width:
            100%;

        flex-wrap:
            wrap;

        gap:
            15px;
    }
}


/* =========================================================
   40. SPIELANLEITUNG – KLEINES MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .game-card-header {
        gap:
            10px
            12px;

        padding:
            14px;
    }


    .game-logo {
        max-width:
            155px;

        max-height:
            48px;
    }


    .game-name {
        font-size:
            clamp(21px, 6vw, 28px);

        letter-spacing:
            0.025em;
    }


    .game-actions {
        gap:
            8px;
    }


    .game-action-btn {
        min-height:
            40px;

        padding:
            8px
            7px;

        font-size:
            11px;

        gap:
            5px;
    }


    .game-arrow {
        font-size:
            16px;
    }


    .game-instructions {
        padding:
            0
            15px
            15px;
    }


    .game-instructions-inner {
        padding:
            20px
            18px;
    }


    .game-instructions-inner h3 {
        font-size:
            21px;
    }


    .game-instructions-inner p {
        font-size:
            15px;
    }
}


/* =========================================================
   41. SEHR KLEINE BILDSCHIRME
   ========================================================= */

@media (max-width: 400px) {

    .page {
        padding-left:
            10px;

        padding-right:
            10px;
    }


    .hero {
        padding:
            28px
            18px;
    }


    .section,
    .card {
        padding:
            20px
            17px;
    }


    .game-card-header {
        grid-template-columns:
            1fr;

        gap:
            12px;

        text-align:
            center;
    }


    .game-logo {
        max-width:
            180px;

        max-height:
            48px;

        margin:
            0 auto;
    }


    .game-name {
        font-size:
            25px;
    }


    .game-actions {
        grid-column:
            auto;

        width:
            100%;
    }


    .game-action-btn {
        font-size:
            10px;

        padding:
            8px
            5px;
    }
}