/* === Grundeinstellungen (Handy) === */
html {
    font-size: 93.75%;
}

body {
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: hsl(178, 23%, 70%);
    /*Mint Farbe hsl(160, 21%, 84%)*/
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

/* === Login-Seite === */
.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.login input,
.login button {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    border-radius: 0.25rem;
}

/* === Seitenbereiche === */
header {
    font-size: 1.25rem;
}

h1 {
/*Platzhalter für Unterstrichene Linie*/
}

footer {
    margin-top: auto;
}

.icon-klein {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* === Kacheln === */
.kacheln {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


.kachel h2 {
    font-size: 1.75rem;
    text-decoration: underline wavy black;
    text-decoration-thickness: 4px;
    text-underline-offset: 10px;
}

/* Grösse der Icons */
.icon {
    display: block;
    width: 9rem;
    height: 9rem;
    margin: 0.5rem auto 0;
}

.kachel h2,
.icon {
    cursor: pointer;
}

/* Inhalt ist auf der Hauptseite versteckt */
.inhalt {
    display: none;
}
/* === Geöffnete Themenseite === */
    .kachel.offen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2rem;
    overflow-y: auto;
    background-color: hsl( 178 23% 80% / 0.85);
    backdrop-filter: blur(8px);
    z-index: 10;
    animation: einblenden 0.6s ease;
}

/* Funktion Einblend-Animation */
@keyframes einblenden {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Funktion Ausblend-Animation */
@keyframes ausblenden {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Themenseite blendet aus, bevor sie geschlossen wird */
.kachel.schliessend {
    animation: ausblenden 0.6s ease forwards;
}




/* Icon über dem Titel */
.kachel.offen .kopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.kachel.offen .icon {
    order: -1;
    width: 11rem;
    height: 11rem;
    margin: 0;
}
.kachel.offen ul {
    list-style: none;
    padding: 0;
}
.kachel.offen li {
    margin-bottom: 0.5rem;
}

/* Inhalt sichtbar, gut lesbar in der Mitte */
.kachel.offen .inhalt {
    display: block;
    max-width: 40rem;
    margin: 2rem auto 0;
    text-align: center;
}

/* === Responsive Design === */

@media (max-width: 499px) {
    .kacheln {
        gap: 1rem;
    }

    .kachel h2 {
        margin: 0.92rem 0;
    }

    /* Icon neben dem Titel */
    .kopf {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .icon {
        width: 2rem;
        height: 2rem;
        margin: 0;
    }
    .image {
    width: 300px;
    max-width: 100%;
    height: auto;
    }
}


/* Tablet */
@media (min-width: 500px) {
    html {
        font-size: 108%;
    }
  
    .kacheln {
        grid-template-columns: repeat(2, 1fr);
    }
    .kachel:last-child {
        grid-column: span 2;
    }
    .image {
    width: 450px;
    max-width: 100%;
    height: auto;
    }
    
}

/*zwischen Stufe*/
@media (min-width: 900px) {
    html {
        font-size: 135%;
    }
    .kacheln {
        grid-template-columns: repeat(3, 1fr);
    }

    .kachel:last-child {
        grid-column:span 3;
    }
    .image {
    width: 550px;
    max-width: 100%;
    height: auto;
    }
}

/* Desktop */
@media (min-width: 1750px) {
    html {
        font-size: 140%;
    }
    .kacheln {
        grid-template-columns: repeat(7, 1fr);
        max-width: none;
        gap: 1rem;
    }
    .kachel:last-child{
        grid-column: auto;
    }
    .image {
    width: 700px;
    max-width: 100%;
    height: auto;
    }
}

/*Ergänzung für Funktion Ausblenden*/
@media (prefers-reduced-motion: reduce) {
    .kachel.offen,
    .kachel.schliessend {
        animation: none;
    }
}


/*Grafiken für Spiel*/

/*Tarnung startbutton*/
#startbutton {
    color: inherit;
    text-decoration: none;
}

/* Kein Rand und kein Scrollen, das Spiel nutzt den ganzen Bildschirm */
.spielseite {
    padding: 0;
    overflow: hidden;
}

/* Spielfeld füllt den ganzen Bildschirm */
#spielfeld {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

/* Text und Knöpfe oben über dem Spielfeld */
.spielsteuerung {
    position: relative;
    z-index: 1;
    padding: 1rem;
}