@layer fonts {
    @font-face {
        font-family: Bebas Neue;
        font-style: normal;
        font-weight: 400;
        src: url(../fonts/BebasNeue-Regular.woff2) format("woff2")
    }

    @font-face {
        font-family: PT Sans;
        font-style: normal;
        font-weight: 400;
        src: url(../fonts/PTSans-Regular-Latin.woff2) format("woff2");
        unicode-range: U+0020-007F,U+00A0-00FF
    }

    @font-face {
        font-family: PT Sans;
        font-style: normal;
        font-weight: 400;
        src: url(../fonts/PTSans-Regular-LatinExtended.woff2) format("woff2");
        unicode-range: U+0100-024F,U+0250-02AF
    }

    @font-face {
        font-family: PT Sans Italic;
        font-style: italic;
        font-weight: 400;
        src: url(../fonts/PTSans-Italic-Latin.woff2) format("woff2");
        unicode-range: U+0020-007F,U+00A0-00FF
    }

    @font-face {
        font-family: PT Sans Italic;
        font-style: italic;
        font-weight: 400;
        src: url(../fonts/PTSans-Italic-LatinExtended.woff2) format("woff2");
        unicode-range: U+0100-024F,U+0250-02AF
    }

    @font-face {
        font-family: PT Sans Bold;
        font-style: normal;
        font-weight: 700;
        src: url(../fonts/PTSans-Bold-Latin.woff2) format("woff2");
        unicode-range: U+0020-007F,U+00A0-00FF
    }

    @font-face {
        font-family: PT Sans Bold;
        font-style: normal;
        font-weight: 700;
        src: url(../fonts/PTSans-Bold-LatinExtended.woff2) format("woff2");
        unicode-range: U+0100-024F,U+0250-02AF
    }

    @font-face {
        font-family: PT Sans Bold Italic;
        font-style: italic;
        font-weight: 700;
        src: url(../fonts/PTSans-BoldItalic-Latin.woff2) format("woff2");
        unicode-range: U+0020-007F,U+00A0-00FF
    }

    @font-face {
        font-family: PT Sans Bold Italic;
        font-style: italic;
        font-weight: 700;
        src: url(../fonts/PTSans-BoldItalic-LatinExtended.woff2) format("woff2");
        unicode-range: U+0100-024F,U+0250-02AF
    }
}

@layer tokens {
    :root {
        --maxWidthBody: 2440px;
        --maxWidthContent: 100vw;
        --baseUnit: calc(100% / 24);
        --Document-gridTemplateColumns: [full-start] 1fr [content-start] min(100%, var(--maxWidthContent)) [content-end] 1fr [full-end];
        --bannerCompactHeight: 4.8rem;
        --documentBorderWidth: 6px;
        --documentBorderInlineWidth: 0px;
        --spacing4: .4rem;
        --spacing8: .8rem;
        --spacing12: 1.2rem;
        --spacing16: 1.6rem;
        --spacing20: 2rem;
        --spacing24: 2.4rem;
        --spacing32: 3.2rem;
        --spacing40: 4rem;
        --spacing48: 4.8rem;
        --spacing56: 5.6rem;
        --spacing64: 6.4rem;
        --spacing80: 8rem;
        --size1: .4rem;
        --size2: .8rem;
        --size3: 1.2rem;
        --size4: 1.6rem;
        --size5: 2rem;
        --size6: 2.4rem;
        --size7: 3.2rem;
        --size8: 4rem;
        --size9: 4.8rem;
        --size10: 5.6rem;
        --size11: 6.4rem;
        --size12: 8rem;
        --sizeHairLine: 1px;
        --goldDark: #c07f3a;
        --gold: #debb6b;
        --goldLight: #f2e4c4;
        --blue01: #13293d;
        --blue02: #2a3e50;
        --blue03: #425464;
        --gray01: #74818e;
        --gray02: #74818e;
        --gray03: #b9bfc4;
        --gray04: #d3d6d9;
        --gray05: #e7e9eb;
        --gray06: #f3f4f5;
        --white: #fff;
        --documentBackgroundColor: #323b22;
        --black: #000;
        --tskHeer: #334811;
        --tskLuftwaffe: #2f84b0;
        --tskMarine: #183757;
        --tskSanitaetsdienst: #c21411;
        --tskCIR: #537d6c;
        --tskStreitkraeftebasis: #d97a0a;
        --tskUnterstuetzung: #b40f69;
        --tskDefault: #51646d;
        --corporateBlue: #004060;
        --animation-duration-std: .2s;
        --animation-easing-std: ease-in-out;
        --transition-duration: .6s;
        --transition-ease-method: ease;
        --contrastTextShadow: .1rem .1rem .4rem rgba(0, 0, 0, .6), -.1rem -.1rem .4rem rgba(0, 0, 0, .6), .1rem -.1rem .4rem rgba(0, 0, 0, .6), -.1rem .1rem .4rem rgba(0, 0, 0, .6);
        --boxShadow: 0 0 32px rgba(0, 0, 0, .2)
    }

    html[class*=theme-bwkrhs] {
        --documentBackgroundColor: #333
    }

    :root {
        --titleSize0: 6rem;
        --titleSize1: 4.3rem;
        --titleSize2: 3.2rem;
        --titleSize3: 2.8rem;
        --titleSize4: 2.2rem;
        --titleSize5: 1.8rem
    }

    @media (min-width: 768px) {
        :root {
            --titleSize0: 8rem;
            --titleSize1: 6rem;
            --titleSize2: 4.3rem;
            --titleSize3: 3.2rem;
            --titleSize4: 2.8rem;
            --titleSize5: 2rem
        }
    }

    @media (min-width: 1230px) {
        :root {
            --titleSize0: 10rem;
            --titleSize1: 8rem;
            --titleSize2: 6rem;
            --titleSize3: 4.3rem;
            --titleSize4: 3.2rem;
            --titleSize5: 2.2rem
        }
    }

    :root {
        --titleT0: var(--titleSize0, 6rem) / 1.1 "Bebas Neue", sans-serif;
        --titleT1: var(--titleSize1, 4.3rem) / 1.1 "Bebas Neue", sans-serif;
        --titleT2: var(--titleSize2, 3.2rem) / 1.2 "Bebas Neue", sans-serif;
        --titleT3: var(--titleSize3, 2.8rem) / 1.25 "Bebas Neue", sans-serif;
        --titleT4: var(--titleSize4, 2.2rem) / 1.25 "Bebas Neue", sans-serif;
        --titleT5: var(--titleSize5, 1.8rem) / 1.4 "Bebas Neue", sans-serif
    }

    :root {
        --bodySize1: 2.6rem;
        --bodySize2: 2rem;
        --bodySize3: 1.5rem;
        --bodySize4: 1.2rem;
        --bodySize5: 1rem
    }

    @media (min-width: 1230px) {
        :root {
            --bodySize1: 2.8rem;
            --bodySize2: 2.2rem;
            --bodySize3: 1.7rem;
            --bodySize4: 1.4rem;
            --bodySize5: 1.2rem
        }
    }

    :root {
        --bodyB1Bold: var(--bodySize1, 2.6rem) / 1.3 "PT Sans Bold", sans-serif;
        --bodyB2Bold: var(--bodySize2, 2rem) / 1.3 "PT Sans Bold", sans-serif;
        --bodyB3Bold: var(--bodySize3, 1.5rem) / 1.5 "PT Sans Bold", sans-serif;
        --bodyB4Bold: var(--bodySize4, 1.2rem) / 1.5 "PT Sans Bold", sans-serif;
        --bodyB2: var(--bodySize2, 2rem) / 1.3 "PT Sans", sans-serif;
        --bodyB3: var(--bodySize3, 1.5rem) / 1.5 "PT Sans", sans-serif;
        --bodyB4: var(--bodySize4, 1.2rem) / 1.5 "PT Sans", sans-serif;
        --bodyB5: var(--bodySize5, 1rem) / 1.5 "PT Sans", sans-serif
    }

    @media (min-width: 1024px) {
        :root {
            --bannerCompactHeight: 8rem;
            --documentBorderWidth: 12px;
            --documentBorderInlineWidth: 12px
        }
    }

    @media (min-width: 1580px) {
        :root {
            --maxWidthContent: 1380px
        }
    }

    @media (min-resolution: 2x) {
        :root {
            --siezHairLine: .5px
        }
    }
}

@layer document {
    html {
        background-attachment: fixed;
        background-color: var(--documentBackgroundColor);
        background-image: image-set("../img/polygon-seamless.avif" type("image/avif") 2x,"../img/polygon-seamless.webp" type("image/webp") 2x,"../img/polygon-seamless.jpg" type("image/jpeg") 2x);
        background-position: center;
        padding: var(--documentBorderWidth) var(--documentBorderInlineWidth) 0;
        scroll-behavior: smooth;
        scroll-padding-block-start: var(--bannerCompactHeight);
        text-rendering: optimizeLegibility;
    }

    html[class*=theme-bwkrhs] {
        --documentBackgroundColor: #333;
        background-image: image-set("../img/polygon-seamless-mono.avif" type("image/avif") 2x,"../img/polygon-seamless-mono.webp" type("image/webp") 2x,"../img/polygon-seamless-mono.jpg" type("image/jpeg") 2x)
    }

    body {
        display: flex;
        flex-direction: column;
        font: var(--bodyB3);
        margin-inline:auto;max-width: var(--maxWidthBody);
        overflow-y: clip;
        position: relative;
    }

    body > main {
        background-color: var(--white);
        border-image-outset: 20vw 0 0;
        border-image-slice: fill 1 0 0;
        border-image-width: 20vw 0 0;
        border-image-source: conic-gradient(var(--white) 0 0);
        display: grid;
        grid-template-columns: var(--Document-gridTemplateColumns);
        position: relative;
        z-index: 1;
    }

    :is(body > main) > * {
        grid-column: content
    }
}