/*
------------------------------------------------------------------------------------------------
...
------------------------------------------------------------------------------------------------
*/
:root {
    --bs-body-color: #000000;

    --bs-nav-pills-link-active-bg: #E2001A !important;

    --bs-accordion-btn-padding-x: 1.75rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-icon-width: 1.75rem !important;

    --color-rem-grey: #9F958F;
    --color-rem-grey-light: #E7E4E3;
    --color-rem-grey-lightest: rgb(240, 239, 238);

    --color-rem-anthrazit: #747784;
    --color-rem-anthrazit-light: #E6E7E8;
    --color-rem-anthrazit-lightest: rgb(234, 234, 238);
    --color-rem-anthrazit-dark: #4A4D55;

    --color-rem-red: #E2001A;
    --color-rem-red-dark: #B91F27;
    --color-rem-red-20: rgba(226, 0, 26, 0.2);

    --color-rem-green: #80A41C;
    --color-rem-green-darker: #656D24;
    --color-rem-green-20: rgba(128, 164, 28, 0.2);

    --color-rem-yellow: #FBBA00;
    --color-rem-yellow-darker: #AC8200;
    --color-rem-yellow-20: rgba(251, 186, 0, 0.2);

    --color-rem-blue: #006197;
    --color-rem-blue-darker: #003C5E;
    --color-rem-blue-20: rgba(0, 97, 151, 0.2);
    
    --color-rem-violett: #902082;

    --bs-body-font-size: 1.1rem;
}

@media screen and (min-width: 768px) {
    :root {
        --bs-body-font-size: 1.25rem;
    }
}
/*
------------------------------------------------------------------------------------------------
Schriften
------------------------------------------------------------------------------------------------
*/
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 200 700;
    font-stretch: 75% 125%;
    font-display: swap;
    src: url('../fonts/nunito-sans/Nunito_Sans-latin.woff2') format("woff2");
}
/*
------------------------------------------------------------------------------------------------
...
------------------------------------------------------------------------------------------------
*/
html,
body {
    height: 100%;
}

body {
    color: #000000;
}

html,
body,
p,
th,
td,
label,
input,
textarea,
select,
option,
h1,
h2,
h3,
h4,
h5,
h6,
button,
div {
    font-family: "Nunito Sans", Arial, Helvetica, sans-serif !important;
    font-stretch: 77%;
    letter-spacing: 0.02em;
    font-weight: 350;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
button {
    line-height: 1.2;
    font-weight: 260;
}

.img-cover {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.fs-6 {
    line-height: 1.3;
}
/*
------------------------------------------------------------------------------------------------
Allgemein
------------------------------------------------------------------------------------------------
*/
.stretched-link:hover,
.stretched-link:hover::after {
    cursor: pointer;
}

.text-white {
    color: #FFFFFF !important;
}

.text-blue {
    color: var(--color-rem-blue) !important;
}

.text-red {
    color: var(--color-rem-red) !important;
}

.with-border-radius {
    border-radius: 0px 40px 40px 0px;
    overflow: hidden
}

.bg-grey {
    background-color: var(--color-rem-grey-light);
}

.bg-anthrazit {
    background-color: var(--color-rem-anthrazit-light);
}

.bg-green {}

.bg-blue {
    background-color: var(--color-rem-blue-darker);
}

.bg-yellow {}

.font-weight-normal {
    font-weight: 350;
}

b, .bold {
    font-weight: bold;
}

a {
    color: var(--color-rem-red);
    text-decoration: none;
    font-weight: bold;
}

.content-missing h2,
.content-missing button,
p.empty-text {
    color: #FB02D8 !important;
}

div[class*="col"] ul:last-child,
div[class*="col"] p:last-child {
    margin-bottom: 0;
}

.seperator {
    height: 1px;
    width: 100%;
    background: #888888;
}

.divider hr {
    border-top-color: #888888;
    opacity: 1;
    margin: 0;
}

.table {
    --bs-table-striped-bg: var(--color-rem-grey-light);
}

.table th {
    font-weight: bold;
}

.table-light {
    --bs-table-bg: var(--color-rem-grey-light);
    --bs-border-width: 5px;
    --bs-table-border-color: #FFFFFF;
}

.table-striped {}

.table-striped>:not(caption)>*>* {
    border-bottom-width: 0;
}

.table tr th,
.table tr td {
    display: block;
}

@media screen and (min-width: 576px) {
    .table tr th,
    .table tr td {
        display: table-cell;
    }
}

@media screen and (max-width: 575.9px) {
    .table tr> :first-child {
        padding-bottom: 0;
    }

    .table tr> :not(:first-child):not(:last-child) {
        padding-top: 0;
        padding-bottom: 0;
    }

    .table tr> :last-child {
        padding-top: 0;
    }

    .table-light tr>* {
        background-color: transparent;
        padding-left: 0;
        padding-right: 0;
    }
}

img.round {
    border-radius: 50%;
}

button.btn {
    padding: 0;
    border: none;
}
button.btn:active {
    outline: none;
    padding: 0;
    border: none;
}
/*
------------------------------------------------------------------------------------------------
Icons
------------------------------------------------------------------------------------------------
*/
.icon-link {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url('../img/icons/icon-link.svg');
    background-size: contain;
    background-color: var(--color-rem-red);
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    transition: background-color 0.5s;
}

a:focus .icon-link,
a:hover .icon-link {
    background-color: var(--color-rem-red-dark);
}

.icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-rem-red);
}

.icon-info {
    background-image: url('../img/icons/icon-info.svg');
    background-size: contain;
}

.icon-blue {
    background-color: var(--color-rem-blue);
}

.icon-80 {
    width: 80px;
    height: 80px;
}
/*
------------------------------------------------------------------------------------------------
Navbar
------------------------------------------------------------------------------------------------
*/
/*
 ---------------------------------------------
 NAVBAR-TOGGLE
 ---------------------------------------------
*/
.navbar-toggler {
    padding: 0;
    border: none;
    border-radius: 0;
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 110;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.navbar-toggler .navbar-toggler-icon {
    background: none;
    background-color: #9C9CA0;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    display: block;
    position: relative;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #9C9CA0;

    position: absolute;
    bottom: 0;
    transform-origin: 50% 50%;
    transition: all 0.2s ease-in-out;
}

.navbar-toggler .navbar-toggler-icon:before {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px);

    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.navbar-toggler .navbar-toggler-icon:after {
    -webkit-transform: translateY(9px);
    transform: translateY(9px);

    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
    animation-name: topbar;
}

header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
    animation-name: bottombar;
}

header .navbar-toggler.collapsed .navbar-toggler-icon {
    animation-name: middlebar_close;
}

header .navbar-toggler.collapsed .navbar-toggler-icon:before {
    animation-name: topbar_close;
}

header .navbar-toggler.collapsed .navbar-toggler-icon:after {
    animation-name: bottombar_close;
}

header .navbar-toggler[aria-expanded="true"]:hover .navbar-toggler-icon:before,
header .navbar-toggler[aria-expanded="true"]:hover .navbar-toggler-icon:after {
    background-color: #FFFFFF;
}

@keyframes topbar {
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: rotate(45deg) translateY(0);
        transform: rotate(45deg) translateY(0);
    }
}

@keyframes topbar_close {
    0% {
        -webkit-transform: rotate(45deg) translateY(0);
        transform: rotate(45deg) translateY(0);
    }

    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes bottombar {
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: rotate(-45deg) translateY(0);
        transform: rotate(-45deg) translateY(0);
    }
}

@keyframes bottombar_close {
    0% {
        -webkit-transform: rotate(45deg) translateY(0);
        transform: rotate(-45deg) translateY(0);
    }

    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(9px);
        transform: translateY(9px);
    }
}

@keyframes middlebar_close {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: transparent;
    }

    100% {
        background-color: #9C9CA0;
    }
}

/*
 ---------------------------------------------
 NAVBAR
 ---------------------------------------------
*/
.navbar-collapse {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100% !important;
    transition: all 0.5s;
    overflow: hidden;
    display: block !important;
}

@media screen and (min-width: 380px) {
    .navbar-collapse {
        width: 350px !important;
    }
}

@media screen and (min-width: 1200px) {
    .navbar-collapse {
        width: 450px !important;
    }
}


.navbar-collapse {
    transform: translateX(100%);
}

.navbar-collapse.show {
    transform: translateX(0);
}

.navbar-collapse.collapsing {
    height: auto !important;
    transition: all 0.5s;
}

.main-menu-container {
    display: flex;
    flex-flow: column;
    height: 100%;
    overflow-x: auto;
    background: rgba(56, 57, 66, 0.97);
}

.main-menu-header {
    height: 112px;
    width: 100%;
    flex: 0 0 auto;
}

.main-menu-body {
    flex: 0 1 auto;
    width: 100%;
}

.main-menu-body ul.main-menu li a {
    color: #FFFFFF;
    font-weight: 350;
    display: block;
    padding: 0.5rem 1.5rem;
}

.main-menu-body ul.main-menu:hover li a {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s;
}

.main-menu-body ul.main-menu:hover li a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.main-menu-body ul.main-menu li.current-menu-item a {
    font-weight: bold;
    text-decoration: underline;
    color: #FFFFFF !important;
}

@media screen and (min-width: 576px) {
    .main-menu-body ul.main-menu li a {
        padding: 0.5rem 3rem;
    }
}

.main-menu li.separator-before {
    margin-top: 1.5rem;
}
/*
------------------------------------------------------------------------------------------------
Layout
------------------------------------------------------------------------------------------------
*/
#wrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.site-header {
    background: #FFF;
    z-index: 101;
    transition: all 0.15s ease-in-out;
    flex: 0 0 auto;
}

#header.on-scroll {
    box-shadow: 0 1px 15px rgb(0 0 0 / 10%);
}

#container {
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex: 1 1 auto;
}

#container ::-webkit-scrollbar {
    display: none;
}

#footer {
    box-shadow: 0 1px 15px rgb(0 0 0 / 10%);
    background: #FFF;
    overflow: hidden;
    z-index: 99;
    flex: 0 0 auto;
}
/*
------------------------------------------------------------------------------------------------
Header
------------------------------------------------------------------------------------------------
*/
/*
------------------------------------------------
Logo
------------------------------------------------
*/
@media screen and (min-width: 768px) {
    .site-header .site-branding img {
        width: 151px;
    }
}
/*
------------------------------------------------------------------------------------------------
Content
------------------------------------------------------------------------------------------------
*/
#container {
    background-color: #f8f8f8;
}

main#content {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    min-height: 100%;
}

.container-lg {
    bo-rder: 1px solid red;
}

.row {
    bor-der: 1px solid blue;
}
/*
------------------------------------------------------------------------------------------------
Styling Allgemeines
------------------------------------------------------------------------------------------------
*/
.entry-title {
    font-size: calc(1.375rem + 2.5vw);
}

.archive-meta p:last-child {
    margin-bottom: 0;
}
/*
------------------------------------------------------------------------------------------------
Geschaeftsfelder
------------------------------------------------------------------------------------------------
*/
/*
------------------------------------------------
Akkordeon
------------------------------------------------
*/
.station-accordion .accordion-item {
    position: relative;
    border: 0px solid transparent;
    transition: all 0.25s ease-in-out;
    padding-left: 40px;
}

.station-accordion .accordion-item:last-child {
    padding-bottom: 0 !important;
}

.station-accordion .accordion-item::before {
    height: 100%;
    width: 4px;
    background-color: var(--color-rem-anthrazit);
    content: "";
    position: absolute;
    display: inline-block;
    left: 14px;
    transition: all 0.3s ease-in-out;
}

.station-accordion .accordion-item:first-of-type:before {
    top: 14px;
}

.station-accordion .accordion-item:last-of-type::before {
    height: 20px;
}

/* Linie, die Recyling zugeordnet ist = Grün */
.category-recycling .station-accordion .accordion-item::before {
    background-color: var(--color-rem-green);
}

/* Linie, die REMONDIS Digital zugeordnet ist = Gelb */
/* Linie, die Service zugeordnet ist = Gelb */
.term-remondis-digital .station-accordion .accordion-item::before,
.category-service .station-accordion .accordion-item::before {
    background-color: var(--color-rem-yellow);
}

/* Linie, die REMONDIS Aqua zugeordnet ist = Blau */
/* Linie, die Wasser zugeordnet ist = Blau */
.term-remondis-aqua .station-accordion .accordion-item::before,
.category-wasser .station-accordion .accordion-item::before {
    background-color: var(--color-rem-blue);
}

/* Linie, die REMONDIS zugeordnet ist = ROT */
/* Linie, die Wasser zugeordnet ist = Blau */
.term-remondis .station-accordion .accordion-item::before {
    background-color: var(--color-rem-red);
}

.station-accordion .accordion-item .divider hr {
    border-color: rgba(190, 191, 193, 1);
}

.station-accordion .accordion-item:first-of-type>.divider {
    display: none !important;
}

@media screen and (min-width: 576px) {
    .station-accordion .accordion-item::before {
        width: 6px;
        left: 17px;
    }
}
/*
------------------------------------------------
Akkordeon Content Header
------------------------------------------------
*/
.station-accordion h2.accordion-header {
    position: relative;
}

.station-accordion h2.accordion-header button {
    font-size: inherit;
    font-weight: bold;
    font-weight: 350;
}

.station-accordion h2.accordion-header button span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.accordion-item .accordion-body {
    max-width: 1320px;
}

.station-accordion h2.accordion-header .accordion-subline {
    font-weight: 350;
}

/* Stationen (= Kreise) */
.station-accordion h2.accordion-header::before {
    content: "";
    border: 4px solid var(--color-rem-anthrazit);
    background-color: #FFFFFF;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    left: -40px;
    z-index: 3;
    top: 16px;
    top: 6px;
    transition: all 0.25s ease-in-out;
}

.station-accordion h2.accordion-header::after {
    content: "";
    background-color: #FFFFFF;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    position: absolute;
    z-index: 2;
    top: 0px;
    left: -46px;
    transition: background-color 0.25s ease-in-out;
}

.station-accordion .active h2.accordion-header::after {
    border: 6px solid #FFFFFF;
    width: 54px;
    height: 54px;
    left: -51px;
    top: -5px;
}

@media screen and (min-width: 576px) {
    .station-accordion h2.accordion-header::before {
        border-width: 6px;
        width: 40px;
        height: 40px;
    }

    .station-accordion h2.accordion-header::after {
        width: 52px;
        height: 52px;
    }

    .station-accordion .active h2.accordion-header::after {
        border: 6px solid #FFFFFF;
        width: 64px;
        height: 64px;
        left: -52px;
        top: -6px;
    }
}

/* Stationen, die Recycling zugeordnet sind = Grün */
.category-recycling .station-accordion h2.accordion-header::before {
    border-color: var(--color-rem-green);
}

.category-recycling .station-accordion .active h2.accordion-header::after {
    background-color: var(--color-rem-green);
}

/* Stationen, die Service zugeordnet sind = Gelb */
/* Stationen, die REMONDIS Digital zugeordnet sind = Gelb */
.term-remondis-digital .station-accordion h2.accordion-header::before,
.category-service .station-accordion h2.accordion-header::before {
    border-color: var(--color-rem-yellow);
}

.term-remondis-digital .station-accordion .active h2.accordion-header::after,
.category-service .station-accordion .active h2.accordion-header::after {
    background-color: var(--color-rem-yellow);
}

/* Stationen, die Wasser zugeordnet sind = Blau */
/* Stationen, die REMONDIS Aqua zugeordnet sind = Blau */
.term-remondis-aqua .station-accordion h2.accordion-header::before,
.category-wasser .station-accordion h2.accordion-header::before {
    border-color: var(--color-rem-blue);
}

.term-remondis-aqua .station-accordion .active h2.accordion-header::after,
.category-wasser .station-accordion .active h2.accordion-header::after {
    background-color: var(--color-rem-blue);
}

/* Stationen, die REMONDIS zugeordnet sind = ROT */
.term-remondis .station-accordion h2.accordion-header::before {
    border-color: var(--color-rem-red);
}

.term-remondis .station-accordion .active h2.accordion-header::after {
    background-color: var(--color-rem-red);
}

/* Pfeil hinten */
.accordion-button:not(.collapsed)::after,
.accordion-button::after {
    background-size: 1.75rem;
    height: 1.75rem;
    width: 1.75rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E2001A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item .accordion-button:not(.collapsed)::after {
    transform: var(--bs-accordion-btn-icon-transform);
}

/* Not-Active Accordion-Items */
.station-accordion .accordion-item.not-active h2 .accordion-button,
.station-accordion .accordion-item.not-active h2 .accordion-subline {
    opacity: 0.5;
    color: var(--color-rem-grey);
    color: var(--color-rem-anthrazit);
}

.station-accordion .accordion-item.not-active::before {
    opacity: 0.5;
    background-color: var(--color-rem-grey);
    background-color: var(--color-rem-anthrazit);
}

.station-accordion .accordion-item.not-active h2.accordion-header::before {
    opacity: 0.5;
    border-color: var(--color-rem-anthrazit);
}
/*
------------------------------------------------
Akkordeon Content Body
------------------------------------------------
*/
.accordion-button:focus {
    box-shadow: none;
}

body:not(.tax-tochterunternehmen) .station-accordion .accordion-button.has-label span.button-title {
    width: 100%;
    margin: 0 1rem 0 0;
    align-items: center;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}

body:not(.tax-tochterunternehmen) .station-accordion .accordion-button.has-label span.button-title::after {
    content: attr(data-tochterunternehmen);
    font-size: medium;
    color: var(--color-rem-anthrazit);
    border: 2px solid var(--color-rem-anthrazit);
    padding: 5px 10px 3px;
    border-radius: 20px;
    flex: 0 0 auto;
    display: inline-block;
    white-space: nowrap;
}

@media screen and (min-width: 576px) {
    body:not(.tax-tochterunternehmen) .station-accordion .accordion-button.has-label span.button-title {
        flex-flow: row;
    }

    body:not(.tax-tochterunternehmen) .station-accordion .accordion-button.has-label span.button-title::after {
        margin-left: auto;
    }
}

body.category-recycling .station-accordion .accordion-button.has-label span.button-title::after {
    display: none;
}

.accordion-body .text-content {
    height: 220px;
    position: relative;
    overflow: hidden;
    transition: all 150ms ease-in-out;
}

.accordion-body .text-content.readmore {
    height: initial;
    position: relative;
    overflow: hidden;
}

.accordion-body button.read-more {
    border: none;
    background: #FFF;
    color: var(--color-rem-red);
    font-weight: bold;
}

.accordion-body .text-content:not(.readmore):before {
    content: "";
    height: 100%;
    position: absolute;
    background: linear-gradient(180deg, transparent 0 50%, transparent 50%, #FFF 100%);
    width: 100%;
}

.accordion-body .text-content.no-gradient {
    height: initial;
}

.accordion-body .text-content.no-gradient::before {
    background: none;
}

.accordion-body .text-content.no-gradient p {
    margin-bottom: 0px;
}
/*
------------------------------------------------
Referenzen Checklisten
------------------------------------------------
*/
.referenz-check-list-item {
    padding-left: 44px;
    /*padding-right: 15px;*/
    position: relative;
}

.referenz-check-list-item::after {
    position: absolute;
    content: "";
    height: 44px;
    width: 44px;
    background-color: var(--color-rem-green);
    border-radius: 50%;
    left: 0px;
    top: 0px;
    background-image: url('../img/icons/icon-haken.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.referenz-check-list-item.item-herausforderungen::after {
    background-color: var(--color-rem-yellow);
}

.red-button {
    background-color: var(--color-rem-red);
    color: #FFF;
    display: inline-block;
    padding: 2.5px 15px;
    border: 1px solid #fff;
    transition: background-color 0.5s;
    font-weight: normal;
    white-space: nowrap;
}

.red-button:hover {
    background-color: var(--color-rem-red-dark);
}


ul.list-aufzaehlung {
    padding-left: 0px;
    color: var(--color-rem-blue);
}

ul.wp-block-list,
ul.list-aufzaehlung,
.leistungsportfolio ul {
    list-style-type: none;
    padding-left: 0px;
}

ul.wp-block-list li,
ul.list-aufzaehlung li,
.leistungsportfolio ul li {
    padding-left: 16px;
    position: relative;
    width: 100%;
}

ul.wp-block-list li:before,
ul.list-aufzaehlung li:before,
.leistungsportfolio ul li:before {
    content: "_";
    width: auto;
    height: auto;
    display: inline;
    position: absolute;
    background: none;
    top: 0;
    left: 0;
}

.leistungsportfolio ul {
    margin-bottom: 0;
}

.leistungsportfolio ul li {
    display: inline-block;

}

@media screen and (min-width: 576px) {
    .leistungsportfolio ul {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

@media screen and (min-width: 768px) {
    .leistungsportfolio ul {
        column-count: 3;
    }
}

@media screen and (min-width: 992px) {
    .leistungsportfolio ul {
        column-count: 4;
    }
}
/*
------------------------------------------------------------------------------------------------
Zitate
------------------------------------------------------------------------------------------------
*/
.zitat-segment .zitat-text {
    position: relative;
    font-size: larger;
    font-weight: 260;
}

@media screen and (min-width: 1200px) {
    .zitat-segment .zitat-text {
        font-size: 2rem;
    }
}

.zitat-segment .zitat-text::before {
    content: "";
    position: absolute;
    display: block;
    background-image: url('../img/icons/icon-zitat-oben.svg');
    background-repeat: no-repeat;
    width: 90px;
    height: 90px;
    left: 0px;
    top: 0px;
}

.zitat-segment .zitat-text::after {
    content: "";
    position: absolute;
    display: block;
    background-image: url('../img/icons/icon-zitat-unten.svg');
    background-repeat: no-repeat;
    width: 90px;
    height: 90px;
    right: 0px;
    bottom: -15px;
}
/*
------------------------------------------------------------------------------------------------
Swiper
------------------------------------------------------------------------------------------------
*/
.swiper {
    width: 100%;
}

.icon-lupe::after {
    content: url('../img/icons/button_lupe.png');
    position: absolute;
    display: inline-block;
    right: 0;
    top: 0;
}

.icon-play::after {
    content: url('../img/icons/button_lupe.png');
    position: absolute;
    display: inline-block;
    right: 0;
    top: 0;
}

.icon-play::before {
    content: "";
    background-image: url('../img/icons/icon-einzelpfeil.svg');
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.15);
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.swiper-slide {
    background-color: rgb(248, 248, 248);
}

.swiper-pagination {
    position: relative;
    top: 0px !important;
    padding-top: 30px;
}

.swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    opacity: 0.2;
    background: #000;
    border: 6px solid transparent;
    background-clip: padding-box !important;
    transform: none !important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-rem-red);
}
/*
------------------------------------------------------------------------------------------------
Fancy Box
------------------------------------------------------------------------------------------------
*/
.fancybox__content {
    padding: 0px;
}

#dialog-content {
    max-height: 80vh;
}

.fancybox__slide:has(> #dialog-content) {
    padding: 0;
}

.fancybox__slide:has(> #dialog-content) .fancybox__content {
    width: 90vw;
    max-width: 1200px;
    background: transparent;
}

/* PDF-Embed-Modal via #pdf-embed-dialog (inline type, wie das Formular-Modal)
   Rückgängig: diesen Block + footer.php div + map-viewer.js handler entfernen */
.fancybox__slide:has(> #pdf-embed-dialog) {
    padding: 0;
}
.fancybox__slide:has(> #pdf-embed-dialog) .fancybox__content {
    width: 90vw;
    max-width: none;
    background: transparent;
}

/* Embed-Modus (PDF-Viewer-Seite ohne Chrome, ?embed=1)
   Rückgängig: diesen Block + PHP-Checks in header.php / footer.php entfernen */
body.is-embed #header,
body.is-embed #screensaver,
body.is-embed #map-viewer {
    display: none !important;
}
body.is-embed #wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
body.is-embed #container {
    flex: 1;
    overflow: hidden;
}
body.is-embed main#content {
    height: 100%;
    padding: 0 !important;
}
body.is-embed #pdf-container {
    height: 100%;
    overflow-y: auto;
    padding: 1rem !important;
}

/* Tablets (Touch, kein Hover) ausblenden */
@media (hover: none) and (pointer: coarse) {
  .simple-keyboard {
    display: none !important;
  }
}

.fancybox__backdrop {
    background: rgba(24, 25, 27, 0.95) !important;
}
/*
------------------------------------------------------------------------------------------------
SUBMENU
------------------------------------------------------------------------------------------------
*/
ul.submenu {
    list-style: none;
    padding-left: 55px;
    margin-bottom: 0px;
}

ul.submenu li {
    padding-left: 20px;
    padding-top: 10px;
    position: relative;
}

ul.submenu li::before {
    height: 100%;
    width: 6px;
    content: "";
    position: absolute;
    display: inline-block;
    left: -39px;
    background-color: var(--color-rem-anthrazit);
}

ul.submenu li h2 {
    position: relative;
    /*font-size: 40px;*/
    font-size: 2.5rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 0px;
}

ul.submenu li h2::before {
    content: "";
    border: 6px solid var(--color-rem-blue);
    border-radius: 40px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: -75px;
    z-index: 3;
    top: 4px;
    transition: all 0.15s ease-in-out;
}

ul.submenu li h2::after {
    content: "";
    background-color: #FFF;
    border-radius: 52px;
    width: 52px;
    height: 52px;
    position: absolute;
    z-index: 2;
    top: -2px;
    left: -81px;
    transition: all 0.15s ease-in-out;
}

ul.submenu li.service h2::before {
    border-color: var(--color-rem-yellow);
}

ul.submenu li.recycling h2::before {
    border-color: var(--color-rem-green);
}

ul.submenu span:not(.link-style) {
    /*font-size: 24px;*/
    font-size: 1.5rem;
    display: block;
    padding-bottom: 16px;
}
/*
------------------------------------------------------------------------------------------------
Kontakte / Downloads
------------------------------------------------------------------------------------------------
*/
.contact-list .contact-item:first-of-type .divider,
.downloads-list .download-item:first-of-type .divider,
.map-station-panel .download-item .divider {
    display: none;
}

.qr-code {
    /*width: 120px; */
    max-width: 100%;
    height: auto;
}

.download-item .su-qrcode {
    margin: 0 !important;
}

.pdf-rahmen {
    border: 1px solid #e4e4e4;
}

.qr-link-meta .linktyp {
    font-weight: bold;
}

@media screen and (min-width: 1000px) and (min-height: 1900px) and (max-aspect-ratio: 3/4) {
    .qr-link-meta a.download-link {
        color: inherit;
        pointer-events: none;
        cursor: default;
    }
}
/*
------------------------------------------------------------------------------------------------
Startseite
------------------------------------------------------------------------------------------------
*/
.home #content {
    padding-bottom: 0 !important;
}
.home .content-top {
    /*min-height: 50vH;*/
    /*display: flex;*/
}

@media screen and (min-width: 992px) {
    .home .content-top {
        /*min-height: initial;*/
    }
}

@media screen and (min-width: 1000px) and (min-height: 1900px) and (max-aspect-ratio: 3/4) {
    .home main#content,
    .home #content-inner {
        height: 100%;
    }

    .home .content-top {
        flex: 1 1 auto;
    }

    .home .content-bottom {
        flex: 0 0 auto;
    }
}
/*
------------------------------------------------
Startseite Media Container
------------------------------------------------
*/
@media screen and (min-width: 576px) {
    .frontpage-media-container {
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .frontpage-media-container {
        height: 50vH;
    }
}

@media screen and (min-aspect-ratio: 1) {
    .frontpage-media-container {
        height: 80vH;
    }
}

@media screen and (min-width: 1921px) and (min-aspect-ratio: 4/3) {
    .frontpage-media-container {
        height: 800px;
    }
}

@media screen and (min-width: 1000px) and (min-height: 1900px) and (max-aspect-ratio: 3/4) {
    .frontpage-media-container {
        height: 100%;
    }
}
/*
------------------------------------------------
Startseite Media Container mit Video
------------------------------------------------
*/
.frontpage-media-container video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.home .content-top .overlay {
    background: rgba(56, 57, 66, 0.9);
}

@media screen and (min-width: 768px) {
    .home .content-top .overlay {
        background:
          linear-gradient(
            to top,
          rgb(57,58,66) 0%,
          rgba(57,58,66,0.85) 15%,
          rgba(57,58,66,0.6) 25%,
          rgba(70,72,80,0.35) 35%,
          rgba(70,72,80,0.15) 45%,
            transparent 50%
          ),
          repeating-radial-gradient(circle, rgba(255,255,255,0.015) 0 1px, transparent 1px 2px);

        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    .home .content-top.with-video .overlay {
        background: transparent;
        background: linear-gradient(to top, rgb(57, 58, 66) 0%, transparent 100%);
        background: linear-gradient(to top, rgb(57, 58, 66) 0%, rgba(57, 58, 66, 0.5) 70%, transparent 97%);
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}
/*
------------------------------------------------
Startseite Header Animation
------------------------------------------------
*/
.home .content-top .claim,
.home .content-top .claim * {
    font-size: calc((1.375rem + 2.5vw) * 1.2);
    font-weight: 260;
    line-height: 1.2;
}

.home .content-top .claim * strong {
    font-weight: bold;
    color: #FFF !important;
}

.home .content-top .claim {
    text-align: center;
    position: relative;
    display: none;
}

@media screen and (min-width: 768px) {
    .home .content-top .claim {
        display: flex;
    }
}

@keyframes textFader1 {
    0% {
        opacity: 0;
    }

    /* fade-in */
    10% {
        opacity: 0;
    }

    /* fade-in */
    11% {
        opacity: 1;
    }

    /* show */
    24% {
        opacity: 1;
    }

    /* fade-out */
    25% {
        /* <-------------------{ 100% / num(H2) = 33% } */
        opacity: 0;
    }

    /* waiting for the finish animation of other blocks */
    100% {
        opacity: 0;
    }
}

@keyframes textFader2 {
    0% {
        opacity: 0;
    }

    /* fade-in */
    26% {
        opacity: 0;
    }

    /* fade-in */
    27% {
        opacity: 1;
    }

    /* show */
    99% {
        opacity: 1;
    }

    /* fade-out */
    100% {
        /* <-------------------{ 100% / num(H2) = 33% } */
        opacity: 0;
    }

    /* waiting for the finish animation of other blocks */
}

.home .content-top .claim .line {
    flex: 0 0 100%;

    opacity: 0;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.home .content-top .claim .line-01 {
    animation-name: textFader1;
}

.home .content-top .claim .line-02 {
    margin-left: -100%;
    display: flex;
    justify-content: center;
    align-items: center;

    animation-name: textFader2;
}

@keyframes symbolFader {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    /* fade-in */
    13% {
        opacity: 0;
        transform: scale(0.75);
    }

    /* fade-in */
    13.5% {
        opacity: 1;
        transform: scale(1);
    }

    /* show */
    100% {
        opacity: 1;
    }
}

@keyframes symbolFader1 {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    /* fade-in */
    13% {
        opacity: 0;
        transform: scale(0.75);
    }

    /* fade-in */
    13.5% {
        opacity: 1;
        transform: scale(1);
    }

    /* show */
    100% {
        opacity: 1;
    }
}

@keyframes symbolFader2 {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    /* fade-in */
    14% {
        opacity: 0;
        transform: scale(0.75);
    }

    /* fade-in */
    14.5% {
        opacity: 1;
        transform: scale(1);
    }

    /* show */
    100% {
        opacity: 1;
    }
}

@keyframes symbolFader3 {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    /* fade-in */
    15% {
        opacity: 0;
        transform: scale(0.75);
    }

    /* fade-in */
    15.5% {
        opacity: 1;
        transform: scale(1);
    }

    /* show */
    100% {
        opacity: 1;
    }
}

@keyframes symbolMoveRight {
    0% {
        translate: 0% 0%;
    }

    90% {
        translate: 0% 0%;
    }

    92% {
        translate: 100% 0%;
    }

    100% {
        translate: 100% 0%;
    }
}

@keyframes symbolMoveLeft {
    0% {
        translate: 0% 0%;
    }

    90% {
        translate: 0% 0%;
    }

    92% {
        translate: -100% 0%;
    }

    100% {
        translate: -100% 0%;
    }
}

@keyframes symbolsFader {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    92% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.home .content-top .symbols {
    position: absolute;
    top: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    animation-name: symbolsFader;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0s;

    display: none;
}

@media screen and (min-width: 980px) {
    .home .content-top .symbols {
        display: flex;
    }
}

.home .content-top .symbols .symbol {
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0s;
}

.home .content-top .symbols .symbol-01 {
    animation-name: symbolMoveRight;
}

.home .content-top .symbols .symbol-02 {}

.home .content-top .symbols .symbol-03 {
    animation-name: symbolMoveLeft;
}

.home .content-top .symbols .symbol-inner {
    width: 200px;
    height: 200px;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    opacity: 0;
    filter: drop-shadow(1px 1px 5px rgba(255, 255, 255, 0.15)) drop-shadow(1px -1px 5px rgba(255, 255, 255, 0.15)) drop-shadow(-1px 1px 5px rgba(255, 255, 255, 0.15)) drop-shadow(-1px -1px 5px rgba(255, 255, 255, 0.15));
}

.home .content-top .symbols .symbol-01 .symbol-inner {
    background-image: url('../img/icons/recycling-color_neu.svg');
    animation-name: symbolFader1;
    animation-delay: 0s;
}

.home .content-top .symbols .symbol-02 .symbol-inner {
    background-image: url('../img/icons/service-color_neu.svg');
    animation-name: symbolFader2;
    animation-delay: 0s;
}

.home .content-top .symbols .symbol-03 .symbol-inner {
    background-image: url('../img/icons/wasser-color_neu.svg');
    animation-name: symbolFader3;
    animation-delay: 0s;
}
/*
------------------------------------------------------------------------------------------------
...
------------------------------------------------------------------------------------------------
*/
.gf {
    display: flex;
    flex-flow: column;
}

.gf-header .gf-icon {
    background-position: center;
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-size: 90%;
}

.gf-icon.icon-wasser {
    background-image: url('../img/icons/wasser_neu.svg');
    background-color: var(--color-rem-blue);
}

.gf-icon.icon-service {
    background-image: url('../img/icons/service_neu.svg');
    background-color: var(--color-rem-yellow);
}

.gf-icon.icon-recycling {
    background-image: url('../img/icons/recycling_neu.svg');
    background-color: var(--color-rem-green);
}

.circle {
    background: #FFF;
    width: 100%;
    border-radius: 50%;
}

.gf-header h2 {
    margin: 0;
}

@media screen and (min-width: 640px) and (max-width: 991px) {
    .gf-header {
        display: flex;
        justify-content: center;
        flex-flow: column;
    }

    .gf-header .gf-icon {
        background-size: 80%;
    }

    .gf-header h2 {
        text-align: center;
    }
}

@media screen and (min-width: 992px) {

    .gf {
        color: #FFFFFF;
    }

    .gf-wasser {
        background-color: var(--color-rem-blue);
    }

    .gf-service {
        background-color: var(--color-rem-yellow);
    }

    .gf-recycling {
        background-color: var(--color-rem-green);
    }

    .gf-header .gf-icon {
        height: 150px;
        width: 150px;
        background-size: 100%;
    }

    .gf-icon.icon-wasser {
        background-color: var(--color-rem-blue-darker);
        background-color: rgba(255, 255, 255, 0.12);
    }

    .gf-icon.icon-service {
        background-color: var(--color-rem-yellow-darker);
        background-color: rgba(255, 255, 255, 0.27);
    }

    .gf-icon.icon-recycling {
        background-color: var(--color-rem-green-darker);
        background-color: rgba(255, 255, 255, 0.18);
    }
}

@media screen and (min-width: 992px) {
    .home .tochterunternehmen {
        background-color: var(--color-rem-grey-light);
    }
}
/*
------------------------------------------------------------------------------------------------
Seite Tochterunternehmen
------------------------------------------------------------------------------------------------
*/
.link-mit-text .su-qrcode {
    text-align: left;
}

ul.contact-data-list {
    padding-left: 0px;
    list-style: none;
}
/*
------------------------------------------------------------------------------------------------
Referenzen Archiv
------------------------------------------------------------------------------------------------
*/
#oepp-map {
    max-width: 100%;
    height: auto;
}
/*
------------------------------------------------------------------------------------------------
Referenzen
------------------------------------------------------------------------------------------------
*/
.referenz-header {
    background-size: cover;
    min-height: 300px;
}

.single-referenz .referenz-header {
    min-height: 300px;
}

@media screen and (min-width: 576px) {

    .single-referenz .referenz-header,
    .referenz-header {
        min-height: 450px;
    }
}

@media screen and (min-width: 1400px) {

    .single-referenz .referenz-header,
    .referenz-header {
        min-height: 600px;
    }
}

.referenz-header .overlay {
    background: linear-gradient(0deg, rgba(2, 0, 36, 0.5) 0%, rgba(0, 0, 0, 0.2497373949579832) 30%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to top, #393a42 0%, transparent 100%);
    flex: 0 0 auto;
    min-height: 50%;
}

.referenz-header .overlay h1 {
    text-shadow: #393a42 0 0 10px;
}

.daseinsvorsorge-icons {
    list-style: none;
    display: flex;
    padding-left: 0px;
   /* flex-wrap: wrap;*/
}

.daseinsvorsorge-icons li {
    padding-right: 5px;
}

.daseinsvorsorge-icons li span.icon-dv {
    background: var(--color-rem-grey-light);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-recycling {
    background-image: url('../img/icons/icon-recycling.svg');
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-recycling.active-icon {
    background-color: var(--color-rem-green);
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-stadtsauberkeit {
    background-image: url('../img/icons/icon-stadtsauberkeit.svg');
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-stadtsauberkeit.active-icon {
    background-color: #B40B1A;
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-wasser {
    background-image: url('../img/icons/icon-wasser.svg');
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-wasser.active-icon {
    background-color: var(--color-rem-blue);
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-energie {
    background-image: url('../img/icons/icon-energie.svg');
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-energie.active-icon {
    background-color: #31B7BC;
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-verkehr {
    background-image: url('../img/icons/icon-verkehr.svg');
}

.daseinsvorsorge-icons li span.icon-dv.icon-dv-verkehr.active-icon {
    background-color: var(--color-rem-violett);
}

#accordionReferenzen button {
    font-size: inherit;
    font-weight: bold;
}

#accordionReferenzen button.collapsed {
    font-weight: normal;
}

#accordionReferenzen .accordion-item.not-active button.collapsed {
    opacity: 0.5;
    color: var(--color-rem-anthrazit);
}

.accordion .accordion-item:last-of-type .accordion-body {
    padding-bottom: 0 !important;
}

.accordion .accordion-item:last-of-type .accordion-body .position:last-child {
    margin-bottom: 0 !important;
}

#accordionReferenzen .accordion-button:not(.collapsed) {
    background: none;
    box-shadow: none;
    color: inherit;
}

.accordion .referenz-item .img-container img {

    object-fit: cover;
    object-position: center;
}

.accordion .referenz-item .subtitel {
    font-size: 17px;
    line-height: 1.3;
    display: inline-block
}

.switch-button {
    color: #9C9CA0;
    background: transparent;
    border: none;
}

.switch-button:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('../img/icons/icon-change-trans-white.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0px;
    margin-right: 10px;
    position: relative;
    top: 4px;
}
/*
------------------------------------------------------------------------------------------------
Footer
------------------------------------------------------------------------------------------------
*/
#footer ul.footer-menu {
    overflow: hidden;
    margin-bottom: 0px;
}

#footer ul.footer-menu li {
    padding: 15px 7.5px;
    font-size: medium;
    white-space: nowrap;
    display: flex;
}

#footer ul.footer-menu li:last-of-type {
    display: none;
}

#footer ul.footer-menu li a {
    display: block;
    position: relative;
    text-align: center;
    color: #000;
    text-decoration: none;
    font-weight: 350;
    margin-top: auto;
    margin-bottom: auto;
}

#footer ul.footer-menu li.current-menu-item a {
    font-weight: bold;
}

span.re-icon,
#footer ul.footer-menu li a span.re-icon {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

#footer ul.footer-menu li a span.label {
    display: none;
}

span.re-icon.icon-back,
#footer ul.footer-menu li a span.re-icon.icon-back {
    background-image: url('../img/icons/icon-back.svg');
    background-size: 60%;
    margin-right: 5px;
    background-color: #FFF;
}
#footer ul.footer-menu li a span.re-icon.icon-back {
    margin-right: 5px;
    background-color: #f0f0f0;
}

span.re-icon.icon-map,
#footer ul.footer-menu li a span.re-icon.icon-map {
    background-image: url('../img/icons/icon-map.svg');
    background-color: #FFF;
    background-size: 65%;
    margin: 0px;
}

span.re-icon.icon-home,
#footer ul.footer-menu li a span.re-icon.icon-home {
    background-image: url('../img/icons/icon-home.svg');
    background-color: #FFF;
    background-size: 75%;
    margin: 0px;
}

span.re-icon.icon-clear {
    background-image: url('../img/icons/icon-clear.svg');
    background-color: #FFF;
    background-size: 65%;
    margin: 0px;
}
.map-viewer span.re-icon.icon-clear {
    margin-top: -6px;
    margin-right: -6px;
}

#footer ul.footer-menu li a span.re-icon.icon-referenzen {
    background-color: var(--color-rem-red-dark);
    background-image: url('../img/icons/icon-leuchtturm.svg');
    background-size: contain;
}

#footer ul.footer-menu li a span.re-icon.icon-wasser {
    background-color: var(--color-rem-blue);
    background-image: url('../img/icons/wasser_neu.svg');
    background-size: 95%;
}

#footer ul.footer-menu li a span.re-icon.icon-service {
    background-color: var(--color-rem-yellow);
    background-image: url('../img/icons/service_neu.svg');
    background-size: 95%;
}

#footer ul.footer-menu li a span.re-icon.icon-recycling {
    background-color: var(--color-rem-green);
    background-image: url('../img/icons/recycling_neu.svg');
    background-size: 95%;
}

@media screen and (min-width: 400px) {
    #footer ul.footer-menu li:last-of-type {
        display: initial;
    }
}

@media screen and (min-width: 576px) {
    #footer ul.footer-menu li a span.re-icon {
        margin: 10px auto 15px;
    }

    #footer ul.footer-menu li a span.label {
        display: initial;
    }
}

@media screen and (min-width: 640px) {
    #footer ul.footer-menu li {
        width: initial;
    }
}

@media screen and (min-width: 768px) {
    span.re-icon,
    #footer ul.footer-menu li a span.re-icon {
        width: 60px;
        height: 60px;
    }
    #footer ul.footer-menu li a span.re-icon {
        margin: 10px 15px 15px;
    }
}

@media screen and (min-width: 1920px) {
    #footer ul.footer-menu li {
        padding: 15px;
        font-size: inherit;
    }

    #footer ul.footer-menu li a span.re-icon {
        width: 80px;
        height: 80px;
    }
}
/*
------------------------------------------------------------------------------------------------
...
------------------------------------------------------------------------------------------------
*/
#oepp-map g.tippy-referenz circle:nth-of-type(1) {
    fill: var(--color-rem-red-dark);
    transition: fill 0.2s ease-in-out;
}

#oepp-map g.tippy-referenz[aria-expanded="true"] circle:nth-of-type(1) {
    fill: var(--color-rem-red);
}

#oepp-map g.tippy-referenz circle:nth-of-type(2),
#oepp-map g.tippy-referenz circle:nth-of-type(3) {
    stroke: var(--color-rem-anthrazit-light);
    opacity: 0;
    stroke-width: 0;
    r: 35;
}

#oepp-map g.tippy-referenz circle:nth-of-type(2),
#oepp-map g.tippy-referenz.zoom circle:nth-of-type(2) {
    animation: pulse-circle-1 4s ease-in-out 0s infinite;
}

#oepp-map g.tippy-referenz circle:nth-of-type(3),
#oepp-map g.tippy-referenz.zoom circle:nth-of-type(3) {
    animation: pulse-circle-1 4s ease-in-out 2s infinite;
}

#oepp-map g.tippy-referenz.zoom[aria-expanded="true"] circle:nth-of-type(2),
#oepp-map g.tippy-referenz.zoom[aria-expanded="true"] circle:nth-of-type(3),
#oepp-map g.tippy-referenz[aria-expanded="true"] circle:nth-of-type(2),
#oepp-map g.tippy-referenz[aria-expanded="true"] circle:nth-of-type(3) {
    animation: none;
    opacity: 0;
}

#oepp-map g.tippy-referenz.zoom[aria-expanded="true"] circle:nth-of-type(2),
#oepp-map g.tippy-referenz[aria-expanded="true"] circle:nth-of-type(2) {
    animation: pulse-circle-2 2s ease-in-out 0s infinite;
    opacity: 1;
}

@keyframes pulse-circle-1 {
    0% {
        opacity: 1;
        stroke-width: 0;
        r: 30;
    }

    100% {
        opacity: 0;
        stroke-width: 30;
        r: 45;
    }
}

@keyframes pulse-circle-2 {
    0% {
        stroke-width: 20;
        r: 40;
        opacity: 1;
    }

    50% {
        stroke-width: 22;
        r: 41;
        opacity: 0.5;
    }

    100% {
        stroke-width: 20;
        r: 40;
        opacity: 1;
    }
}
/*
------------------------------------------------------------------------------------------------
Screensaver
------------------------------------------------------------------------------------------------
*/
body.home .station-container {
    display: none !important;
}

@media screen and (min-width: 1000px) and (min-height: 1900px) and (max-aspect-ratio: 3/4) {
    body.home .station-container {
        display: flex !important;
    }
}

.screensaver-container,
#screensaver.screensaver-container {
    --screensaver-bg-color: var(--color-rem-anthrazit-lightest);

    width: 100%;
    height: 100vH;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--screensaver-bg-color);
    z-index: 9999;
}

.screensaver-container .screensaver-inner,
#screensaver .screensaver-inner {
    height: 100%;
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    flex-flow: column;
    padding-top: 30%;
}

.screensaver-container .station-container,
#screensaver .station-container {
    width: 100%;
    display: flex;
    flex-flow: column;
}

.screensaver-container .station,
#screensaver .station {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    /*margin-top: -15%;*/
}

.screensaver-container .station .station-outer,
#screensaver .station .station-outer {
    background-color: var(--screensaver-bg-color);
    width: 260px;
    border-radius: 120px;
    height: 560px;
    padding: 30px;
    position: relative;
    z-index: 2;
}

.screensaver-container .station .station-inner,
#screensaver .station .station-inner {
    border: 30px solid var(--color-rem-anthrazit-dark);
    background-color: #FFFFFF;
    width: 200px;
    border-radius: 100px;
    height: 100%;
}

.screensaver-container .station .station-lines,
#screensaver .station .station-lines {
    width: 100%;
    position: absolute;
    background-color: var(--color-rem-green);
    height: 30px;
    top: 50%;
    z-index: 1;
}

.screensaver-container .station .station-lines::before,
#screensaver .station .station-lines::before {
    content: "";
    height: 30px;
    background-color: var(--color-rem-yellow);
    width: 100%;
    position: relative;
    top: -90px;
    display: block;
}

.screensaver-container .station .station-lines::after,
#screensaver .station .station-lines::after {
    content: "";
    height: 30px;
    background-color: var(--color-rem-blue);
    width: 100%;
    position: relative;
    top: 60px;
    display: block;
}

.screensaver-container .station-label-container,
#screensaver .station-label-container {
    position: relative;

    --font-size: calc(2*(1.375rem + 2.5vw));
    --font-size: 100px;

    white-space: nowrap;
}

.screensaver-container .station-label,
#screensaver .station-label {
    position: absolute;
    right: 50%;
}

.screensaver-container .station-label h1,
#screensaver .station-label h1 {
    text-align: right;
    margin: 0;
    transform: rotate(-45deg);
    transform-origin: center right;
}

.screensaver-container .station-label h1 span,
#screensaver .station-label h1 span {
    display: block;
    font-size: calc(var(--font-size) - 20px);
    line-height: calc(var(--font-size) - 20px);
}

.screensaver-container .station-label h1 span.line1,
#screensaver .station-label h1 span.line1 {
    font-weight: bold;
    font-size: var(--font-size);
    line-height: var(--font-size);
}

.screensaver-container .station-label h1 span.line2,
#screensaver .station-label h1 span.line2 {
    transform: translate(var(--font-size), 0);
}

.screensaver-container .station-label h1 span.line3,
#screensaver .station-label h1 span.line3 {
    transform: translate(calc(var(--font-size) + var(--font-size) - 20px), 0);
}

.screensaver-container .screensaver-touch-me,
#screensaver .screensaver-touch-me {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    top: 0;
}

.screensaver-container .screensaver-touch-me,
#screensaver .screensaver-touch-me {
    padding-bottom: 120px;
}

.screensaver-container .screensaver-touch-me .circle-touch,
#screensaver .screensaver-touch-me .circle-touch {
    background-color: var(--color-rem-anthrazit-light);
    width: 160px;
    height: 160px;
    margin: auto;
    border-radius: 150px;
    position: relative;
    background-image: url('../img/icons/touchme.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200%;
}

.screensaver-container .screensaver-touch-me .circle-touch::before,
.screensaver-container .screensaver-touch-me .circle-touch::after,
#screensaver .screensaver-touch-me .circle-touch::before,
#screensaver .screensaver-touch-me .circle-touch::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--color-rem-anthrazit-dark);
    z-index: -1;
    border-radius: 50%;
    opacity: 0.7;
}

.screensaver-container .screensaver-touch-me .circle-touch::before,
#screensaver .screensaver-touch-me .circle-touch::before {
    animation: touchpulse 3s ease-out infinite;
}

.screensaver-container .screensaver-touch-me .circle-touch::after,
#screensaver .screensaver-touch-me .circle-touch::after {
    animation: touchpulse 3s 1.5s ease-out infinite;
}

@keyframes touchpulse {
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
/*
------------------------------------------------------------------------------------------------
Referenzen Karte Infobox
------------------------------------------------------------------------------------------------
*/
.tippy-box {
    background-color: initial;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: #FFFFFF;
    box-shadow: 0 1px 15px rgb(0 0 0 / 10%);
}

.tippy-content {
    padding: 0;
}

.tippy-box[data-theme~='material']>.tippy-arrow::before {
    transform: scale(1.5);
}

.tippy-box[data-theme~='material'][data-placement^='top']>.tippy-arrow::before {
    border-top-color: #FFF;
}

.tippy-box[data-theme~='material'][data-placement^='bottom']>.tippy-arrow::before {
    border-bottom-color: #FFF;
}

.tippy-box[data-theme~='material'][data-placement^='left']>.tippy-arrow::before {
    border-left-color: #FFF;
}

.tippy-box[data-theme~='material'][data-placement^='right']>.tippy-arrow::before {
    border-right-color: #FFF;
}

.referenz-infobox .image {
    max-width: 200px;
}

g:focus {
    outline: none !important;
}
/*
------------------------------------------------------------------------------------------------
Downloads Form
------------------------------------------------------------------------------------------------
*/
.fair-header {
    background: #E2001A;
    color: #FFF;
}

.fair-header #site-title img {
    height: 45px;

}

.fair-form {
    border-bottom: 3px solid #E6E7E8;
}

.fair-form .required {
    color: #E2001A;
}

.fair-form-submit {
    box-shadow: 0 1px 15px rgb(0 0 0 / 10%);
    background: #FFF;
    overflow: hidden;
    z-index: 99;
    flex: 0 0 auto;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

.fair-form-submit input[type="submit"] {
    background: #E2001A;
    border-radius: 3px;
    border-bottom: 3px solid #E2001A;
    color: #FFF;
    font-size: 24px;
    text-align: center;
    border: none !important;
    width: 100%;
    padding: 5px 10px;
}

.dl-list-solution {
    list-style: none;
    margin-left: 40px;
    padding-left: 0px;
}

.dl-list-solution-files li {
    position: relative;
    display: inline-block;
}

.dl-list-solution-files {
    list-style: none;
    padding-left: 50px;
    display: none;
}

.dl-list-solution>li:before {
    content: "";
    display: inline-block;
    border: 4px solid #E7E4E3;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    position: absolute;
    top: 2px;
    left: -40px;
}

.dl-list-solution>li:after {
    content: "";
    display: inline-block;
    background: #FFF;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 9px;
    left: -33px;
}

.dl-list-solution>li.is-set:before {
    border: 4px solid #E2001A;
}

.dl-list-solution>li.is-set:after {
    background: #E2001A;
}

.dl-list-solution-files li:before {
    content: "PDF";
    color: #E7E4E3;
    display: inline-block;
    position: absolute;
    left: -50px;
    top: 3px;
    font-weight: bold;
    line-height: 1;
}

.dl-list-solution-files li.Link:before {
    content: "LINK";
}


.dl-list-solution-files li.vcard:before {
    content: "VCF";
}

.dl-list-solution-files li.is-set li:before {
    color: #E2001A;
}

.wpcf7-not-valid-tip {
    color: #E2001A;
    font-size: 17px;
    padding: 5px 10px;
    font-weight: normal;
    display: block;
}

.subline {
    margin-bottom: 0px;
}

.is-set .subline {
    margin-bottom: 15px;
}

.color-antrazit {
    color: #747784;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 7.5px 0;
    cursor: pointer;
    position: relative;
}

.checkbox-container input {
    display: none;
}

.checkbox-container .content {
    margin-left: 40px;
}

.custom-checkbox {
    width: 26px;
    height: 26px;
    border: 4px solid #E7E4E3;
    border-radius: 50%;
    /* Kreisform */
    flex-shrink: 0;
    position: absolute;
    display: inline-block;
    top: 0px;
    transition: border-color 0.2s, background-color 0.2s;
}

.checkbox-container input:checked+.custom-checkbox {
    border-color: #d6001c;
}

.checkbox-container input:checked+.custom-checkbox:before {
    background: #E2001A;
    content: "";

}

.checkbox-container input:checked+.custom-checkbox::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: #E2001A;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
}

.checkbox-container:has(input:checked) .dl-list-solution-files {
    display: flex;
}

.checkbox-container:has(input:checked) .dl-list-solution-files li:before,
.checkbox-container:has(input:checked) .dl-list-solution-files li.vcard:before {
    color: #E2001A;
}

.content {
    display: inline-block;
    line-height: 1.3;
}

.smaller,
small {
    font-size: 0.875rem;
    color: #555;
    line-height: 1;
}
/*
------------------------------------------------------------------------------------------------
PDF VIEWER IFRAME
------------------------------------------------------------------------------------------------
*/
#pdf-canvas {
    width: 100%;
    height: calc(100vh - 3rem);
    background: #f1f1f1;
    overflow: hidden;
}

#pdf-nav {
    top: -18px;
    right: 30px;
}

body.page-template-page-pdf-viewer .menu-item-object-referenz,
body.page-template-page-pdf-viewer .menu-item-object-category {
    display: none !important;
}

body.page-template-page-pdf-viewer #container {
    background: #f1f1f1;
}

body.page-template-page-pdf-viewer main#content {
    background: #f1f1f1 !important;
}

body.page-template-page-pdf-viewer .fancybox__backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
}

.pdf-nav-bar li {
    padding: 15px 7.5px;
}

.pdf-nav-bar li span.icon-btn {
    width: 60px;
    height: 60px;
    display: block;
    background: #f0f0f0;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
    margin: 10px 15px 10px
}

.pdf-nav-bar li span img {
    text-align: center;
    height: 45px;
}

.pdf-nav-bar li span.pdf-total {
    padding: 7.5px;
}

.pdf-nav-bar li span.pdf-total img {
    text-align: center;
    height: 40px;
}

.pdf-nav-bar li span.label {
    display: inline-block;
    font-size: medium;
}

body.page-template-page-pdf-viewer .menu-footermenue-container {
    padding: 20px 0px;
}

.qr-code-container {
    background: #f0f0f0 !important;
}

#pdf-container {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    cursor: grab;
}

#pdf-container.dragging {
    cursor: grabbing;
    user-select: none;
}

.block-line {
    display: block;
    line-height: 1.3;
}

.icon-btn-download {
    background: var(--color-rem-red) !important;
}

.contact-info {
    color: var(--color-rem-red);
}

.wpcf7-form .wpcf7-spinner {
    position: absolute;
    right: 2rem;
    /* Abstand zum Buttonrand */
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    /* Standard-Margin entfernen */
}

.wpcf7-form input[type="submit"] {
    position: relative;
    padding-right: 2.5rem;
}

.fancybox__backdrop {
    background: rgba(0, 0, 0, 0.7);
}

form.sent {
    display: none;
}

.electron-app .hide-on-local {
    display: none !important;
}

.electron-app .disable-on-local {
    pointer-events: none !important;
}

.show-on-local {
    display: none !important;
}

.electron-app .show-on-local {
    display: inline-block !important;
}

.success-screen {
    display: none !important;
}

.form-sent .success-screen {
    display: block !important;
}

.wpcf7 form.sent {
    display: none !important;
}
/*
------------------------------------------------------------------------------------------------
Keyboard
------------------------------------------------------------------------------------------------
*/
.simple-keyboard {
    height: 330px;
}

.simple-keyboard .hg-button {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
}
/*
------------------------------------------------------------------------------------------------
ChangeRequests: FormNav
------------------------------------------------------------------------------------------------
*/
#pills-recycling-tab {
    background-color: var(--color-rem-green-20);
    border: 1px solid var(--color-rem-green);
}

#pills-recycling-tab.active {
    background-color: var(--color-rem-green);
}

#pills-service-tab {
    background-color: var(--color-rem-yellow-20);
    border: 1px solid var(--color-rem-yellow);
}

#pills-service-tab.active {
    background-color: var(--color-rem-yellow);
}

#pills-wasser-tab {
    background-color: var(--color-rem-blue-20);
    border: 1px solid var(--color-rem-blue);
}

#pills-wasser-tab.active {
    background-color: var(--color-rem-blue);
}

.fair-downloads .nav-item {
    margin-right: 10px;
}

.fair-downloads .nav-item button {
    color: var(--color-rem-anthrazit);
    padding: 0.75rem 1.5rem;
    border-radius: 3px;
}

.category-content button.read-more {
    border: none;
    background: #FFF;
    color: var(--color-rem-red);
    font-weight: bold;
}

@media (max-width: 1020px) {
    .category-content .text-content {
        position: relative;
        overflow: hidden;
        height: 180px;
        transition: all 0.15s ease-in-out;
    }

    .category-content .text-content.readmore {
        height: fit-content !important;
        overflow: visible !important;
    }

    .category-content .text-content:not(.readmore):before {
        content: "";
        height: 100%;
        position: absolute;
        background: linear-gradient(180deg, transparent 0 50%, transparent 50%, #FFF 100%);
        width: 100%;
    }

    .category-service .page-heading .text-content:not(.readmore):before {
        background: linear-gradient(180deg, transparent 0 50%, transparent 50%, var(--color-rem-yellow) 100%);
    }

    .category-service .page-heading button.read-more {
        border: 2px solid #FFF;
        background: var(--color-rem-yellow) !important;
        color: #FFF;
    }

    .category-wasser .page-heading .text-content:not(.readmore):before {
        background: linear-gradient(180deg, transparent 0 50%, transparent 50%, var(--color-rem-blue) 100%);
    }

    .category-wasser .page-heading button.read-more {
        border: 2px solid #FFF;
        background: var(--color-rem-blue) !important;
        color: #FFF;
    }

    .category-recycling .page-heading .text-content:not(.readmore):before {
        background: linear-gradient(180deg, transparent 0 50%, transparent 50%, var(--color-rem-green) 100%);
    }

    .category-recycling .page-heading button.read-more {
        border: 2px solid #FFF;
        background: var(--color-rem-green) !important;
        color: #FFF;
    }
}
/*
------------------------------------------------------------------------------------------------
MAP Markup
------------------------------------------------------------------------------------------------
*/
:root {
    --fancybox-zIndex: 10100;
}
.fancybox__container {
    z-index: 10100 !important;
}

.map-teaser.is-opening .map-teaser__overlay {
    opacity: 0;
}
/*
------------------------------------------------
Map Viewer / Map Stage
------------------------------------------------
*/
.map-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
}
.map-viewer.is-visible {
    visibility: visible;
    pointer-events: auto;
}

.map-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    opacity: 0;
    transition: opacity .15s ease;
}
.map-viewer.is-visible .map-viewer__backdrop {
    opacity: 1;
}

.map-viewer__stage {
    display: grid;
    grid-template-rows: 1fr;
    height: 100%;
}
/*
------------------------------------------------
Map Viewer / Map Stage - Header
------------------------------------------------
*/
.map-viewer .site-header {
    position: absolute;
    left: 0;
    right: 0;

    background-color: transparent;
    pointer-events: none;
}
.map-viewer .site-header .site-branding {
    background-color: #f2f2f2;
    background-color: transpa_rent;
}

.map-viewer .navbar-toggler .navbar-toggler-icon:before {
    transform: rotate(45deg) translateY(0);
}
.map-viewer .navbar-toggler .navbar-toggler-icon:after {
    transform: rotate(-45deg) translateY(0);
}
.map-viewer .navbar-toggler:hover .navbar-toggler-icon:before,
.map-viewer .navbar-toggler:hover .navbar-toggler-icon:after {
    background-color: #000000;
}

.map-viewer .navbar-toggler {
    display: none;
}
.map-viewer.is-visible .navbar-toggler {
    display: flex;
}

.map-viewer .site-header .btn {
    pointer-events: auto;
}
/*
------------------------------------------------
Map Area
------------------------------------------------
*/
.map-viewer__map-area {
    position: relative;
    background: #f2f2f2;
    touch-action: none;
    height: 100vH;
}

.map-viewer__map-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0px;
    transition: grid-template .38s cubic-bezier(0.22, 1, 0.36, 1);
}
.map-viewer.has-active-station .map-viewer__map-area {
    grid-template-columns: minmax(0, 1fr) 85vw;
}

@media screen and (min-width: 480px) {
    .map-viewer.has-active-station .map-viewer__map-area {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}
@media screen and (min-width: 1200px) {
    .map-viewer.has-active-station .map-viewer__map-area {
        grid-template-columns: minmax(0, 1fr) 500px;
    }
}

.map-viewer.has-active-station.is-panel-collapsed .map-viewer__map-area {
    grid-template-columns: minmax(0, 1fr) 0px;
}

/* Tablets im Hochformat (992-1199px): Bottom-Panel statt Side-Panel */
/* @media (min-width: 992px) and (max-width: 1199px) {
} */

/* Tablet */
/*
@media (orientation: portrait)
  and (min-width: 600px)
  and (max-width: 1024px)
  and (pointer: coarse)
  and (hover: none) {

}
*/
@media (min-width: 600px)
  and (max-width: 1200px) {
    .map-viewer__map-area {
        grid-template-columns: none !important;
        grid-template-rows: minmax(0, 1fr) 0px;
    }
    .map-viewer.has-active-station .map-viewer__map-area {
        grid-template-rows: minmax(0, 1fr) 45vh;
    }
    .map-viewer.has-active-station.is-panel-collapsed .map-viewer__map-area {
        grid-template-rows: minmax(0, 1fr) 0px;
    }
}
/*
------------------------------------------------
Map Area / Map
------------------------------------------------
*/
.map-viewer__svg {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .25s ease;
}

.map-viewer.is-map-loaded .map-viewer__svg {
    opacity: 1;
}

.map-viewer__svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

.map-viewer__svg [id^="loesung_"],
.map-viewer__svg .station_link {
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity .2s ease, filter .3s ease;
}

.map-viewer__svg [id^="loesung_"]:hover,
.map-viewer__svg [id^="loesung_"]:focus,
.map-viewer__svg [id^="loesung_"].is-active,
.map-viewer__svg .station_link:hover,
.map-viewer__svg .station_link:focus,
.map-viewer__svg .station_link.is-active {
    opacity: 1;
}

.map-viewer.has-active-station .map-viewer__svg [id^="loesung_"]:not(.is-active):not(.is-linked) g[id^="label"],
.map-viewer.has-active-station .map-viewer__svg .station_link:not(.is-active):not(.is-linked) {
    /* filter: grayscale(0.7); */
    opacity: 0.3;
}

.map-viewer.has-active-station .map-viewer__svg [id^="loesung_"]:not(.is-active):not(.is-linked) g[isolation="isolate"],
.map-viewer.has-active-station .map-viewer__svg .station_link:not(.is-active):not(.is-linked) g[isolation="isolate"] {
    opacity: 0.55;
}
/*
------------------------------------------------
Map Panel
------------------------------------------------
*/
.map-viewer__panel {
    background: #FFFFFF;
    box-shadow: 0 0 10px rgb(0 0 0 / .1);
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s;
    position: relative;
    z-index: 999;
    height: 100vH;
}

.map-viewer.has-active-station .map-viewer__panel {
    transform: translateX(0);
    pointer-events: auto;
}
.map-viewer.has-active-station.is-panel-collapsed .map-viewer__panel {
    transform: translateX(100%);
}

/* Tablet */
@media (min-width: 600px)
  and (max-width: 1200px) {
    .map-viewer__panel {
        box-shadow: 0 0 10px rgb(0 0 0 / .1);
        transform: translateY(100%);
        height: 100%;
    }
    .map-viewer.has-active-station .map-viewer__panel {
        transform: translateY(0);
    }
    .map-viewer.has-active-station.is-panel-collapsed .map-viewer__panel {
        transform: translateY(100%);
    }
}

.map-viewer .map-viewer__panel-inner {
    overflow: hidden;
    height: 100%;
    background: #FFF;
    position: relative;
    z-index: 99;
}

.map-viewer.has-active-station .map-viewer__panel-inner {
    opacity: 1;
    transition: opacity 0.22s ease 0.18s;
}

.map-viewer .map-viewer__content {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.map-viewer .map-viewer__content::before {
    content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      display: block;
      padding-top: 3rem;
      background: #fff;
      margin-left: 1.5rem;
    margin-right: 1.5rem;
    z-index: 1
}
/*
------------------------------------------------
Map Panel Toggle
------------------------------------------------
*/
.map-viewer__panel-toggle {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    z-index: 10;
    width: 28px;
    height: 64px;
    border: 0;
    border-radius: 6px 0 0 6px;
    background: #fff;
    box-shadow: -3px 0 8px rgb(0 0 0 / .15);
    color: #555;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: right .38s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s, color 0.15s;
}

.map-viewer.has-active-station .map-viewer__panel-toggle {
    display: flex;
}

.map-viewer.has-active-station .map-viewer__panel-toggle svg {
    transform: rotate(180deg);
    transition: transform .38s cubic-bezier(0.22, 1, 0.36, 1);
}

.map-viewer.has-active-station.is-panel-collapsed .map-viewer__panel-toggle svg {
    transform: rotate(0deg);
}

.map-viewer__panel-toggle:hover {
    background: #f5f5f5;
    color: #222;
}

/* Tablet */
@media (min-width: 600px)
  and (max-width: 1200px) {
    .map-viewer__panel-toggle {
        top: 0;
        left: 50%;
        height: 28px;
        width: 64px;
        transform: translateY(-100%) translateX(-50%);
        border-radius: 6px 6px 0 0;
        box-shadow: 0 -3px 8px rgb(0 0 0 / .15);
    }
    .map-viewer.has-active-station .map-viewer__panel-toggle svg {
        transform: rotate(-90deg);
    }
    .map-viewer.has-active-station.is-panel-collapsed .map-viewer__panel-toggle svg {
        transform: rotate(90deg);
    }
}
/*
------------------------------------------------
...
------------------------------------------------
*/
@media screen and (min-width: 576px) {
    .map-station-panel .leistungsportfolio ul {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

/* Tablet */
@media (min-width: 600px)
  and (max-width: 1200px) {
    .map-station-panel .referenz-col {
        width: 50% !important;
    }
}

.map-station-panel .divider hr {
    border-color: rgba(190, 191, 193, 1);
}
/*
------------------------------------------------
...
------------------------------------------------
*/
.map-station-fab {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 999;
}
.map-station-fab a {
    box-shadow: 0 0 10px 10px rgb(255 255 255 / .50);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
/*
------------------------------------------------
...
------------------------------------------------
*/
.map-transition-clone {
    position: fixed;
    z-index: 10001;
    overflow: hidden;
    background-color: #f2f2f2;
    will-change: top, left, width, height, border-radius, opacity;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
/*
------------------------------------------------------------------------------------------------
Skeleton Loading
------------------------------------------------------------------------------------------------
*/
@keyframes map-skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.map-skeleton {
    pointer-events: none;
}

.map-skeleton__title,
.map-skeleton__text,
.map-skeleton__image,
.map-skeleton__line,
.map-skeleton__thumb {
    background: linear-gradient(90deg, #ebebeb 25%, #d6d6d6 50%, #ebebeb 75%);
    background-size: 1200px 100%;
    animation: map-skeleton-shimmer 1.4s infinite linear;
    border-radius: 4px;
}

.map-skeleton__title {
    height: 26px;
    width: 70%;
    margin-bottom: 1rem;
}

.map-skeleton__text {
    height: 14px;
    width: 100%;
    margin-bottom: 0.5rem;
}

.map-skeleton__text--short {
    width: 55%;
    margin-bottom: 1.5rem;
}

.map-skeleton__image {
    height: 160px;
    width: 100%;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.map-skeleton__line {
    height: 13px;
    width: 100%;
    margin-bottom: 0.5rem;
}

.map-skeleton__line--short {
    width: 40%;
    margin-bottom: 1.5rem;
}

.map-skeleton__gallery {
    display: flex;
    gap: 10px;
    margin-top: 0.5rem;
}

.map-skeleton__thumb {
    flex: 1;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
}