/* Colors & Variablen */
:root {
    --bs-primary: #054C9B;

    --bs-pink: #b61e79;
    --bs-orange: #f49d03;
    --bs-green: #73aa17;
    --bs-blue: #3a90df;
    --bs-black: #000;
    --bs-gray: #e4e4e4;
    --bs-gray-1: #676767;
    --bs-gray-2: #969696;
    --bs-gray-3: #eaeaea;
}

/* - Text Colors */
.text-primary {
    color: var(--bs-primary) !important;
}
.text-pink {
    color: var(--bs-pink) !important;
}
.text-orange {
    color: var(--bs-orange) !important;
}
.text-green {
    color: var(--bs-green) !important;
}
.text-blue {
    color: var(--bs-blue) !important;
}
.text-gray-1 {
    color: var(--bs-gray-1) !important;
}
.text-gray-2 {
    color: var(--bs-gray-2) !important;
}

/* - Border Colors */
.border-primary {
    border-color: var(--bs-primary) !important;
}
.border-pink {
    border-color: var(--bs-pink) !important;
}
.border-orange {
    border-color: var(--bs-orange) !important;
}
.border-green {
    border-color: var(--bs-green) !important;
}
.border-blue {
    border-color: var(--bs-blue) !important;
}
.border-gray-1 {
    border-color: var(--bs-gray-1) !important;
}
.border-gray-2 {
    border-color: var(--bs-gray-2) !important;
}
.border-gray-3 {
    border-color: var(--bs-gray-3) !important;
}
.border-black {
    border-color: var(--bs-black) !important;
}
.border-left {
    border-left: 1px solid;
}
.border-right {
    border-right: 1px solid;
}
.border-bottom-primary {
    border-bottom: 2px solid var(--bs-primary) !important;
}
.border-bottom-pink {
    border-bottom: 1px solid var(--bs-pink) !important;
}
.border-bottom-width-5 {
    border-bottom: 5px solid;
}
/* - Stroke Colors */
.stroke-color-primary {
    stroke: var(--bs-primary) !important;
}

/* - BG Colors */
.bg-gray {
    background-color: var(--bs-gray);
}
.bg-pink {
    background-color: var(--bs-pink) !important;
}
.bg-orange {
    background-color: var(--bs-orange) !important;
}
.bg-green {
    background-color: var(--bs-green) !important;
}
.bg-blue {
    background-color: var(--bs-blue) !important;
}
.bg-gray-1 {
    background-color: var(--bs-gray-1) !important;
}
.bg-gray-2 {
    background-color: var(--bs-gray-2) !important;
}
.bg-gray-3 {
    background-color: var(--bs-gray-3) !important;
}
.bg-black {
    background-color: var(--bs-black) !important;
}
.bg-primary{
    background-color: var(--bs-primary) !important;
}
/* - BG Hovers */
.bgh-pink:hover {
    background-color: var(--bs-pink) !important;
}
.bgh-orange:hover {
    background-color: var(--bs-orange) !important;
}
.bgh-green:hover {
    background-color: var(--bs-green) !important;
}
.bgh-blue:hover {
    background-color: var(--bs-blue) !important;
}
.bgh-black:hover {
    background-color: var(--bs-black) !important;
}

/* Resets */
a {
    color: inherit;
    text-decoration: none;
    transition: all ease-in-out 0.2s;
}
a:hover {
    color: var(--bs-gray-1);
}
ul {
    list-style-type: none;
}
p {
    font-family: lighto, sans-serif;
}
.rounded {
    border-radius: 0.5rem !important;
}
.rounded-bottom {
    border-bottom-right-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}
.rounded-top {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}
.hr-topbar {
    width: 2px;
    color: black;
    margin-left: -12px;
    margin-right: -12px;
    position: relative;
    top: 20px;
    transform: rotate(90deg);
}
/* -- TEMP -- */
body {
    padding-top: 192px;
}
.ps-6 {
    padding-left: 2rem;
}
.pe-6 {
    padding-right: 2rem;
}
.px-6 {
    padding-left: 2rem;
    padding-right: 2rem;
}


@font-face {
    src: url(../Fonts/regular.ttf);
    font-family: regularo;
}
@font-face {
    src: url(../Fonts//bold.ttf);
    font-family: mrbold;
}
@font-face {
    src: url(../Fonts/light.ttf);
    font-family: lighto;

}


html,body {
    font-family: regularo, sans-serif;
    font-weight: 400;
}
b, .fw-bold {
    font-family: mrbold, sans-serif;
}
/* - Font Sizes */
.fs-7 {
    font-size: 0.75em;
}
.fs-6 {
    font-size: 0.9em !important;
}
/* Header */
.navbar {
    min-height: 100px;
}
.main-nav {
    z-index: 500;
    min-height: 150px;
    top: 42px;
}
/* - SideButton */
.icon-wrapper {
    position: fixed;
}
/* - TopBar */
.top-bar {
    min-height: 40px;
    background-color: var(--bs-gray-3);
}
.top-bar .container,
.top-bar .row {
    min-height: 40px;
}
.top-bar-social i {
    transition: all ease-in-out 0.2s;
}
.top-bar-social:hover i {
    color: var(--bs-primary);
}
.tdms-menu {
    position: fixed;
    top: 42px;
    right: 333px;
    background-color: white;
}
.tdms-menu .dropdown-item {
    transition: all ease-in-out .2s;
    cursor: pointer;
}
.tdms-menu .dropdown-item:hover {
    color: white !important;
    background-color: var(--bs-pink);
}
/* - TopBar Mobile */
.top-bar-mobile {
    z-index: 1050;
}
.top-bar-mobile .dropdown-menu.show {
    transform: inherit !important;
}
.topbar-mobile-arrow::after {
    transition: all ease-in-out .2s;
}
.dropdown-active::after {
    transform: rotate(180deg) !important;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: inherit !important;
}
.tms-menu {
    background-color: white;
}
.tms-menu .dropdown-item:hover, .dropdown-item:focus {
    background-color: inherit;
}
.tms-menu .dropdown-item:hover,
.tms-menu .dropdown-item:focus {
    color: var(--bs-pink) !important;
}
/* - Navigation */
.nav-item.border-bottom {
    border-bottom: 0 !important;
}
#navbarDropdown::after {
    transform: rotate(0deg);
    transition: all ease-in-out 0.2s;
}
.dropdown-active a::after {
    transform: rotate(180deg) !important;
}
.dropdown-menu {
    transition: all ease-in-out 0.2s;
}
.dropdown .dropdown-menu {
    padding: 0;
    box-shadow: none;
    border: 0;
    height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    transition: all ease-in-out 0.2s;
}
.dropdown-menu.show {
    overflow: auto;
    height: auto;
    opacity: 1;
}
.bg-responsive-pink {
    background-color: transparent;
}
.text-responsive-white.nav-link:hover,
.text-responsive-white.nav-link:focus {
    color: var(--bs-pink);
}
.py-10 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* - Logo */
.logo {
    max-width: 250px;
}
.navbar-nav {
    margin-top: 50px;
}
/* Header - Mobil */

/* - Navbar Toggler-Icon */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(27,76,155, 1)'  stroke-linecap='round' stroke-miterlimit='10' stroke-width='1' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.navbar-toggler .nav-icon {
    width: 50px;
    height: 100px;
}
.menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
}
.navigation {
    min-height: 150px;
}
.dropdown-menu[data-bs-popper] {
    top: 64px;
    left: -20px;
}
.dropdown-toggle .show {
}
ul.dropdown-menu.show {
    border: 0;
    border-radius: 0;
    box-shadow: 0 4px 6px 0 #cdcdcd;
    padding: 0;
}
ul.dropdown-menu.show li a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.dropdown-item {
    font-family: lighto, sans-serif;
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: #ffffff;
}
.nav-link {
    font-family: lighto, sans-serif;
    transition: all ease-in-out 0.2s;
    padding: 0 !important;
}
.menu .line {
    fill: none;
    stroke: var(--bs-primary);
    stroke-width: 1;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu .line1,
.menu .line3 {
    stroke-dasharray: 60 207;
}
.menu .line2 {
    stroke-dasharray: 60 60;
}
.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
}
.opened .line1,
.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}

/* Layout - Home + Detail */

/* - Article Box Big */
.article-box-big {
    min-height: 370px;
}
.article-box-big .article-box-big-img {
    max-height: 300px;
    overflow: hidden;
    border-bottom: 5px solid;
}
/* - Quicklinks + Termin Box */
.quicklinks-box {
    min-height: 396px;
}
.quicklinks-box .card {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
}
.card-header:first-child {
    border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}
.card.shadow {
    box-shadow: 0 0 0.5rem rgb(0 0 0 / 15%) !important;
}
.card-img, .card-img-top {
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
}
.termin-box, .termin-box .card {
    min-height: 400px;
    max-height: 400px;
}
.termin-box .list-group .list-group-item {
    border:0;
}
.quicklinks-box .card a,
.termin-box .card a {
    transition: all ease-in-out .2s;
    font-family: lighto, sans-serif;
}
.quicklinks-box .card a:hover {
    color: black !important;
}
.quicklinks-box .card-header,
.termin-box .card-header {
    background-color: var(--bs-primary);
}
.quicklinks-box .card-header b,
.termin-box .card-header b {
    position: relative;
    top: 2px;
}
.termin-box .date-text {
    font-family: lighto, sans-serif;
}
.termin-box .card a:hover {
    filter: saturate(0.5);
}
.quicklinks-box .quicklinks-icon-green {
    padding: 10px;
    background-color: #44AA17;
}
.quicklinks-box .quicklinks-icon svg g path,
.quicklinks-box .quicklinks-icon svg g line,
.quicklinks-box .quicklinks-icon svg g rect {
    stroke: var(--bs-primary);
}
.quicklinks-box .first-link {
    border-bottom: 1px solid var(--bs-gray-3);
    padding-bottom: 10px;
}
.icon-watersituation {
    position: relative;
    top: 3px;
}
/* Layout - Detail + Ticket */
/* - Article Box Big Detail */
.article-box-big-detail {
    min-height: 540px;
}
.article-box-big-detail .article-box-big-detail-img {
    max-height: 300px;
    overflow: hidden;
    border-bottom: 5px solid;
}
.article-box-big-detail svg g path,
.article-box-big-detail svg g line,
.article-box-big-detail svg g rect {
    stroke: var(--bs-primary)
}
/* - Slider generell */
.slick-arrow {}
.slick-prev, .slick-next {
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
    padding-right: 22px;
    padding-top: 40px;
    padding-bottom: 55px;
}
.slick-prev {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}
.slick-next {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
.slick-prev:before {
    transform: rotate(90deg)
}
.slick-next:before {
    transform: rotate(-90deg)
}
.slick-prev:before,
.slick-next:before {
    margin-top: 5px;
    color:var(--bs-gray-2);
    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;
}
.slick-slide {
    padding: 0 12px;
    box-sizing: border-box;
    min-height: 480px;
    max-height: 480px;
}
/* Slider - Home + Mobil */
.slider-wrap-home .slick-next {
    right: -405px;
}
/* News Slider + */
/* Social Network Slider */
.social-networks-wrapper .slick-slide,
.slider-wrap .slick-slide {
    padding: 0 12px;
    box-sizing: border-box;
    min-height: 400px;
    max-height: 400px;
}
.ticket-slider-wrap .slick-slide,
.ticket-slider-wrap .news-card {
    min-height: 420px !important;
    max-height: 420px !important;
}
.social-network-card,
.news-card {
    min-height: 400px;
    max-height: 400px;
    height: 400px;
}
.social-network-card .card-body,
.news-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 185px;
    max-height: 185px;
}
.ticket-slider-wrap .card-body {
    min-height: 205px !important;
    max-height: 205px !important;
}
.social-network-card .card-img-wrapper,
.news-card .card-img-wrapper {
    max-height: 214px;
    min-height: 214px;
    overflow: hidden;
}
.social-network-card .card-img-top,
.news-card .card-img-top {
    width: 400px;
}
.detail-slider .slick-track {
    margin-left: 0;
}
.detail-slider-mobile .slick-slide {
    padding-left: 0;
}
/* Footer */
footer .footer-img {
    max-width: 120px;
    filter: grayscale(100);
}
footer .footer-socials i {
    color: var(--bs-gray-1);
    font-size: 35px;
    transition: all ease-in-out 0.2s;
}
footer .footer-socials a:hover i {
    color: var(--bs-primary);
}
footer .footer-links li {
    margin-bottom: 0;
}
footer .footer-links {
    padding-left: 0;
    margin: 0;
}
.footer-links > li > ul {
    padding-inline-start: 0px;
}
.footer-links > ul {
    padding-inline-start: 0px;
}

/* Fixed Side Buttons */
.sidebuttons{
    min-width: 5%;
    position: fixed;
    top: 0;
    right: 0;

    color: black;
    z-index: 100000;
    height: 100%;
}
.icon-wrapper-top{
    right: 0;
    position: absolute;
    top: 30%;

}
.icon-wrapper-bottom{
    right: 0;
    position: absolute;
    bottom: 5%;
}
.side-icon{
    cursor: pointer;
    transition: all ease-in-out .2s;
    padding: 20px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.side-icon.bg-white:hover {
    filter: saturate(1.8);
}
.side-icon:hover {
    filter: saturate(0.8);
}
.icon-wrapper-bottom > .side-icon {
    border: 1px solid;
    padding: 20px;
    border-right:0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.side-icon img{
    max-width:30px;
}
/*SEARCH*/
#searchBox input {
    border: 1px solid white;
    color: var(--bs-white);
}

#searchBox input:focus-visible {
    border-color: white;
}
.search-icon-replace {
    display: none;
}
.small-icon-search {
    width: 20px;
    margin-left: 10px;
}
.search-text-mobile {
    font-size: 14px;
    padding-left: 5px;
}

/* Bugfixing */

/* Responsive */
/* - Min 768 */
@media (min-width: 768px) {
    /* - Header */

    /* -- Header-Mobil */

    /* --- Logo */
    .ps-6 {
        padding-left: inherit;
    }
    .pe-6 {
        padding-right: inherit;
    }
    /* --- Background-Color */
    .navbar-collapse.bg-gray {
        background-color: white;
    }
}

/* Fixed With Container Fix */
@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 768px;
    }
    .tdms-menu {
        position: fixed;
        right: 50px;
    }
}
@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 900px;
    }
    .tdms-menu {
        position: fixed;
        right: 90px;
    }
    .slider-wrap-home .slick-next {
        right: -338px;
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 920px;
    }
    .tdms-menu {
        position: fixed;
        right: 170px;
    }
    .slider-wrap-home .slick-next {
        right: -345px;
    }
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1100px;
    }
    .tdms-menu {
        right: 165px;
    }
    .slider-wrap-home .slick-next {
        right: -405px;
    }
}

/* - Max 768 */
@media (max-width: 768px) {
    /* Body */
    body {
        padding-top: 92px;
    }
    /* - Header Mobil */
    .logo {
        max-width: 180px;
    }
    /* -- Navigation */
    .navbar-nav {
        margin-top: 0;
    }
    .navbar {
        padding: 0;
    }
    .text-responsive-white {
        color: white !important;
    }
    .py-10 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .main-nav {
        min-height: 100px;
    }

    /* -- Header-Mobil */
    /* --- Navigation */
    .navigation {
        min-height: 100px;
    }
    .bg-responsive-pink {
        background-color: var(--bs-pink);
    }
    ul.dropdown-menu.show {
        box-shadow: none;
    }
    .nav-item.border-bottom.border-primary {
        border-bottom: 1px solid var(--bs-primary) !important;
    }
    .nav-item.border-bottom.border-blue {
        border-bottom: 1px solid var(--bs-blue) !important;
    }
    .nav-item.border-bottom.border-pink {
        border-bottom: 1px solid var(--bs-pink) !important;
    }
    .nav-item.border-bottom.border-orange {
        border-bottom: 1px solid var(--bs-orange) !important;
    }
    .nav-item.border-bottom.border-green {
        border-bottom: 1px solid var(--bs-green) !important;
    }
    .nav-item.border-bottom.border-black {
        border-bottom: 1px solid var(--bs-black) !important;
    }
    /* --- Background-Color */
    .navbar-collapse.bg-gray {
        background-color: var(--bs-gray);
    }
    /* -- Quicklinks Box */
    .quicklinks-box {
        min-height: inherit;
        max-height: inherit;
        box-shadow: none !important;
        background-color: transparent;
    }
    /* -- Termin-Box */
    .termin-box .card,
    .termin-box {
        min-height: auto;
    }
    /* -- Detailbeitragsslider Mobil */
    .detail-slider-mobile .slick-slide {
        padding-left: 10px;
    }
    .detail-slider-mobile .slick-prev.slick-arrow,
    .detail-slider-mobile .slick-next.slick-arrow{
        position: absolute;
        width: 100px;
        margin-top: 240px;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .detail-slider-mobile .slick-prev.slick-arrow {
        left: 50px;
    }
    .detail-slider-mobile .slick-next.slick-arrow{
        right: 50px;
    }
    .detail-slider-mobile .slick-prev:before,
    .detail-slider-mobile .slick-next:before {
        margin-top: 0;
        margin-left: 15px;
        color: var(--bs-gray-2);
        display: inline-block;
        vertical-align: 0;
        content: "";
        border-top: 0.6em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }
    /* -- Footer-Mobil */
    footer .footer-links li {
        margin-bottom: 1em;
    }
    /* Fixed Side Buttons */
    .sidebuttons{
        display: none;
    }
}

@media (max-width: 400px) {
    /* - Header Mobil */
    .logo {
        max-width: 160px;
    }
}


.frame.frame-default{
    padding: 1rem;
}