/* =========================================
   Typo
   ========================================= */
@import url("/fileadmin/_fonts/css/font-roboto-condensed.css");
@import url("/fileadmin/_fonts/css/font-roboto.css");


h1,
h2,
h3,
h4,
h5,
h6,
.nav-link,
.dropdown-item {
    text-transform: uppercase;
}

h1 {
    color: var(--bs-primary);
    font-weight: 700;
}

h2 {
    color: var(--bs-secondary);
    font-weight: 300;
}

h3 {
    color: var(--bs-primary);
    font-weight: 700;
}

h4 {
    color: var(--bs-secondary);
    font-weight: 300;
}

.dws-rte-paragraph1 {
    font-size: 1.40625rem;
    font-weight: 300;
}

.dws-rte-paragraph2 {
    background-color: var(--bs-dark);
    border: 2px solid rgba(var(--bs-primary-rgb), 0.7);
    border-radius: 0.25rem;
    padding: 0.8rem;
}

.dws-rte-paragraph3 {
    background-color: #BBC879;
    color: var(--bs-secondary);
    border: 2px solid rgba(var(--bs-secondary-rgb), 0.7);
    border-radius: 0.25rem;
    padding: 0.8rem;
}

hr {
    border: 0;
    border-top: 2px solid #C0C0C0 !important;
    opacity: 1 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* =========================================
   Transparente Kopfzeile mit Logo
   ========================================= */
header {
    height: 200px;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
}

header nav {
    height: 100%;
}

header .container-fluid {
    height: 100%;
    align-items: center;
}

/* Standard-Logo */
.KT-logo {
    height: 180px;
    width: auto;
    object-fit: contain;
}


/* Kopfzeile mobile */

@media all and (max-width: 991px) {

    header {
        height: 120px;
    }

    header .container-fluid {
        height: 100%;
        align-items: center;
    }

    .KT-logo {
        height: 100px;
        width: auto;
        object-fit: contain;
    }
}


@media all and (max-width: 575px) {
    .KT-logo {
        height: 90px;
        width: auto;

        /* anderes Bild verwenden */
        content: url("/fileadmin/klimatischde/logo.png");
    }
}

.navbar-toggler {
    border: none !important;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url('/fileadmin/klimatischde/hamburger.svg');
    height: 30px;
    width: 30px;
}

.KT-suche {
    height: 30px;
}

/* =========================================
   Padding Content oben, wenn kein 
   Kopfbild-Carousel vorhanden
   ========================================= */
.dws-seitenstruktur-main:not(:has(> section:first-child .dws-contentelement-carousel)) {
    padding-top: 250px;
}

@media (max-width: 767px) {
    .dws-seitenstruktur-main:not(:has(> section:first-child .dws-contentelement-carousel)) {
        padding-top: 190px;
    }
}

/* =========================================
   Formatierung Offcanvas-Menü
   ========================================= */

@media all and (min-width: 992px) {
    .offcanvas {
        top: 200px !important;
        height: calc(100vh - 200px) !important;
        width: 50vW !important;
        background-color: var(--bs-primary);
        color: white !important;
    }
}

@media all and (max-width: 991px) {
    .offcanvas {
        top: 120px !important;
        height: calc(100vh - 120px) !important;
        background-color: var(--bs-primary);
        color: white !important;
    }
}

.offcanvas-body .navbar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.offcanvas-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.offcanvas-title {
    display: none;
}

.offcanvas-body .nav-item:hover,
.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-item:active,
.offcanvas-body .nav-link:active {
    background-color: var(--bs-primary);
    color: white !important;
}

.offcanvas hr {
    display: none !important;
}

/* 1. EBENE  */

.offcanvas-body .navbar-nav>.nav-item>.nav-link {
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-transform: uppercase !important;
    color: #fff !important;
    text-decoration: none !important;

    padding: 0;
    margin-bottom: 40px;

}


/* Abstand zwischen den Hauptpunkten */

.offcanvas-body .navbar-nav>.nav-item {
    margin-bottom: 45px;
}


/* UNTERMENÜ */

.offcanvas-body .navbar-nav>.nav-item>.dropdown-menu {
    position: static !important;
    transform: none !important;

    display: block;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
}


/* Unterpunkte */

.offcanvas-body .navbar-nav .dropdown-menu .dropdown-item {
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 1.625rem !important;
    font-weight: 400 !important;
    line-height: 1.2;
    text-transform: uppercase !important;
    color: #fff !important;
    text-decoration: none !important;

    padding: 0;
    margin-left: 24px;

    background: transparent !important;
}


/* Abstand der Unterpunkte */

.offcanvas-body .navbar-nav .dropdown-menu li {
    margin-bottom: 40px;
}


/* BOOTSTRAP-DROPDOWN-PFEIL ENTFERNEN */

.offcanvas-body .navbar-nav .dropdown-toggle::after {
    display: none !important;
}


/* HOVER, Focus, Active */

/* Hover, Focus und aktive Menüeinträge */
.offcanvas-body .navbar-nav .nav-link:hover,
.offcanvas-body .navbar-nav .nav-link:focus,
.offcanvas-body .navbar-nav .nav-link.active,
.offcanvas-body .navbar-nav .dropdown-item:hover,
.offcanvas-body .navbar-nav .dropdown-item:focus,
.offcanvas-body .navbar-nav .dropdown-item.active {
    color: var(--bs-warning) !important;
    background: transparent !important;
}


/* LETZTEN ABSTAND ENTFERNEN */

.offcanvas-body .navbar-nav .dropdown-menu li:last-child {
    margin-bottom: 0;
}


/* ========================================
   CAROUSELS
   ======================================== */

/* Desktop */
.dws-contentelement-carousel-container {
    height: 82vh;
}

.dws-contentelement-carousel,
.dws-contentelement-carousel .carousel-inner,
.dws-contentelement-carousel .carousel-item {
    width: 100%;
    height: 82vh !important;
}

.dws-contentelement-carousel .carousel-item img,
.dws-contentelement-carousel .dws-contentelement-carousel-image {
    width: 100% !important;
    height: 82vh !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
}


/*  bis 991px */

@media (max-width: 991px) {

    .dws-contentelement-carousel-container {
        height: 60vh;
    }

    .dws-contentelement-carousel,
    .dws-contentelement-carousel .carousel-inner,
    .dws-contentelement-carousel .carousel-item {
        height: 60vh !important;
    }

    .dws-contentelement-carousel .carousel-item img,
    .dws-contentelement-carousel .dws-contentelement-carousel-image {
        height: 60vh !important;
    }

}


/* bis 767px */

@media (max-width: 767px) {

    .dws-contentelement-carousel-container {
        height: 45vh;
    }

    .dws-contentelement-carousel,
    .dws-contentelement-carousel .carousel-inner,
    .dws-contentelement-carousel .carousel-item {
        height: 45vh !important;
    }

    .dws-contentelement-carousel .carousel-item img,
    .dws-contentelement-carousel .dws-contentelement-carousel-image {
        height: 45vh !important;
    }

}