/* Allgemeine Einstellungen */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Äußerer Wrapper für die gesamte Seite */
.page-wrapper {
    max-width: 1300px; /* Maximale Breite für die gesamte Seite */
    margin: 20px auto; /* Abstand von oben/unten und zentriert auf der Seite */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Gesamt-Schatten */
    background-color: #fff; /* Hintergrundfarbe der Seite */
    border-radius: 8px; /* Optionale Abrundung der Ecken */
    overflow: hidden; /* Verhindert Überlauf (z. B. Schatten von Inhalt) */
}

/* Zentrale Layout-Containereinstellung */
.container {
    width: 100%;
    max-width: 1200px; /* Maximale Breite des Inhaltsbereichs */
    margin: 0 auto; /* Zentriert den Bereich horizontal */
    padding: 0 20px; /* Links und rechts Padding für zusätzlichen Abstand */
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 20px; /* Abstand nach unten */
}

/* Hauptüberschrift */
.title {
    color: #008986; /* Türkisfarbene Überschrift */
    font-size: 24px;
    margin: 10px 0;
}

/* Linie */
.line {
    background-color: #865fa0; /* Dunkellila */
    height: 4px; /* Dicke der Linie */
    width: 100%; /* Breite über die ganze Seite */
    margin: 0; /* Kein extra Abstand */
}

/* Info-Section */
.info-section {
    padding: 20px 0; /* Nur vertikaler Abstand */
    font-size: 18px; /* Größere Schriftgröße */
    line-height: 1.8; /* Mehr Zeilenhöhe für Lesbarkeit */
    color: #333; /* Textfarbe */
}

.info-section ul {
    list-style: none; /* Deaktiviert die Standard-Aufzählungszeichen */
    padding-left: 20px; /* Platz für benutzerdefinierte Punkte */
    margin: 10px 0; /* Abstand um die Liste */
}

.info-section ul li {
    position: relative; /* Ermöglicht die Verwendung von ::before */
    color: #333; /* Schwarzer Text */
    font-size: 18px; /* Schriftgröße bleibt konsistent mit dem Abschnitt */
    padding-left: 20px; /* Für die Bullet Points */
}

.info-section ul li::before {
    content: "●"; /* Benutzerdefinierter Punkt */
    color: #008986; /* Türkis */
    position: absolute; /* Position des Bullet Points */
    left: 0; /* Platzierung links vom Text */
}

/* Neuer Bereich für den K.Postfach-Button */
.postfach-button-wrapper {
    text-align: center; /* Zentriert den Button */
    margin: 20px 0; /* Abstand oben und unten */
}

.postfach-button {
    display: inline-block; /* Button bleibt inline */
    text-decoration: none; /* Entfernt Unterstreichung */
    font-size: 18px; /* Schriftgröße des Buttons */
    color: #fff; /* Weiße Schriftfarbe */
    background-color: #008986; /* Türkisfarbener Hintergrund */
    padding: 12px 24px; /* Innenabstand für bessere Button-Größe */
    border-radius: 5px; /* Runde Ecken */
    font-weight: bold; /* Fettdruck des Texts */
    transition: background-color 0.3s ease; /* Weicher Übergang bei Hover */
}

.postfach-button:hover {
    background-color: #0a5e69; /* Dunklerer Türkiston bei Hover */
}

/* Unterüberschrift für Videos */
.video-section-title {
    color: #008986; /* Türkisfarbene Überschrift */
    font-size: 20px;
    text-align: left; /* Links ausgerichtet */
    margin: 20px 0; /* Abstand um die Überschrift */
}

/* Row und Spalten für Videos */
.row {
    display: flex;
    flex-wrap: wrap; /* Damit die Inhalte umgebrochen werden, falls der Platz nicht reicht */
    margin: -10px; /* Negativer Margin für gleichmäßige Spaltenabstände */
}

[class^="col-"] {
    padding: 10px;
    box-sizing: border-box;
}

.col-6 {
    flex: 0 0 50%; /* Spalten nehmen jeweils 50% der Breite ein */
}

video {
    width: 100%; /* Videos füllen die Spalten komplett aus */
    height: auto; /* Proportionale Höhe */
    border: 1px solid #ccc; /* Optionaler Rahmen */
}

/* Video-Titel */
.video-title {
    background-color: #008986; /* Türkisfarbener Hintergrund */
    color: #fff; /* Weißer Text */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
}

/* Flexbox für Text und Button nebeneinander */
.linktok {
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikale Ausrichtung zentrieren */
    justify-content: center; /* Inhalt horizontal zentrieren */
    gap: 15px; /* Abstand zwischen Text und Button */
    text-align: center; /* Text innerhalb des Containers zentrieren */
    margin: 20px 0; /* Abstand um den gesamten Container */
    background: linear-gradient(to right, white, lightgray);
}
/* Styling für den Download-Bereich */
.download-links {
    margin: 20px 0; /* Abstand oberhalb und unterhalb des Bereichs */
}

/* Styling für die Download-Bereich-Überschrift mit Linie */
.video-download-title {
    color: #008986; /* Türkisfarbene Überschrift */
    font-size: 20px;
    margin-bottom: 15px; /* Abstand unter der Überschrift */
    text-align: left; /* Links ausgerichtet */
    font-weight: bold;
    position: relative; /* Position für die Linie */
}

.video-download-title::after {
    content: ''; /* Pseudo-Element für die Linie */
    display: block;
    width: 100%; /* Linie geht über die gesamte Breite der Überschrift */
    height: 2px; /* Dünne Linie */
    background-color: #865fa0; /* Dunkellila Farbe */
    margin-top: 5px; /* Abstand zwischen Text und Linie */
}


/* Zwei-Spalten-Layout für Download-Links */
.download-links .row {
    display: flex;
    flex-wrap: wrap; /* Inhalte umbrechen, wenn nötig */
    margin: -10px; /* Negativer Margin für gleichmäßige Abstände */
}

.download-links .col-6 {
    flex: 0 0 50%; /* Jede Spalte nimmt 50% Breite ein */
    padding: 10px; /* Innenabstand der Spalte */
}

/* Einzelne Download-Links */
.download-link {
    align-items: center; /* Vertikale Ausrichtung zentrieren */
    font-size: 20px; /* Textgröße */
    color: #008986; /* Türkis Textfarbe */
    text-decoration: none; /* Unterstreichung entfernen */
    transition: color 0.3s ease; /* Sanfter Übergang für Hover */
}

.impressum-link {
    align-items: center; /* Vertikale Ausrichtung zentrieren */
    font-size: 16px; /* Textgröße */
    color: #008986; /* Türkis Textfarbe */
    text-decoration: none; /* Unterstreichung entfernen */
    transition: color 0.3s ease; /* Sanfter Übergang für Hover */
}

.download-link:hover, .impressum-link:hover {
    color: #0a5e69; /* Dunkelere Farbe bei Hover */
}

/* Icon-Styling */
.download-link i {
    margin-right: 10px; /* Abstand zwischen Icon und Text */
    font-size: 18px; /* Größe des Icons */
    color: #008986; /* Türkis Icon Farbe */
}