/****************************************************************************/

/* Colors */

:root {
    --grau: #777777;
    --rot: #bd2c2c;
    --beige: #e5e5e5;
    --dunkel: #1e1e1e;
    --gold: #ffd700;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.text-primary {
    color: var(--rot) !important;
}

.btn-primary {
    background-color: var(--rot);
    border-color: var(--rot);
}

/****************************************************************************/

/* Farbschemata */

body {
    color: black;
    background-color: var(--beige);
}

a, a:hover {
    color: var(--rot);
}

.feuerwehr-kleve-hell {
    color: var(--grau);
    background-color: var(--beige);
}

.feuerwehr-kleve-hell h1,
.feuerwehr-kleve-hell h2,
.feuerwehr-kleve-hell h3,
.feuerwehr-kleve-hell h4,
.feuerwehr-kleve-hell h5,
.feuerwehr-kleve-hell h6 {
    color: black;
}

.feuerwehr-kleve-dunkel {
    color: var(--grau);
    background-color: var(--dunkel);
}

.feuerwehr-kleve-dunkel h1,
.feuerwehr-kleve-dunkel h2,
.feuerwehr-kleve-dunkel h3,
.feuerwehr-kleve-dunkel h4,
.feuerwehr-kleve-dunkel h5,
.feuerwehr-kleve-dunkel h6 {
    color: white;
}

.feuerwehr-kleve-rot {
    color: white;
    background-color: var(--rot);
}

.feuerwehr-kleve-rot a,
.feuerwehr-kleve-rot a:hover {
    color: white;
}

/****************************************************************************/

/* Fonts */

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('/djangocms/static/fonts/raleway.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url('/djangocms/static/fonts/raleway.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url('/djangocms/static/fonts/raleway.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
}

/****************************************************************************/

/* Overall layout */

html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* pushes footer to the bottom */
}

/****************************************************************************/

/* Header */

.feuerwehr-kleve-header {
    background-color: var(--beige);
    padding: 22px 0px 0px 0px;
}

.feuerwehr-kleve-title {
    display: flex;
    justify-content: space-between; /* h1 left, ul right */
    align-items: center;
    height: 60px;
    padding-bottom: 10px;
}

.feuerwehr-kleve-title h1 {
    font-size: 30px;
    font-weight: 600;
}

.feuerwehr-kleve-title h1,
.feuerwehr-kleve-title ul {
    margin: 0;
    padding: 0;
}

.follow_icon {
    list-style: none;
    display: flex;
    gap: 10px; /* space between icons */
    color: var(--grau);
    font-size: 32px;
}

.follow_icon li a {
    color: var(--grau);
    font-size: 35px;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}

.follow_icon li a:hover {
    color: var(--rot);
}

/****************************************************************************/

/* Navigation */

.feuerwehr-kleve-navbar-container { /* bis zum Rand */
    background-color: var(--rot) !important;
}

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

.navbar .nav-link,
.navbar-brand {
    color: white !important; /* Helle Schrift */
}

.navbar .nav-link:hover {
    color: var(--gold) !important; /* Goldgelb für Hover-Effekt */
}

.navbar-brand a {
    color: black;
    text-decoration: none;
    font-weight: bold; /* optional: emphasizes the name */
    display: flex;
    align-items: center; /* aligns text and logo vertically */
    gap: 8px; /* optional: space between image and text */
}

.navbar-brand a:hover {
    text-decoration: none; /* prevents underline on hover too */
}

.navbar-brand img {
    height: 40px;
}

/* Basic dropdown styling */
.dropdown-menu {
    transition: all 0.3s ease-in-out;
    margin-top: 0;
}

/* Desktop-only: Enable dropdown on hover */
@media (min-width: 1200px) {
    /* Show dropdown menu on hover for desktop */
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    /* Add smooth transition animation for desktop */
    .dropdown-menu {
        opacity: 0;
        transform: translateY(-10px);
        display: block !important;
        visibility: hidden;
    }

    .dropdown:hover .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
}

/* Show dropdown menu when .show class is applied (for mobile) */
.dropdown.show .dropdown-menu {
    display: block;
}

/* Style active dropdown items */
.dropdown-item.active {
    background-color: #007bff;
    color: white;
}

/* Add hover effect to dropdown items */
.dropdown-item:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Remove the default Bootstrap dropdown arrow behavior */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.navbar-nav .dropdown {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.navbar-nav .dropdown .nav-link {
    margin-right: 0 !important;
    padding-right: 0.5rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.navbar-nav .dropdown .dropdown-toggle-split {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
    min-width: 1.75em !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.navbar-nav .nav-item {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.navbar-nav {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* Style active dropdown items */
.dropdown-item.active {
    background-color: var(--rot);
    color: white;
}

/* Add hover effect to dropdown items */
.dropdown-item:hover {
    background-color: rgba(189, 44, 44, 0.1); /* var(--rot) mit Transparenz */
}

@media (max-width: 1199px) {
    /* Style for the Bootstrap button that replaces navbar-toggler */
    .btn.btn-outline-secondary.d-xl-none {
        color: white;
        border-color: white;
        background-color: transparent;
        margin-right: 1rem;
        padding: 0.375rem 0.75rem;
    }

    .btn.btn-outline-secondary.d-xl-none:hover,
    .btn.btn-outline-secondary.d-xl-none:focus {
        color: var(--gold);
        border-color: var(--gold);
        background-color: transparent;
    }

    /* Keep the dropdown parent items in flexbox layout but allow vertical stacking */
    .navbar-collapse .dropdown {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important; /* Allow wrapping for dropdown menu */
        width: 100% !important; /* Take full width */
    }

    /* Hide dropdown menus by default */
    .navbar-collapse .dropdown-menu {
        display: none !important;
        position: static !important; /* Use static positioning to take up space */
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        width: 100% !important;
        order: 10; /* Push dropdown menu to next line */
    }

    /* Show dropdown menu when parent has .show class */
    .navbar-collapse .dropdown.show .dropdown-menu {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 0.5rem 0 0 0;
        background: var(--beige);
        color: white;
        border: 1px solid var(--grau);
        border-radius: 0.25rem;
        padding: 0.5rem 0;
        order: 10; /* Ensure it appears below the parent items */
    }

    /* Style dropdown items */
    .navbar-collapse .dropdown-menu .dropdown-item {
        padding: 0.375rem 1rem;
        color: black;
        font-size: 0.9rem;
    }

    .navbar-collapse .dropdown-menu .dropdown-item:hover {
        background-color: rgba(189, 44, 44, 0.1);
        color: var(--rot);
    }

    /* Ensure dropdown toggle buttons are clickable */
    .navbar-collapse .dropdown-toggle-split {
        cursor: pointer;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
        min-width: 1.75em !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        order: 2; /* Keep toggle button right after the nav link */
    }

    /* Style dropdown toggle buttons */
    .navbar-collapse .dropdown-toggle-split::after {
        margin-left: 0.5rem;
    }

    /* Ensure nav items have proper spacing but keep flex layout */
    .navbar-collapse .nav-item {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-bottom: 0.5rem;
        width: 100% !important; /* Take full width to allow proper wrapping */
    }

    /* Make sure the nav link doesn't shrink */
    .navbar-collapse .nav-item .nav-link:not(.dropdown-toggle-split) {
        margin-right: 0 !important;
        padding-right: 0.5rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        order: 1; /* Keep nav link first */
    }

    /* Make sure dropdown toggle is properly styled when active */
    .navbar-collapse .dropdown-toggle-split[aria-expanded="true"] {
        color: var(--gold) !important;
    }

    /* Hide dropdown menus without .show class on mobile */
    .navbar-collapse .dropdown-menu:not(.show) {
        display: none !important;
    }

    .navbar-collapse .dropdown-toggle-split::after {
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        content: "\f0d7";
        border: none;
        font-weight: 900;
        margin-left: 0.5rem;
    }

    /* Ensure the navbar-nav maintains proper flex layout but allows vertical stacking */
    .navbar-nav {
        flex-direction: column !important; /* Stack nav items vertically */
        align-items: stretch !important; /* Stretch items to full width */
        width: 100% !important;
    }
}

/****************************************************************************/

/* Carousel */

.carousel,
.carousel-inner,
.carousel-item,
.carousel-item img {
    max-height: 500px;
    height: 100%;
    object-fit: cover;
}

.carousel-caption {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

/* Letzte Blog-Beiträge */

.blog-latest-entries h3 a {
    font-size: 26px;
    font-weight: 600;
    line-height: 33px;
    margin: 0 0 15px 0;
}

.blog-latest-entries h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin: 0 0 15px 0;
}

.thumbnail .caption {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    padding: 9px;
}

/* Letzte Einsätze */

.einsatz_last_few a {
    font-weight: 600;
}

/* Einsatzliste */

.feuerwehr-kleve-einsatz-liste .row {
    margin: 0;
}

.feuerwehr-kleve-einsatz-liste .col {
    padding: 0;
}

.feuerwehr-kleve-einsatz-liste h5 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

/* Einsatz */

.feuerwehr-kleve-einsatz {
    margin-top: 1em;
}

.feuerwehr-kleve-einsatz .img {
    width: 100%;
}

.feuerwehr-kleve-einsatz h2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.feuerwehr-kleve-einsatz .pagination {
    justify-content: space-between;
}

.feuerwehr-kleve-einsatz .pagination .page-item-prev {
    margin-left: auto; /* Push this button to the right */
}

.feuerwehr-kleve-einsatz .page-link {
    font-weight: 600;
    color: white;
    background-color: var(--grau);
    border-radius: 0.3rem;
    transition: background-color 0.2s ease;
}

.feuerwehr-kleve-einsatz .page-link:hover {
    background-color: var(--rot);
}

.klv-einsatz-bilder {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.klv-slideshow-einsatz img {
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 2px;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.klv-einsatz-daten {
    color: var(--grau);
    background-color: var(--dunkel);
    padding-top: 1em;
    padding-bottom: 1em;
}

.klv-einsatz-daten th {
    color: var(--grau);
}

.klv-einsatz-daten td {
    color: white;
}

.klv-einsatz-daten h1,
.klv-einsatz-daten h2,
.klv-einsatz-daten h3,
.klv-einsatz-daten h4,
.klv-einsatz-daten h5,
.klv-einsatz-daten h6 {
    color: white;
}

.klv-einsatz-daten ul {
    list-style-type: none;
}

.klv-einsatz-daten ul img {
    max-height: 50px;
}

.klv-einsatz-daten .img { /* Vorschaubild */
    border-radius: 10px;
}

.klv-einsatz-bericht {
    padding-top: 1em;
    padding-bottom: 1em;
}

.klv-einsatz-mittel {
    color: white;
    background-color: var(--rot);
    padding-top: 1em;
    padding-bottom: 1em;
}

.klv-einsatz-mittel h3 {
    padding-bottom: 1em;
}

.klv-einsatz-mittel a,
.klv-einsatz-mittel a:hover {
    color: white;
}

/* Nächste Übungstermine */

.feuerwehrkleve-uebungs-termine ul {
    list-style-position: inside;
    padding-left: 0;
}

/* Slideshow generell (nicht nur in Einsätzen) */

.owl-stage {
    margin-left: auto; /* zentrieren, wenn zu schmal */
    margin-right: auto;
}

/* Blog-Liste */

.blog-list {
    padding: 0;
}

.blog-list header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Blog-Artikel */

.post-detail header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Blog-Artikel-Tags */

.post-detail.tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.post-detail.tags li {
    margin: 0;
}

.post-detail.tags li a {
    display: inline-block;
    padding: 0.35em 0.45em;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background-color: var(--grau);
    border-radius: 0.25rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Kategorie extra hervorheben */
.post-detail.tags li[class^="category_"] a {
    background-color: black;
}

/* Tag Hover-Effekt */
.post-detail.tags li a:hover {
    background-color: var(--rot);
}

/* Blog-Einleitung */

.blog-lead {
    font-weight: 600;
}

/* Blog Slideshow */

.klv-slideshow-img {
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 2px;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Fahrzeuge */

.klv-vehicle-tile {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    width: 100%;
    height: 200px; /* Feste Höhe für Konsistenz */
    margin-bottom: 2rem;
}

.klv-vehicle-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sorgt dafür, dass das Bild die Kachel ausfüllt, ohne darüber hinauszugehen */
    display: block;
}

.klv-vehicle-tile-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    padding: 10px;
}

/* Karten ohne Rand */

.card {
    border-width: 0;
}

.card .img-fluid {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

/* Tabs */

.tab-content {
    background-color: var(--rot);
}

.tab-pane {
    background-color: var(--rot);
}

.nav-tabs .nav-link {
    color: black;
    background-color: white;
    border: 0;
}

.nav-tabs .nav-link.active {
    color: white;
    background-color: var(--rot);
}

.nav-tabs .nav-link.hover {
    border: 0;
}

/****************************************************************************/

/* Footer */

.page-footer-background {
    background: right bottom no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='60px' height='80px' viewBox='0 0 60 80'%3E%3Cpath fill='%231d4489' fill-opacity='.9' d='M3.3,39c0,0-2.3,7.5,0.2,10.4c3.6,4,7.7,6.2,15.3,8.1c17.1,4,27,8.8,31.7,14.9c2.2,2.8,2.9,7.7,2.9,7.7h5.6 c0,0-0.3-7.8-6.7-13.5c-6.1-5.4-13.3-8.5-21.9-11.4c-6.6-2.2-11.6-3.8-16.6-5.9C6.3,46.1,3.3,39,3.3,39L3.3,39z M0.1,52.8 c0,0-0.6,6.7,1.7,8.8c5,4.4,12.1,4.6,16.3,5.4c4.3,0.9,12,2.4,15.3,4c4.6,2.2,8.5,4.5,9.7,8.9h5.9c0,0-0.2-9.5-17.3-14.8 c-7.4-2.3-15.2-3.3-21.8-5.4C3.2,57.5,0.1,52.8,0.1,52.8L0.1,52.8z M60,55.6c-4.4-3.8-9.9-8-15.2-11.4c-11.4-7.5-16-16.6-14.8-24.9 C31.5,9.8,37.9,0,51,0c3.3,0,6.3,0.6,9,1.6v6.4c-1.9-0.8-3.8-1.4-5.5-1.6c-7-0.7-13,1.6-16.1,8.6c-2.9,6.6-2.2,12.6,2.7,17.6 c3.3,3.4,11.9,9.8,19,15.5V55.6z M60,68.8c-1.3-1.9-3-3.9-5.4-5.9c-4.7-3.8-11.1-8-28.7-14.1c-9.7-3.5-16.4-7.4-18.6-11.5 c-2.3-4,0.9-13.1,0.9-13.1S9.7,31,13.4,35c5,5.4,19.8,10.6,27.4,13.7c5.4,2.3,13.2,6.5,19.1,12.1V68.8z'/%3E%3C/svg%3E");
    background-size: auto 144%;
    position: relative;
}

.page-footer-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.page-footer-content {
    padding: 40px 20px;
    color: white;
    position: relative;
    z-index: 2;
}

.page-footer-content a {
    color: white;
}

.page-footer-content a:hover {
    color: var(--rot);
}

/****************************************************************************/