/* Basisreset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hintergrund und Textfarbe */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f4f8; /* Hellgrau */
    color: #333; /* Dunkelgrau für den Text */
    line-height: 1.6;
}

/* Kopfbereich */
header {
    background-color: #add8e6; /* Hellblau */
    color: #fff;
    padding: 1rem 0;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Schatten unter dem Header */
}

/* Hinweis-Kasten für Video Tutorial */
#video-notice .notice-box {
    background-color: #ffcc00; /* Gelber Kasten */
    color: #333;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
}

#video-notice .notice-box h2 {
    font-size: 1.8rem;
}

#video-notice .notice-box p {
    font-size: 1.2rem;
}

/* Button-Stil */
button {
    background-color: #87ceeb; /* Hellblau */
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #61b1d0; /* Etwas dunkleres Blau beim Hover */
}

/* Hauptbereich */
main {
    max-width: 1600px;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: #fff; /* Weißer Hintergrund für den Hauptbereich */
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Schatten unter dem Hauptbereich */
    font-size: 20pt;
}

/* Einführung Bereich */
#intro {
    margin-bottom: 2rem;
}

#intro h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

#intro p  {
    font-size: 1.2rem;
    color: #666;
}

#intro ul {
    list-style-type: none;
    padding: 0;
    margin-top: 1rem;
}

#intro ul li {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 0.8rem;
    
}

#intro ul li strong {
    font-weight: bold;
    color: #007BFF;
}

/* Video Bereich */
#video {
    margin-bottom: 2rem;
}

#video h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #333;
}

.video-container {
    text-align: center;
}

video {
    border: none;
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 900px; /* Maximale Breite für das Video */
}

#video p {
    font-size: 1.2rem;
    color: #666;
}

/* Zusätzliche Erklärungen */
#additional-info {
    margin-bottom: 2rem;
}

#additional-info h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #333;
}

#additional-info p {
    font-size: 1.2rem;
    color: #666;
}

/* iFrame Sammlung (Interaktive Inhalte untereinander) */
#iframes {
    margin-top: 2rem;
}

#iframes h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #333;
}

#iframes p {
    font-size: 1.2rem;
    color: #666;
}

.iframe-container {
    margin-top: 1.5rem;
}

.iframe-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    text-align: center;
    margin-bottom: 2rem; /* Abstände zwischen den iFrames */
}

iframe {
    width: 100%;
    height: "auto";
    border-radius: 8px;
}

.iframe-item h3 {
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 1rem;
}

/* Abschnitt Trennung */
hr.section-divider {
    margin: 2rem 0;
    border: 0;
    border-top: 2px solid #ccc;
}


#next-lesson h1, #progress-code h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

#next-lesson p, #progress-code p {
    font-size: 1.2rem;
    color: #666;
}

/* Button-Stil */
#redirectButton {
    background-color: #add8e6; /* Hellblau */
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: auto;
    margin: 0.5rem 0;
}

/* Button im deaktivierten Zustand */
#redirectButton:disabled {
    background-color: #b0d4e6; /* Hellere Blau für deaktiviert */
    cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
}

/* Button Hover für aktivierte Zustände */
#redirectButton:not(:disabled):hover {
    background-color: #61b1d0; /* Etwas dunkleres Blau beim Hover */
}

/* Animation, wenn der Button aktiv ist */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

#redirectButton.active {
    animation: pulse 1s infinite; /* Pulsierende Animation */
}


#scoreDisplay {
    font-size: 1.2rem;
    color: #333;
}

/* Responsives Design für kleinere Bildschirme */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    button {
        width: 100%;
    }

    main {
        padding: 1rem;
        margin: 1rem;
    }

    .iframe-item {
        margin-bottom: 1.5rem; /* iFrames dichter zusammen auf kleinen Bildschirmen */
    }
}

/* Checkbox Styling */
input[type="checkbox"] {
    margin-right: 0.5rem; /* Abstand zwischen Checkbox und Text */
    vertical-align: middle; /* Damit die Checkbox besser mit dem Text ausgerichtet ist */
}

input[type="checkbox"] + label {
    font-size: 1.2rem; /* Schriftgröße */
    color: #666; /* Graue Schriftfarbe */
    font-weight: normal; /* Normalgewicht für den Text */
    vertical-align: middle; /* Gleiche Ausrichtung wie die Checkbox */
}

/* Punktestand Bereich */
#score-section {
    position: fixed;
    bottom: 20px; /* 20px Abstand vom unteren Rand */
    left: 50%;
    transform: translateX(-50%); /* Zentriert den Bereich horizontal */
    background-color: #f8f8f8; /* Hellgrauer Hintergrund */
    color: #333; /* Dunkelgraue Textfarbe */
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Leichter Schatten für den Block */
    text-align: center;
    font-size: 1.0rem;
    z-index: 9999; /* Sicherstellen, dass der Bereich immer sichtbar ist */
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    gap: 10px; /* Fügt einen kleinen Abstand zwischen den beiden Elementen hinzu */
    opacity: 1; /* Standard: Box ist sichtbar */
    transition: opacity 0.3s ease; /* Sanfte Übergangsanimation */
}

/* Wenn die Maus über dem Bereich schwebt, wird die Box unsichtbar */
#score-section:hover {
    opacity: 0; /* Box wird unsichtbar */
}

#score-section p {
    margin: 0;
}

#scoreDisplay {
    font-size: 1.0rem;
    font-weight: bold;
}

/* Styling für die Sektion mit Box */
.box-section {
    padding: 2rem;
    background-color: #fff; /* Weißer Hintergrund */
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Schatten */
    margin-bottom: 2rem; /* Abstände nach unten */

}

/* Button-Stil */
button, .btn {
    background-color: #87ceeb; /* Hellblau */
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: auto;
    margin: 0.5rem 0; /* Geringer Abstand für konsistente Ausrichtung */
}

button:hover, .btn:hover {
    background-color: #61b1d0; /* Etwas dunkleres Blau beim Hover */
}
/* Fußzeile Styling */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #f0f4f8; /* Heller Hintergrund */
    color: #333;
    font-size: 0.9rem;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 2rem;
}

.footer-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.footer-container a {
    color: #0077cc; /* Blau für Links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-container a:hover {
    color: #005599; /* Dunkleres Blau beim Hover */
}

.footer-container span {
    color: #666; /* Dezente Farbe für Trennstrich */
}