.pageelement-contactbox {
    padding: 3rem 0;
}

.pageelement-contactbox .content-container {
    padding: 0;
    justify-content: flex-start;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.pageelement-contactbox .left-column,
.pageelement-contactbox .right-column {
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    flex: 1;
}

.pageelement-contactbox .left-column.small {
    width: 25%;
    max-width: 18.75rem;
}

.pageelement-contactbox .right-column.small {
    width: 75%;
}

.pageelement-contactbox .left-column, .pageelement-contactbox .contactbox-image img {
    border-top-left-radius: var(--radius-default);
    border-bottom-left-radius: var(--radius-default);
}

.pageelement-contactbox .right-column {
    border-top-right-radius: var(--radius-default);
    border-bottom-right-radius: var(--radius-default);
}


.pageelement-contactbox .contactbox-image,
.pageelement-contactbox .contactbox-fallback-image {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;

    border-top-left-radius: var(--radius-default);
    border-bottom-left-radius: var(--radius-default);
}

.pageelement-contactbox .left-column.small .contactbox-image,
.pageelement-contactbox .left-column.small .contactbox-fallback-image {
    max-width: 18.75rem;
}

.pageelement-contactbox .left-column img {
    width: 100%;
    max-height: 25rem;
    object-fit: cover;
    height: auto;
    display: block;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.pageelement-contactbox .left-column.small .contactbox-image img {
    max-width: 18.75rem;
}

.pageelement-contactbox .contactbox-fallback-image {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7F7F7F;
}

.pageelement-contactbox .contactbox-fallback-image i {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-size: 4.375rem;
    color: #fff;
}

.pageelement-contactbox .contactbox-image .ai-mark {
    position: absolute;
    bottom: 1.25rem;
    right: 0.625rem;
}

.pageelement-contactbox .contactbox-image .ai-mark:before {
    content: '';
    background: url(/_images/ai-mark.svg) no-repeat;
    height: 1.5625rem;
    width: 1.5625rem;
    display: block;
    opacity: .4;
}

.pageelement-contactbox .contactbox-copyright {
    position: absolute;
    bottom: 0.5rem;
    right: 3rem;
    margin: 0;
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    z-index: 5;
    background: transparent;
}

.pageelement-contactbox .contactbox-image::after {
    content: '';
    position: absolute;
    top: -0.125rem;
    bottom: -0.125rem;
    right: -0.125rem;
    aspect-ratio: 100 / 400;
    transform: none;
    -webkit-mask: url('/_images/Pfad_377.svg') no-repeat center / contain;
    mask: url('/_images/Pfad_377.svg') no-repeat center / contain;
    z-index: 3;
    pointer-events: none;
}

.pageelement-contactbox.textbg-white .contactbox-image::after {
    background: #ffffff;
    box-shadow: 0.125rem 0 0 #ffffff;
}

.pageelement-contactbox.textbg-grey .contactbox-image::after {
    background: #f0f0f0;
    box-shadow: 0.125rem 0 0 #f0f0f0;
}


.pageelement-contactbox .text {
    margin-left: 0;
    padding: 1.875rem 2.5rem 1.25rem 2.5rem;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 1.125rem;
}

.pageelement-contactbox .contactbox-name {
    font-weight: 700;
}

.pageelement-contactbox .contactbox-position,
.pageelement-contactbox .contactbox-email {
    margin-bottom: 0.625rem;
}

.pageelement-contactbox .contactbox-comment {
    white-space: pre-line;
}


.pageelement-contactbox .contactbox-telephone::before {
    content: '\f095';
}

.pageelement-contactbox .contactbox-mobilephone::before {
    content: '\f3ce';
}

.pageelement-contactbox .contactbox-email::before {
    content: '\f0e0';
}

.pageelement-contactbox .contactbox-telefax::before {
    content: '\f1ac';
}

.pageelement-contactbox .contactbox-telephone::before,
.pageelement-contactbox .contactbox-mobilephone::before,
.pageelement-contactbox .contactbox-email::before,
.pageelement-contactbox .contactbox-telefax::before {
    width: 1.5625rem;
    font-size: 1.125rem;
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 900;
    display: inline-block;
}

.pageelement-contactbox a.contactbox-telephone,
.pageelement-contactbox a.contactbox-mobilephone,
.pageelement-contactbox a.contactbox-email,
.pageelement-contactbox a.contactbox-telefax {
    display: table;
    width: fit-content;
    max-width: 100%;
    line-height: 1.75rem;
    font-size: 1.125rem;
}

.pageelement-contactbox a {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: var(--link-underline-thickness);
}

.pageelement-contactbox a:hover {
    text-decoration-thickness: var(--link-underline-thickness-hover);
}

.pageelement-contactbox .contactbox-button {
    background: var(--bg, #EE7D00);
    color: var(--fg, #000000);

    margin-top: 1.5rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    width: auto;
    max-width: 100%;
    min-width: 16rem;
    min-height: var(--button-min-height);

    padding:  var(--button-padding-y) var(--button-padding-x);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: normal;
    text-align: center;

    border-radius: var(--radius-default);
    text-decoration: none;

    box-shadow: inset 0 0 0 0 var(--bg, #EE7D00);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.pageelement-contactbox .contactbox-button:hover {
    background: #ffffff;
    color: #000000;
    box-shadow: inset 0 0 0 0.188rem var(--bg, #EE7D00);
}

.pageelement-contactbox .contactbox-button:hover * {
    color: #000000;
}


.pageelement-contactbox .heading-container {
    width: 100%;
    max-width: 87.5rem;
    display: block;
    margin: 0 auto 1.25rem;
    box-sizing: border-box;
}

.pageelement-contactbox .content-container {
    display: flex;
    align-items: stretch;
}

.pageelement-contactbox .contactbox-image {
    height: 100%;
}

.pageelement-contactbox .contactbox-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


@media only screen and (max-width: 87.5rem) {
    .pageelement-contactbox .content-container {
        padding: 1.25rem;
    }

    .pageelement-contactbox .heading-container {
        padding: 0 1.25rem;
    }
}

@media screen and (max-width: 64.375rem) {
    .pageelement-contactbox .content-container {
        flex-direction: column;
        flex-wrap: nowrap;
        min-height: 0;
        gap: 0;
        align-items: stretch;
    }

    .pageelement-contactbox .contactbox-button {
        width: 100%;
        display: flex;
    }

    .pageelement-contactbox .left-column,
    .pageelement-contactbox .right-column {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        flex: none;
    }

    .pageelement-contactbox .contactbox-image::after {
        display: none !important;
        content: none !important;
    }

    .pageelement-contactbox .contactbox-image,
    .pageelement-contactbox .contactbox-fallback-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* oder 4/3 wenn dir das besser gefällt */
        aspect-ratio: 7 / 4;
        border-radius: var(--radius-default) var(--radius-default) 0 0;
        overflow: hidden;
        margin: 0;
    }

    .pageelement-contactbox .contactbox-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: none;
        max-height: none;
        display: block;
        object-position: center top;
        border-bottom-left-radius: 0;

    }
    .pageelement-contactbox .left-column.small .contactbox-image,
    .pageelement-contactbox .left-column.small .contactbox-fallback-image {
        aspect-ratio: 3 / 4;
        max-width: 100%;
    }

    .pageelement-contactbox .left-column.small .contactbox-image img {
        max-width: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
    .pageelement-contactbox .contactbox-copyright {
        right: 0;
    }

    .pageelement-contactbox .left-column {
        border-radius: var(--radius-default) var(--radius-default) 0 0;
    }

    .pageelement-contactbox .right-column {
        border-radius: 0 0 var(--radius-default) var(--radius-default);
    }

    .pageelement-contactbox .text {
        padding: 1.25rem 1.25rem 1.25rem 1.25rem;
        margin-left: 0;
    }
}

@media screen and (max-width: 32.5rem) {

    .pageelement-contactbox .contactbox-copyright {
        margin-top: 0;
    }

    .pageelement-contactbox .text {
        margin: 0;
        padding: 1.25rem;
    }

    .pageelement-contactbox .left-column.small,
    .pageelement-contactbox .right-column.small {
        width: 100% !important;
        max-width: 100%;
    }
}

.pageelement-teaser-start {
    overflow: visible;
    box-sizing: border-box;
}

.teaser-start {
    max-width: 87.5rem;
    margin: 0 auto;
    margin-bottom: 6.25rem;
}

/* Grid */
.teaser-start__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Box */
.teaser-start__box {
    background: var(--bg);
    color: var(--fg);
    border-radius: var(--radius-default);
    padding: 2.5rem;
    text-align: center;
    box-sizing: border-box;
}

/* Headline */
.teaser-start__headline {
    margin: 0.5rem 0 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: inherit;
}

/* Icon */
.teaser-start__icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: inherit;
}

.teaser-start__icon:before {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 900;
    font-size: 2.25rem;
    line-height: 1;
    color: currentColor;
    content: '';
}

/* Icon mapping */
.teaser-start__icon.icon-alarm:before {
    content: '\f34e';
}

.teaser-start__icon.icon-calendar:before {
    content: '\f073';
}

.teaser-start__icon.icon-info:before {
    content: '\f05a';
}

/* Text */
.teaser-start__text {
    margin: 0.75rem 0 1.5rem;
}

/* texteditor darf fg nicht überschreiben */
.teaser-start__box .texteditor,
.teaser-start__box .texteditor * {
    color: inherit !important;
}

/* CTA */
.teaser-start__button {
    display: flex;
    justify-content: center;
}

.teaser-start__cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 16rem;
    max-width: 100%;

    padding: var(--button-padding-y) var(--button-padding-x);
    border-radius: var(--radius-default);
    border: 0.188rem solid transparent;
    transition: background .2s ease, border-color .2s ease;
    background: #fff;
    color: #000;

    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 700;
    box-sizing: border-box;
}

.teaser-start__cta:hover {
    background: transparent;
    border-color: #fff;
    color: var(--fg);
}

.teaser-start__cta:focus-visible {
    outline: var(--outline);
    outline-offset: var(--outline-offset);
}

/* Banner */
.teaser-start__banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    margin-top: 1.5rem;
    padding: 1rem 1.5rem;

    background: var(--bg);
    color: var(--fg);

    border-radius: var(--radius-default);
    text-decoration: none;
    font-weight: 700;

    outline: 0 solid transparent;
    transition: outline-color .2s ease;
}

.teaser-start__banner:hover,
.teaser-start__banner:focus-visible {
    outline: var(--card-outline-width) solid var(--card-outline-color);
    outline-offset: var(--card-outline-offset);
}

.teaser-start__banner-icon {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: inherit;
}

.teaser-start__banner-icon:before {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
    color: currentColor;
    content: '\f05a';
}

.teaser-start__banner-text {
    color: inherit;
    font-weight: inherit;
}

@media (max-width: 87.5rem) {
    .pageelement-teaser-start {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* Responsive */
@media (max-width: 60rem) {
    .teaser-start__grid {
        grid-template-columns: 1fr;
    }

    .teaser-start__box {
        padding: 2rem 1.5rem;
    }

    .teaser-start__cta {
        width: 100%;
        max-width: 20rem;
    }

    .teaser-start {
        margin-bottom: 4.375rem;
    }
}