/* public/css/style.css */

/* 1. Farbpalette (Custom Properties) */
:root {
    --primary-color: #F52113;
    --light-yellow: #F2C150;
    --brown: #e74c3c;
    --gold: #E6831E;
    --background-color: #ffffff;
    --text-color: #13110C;
    --black: #000000;
    --light-gray: #696969;
}




/* 2. Grundstyles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: FunnelDisplay, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

html, body{
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}



/* 3. Navbar */
.navbar {
    background-color: var(--black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

.navbar-brand{
    text-decoration: none;
}

.navbar-brand p {
    color: var(--gold);
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 1rem;
}

.nav-menu li a {
    color: var(--background-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu li a:hover {
    color: var(--light-yellow);
}


/* 4. Hero Section */
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 2rem;
    background-color: var(--light-yellow);
    color: var(--black);
}

.hero-text {
    flex: 1 1 50%;
    padding: 1rem;
}

.hero-text h1 {
    font-family: 'Bavarian', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.hero-text h2 {
    font-family: 'BonheurRoyale', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--black);
}


.hero-text p {
    font-family: 'FunnelDisplay', sans-serif;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.btn {
    padding: 0.8rem 1.2rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    margin-right: 0.5rem;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: 1px solid var(--black);
}

.btn-primary:hover {
    background-color: var(--brown);
}

.btn-secondary {
    background-color: var(--brown);
    color: var(--background-color);
    border: 1px solid var(--black);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
}

.hero-image {
    flex: 1 1 50%;
    padding: 1rem;
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}


/* Instagram-Bereich */
.instagram-link
{
    text-decoration: none;
    color: inherit;
}

.instagram {
    display: flex;          /* Elemente nebeneinander anordnen */
    justify-content: center; /* Gruppe zentrieren */
    align-items: center;    /* Vertikal zentrieren */
    flex-wrap: wrap;       /* Umbruch auf kleinen Bildschirmen erlauben */
    gap: 2rem;             /* Abstand zwischen Insta-Box und Prompt */
    padding: 2rem 1rem;    /* Etwas Innenabstand */
}

/* Anpassung für den bestehenden Container */
.instagram-container {
    /* margin: 1rem auto; <-- Entfernen oder anpassen, da Flexbox jetzt zentriert */
    margin: 0; /* Kein Außenabstand mehr nötig für Zentrierung */
    /* Optional: Maximale Breite leicht reduzieren, um Platz zu schaffen */
    max-width: 450px;
    /* Bestehende Stile wie border, shadow, hover bleiben erhalten */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--light-gray);
    border-radius: 10px;
    background-color: var(--background-color);
    /* width: 100%; <-- Entfernen oder anpassen */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    text-align: center;
}

/* NEU: Stile für den Prompt-Container (Pfeil + Text) */
.instagram-prompt {
    display: flex;
    flex-direction: column; /* Text über Pfeil */
    align-items: center;    /* Horizontal zentrieren */
    text-align: center;
}

/* NEU: Stil für den "Folg uns..." Text */
.instagram-follow-text {
    font-size: 1.3rem; /* Etwas größer */
    font-weight: bold;
    color: var(--text-color); /* Oder eine deiner Akzentfarben wie var(--primary-color) */
    margin-bottom: 0.5rem; /* Abstand zum Pfeil */
    /* Optional: Eine passende "skizzierte" Schriftart, falls vorhanden */
    /* font-family: 'DeineSkizzenSchrift', cursive; */
}

/* NEU: Stil für das Pfeil-Bild */
.instagram-arrow {
    width: 120px; /* Breite des Pfeils anpassen */
    height: auto; /* Höhe automatisch anpassen */
    /* Optional: Drehung, falls der Pfeil nicht perfekt passt */
    /* transform: rotate(-10deg); */
}





/* ... (Restliche CSS-Regeln bleiben bestehen) ... */
.instagram-content{
    display: flex;
    flex-direction: row;
    margin: 20px;
}


.instagram-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background-color: var(--black);
    color: var(--background-color);
}


.instagram-container:hover .instagram-text p {
    color: var(--background-color);
}


.instagram-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    transition: filter 0.3s ease;
    border-radius: 11px;
    overflow: hidden;
}


.instagram-profile {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 1rem;
    object-fit: cover;
    border: 1px solid black;
}

.instagram-text h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.instagram-text p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-color);
}








/* 5. Services Section */
.services {
    padding: 2rem;
    background-color: var(--background-color);
    text-align: center;
}

.services h2 {
    margin-bottom: 2rem;
    color: var(--black);
}

.services a{
    color: var(--black);
    text-decoration: none;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
    justify-content: center;
}

.service {
    background-color: #fdfdfd;
    max-width: 300px;
    border: 1px solid var(--light-yellow);
    border-radius: 8px;
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

.service:hover {
    transform: translateY(-5px);
}

.service img {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.service h3 {
    margin-bottom: 0.5rem;
    color: var(--brown);
}

/* 6. Team Section */
.team {
    padding: 2rem;
    background-color: var(--light-yellow);
    text-align: center;
}

.team h2 {
    margin-bottom: 2rem;
    color: var(--black);
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.team-member {
    max-width: 180px;
    text-align: center;
}

.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.team-member h3 {
    margin-bottom: 0.3rem;
    color: var(--brown);
}

.team-member p {
    color: var(--black);
}

/* 7. Kontakt Section */
.contact {
    padding: 2rem;
    background-color: var(--background-color);
    text-align: center;
}

.contact h2 {
    margin-bottom: 1rem;
    color: var(--black);
}

.anfahrt {
    text-align: center;
    padding: 4rem 2rem;
    background-color: #f9f9f9; /* Heller Hintergrund */
}

.anfahrt h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333; /* Dunklerer Text */
}

.maps {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

#display-google-map {
    width: 100%;
    max-width: 800px; /* Begrenzte Breite */
    height: 450px; /* Feste Höhe */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

#display-google-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

.termine {
    text-align: center;
    padding: 4rem 2rem;
    background: #f9f9f9;
}

.termine-container {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.termin-card {
    background: white;
    padding: 20px;
    width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.termin-card:hover {
    transform: scale(1.05);
}

.date {
    font-weight: bold;
    color: var(--primary-color);
}

/* Kartenverkaufsseite */
.karten {
    text-align: center;
    padding: 4rem 2rem;
    background: #f9f9f9;
}

.events-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.event-card {
    background: white;
    padding: 20px;
    width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    margin-top: 10px;
}

.event-card:hover {
    transform: scale(1.05);
}

.event-card p {
    font-size: 1rem;
    color: var(--black);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: none;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--brown);
}

.event-card h4 {
    color: var(--black);
    margin-top: 8px;
    padding: 0.8rem;
    border: 1px solid var(--black);
}

/* Über uns - Seite */
.verein {
    text-align: center;
    padding: 4rem 2rem;
    background: #f9f9f9;
}

.verein h1{
    margin-bottom: 20px;
}

.verein-info {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem; /* Damit es auf kleineren Bildschirmen nicht zu eng wird */
}

.verein-info h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: Bavarian, sans-serif;
    font-size: 2.5rem;
}

.verein-info h3 {
    color: var(--black);
    margin-bottom: 1rem;
    font-family: BonheurRoyale, sans-serif;
    margin-top: 15px;
    font-size: 2rem;
}

.verein-info p {
    font-size: 1rem;
    color: var(--light-gray);
    line-height: 1.6;
}

/* Styling für das Gruppenfoto auf der Vereinsseite */
.gruppenfoto-container {
    width: 100%;
    max-width: 800px; /* Gleiche Breite wie .verein-info oder anpassen */
    margin: 2rem auto; /* Zentriert und gibt Abstand nach oben/unten */
    text-align: center; /* Zentriert das Bild, falls es schmaler als der Container ist */

}

.gruppenfoto {
    width: 100%; /* Bild füllt die Containerbreite */
    height: auto; /* Seitenverhältnis beibehalten */
    display: block; /* Verhindert möglichen Leerraum unter dem Bild */
    border-radius: 8px; /* Optional: Abgerundete Ecken */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Optional: Leichter Schatten */
    border: 1px solid black;
}

/* Responsive Anpassung */
@media (max-width: 840px) { /* Beispiel-Breakpoint, anpassen! */
    .gruppenfoto-container {
        max-width: 90%; /* Etwas mehr Breite auf kleineren Screens erlauben */
        margin: 1.5rem auto;
    }
}

/* Container für Karten */
.options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

/* Option-Karten */
.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Inhalte gleichmäßig verteilen */
    text-align: center;
    background-color: #fdfdfd;
    width: 280px; /* Alle Boxen gleich breit */
    height: 200px; /* Alle Boxen gleich hoch */
    padding: 1.5rem;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.3s ease, border 0.3s ease-in-out;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    border: 3px solid transparent;
}

/* Coole Border-Animation */
.option-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 3px solid var(--light-yellow);
    transition: border-color 0.4s ease-in-out;
}

.option-card:hover::before {
    border-color: var(--primary-color);
}

.option-card:hover {
    transform: translateY(-5px);
}

/* Icon-Styling */
.option-card img {
    max-width: 120px;
    max-height: 120px;
    margin-bottom: 10px;
    object-fit: contain;
}

/* Titel */
.option-card h3 {
    font-size: 1.2rem;
    color: var(--black);
    margin-bottom: 0;
}


/* Download-Buttons */
.downloads{
    margin-top: 20px;
}

.download-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold);
    color: var(--black);
    text-decoration: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    transition: background 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--black);
}

.btn-download:hover {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: 2px solid var(--black);
}





/* --- Verbesserungen Kulturbote Archiv --- */

/* Container und Header */
.kulturbote-container {
    max-width: 1100px; /* Breite des Hauptcontainers */
    margin: 2rem auto; /* Zentrieren, Abstand oben/unten */
    padding: 1rem;
}

/* Korrektur für evtl. Tippfehler im Klassennamen + Styling */
.kultorbote-header, /* Tippfehler-Klasse */
.kulturbote-header { /* Korrigierte Klasse */
    text-align: center;
    margin-bottom: 3.5rem; /* Mehr Abstand nach unten */
}

.kultorbote-header h1,
.kulturbote-header h1 {
    font-size: 2.8rem; /* Gleiche Größe wie andere H1 */
    color: var(--text-color);
    margin-bottom: 0.75rem;
    /* font-family: 'Bavarian', sans-serif; /* Optional */
}

.kultorbote-header p,
.kulturbote-header p {
    font-size: 1.1rem;
    color: var(--light-gray);
    max-width: 650px; /* Zeilenlänge begrenzen */
    margin: 0 auto; /* Zentrieren */
    line-height: 1.6;
}

/* Auswahlbereich - Umstellung auf Grid-Layout */
.kulturbote-selection {
    display: grid;
    /* Responsive Spalten: Mind. 180px breit, max. 1fr (füllt verfügbaren Platz) */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2rem; /* Abstand zwischen den Karten */
    justify-content: center; /* Zentriert die Grid-Items, falls eine Zeile nicht voll ist */
}

/* Basis-Styling für jede Kulturbote-Karte (Link oder Div) */
.kulturbote-card {
    background-color: #ffffff;
    border-radius: 10px; /* Etwas rundere Ecken */
    padding: 1.5rem 1rem; /* Mehr Innenabstand */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Weicher Schatten */
    border: 1px solid #e5e5e5; /* Dezenter Rand */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertikal zentrieren */
    align-items: center; /* Horizontal zentrieren */
    min-height: 140px; /* Mindesthöhe für Gleichmäßigkeit */
    position: relative; /* Für Icon-Positionierung */
}

/* Speziell für klickbare Karten (Links) */
a.kulturbote-card {
    text-decoration: none;
    color: var(--text-color); /* Standard-Textfarbe */
}

/* Hover- und Fokus-Effekt für klickbare Karten */
a.kulturbote-card:hover,
a.kulturbote-card:focus { /* Fokus-Styling für Barrierefreiheit */
    transform: translateY(-6px); /* Anheben-Effekt */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* Stärkerer Schatten */
    border-color: var(--gold); /* Akzentfarbe für den Rand */
    color: var(--primary-color); /* Textfarbe ändern (z.B. rot) */
    outline: 2px solid transparent; /* Optional: Standard-Fokus-Outline entfernen */
    outline-offset: 2px;
}
a.kulturbote-card:focus-visible { /* Moderner Fokus-Indikator */
    box-shadow: 0 0 0 3px var(--light-yellow); /* Fokus-Ring in Akzentfarbe */
}


/* PDF Icon hinzufügen (mit ::before Pseudo-Element) */
a.kulturbote-card::before {
    /* Methode 1: Simples Emoji als Icon */
    content: '📰'; /* Zeitungs-Emoji, oder '📄' für Dokument */
    font-size: 2.5rem; /* Größe des Icons */
    margin-bottom: 1rem; /* Abstand zum Text */
    display: block;

    /* Methode 2: SVG-Icon als Hintergrund (flexibler) */
    /*
    content: '';
    display: block;
    width: 40px;
    height: 45px;
    background-image: url('/images/pdf-icon.svg'); // <-- PFAD ZU DEINEM ICON ANPASSEN
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 1rem;
    */
}

/* Text innerhalb der Karte */
.kulturbote-card span {
    font-size: 1rem;
    font-weight: 600; /* Etwas fetter */
    line-height: 1.4;
    display: block; /* Stellt sicher, dass es richtig umbricht */
}

/* Styling für nicht-klickbare Karten (wenn PDF fehlt) */
.kulturbote-selection div.kulturbote-card {
    background-color: #f8f9fa; /* Heller Hintergrund */
    opacity: 0.6; /* Ausgegraut */
    color: #6c757d; /* Graue Textfarbe */
    box-shadow: none;
    cursor: not-allowed; /* Mauszeiger anpassen */
    border-color: #e0e0e0;
}
.kulturbote-selection div.kulturbote-card::before {
    content: '🚫'; /*Alternatives Symbol*/
    font-size: 2.5rem;
    margin-bottom: 1rem;
}


/* Styling für die Meldung, wenn keine Kulturboten da sind */
.kulturbote-selection > p {
    grid-column: 1 / -1; /* Über alle Spalten erstrecken */
    text-align: center;
    font-size: 1.1rem;
    color: var(--light-gray);
    padding: 3rem 1rem;
}


.theater-container{
    margin: 30px;
}

.theater-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 30px;
}
.headertext{
    align-items: center;
    text-align: center;
}

.theater-card {
    position: relative;
    width: 250px;
    height: 350px;
    text-decoration: none;
    color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s ease,
    color 0.3s ease;
    border: 1px solid var(--black);
}

.theater-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 0) 80%);
    transition: background 0.3s ease;
}

.theater-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}

.theater-card h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold;
    transition: background 0.3s ease, color 0.3s ease;
}

.theater-card:hover {
    transform: scale(1.08);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.25);
}

.theater-card:hover::before {
    background: rgba(0, 0, 0, 0); /* Farbverlauf verschwindet */
}

.theater-card:hover h3 {
    background: rgba(255, 255, 255, 0.8); /* Hintergrund heller */
    color: #000; /* Schriftfarbe schwarz */
}

.theater-header{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}



.sort-dropdown {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.sort-button {
    background-color: var(--black);
    color: var(--background-color);
    padding: 14px 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.sort-button:hover {
    background-color: var(--brown);
}

.sort-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 1000;
}

.sort-menu a {
    display: block;
    padding: 10px;
    color: var(--black);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.sort-menu a:hover {
    background-color: #f1f1f1;
}

/* Dropdown anzeigen, wenn man über den Button oder das Menü hovert */
.sort-dropdown:hover .sort-menu,
.sort-menu:hover {
    display: block;
}



.theater-detail-container {
    text-align: center;
    padding: 30px;
}

.theater-description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.6;
}

.carousel-container {
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 16px 24px 0px rgba(0,0,0,0.6);
}

.carousel-slide {
    width: 100%;
    display: none;
    border-radius: 8px;
    border: 2px solid var(--black);
}

.carousel-prev, .carousel-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.carousel-prev {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
    left: 0;
}

.carousel-next {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent);
    right: 0;
}

.carousel-prev:hover, .carousel-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Pfeil-Icon anpassen */
.carousel-prev img, .carousel-next img {
    width: 35px;
    height: 35px;
}

/* Prev-Pfeil umdrehen */
.carousel-prev img {
    transform: scaleX(-1);
}

/* Kindertheater Anpassungen - Analog zum Erwachsenentheater */
.jugendtheater-container {
    margin: 20px auto;
}

.jugendtheater-header {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 2.5rem;
    justify-content: center;   /* Zentriert die Gruppe (Titel + Button) */
    align-items: center;
}

.jugendtheater-text {
    flex: 1;
    padding-right: 20px;
}

.jugendtheater-text h1 {
    font-size: 32px;
    color: var(--black);
    margin-bottom: 10px;
}

.jugendtheater-text p {
    font-size: 16px;
    line-height: 1.5;
}

.jugendtheater-bild {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.jugendtheater-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 30px;
}

.jugendtheater-card {
    position: relative;
    width: 250px;
    height: 350px;
    text-decoration: none;
    color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s ease,
    color 0.3s ease;
    border: 1px solid var(--black);
    background: transparent;
}


.jugendtheater-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 0) 80%);
    transition: background 0.3s ease;
}

.jugendtheater-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}



.jugendtheater-card h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold;
    transition: background 0.3s ease, color 0.3s ease;
}

.jugendtheater-card:hover {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.25);
}

.jugendtheater-card:hover::before {
    background: rgba(0, 0, 0, 0); /* Farbverlauf verschwindet */
}

.jugendtheater-card:hover h3 {
    background: rgba(255, 255, 255, 0.8); /* Hintergrund heller */
    color: #000; /* Schriftfarbe schwarz */
}




.starkbier-container .headerdetails {
    margin: 0;
    padding: 0;
    text-align: center;
}

.theater-header-container{

    display: flex;
    flex-wrap: nowrap;
    gap: 2.5rem;
    justify-content: center;   /* Zentriert die Gruppe (Titel + Button) */
    align-items: center;
}



.starkbier-container .theater-header {
    display: flex;             /* Hauptachse: Horizontal */
    flex-wrap: wrap;           /* Umbruch auf kleinen Screens */
    padding: 2rem 1rem;        /* Innenabstand */
    margin-bottom: 3rem;       /* Abstand zum Grid darunter */
    position: relative;
    background-image: url('../images/bavarian1.svg');
    background-repeat: repeat;

    /* Bayrisches Element: Rahmen (optional) */
    border-top: 4px solid #0066b2; /* Bayrisch Blau */
    border-bottom: 4px solid #0066b2; /* Bayrisch Blau */
    background-color: #f8f8f8; /* Heller Hintergrund, falls kein Muster verwendet wird */

}

.starkbier-container h1 {
    font-family: Bavarian, sans-serif;
    font-size: 48px;
    color: var(--black);
    text-shadow: 2px 2px #a8dadc;

    padding: 20px;
    border: 1px solid black;
    border-radius: 10px;
    background: white;

}

.starkbier-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 30px;
}

.starkbier-card {
    position: relative;
    width: 280px;
    height: 350px;
    text-decoration: none;
    color: white;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #a8dadc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.starkbier-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.starkbier-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

.starkbier-info h2 {
    font-family: Bavarian, sans-serif;
    font-size: 24px;
}

.starkbier-info p {
    font-size: 14px;
}

/* Hover Effekt */
.starkbier-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.starkbier-card:hover .starkbier-info {
    background: #1d3557;
    opacity: 0.9;

}

/* Detailseite */
.starkbier-detail {
    text-align: center;
    padding: 4rem 2rem;
}

.starkbier-detail h1 {
    font-family: Bavarian, sans-serif;
    font-size: 42px;
    color: #1d3557;
}

.starkbier-detail img {
    width: 60%;
    max-width: 800px;
    margin: 20px auto;
    display: block;
    border-radius: 8px;
}

.starkbier-detail p {
    font-size: 18px;
    line-height: 1.5;
}


.back-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background: #1d3557;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.back-button:hover {
    background: #457b9d;
}




.links-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

.link-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.link-card:hover {
    transform: translateY(-5px);
}

.link-card h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.link-card a {
    display: block;
    margin-top: 5px;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.link-card a:hover {
    text-decoration: underline;
}

.link-card.no-link {
    background: #f5f5f5;
    color: #777;
}

.link-card.no-link span {
    font-style: italic;
}



.impressum-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.impressum-container h2, .impressum-container h3 {
    color: #333;
    margin-bottom: 10px;
}

.impressum-container p {
    color: #555;
    line-height: 1.6;
}

.impressum-container ul {
    padding-left: 20px;
}

.impressum-container ul li {
    list-style: none;
    margin-bottom: 5px;
}

.impressum-container a {
    color: #007bff;
    text-decoration: none;
}

.impressum-container a:hover {
    text-decoration: underline;
}



/* Zusätzliche CSS-Regeln für Datenschutz */
.impressum-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--background-color);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.inactive-service {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    margin: 1.5rem 0;
    background: #fff5f5;
}

.checkbox-container {
    display: block;
    margin: 1rem 0;
    cursor: pointer;
}

.checkbox-label {
    margin-left: 0.5rem;
    color: var(--text-color);
}

.warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 1rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.links{
    margin-top: 20px;
    align-items: center;
    text-align: center;
}

.links-container {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
}

.link-card {
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}




/* --- Verbesserungen Bilderarchiv --- */

/* Hauptüberschrift */
h1.bilderarchiv-h1 {
    text-align: center;
    margin-top: 2rem; /* Mehr Abstand oben */
    margin-bottom: 2.5rem; /* Mehr Abstand unten */
    font-size: 2.8rem; /* Größer */
    color: var(--text-color); /* Theme-Farbe */
    /* Optional: font-family: 'Bavarian', sans-serif; */
}

/* Container für alle Events */
.bilderarchiv-container {
    max-width: 1100px; /* Etwas breiter, anpassen nach Bedarf */
    margin: 0 auto 3rem auto; /* Zentrieren und Abstand unten */
    padding: 0 1rem; /* Seitlicher Abstand auf kleinen Screens */
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Größerer Abstand zwischen den Event-Blöcken */
}

/* Einzelner Event-Block (wird zur "Karte") */
.bilderarchiv-event {
    background-color: #ffffff; /* Weißer Hintergrund für die Karte */
    border-radius: 12px; /* Abgerundete Ecken */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* Weicherer Schatten */
    overflow: hidden; /* Wichtig für border-radius bei Kind-Elementen */
    border: 1px solid #e0e0e0; /* Dezenter Rand */
}

/* Header des Event-Blocks */
.bilderarchiv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa; /* Heller Hintergrund für den Header */
    padding: 1.2rem 1.8rem; /* Mehr Innenabstand */
    cursor: pointer; /* Zeigt an, dass man klicken kann */
    border-bottom: 1px solid var(--gold); /* Trennlinie */
    transition: background-color 0.2s ease;
    /* Alte Border/Shadow entfernen */

    box-shadow: none;
}

.bilderarchiv-header:hover {
    background-color: #f1f3f5; /* Leichter Hover-Effekt */
}

.bilderarchiv-header h2 {
    margin: 0;
    font-size: 1.6rem; /* Größere Überschrift */
    color: var(--text-color);
    font-weight: 600; /* Etwas fetter */
}

/* Toggle-Button (Auf/Zu) */
.bilderarchiv-toggle-button {
    background: none;
    border: none;
    font-size: 1.4rem; /* Größeres Icon */
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    color: var(--gold); /* Rote Theme-Farbe */
    transition: transform 0.3s ease-out, color 0.2s ease;
}

.bilderarchiv-toggle-button:hover {
    color: var(--brown); /* Dunklere Variante beim Hover */
}

/* Pfeil drehen, wenn Details offen sind (benötigt JS Anpassung, siehe unten) */
.bilderarchiv-event.active .bilderarchiv-toggle-button {
    transform: rotate(180deg);
}

/* Container für das horizontale Karussell */
.bilderarchiv-carousel-container {
    position: relative;
    display: flex; /* Standardmäßig sichtbar (wenn NICHT active) */
    align-items: center;
    padding: 1.5rem 1rem;
    background-color: #ffffff;
    /* Übergang für das Ausblenden hinzufügen */
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.4s ease-out;
    max-height: 300px; /* Eine Standard-Maximalhöhe für die Transition */
    opacity: 1;
    overflow: hidden; /* Wichtig für max-height Transition */
}

.bilderarchiv-event.active .bilderarchiv-carousel-container {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    /* Optional: border entfernen, wenn es stört beim Kollabieren */
    /* border: none; */
}

/* Wrapper für das scrollbare Karussell */
.bilderarchiv-carousel-wrapper {
    flex-grow: 1;
    overflow: hidden; /* Versteckt den Scrollbalken */
    margin: 0 15px; /* Abstand zu den Pfeilen */
}

/* Das eigentliche Karussell mit den Bildern */
.bilderarchiv-carousel {
    display: flex;
    gap: 15px; /* Abstand zwischen Thumbnails */
    padding: 5px 0; /* Kleiner vertikaler Abstand */
}

/* Einzelnes Vorschaubild im Karussell */
.bilderarchiv-carousel-item {
    flex: 0 0 auto; /* Bilder nicht quetschen/strecken */
    width: 180px; /* Breite der Thumbnails */
    height: 120px; /* Höhe der Thumbnails */
    border-radius: 8px; /* Abgerundete Ecken */
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: block;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd; /* Leichter Rand um Bilder */
}

.bilderarchiv-carousel-item:hover {
    transform: scale(1.06); /* Leichte Vergrößerung beim Hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.bilderarchiv-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt den Container, ggf. beschnitten */
    display: block;
}

/* Karussell Navigationspfeile */
.bilderarchiv-carousel-prev,
.bilderarchiv-carousel-next {
    background-color: var(--black); /* Schwarzer Hintergrund */
    color: white;
    opacity: 0.6; /* Leicht transparent */
    border: none;
    width: 45px; /* Größer */
    height: 100px;
    font-size: 1.8rem; /* Größeres Pfeilsymbol */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
}

.bilderarchiv-carousel-prev{
    border-radius: 10px 0px 0px 10px;
}
.bilderarchiv-carousel-next{
    border-radius: 0px 10px 10px 0px;
}


.bilderarchiv-carousel-prev:hover,
.bilderarchiv-carousel-next:hover {
    background-color: var(--gold); /* Roter Hintergrund beim Hover */
    opacity: 1; /* Voll sichtbar */
}

/* Versteckter Detailbereich */
.bilderarchiv-details {
    padding: 0 1.8rem; /* Initial kein vertikales Padding */
    background-color: #ffffff;
    border-top: 1px solid #e9ecef;
    max-height: 0; /* Standardmäßig versteckt (wenn NICHT active) */
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    padding 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease-in 0.2s; /* Fade-in etwas verzögert */
}

/* Style wenn Details sichtbar sind (benötigt JS Anpassung) */
.bilderarchiv-details.active {
    max-height: 3000px; /* Genug Höhe für Inhalt */
    padding: 1.8rem; /* Vertikales Padding hinzufügen */
    opacity: 1;
}

/* Style für das Grid in den Details */
.bilderarchiv-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Responsive Spalten */
    gap: 15px; /* Abstand zwischen Grid-Bildern */
    margin-bottom: 1.8rem; /* Abstand zur Beschreibung */
}

.bilderarchiv-gallery a {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.bilderarchiv-gallery a:hover {
    transform: translateY(-4px); /* Leichter "Lift"-Effekt */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.bilderarchiv-gallery img {
    width: 100%;
    height: 130px; /* Höhe der Grid-Bilder */
    object-fit: cover;
    display: block;
}

/* Beschreibungstext */
.bilderarchiv-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
    background-color: #f8f9fa; /* Heller Hintergrund */
    padding: 1.2rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* Hinweis, wenn keine Bilder verfügbar sind */
.bilderarchiv-container > p { /* Direkter Nachfahre, falls 'archiv' leer ist */
    text-align: center;
    font-size: 1.1rem;
    color: var(--light-gray);
    padding: 3rem 1rem;
}







.container {
    flex: 1; /* Der Inhalt dehnt sich aus */
    overflow: auto;
}
.footer {
    background: var(--black);
    color: #f1faee;
    padding: 2rem 0;
    font-size: 0.9rem;
    text-align: center;
    margin-top: auto;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    font-family: "Bavarian", sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}

.footer-logo :hover{
    color: var(--gold);
}

.footer-links a {
    color: #a8dadc;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #f4a261;
}

.footer-socials a {
    color: #f1faee;
    font-size: 1.5rem;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: #f4a261;
}

.footer-bottom {
    margin-top: 10px;
    font-size: 0.8rem;
    opacity: 0.8;
}


/*Responsiveness*/
/* Burger Menü */
.burger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.burger-menu span {
    display: block;
    width: 30px;
    height: 4px;
    background: var(--background-color);
    border-radius: 2px;
    transition: 0.3s;

}

/* ========================================= */
/* === RESPONSIVE ANPASSUNGEN (MOBILE) === */
/* ========================================= */

/* Anwenden für Bildschirme bis 768px Breite (Tablets / Smartphones) */
@media (max-width: 768px) {

    /* --- Navbar (bereits vorhanden, ggf. prüfen) --- */
    .burger-menu {
        display: flex; /* Stellt sicher, dass es angezeigt wird */
    }

    .nav-menu {
        /* Stellt sicher, dass das Menü initial versteckt ist und korrekt positioniert wird */
        display: none;
        flex-direction: column;
        background: var(--black);
        width: 100%;
        position: absolute;
        top: 60px; /* Höhe der Navbar anpassen, falls nötig */
        left: 0;
        padding: 10px 0;
        z-index: 100; /* Sicherstellen, dass es über anderen Inhalten liegt */
        border-top: 1px solid var(--gold); /* Kleine optische Trennung */
    }

    .nav-menu.active {
        display: flex; /* Menü anzeigen, wenn aktiv */
    }

    .nav-menu li {
        text-align: center;
        padding: 12px 0; /* Etwas mehr vertikaler Abstand */
        width: 100%; /* Volle Breite für jeden Menüpunkt */
    }

    .nav-menu li a {
        font-size: 1.1rem; /* Ggf. Schriftgröße anpassen */
        display: block; /* Macht den gesamten Bereich klickbar */
        padding: 5px 0;
    }

    /* --- Hero Section --- */
    .hero {
        flex-direction: column; /* Bild über Text anordnen */
        padding: 1.5rem 1rem;   /* Weniger Innenabstand */
        text-align: center;     /* Alles zentrieren */
    }

    .hero-image {
        order: 1; /* Bild zuerst */
        margin-bottom: 1.5rem; /* Abstand zum Text */
        padding: 0;
    }
    .hero-image img {
        max-width: 70%; /* Logo nicht zu riesig machen */
        height: auto;
    }


    .hero-text {
        order: 2; /* Text danach */
        padding: 0;
        flex-basis: 100%; /* Volle Breite nutzen */
    }

    .hero-text h1 {
        font-size: 1.8rem; /* Schriftgrößen anpassen */
    }
    .hero-text h2 {
        font-size: 2rem;
    }
    .hero-text p {
        font-size: 0.95rem; /* Text etwas kleiner */
        margin-bottom: 1.5rem;
    }
    .hero-text .btn {
        margin: 0.5rem 5px; /* Buttons bekommen etwas Abstand */
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        /* Optional: Buttons untereinander auf sehr kleinen Screens */
        /* display: block; margin: 0.5rem auto; width: 80%; */
    }


    /* --- Instagram Section --- */
    .instagram {
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center;    /* Horizontale Zentrierung der Elemente */
        gap: 1.5rem;            /* Abstand zwischen Box und Text */
        padding: 2rem 1rem;
    }

    /* Instagram Link Container (das <a> Tag) */
    .instagram-link {
        order: 1; /* Box zuerst anzeigen */
        width: 90%; /* Breite auf kleinen Screens anpassen */
        max-width: 400px; /* Maximale Breite für die Box */
        margin: 0 auto; /* Zentriert den Link-Container selbst */
    }

    /* Die eigentliche Box */
    .instagram-container {
        width: 100%; /* Nimmt die Breite des Elternelements (<a>) ein */
        max-width: none; /* Entfernt die Desktop-Beschränkung */
        padding: 1rem; /* Innenabstand anpassen */
    }
    .instagram-content {
        flex-direction: row; /* Stellt sicher, dass Bild und Text nebeneinander bleiben */
        align-items: center;
        justify-content: center; /* Zentriert Inhalt, falls er schmaler ist */
        margin: 10px; /* Innenabstand reduzieren */
    }
    .instagram-profile {
        width: 40px;
        height: 40px;
        margin-right: 0.8rem;
    }
    .instagram-text h3 {
        font-size: 1.1rem;
    }
    .instagram-text p {
        font-size: 0.9rem;
    }
    .instagram-icon {
        width: 25px;
        height: 25px;
        top: 8px;
        right: 8px;
    }

    /* Der Text und Pfeil Container */
    .instagram-prompt {
        order: 2; /* Text nach der Box anzeigen */
        margin-top: 0; /* Kein extra Abstand mehr oben nötig */
        width: 100%; /* Nimmt volle Breite ein (wird durch .instagram zentriert) */
    }

    /* Der "Folg uns" Text */
    .instagram-follow-text {
        font-size: 1.1rem; /* Schriftgröße anpassen */
        margin-bottom: 0; /* Kein Abstand mehr nötig */
    }

    /* Den Pfeil ausblenden */
    .instagram-prompt {
        display: none;
    }


    /* --- Services Section --- */
    .services {
        padding: 1.5rem 1rem;
    }
    .services h2 {
        font-size: 1.6rem; /* Überschrift kleiner */
        margin-bottom: 1.5rem;
    }

    .services-grid {
        gap: 1.5rem; /* Abstand zwischen den Service-Kästen */
    }

    /* Einzelner Service-Kasten */
    .service {
        flex-basis: 100%; /* Standardmäßig volle Breite */
        max-width: 320px; /* Maximale Breite (verhindert zu breite Kästen) */
        width: 90%; /* Breite relativ zum Elternelement */
        padding: 1.2rem;
        margin: 0 auto; /* Zentriert die Kästen, wenn nur einer pro Zeile */
    }
    .service img {
        width: 60px;
        height: 60px;
        margin-bottom: 0.8rem;
    }
    .service h3 {
        font-size: 1.1rem;
    }
    .service p {
        font-size: 0.9rem;
    }


    /* --- Team Section --- */
    .team {
        padding: 1.5rem 1rem;
    }
    .team h2 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }
    .team-grid {
        gap: 1.5rem 1rem; /* Vertikalen und horizontalen Abstand anpassen */
    }
    .team-member {
        max-width: 140px; /* Mitglieder kleiner darstellen */
        flex-basis: calc(50% - 1rem); /* Ca. 2 pro Zeile */
    }
    .team-member img {
        width: 90px;
        height: 90px;
    }
    .team-member h3 {
        font-size: 1rem;
    }
    .team-member p {
        font-size: 0.85rem;
    }

    /* --- Anfahrt / Kontakt --- */
    .anfahrt, .contact {
        padding: 2rem 1rem;
    }
    .anfahrt h2, .contact h2 {
        font-size: 1.6rem;
    }
    #display-google-map {
        height: 300px; /* Karte weniger hoch */
        max-width: 95%; /* Fast volle Breite */
    }


    /* --- Theater Header (Sortierung) --- */
    .theater-header {
        flex-direction: column;
        align-items: center;
        gap: 1rem; /* Abstand zwischen Titel und Button */
    }
    /* Ggf. Klasse für den Sortier-Button Container anpassen */
    .sort-container {
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }
    .sort-dropdown {
        display: block; /* Nimmt verfügbare Breite */
        width: 80%; /* Nicht ganz volle Breite */
        margin: 0 auto; /* Zentrieren */
    }
    .sort-button {
        width: 100%; /* Button füllt Dropdown */
    }
    .sort-menu {
        min-width: auto; /* Breite automatisch */
        width: 100%; /* Passt sich an Dropdown an */
        left: 0; /* Links ausrichten */
        right: auto;
    }


    /* --- Footer --- */
    .footer {
        padding: 1.5rem 1rem;
    }
    .footer-logo {
        font-size: 1.3rem;
    }
    .footer-links a {
        margin: 0 8px;
        font-size: 0.85rem;
    }
    .footer-socials a {
        font-size: 1.3rem;
        margin: 0 8px;
    }
    .footer-bottom {
        font-size: 0.75rem;
    }

} /* Ende von @media (max-width: 768px) */


/* Optional: Zusätzliche Anpassungen für sehr kleine Bildschirme (Handy Portrait) */
@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 1.6rem;
    }
    .hero-text h2 {
        font-size: 1.8rem;
    }
    .hero-text p {
        font-size: 0.9rem;
    }
    .hero-text .btn {
        display: block; /* Buttons untereinander */
        margin: 0.7rem auto; /* Zentrieren */
        width: 80%;
    }

    .service {
        flex-basis: 95%; /* Fast volle Breite */
        width: 95%;
        padding: 1rem;
    }
    .team-member {
        max-width: 110px;
    }
    .team-member img {
        width: 70px;
        height: 70px;
    }  /* Innerhalb von @media (max-width: 768px) { ... } */

    /* Innerhalb von @media (max-width: 768px) { ... } */

    /* --- Karten/Optionen Anpassungen (Verein-Seite etc.) --- */
    .options-container {
        padding: 1rem;   /* Außenabstand des Containers */
        gap: 15px;       /* Abstand zwischen den Karten */
        /* Wichtig: justify-content: center; ist im Basis-Style und zentriert die Zeilen */
    }

    .option-card {
        flex-grow: 0;       /* Verhindert, dass die Karten wachsen */
        flex-shrink: 0;     /* Verhindert, dass die Karten schrumpfen */
        flex-basis: auto;   /* Setzt die Basisbreite zurück */

        width: 160px;       /* << HIER: Feste, kleinere Breite für die Karten */
        /* Teste ggf. Werte wie 150px oder 170px */

        height: auto;       /* Höhe passt sich dem Inhalt an */
        min-height: 170px;  /* Mindesthöhe ggf. anpassen, da die Karte schmaler ist */
        padding: 1rem 0.5rem; /* Innenabstand (oben/unten | links/rechts) */

        /* Hover-Effekte etc. bleiben bestehen */
        /* border, transition, box-shadow etc. aus Basis-Styles werden übernommen */
    }

    .option-card img {
        max-width: 65px;    /* Icon-Größe an die schmalere Karte anpassen */
        max-height: 65px;
        margin-bottom: 10px; /* Etwas mehr Abstand zum Text */
    }

    .option-card h3 {
        font-size: 0.9rem;  /* Schriftgröße für den Titel anpassen */
        line-height: 1.3;   /* Zeilenhöhe für mögliche Umbrüche im Titel */
    }




}

@media (max-width: 700px) { /* << BREAKPOINT ANPASSEN */

    /* Passe den Abstand des Headers nach unten an,
       um Platz für den Button zu schaffen */
    .starkbier-container .theater-header {
        /* Der Button wird jetzt außerhalb positioniert,
           wir brauchen Platz *zwischen* Header und Grid */
        margin-bottom: 5rem; /* Beispiel: Erhöhter Abstand zum nächsten Element */
        /* Alternativ: padding-bottom erhöhen */
    }

    /* Innerer Container zentriert nur noch den Titel */
    .theater-header-container {
        /* justify-content: center; bleibt */
        /* gap wird irrelevant, da nur noch 1 Element im Fluss */
    }

    .headerdetails h1 {
        white-space: normal; /* Umbruch im Titel erlauben */
        font-size: 38px;
    }

    /* Button Container ABSOLUT POSITIONIEREN */
    .sort-container {
        position: absolute;   /* << Aus dem normalen Fluss entfernen */
        top: 100%;            /* << Oberkante bündig mit Unterkante des Headers */
        margin-top: 1rem;     /* << Abstand nach unten vom Header */
        left: 50%;            /* Horizontal zentrieren Schritt 1 */
        transform: translateX(-50%); /* Horizontal zentrieren Schritt 2 */
        width: auto;          /* Breite an Inhalt anpassen */
        max-width: 90%;       /* Maximale Breite auf Mobile */
        z-index: 5;           /* Stellt sicher, dass er sichtbar ist (ggf. anpassen) */
    }

    /* Dropdown selbst ggf. anpassen */
    .sort-dropdown {
        /* display: block; */ /* Optional: Button über volle Breite des Containers? */
    }

    /* Menü-Position prüfen (sollte relativ zum Button bleiben) */
    .sort-menu {
        /* Positionierung sollte passen */
        min-width: 200px; /* Ggf. Breite anpassen */
    }
}