/* to be migrated to less */

.illustration-container {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /*border-bottom: 2px dotted rgb(0,0,0);*/
    margin-bottom: 2rem;

    @media (min-width: 768px) {
        display: grid;
        --gap: 0px;
        --line-offset: calc(var(--gap) / 2);
        --line-thickness: 2px;
        --line-color: rgb(251, 199, 7);
    }
}
@media (min-width: 768px) {
    .illustration-container.illustration-container__grid1 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 2fr;
        grid-column-gap: 1px;
        grid-row-gap: 1px;
        border-bottom: 2px solid rgb(251, 199, 7);
        padding-bottom: 1rem;
    }
    .illustration-container.illustration-container__grid2 {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 6fr;
        grid-column-gap: 1px;
        grid-row-gap: 1px;
        border-bottom: 2px solid rgb(251, 199, 7);
        padding-bottom: 1.5rem;
    }
    .illustration-container.illustration-container__grid3 {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(6, 1fr);
        grid-column-gap: 0;
        grid-row-gap: 0;
        border-bottom: 2px solid rgb(251, 199, 7);
        padding-bottom: 1.5rem;
    }
    .illustration-container.illustration-container__grid4 {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 1px;
        grid-row-gap: 1px;
    }
}

.illustration-container img {
    max-width: 100%;
    height: auto;
}
.area {
    position: relative;
}

.area8::before,
.area13::before,
.area14::before {
    content: '';
    position: absolute;
    background-color: var(--line-color);
    z-index: 1;
}
.area::before {
    inline-size: var(--line-thickness);
    block-size: 100%;
    inset-block-start: 0;
    inset-inline-start: calc(var(--line-offset) * -1);
}

.area1 { grid-area: 1 / 1 / 2 / 4; }
.area2 { grid-area: 2 / 1 / 3 / 2; }
.area3 { grid-area: 2 / 2 / 3 / 3; }
.area4 { grid-area: 2 / 3 / 3 / 4; }

.area5 {
    grid-area: 1 / 1 / 4 / 8;
}
.area5 .inner{
    padding: 0 0 1rem 0;
}
.area6 {
    grid-area: 4 / 1 / 6 / 9;
}
.area6 .inner{
    margin: 0 2.5rem 0 0;
    padding: 1rem 0 0 0;
    border-top: 2px solid rgb(251, 199, 7);
}
.area7 {
    grid-area: 1 / 9 / 3 / 13;
    @media (min-width: 768px) {
        padding-top: 24px;
    }
}
.area7 .inner{
    margin: 0 0 0 2.5rem;
    padding: 0 0 1rem 0;
    border-bottom: 2px solid rgb(251, 199, 7);
}
.area8 {
    grid-area: 3 / 9 / 6 / 13;
}
.area8 .inner{
    margin: 0 0 0 2.5rem;
    padding: 1rem 0 1rem 0;
}
.area9 {
    grid-area: 1 / 8 / 4 / 9;
    @media (min-width: 768px) {
        padding-top: 64px;
    }
}

.area10 {
    grid-area: 1 / 1 / 3 / 7;
}
.area10 .inner {
    margin: 0 1.5rem 0 0;
    padding: 0 0 1rem 0;
    border-bottom: 2px solid rgb(251, 199, 7);
}
.area11 {
    grid-area: 3 / 1 / 5 / 7;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.area12 {
    grid-area: 5 / 1 / 7 / 7;
    padding-top: 1rem;
}
.area12 .inner {
    margin: 0 1.5rem 0 0;
    padding: 1rem 0 0 0;
    border-top: 2px solid rgb(251, 199, 7);
}
.area13 {
    grid-area: 1 / 7 / 4 / 13;
}
.area13 .inner {
    margin: 0 0 0 1.5rem;
    padding: 0 0 1rem 0;
    border-bottom: 2px solid rgb(251, 199, 7);
}
.area14 {
    grid-area: 4 / 7 / 7 / 13;
    padding-top: 1rem;
}
.area14 .inner {
    margin: 1.5rem 0 0 1rem;
}

.area15 { grid-area: 1 / 1 / 2 / 6; }
.area16 { grid-area: 1 / 6 / 2 / 13; }

.illustration-col {

}

/* Slickslider */
.slick-slide {
    height: initial;
}
/* Header */
#oben {
    padding-top: 82px;
}

@media (max-width: 639px) {
    #oben {
        padding-top: 40px;
    }
}

/* Color schemes */
.style2 sub {
    color: inherit;
}

/* Nur den Hinweis "* Pflichtfeld" */
.tx-formform p:first-of-type {
    font-size: 13px;
    line-height: 1.4;
}

/* TYPO3-Formular: Hinweis „* Pflichtfeld“ */
form p {
    font-size: 13px !important;
}