/* --- Globale Stile & Schriftarten --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Josefin Sans', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    font-size: 16px; /* Basis-Schriftgröße für Inhalt */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 2.2rem; /* Schriftgröße für Überschriften */
}

h2 {
    font-size: 1.8rem;
}

p {
    margin-bottom: 15px;
}

a {
    color: #cc7a00;
    text-decoration: none;
}

main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* --- Kopfzeile (Header) --- */
header {
    background-color: #ffffff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

nav.main-nav ul, nav.footer-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    background-color: #252525; /* Hintergrund des Banners */
    padding: 10px;
}

nav.main-nav li, nav.footer-nav li {
    margin: 0 20px;
}

nav.main-nav a, nav.footer-nav a {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

nav.main-nav a:hover, nav.footer-nav a:hover {
    color: #ff9900; /* Farbliche Hervorhebung beim Swipen */
}

/* --- "Zurück"-Button (Unterseiten) --- */
.back-button {
    display: inline-block;
    background-color: #555;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 15px;
    transition: background-color 0.3s;
}
.back-button:hover {
    background-color: #ff9900;
    color: #252525;    /* ??? */
}


/* --- Fußzeile (Footer) --- */
footer {
    text-align: center;
    margin-top: 30px;
}
footer p {
    font-size: 0.9rem;
    color: #777;
    margin-top: 10px;
}


/* --- Startseite: Inhalts-Links --- */
.page-links {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 20px;
}

.page-link-box {
    display: block;
    background-color: #ffffff; /* Hintergrund ist schwarz, wie in den Bildern war 000*/
    transition: background-color 0.3s ease;
    padding: 10px;
    border: 3px solid #f4f4f4;
}

.page-link-box:hover {
    background-color: #ff9900; /* Hintergrundfarbe ändert sich beim Swipen */
    border-color: #ff9900;
}

.page-link-box img {
    display: block;
    width: 100%;
    max-width: 350px;
}

/* --- Startseite: Kernpunkte --- */
.core-points {
    margin-top: 40px;
    padding: 20px;
}
.core-points ul {
    list-style-type: disc;
    margin-left: 30px;
}
.core-points li {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* --- Unterseite Aufbau: Galerie --- */
.gallery-container {
    text-align: center;
    margin-top: 30px;
}
#main-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    border: 4px solid #eee;
    margin-bottom: 10px;
}
#image-caption {
    font-size: 1.1rem;
    font-style: italic;
    color: #555;
}
.thumbnail-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.thumbnail {
    width: 150px;   /* war 120px */
    height: auto; 
    cursor: pointer;
    border: 3px solid #ddd;
    transition: border-color 0.3s;
}
.thumbnail:hover, .thumbnail.active {
    border-color: #ff9900; /* Aktives/Gehover-tes Thumbnail */
}

/* * 1. Der Haupt-Container ("Video-Karte")
 * Er zentriert das Modul auf der Seite, gibt ihm eine maximale Breite
 * und einen schönen Schatten-Effekt.
*/
.video-card {
	
	justify-content: center;
    max-width: 800px; /* Maximale Breite des gesamten Moduls */
    margin: 20px auto; /* Zentriert das Modul horizontal */
    background-color: #ffffff;
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Stellt sicher, dass der iframe die Ecken respektiert */
}


/* * 2. Der responsive Video-Container (Der "16:9 Trick")
 * Dies ist der wichtigste Teil für die Responsivität.
*/
.video-embed-container {
    position: relative;
    width: 100%;
    height: 0;
    /* Dies erstellt ein 16:9 Seitenverhältnis (9 / 16 = 0.5625) */
    padding-bottom: 56.25%; 
}

/* * 3. Der iframe selbst
 * Er wird absolut positioniert, um den Container komplett auszufüllen.
*/
.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Entfernt den Standard-Rahmen des iframes */
}


/* * 4. Styling für den Info-Bereich (Titel & Beschreibung)
 * Fügt einfach etwas Innenabstand hinzu, damit der Text
 * nicht an den Kanten klebt.
*/
.video-info {
    padding: 20px 25px;
}

.video-info h3 {
    margin-top: 0; /* Entfernt den oberen Abstand des Titels */
    font-size: 1.4rem;
    color: #111;
}

.video-info p {
    font-size: 1rem;
    line-height: 1.6; /* Verbessert die Lesbarkeit */
    color: #444;
}

/* --- Unterseite Materialliste: Tabelle --- */
.table-container {
    overflow-x: auto; /* Sorgt für Scrollbarkeit auf Mobilgeräten */
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 1rem;
}
th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
th {
    background-color: #252525;
    color: #ffffff;
    font-weight: 700;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:hover {
    background-color: #f1f1f1;
}

/* --- Unterseite Impressum: Formular & Details --- */
.imprint-details {
    margin-bottom: 40px;
    line-height: 1.8;
}
.imprint-details p {
    margin-bottom: 10px;
}

.contact-form {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1rem;
}
.form-group button {
    background-color: #ff9900;
    color: #252525;			 
    font-weight: 700;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.3s;
}
.form-group button:hover {
    background-color: #cc7a00;
}

/* Formular-Nachrichten */
.success-message {
    color: green;
    font-weight: bold;
    border: 1px solid green;
    padding: 10px;
}
.error-message {
    color: red;
    font-weight: bold;
    border: 1px solid red;
    padding: 10px;
}





/* --- Responsive Design (Mobile Ansicht) --- */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }
    
    /* Menü-Band mobil */
    nav.main-nav ul, nav.footer-nav ul {
        flex-direction: column;
        align-items: center;
    }
    nav.main-nav li, nav.footer-nav li {
        margin: 8px 0;
    }

    /* Header mobil */
    .logo {
        max-width: 300px;
    }
    .back-button {
        width: 100%;
        text-align: center;
    }

    /* Startseiten-Links mobil (untereinander) */
    .page-links {
        flex-direction: column;
        align-items: center;
    }
    .page-link-box {
        width: 90%;
        max-width: 350px;
    }

    /* Galerie mobil */
    .thumbnail {
        width: 100px;
    }
}