/* =====================================
   THE LION'S SECRET
   Venice Explorer
   Main Design
===================================== */


/* ---------- Farben ---------- */

:root {

    --venice-dark: #1c2b36;

    --venice-gold: #c9a227;

    --venice-light: #f5f1e8;

    --text-dark: #222222;

    --white: #ffffff;

}



/* ---------- Grundlayout ---------- */


* {

    box-sizing:border-box;

}



body {

    margin:0;

    background:var(--venice-light);

    color:var(--text-dark);

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

}



.app {

    max-width:600px;

    margin:auto;

    padding:20px;

}



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


.top-nav {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px;

    background:var(--white);

    border-radius:15px;

    margin-bottom:20px;

}



.top-nav a {

    color:var(--venice-dark);

    text-decoration:none;

    font-weight:bold;

}



.mission-counter {

    font-size:0.85rem;

    color:var(--venice-dark);

}





/* ---------- Kopfbereich ---------- */


.hero {

    text-align:center;

    padding:30px 10px;

}



.lion-logo img {

    width:120px;

    height:120px;

    object-fit:contain;

}



.hero h1 {

    margin-bottom:5px;

    color:var(--venice-dark);

}



.subtitle {

    font-size:1.2rem;

    color:#555;

}



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


.card {

    background:var(--white);

    padding:20px;

    margin-bottom:20px;

    border-radius:18px;

    box-shadow:
    0 4px 12px rgba(0,0,0,0.08);

}



.card h2 {

    color:var(--venice-dark);

}



.card h3 {

    color:var(--venice-gold);

}



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


.marcus-card {

    border-left:

    6px solid var(--venice-gold);

}



.marcus-title {

    font-size:1.3rem;

    font-weight:bold;

    margin-bottom:15px;

    color:var(--venice-dark);

}



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


.main-button {

    display:inline-block;

    padding:15px 25px;

    background:var(--venice-gold);

    color:white;

    text-decoration:none;

    border-radius:30px;

    font-weight:bold;

    border:none;

    cursor:pointer;

    font-size:1rem;

}



.main-button:hover {

    opacity:0.85;

}



/* ---------- Start / Abschlussbereiche ---------- */


.start-box {

    text-align:center;

    margin:30px 0;

}



/* ---------- Stempel ---------- */


.stamps {

    display:flex;

    justify-content:center;

    gap:12px;

    font-size:2rem;

}



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


footer {

    text-align:center;

    padding:20px;

    color:#666;

    font-size:0.9rem;

}



/* ---------- Mobile Optimierung ---------- */


@media(max-width:600px){


    .app {

        padding:15px;

    }


    .top-nav {

        flex-direction:column;

        gap:10px;

    }


    .hero h1 {

        font-size:1.8rem;

    }


}