/*------------------------------------*\
    #00 SETTINGS
\*------------------------------------*/
@import url('theme/00-settings/settings.variables.css');
@import url('theme/00-settings/settings.fonts.css');



/*------------------------------------*\
    #01 TOOLS
\*------------------------------------*/
@import url('phucstrap/01-tools/tools.modularscale.css');



/*------------------------------------*\
    #02 GENERIC
\*------------------------------------*/
@import url('phucstrap/02-generic/generic.normalize.css');
@import url('phucstrap/02-generic/generic.custom.css');



/*------------------------------------*\
    #03 ELEMENTS
    styling elements without classes
\*------------------------------------*/
@import url('phucstrap/03-elements/element.headings.css');
@import url('phucstrap/03-elements/element.text.css');
@import url('phucstrap/03-elements/element.form.css');



/*------------------------------------*\
    #04 OBJECTS
    Class Level Specificity
    e.g Grid
\*------------------------------------*/
@import url('phucstrap/04-objects/object.typography.css');

@import url('phucstrap/04-objects/object.layout.css');
@import url('phucstrap/04-objects/object.burger.css');
@import url('phucstrap/04-objects/object.nav.css');



/*------------------------------------*\
    #05 COMPONENTS
    e.g Buttons, Navigation, Carousels
\*------------------------------------*/
@import url('phucstrap/05-components/component.nav.css');
@import url('theme/05-components/component.buttons.css');
@import url('theme/05-components/component.header.css');


/*------------------------------------*\
    #06 UTILITIES
    e.g hacks or ie11 styles
\*------------------------------------*/
@import url('phucstrap/06-utilities/utilities.display.css');
@import url('phucstrap/06-utilities/utilities.typography.css');
@import url('phucstrap/06-utilities/utilitites.img.css');
@import url('phucstrap/06-utilities/utilities.wordpress.css');
@import url('phucstrap/06-utilities/utilities.colors.css');

@import url('theme/06-utilities/utility.ie11.css');
@import url('assets/magnific-popup.css');

/*------------------------------------*\
  BODY SIDEBAR LEFT
\*------------------------------------*/

.body--sidebar {
    grid-template-rows: auto 1fr auto;
}

@media all and (min-width: 768px) {
    .body--sidebar {
        display: flex;
        position: relative;
    }

    @supports (display: grid) {
        .body--sidebar {
            display: grid;
            grid-template-areas: 
              "header main"
              "header footer"
            ;
            grid-template-rows: 1fr auto;
            grid-template-columns: auto 1fr;
          }
    }
}


body {
    color: var(--color-2);
}

.main {
    overflow: hidden;
}

@media all and (min-width: 768px) {
    .main {
        margin-left: var(--gutter);
    }
}

.slider_container {
    width: 100%;
    position: relative;
  }
  
.width--100 {
    width: 100%;
  }

.letter-spacing {
    letter-spacing: .02em;
}

/*------------------------------------*\
    #HEADER
\*------------------------------------*/

.header {
    position: relative;
    background-color: var(--color-1);
    z-index: 1000;
}

@supports (display: grid) {
    .header__item--meta {
        display: grid;
        grid-template-columns: auto 1fr;
        background-color: var(--color-white);
        grid-gap: var(--gutter);
        border-top: var(--gutter) solid var(--color-white);
    }
}

/* MOBILE */
@media all and (max-width: 767px) {
    .header {
        margin-bottom: calc(var(--gutter) * 1);
    }

    .header__content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        
    }

    .header__item--logo {
        padding: calc(var(--gutter) * 1);
    }

    .header__item--logo, 
    .burger__label {
        width: auto;
    }

    .header__item--nav,
    .header__item--meta {
        display: none;
    }

    .burger__input:checked ~ .header__content .header__item--nav {
        display: block;
    }

    .burger__input:checked ~ .header__content .header__item--meta {
        display: grid;
    }
}

/* DESKTOP */
@media all and (min-width: 768px) {

    .header__content {
        min-height: 100vh;
        position: sticky;
        top: 0;

        display: grid;
        grid-template-rows: auto 1fr auto;

    }
    
    .header__item {
        width: 100%;
    }

    .header__item--logo {
        padding: 55px;
        padding-bottom: 30px;
        border-bottom: var(--gutter) solid var(--color-white);
    }
	
	.header__content.no-sticky {
		position: static;	
	}
}



.open-up .sub-menu {
	top: auto;
	bottom: 0;
}



.header__item--logo a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.header__share {
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: var(--color-white);
}

.header__share a {
    color: inherit;
}

.header__share,
.header__search {
    padding: var(--gutter) calc(var(--gutter) * 2);
    background-color: var(--color-2);
}



/*------------------------------------*\
  $SEARCH
\*------------------------------------*/

.block--search {
  background-color: transparent;
}

.block--search  .block__input {
  background-color: transparent;
  border: none;
  padding-left: calc(var(--gutter) * .25);
  color: var(--color-3);
}

.block--search  .block__button {
  background-color: transparent;
  border: none;
  color: var(--color-white);
  padding: 0 calc(var(--gutter) * .75);

  appearance: none;
  -webkit-appearance: none;
}

/*------------------------------------*\
    #DESCRIPTION
\*------------------------------------*/
.description > *:first-child {
    margin-top: 0;
}

.description > *:not(first-child) {
    margin-top: var(--gutter-description);
}

/*------------------------------------*\
    #CONTAINER
\*------------------------------------*/
.wp-block-cgb-block-my-block {
    margin: 0 auto;
    max-width: var(--max-width-2);
    /*width: 100%;*/

    padding-left: var(--gutter);
    padding-right: var(--gutter);
    box-sizing: content-box;
}

.wp-block-cgb-block-my-block .wp-block-cgb-block-my-block {
    margin: initial;
    max-width: none;
    width: initial;
}



.wp-block-cgb-block-my-block > * {
    padding-left: 0 !important;
    padding-right: 0 !important;

    margin: initial !important;
    max-width: none !important;
}

/*------------------------------------*\
    #ARROW ICON
\*------------------------------------*/
.iconprefix {
    position: relative;
    padding-left: calc(var(--gutter) * 6);
}

.iconprefix::before {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none; 
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\e900";
    padding-right: var(--gutter);
    color: var(--color-1);
    font-size: 1.5em;
    margin-top: .125em;

    position: absolute;
    left: 0;
}

.iconprefix--grey::before {
    color: var(--color-2);
}

.iconprefix--small {
    padding-left: calc(var(--gutter) * 3);
}

.iconprefix--small::before {
    padding-right: .25em;
    padding-left: .5em;
    font-size: .8em;
    margin-top: .325em;
}

.iconprefix--white {
    padding-left: calc(var(--gutter) * 9);
}

.iconprefix--white::before {
    color: var(--color-white);
    padding-left: calc(var(--gutter) * 3);
}

.iconprefix--big::before {
    font-size: 2em;
    margin-top: .5em;
}

.iconprefix--hidden::before {
    color: transparent;
}

.iconprefix--up::before {
    transform: rotate(-90deg) scale(.9) translate(20%,20%);
}

.iconprefix--white-2::before {
    color: var(--color-white);
}


/*------------------------------------*\
    #BACK TO TOP
\*------------------------------------*/
.btn--back2top {
    position: fixed;
    bottom: calc( var(--gutter) * 5 );
    right: var(--gutter);
}

@media all and (min-width: 768px) {
    .btn--back2top {
        bottom: calc( var(--gutter) * 3.5 );
        right: calc( var(--gutter) * -.5 );
    }
}

/*------------------------------------*\
    #DESCRIPTION COLUMNS
\*------------------------------------*/
@media all and (min-width: 768px) {

    .column-2 {
      column-count: 2;
      column-gap: calc(var(--gutter) * 1);
    }

    .column-2 > * {
        padding-right: calc(var(--gutter) * 2);
    }

    .column-2 > * > * {
        page-break-inside: avoid; 
    }

    .column-3 {
      column-count: 3;
      column-gap: calc(var(--gutter) * 1);
    }

    .column-3 > * {
      padding-right: calc(var(--gutter) * 2);
    }

}


/*------------------------------------*\
    $BUTTONS
\*------------------------------------*/

.btn {
    text-decoration: none;
    color: inherit;
}

:root {
    --btn-padding-left: .5em;
}

.btn--color-1 {
    background-color: var(--color-1);
}

.btn--padding {
    padding-left: var(--btn-padding-left);
    padding-right: var(--btn-padding-left);
    padding-top: .5em;
    padding-bottom: .25em;
}

.btn--arrow {
    position: relative;
}

.btn--arrow::before {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    content: "\e900";
  
    padding-right: .25em;
    font-size: .7em;

    transform: translate(-100%, .35em);
}

.arrow-only {
	position: relative;
}

.arrow-only::before {
	position: absolute;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    content: "\e900";
  
    padding-right: .25em;
    font-size: 1.5em;

}

.btn--arrow.btn--arrow-reverse::before {
    display: inline-block;
    content: "\e900";
    transform: rotate(180deg) translateY(.1em);
    padding-left: .25em;
}


.padding-left--custom {
    padding-left: calc(var(--gutter) * 6);
}

.padding-right--custom {
    padding-right: calc(var(--gutter) * 6);
}

.margin-left--custom {
    margin-left: calc(var(--gutter) * 1);
}

.margin-right--custom {
    margin-right: calc(var(--gutter) * 1);
}

@media all and (min-width: 768px) {
    .margin-left--custom {
        margin-left: calc(var(--gutter) * 6);
    }

    .margin-right--custom {
        margin-right: calc(var(--gutter) * 6);
    }
}
/*------------------------------------*\
    $BUTTON YELLOW
\*------------------------------------*/
.btn--yellow {
    background-color: var(--color-1);
    color: var(--color-2);
}

.btn--yellow:hover {
    background-color: var(--color-1);
    color: var(--color-white);
}

.btn--yellow:hover::before {
    color: var(--color-white);
}
/*------------------------------------*\
    $BUTTON WHITE
\*------------------------------------*/

.btn--white {
    /* padding-left: var(--gutter);
    padding-top: calc(var(--gutter) * .5);
    padding-right: calc(var(--gutter) * 2); */
    background-color: var(--color-white);
    color: var(--color-2);
}

.btn--white:hover,
.btn--white:hover::before {
    color: var(--color-1);
}

/*------------------------------------*\
    $BUTTON GRAY
\*------------------------------------*/

.btn--gray {
    /* padding-left: var(--gutter);
    padding-top: calc(var(--gutter) * .5);
    padding-right: calc(var(--gutter) * 2); */
    background-color: var(--color-2);
    color: var(--color-white);
}

.btn--gray:hover,
.btn--gray:hover::before {
	background-color: var(--color-white);
	color: var(--color-2);
}

/*------------------------------------*\
    #DESCRIPTION COLUMNS
\*------------------------------------*/
.block--bg-image {
background-image: url('../img/gelbe_kreise.jpg');
background-position: top center;
background-size: cover;
}

.block--bg-image a {
    color: inherit;
    text-decoration: none;
}

/*------------------------------------*\
    # ENHANCE GRID
\*------------------------------------*/
.grid--auto-1fr {
    grid-template-columns: auto 1fr;
}

/*------------------------------------*\
    # TARIFRECHNER
\*------------------------------------*/
.HafasMapWidget {
    font-family: var(--font-family) !important;
}

.HafasMapWidget .locations.small {
    width: calc(50% - var(--gutter) * 4.5) !important;
    display: inline-block !important;
    margin-top: calc(var(--gutter) * 3) !important; 
    margin-left: calc(var(--gutter) * 3) !important; 
}

.HafasMapWidget .mapWidgetRoutePlannerDiv {
    background-color: var(--color-1) !important;
    /* padding-top: calc(var(--gutter) * 3) !important;
    padding-left: calc(var(--gutter) * 3) !important;
    padding-right: calc(var(--gutter) * 3) !important;*/
    padding-bottom: calc(var(--gutter) * 0) !important; 
    margin-bottom: calc(var(--gutter) * 1) !important;
}


.HafasMapWidget .section.dateTime {
    padding: calc(var(--gutter) * 3) !important;
    padding-top: calc(var(--gutter) * 1.5) !important;
    
}

.HafasMapWidget .section {
    margin-bottom: 0 !important;
}

.HafasMapWidget .section.bordered {
    margin-bottom: 0 !important;
}

/* BUTTON */
.HafasMapWidget .submitButton {
    border-top: var(--gutter) solid var(--color-white);
    background-color: var(--color-1) !important;
    color: var(--color-2) !important;
    text-transform: uppercase !important;
    font-size: var(--font-size-base) !important;
    padding-top: .25em;
    line-height: var(--line-height-base) !important;

    /* padding-left: calc(var(--btn-padding-left) + 1.25em); */
}


.HafasMapWidget .submitButton::before {
    /* position: absolute; */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    content: "\e900";
  
    padding-right: .25em;  
    font-size: .7em;

    transform: translate(-100%, .5em);
}




/*------------------------------------*\
    #FOOTER
\*------------------------------------*/

.footer {
    background-color: var(--color-2);
    color: var(--color-white);
}

@media all and (min-width: 768px) {
    .footer {
        position: absolute;
        bottom: 0;
        left: 330px;
        right: 0;
    }
}

@supports (display: grid) {
    .footer {
        position: relative;
        bottom: initial;
        left: initial;
        right: initial;
    }
}

@media all and (min-width: 768px) {
    .footer {
        margin-left: var(--gutter);
        padding-right: calc(var(--gutter) * 5);
    }
}

.footer__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;

    padding: var(--gutter);
}

.footer__content a {
    color: inherit;
    text-decoration: none;
}


/*------------------------------------*\
    #DESCRIPTION UL
\*------------------------------------*/
.description ul {
    list-style-type: none;
    padding-left: 1.6em;
}
  
.description li::before, 
.description .list__link a::before {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    content: "\e901";
    padding-right: calc(var(--gutter) * 1.75);
  
    display: inline-block;
    margin-left: -1.9em;
    font-size: .8em;
}

.description .list__link::before {
    content: initial;
} 

.description .list__link a{
    text-decoration: none;
    color: inherit;
}

.description .list__link a:hover,
.description .list__link a:active,
.description .list__link a:focus,
.description .list__link a:hover::before,
.description .list__link a:active::before,
.description .list__link a:focus::before {
    color: var(--color-1);
}

.description .list__link a::before {
    padding-right: calc(var(--gutter) * 1);
    content: "\e900";
    color: var(--color-2);
}


.description a[href$=".pdf"]:after {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    content: "\e902";

  
    display: inline-block;
    font-size: 1.25em;

    margin-left: auto;
    padding-left: var(--gutter);
}


.description ul,
.description ol,
.description dl {
    margin-top: 0;
    /* margin-bottom: var(--gutter-description); */
}


.block--bg-image .description .list__link a:hover,
.block--bg-image .description .list__link a:focus,
.block--bg-image .description .list__link a:active,
.block--bg-image .description .list__link a:hover::before,
.block--bg-image .description .list__link a:focus::before,
.block--bg-image .description .list__link a:active::before {
    color: var(--color-white);
}


  /*------------------------------------*\
      $NAV
  \*------------------------------------*/
.nav--primary .nav__item {
  position: relative;
}

.nav--primary .nav__input {
    /* display: none; */
}

@media all and (max-width: 767px) {
    .nav--primary .nav__link {
        padding-top: calc(var(--gutter) * 1);
        padding-bottom: calc(var(--gutter) * 1);
        padding-left: calc(var(--gutter) * 2);
        padding-right: calc(var(--gutter) * 2);
    }

    .nav--primary .nav__input:checked ~ .nav__label + ul {
        display: block;
    }

    .nav--primary .dropdown > .nav__input:not(:checked) ~ .nav__label .nav__link{
        pointer-events: none;
    }
}

@media (any-hover: none) {
    .nav--primary .nav__input:checked ~ .nav__label + ul {
        display: block;
    }

    .nav--primary .dropdown > .nav__input:not(:checked) ~ .nav__label .nav__link {
        pointer-events: none;

    }

    .nav--primary .nav__input:checked ~ .nav__label .nav__link {
        color: white;
        pointer-events: initial;
    }
}

@media all and (min-width: 768px) {
    .burger__label {
        display: none;
    }

    .nav--primary {
      padding-top: calc(var(--gutter) * 8);
      padding-bottom: calc(var(--gutter) * 8);
    }

    .nav--primary .nav__link {
      padding-top: calc(var(--gutter) * .5);
      padding-bottom: calc(var(--gutter) * .5);
      padding-left: calc(var(--gutter) * 5.5);
      padding-right: calc(var(--gutter) * 4.5);
    }

    .nav--primary ul {
      background-color: var(--white);
      left: 0;
    }
}

.nav__label {
    display: block;
}

.nav--primary .nav__link::before {
      /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-size: .65em;
    content: "\e900";

    padding-right: var(--gutter);
}

.nav--primary .active > .nav__label > .nav__link::before,
.nav--primary .active-parent > .nav__label > .nav__link::before,
.nav--primary .active-ancestor > .nav__label > .nav__link::before {
    content: none;
}

.nav--primary .active > .nav__label > .nav__link:after,
.nav--primary .active-parent > .nav__label > .nav__link:after,
.nav--primary .active-ancestor > .nav__label > .nav__link:after {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-size: .65em;

    content: "\e900";

    padding-left: var(--gutter);
}

/* hover */
.nav--primary .nav__link:hover {
    color: var(--white);
}

/*------------------------------------*\
    #SUBNAV
\*------------------------------------*/
.nav--primary ul {
    display: none;

    padding: var(--gutter);
    padding-top: calc(var(--gutter) * 1);
    padding-right: calc(var(--gutter) * 2);
}

.nav--primary .nav__item:hover ul {
    display: block;
}

.nav--primary ul .nav__link {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

@media all and (max-width: 767px) {
    .header__item--nav {
        width: 100%;
    }

    .nav--primary .dropdown:hover > .nav__link::before {
        animation-name: clickme;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    .nav--primary ul {
        padding-left: calc(var(--gutter) * 3);
        background-color: var(--color-3);
    }

    .nav--primary .active ul {
        display: block;
    }
}

@media all and (min-width: 768px) {
    .nav--primary ul {
        position: absolute;
        left: 100%;
        top: calc(var(--gutter) * -1);
        
        background-color: var(--color-1);

        display: block;
        visibility: hidden;
        transition: 0s .3s;
    }

    .nav--primary .nav__item:hover ul {
        visibility: visible;
        transition: 0;
    }
}

@keyframes clickme {
    0% {
        color: inherit;
    }

    100% {
        color: var(--color-white);
    }
}



/*------------------------------------*\
    #BLOCK
\*------------------------------------*/
.block__image img {
    vertical-align: bottom;
}

.block--navimage {
    overflow: hidden;
    min-height: 100px;
}

.block--navimage .block__content {
    pointer-events: none;
}

.block--navimage .block__link {
    pointer-events: initial;
}

.block--navimage .block__image img {
    position: absolute;
}

.block--navimage .block__button {
    
}


/*------------------------------------*\
    #FAQ
\*------------------------------------*/
.block--faq .block__content {
    display: block;
    max-width: calc( var(--max-width-2) / 12 * 9 );
}

.block--faq .block__title,
.block--faq .iconprefix::before {
    cursor: pointer;
}

.block--faq .block__description {
    display: none;
}

.block--faq .block__input:checked ~ .block__content .block__description {
    display: block;
}

.block--faq .iconprefix::before {
    transition: transform .3s ease-in-out;
    transform-origin: center;
}

.block--faq .block__input:checked ~ .iconprefix::before {
    transform: rotate(90deg) scale(.9) translate(20%,20%);
}

/*------------------------------------*\
    #GRID
\*------------------------------------*/
.grid--dense {
    grid-auto-flow: row dense;
}

/*------------------------------------*\
    #SECTION
\*------------------------------------*/
.section--border {
    border-top: var(--gutter) solid var(--color-1);
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
    border-bottom: var(--gutter) solid var(--color-1);
}


/*------------------------------------*\
    #TITLE
\*------------------------------------*/
.block__title {
font-weight: bold;
}

.description h1,
.description h2,
.description h3,
.description h4,
.description h5,
.description h6 {
font-weight: bold;
font-size: var(--font-size-h5);
line-height: var(--line-height-h5);
}

.margin-bottom--custom {
    margin-bottom: calc(var(--gutter) * 6);
}

.padding-left--griditem {
    padding-left: calc(100% / 12);
}



.block--column-1 .block__description {
    max-width: calc( var(--max-width-2) / 12 * 9 );
}

.block--column-1 .iconprefix .block__description {
    max-width: calc( var(--max-width-2) / 12 * 9 - var(--gutter) * 6);
}


.acf-block-preview .block--separator {
    background-color: var(--color-3);
}


.separator--border {
    border-top: var(--gutter) solid var(--color-1);
}

.padding-top--custom {
    padding-top: calc( var(--gutter) * 6 );
}

.padding-bottom--custom {
    padding-bottom: calc( var(--gutter) * 6 );
}


.acf-block-preview .block__link,
.acf-block-preview .block__image a {
    pointer-events: none;
}



.block--map {
    min-width: 100%;
    width: 100%;
}


.block--abteilung .block__description {
    max-width: none !important;
}




.js-slider-job .slick-track {
    display: flex !important;
}

.js-slider-job  .slick-slide {
    height: initial !important;
    display: flex !important;
    float: none !important;
}


/* HISTORY SLIDER */
.js-slider-history .slick-next::before {
    content: '\e900'!important;
    color: var(--color-2) !important;
}

.js-slider-history .slick-prev::before {
    content: '\e900'!important;
    color: var(--color-2) !important;
}

.js-slider-history .slick-next, 
.js-slider-history .slick-prev {
    top: 0 !important;
    transform: translateY(20%) !important;
}

.js-slider-history .slick-prev {
    transform: rotate(180deg)  translateY(-20%)  !important;
}


.js-slider-history .block__outer {
    margin-left: calc(var(--gutter) * 2);
    margin-right: calc(var(--gutter) * 2);
}


.filter__bar {
    width: 100%;
    min-height: 10px;
    background-color: var(--color-3);
    border-radius: .2em;
    position: relative;
}

.filter__bar-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--color-1);
    border-radius: .2em;
}


.filter__item {
    display: none;
}

.filter__item--initial {
    display: block;
}


.slick-dots li button::before {
    font-size: 1rem !important;
    color: var(--color-2) !important;
    opacity: 1 !important;
}

.slick-dots li.slick-active button::before {
    color: var(--color-1) !important;
}

.slick-dotted.slick-slider {
    margin-bottom: calc(var(--gutter) * 3) !important;
}

.slick-dots {
    bottom: calc(var(--gutter) * -1) !important;
    transform: translateY(100%);
}




.slick-prev::before,
.slick-next::before {
    font-family: 'icomoon' !important;
    content: "\e901" !important;
    color: var(--color-1) !important;
}

.slick-prev {
    left: -35px !important;
    transform: rotate(180deg) translateY(50%) !important;
}

.slick-next {
    right: -35px !important;
}


.nav--footer {
    display: flex;
}

.nav--footer .nav__item {
    margin-left: var(--gutter);
}

.js-filter,
.js-filter-aktuell {
    cursor: pointer;
}




.wp-block-gallery {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width-2);
    box-sizing: content-box;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.wp-admin .videogallery a {
    pointer-events: none;
}


.livestream {
    position: relative;
    height: 0;
    padding-top: 62.5%;
    margin-bottom: var(--gutter);
}

.livestream iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0;
} 



/* SLIDER OVERLAY */
.slider_slider {
    width: 100%;
    position: relative;
}


.slider__contentcontent-top {
    background-color: rgba(253, 195, 0, .8);
    padding: var(--gutter);
    flex-grow: 1;
    padding: calc(var(--gutter) * 2) calc(var(--gutter) * 2);
    width: 100%;

}

.slider__contentcontent-bottom {
    background-color: rgba(254, 239, 202, .8);
    padding: calc(var(--gutter) * 2) calc(var(--gutter) * 2);
    width: 100%;
}



.slider__link_container {
    margin-top: auto;
}

.slider__link {
    margin-top: calc(var(--gutter) * 1);
    margin-bottom: 0;
}

.slider_contentcontent {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    align-items: flex-start;
}

.slider_content .iconprefix--big::before {
    margin-top: .125em;
}

@media all and (min-width: 1366px) {
    .slider_content {
        max-width: 50ch;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    } 
}


.block--headerhome {
	display: grid;
}

.block--headerhome .block__image,
.block--headerhome .block__content {
	grid-row: 1;
	grid-column: 1;
}

.block--headerhome .block__image {
	position: relative;
}

.block--headerhome .block__image img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.block--headerhome .block__content {
	position: relative;
}


.block--headerhome .block__content-left {
	display: grid;
	align-content: center;
}

.block--headerhome .block__content-left .block__button {
	text-decoration: none;
}

.block--headerhome .block__content-left .block__button .block__button-content {
	background-color: white;
	font-weight: bold;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	color: var(--color-2);
}

.block--headerhome .block__content-left .block__button:hover .block__button-content {
	background-color: var(--color-2);
	color: white;
}

.block--headerhome .block__content-left .block__button:hover .arrow-only::before {
	color: var(--color-2) !important;
}

.home .page__heading {
	display: none !important;
}

.pum {
	display: none;
}