:root {
    --lh: .8;
}

[data-block="startbild"] {
    width: 100%;
    padding: 0 var(--gutter);
    margin-left: auto;
    margin-right: auto;
}

[data-block="startbild"] picture {
    display: block;
}

[data-block="startbild"] img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/4;
}

@media screen and (orientation: landscape) {
    [data-block="startbild"] img {
        aspect-ratio: 2.35/1;
    }
}

[data-block="bild"] img {
    width: 100%;
    height: auto;
}

[data-block="video"] video {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
}

[data-block="galerie"] .swiper-slide {
    width: 100%;
    aspect-ratio: 3/2;
}

@media screen and (min-width: 768px) {
    [data-block="galerie"] .swiper-slide {
        aspect-ratio: 16/9;
    }
}

[data-block="galerie"] .swiper-slide img {
    object-position: center center;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-block="galerie"] .swiper-button-next,
[data-block="galerie"] .swiper-button-prev {
    color: var(--clr-primary) !important;
    width: var(--space-l);
    height: var(--space-l);
}

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

    [data-block="galerie"] .swiper-button-next,
    [data-block="galerie"] .swiper-button-prev {
        width: var(--space-xl);
        height: var(--space-xl);
    }
}

[data-block="animated"] {
    user-select: none;
    padding: 0 var(--gutter);
}

[data-block="animated"] span {
    display: block;
    width: 100%;
    font-size: var(--step-7);
    font-family: "Gadget", sans-serif;
    text-align: left;
    line-height: var(--lh);
    padding: 0;
    color: black;
    padding-bottom: .07em;
}

@media screen and (min-width: 768px) {
    [data-block="animated"] span {
        font-size: var(--step-8);
    }
}

[data-block="titel"] {
    user-select: none;
    padding: 0 var(--gutter);
    display: block;
    width: 100%;
    font-size: var(--step-7);
    font-family: "Gadget", sans-serif;
    text-align: left;
    line-height: var(--lh);
    color: black;
    padding-bottom: .07em;
}

@media screen and (min-width: 768px) {
    [data-block="titel"] {
        font-size: var(--step-8);
    }
}

[data-block="titel"]+[data-block="startbild"],
[data-block="animated"]+[data-block="startbild"] {
    margin-top: 0;
}

[data-block="startbild"]+[data-block="titel"],
[data-block="startbild"]+[data-block="animated"] {
    margin-top: 0;
}

/* referenzen */
:root {
    --ideal-size: 150px;
    --max-column-count: 3;
}

@media screen and (min-width: 1024px) {
    :root {
        --ideal-size: 300px;
        --max-column-count: 4;
    }
}

[data-block="referenzen"] ul {
    display: grid;
    text-align: center;
    width: 100%;
    gap: var(--space-xs);
    grid-template-columns: repeat(auto-fit,
            minmax(min(max(100% / var(--max-column-count), var(--ideal-size)), 100%),
                1fr));
}

[data-block="referenzen"] ul li img {
    width: 100%;
}

[data-block="spacing"] [data-spacing] {
    margin: 0;
    user-select: none;
    pointer-events: none;
}

[data-spacing="large"] {
    height: var(--space-xl) !important;
}

[data-spacing="medium"] {
    height: var(--space-l) !important;
}

[data-spacing="small"] {
    height: var(--space-s) !important;
}

/* back-button */
[data-block="back-button"] {
    margin-top: .5rem;
}

[data-block="back-button"] a {
    font-family: "Haas-Medium";
    font-size: 32px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

@media screen and (min-width: 768px) {
    [data-block="back-button"] a {
        font-size: 40px;
    }
}

[data-block="back-button"] a svg {
    width: auto;
    height: .75em;
    padding-right: .5em;
}

/* akkordion */
:root {
    --cc-border: 2px;
    --cc-padding: .75rem 0rem .75rem .75rem;
    --cc-maxw: 100%;
    --cc-margin: 1rem;
}

@media screen and (min-width: 1024px) {
    :root {
        --cc-border: 3px;
        --cc-padding: 1.4rem 0rem 1.4rem 1.4rem;
        --cc-maxw: 951px;
        --cc-margin: 2rem;
    }
}

.accordionjs {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    max-width: var(--cc-maxw);
}

@media screen and (min-width: 1024px) {
    .accordionjs {
        max-width: var(--cc-maxw);
    }
}

.accordionjs .acc_section {
    position: relative;
    overflow: hidden;
}

.accordionjs .acc_section .acc_head {
    font-family: "Haas-Medium", sans-serif;
    font-size: var(--step-2);

    position: relative;
    cursor: pointer;
    padding: var(--space-xs) 0;
    border-top: var(--cc-border) solid black;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    user-select: none;
}

@media screen and (min-width: 1024px) {
    .accordionjs .acc_section .acc_head {
        padding: var(--space-xs) 0;
    }
}

.accordionjs .acc_section:last-child {
    border-bottom: var(--cc-border) solid black;
}

.accordionjs .acc_section .acc_head h3 {
    line-height: 1;
    margin: 5px 0;
}

.accordionjs .acc_section .acc_content {
    padding: var(--cc-padding);
    margin-bottom: var(--cc-margin);
}


.accordionjs .acc_section.acc_active>.acc_content {
    display: block;
}

.more-btn {
    color: var(--clr-primary);
    font-size: var(--step-2);
    padding: 0.15rem .5rem 0rem .5rem;
    line-height: 1.1;
    background-color: black;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: inline-block;
    font-family: "Gadget", serif;

    margin-right: 2px;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, .5);
}

.more-btn.less {
    display: none;
}

.acc_active .acc_head .more-btn.less {
    display: flex;
}

.acc_active .acc_head .more-btn.more {
    display: none;
}

/* block-styles */
.block-styles {
    font-family: "Haas-Regular", sans-serif;
    font-size: var(--lauftext-20-30);
}

.block-styles strong {
    font-family: "Haas-Medium", sans-serif;
}

.block-styles h1,
.block-styles h2,
.block-styles h3 {
    width: 100%;
    word-break: keep-all;
}

.block-styles h1 {
    font-size: var(--step-6);
    font-family: "Gadget", serif;
    line-height: .8;
}

.block-styles p {
    font-family: "Haas-Regular", sans-serif;
    font-size: var(--step-0);
    line-height: 1.3;
}

.block-styles h2 {
    font-size: var(--step-2);
    font-family: "Haas-Medium", sans-serif;
}

.block-styles h3 {
    margin-bottom: 0;
    font-size: var(--step-1);
    font-family: "Haas-Medium", sans-serif;
}

.block-styles h4 {
    margin-bottom: 0;
    font-size: var(--step-0);
    font-family: "Haas-Medium", sans-serif;
}

.block-styles h2+ul,
.block-styles h3+ul,
.block-styles h4+ul,
.block-styles h2+p,
.block-styles h3+p,
.block-styles h4+p,
.block-styles h5+p {
    margin-top: var(--flow-xs);
}

.block-styles strong {
    font-weight: bold;
}

.block-styles ol,
.block-styles ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    list-style-position: outside;
}

.block-styles ol {
    list-style-type: decimal;
}

.block-styles li {
    list-style-type: disc;
    margin-left: .5rem;
    margin-bottom: .25rem;
    font-size: var(--step-0);
}

.block-styles li::marker {
    color: var(--clr-dark, black);
}

.block-styles p.contains-image {
    display: flex;
    justify-content: flex-start;
}

@media screen and (min-width: 640px) {
    .block-styles p.contains-image {
        justify-content: flex-end;
    }
}

.block-styles a {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--clr-dark, black);
}

strong {
    font-family: "Haas-Medium", sans-serif;
}