/*externes CSS-Stylesheet*/

body {
    font-family: 'PT Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100dvh;
}

header,
nav,
main,
footer {
    padding: 10px;
    text-align: center;
}

header {
    position: relative;
    background: white;
    color: white;
    height: 110px;
}

.header-img {
    position: absolute;
    top: 10px;
    /* Abstand von oben */
    right: 10px;
    /* Abstand von rechts */
    max-width: 100%;
    height: auto;
    margin-left: 50 px;
    display: block;
}

html,
body {
    height: auto;
    /*statt einer festen Höhe von 100% */
    overflow-x: hidden;
    /* Verhindert horizontales Scrollen */
}


/* Bildlaufleiste */

.slider-container {
    width: 100%;
    overflow: hidden;
    background: #b42c2f
}

.slider-track {
    display: flex;
    width: max-content;
    animation: scroll 90s linear infinite;
}

.slider-track img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-right: 5px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* Bildrechtehinweise im Slider */

.image-container {
    position: relative;
    display: block;
    /* WICHTIG: Erhöhen Sie die Höhe, um Platz für die Bildunterschrift zu schaffen */
    /* width: 300px; */
    height: 220px;
    /* BILD (200px) + Unterschrift (ca. 20px) */
    margin-right: 5px;
    flex-shrink: 0;
}


/* -------------------- FIGURE UND CAPTION STYLES -------------------- */

figure {
    margin: 0;
    /* Entfernt den Standard-Figure-Margin */
    padding: 0;
    height: 100%;
    /* Wichtig, damit figure die Höhe des Containers annimmt */
}

figure img {
    width: 100%;
    height: 200px;
    /* Bildhöhe auf den ursprünglichen Wert setzen */
    object-fit: cover;
    display: block;
}

figcaption {
    /* Stil für die minimalistische Rechteangabe */
    font-size: 0.7em;
    /* Kleinere Schriftgröße */
    color: #666;
    /* Dezente Farbe */
    text-align: left;
    padding: 2px 5px;
    /* Etwas Innenabstand */
    line-height: 1.2;
    background-color: whitesmoke;
}


/*Bildrechteangabe im Slider Ende*/


/* Navigation */

nav {
    background: #b42c2f;
    /* theaterring-rot */
    color: white;
    max-height: 30 px;
}

a,
a:visited,
a:hover,
a:active {
    color: #b42c2f;
    /* theaterring-rot */
    text-decoration: none;
}

ul {
    margin-left: 0;
    /* Abstand nach außen */
    padding-left: 1em;
    /* Einzug der Listenelemente */
}


/* Bild-Grid für die Social-Media-Logos */

.bildgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* drei gleich breite Spalten */
    width: 100%;
    /* gesamte verfügbare Breite */
    justify-items: center;
    /* Inhalte (Bilder) in jeder Spalte zentrieren */
    align-items: center;
    /* vertikal zentrieren, falls nötig */
    gap: 0;
    /* optionaler Abstand */
}

.bildgrid img {
    width: 100%;
    /* füllt die Spaltenbreite aus */
    max-width: 100%;
    /* verhindert Überlauf */
    height: auto;
    /* behält Seitenverhältnis */
    display: block;
    /* entfernt kleine Lücken unter Bildern */
}


/* Spezieller Link: andere Farbe */

.footer-link,
.footer-link:visited,
.footer-link:hover,
.footer-link:active {
    color: white;
    /* z. B. blau */
}

nav-a {
    color: white;
    margin: 0 10px;
    text-decoration: underline;
}

main {
    padding: 20px;
}

footer {
    background: #b42c2f;
    /* theaterring-rot */
    color: white;
    font-size: 0.9em;
    height: 50px;
    padding-bottom: 25px;
}


/* Responsive Layout
    .container {
      display: flex;
      flex-wrap: wrap;
    } */


/* sorgt dafür, dass Boxen auf Desktop-PC flexibel 1-3 Spalten angezeigt werden */

.container {
    display: flex;
    flex-wrap: wrap;
    /* Mehrzeilig bei vielen Boxen */
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    /* Platz für 3 Boxen */
    margin: 0 auto;
}


/* Mobile: 1 Spalte */

.container {
    /* grid-template-columns: 1fr; */
    display: flex;
    gap: 1rem;
    justify-content: center;
    /* test */
}


/* Mobile: 1 Spalte */

.container {
    grid-template-columns: 1fr;
    /* Falls nur eine Box vorhanden ist, zentriert sie diese */
    justify-items: center;
}


/* Ab 480px: 2 Spalten */

@media (min-width: 480px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }
}


/* Ab 768px: 3 Spalten (mindestens 3 nebeneinander) */

@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    }
}

.box {
    flex: 1 1 300px;
    /* Startwert 300px, flexibel */
    max-width: 1000px;
    background: whitesmoke;
    padding: 20px;
    text-align: left;
    font-size: 90%;
    border-radius: 10px;
}

.box-termin {
    flex: 1 1 300px;
    /* Startwert 300px, flexibel */
    max-width: 300px;
    background: whitesmoke;
    padding: 20px;
    text-align: left;
    font-size: 90%;
    border-radius: 10px;
}

.box-text {
    font-size: 90%;
    text-align: left;
}

.groesserer-abstand {
    margin-top: 40px;
}

.nl-outer {
    /* um das rapidmail-Anmeldeformular zu zentrieren */
    display: flex;
    justify-content: center;
    /* horizontal */
}

ul li {
    margin-bottom: 10px;
    /* Abstand unter jedem Listenelement */
}


/* Optional: letzten Abstand entfernen */

ul li:last-child {
    margin-bottom: 0;
}

img.terminteaser {
    width: 300px;
    heigth: auto;
}

img.termin-startseite {
    width: 250px;
    heigth: auto;
}


.weiterlesen {
    /*funktioniert so noch nicht */
    color: #b42c2f;
    /* theaterring-rot */
    font-weight: bold;
}

.button {
    background-color: #b42c2f;
    /* theaterring-rot */
    color: white !important;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button-als-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #b42c2f;
    color: white !important;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}

button-als-link a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #b42c2f;
    color: white !important;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}


/* -------------------- OVERLAY UND INHALT -------------------- */

.popup-overlay {
    /* Wichtig: Standardmäßig versteckt */
    display: none;
    /* Positionierung über der gesamten Seite */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    /* Zentrierung des Pop-up-Inhalts */
    justify-content: center;
    align-items: center;
}

.popup-content {
    /* Die gewünschte Maximalbreite */
    max-width: 300px;
    width: 90%;
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}


/* -------------------- STYLING FÜR BUTTONS -------------------- */

.open-popup-btn,
.close-popup-btn {
    padding: 10px 15px;
    margin-top: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.open-popup-btn {
    margin: 20px;
}


/* -------------------- STYLING FÜR BLOGBEITRÄGE-ÜBERSICHT -------------------- */


/* Container für die Vorschau-Elemente */

.vorschau-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
}


/* Bild-Container */

.vorschau-bild {
    flex: 0 0 auto;
    max-width: 300px;
    /* Maximale Breite des Bildes - anpassbar */
    box-sizing: border-box;
}

.vorschau-bild img {
    width: 100%;
    height: auto;
    display: block;
}


/* Text-Container */

.vorschau-text {
    flex: 1;
    box-sizing: border-box;
    padding: 0;
    /* Kein zusätzliches Padding, da gap bereits Abstand schafft */
}


/* Responsive: Mobile Ansicht (untereinander) */

@media (max-width: 767px) {
    .vorschau-container {
        flex-direction: column;
        gap: 15px;
    }
    .vorschau-bild {
        max-width: 200px;
        width: 200px;
    }
}


/* CSS für Abonnement-Formular */

/* Container für das Label-Feld-Paar */
.form-group {
    /* Zeigt die Elemente in einer Spalte (gestapelt) an */
    display: flex;
    flex-direction: column; 
    /* Ein bisschen Abstand nach unten */
    margin-bottom: 15px; 
}

/* Alle relevanten Formularfelder */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select {
    /* Setzt die Breite auf 100% des umgebenden .form-group DIVs */
    width: 100%;
    /* Stellt sicher, dass padding und border die Gesamtbreite nicht überschreiten */
    box-sizing: border-box; 
    padding: 8px; /* Optional: für bessere Optik */
    border: 1px solid #ccc; /* Optional: für bessere Optik */
    border-radius: 4px; /* Optional: für bessere Optik */
}

/* Optional: Damit das Label selbst nicht zu viel Platz einnimmt,
   da es von Haus aus ein inline-Element ist, aber im Flex-Container
   nun die volle Breite annimmt */
.form-group label {
    margin-bottom: 5px; /* Abstand zwischen Label und Feld */
    font-weight: bold; /* Optional: für bessere Lesbarkeit */
}