@using RazorLight
@inherits TemplatePage<Elwig.Documents.Document>

<style>
    :root {
        font-family: "Times New Roman", serif;
        line-height: 1;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    .m1, .m2, .m3 {
        height: 0;
        width: 1cm;
        position: fixed;
        left: 0;
        border-top: 1pt solid black;
    }

    .m1 {top: 105mm;}
    .m2 {top: 148.5mm;}
    .m3 {top: 210mm;}

    header {
        height: 45mm;
        padding: 5mm;
        position: absolute;
        top: -25mm;
        left: 0;
        right: 0;
        text-align: center;
    }
    .spacing {height: 20mm;}
    .info-wrapper {
        width: 100%;
        height:45mm;
        margin: 0 0 8.46mm 0;
        position: relative;
    }

    .address-wrapper {
        height: 45mm;
        width: 85mm;
        margin: 0;
        padding: 5mm;
        position: absolute;
        left: 20mm;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .address-wrapper .sender {
        flex: 17.7mm 1 1;
        font-size: 8pt;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 2mm;
    }

    address {
        flex: 27.3mm 1 1;
        white-space: pre-line;
        font-size: 12pt;
        font-style: normal;
    }

    aside {
        height: 40mm;
        width: 75mm;
        margin: 0;
        position: absolute;
        left: 125mm;
        top: 5mm;
    }

    main {
        margin: 8.46mm 20mm 4.23mm 25mm;
    }

    main :first-child {
        margin-top: 0;
    }

    main h1, main p {
        font-size: 12pt;
        margin: 1em 0;
        text-align: justify;
        widows: 3;
        orphans: 3;
    }

    main .date {
        margin-bottom: 2em;
        text-align: right;
    }

    main h1 {
        margin-bottom: 2em;
    }

    .footer-wrapper {
        padding: 0 20mm 0 25mm;
        position: running(page-footer);
        bottom: 0;
        left: 0;
        right: 0;
    }

    .pre-footer {
        margin: 4.23mm 0;
        font-size: 10pt;
        display: flex;
    }

    .pre-footer .date, .pre-footer .page {
        flex: 100px 1 1;
    }

    .pre-footer .date {text-align: left;}
    .pre-footer .page {text-align: right;}
    .page::after {
        content: "Seite 1 von 1";
    }

    footer {
        font-size: 10pt;
        border-top: 1pt solid black;
        height: 25mm;
        padding-top: 1mm;
        text-align: center;
    }

    @@page {
        size: A4;
        margin: 25mm 0 35mm 0;
        @@bottom-center {
            content: element(page-footer);
        }
    }

    @@media screen {
        body, header, .footer-wrapper {
            width: 210mm;
        }
        header, .address-wrapper, aside, main {
            border: 1px solid lightgray;
        }
        .m1, .m2, .m3 {display: none;}
        header {top: 0;}
        .spacing {height: 45mm;}
        .main-wrapper {
            margin-bottom: 40mm;
        }
        .footer-wrapper {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
        }
    }

    @@media print {
        .page::after {
            content: "Seite " counter(page) " von " counter(pages);
        }
        .footer-wrapper {
            display: none;
        }
    }
</style>