/********************************************************
Fonts
********************************************************/
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
    url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v20-latin-regular.woff') format('woff');
}
/* roboto-italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'),
    url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), url('../fonts/roboto-v20-latin-italic.woff') format('woff');
}
/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), url('../fonts/roboto-v20-latin-700.woff') format('woff');
}
/* roboto-700italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
    url('../fonts/roboto-v20-latin-700italic.woff2') format('woff2'), url('../fonts/roboto-v20-latin-700italic.woff') format('woff');
}


/*
==================================================
Variablen
==================================================
*/
body {
    /* Schriftgrößen etc. */
    --fsize: 1.6rem;
    --fsize-h1: 4rem;
    --fsize-h2: 2.8rem;
    --fsize-h3: 2.3rem;
    --fsize-h4: 1.9rem;
    --fsize-sm: 1.4rem;

    --fsize-h5: var(--fsize);
    --fsize-h6: var(--fsize-sm);

    --fsize-menu0: 1.8rem;

    --lh: 1.35;
    --lh-h1: 1;
    --lh-h2: 1.1;
    --lh-h3: 1.2;
    --lh-h4: 1.2;
}

body {
    font: 1.6em/1.35 'Roboto', sans-serif;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    font-weight: bold;
}
:is(h2,h3,h4).accordion-label {
    --fweight-btn: bold;
}
h1, .h1 {
    text-transform: uppercase;
}
.menu-0 > li > a {
    font-size: var(--fsize-menu0);
}
.main-headline {
    text-align: left;
}

/********************************************************
Farben
********************************************************/
a:hover .bg-maincolor.overlay.overlay h3, .if-hover__bg-maincolor:hover h3 {
    color: inherit;
}

/********************************************************
Header
********************************************************/
.layout-jugend .area {
    box-shadow: none;
}

.layout-jugend .area-menu-0 {
    padding: 1rem 0 1.5rem;
    border-bottom: 1px solid #b2b2b2;
}
.layout-jugend .area-menu-0 > * > .col {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/********************************************************
Top-Links
********************************************************/
.layout-jugend .wrap-menu-top {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    overflow: hidden;
    width: 100%;
}
.layout-jugend .menu-top {
    display: flex;
    min-width: 100%;
}
@media (min-width: 1850px) {
    .layout-jugend .menu-top {
        width: 120.5rem;
        min-width: 0;
    }
}
.touch-support .layout-jugend .menu-top {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.touch-support .layout-jugend .menu-top::-webkit-scrollbar {
    display: none;
}
.layout-jugend .menu-top li {
    flex: 0 0 auto;
}
.layout-jugend .menu-top li:first-child {
    margin-left: auto;
}
.menu-top li:not(.cur) > a:hover {
    color: #000;
}

.has-menu-top + * #logo ~ * {
    margin-top: 4rem;
}
.has-menu-top + .responsive-on #logo ~ .menu-0 {
    margin-top: 0;
}

@media (max-width: 700px) {
    .layout-jugend .has-menu-top .top-bar {
        width: 100%;
        height: 0.5rem;
        margin-bottom: 3.5rem;
    }
    .layout-jugend .has-menu-top .menu-top {
        margin: 0;
    }
}

/********************************************************
 Logo
********************************************************/
.layout-jugend #logo {
    flex: 0 0 auto;
    margin: 1rem 2.5rem 1.2rem 0;
}
@media (max-width: 460px) {
    .layout-jugend #logo {
        max-width: 66%;
    }
}
.layout-jugend #logo .logo-text {
    font-weight: normal;
    margin: 0;
}
.layout-jugend #logo img + .logo-text {
    margin-top: 1.5rem;
}
.layout-jugend #logo .logo-text:empty {
    display: none;
}


/********************************************************
 Header-Suche
********************************************************/
@media (min-width: 1270px) {
    .search-header.popup-search {
        left: calc(50vw - 51%);
        margin-left: -35px;
    }
}
@media (min-width: 1820px) {
    .search-header.popup-search {
        left: 31.5rem;
    }
}



/********************************************************
 Hauptmenü
********************************************************/
.layout-jugend .menu-0 {
    margin-left: auto;
}
.layout-jugend .menu-0.menu-0.menu-0 li a {
    background: 0;
}
.layout-jugend .area-menu-0:not(.responsive-on) .menu-0 > li > a {
    margin: 0 1rem;
    padding: 1rem 0;
    border-bottom: 3px solid;
}
.layout-jugend .area-menu-0:not(.responsive-on) .menu-0 > li:not(.act):not(:hover) > a {
    border-color: transparent;
}
.layout-jugend .area-menu-0:not(.responsive-on) .menu-0 li ul {
    left: 1rem;
    border: 0;
}
.layout-jugend .menu-0 li:last-child ul {
    right: 1rem;
    left: auto;
}
.layout-jugend .area-menu-0 .menu-0 li:last-child ul,
.layout-jugend .area-menu-0 .menu-0 li:nth-last-child(2) ul {
    right: 0;
    left: auto;
}

/********************************************************
 Responsive-Hauptmenü
********************************************************/
.layout-jugend .area-menu-0.responsive-on > * > .col {
    flex-wrap: wrap;
}
.layout-jugend .responsive-on .responsive-menu-btn, .layout-jugend .responsive-on .menu-0 {
    order: 5;
}
.layout-jugend .responsive-on .responsive-menu-btn {
    margin: 0 0 0 1rem;
}
.layout-jugend .responsive-on .search-header {
    margin-left: auto;
}

/********************************************************
 Third-Level-Menu
********************************************************/
.layout-jugend .area-menu-sub {
    font-weight: bold;
    background: #f0f0f0;
}
.layout-jugend .menu-sub a {
    margin-right: 1.6em;
    padding: 1em 0;
    color: #262626;
}
.layout-jugend .menu-sub a:hover,
.layout-jugend .menu-sub.menu-sub .act a {
    background: 0;
}

/********************************************************
 Breadcrumbs
********************************************************/
.layout-jugend .area-breadcrumbs {
    padding: 1.5rem 0 0.5rem;
    background: 0;
}
.layout-jugend .menu-breadcrumbs li:first-of-type a {
    padding-left: 0;
}
.layout-jugend .menu-breadcrumbs a {
    color: #6e6e6e;
}
.layout-jugend .menu-breadcrumbs li:last-of-type:after {
    content: none;
}
.layout-jugend .menu-breadcrumbs li:after {
    font-size: 2em;
    line-height: 1em;
    transform: scaleX(0.6);
    color: #6e6e6e;
}
.layout-jugend #main > .col-headline:first-child {
    padding-top: 1.5rem;
}

/********************************************************
 Akkordeon
********************************************************/
.layout-jugend .accordion-label {
    font-size: inherit;
    max-width: none;
    padding: 2rem;
    text-transform: uppercase;
    color: inherit;
    border: solid #ddd;
    border-width: 1px 0;
    background: transparent;
}
.layout-jugend .accordion-label:hover {
    color: #fff;
    border-color: transparent;
}
.layout-jugend.color-light .act .accordion-label {
    color: #000;
}
.layout-jugend .accordion-label:after {
    font-size: 3.5rem;
    top: 1rem;
    right: 2.5rem;
}
.layout-jugend .act .accordion-label:after {
    transform: rotate(270deg);
}
.layout-jugend .accordion-content {
    padding: 2rem;
}

/********************************************************
 Slider
********************************************************/
@media (min-width: 1001px) {
    .layout-jugend .top-slider {
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
}
@media (max-width: 1000px) {
    .layout-jugend .row-over-special {
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
}
.layout-jugend .top-slider .overlay {
    right: auto;
    left: 0;
    padding-top: 1.5rem;
    background: #fff;
}
@media (min-width: 1001px) {
    .layout-jugend .top-slider .overlay {
        width: 50vw;
    }
    .layout-jugend .top-slider .slider-controls .menu {
        margin: -4rem 6rem 0 auto;
    }
}
@media (min-width: 1200px) {
    .layout-jugend .top-slider .overlay {
        padding-left: calc(50vw - 585px);
    }
}
.layout-jugend .slider-controls .menu li {
    width: 13px;
    height: 13px;
    border: 2px solid;
    border-radius: 50%;
    background-color: transparent;
}
.layout-jugend .slider-controls li:not(.act):not(:hover) {
    color: #95989a;
}
.layout-jugend .top-slider .slider-controls li + li {
    margin-left: 10px;
}
.layout-jugend .slider-controls.slider-controls a.btn-forward {
    border-left-color: transparent;
}
.layout-jugend .slider-controls.slider-controls a.btn-back {
    border-right-color: transparent;
}

/********************************************************
 Button Pfeile
********************************************************/
.layout-jugend .arrow {
    line-height: 1.5;
}
.layout-jugend .arrow:not(.top):not(.bottom):not(.neg-arrow):after {
    transform: scaleX(0.6);
    transform-origin: 0 50%;
}
.layout-jugend .arrow.left:after {
    transform-origin: 100% 50%;
}

/********************************************************
 Teaser
********************************************************/
.layout-jugend .box-cube .arrow, .layout-jugend .box-bigcube .arrow {
    display: none;
}
.layout-jugend.layout-jugend .box-cube a .overlay, .layout-jugend.layout-jugend .box-bigcube a .overlay {
    padding-bottom: 0;
}
.layout-jugend .box-cube .overlay {
    min-height: 4em;
}
.layout-jugend .box-cube {
    --lineheight-title: 1.2em;
    --lineheight-p: 1.35em;
    --maxlines-p: 8;
}
@media screen and (max-width: 1085px) and (min-width: 901px) {
    .layout-jugend .box-cube {
        --maxlines-p: 6;
    }
}
@media screen and (max-width: 900px) and (min-width: 751px) {
    .layout-jugend .box-cube {
        --maxlines-p: 5;
    }
}

/********************************************************
 Formulare
********************************************************/
.layout-jugend label {
    border: 0;
}
.layout-jugend .powermail_submit {
    float: right;
    width: auto;
    min-width: 20%;
    padding-right: 2rem;
    padding-left: 2rem;
}

/********************************************************
 Bild bis zum Screenrand
********************************************************/
@media (min-width: 1200px) {
    .layout-jugend .col-6:first-child > .imgs-top.full-height:only-child {
        margin-left: calc(600px - 50vw);
    }
    .layout-jugend .col-6:last-child > .imgs-top.full-height:only-child {
        margin-right: calc(600px - 50vw);
    }
    .layout-jugend .col-6 > .imgs-top.full-height:only-child .h-600 img {
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
    }
}

/********************************************************
 Footer
********************************************************/
.layout-jugend #footer {
    margin-bottom: 0;
    border: 0;
}
.layout-jugend #footer.bg-dark {
    background: #505050;
}
.layout-jugend #footer h3 {
    display: none;
}
.layout-jugend #main > .row-over:last-child {
    margin-bottom: -40px;
    padding-bottom: 40px;
}

.layout-jugend .footer-logo img {
    transition: 0.3s;
}
.layout-jugend .footer-logo img:not(:hover) {
    filter: grayscale(100%);
}

/*Social Buttons*/
.layout-jugend #footer .wrap-social-btn a {
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid;
    background: transparent;
}
.layout-jugend #footer .wrap-social-btn a:after {
    line-height: 4.5rem;
}