@charset "utf-8";

/* CSS Document */
html {
    scroll-behavior: smooth;
    font-size: 18px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

* :focus {
    outline: 2px solid #F7A600 !important;
}

:focus {
    outline: 2px solid #F7A600;
}

body {
    height: auto;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    hyphens: manual;
}

/* Spacer zwischen Content-Elementen */
.spacer {
    height: 50px;
}

/* Header oben mit Slideshow */
.header-hero {
    background-color: #F2F8F9;
    color: #003C45;
}

/* Logos */
#logo-dlrpt {
    width: 100%;
    max-width: 200px;
}

#logo-gba {
    width: 100%;
    max-width: 200px;
}

/* Navigation stylen */
nav.main-nav.bg-light {
    background-color: #003C45 !important;
    flex-wrap: wrap;
}

nav.main-nav::after {
    display: block;
    width: 100%;
    content: "";
    height: 8px;
    background: transparent -webkit-linear-gradient(left, #1A3357 0%, #159BDE 53%, #99CC66 100%) 0 0 no-repeat padding-box;
    background: transparent -o-linear-gradient(left, #1A3357 0%, #159BDE 53%, #99CC66 100%) 0 0 no-repeat padding-box;
    background: transparent linear-gradient(to right, #1A3357 0%, #159BDE 53%, #99CC66 100%) 0 0 no-repeat padding-box;
}

.main-nav .nav-link {
    color: #dedede;
    padding: 16px 18px !important;
    font-size: 0.89rem;
}

.main-nav li.nav-item:hover .dropdown-menu,
.main-nav li.nav-item:focus-within .dropdown-menu {
    display: block;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    box-shadow: 0px 3px 10px #3333332e;
    padding: 0px;
}

@media screen and (max-width: 991px) {
    .main-nav li.nav-item .dropdown-menu {
        display: block;
        position: relative;
    }

    .main-nav li.nav-item .dropdown-item {
        font-size: 0.75rem;
        padding-bottom: 14px;
        padding-top: 14px;
    }

    .navbar-collapse {
        max-height: 80vh;
        overflow-y: scroll;
    }

}

.main-nav .dropdown-item {
    color: #030303;
    font-size: 0.89rem;
    padding-bottom: 8px;
    padding-top: 8px;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus,
.main-nav .nav-link.active,
.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: #00788a !important;
    text-decoration: none;
}

.main-nav .dropdown-menu {
    border-radius: 0px;
}

.main-nav .navbar-toggler {
    border-radius: 0;
    font-weight: bold;
    color: #fff;
}

/* Headings stylen */
h1,
.display-1,
.display-2,
.display-3,
h2,
h3,
h4,
h5 {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.display-1 {
    font-size: 2.5rem;
}

h1 {
    font-size: 2rem;
    font-weight: bold;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
    ;
}

/* H1 auf Startseite verstecken */
.visuallyhidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}

/* Links */
main a,
footer a {
    color: #003C45;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: all 0.15s ease-in-out;
}

main a:hover,
main a:active,
footer a:hover,
footer a:active {
    color: #00788A;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* Rand für weisse Bilder */
figure img.outline {
    border: 1px solid #003c452c;
}

/* Teaser Boxen Startseite */
.teaser-box {
    box-shadow: 0px 0px 15px #02475213;
    background-color: #fff;
    transition: all 0.25s ease-in-out;
    border-bottom: 4px solid #00788a20;
    height: 100%;
}

.teaser-box-row figure {
  margin: 1rem 0;
}

.teaser-box figcaption {
    padding-left: 25px;
}

.teaser-box .box-content {
    padding: 0px 25px 25px 25px;
}

.teaser-box:hover {
    box-shadow: 0px 12px 30px #02475253;
    border-bottom: 4px solid #00788A;
    scale: 1.01;
}


.teaser-box-row {
    background-color: #fff;
    transition: all 0.25s ease-in-out;
    height: 100%;
    outline: 1px solid #00788a28;
}

.teaser-box-row .box-content {
    padding: 25px;
}

.teaser-box-row:hover {
    outline: 1px solid #00788A;
    background-color: #F2F8F9;
}



.info-box {
    background-color: #F2F8F9;
    padding: 25px;
}

.info-box h1,
.info-box h2,
.info-box h3,
.info-box h4 {
    color: #003C45;
}

footer a {
    color: #fff;
}

footer a:hover,
footer a:active {
    color: #fff;
}

.sprungmarke {
  visibility: hidden;
  height: 0px !important;
  position: absolute;
  margin: -70px;
}

/* Bilder und Bildbeschreibung */
.figure-caption {
    font-size: 0.7rem;
    color: #717171;
}

.figure-img {
    margin-bottom: 0.1rem;
}

/* Hervorgehobene Inhaltsbox */
.dps-alert {
    background-color: #d9e5ec;
    padding: 0.5rem;
    border-radius: 7px;
}

/* Carousel Indictaros ausserhalb anzeigen */
.carousel-indicators {
    margin-bottom: -1.5rem;
}

.carousel-indicators [data-bs-target] {
    height: 5px;
}

/* Carousel Pfeile Icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #004f80;
    filter: none !important;
}

/* Carousel Caption als Copyright */
.carousel-caption {
    bottom: 5px;
    padding-top: 0;
    padding-bottom: 0;
    left: auto;
    right: 10px;
}

.carousel-caption .copyright-info {
    color: #fff;
    text-shadow: 0px 0px 4px #000;
    margin-bottom: 0;
    font-size: 0.85rem;
    opacity: 0.75;
}

/* Akkordeons */
.accordion-button {
    background-color: #F2F8F9;
}

.accordion-button:not(.collapsed) {
    background-color: #07788A;
    color: #fff !important;
}

.accordion-button:not(.collapsed) .accordion-button::after {
    color: red !important;
    background-color: red;
}

.accordion-body {
    background-color: #F2F8F9;
}

.accordion-header .accordion-button {
    font-size: 1rem;
    font-weight: normal !important;
}

/* Slider mit mehreren Bildern nebeneinander */
#multi-carousel .carousel-inner .carousel-item.active,
#multi-carousel .carousel-inner .carousel-item-next,
#multi-carousel .carousel-inner .carousel-item-prev {
    display: flex;
}

#multi-carousel .carousel-inner .carousel-item-end.active,
#multi-carousel .carousel-inner .carousel-item-next {
    transform: translateX(33.33%);
}

#multi-carousel .carousel-inner .carousel-item-start.active,
#multi-carousel .carousel-inner .carousel-item-prev {
    transform: translateX(-33.33%);
}

#multi-carousel .carousel-inner .carousel-item-end,
#multi-carousel .carousel-inner .carousel-item-start {
    transform: translateX(0);
}

/* Footer stylen */
footer .footer-light {
    background-color: #07788A;
    color: #fff !important;
}

footer .footer-dark {
    background-color: #003C45;
    color: #fff !important;
}

footer .footer-dark * :focus {
    outline: 2px solid #fff !important;
}

footer .footer-nav a {
    color: #fff;
    font-size: 0.875em;
}

footer .footer-nav a:hover,
footer .footer-nav a:focus {
    color: #fff;
    font-size: 0.875em;
}

/* Back to top Button */
#backtotop {
    display: block;
    position: fixed;
    right: 30px;
    bottom: 40px;
    text-align: center;
    background-color: rgba(0, 128, 138, 0.8);
    box-sizing: border-box;
    color: #000000;
    transition: all 0.2s ease-in-out;
    height: 50px;
    width: 50px;
    box-shadow: 0px 0px 10px #00000021;
}

#backtotop:hover {
    background-color: #07788A;
}

#backtotop #backtotop-arrow {
    stroke: #000;
    width: 20px;
    margin-top: 17px;
    transition: all 0.2s ease-in-out;
}

#backtotop:hover #backtotop-arrow {
    margin-top: 13px;
}

/* Toolbox für Barrierefreiheit stylen */
#accessibility-tools {
    position: fixed;
    right: 0;
    left: auto;
    z-index: 99999;
    top: 45vh;
}

#accessibility-tools button {
    display: block;
    border: 0;
    padding: 0;
    width: 45px;
    height: 50px;
    border: 1px solid #fff;
    background-color: #004f80;
    color: #fff;
}

#accessibility-tools button:focus {
    outline: 2px solid #000 !important;
}

#accessibility-tools button.accessibility-button-active {
    background-color: #000;
}

#accessibility-tools button#change-contrast {
    border-top: none !important;
}

#change-contrast {
    background: url(../img/icon-change-contrast.svg) no-repeat center;
}

#change-fontsize {
    background: url(../img/icon-change-fontsize.svg) no-repeat center;
}

/* Classes für Barrierefreiheit-Toggles (jQuery) für Farben und Schriftgroesse */
.large-fontsize {
    font-size: 26px;
}

.dark-background {
    background: #000 !important;
    color: #fff !important;
}

.dark-text {
    color: #000 !important;
}

.main-nav.dark-nav .nav-link:hover,
.main-nav.dark-nav .nav-link:focus,
.main-nav.dark-nav .nav-link.active,
.main-nav.dark-nav .dropdown-item.active,
.main-nav.dark-nav .dropdown-item:active {
    background-color: #000 !important;
    color: #fff !important;
}

.btn {
    border-radius: 0;
    text-decoration: none;
}

.btn-primary,
.btn-info {
    background-color: #003C45 !important;
    color: #fff !important;
    border-color: transparent;
}

.btn-secondary {
    border-color: #003C45 !important;
    color: #003C45 !important;
}

.btn-primary:hover {
    background-color: #07788A !important;
    border-color: transparent;
    text-decoration: none;
}

.btn-secondary:hover {
    border-color: #003C45 !important;
    background-color: #003C45 !important;
    color: #fff !important;
    text-decoration: none;
}

.btn:active,
.btn:focus-visible {
    background-color: #003C45 !important;
    color: #fff !important;
    border-color: transparent;
}

.carousel-control-prev.dark-carousel-button,
.carousel-control-next.dark-carousel-button {
    opacity: 1 !important;
}

.carousel-control-prev.dark-carousel-button .carousel-control-prev-icon,
.carousel-control-next.dark-carousel-button .carousel-control-next-icon {
    background-color: #000 !important;
    color: #fff !important;
}

/* Anpassungen für Inhaltsseite Leichte Sprache */
.leichte-sprache {
    font-size: 1.1rem;
    line-height: 2 !important;
}

.leichte-sprache p {
    margin-bottom: 1.7rem;
}

/* 2 Klick Lösung */
.twoclick-youtube-wrapper {
    background-image: url('medien/sample-image.jpg');
    background-size: cover;
    position: relative;
}

.twoclick-livestream-wrapper {
    background-image: url('../img/livestream-background.jpg');
    background-size: cover;
    position: relative;
    background-color: #d9e5ec;
}

.twoclick-wrapper .twoclick-trigger {
    width: 100%;
    box-sizing: border-box;
    padding: 35px;
    bottom: 0;
    z-index: 9;
    color: #004f80;
    /* text-shadow: 0px 0px 5px #000000; */
}

.twoclick-wrapper .twoclick-livestream-trigger {
    height: 359px;
}

.twoclick-wrapper .twoclick-youtube-trigger {
    height: 500px;
}

.twoclick-wrapper .twoclick-trigger a,
.twoclick-wrapper .twoclick-trigger a:hover .twoclick-wrapper .twoclick-trigger a:visited {
    color: #004f80 !important;
    text-decoration: underline;
}

.twoclick-wrapper .twoclick-layer {
    display: none;
    height: inherit;
    width: inherit;
    margin: auto;
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
    box-shadow: 0px 0px 20px #ddd;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-chat {
    border: 1px solid #ccc;
}

video {
    object-fit: cover;
    width: 100%;
    max-width: 960px;
}

/* Galerie mit Modal- und Carousel-Modul */
.fancybox-gallery img {
    max-width: 100%;
}

.fancybox-gallery a {
    cursor: zoom-in;
}