/* main design colors */
:root {
    --primary-color: #DB9F34;
    --navbar-color: #1C70B3;
    --font-size: 16px;
}

body {
    font-family: Arial, sans-serif, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #FFFFFF;

    /* Standard Hintergrundfarbe, falls top-header nicht alles abdeckt */
    color: #333;

    /* padding-top: 56px; /* Entfernt oder angepasst, da der Header jetzt über der Navbar ist */
}

.top-header-image {
    background-image: url('img/Abendstimmung.JPG');

    /* Pfad zu Ihrem Header-Hintergrundbild */
    background-size: cover;
    background-position: center;
    height: 250px;

    /* Höhe des Header-Bildes anpassen */
    color: white;

    /* Textfarbe auf dem Header-Bild */
    position: relative;

    /* Für eventuelle Overlays oder absolute Positionierung von Elementen darin */
}

.top-header-image .logo-placeholder {
    max-height: 80px;

    /* Maximale Höhe des Logos anpassen */
    margin-left: 20px;
}

.top-header-image .header-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

    /* Textschatten für bessere Lesbarkeit */
}

.sticky-top {
    /* Stellt sicher, dass die Navbar unter dem Header-Bild kleben bleibt beim Scrollen */
}

/* Behalten Sie benutzerdefinierte Stile für den Header bei Bedarf */
/* .navbar-brand { font-size: 1.8rem; } */
/* .nav-link.active { color: #e8491d !important; font-weight: bold; } */
/* .nav-link:hover { color: #e8491d !important; } */
/* Die .container-Klasse von Bootstrap wird jetzt verwendet.
   Entfernen Sie Ihre benutzerdefinierten .container und .container-single-column Stile. */
/* main und aside werden jetzt durch Bootstrap-Spalten (.col-md-8, .col-md-4) gesteuert.
   Entfernen Sie die Flexbox-Eigenschaften. */
main section,
main article {
    margin-bottom: 20px;
}

aside .p-3 {
    /* Zusätzlicher Innenabstand für den Aside-Inhalt, falls gewünscht */
    margin: 0px;
}

footer {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    background-color: #0a85d1;
    color: #ffffff;
}

/* Bootstrap Carousel Stile werden verwendet.
   Sie können das Aussehen der Carousel Captions hier anpassen, falls nötig. */
.carousel-item img {
    max-height: 300px;

    /* Beispiel: Maximale Höhe für Slideshow-Bilder */
    object-fit: fill;
}

/* Calendar Grid */
aside table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

/* Bootstrap fügt bereits einige Tabellenstile hinzu, passen Sie diese bei Bedarf an oder überschreiben Sie sie */
aside th,
aside td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-size: 0.9em;
}

aside th {
    background-color: #e9e9e9;
}

aside td.frei {
    background-color: #c8e6c9;

    /* Light Green */
}

aside td.belegt {
    background-color: #fde0e3
    /* Light Red */
}

aside td.empty {
    background-color: #f0f0f0;
}

/* Empty cells for days from other months */
/* FAQ Item - Bootstrap Accordion wird verwendet. */
.accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: #e7f1ff;
}

/* Attractions List 
 Bootstrap .list-group wird verwendet. */
.list-group-item a {
    text-decoration: none;
    color: #337ab7;
}

.list-group-item a:hover {
    text-decoration: underline;
}

.head-footer-style {
    background-color: var(--navbar-color);
}

.navbar {
    background-color: var(--navbar-color);
}

.nav-link {
    color: #E3E3E3;
}

.nav-link:hover {
    background-color: #4D83CA;

    /* Replace with your desired color */
    transition: color 0.3s;
}

.top-header-image {
    position: relative;
    overflow: hidden;
    /* Stellen Sie sicher, dass hier eine Höhe definiert ist, z.B. height: 400px; oder height: 50vh; */
    /* Entfernen Sie ggf. vorhandene background-image Eigenschaften */
}

.top-header-image video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* Stellt sicher, dass das Video hinter dem Inhalt liegt */
}

.top-header-image .container-fluid {
    position: relative; /* Notwendig für z-index */
    z-index: 1; /* Stellt sicher, dass der Inhalt über dem Video liegt */
}