@charset "UTF-8";

/************************************************************************************
*
* Theme Name: 		WP Theme für Süddeutsche Hausverwaltung GmbH
* Theme URI:		https://sueddeutschehausverwaltung.de/
* Description: 		Webseite mit WordPress
* Author:			Süddeutsche Hausverwaltung GmbH
* Author URI:		https://sueddeutschehausverwaltung.de/
* Version:			1.0
* License:          13-6 GmbH
* License URI:      https://13-6.de
*
************************************************************************************/

/************************************************************************************
*
* ROOT
*
************************************************************************************/

:root {
    --ff-morn-demibold: "Morn-DemiBold";
    --ff-morn-regular: "Morn-Regular";

    --ff-heading: var(--ff-morn-demibold);
    --ff-body: var(--ff-morn-regular:);

    --fs-headline-h1: 3rem;
    --fs-headline-h2: 2.25rem;
    --fs-headline-h3: 2rem;
    --fs-headline-h4: 1.75rem;
    --fs-headline-h5: 1.5rem;
    --fs-headline-h6: 1.5rem;
    --fs-body: 1rem;
    --fs-nav: 1.25rem;
    --fs-small: .875rem;

    --size-xs: 1em;
    --size-s: 2.5em;
    --size-l: 5em;
    --size-xl: 7.5em;

    --card-margin: 1em;
}

@media (min-width: 50em) {
    :root {
        --fs-headline-h1: 2.25rem;
        --fs-headline-h2: 2rem;
        --fs-headline-h3: 1.75rem;
        --fs-headline-h4: 1.5rem;
        --fs-headline-h5: 1.5rem;
        --fs-headline-h6: 1.5rem;
    }
}

@media (min-width: 20em) {
    :root {
        --fs-headline-h1: 2rem;
        --fs-headline-h2: 1.75rem;
        --fs-headline-h3: 1.5rem;
        --fs-headline-h4: 1.25rem;
        --fs-headline-h5: 1rem;
        --fs-headline-h6: 1rem;
    }
}

/************************************************************************************
*
* RESET
*
************************************************************************************/

/* Box sizing rules */

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Remove default margin */

* {
    margin: 0;
    padding: 0;
    font: inherit
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul,
ol,
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

input[type="button"],
input[type="reset"],
input[type="file"],
input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
    background: none
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: 'Morn-Regular'!important;
    margin: 0;
    color: #2E2D2C
}

button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
}

/* Set core root defaults */

html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */

html,
body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeSpeed;
    line-height: 1.6;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
    text-decoration-skip-ink: auto;
}

a {
    text-decoration: none;
}

/* Make images easier to work with */

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
}


/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* DATA Attribute

.container{
  position: relative;
  margin:5em auto;
}
*/

/* Utility classes */

.container[data-type="mx-auto"] {
    --max-width: 80em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin-inline: auto
}

.container[data-type="full"] {
    --max-width: 100%;
    margin-inline: auto
}

.container[data-type="content"] {
    --max-width: 60em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin-inline: auto
}

.section {
    --max-width: 100%;
    width: min(var(--max-width));
    margin-inline: auto;
}

.space-xs {
    padding-block: var(--size-xs)
}

.space-s {
    padding-block: var(--size-s)
}

.space-l {
    padding-block: var(--size-l)
}

.space-xl {
    padding-block: var(--size-xl)
}

.resizer-columns {
    display: grid;
    gap: 1em;
    background: Red
}

@media (min-width: 50em) {

    .resizer-columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr
    }

}

/*
.container {
  --max-width:100%;
  --padding:1em;
  width: min(var(--max-width), 100% - var(--padding) * 2);
  margin-inline:auto;
  
 }

 @media (min-width:30em) {
  .container {
   max-width:30em
  }
 }

 @media (min-width:40em) {
  .container {
   max-width:40em
  }
 }
 @media (min-width:48em) {
  .container {
   max-width:48em
  }
 }

 @media (min-width:60em) {
  .container {
   max-width:60em
  }
 }

 @media (min-width:64em) {
  .container {
   max-width:64em
  }
 }
 @media (min-width:80em) {
  .container {
   max-width:1280px
  }
 }
*/

.button {
    border: 0;
    padding: 1em 1.25em;
    font-family: "Morn-Regular";
    font-size: .875rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    background-color: #AFD39A;
    color: #282827;
    letter-spacing: 4px;
    cursor: pointer;
    display: inline-block
}

.button[data-type="inverted"] {
    background-color: #fff;
    color: #282827
}

.button:hover,
.button:focus-visible {
    background-color: #282827;
    color: #AFD39A
}

.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
    background-color: #282827;
    color: #fff
}

/************************************************************************************
*
* CONTENT MIT SIDEBAR
*
************************************************************************************/

@media screen and (min-width:30em) {

    .contens-main-sidebar {
        display: flex;
        flex-direction: column
    }

    .article-wysiwyg {
        flex: 2;
        order: 1;
    }

    .sidebar {
        flex: 1;
        order: 2;
    }

}

@media screen and (min-width:52em) {

    .contens-main-sidebar {
        display: flex;
        flex-direction: row
    }

    .article-wysiwyg {
        flex: 2;
        order: 1;
    }

    .sidebar {
        flex: 1;
        order: 2;
    }

}

.article-wysiwyg {
    color: #282827;
}

.article-wysiwyg--headlines h1 {
    font-size: 2.75rem;
    line-height: 1.1;
    width:90%
}

.article-wysiwyg--headlines h2 {
    font-size: 2.5rem;
    line-height: 1;
}

.article-wysiwyg--headlines h3 {
    font-size: 2rem;
    line-height: 1;
}

.article-wysiwyg--content p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 1em 0;
    width: 80%;
}

.article-wysiwyg--content p strong {
    font-family: "Morn-DemiBold";
}

.article-wysiwyg--content ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1em 0;
    position: relative
}

.article-wysiwyg--content li {
  position: relative
}

.article-wysiwyg--content li::before {
  content: '→';
  color: #282827;
  padding: 0 .5em 0 0;
      display: inline-block;
  margin: 0;
  position: absolute;
  left: -1.5rem;
}


@media screen and (min-width:20em) {
       .article-wysiwyg--headlines h1 {
    font-size: 2rem;
           width:100%
}

.article-wysiwyg--headlines h2 {
    font-size:1.75rem;
}

.article-wysiwyg--headlines h3 {
    font-size: 1.5rem;
}

.article-wysiwyg--content p,
    .article-wysiwyg--content ul
    {
    font-size: 1rem;
    line-height:1.6rem;
    margin: 1em 0;
}
    
    .sidebar-inner--content ul {
    font-size: .875rem;
    line-height:2rem;
    color: #282827;
    margin: .5em 0;
}
}

@media screen and (min-width:40em) {
    
    .sidebar-inner--content ul {
    font-size: 1rem;
    line-height:2rem;
    color: #282827;
    margin: .5em 0;
}
}

@media screen and (min-width:50em) {
    
    .article-wysiwyg--headlines h1 {
    font-size: 2.75rem;
        width:90%
}

.article-wysiwyg--headlines h2 {
    font-size: 2.5rem;
}

.article-wysiwyg--headlines h3 {
    font-size: 2rem;
}

.article-wysiwyg--content p {
    font-size: 1.25rem;
    line-height:1.875rem;
}
    
}

.article-wysiwyg--content ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1em 0;
}

.sidebar-inner {
    position: relative
}

.sidebar-inner figure img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    -o-object-fit: cover;
    object-fit: cover
}

.sidebar-inner--content {
    display: block;
    padding: 1em;
    background-color: #fff;
}

.sidebar-inner--content h3 {
    font-family: "Morn-Regular";
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    letter-spacing:2px;
    color: #282827;
}

.sidebar-inner--content h4 {
    font-family: "Morn-Regular";
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    letter-spacing:2px;
    color: #282827;
}

.sidebar-inner--content ul {

    color: #282827;
    margin: .5em 0;
}

.sidebar-inner--content li {
   white-space: normal;
hyphens: auto;
}

.sidebar-inner--content li strong{
    font-family: "Morn-DemiBold";
    display: inline-block; 
    padding: 0 .5rem 0 0;
}

.sidebar-inner--content li a {
    color: #282827;
    position: relative
}

.sidebar-inner--content li a:hover {
	color: #AFD39A
}

.sidebar-inner--content li a::before {
    content: attr(data-icon);
    padding: 0 .5em 0 0;
    color: #282827
}

.sidebar-inner--content li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #AFD39A;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    transition: -webkit-transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}

.sidebar-inner--content li a:hover::after {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    display: inline-block;
}

/************************************************************************************
*
* BEFORE FOOTER
*
************************************************************************************/

.columns {
    display: flex;
    flex-wrap: wrap;
}

.columns > * {
    flex: 1 1 460px
}

.columns-column--content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    align-content: flex-start;
}

.columns-column--image img {
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    display: block
}

.headline-and-list {
    text-align: start;
    position: relative;
}

.headline-and-list h2 {
    font-size: 2.75rem;
    line-height: 1;
    color: #282827;
    margin: 0 0 1em 0
}

.headline-and-list h3 {
    font-size: 2rem;
    line-height: 1;
    color: #282827;
    margin: 0 0 1em 0
}

.headline-and-list ul {
    font-size: 1.25rem;
    margin: .5em 0;
}

.headline-and-list li a {
    color: #2EBAD5;
    position: relative
}

.headline-and-list li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #2EBAD5;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    transition: -webkit-transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}

.headline-and-list li a:hover::after {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    display: inline-block;
}

.headline-and-list li::before {
    content: attr(data-icon);
    color: #2EBAD5;
    padding: 0 .5em 0 0;
}

/************************************************************************************
*
* Webfonts
*
************************************************************************************/

h1,
h2,
h3,
h4,
h5 {
    font-family: "Morn-DemiBold";
}

p,
ul {
    font-family: "Morn-Regular";
}

/************************************************************************************
*
* LAYOUT
*
************************************************************************************/

.page-layout {
    position: relative;
    overflow: hidden;
    padding: 5em 0 0 0
}

/************************************************************************************
*
* HEADER
*
************************************************************************************/

.page-header {
    width: 100%;
    height: 7em;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 15;
}

.page-header--inner > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    max-width: 90em;
    height: 7em;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-header--logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.page-header--content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.page-header--icons ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 2em
}

.page-header--icons ul li {
    width: 40px;
    height: 40px;
    margin: 0 1em;
    position: relative;
    cursor: pointer
}

.page-header--icons ul li img {
    width: 40px;
    height: 40px;
    display: block;
}

.icon-phone::before,
.icon-phone::after {
    position: absolute;
    top: -.25em;
    left: 50%;
    --scale: 0;
    -webkit-transform: translateX(-50%) translateY(-100%) scale(var(--scale));
    transform: translateX(-50%) translateY(-100%) scale(var(--scale));
    -webkit-transition: 150ms -webkit-transform;
    transition: 150ms -webkit-transform;
    transition: 150ms transform;
    transition: 150ms transform, 150ms -webkit-transform;
}

.icon-phone::before {
    content: attr(data-tooltip);
    color: #fff;
    background: #2E2D2C;
    font-family: 'Morn-Regular';
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: center;
    padding: .25em;
    width: max-content;
}

.icon-phone:hover::before {
    --scale: 1;
}

.icon-mail::before,
.icon-mail::after {
    position: absolute;
    top: -.25em;
    left: 50%;
    --scale: 0;
    -webkit-transform: translateX(-50%) translateY(-100%) scale(var(--scale));
    transform: translateX(-50%) translateY(-100%) scale(var(--scale));
    -webkit-transition: 150ms -webkit-transform;
    transition: 150ms -webkit-transform;
    transition: 150ms transform;
    transition: 150ms transform, 150ms -webkit-transform;
}

.icon-mail::before {
    content: attr(data-tooltip);
    color: #fff;
    background: #2E2D2C;
    text-align: center;
    font-family: 'Morn-Regular';
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: center;
    padding: .25em;
    width: max-content;
}

.icon-mail:hover::before {
    --scale: 1;
}

.page-header--links ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: 'Morn-Regular';
    font-size: 1rem;
    line-height: 1.75rem;
    padding: 0 2em
}

.page-header--links ul li a {
    color: #2E2D2C;
    margin: 0 1em;
    position: relative
}

.page-header--links ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #2E2D2C;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    transition: -webkit-transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}

.page-header--links ul li a:hover::after {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    display: inline-block;
}

.menu-text {
    font-family: 'Morn-Regular';
    font-size: 1rem;
    line-height: 1.75rem;
    text-transform: uppercase;
    color: #2EBAD5;
    letter-spacing: 2px
}

/*.header-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8.75rem;
    z-index: 5;
    -webkit-transition: height 0.3s linear;
    transition: height 0.3s linear;
}

.header-active .header-active--inner {
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.header-active .page-header--logo {
    width: calc(100% - 40rem);
}

.header-active .page-header--logo {
    width: calc(100% - 40rem);
    height: 60px;
    margin: 40px 0;
    display: block;
    background-image: url(logo/logo_sueddeutsche_hausverwaltung.svg);
    background-position: left center;
    background-repeat: no-repeat
}

.header-active-shrink {
    height: 5.525rem;
}

.header-active.header-active-shrink .page-header--logo {
    width: calc(100% - 40rem);
    height: 60px;
    margin: 15px 0;
    display: block;
    background-image: url(logo/ekb_energie.svg);
    background-position: left center;
    background-repeat: no-repeat
}

.header-active.header-active-shrink {
    width: 100%;
    height: 5.525rem;
    margin: 0;
}

.header-active .page-header--logo,
.header-active .page-header {
    transition: height .8s cubic-bezier(.17, .47, .63, 1.06);
}

.header-active .page-header--logo,
.header-active .page-header {
    transition: height .8s cubic-bezier(.17, .47, .63, 1.06);
}

.header-active .page-header--logo {
    animation: height .8s cubic-bezier(0.28, 0.32, 0.29, 0.94) .4s;
}

.header-active-shrink .page-header--logo,
.header-active. header-active-shrink .page-header--inner {
    animation: height .8s cubic-bezier(0.28, 0.32, 0.29, 0.94) .4s;
}
*/

/************************************************************************************
*
* OVERLAY MENÜ LINK
*
************************************************************************************/

.page-header--menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-menu--item {
    width: auto;
    height: 40px;
    margin: 0;
    position: relative;
    cursor: pointer;
    z-index: 10;
    display: flex;
}

.header-menu--item:hover {
    color: #2E2D2C
}

.header-menu--text {
    font-family: 'Morn-Regular';
    font-size: 1rem;
    line-height: 1rem;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: uppercase;
    position: relative;
    padding: 0 1rem;
    color: #03ACE5;
    letter-spacing: 2px
}

.header-menu--text:hover {
    color: #2E2D2C
}

.menu-item--open {
    width: 40px;
    height: 40px;
    z-index: 10;
    display: block;
    cursor: pointer;
    background-image: url(assets/icons/icon-open.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/************************************************************************************
*
* HEADER UND OVERLAY MENU
*
************************************************************************************/

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    overflow: auto;
    z-index: 20;
}

.menu-overlay {
    position: relative;
}

.overlay-background {
    width: 100%;
    height: 90vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: #2EBAD5;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 94%, 0 88%);
    clip-path: polygon(0 0, 100% 0%, 100% 94%, 0 88%);
}

.menu-overlay--header {
    width: 100%;
    height: 7em;
    background: #fff
}

.menu-overlay--header > * {
    width: 100%;
    max-width: 90em;
    height: 7em;
    margin: 0 auto;
    padding: 0 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.overlay-header--logo {
    width: calc(100% - 40rem);
    height: 60px;
    margin: 40px 0;
    display: block;
    background-image: url(logo/logo_sueddeutsche_hausverwaltung.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

.overlay-header--logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.overlay-header--link a,
.overlay-header--menu {
    font-family: 'Morn-Regular';
    font-size: 1rem;
    line-height: 1.75rem;
    text-transform: uppercase;
    color: #2EBAD5
}

.overlay-header--menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-header--text {
    height: 30px;
    display: flex;
    align-items: center;
    position: relative;
}

.overlay-header--text:hover {
    color: #2E2D2C
}

.overlay-header--text {
    font-family: 'Morn-Regular';
    font-size: 1rem;
    line-height: 1.75rem;
    text-transform: uppercase;
    color: #2EBAD5;
    letter-spacing: 2px;
    padding: 0 1rem;
}

.overlay-header--close {
    width: auto;
    height: 30px;
    display: flex;
    margin: 0 1rem;
    position: relative;
    cursor: pointer;
    z-index: 10
}

.menu-item--close {
    width: 30px;
    height: 30px;
    z-index: 10;
    color: #fff;
    display: block;
    cursor: pointer;
    background-image: url(assets/icons/icon-close.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* EFFECT SLIDE DOWN */

.overlay-layer {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: visibility 0s 0.5s, -webkit-transform 0.5s;
    transition: visibility 0s 0.5s, -webkit-transform 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s, -webkit-transform 0.5s;
}

.overlay-layer.open {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}

.menu-overlay {
    color: #fff;
}

.menu-overlay-content {
    width: 100%;
    max-width: 90rem;
    margin: 2rem auto;
    padding: 2rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
}

.menu-overlay-content > * {
    flex: 1 1 calc(280px + 1em);
}

.menu-container ul {
    font-family: "Morn-DemiBold";
    font-size: 2.5rem;
    line-height: 6rem;
    color: #fff;
    list-style-type: none
}

.menu-container li a {
    display: list-item;
    color: #fff
}

.menu-container li a:hover {
    color: #2E2D2C
}

.menu-container li a {
    transition: translateX 0.4s cubic-bezier(.77, .49, .46, 1.15), -webkit-transform 0.43s ease-in;
}

.menu-container li a:hover {
    will-change: translateX;
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
}

.menu-container li.current_page_item a {
    color: #2E2D2C
}

/************************************************************************************
*
* HEADER
*
************************************************************************************/

.header-started {
  position: relative;
  height: 80vh;
}

.header-started--content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90rem;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 1em;
    color: #fff;
    overflow: hidden;
    z-index: 10;
}

.header-started--content h1 {
    font-size: 2.75rem;
    line-height: 1.1;
}

.header-started--content h2 {
    margin: 1rem 0;
    font-size: 2rem;
    line-height: 1;
}

.header-started--content p {
    width: 60%;
    margin: 1rem 0;
    font-family: "Morn-Regular";
font-size: 1.25rem;
}

.header-started--bar {
    position: absolute;
    bottom: .75em;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
    z-index: 2
}

.header-started--bar span {
    color: #fff;
    text-align: center;
    font-family: "Morn-Regular";
    font-size: 1rem;
    line-height: 2rem;
    white-space: nowrap;
    padding: .5em;
    width: max-content;
    display: inline-block;
    margin: 0 0 0 -8.5em;
}

.header-started--bar {
    position: absolute;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-image: url(assets/icons/icon-arrow.svg);
    background-repeat: no-repeat;
    background-size: cover;
    right: 50%;
    bottom: .5em;
    z-index: 10;
}

.header-started::after {
    content: '';
    display: block;
    width: 100%;
    height: 14vh;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    background-color: #2EBAD5;
    -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%);
    overflow: hidden;
}


.has-bg-overlay::before {
    content: '';
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(13, 13, 13, 1)), to(transparent));
    background: linear-gradient(to top, rgba(13, 13, 13, 1), transparent max(66%, 66vw));
    ;
    z-index: 1;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
}

.container-block {
    position: relative;
}

.container-block--image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

.container-block--overlay {
    display: block;
    width: 560px;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #2EBAD5;
    padding: 2.5em 2em;
}

.container-block--overlay h2 {
    font-size: 2.5rem;
    color: #fff
}

.container-block--overlay h3 {
    font-size: 2.5rem;
    color: #fff
}

.container-block--overlay p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: #fff;
    margin: 1em 0
}

.container-block--text {
    text-align: center
}

.container-block--text h1 {
    font-size: 2.75rem;
    line-height: 1.2;
}

.container-block--text h1 span {
    display: block
}

.container-block--text h2 {
    font-size: 2.5rem;
    line-height: 1.1;
}

.container-block--text h3 {
    font-size: 1.5rem;
    line-height: 1.75rem;
}

.container-block--text p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 1em 0;
}

.container-block--text ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1em 0;
    list-style-type: none
}

.container-block--text li strong {
    font-family: "Morn-DemiBold";
display: inline-block;
padding: 0 .5rem 0 0;
}

.container-block--text p a,
.container-block--text li a {
    color: #2EBAD5
}

.container-block--text p a:hover,
.container-block--text li a:hover {
    color: #2EBAD5;
    text-decoration:underline
}

.nav-direct--container {
    width: 100%;
    margin: 5rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.nav-direct--container > * {
    flex: 1 1 calc(280px + var(--card-margin));
}

.nav-direct--link {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: var(--card-margin);
}

img.nav-direct--image {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
}

img.nav-direct--image {
    opacity: 1
}

img.nav-direct--image:hover {
    opacity: .6
}

.nav-direct--button {
    display: flex;
    justify-content: center;
    border: 0;
    padding: 1em 1.25em;
    font-family: "Morn-Regular";
    font-size: .875rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    background-color: #AFD39A;
    color: #282827;
    letter-spacing: 2px;
    position: absolute;
    left: 50%;
    bottom: calc(0% - 1.5rem);
    transform: translate(-50%, -0%);
    pointer-events: none
}

.editable-group {
    width: 100%;
     height: 100%;
    margin: 0 auto;
    padding: 1em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    color: #282827
}

.editable-group h1,
.editable-group h2 {
    font-size: 2.5rem;
    line-height: 2.75rem;
}

.editable-group p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 1em 0
}

.custom-placeholder img {
    width: 100%;
    max-width: 100%;
    height: 600px;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}


@media screen and (min-width:60em) {
    .container-flex {
        display: flex;
        justify-content: flex-end;
    }

    .flex-item-1 {
        flex: 2;
        order: 1;
    }

    .flex-item-2 {
        flex: 1;
        order: 2;
    }

    .editable-group {
        width: 60%;
        padding: 0;

    }

}

.website-cards {
    --min: 360px;
    --gap: 1em;
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

.website-cards--card {
    position: relative;
     overflow:hidden
}

.website-cards--card {
  transform: translateY(0px);
  transition: transform 500ms;
    overflow:hidden
}

.website-cards--card:hover {
  will-change: translateY;
  transform: translateY(-6px);
}

.website-cards--card header img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.card-content {
    padding: 2em;
    background-color: #2EBAD5;
    color: #fff
}

.card-content h3 {
    font-size: 1.5rem;
    line-height: 1.75rem;
}

.card-content ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: .5em 0
}

.card-content li {
    display: list-item
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    grid-gap: 1em;
}


@media screen and (min-width: 20em) {
    .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-gap: 1rem;
}
    
    .card-item--headline h3 {
    font-size: 1.5rem;
}

.card-item--content p{
    padding: 1em;
    font-size: 1rem;
    color: #fff;
}
    
}    


@media screen and (min-width: 40em) {
    .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    grid-gap: 1rem;
}
    
    .card-item--headline h3 {
    font-size: 1.75rem;
}

.card-item--content p{
    font-size: 1.25rem;
    padding: 1em 2em;
}
    
}

.card-item {
    display: flex;
    flex-direction: column;
    background: #2E2D2C;
    text-align: center
}

.card-item--image header img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

.card-item--headline h3 {
    font-size: 1.75rem;
    color: #2EBAD5;
    margin: 1em 0 0 0;
}

.card-item--content p{
    padding: 1em;
    font-size: 1.25rem;
    line-height: 2rem;
    color: #fff;
}

.card-item--button {
    position: relative;
    padding: 2em 1em;
    margin-top: auto;
    margin-bottom: 1em;
}

a.button-extern {
    border: 0;
    padding: 1em 1.5em;
    font-family: "Morn-Regular";
    font-size: .875rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    background-color: #fff;
    color: #2E2D2C;
    letter-spacing: 2px;
    cursor: pointer;
}

a.button-extern:hover {
background-color: #AFD39A;
color: #282827;
}

/************************************************************************************
*
* HEADER
*
************************************************************************************/

.component-content--head {
    display: block;
    position: relative;
}

.content-head--image img {
    width: 100%;
    max-width: 100%;
    height: 600px;
    margin: auto;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
}

.content-mobile--image {
    display: none
}

/************************************************************************************
*
* ACCORDION
*
************************************************************************************/

.container-block {
    display: block;
    width: 100%;
    position: relative
}

.container-block--before h2 {
    font-size: 2.5rem;
    color: #2EBAD5;
    margin: .5em 0;
}

.container-block--before h3 {
    font-size: 1.75rem;
    color: #2EBAD5;
    margin: .5em 0;
}

.container-block--before p {
    font-family: "Morn-Regular";
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #2E2D2C;
}

.container-block--accordion {
    display: block;
    margin: 1em 0
}

.accordion {
    background-color: #2EBAD5;
    color: #fff;
    cursor: pointer;
    padding: 1em 2.25em;
    margin: 1em 0 0 0;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-family: "Morn-Regular";
    font-size: .875rem;
    line-height: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
}

.accordion:hover {
    background-color: #2E2D2C;
}

.active {
    background-color: #2E2D2C;
}

.accordion::after {
    content: '';
    display: block;
    background-image: url("assets/icons/icon-arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    float: right;
    margin-left: 5px;
    height: 40px;
    width: 40px;
    border-radius: 100%
}

.active::after {
    content: '';
    display: block;
    background-image: url("assets/icons/icon-arrow-up.svg");
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    margin-left: 5px;

}

.panel {
    padding: 0;
    background-color: #2E2D2C;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.6s ease-in-out;
    transition: max-height 0.6s ease-in-out;
}

.accordion-box {
    padding: 2em;
}

.accordion-box h2 {
    font-size: 2.5rem;
    color: #fff;
    margin: .5em 0;
}

.accordion-box h3 {
    font-size: 1.75rem;
    color: #fff;
    margin: .5em 0;
}

.accordion-box h4 {
    font-size: 1.5rem;
    color: #fff;
    margin: .5em 0;
}

.accordion-box p strong {
    font-family: "Morn-DemiBold";
    font-size: 1.25rem;
    line-height: 2rem;
    color: #fff;
}

.accordion-box p {
    font-family: "Morn-Regular";
    font-size: 1.25rem;
    line-height: 2rem;
    color: #fff;
    margin:0 0 .5em 0;
}

.accordion-box ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1.5em 0;
    padding: 0 1.5em;
    color: #fff;
}

.accordion-box li {
    display: list-item;
    position: relative
}

.accordion-box li::before {
  content: '→';
  color: #fff;
  padding: 0;
  display: inline-block;
  margin: 0;
  position: absolute;
  left: -1.5em;
}

.accordion-box li a {
    color: #2EBAD5;
    display: inline-block;
    position: relative
}

.accordion-link ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 0 0 1em 0;
    padding: 0 1.5em;
}

.accordion-link li a {
    color: #2EBAD5;
    display: inline-block;
    position: relative
}

.accordion-content--indent ul {
     font-size: 1.25rem;
    line-height: 2rem;
    margin: 1.5em 0;
    color: #fff;
}

.accordion-content--indent li {
    display: list-item;
}

.accordion-link li::before {
    content: attr(data-icon);
    padding: 0 .5em 0 0;
    color: #2EBAD5
}

.accordion-content--indent li a {
    color: #03ACE5;
    display: inline-block;
    position: relative
}

.accordion-link li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #2EBAD5;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    transition: -webkit-transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}

.accordion-link li a:hover::after {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    display: inline-block;
}

/************************************************************************************
*
* Liste
*
************************************************************************************/

.container-listing {
    display: block;
    position: relative
}

.container-listing--headline h2 {
    font-size: 2.5rem;
    color: #2EBAD5;
    margin: .5em 0;
}

.container-listing--headline h3 {
    font-size: 1.75rem;
    color: #2EBAD5;
    margin: .5em 0;
}

.container-listing--text p {
    font-family: "Morn-Regular";
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: #2E2D2C;
    margin: 1em 0 .5em 0
}

.container-listing--list ul {
    font-family: "Morn-Regular";
    font-size: 1.25rem;
    line-height: 2rem;
    color: #2EBAD5;
}

.container-listing--list li a {
    color: #2EBAD5;
    display: inline-block;
    position: relative
}

.container-listing--list li::before {
    content: attr(data-icon);
    padding: 0 .5em 0 0;
    color: #2EBAD5
}

.container-listing--list li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #2EBAD5;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    transition: -webkit-transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}

.container-listing--list li a:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
    display: inline-block;
}


/************************************************************************************
*
* POST
*
************************************************************************************/

.center-headline h2 {
    font-size: 2.5rem;
    color: #2E2D2C;
    text-align: center;
    margin: 0 0 .5em 0;
}

.latest-posts {
    display: flex;
    flex-wrap: wrap;
}

.latest-posts > * {
    flex: 1 1 calc(280px + var(--card-margin));
}

.latest-posts--post {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background: #2E2D2C;
    margin: var(--card-margin);
}

.latest-posts--post {
    text-align: center;
    padding: 2em;
}

.latest-posts--post date {
    font-family: "Morn-DemiBold";
    font-size: .875rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff
}

.latest-posts--post h3 {
    font-size: 1.75rem;
    margin: 1em 0;
}

.latest-posts--post h3 a {
    color: #2EBAD5;
}

.latest-posts--post h3 a:hover {
    color: #fff;
}

.latest-posts--post p {
    font-family: "Morn-Regular";
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: #fff;
}

.latest-posts--post button {
    position: relative;
    padding: 2em 1em;
    margin-top: auto;
}

.latest-posts--post button a.button-more {
    display: inline-block;
    border: 0;
    padding: 1em 1.25em;
    font-family: "Morn-Regular";
    font-size: .875rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    background-color: #fff;
    color: #282827;
    letter-spacing: 4px;
    cursor: pointer;
}

.latest-posts--post button a.button-more:hover {
    color: #fff;
    background: #2EBAD5
}

.latest-posts--button {
  display: flex;
  justify-content: center;
  margin: 1em 0 0 0;
}

/************************************************************************************
*
* BEITRÄGE
*
************************************************************************************/

.block-w-inner {
    --max-width: 60em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin-inline: auto
}

.wysiwyg-editor h1 {
    font-size: 2.75rem;
    line-height: 1.1;
}

.wysiwyg-editor p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 1em 0;
}

article.article-post {
    width: 94%;
    display: block;
    position: relative;
    color: #2E2D2C;
}

article.article-post {
    border-top: 1px solid #2E2D2C;
    padding: 2.5rem 0;
}

article.article-post:first-child {
    border-top: 0;
    padding: 0 0 2.5rem 0;
}

.article-post--date date {
    font-family: "Morn-DemiBold";
    font-size: .875rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #2E2D2C;
}

.article-post--title h2 {
    font-size: 2.5rem;
}

.article-post--categories ul {
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #03ACE5;
}

.article-post--categories li a {
    color: #03ACE5
}

.article-post--wysiwyg p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin: 1em 0;
    color: #2E2D2C;
}

a.read-more,
a.button-backlink {
    border: 0;
    padding: 1em 1.25em;
    font-family: "Morn-Regular";
    font-size: .875rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    background-color: #AFD39A;
    color: #282827;
    letter-spacing: 2px;
    cursor: pointer;
}

a.read-more:hover,
a.read-more:focus-visible,
a.button-backlink:hover,
a.button-backlink:focus-visible {
    background-color: #282827;
    color: #AFD39A;
}

.sidebar-widget h2 {
    font-family: "Morn-DemiBold";
    font-size: .875rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #2E2D2C;
}

.sidebar-widget ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1em 0;
}

.sidebar-widget li a {
    color: #03ACE5;
}

.sidebar-widget li a:hover {
    color: #2E2D2C
}

.wp-block-categories-list {
    display: block;
    margin-bottom: 2em
}

.featured-image img {
    width: 100%;
    max-width: 100%;
    height: 600px;
    margin: auto;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover
}

/************************************************************************************
*
* PAGINATION
*
************************************************************************************/

.wp-navigation {
    display: block;
    margin: 2.5em 0
}

.wp-navigation--paginate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-family: "Morn-Regular";
}

span.page-numbers {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    line-height: 50px;
    display: block;
    text-align: center;
    background: #B0D9C5;
    font-family: inherit;
    font-size: 1.2rem;
    color: #fff
}

a.page-numbers {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    line-height: 50px;
    display: block;
    text-align: center;
    background: #fff;
    font-family: inherit;
    font-style: normal;
    font-size: 1.2rem;
    color: #2E2D2C;
    margin-right: .5em
}

a.page-numbers:hover {
    background: #B0D9C5;
    color: #fff
}

span.page-numbers.current {
    margin-right: .5em
}

a.prev.page-numbers {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    line-height: 50px;
    display: block;
    text-align: center;
    background: #fff;
    background-image: url(./assets/icons/icon-arrow-left-02.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-indent: -9999px;
    color: #2E2D2C;
}

a.next.page-numbers {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    line-height: 50px;
    display: block;
    text-align: center;
    background: #fff;
    background-image: url(./assets/icons/icon-arrow-right-02.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-indent: -9999px;
    color: #2E2D2C;
}

/************************************************************************************
*
* DEFAULT EDITOR
*
************************************************************************************/

.container-default--editor {
    --max-width: 80em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin: 0 auto;
    display: block;
    color: #2E2D2C
}

.container-default--editor h1 {
    font-size: 2.5rem;
    line-height: 2.75rem;
}

.container-default--editor h2 {
    font-size: 2rem;
    line-height: 2.75rem;
}

.container-default--editor h3 {
    font-size: 1.75rem;
    line-height: 2.25rem;
}

.container-default--editor h4 {
    font-size: 1.5rem;
    line-height: 2rem;
}

.container-default--editor p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 1em 0 2em 0
}

.container-default--editor ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1em 0
}

.container-default--editor p a, 
.container-default--editor li a {
    color: #03ACE5;
}

.container-default--editor p a:hover,
.container-default--editor li a:hover {
  text-decoration:underline
}

/************************************************************************************
*
* COUNTERS
*
************************************************************************************/

.component-content--block {
    position: relative;
    display: block;
    padding: 2.5rem 1rem;
}

.counters {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

.counters .container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    text-align: center
}

.counters .counter {
    font-family: "Morn-DemiBold";
    font-size: 3rem;
    line-height: 3.25rem;
    color: #fff;
}

@media(max-width:80rem) {
    .counters .container {
        grid-gap: 5px;
        grid-template-columns: repeat(3, 1fr);
    }

    .counters .container > div:nth-of-type(1),
    .counters .container > div:nth-of-type(2) {
        padding-bottom: 2.5rem;
    }
}

@media screen and (max-width: 30em) {

    .counters {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .counter {
        font-family: "Morn-DemiBold";
        font-size: 1.75rem;
        line-height: 2.25rem;
        color: #fff;
    }
    
    .counters .container {
        grid-gap: 5px;
        grid-template-columns: repeat(1, 1fr);
    }

    .counters .container > div:nth-of-type(1),
    .counters .container > div:nth-of-type(2) {
        padding-bottom: 1.5rem;
    }
}

/* ==========================================================================
KONTAKT SEITE
========================================================================== */

.container-row {
    display: block;
    position: relative
}

.container-items {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap
}

.container-items--item {
    display: flex
}

.container-items--item:first-child {
    width: 30%;
    display: flex;
    justify-content: flex-start;
    margin: 0;
}

.container-items--item:last-child {
    width: 62%;
    display: flex;
    justify-content: space-around;
    margin: 0 auto
}

.background-image {
    position: relative;
    overflow: hidden;
    display: block
}

.background-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.item-wp-forms {
    width: 90%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto;
}

/************************************************************************************
*
* Aktuelles
*
************************************************************************************/

.container-main {
    --max-width: 80em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin: 5rem auto 0 auto;
    display: flex;
    justify-content: space-between;
}

.container-main--article {
    width: 75%;
}

.container-main--sidebar {
    width: 25%;
}

@media screen and (min-width: 20em) {
    
    .wysiwyg-editor h1 {
    font-size: 2rem;
    line-height: 1.1;
}

.wysiwyg-editor p {
    font-size: 1rem;
    line-height: 1.5rem;
}
    
        .container-main {
    display: block;
}
    
    .container-main--article {
    width: 100%;
}

.container-main--sidebar {
    width: 100%;
    padding:2.5em 0
}
    
    .article-post--title h2 {
    font-size: 1.75rem;
}

.article-post--categories ul {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #03ACE5;
}

.article-post--categories li a {
    color: #03ACE5
}

.article-post--wysiwyg p {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 1em 0;
    color: #2E2D2C;
}
    
    .sidebar-widget ul {
    font-size: 1rem;
    line-height: 1.5rem;
}
    
    
}

@media screen and (min-width: 40em) {
    
    .wysiwyg-editor h1 {
    font-size: 2.75rem;
    line-height: 1.1;
}

.wysiwyg-editor p {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
    
    .container-main {
    display: flex;
    justify-content: space-between;
}
    
    .container-main--article {
    width: 75%;
}

.container-main--sidebar {
    width: 25%;
    margin:0;
}
    
    .article-post--title h2 {
    font-size: 2.5rem;
}

.article-post--categories ul {
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #03ACE5;
}

.article-post--categories li a {
    color: #03ACE5
}

.article-post--wysiwyg p {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
    
    .sidebar-widget ul {
    font-size: 1rem;
    line-height: 1.75rem;
}
    
    
}

.image-div--wrapper {
    width: 100%;
    display: block;
    position: relative;
    padding: 0 0 18rem 0
}

.image-div img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    object-fit: cover;
    object-position: center
}

.image-div--overlay {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative
}

.overlay-card {
    width: 560px;
    height: auto;
    position: absolute;
    left: 5rem;
    bottom: calc(50% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #fff;
    padding: 2rem;
    z-index: 1;
}

.overlay-card--holder {
    width: 100%;
    margin: 0 0 5rem 0;
    padding: 0;
    position: relative
}

.overlay-card--title h3 {
    font-size: 1.75rem;
    color: #2E2D2C;
}

.overlay-card--text p {
    font-size: 1.25rem;
    line-height: 1.5rem;
    margin: 1rem 0;
    color: #2E2D2C;
}


@media screen and (min-width: 20em) {
    
.overlay-card {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  padding: 2rem;
  left: 0;
}
    
.image-div img {
    display:none
}
    
.content-mobile--image img{
    display:block
}
    
}

@media screen and (min-width: 40em) {
    
.overlay-card {
width: 560px;
    height: auto;
    position: absolute;
    left: 5rem;
    bottom: calc(50% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #fff;
    padding: 2rem;
    z-index: 1;
}
 
.content-mobile--image img{
        display:none
}
    
.image-div img{ 
    display:block
}
    
}

/************************************************************************************
*
* ACCORDION JOBS
*
************************************************************************************/

.component-content--accordion {
    margin: 0
}


.accordion-group {
    position: relative;
    margin: 0 auto;
    text-align: left;
    color: #fff;
}

.accordion-group--block {
    position: relative
}

.accordion-group--block label::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    top: 16px;
    right: 16px;
    background-image: url(assets/icons/icon-arrow-down.svg);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100%;
}

.accordion-group--block label::before {
    visibility: hidden;
    width: 1px;
    height: 1px;
    top: 0;
    position: absolute;
    text-indent: -999
}

.accordion-group--block input:checked + label::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    top: 16px;
    right: 16px;
    background-image: url(assets/icons/icon-arrow-up.svg);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100%;
}

.accordion-group--block input:checked + label {
    background: #2E2D2C;
    border-bottom: none;
}

.accordion-group label {
    display: block;
    margin: 0;
    padding: 1.75rem 2rem;
    cursor: pointer;
    background: #2EBAD5;
    border-bottom: 1px solid #fff;
}

.accordion-group label {
    transition: scale 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

    animation: fadein 0.3s cubic-bezier(1, 0.33, 0.46, 1.1) 1 forwards;
}

.accordion-group label:hover {
    will-change: scale;
    transform: scale(1.02);
}

.accordion-group input label::before {
    display: none;
}

.accordion-group article {
    margin: 0;
    height: 0px;
    position: relative;
    overflow: hidden;

    -webkit-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
}

.accordion-group article {
    margin: 0 auto;
}

.accordion-group--block input:checked ~ article {
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.accordion-group--block input:checked ~ article.ac-small {
    height: 260px;
}

.accordion-group--block input:checked ~ article.ac-medium {
    height: 600px;
}

.accordion-group--block input:checked ~ article.ac-large {
    height: 1800px;
}


.accordion-content {
    display: block;
    position: relative;
}

.accordion-title h2 {
    font-family: "Morn-Regular";
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
    position: absolute;
    top: 1.25rem;
    word-wrap: break-word;
    width: 86%;
}

.accordion-title h3 {
     font-family: "Morn-Regular";
    font-size: 1rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: absolute;
    top: 1.75rem;
    word-wrap: break-word;
    width: 86%;
}

.accordion-content--indent {
    padding: 2rem
}

.accordion-content--indent h3,
.accordion-content--indent h4 {
     font-family: "Morn-Regular";
    font-size: 1.25rem;
    line-height: 2rem;
    margin: .25rem 0;
    color: #fff
}

.accordion-content--image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1em
}

.accordion-content--indent p {
   font-family: "Morn-Regular";
font-size: 1.25rem;
    line-height: 1.75rem;
    margin: 0 0 1.25rem 0
}

.accordion-content--indent p a {
    color: #03278F;
    text-decoration: underline
}

.accordion-content--link ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1em 0;
}

.accordion-content--link li a {
    color: #2EBAD5;
    display: inline-block;
    position: relative
}

.accordion-content--link li::before {
    content: attr(data-icon);
    padding: 0 .5em 0 0;
    color: #2EBAD5
}

.accordion-content--link li a {
    color: #03ACE5;
    display: inline-block;
    position: relative
}

.accordion-content--link li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #2EBAD5;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    transition: -webkit-transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}

.accordion-content--link li a:hover::after {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    display: inline-block;
}
/************************************************************************************
*
* FOOTER
*
************************************************************************************/

.page-footer {
    width: 100%;
}

.page-footer--inner > div {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 2.5rem 1rem;
}

.page-footer--inner > div > * {
    display: flex;
    margin: 1rem 0
}

.page-footer--logo {
    position: relative
}

.page-footer--menu ul {
    font-family: "Morn-Regular";
    font-size: 1rem;
    line-height: 1.75rem;
    display: flex;
}

.page-footer--menu li:last-child {
    padding-left: 2rem
}

.page-footer--menu li a {
    color: #fff
}

.page-footer--menu li a:hover {
    color: #03ACE5;
}

.page-footer--menu li.current_page_item a {
    color: #03ACE5;
}

.page-footer--widget ul {
    font-family: "Morn-Regular";
    font-size: 1rem;
    line-height: 1.75rem;
}

.page-footer--widget li {
    display: list-item
}

ul.website-links {
    display: flex;
}

ul.website-links li a {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin: 0 .5em;
    display: block;
    transition: translateY 0.2s cubic-bezier(.77, .49, .46, 1.15), -webkit-transform 0.2s ease-in;
}

ul.website-links li a:hover{
    will-change: translateY;
    transform: translateY(-4px);
}

.teaser-card--content:hover {
    will-change: translateY;
    transform: translateY(-6px);
}
.page-footer--widget li span {
    font-family: "Morn-Regular";
}

.page-footer--widget li strong {
   font-family: "Morn-DemiBold";
    display: inline-block;
    padding: 0 .5rem 0 0
}

/************************************************************************************
*
* MEDIA QUERIES
*
************************************************************************************/

@media screen and (min-width: 20em) {
     
     .content-head--image {
        display:none
    }
    
    .content-mobile--image {
        display:block
    }
            
    .content-desktop--image {
        display:none
    }
    
    .header-background{
        display:none
    }
            
    .header-background--mobile {
        display:block
    }
    
    .header-background--mobile img {
     width:100%;
         height:auto;
         margin:0;
        display:block
}
    .page-header--icons ul,
    .page-header--links ul {
        display: none;
    }

    .container-block--overlay {
        display: block;
        height: auto;
        background: #2EBAD5;
        padding: 2.5em 2em;
        width: 100%;
        position: relative;
    }

    .overlay-background {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1;
        background-color: #2EBAD5;
        -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    }

    .header-started--bar span {
        display: none;
    }
    
    .header-started--bar {
       display: none;
    }

    .menu-overlay-content {
        width: 100%;
        max-width: 100%;
        margin: 1rem auto;
        padding: 1rem 1rem;
    }

    .menu-container ul {
        font-family: "Morn-DemiBold";
        font-size: 1.75rem;
        line-height: 4rem;
    }
    
    .header-started--content h1 {
    font-size: 2.25rem;
    line-height: 1.1;
}

.header-started--content h2 {
    font-size: 2rem;
}
    .container-block--before h2 {
    font-size: 2rem;
}
    
    .container-listing--headline h2 {
    font-size: 2rem;
}
    
    .header-started--content p {
  width:100%;
  font-size: 1rem;
    line-height: 1.6rem;
}
    
    .article-wysiwyg--content p,
    .article-wysiwyg--content ul{
        width: 100%;
         font-size: 1rem;
    line-height: 1.6rem;
    }
    
    .article-wysiwyg--content ul {
        padding:0 1.25em
    }
    
    .article-wysiwyg--content p a,
    .article-wysiwyg--content li a {
    color:#2EBAD5
    }
    
     .article-wysiwyg--content p a:hover,
    .article-wysiwyg--content li a:hover {
    color:#2EBAD5;
        text-decoration: underline
    }
    
    .container-block--text h1 {
    font-size: 2rem;
}

    .container-block--text h2 {
    font-size: 1.75rem;
}

    .container-block--text h3 {
    font-size: 1.5rem;
}

    .container-block--text p {
    font-size: 1rem;
    line-height: 1.6rem;
}

    .container-block--text ul {
    font-size: 1rem;
    line-height: 1.6rem;
}
    .card-content h3 {
    font-size: 1.25rem;
}

    .card-content ul {
    font-size: 1rem;
    }
    
    .editable-group h1,
    .editable-group h2 {
    font-size: 2rem;
}

    .editable-group p {
    font-size: 1rem;
    line-height: 1.6rem;
}
    
    .accordion {
    font-size: .8rem;
    letter-spacing:1px;
        padding:1em
    }
    
    .accordion-group label {
    display: block;
    margin: 0;
    padding: 3rem 1rem;
    }
    .accordion-title h2 { 
      top: .5rem;
  word-wrap: break-word;
  width: 79%;
  hyphens: auto;
}

    .accordion-group--block input:checked ~ article.ac-small {
    height: 360px;
}

    .accordion-box {
    padding: 1em;
}
    
    .accordion-box h2 {
    font-size: 1.75rem;
    color: #fff;
    margin: .5em 0;
}

.accordion-box h3 {
     font-size: 1.25rem;
    color: #fff;
    margin: .5em 0;
}

.accordion-box h4 {
    font-size: 1.25rem;
    color: #fff;
    margin: .5em 0;
}
    
    .accordion-box p,
    .accordion-box p strong {
        width:96%;
    font-size: 1rem;
    line-height: 1.75rem;
}

.accordion-box ul {
    font-size: 1rem;
}

.accordion-box li {
    display: list-item;
    position: relative
}

    
.accordion-link ul {
    font-size: 1rem;
    line-height: 1.6rem;
    padding:1em

}
     .accordion-content--indent p,
    .accordion-content--link li {
  font-size: 1rem;
  line-height: 1.6rem;
}
    
    .accordion-content--indent {
  padding: 2rem 1rem;
}
    
    .container-block--overlay p {
  font-size: 1rem;
line-height: 1.6rem;
}
    
    .headline-and-list h3 {
    font-size: 1.25rem;
}

.headline-and-list ul {
    font-size: 1rem;
   line-height: 1.6rem;
}
    
    .container-items--item:first-child {
    width: 100%;
}

.container-items--item:last-child {
    width: 100%;
    margin: 0 auto
}
    
    .container-default--editor h1 {
    font-size: 2rem;

}

.container-default--editor h2 {
    font-size: 1.75rem;
}
    
    .container-listing--headline h2 {
    font-size: 2rem;
}

.container-default--editor h3 {
    font-size: 1.5rem;
    line-height: 2.25rem;
}

.container-default--editor h4 {
    font-size: 1.5rem;
    line-height: 2rem;
}

.container-default--editor p {
    font-size: 1rem;
    line-height: 1.6rem;
}

.container-default--editor ul {
    font-size: 1rem;
    line-height: 1.6rem;
    margin: 1em 0
}
    
.latest-posts--post p {
    font-size: 1rem;
    line-height: 1.6rem;
}
    
    .item-wp-forms {
    margin: 2.5em auto;
}
    .editable-group {
  margin: 2.5em auto;
    }
    
    .headline-and-list h2 {
    font-size: 1.75rem;
}
    
   .headline-and-list {
        margin: 2.5em auto;
       padding:1em;
    }
    
    .nav-direct--container {
  margin: 2.5rem 0;
    }
    
    .headline-and-list li a {
  color: #2EBAD5;
  position: relative;
  white-space: normal;
    }
}

@media screen and (min-width: 30em) {
   
}

@media screen and (min-width: 48.75em) {
    
    .content-head--image {
        display:block
    }
    
    .content-mobile--image {
        display:none
    }
            
    .content-desktop--image {
        display:block
    }
    
    .header-background{
        display:block
    }
    
     .header-background img{
         width:100%;
         height:auto;
         margin:0;
        display:block
    }
    
    .header-background--mobile {
        display:none
    }
    
       .header-started--bar span {
    display: block;
    }
    
    .header-started--bar {
   display: block;
    }
    
    .header-started--content p {
  width: 60%;
  font-size: 1.25rem;
}
    
    .article-wysiwyg--content p,
    .article-wysiwyg--content ul{
        width: 80%;
        font-size: 1.25rem;
line-height: 1.875rem;
    }
    
        .container-items--item:first-child {
    width: 30%;
}

.container-items--item:last-child {
    width: 62%;
    margin: 0 auto
}
    
    .accordion-group label {
    display: block;
    margin: 0;
    padding: 1.75rem 2rem;
    }
      .accordion {
       letter-spacing:2px;
    }
    
    .accordion-title {
        padding:.5em 0
    }
    
    .accordion-group--block input:checked ~ article.ac-small {
    height: 260px;
}

    .accordion-group label {
    padding: 1.75rem 2rem;
}
    
    .accordion-title h2 {
    top: 1.5rem;
    word-wrap: break-word;
    width: 86%;
}
    
    .accordion-content--indent p,
    .accordion-content--link li {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
   .accordion-content--indent {
  padding: 2rem;
}
    
    .container-block--overlay p {
  font-size: 1.25rem;
        line-height: 1.875rem;

}
    
    .item-wp-forms {
    margin: 0 auto;
}
    .editable-group {
  margin: 0 auto;
    }
    
   .headline-and-list {
        margin: 0 auto;
       padding:0
    }
    
     .article-wysiwyg--content ul {
        padding:0 0
    }
    
     .nav-direct--container {
  margin: 5rem 0;
    }
    
    
}

@media screen and (min-width: 50em) {

    .container-block--overlay {
        display: block;
        width: 560px;
        position: absolute;
        right: 0;
        bottom: 0;

    }

    .overlay-background {
        width: 100%;
        height: 90vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1;
        background-color: #2EBAD5;
        -webkit-clip-path: polygon(0 0, 100% 0%, 100% 94%, 0 88%);
        clip-path: polygon(0 0, 100% 0%, 100% 94%, 0 88%);
    }

    .menu-overlay-content {
        width: 100%;
        max-width: 90rem;
        margin: 2rem auto;
        padding: 2rem 1rem;
    }

    .menu-container ul {
        font-family: "Morn-DemiBold";
        font-size: 2.5rem;
        line-height: 6rem;
    }
    
    .header-started--content h1 {
    font-size: 2.75rem;
}

.header-started--content h2 {
    font-size: 2rem;
}
    
    .container-block--text h1 {
    font-size: 2.75rem;
}

    .container-block--text h2 {
    font-size: 2.5rem;
}

    .container-block--text h3 {
    font-size: 1.5rem;
}

    .container-block--text p {
    font-size: 1.25rem;
    line-height: 1.875rem;
}

    .container-block--text ul {
    font-size: 1.25rem;
        line-height:2rem
}
    
        .headline-and-list h2 {
    font-size: 2.5rem;
}
    
    .card-content h3 {
    font-size: 1.5rem;
}

    .card-content ul {
    font-size: 1.25rem;
    }
    
    .editable-group h1,
.editable-group h2 {
    font-size: 2.5rem;
}

.editable-group p {
    font-size: 1.25rem;
    line-height: 1.875rem;
}
    
    .accordion-box p {
    font-family: "Morn-Regular";
    font-size: 1.25rem;
        width:92%;
}

.accordion-link ul {
    font-size: 1.25rem;
    line-height: 2rem;
    padding:1em 1.5em
}
    
    .accordion {
    padding: 1em 2.25em;
         font-size: .875rem;
    letter-spacing: 2px;
    }
    
    .accordion-box {
    padding: 2em;
}

    
    .headline-and-list h3 {
    font-size: 2rem;
    line-height: 1;
}

.headline-and-list ul {
    font-size: 1.25rem;
    line-height: 2rem;
}
    
    
    .headline-and-list li a {
  color: #2EBAD5;
  position: relative;
  white-space: normal;
        hyphens: auto
    }
    
    .container-default--editor h1 {
    font-size: 2.5rem;
    line-height: 2.75rem;

}
    
    .container-block--before h2 {
    font-size: 2.5rem;
}

.container-default--editor h2 {
    font-size: 2rem;
    line-height: 2.75rem;
}

.container-default--editor h3 {
    font-size: 1.75rem;
    line-height: 2.25rem;
}

.container-default--editor h4 {
    font-size: 1.5rem;
    line-height: 2rem;
}

.container-default--editor p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 1em 0 2em 0
}

.container-default--editor ul {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1em 0
}
    
    .latest-posts--post p {
    font-size: 1.25rem;
    line-height: 1.875rem;
}


}

@media screen and (min-width: 52.5em) {
    .page-header--icons ul,
    .page-header--links ul {
        display: flex;
    }

}