/* ===================================
   THE LION'S SECRET
   Dark Venice Theme
=================================== */


/* ---------- Grundsystem ---------- */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

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

    background: #171717;

    color: #eeeeee;

}


.app {

    max-width: 850px;

    margin: auto;

    padding: 20px;

}



/* ---------- Header ---------- */


.hero {

    text-align: center;

    padding: 25px 0 35px;

}


.lion-logo img {

    width: 150px;

    height: 150px;

    object-fit: contain;

    filter: drop-shadow(0 0 15px rgba(212,175,55,0.4));

}


h1 {

    font-size: 2.4rem;

    margin: 15px 0 5px;

    color: #d4af37;

    letter-spacing: 2px;

}


.subtitle {

    font-size: 1.2rem;

    color: #cccccc;

}



/* ---------- Karten ---------- */


.card {

    background: #292929;

    color: #eeeeee;

    padding: 28px;

    margin: 22px 0;

    border-radius: 18px;

    border: 1px solid #3a3a3a;

    box-shadow: 0 8px 20px rgba(0,0,0,0.35);

}


.card h2 {

    margin-top: 0;

    color: #d4af37;

}



/* ---------- Marcus Bereich ---------- */


.marcus-card {

    text-align: center;

    border: 1px solid #d4af37;

}


.marcus-card h2 {

    font-size: 1.5rem;

}



/* ---------- Text ---------- */


p {

    line-height: 1.6;

}


li {

    margin-bottom: 12px;

}



/* ---------- Buttons ---------- */


.main-button {

    display: block;

    background: #111111;

    color: #ffffff;

    padding: 16px;

    border-radius: 12px;

    border: 1px solid #d4af37;

    text-decoration: none;

    text-align: center;

    font-size: 1.1rem;

    transition: 0.3s;

}


.main-button:hover {

    background: #d4af37;

    color: #111111;

}



/* ---------- Startbutton ---------- */


.start-box {

    margin: 40px 0;

}



/* ---------- Navigation ---------- */


.nav-buttons {

    display: flex;

    gap: 15px;

    margin: 40px 0 25px;

}


.nav-buttons .main-button {

    flex: 1;

}



/* ---------- Löwen Pass ---------- */


.stamps {

    display: flex;

    justify-content: center;

    gap: 15px;

    font-size: 2rem;

}



/* ---------- Footer ---------- */


footer {

    text-align: center;

    padding: 30px 0;

    color: #999999;

}



/* ---------- kleine Highlights ---------- */


strong {

    color: #d4af37;

}


::selection {

    background: #d4af37;

    color: #111111;

}



/* ---------- Smartphone ---------- */


@media(max-width:600px) {


    .app {

        padding: 12px;

    }


    h1 {

        font-size: 1.8rem;

    }


    .card {

        padding: 20px;

    }


    .nav-buttons {

        flex-direction: column;

    }


    .lion-logo img {

        width: 120px;

        height: 120px;

    }


}

/* ---------- Light Mode ---------- */


body.light-mode {

    background: #f2efe8;

    color: #222222;

}


body.light-mode .card {

    background: #ffffff;

    color: #222222;

    border-color: #dddddd;

}


body.light-mode .card h2 {

    color: #9b7515;

}


body.light-mode .subtitle {

    color: #555555;

}


body.light-mode .main-button {

    background: #222222;

    color: white;

}


body.light-mode footer {

    color: #555555;

}

.mode-button {


    position: fixed;

    top: 15px;

    right: 15px;


    padding: 10px 15px;


    border-radius: 20px;


    background: #292929;


    color: white;


    border: 1px solid #d4af37;


    cursor: pointer;


    z-index: 1000;


}


body.light-mode .mode-button {


    background: white;


    color: #222;


}