.site-content {
    position: relative;
    width: 100%;
    min-height: 600px;
    background-color: var(--color-royal-blue-dark);
    background-image: url("/assets/images/default/backgrounds/background-content-blue-01.png");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;
}

.site-content__frame {
    position: relative;
    width: 100%;
    min-height: 600px;
}

.site-content__frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 90px;
    bottom: 18px;
    left: 90px;
    pointer-events: none;
    background:
        url("/assets/images/default/frames/frame-line-double-01-h.png") top left / auto 10px repeat-x,
        url("/assets/images/default/frames/frame-line-double-01-h.png") bottom left / auto 10px repeat-x;
}

.site-content__frame::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 70px;
    right: 12px;
    bottom: 70px;
    left: 12px;
    pointer-events: none;
    background:
        url("/assets/images/default/frames/frame-line-double-01-v.png") top left / 10px auto repeat-y,
        url("/assets/images/default/frames/frame-line-double-01-v.png") top right / 10px auto repeat-y;
}

.site-content__corner {
    position: absolute;
    z-index: 2;
    width: 117px;
    height: auto;
    pointer-events: none;
}

.site-content__corner--tl {
    top: 0;
    left: 0;
}

.site-content__corner--tr {
    top: 0;
    right: 0;
}

.site-content__corner--bl {
    bottom: 0;
    left: 0;
}

.site-content__corner--br {
    right: 0;
    bottom: 0;
}

.site-content__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    min-height: 600px;
    margin: 0;
    padding: 42px 34px;
}


/* ---------------------------------------------------------
   CONTENT-RASTER – VERSION 01
   --------------------------------------------------------- */

.content-grid {
    position: relative;
    display: grid;
    width: 100%;
}

.content-grid--version-01 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, 250px);
    gap: 10px;
}


/* ---------------------------------------------------------
   POSITIONEN DER MODULE – VERSION 01
   --------------------------------------------------------- */

.content-panel--large {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.content-panel--banner {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
}

.content-panel--small:nth-of-type(3) {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.content-panel--small:nth-of-type(4) {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}

.content-panel--small:nth-of-type(5) {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
}


/* ---------------------------------------------------------
   CONTENT-RASTER – VERSION 02
   11 Teile: 5 / 3 / 3
   --------------------------------------------------------- */

.content-grid--version-02 {
    grid-template-columns: 5fr 3fr 3fr;
    grid-template-rows: 333px;
    gap: 10px;
    margin-top: 10px;
}

.content-panel--row-02-wide,
.content-panel--row-02-medium {
    min-width: 0;
}


/* ---------------------------------------------------------
   GEMEINSAME PANEL-STRUKTUR
   --------------------------------------------------------- */

.content-panel {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
}


/* ---------------------------------------------------------
   PANEL-HINTERGRÜNDE
   --------------------------------------------------------- */

.content-panel--large {
    background-image: url("/assets/images/default/backgrounds/background-parchment-01-card.png");
    background-repeat: no-repeat;
    background-position: 2px 6px;
    background-size: calc(100% - 2px) calc(100% - 14px);
}

.content-panel__background-image {
    position: absolute;
    z-index: 1;
    top: 3px;
    right: 2px;
    bottom: 1px;
    left: 2px;
    display: block;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: cover;
    pointer-events: none;
}


/* ---------------------------------------------------------
   INNERER RAHMEN – SINGLE LINES
   --------------------------------------------------------- */

.content-panel::before,
.content-panel::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.content-panel::before {
    top: 6px;
    right: 50px;
    bottom: 4px;
    left: 50px;
    background:
        url("/assets/images/default/frames/frame-line-single-01-h.png") top left / auto 6px repeat-x,
        url("/assets/images/default/frames/frame-line-single-01-h.png") bottom left / auto 6px repeat-x;
}

.content-panel::after {
    top: 50px;
    right: -2px;
    bottom: 50px;
    left: 2px;
    background:
        url("/assets/images/default/frames/frame-line-single-01-v.png") top left / 6px auto repeat-y,
        url("/assets/images/default/frames/frame-line-single-01-v.png") top right / 6px auto repeat-y;
}


/* ---------------------------------------------------------
   INNERER RAHMEN – INNER 02
   VERSION 01: BANNER + KLEINE FELDER
   VERSION 02: ALLE DREI FELDER
   --------------------------------------------------------- */

.content-panel--banner::before,
.content-panel--small::before,
.content-panel--row-02-wide::before,
.content-panel--row-02-medium::before {
    top: 3px;
    right: 32px;
    bottom: 1px;
    left: 32px;
}

.content-panel--banner::after,
.content-panel--small::after,
.content-panel--row-02-wide::after,
.content-panel--row-02-medium::after {
    top: 32px;
    right: 0;
    bottom: 32px;
    left: 2px;
}


/* ---------------------------------------------------------
   INNER FRAME CORNERS
   --------------------------------------------------------- */

.content-panel__corner {
    position: absolute;
    z-index: 3;
    width: 72px;
    height: auto;
    pointer-events: none;
}

.content-panel__corner--small {
    width: 48px;
}

.content-panel__corner--tl {
    top: 0;
    left: 0;
}

.content-panel__corner--tr {
    top: 0;
    right: 0;
}

.content-panel__corner--bl {
    bottom: 0;
    left: 0;
}

.content-panel__corner--br {
    right: 0;
    bottom: 0;
}


/* ---------------------------------------------------------
   PANEL-INHALT
   --------------------------------------------------------- */

.content-panel__body {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 100%;
}


/* ---------------------------------------------------------
   RECHTLICHE / ALLGEMEINE TEXTSEITEN
   --------------------------------------------------------- */

.legal-content {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background-image: url("/assets/images/default/backgrounds/background-parchment-01-card.png");
    background-repeat: repeat;
    background-position: top left;
}

.legal-content__body {
    position: relative;
    padding: 52px 64px 58px;
}

.legal-content__title {
    margin: 0 0 34px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
    line-height: 1.15;
    text-align: center;
}

.legal-content__heading {
    margin: 30px 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    line-height: 1.3;
}

.legal-content__body p {
    margin: 0 0 18px;
    line-height: 1.6;
}

.legal-content__body p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 760px) {
    .site-content,
    .site-content__frame,
    .site-content__inner {
        min-height: 0;
    }

    .site-content__frame::before {
        top: 9px;
        right: 46px;
        bottom: 10px;
        left: 46px;

        background-size:
            auto 4px,
            auto 4px;
    }

    .site-content__frame::after {
        top: 38px;
        right: 7px;
        bottom: 38px;
        left: 7px;

        background-size:
            4px auto,
            4px auto;
    }

    .site-content__corner {
        width: 58px;
    }

    .site-content__inner {
        padding: 32px 22px;
    }

    .content-grid--version-01,
    .content-grid--version-02 {
        gap: 10px;
    }

    .content-grid--version-01 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .content-grid--version-01 > .content-panel {
        grid-row: auto;

        min-height: 0;
    }

    .content-panel--large {
        grid-column: 1 / 4;

        aspect-ratio: 3 / 2;
    }

    .content-panel--banner {
        grid-column: 1 / 4;

        aspect-ratio: 3 / 1;
    }

    .content-panel--small:nth-of-type(3) {
        grid-column: 1 / 2;

        aspect-ratio: 1 / 1;
    }

    .content-panel--small:nth-of-type(4) {
        grid-column: 2 / 3;

        aspect-ratio: 1 / 1;
    }

    .content-panel--small:nth-of-type(5) {
        grid-column: 3 / 4;

        aspect-ratio: 1 / 1;
    }

    .content-grid--version-02 {
        grid-template-columns: 5fr 3fr 3fr;
        grid-template-rows: max(76px, calc(22.222vw - 9.778px));
    }

    .content-grid--version-02 > .content-panel {
        grid-row: 1;

        min-height: 0;
    }

    .content-panel--row-02-wide {
        grid-column: 1 / 2;
    }

    .content-panel--row-02-medium:nth-of-type(2) {
        grid-column: 2 / 3;
    }

    .content-panel--row-02-medium:nth-of-type(3) {
        grid-column: 3 / 4;
    }

    .content-grid--version-02 .content-panel__corner--small {
        width: 32px;
    }

    .legal-content__body {
        padding: 38px 24px 44px;
    }

    .legal-content__title {
        margin-bottom: 26px;

        font-size: 1.75rem;
    }

    .legal-content__heading {
        overflow-wrap: anywhere;
    }
}
