/* --- 1. GLOBAL FIX (Verhindert das "Sprengen" des Layouts) --- */
* {
    box-sizing: border-box; /* WICHTIG: Padding macht Boxen nicht mehr breiter */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    /* Hintergrund-Pfad korrigiert: Wenn Bilder/ im Hauptordner liegt */
    background: #000 url('../Bilder/lm_back.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #ffffff;
}

/* --- 2. LAYOUT-STRUKTUR --- */
.site-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-wrapper {
    display: flex;
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.main-footer {
	font-size: 0.5em;
	margin-left: 10px;
}

.nav-sidebar {
    width: 180px; /* Feste Breite */
    padding: 15px; /* Oben/Unten 15px, Links/Rechts 0 für bündige Buttons */
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;

    /* --- STICKY LOGIK (Sidebar bleibt beim Scrollen stehen) --- */
    position: -webkit-sticky; /* Support für Safari */
    position: sticky;         /* Macht das Element fest */
    top: 20px;                /* Abstand zum oberen Rand beim Scrollen */
    align-self: flex-start;   /* Zwingend erforderlich bei Flexbox, damit sticky funktioniert */
    height: auto;
    max-height: calc(100vh - 40px); /* Verhindert, dass das Menü unten aus dem Bild ragt */
    overflow-y: auto;         /* Falls das Menü sehr lang ist, wird es in sich scrollbar */
    z-index: 100;             /* Damit es immer über dem Content liegt */
}

/* Der Hauptbereich in der Mitte */
.content-area {
    flex: 1;
    padding: 20px;
    /* Entferne background-color: #fff; falls vorhanden */
    background-color: rgba(0, 0, 0, 0.2) !important; /* 40% Schwarz-Schleier */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.content-area a {
    color: #ffcc00;         /* Das ist dein Gold/Gelb */
    text-decoration: none;  /* Entfernt den Unterstrich */
    font-weight: bold;      /* Macht den Link fett */
}

/* Farbe, wenn man mit der Maus drüberfährt */
.content-area a:hover {
    color: #ffffff;         /* Wird weiß beim Drüberfahren */
    text-decoration: underline;
}

/* Der Container */
.content-container, 
.home-intro, 
.ref-list-box, 
.tech-card {
    background-color: transparent !important; /* Macht den weißen Hintergrund weg */
    color: #ffffff;
}

/* --- 3. NAVIGATION --- */
ul#NaviLeft, ul#NaviRight {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
	display: block; /* Sicherstellen, dass es kein Inline-Element ist */
}

ul#NaviLeft li, ul#NaviRight li {
    margin-bottom: 8px;
    width: 100%;
	padding: 0;
}

/* Die gelben Buttons */
ul#NaviLeft li a, ul#NaviRight li a {
    display: block;
    width: 100%;
	margin-left: 0;         /* Ganz nach links */
    background-color: #ffcc00 !important;
    color: #000 !important;
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    transition: 0.3s;
}

ul#NaviLeft li a:hover, ul#NaviRight li a:hover {
    background-color: #ffe066 !important;
    transform: scale(1.02);
}

/* Spezial-Buttons */
.fb-button { background-color: #3b5998 !important; color: white !important; }
.small-link { background: transparent !important; color: #ccc !important; font-size: 0.8em !important; font-weight: normal !important; }


/* --- 4. TEXTFARBEN & INHALT --- */
h1, h2, h3 { color: #ffcc00; }
p, span, div { color: #ffffff; }

/* Termine-Tabelle Fix */
.event-row {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 10px 0;
}
.event-date { color: #ffcc00; width: 140px; font-weight: bold; }

/* Bilder-Pfade in den Navis */
.nav-logo, .nav-icon-large, .nav-photo-thumb {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --- BURGER BUTTON DESIGN --- */
#mobile-menu-button {
    display: none; /* Standardmäßig versteckt (Desktop) */
    cursor: pointer;
    width: 30px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 20px;
    top: 25px;
}

#mobile-menu-button span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: #ffcc00;
    border-radius: 2px;
}

/* --- MOBILE ANPASSUNG (ab 850px) --- */
@media (max-width: 850px) {
    #mobile-menu-button {
        display: flex; /* Button auf Handy zeigen */
    }

    .main-wrapper {
        flex-direction: column;
    }

    .nav-sidebar {
        display: none; /* Menü standardmäßig zu */
        width: 100% !important;
        position: absolute;
        top: 70px; /* Unter dem Header */
        left: 0;
        z-index: 1000;
        background-color: rgba(0, 0, 0, 0.95) !important;
    }

    /* Diese Klasse wird per JavaScript hinzugefügt */
    .nav-sidebar.show {
        display: block;
    }

    .content-area {
        margin: 0 !important;
        width: 100%;
    }
}

/* --- RESPONSIVE BILDER KLASSEN --- */

/* Diese Klasse kommt an beide Bilder */
.img-responsive {
    max-width: 100%; /* Bild wird nie breiter als das Display */
    height: auto;    /* Behält das Seitenverhältnis bei (kein Stauchen) */
    display: block;  /* Block-Element für einfaches Zentrieren */
	margin-left: 0;  /* Zwingt das Bild nach LINKS */
    margin-right: auto;
    border: none; 
}

/* Spezifische Klasse für das Partyband-Banner (ehemals 500px) */
.banner-partyband {
    width: 500px;    /* Maximale Breite auf dem Desktop */
}

/* Spezifische Klasse für das LM Logo (falls es eine feste Breite haben soll) */
.logo-header {
    /*width: 400px;    /* Oder die Originalbreite deines Logos */
}

/* --- OPTIONAL: ABSTÄNDE STATT <BR> --- */
@media (max-width: 850px) {
	.header-spacer {
		margin-bottom: 25px;
	}
}

/* Container für alle Musiker-Köpfe */
.band-overview {
    display: flex;             /* Aktiviert das elastische Layout */
    flex-wrap: nowrap;         /* Zwingt die Bilder in EINE Reihe */
    justify-content: space-between; /* Verteilt sie gleichmäßig über die Breite */
    gap: 10px;                 /* Kleiner Abstand zwischen den Köpfen */
    width: 100%;
    margin-bottom: 10px;
}

/* Die einzelnen Musiker-Elemente */
.member-head {
    flex: 1;                   /* Jeder Kopf bekommt den gleichen Platz */
    text-align: center;
    min-width: 0;              /* Verhindert, dass Bilder die Box sprengen */
}

/* Die Bilder selbst */
.member-head img {
    width: 100%;               /* Bild füllt die Box-Breite aus */
    height: auto;              /* Höhe passt sich an (keine Eierköpfe) */
    max-width: 111px;          /* Maximale Größe, damit sie nicht zu riesig werden */
    border-radius: 1px;
}

/* Mobil-Anpassung: Wenn es zu eng wird, dürfen sie doch in zwei Reihen */
@media (max-width: 600px) {
    .band-overview {
        flex-wrap: wrap;       /* Erlaubt Umbruch auf dem Handy */
        justify-content: center;
    }
    .member-head {
        flex: 0 0 30%;         /* Zeigt ca. 3 Köpfe pro Reihe auf dem Handy */
    }
}

/* Spezifische Ausnahme für das Logo in der Navigation */
#NaviLeft li.logo-item a, 
#NaviLeft li.logo-item a:hover {
    background-color: transparent !important; /* Entfernt das Orange/Gelb */
    background: none !important;               /* Sicherungskopie */
    border: none !important;                   /* Entfernt den Button-Rahmen */
    box-shadow: none !important;               /* Entfernt Schatten */
    padding: 0 !important;                     /* Entfernt das Button-Padding */
    display: block;
    text-align: center;
}

/* Die Größe des Logos begrenzen */
.nav-logo {
    max-width: 150px; /* Hier kannst du die Größe genau einstellen */
    height: auto;
    display: inline-block;
    background: transparent !important;
}
@media (max-width: 850px) {
    .nav-logo {
        max-width: 130px; /* Auf dem Handy etwas kleiner */
    }
}

/* Container für alle Termine */
.event-grid {
    width: 100%;
    margin-top: 20px;
}

/* Eine Zeile im Kalender */
.event-row {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    align-items: center;
}

/* Linke Spalte: Datum & Zeit */
.event-date {
    min-width: 150px;
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

.event-date .day {
    color: #ffcc00; /* Dein Goldton */
    font-size: 1.1em;
}

.event-date .time {
    color: #aaa;
    font-size: 0.85em;
}

/* Rechte Spalte: Info & Ort */
.event-info {
    flex: 1;
    padding-left: 20px;
    color: #fff;
}

.event-info a {
    color: #fff;
    text-decoration: underline;
}

.event-info a:hover {
    color: #ffcc00;
}

.location {
    display: block; /* Ort unter dem Event-Namen */
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

/* Mobil-Optimierung */
@media (max-width: 600px) {
    .event-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .event-info {
        padding-left: 0;
        margin-top: 5px;
    }
}

/* Container für einen Musiker-Block */
.musician-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.05); /* Ganz dezenter Hintergrund */
    padding: 10px;
    border-radius: 10px;
}

/* Wenn das Bild RECHTS stehen soll */
.musician-row.reverse {
    flex-direction: row-reverse;
}

/* Das Profilbild im Text */
.musician-img {
    flex: 0 0 100px; /* Feste Breite für das Bild auf Desktop */
}

.musician-img img {
    width: 100%;
    height: 100px;
    border-radius: 1px;
    /*box-shadow: 0 5px 15px rgba(0,0,0,0.5);*/
}

/* Der Textbereich daneben */
.musician-text {
    flex: 1;
    color: #fff;
}

.musician-text h3 {
    color: #ffcc00;
    margin-top: 0;
}

/* Mobil-Optimierung: Bild über Text */
@media (max-width: 768px) {
    .musiker-profil, .musiker-profil.reverse {
        flex-direction: column; /* Stapelt Bild und Text untereinander */
        align-items: center;
        text-align: center;
    }
    .profil-bild {
        flex: 0 0 auto;
        width: 80%; /* Bild auf Handy etwas kleiner */
        margin-bottom: 20px;
    }
}

/* Container-Grid */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.download-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

/* Der Wrapper um das Bild */
.dl-link-wrapper {
display: flex;             /* Zentriert das Bild */
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    border-radius: 4px;
    min-height: 150px;         /* Mindesthöhe für ein sauberes Grid */
    height: auto;              /* Erlaubt dem Container zu wachsen */	background: rgba(0, 0, 0, 0.2); /* Dunkler Hintergrund für helle Logos */
	background: rgba(0, 0, 0, 0.2);
}

.dl-preview img {
max-width: 90%;            /* Lässt ein wenig Luft zum Rand */
    max-height: 140px;         /* Begrenzt die Höhe, damit sie nicht ausufern */
    width: auto;
    height: auto;
    display: block;
	object-fit: contain;       /* Garantiert: Das komplette Bild ist sichtbar */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Das Overlay muss die gesamte (evtl. gewachsene) Höhe abdecken */
.dl-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 204, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dl-link-wrapper:hover .dl-overlay {
    opacity: 1; /* Sichtbar beim Hover */
}

.dl-link-wrapper:hover .dl-preview img {
    filter: blur(2px);
    transform: scale(1.1);
}

.dl-icon {
    font-size: 24px;
    font-weight: bold;
}

.dl-text {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Info Text unter dem Bild */
.dl-info h3 {
    font-size: 14px;
    color: #ffcc00;
    margin: 10px 0 5px;
}

.dl-info p {
    font-size: 11px;
    color: #ccc;
    margin: 0;
}

/* Container für die zwei Listen */
.ref-lists-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

.ref-list h3 {
    color: #FFFF33;
    font-size: 1.2em;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.ref-list ul {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
    line-height: 1.4;
}

/* Zeitungsberichte */
.news-item {
    margin: 30px 0;
    text-align: left;
}

.news-date {
    color: #FFFF33;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.news-item h2 {
    font-size: 1.3em;
    margin: 0 0 10px 0;
}

.news-item p {
    /*font-style: italic;*/
    color: #ddd;
    line-height: 1.2;
}

.news-item img {
    height: auto;
    width: auto;
	max-height: 80px;
}

.ref-tag {
    color: #FFFF66;
    font-size: 0.8em;
}

/* Der universelle Zeitungs-Block */
.news-block {
    display: flex;
    flex-wrap: wrap;      /* Erlaubt das "Nach-unten-rutschen" */
    gap: 20px;            /* Abstand zwischen Text und Bild */
    align-items: flex-start;
}

/* Die linke Seite (Überschrift + Text) */
.news-content {
    flex: 1;              /* Nimmt den gesamten Platz links ein */
    min-width: 300px;     /* Ab wann das Bild unter den Text rutschen soll (Handy) */
}

.news-block-date {
    color: #FFFF33;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
	flex: 1;              /* Nimmt den gesamten Platz links ein */
	min-width: 300px;     /* Ab wann das Bild unter den Text rutschen soll (Handy) */
}

.news-content h2 {
    margin-top: 0;        /* Verhindert, dass die H2 tiefer sitzt als das Bild */
}

/* Der Container (der Käfig) */
.news-image-wrap {
    flex-shrink: 0;
    width: 180px;           /* Deine gewünschte Breite */
    max-width: 45%;         /* Damit auf schmalen Schirmen noch Text daneben passt */
}

/* Das Bild im Container (der Bewohner) */
.news-image-wrap img {
    width: 100% !important;  /* Zwingt das Bild, die vollen 300px auszufüllen */
    height: auto !important; /* Verhindert das Verzerren (Eierköpfe) */
	max-height: none !important; /* Verhindert, dass das Bild oben/unten gedeckelt wird */
    display: block;          /* Entfernt kleine Abstände unter dem Bild */
	object-fit: contain;     /* Sorgt dafür, dass der Inhalt sauber eingepasst wird */
    /* Optional: Falls das Bild kleiner als 300px ist, wird es hiermit 
       hochskaliert. Achtung: Es könnte dann leicht unscharf werden. */
    min-width: 100%;         
}

/* Text, der wieder über die volle Breite gehen soll (unter dem Bild) */
.full-width-text {
    width: 100%;
    margin-top: 0px;
}

/* Bilder-Reihen */
.image-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.image-row img {
    width: auto;
    height: auto;
    max-width: 600px;
	max-height: 400px;
	padding-left: 30px;
}

.image-row-2 img {
    max-width: 300px;
    max-height: 300px;
    height: auto;
	padding-left: 30px;
}

/* Feedback-Blöcke (Bild neben Text) */
.feedback-item {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 30px 0;
    background: rgba(255,255,255,0.05);
    padding: 15px;
}

.feedback-item p {
    color: #ddd;
    line-height: 1.2;
}

.feedback-item img {
    max-width: 400px;
    height: auto;
}

/* Trennlinie */
.separator {
    border: 0;
    border-top: 1px solid #555;
    margin: 30px 0;
}

/* Mobil-Optimierung */
@media (max-width: 768px) {
    .ref-lists-grid, .image-row, .feedback-item {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

/* Container für das gesamte Formular */
.modern-form {
    max-width: 600px;      /* Begrenzt die Breite auf ein angenehmes Maß */
    margin-left: 0;        /* Richtet das Formular linksbündig aus */
    text-align: left;
}

/* Jede Zeile (Label + Input) bekommt eine eigene Gruppe */
.form-group {
    margin-bottom: 20px;   /* Abstand zwischen den Feldern */
    display: flex;
    flex-direction: column; /* Label ÜBER das Feld setzen für maximale Sauberkeit */
    align-items: flex-start;
}

/* Styling für die Beschriftungen */
.form-group label {
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;           /* Passend zu deinem dunklen Design */
    display: block;
}

/* Styling für ALLE Eingabefelder */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;           /* Alle Felder nutzen die volle Breite des Containers */
    max-width: 500px;      /* Einheitliche maximale Breite */
    padding: 12px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1); /* Leicht transparent */
    color: #fff;
    box-sizing: border-box; /* WICHTIG: Padding wird nicht zur Breite addiert */
    font-size: 1rem;
}

/* Fokus-Effekt (wenn man reinklickt) */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ffcc00; /* Deine Akzentfarbe */
    background-color: rgba(255, 255, 255, 0.15);
}

/* Der Absende-Button */
.btn-submit {
    background-color: #ffcc00;
    color: #000;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s;
}

.btn-submit:hover {
    background-color: #e6b800;
}

/* Zentriert das Captcha oder passt es an */
.g-recaptcha {
    margin-top: 20px 0;
    margin-bottom: 15px;
    display: flex;
}

/* Falls es in der Sidebar zu breit ist, kann man es skalieren (Hack) */
@media (max-width: 350px) {
    .g-recaptcha {
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}

/* Container für alle Videos */
.video-grid {
    display: grid;
    /* Erzeugt zwei gleich breite Spalten */
    grid-template-columns: repeat(2, 1fr); 
    /* Abstand zwischen den Videos (horizontal und vertikal) */
    gap: 30px; 
    margin-top: 20px;
    width: 100%;
}

/* Einzelnes Video-Element */
.video-item {
    width: 100%;
    background: rgba(255, 255, 255, 0.01); /* Dezenter Hintergrund */
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Die Video-Vorschau / Iframe */
.video-item iframe, 
.video-item video {
    width: 100% !important;
    /* Erhält das 16:9 Format ohne Verzerrung */
    aspect-ratio: 16 / 9; 
    border-radius: 4px;
    border: none;
    display: block;
}

/* Responsive: Auf dem Handy nur 1 Spalte */
@media (max-width: 850px) {
    .video-grid {
        grid-template-columns: 1fr; /* Nur ein Video pro Zeile */
        gap: 20px;
    }
}

/* Container für die gesamte Audio-Sektion */
.audio-list {
    max-width: 800px; /* Oder die Breite deines Video-Grids */
    margin-top: 20px;
}

/* Einzelne Audio-Zeile */
.audio-item {
    display: flex;
    align-items: center; /* Vertikal mittig */
    justify-content: space-between; /* Titel links, Player rechts */
    background: rgba(255, 255, 255, 0.01);
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    gap: 20px; /* Abstand zwischen Text und Player */
}

/* Der Songtitel */
.audio-title {
    font-weight: bold;
    color: #ffcc00;
    white-space: nowrap; /* Verhindert Zeilenumbruch beim Titel */
    min-width: 150px;     /* Damit alle Player an der gleichen Stelle starten */
}

/* Der Player selbst - Jetzt wird er bündig! */
.audio-item audio {
    flex-grow: 1;        /* Player nimmt den restlichen Platz ein */
    height: 35px;        /* Schön schlank */
    outline: none;
}

/* Responsive: Auf dem Handy untereinander stapeln */
@media (max-width: 600px) {
    .audio-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .audio-item audio {
        width: 100%;
    }
}

/* Das Grid bleibt bei 2 Spalten */
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    margin-top: 20px;
    align-items: start; /* Verhindert, dass Items unnötig gestreckt werden */
}

/* Der Container für beide */
.media-item {
    background: rgba(255, 255, 255, 0.01);
    padding: 15px;
    border-radius: 8px;
    /* Wir entfernen width: fit-content, falls es da war! */
    width: auto; 
}

/* --- FOTO FIX --- */
.photo-item img {
    width: 100%;
    max-width: 350px; /* Deine gewünschte Maximalbreite */
    height: auto;     /* Verhindert Verzerrung */
    border-radius: 4px;
    display: block;
    margin: 0 auto;   /* Zentriert das Foto im Container */
}

/* --- VIDEO FIX --- */
.video-item {
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

/* Der Wrapper - Wir nutzen jetzt aspect-ratio statt padding-Tricks */
.video-wrapper {
    width: 100%;
    /* Das ist der entscheidende Befehl für moderne Browser: */
    aspect-ratio: 16 / 9; 
    position: relative;
    background: #000; /* Falls das Video lädt, sieht man eine schwarze Box */
    border-radius: 4px;
    overflow: hidden;
}

/* Das Iframe darin */
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* Falls aspect-ratio oben nicht greift, erzwingen wir es hier */
    display: block;
}


/* Responsive: Handy-Ansicht */
@media (max-width: 768px) {
    .media-grid {
        grid-template-columns: 1fr; /* Auf dem Handy alles untereinander */
        gap: 20px;
    }
    
    .photo-item img {
        height: auto; /* Auf dem Handy lieber natürliche Höhe */
    }
}

.contact-footer-block {
    margin: 40px 0;
    text-align: left; /* Zentriert den gesamten Block */
}

.eye-image img {
    max-width: 100%;    /* Verhindert, dass das Bild breiter als der Bildschirm wird */
    width: 640px;       /* Deine gewünschte Standardgröße */
    display: block;
	margin: 0 0
}

.contact-info-content {
    margin-left: 40px;
}

.contact-info-content h4 {
    font-size: 1.5rem;
    color: #ffcc00;     /* Deine Akzentfarbe */
    margin-bottom: 10px;
}

.contact-info-content p {
    margin: 5px 0;
    line-height: 1.5;
}

.contact-info-content a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #ffcc00;
}

.contact-info-content a:hover {
    color: #ffcc00;
}

/* Trennpunkte (&bull;) für Desktop, Umbruch für Handy */
@media (max-width: 600px) {
    .address-row {
        display: flex;
        flex-direction: column;
    }
}

/* Galerie */
.grid{display:flex;flex-wrap:wrap}
.album{width:250px;margin:10px;cursor:pointer}
.album img{width:100%}
.photo{width:200px;margin:5px}


#backToTop {
    display: none; /* Standardmäßig unsichtbar */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    width: 45px;
    height: 45px;
    background-color: #ffcc00;
    color: #000;
    border: none;
    border-radius: 50%; /* Rundes Design */
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: opacity 0.3s, transform 0.3s;
}

#backToTop:hover {
    background-color: #ffe066;
    transform: scale(1.1); /* Wird beim Drüberfahren leicht größer */
}

/* Für einen weichen Einblend-Effekt */
#backToTop.show {
    display: block;
    animation: fadeIn 0.4s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Der aktive Menüpunkt */
.active-page {
    background-color: #ffffff !important; /* Weiß statt Gelb */
    color: #000000 !important;           /* Schwarze Schrift */
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5); /* Ein leichter gelber Glow nach außen */
    transform: scale(1.05);              /* Minimal größer als die anderen */
    border-left: 5px solid #ffcc00;      /* Ein gelber Balken am linken Rand des Buttons */
}