/* === Grundeinstellungen (Smartphone) === */
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%);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

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

footer {
    margin-top: auto;
}

/* Kleines Icon vor der E-Mail-Adresse */
.icon-klein {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Versteckter Spielstart im Footer: sieht aus wie normaler Text */
#startbutton {
    color: inherit;
    text-decoration: none;
}

/* === 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;
}

/* === 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;
}

/* Titel und Icon bilden die klickbare Fläche einer Kachel */
.kopf {
    cursor: pointer;
}

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

/* Inhalt ist auf der Hauptseite versteckt */
.inhalt {
    display: none;
}

/* Foto in den Personalien */
.image {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* === 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;
}

/* 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;
}

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

/* Listen ohne Aufzählungspunkte */
.kachel.offen ul {
    list-style: none;
    padding: 0;
}

.kachel.offen li {
    margin-bottom: 0.5rem;
}

/* Ablauf der Einblend-Animation */
@keyframes einblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Ablauf der Ausblend-Animation */
@keyframes ausblenden {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* === Spielseite === */
/* 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;
}

/* Titel liegt über dem Spielfeld, lässt Klicks aber durch */
.spieltitel {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

#stern {
    cursor: pointer;
}

/* === Responsive Design === */
/* Nur Smartphone: engere Abstände, kleines Icon unter dem Titel */
@media (max-width: 499px) {
    .kacheln {
        gap: 1rem;
    }

    .kachel h2 {
        margin: 0.92rem 0;
    }

    .kopf {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .icon {
        width: 2rem;
        height: 2rem;
        margin: 0;
    }
}

/* Tablet: 2 Spalten, letzte Kachel über die ganze Breite */
@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;
    }
}

/* Zwischenstufe: 3 Spalten, letzte Kachel über die ganze Breite */
@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;
    }
}

/* Desktop: alle 7 Kacheln in einer Reihe */
@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;
    }
}

/* === Reduzierte Bewegung (Zugänglichkeit) === */
@media (prefers-reduced-motion: reduce) {
    .kachel.offen,
    .kachel.schliessend {
        animation: none;
    }
}