/* ==========================================
   PUZZLE-BEREICH
   ========================================== */

.puzzle-spiel {

    max-width: 850px;

    margin: 30px auto;

    padding: 25px;

    background: white;

    border-radius: 25px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12);

    text-align: center;
}


h1 {

    margin-top: 0;

    color: #2e7d32;

    font-size: 2.2rem;
}


.untertitel {

    font-size: 1.2rem;

    margin-bottom: 20px;
}


/* ==========================================
   PUZZLE
   ========================================== */

.puzzle {

    width: 500px;

    height: 500px;

    max-width: 100%;

    margin: 0 auto 20px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr;

    gap: 5px;

    background: #ddd;

    padding: 5px;

    border-radius: 20px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.15);
}


/* ==========================================
   PUZZLETEILE
   ========================================== */

.puzzleteil {

    position: relative;

            background-image: url("bilder/logo.png");

    background-size: 500px 500px;

    border: 3px solid white;

    border-radius: 10px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    touch-action: manipulation;

    transition:
        transform 0.2s,
        box-shadow 0.2s,
        border-color 0.2s;
}


/* Bildausschnitte */

.teil1 {
    background-position: 0 0;
}

.teil2 {
    background-position: 100% 0;
}

.teil3 {
    background-position: 0 100%;
}

.teil4 {
    background-position: 100% 100%;
}


/* ==========================================
   AUSGEWÄHLTES PUZZLETEIL
   ========================================== */

.puzzleteil.ausgewaehlt {

    transform: scale(0.96);

    border-color: #ffca28;

    box-shadow:
        0 0 0 5px #ffca28,
        0 5px 15px rgba(0, 0, 0, 0.2);

}


/* ==========================================
   RICHTIGES TEIL
   ========================================== */

.puzzleteil.richtig {

    border-color: #4caf50;

    box-shadow:
        0 0 0 4px #4caf50;

}


/* ==========================================
   HINWEIS
   ========================================== */

.hinweis {

    min-height: 35px;

    margin: 15px 0;

    font-size: 1.1rem;

    color: #555;
}


/* ==========================================
   ERGEBNIS
   ========================================== */

#ergebnis {

    min-height: 45px;

    font-size: 1.4rem;

    font-weight: bold;

    margin-top: 10px;
}


.richtig {

    color: #2e8b57;
}


/* ==========================================
   STERNE
   ========================================== */

#sterne {

    min-height: 45px;

    font-size: 2rem;
}


/* ==========================================
   BUTTON
   ========================================== */

#neu {

    display: none;

    margin-top: 10px;

    padding: 13px 25px;

    border: none;

    border-radius: 15px;

    background: #4caf50;

    color: white;

    font-size: 1.1rem;

    cursor: pointer;
}


#neu:hover {

    background: #388e3c;
}


/* ==========================================
   HANDY / TABLET
   ========================================== */

@media (max-width: 600px) {

    .puzzle-spiel {

        margin: 10px;

        padding: 15px;

    }


    h1 {

        font-size: 1.8rem;

    }


    .untertitel {

        font-size: 1.05rem;

    }


    .puzzle {

        width: 95vw;

        height: 95vw;

        max-width: 450px;

        max-height: 450px;

    }


    .puzzleteil {

        background-size:
            95vw 95vw;

    }

}