walter-boente_book-collection/css/modules/_layout.scss

$width: 176mm;
$height: 240mm;
$top: 10mm;
$bottom: 19mm;
$inside: 20mm;
$outside: 14mm;
$content-h: calc($height - $top - $bottom - 1mm);
$content-w: calc($width - $inside - $outside);
$gap: 4mm;
$indent: 10mm;
$unit: calc($content-w/7);

:root{
    // --content-w: #{$content-w};
    --unit: calc(#{$content-w}/7);
    // --unit: 80px;
    --margin-box: -13px;
}




@media print {
    @page {
        size: $width $height;
        margin-top: $top;
        margin-bottom: $bottom;
        bleed: 6mm;
        marks: crop;
    }
    @page:left {
        margin-left: $outside;
        margin-right: $inside;

        @bottom-left {
            content: counter(page);
            font-family: var(--font-sans);
            font-size: var(--fs-num);
            font-weight: 500;
            text-align: left;
             width: $indent;
              position: relative;
             top: var(--margin-box);
        }
          @bottom-center {
            content: "Höchstpersönlichkeit";
            font-family: var(--font-sans);
            font-size: var(--fs-num);
             font-weight: 500;
            text-align: left;
             position: relative;
             top: var(--margin-box);
        }
 
    }
    @page:right {
        margin-left: $inside;
        margin-right: $outside;

        // background-image: url('/images/layout-1_2.png');
        // background-size: 100% 100%;

        @bottom-left {
            content: string(chapterCount);
              font-family: var(--font-sans);
             font-size: var(--fs-num);
              font-weight: 500;
             text-align: left;
             width: calc(var(--unit)*3);
             padding-left: calc(var(--unit)*2);
              position: relative;
             top: var(--margin-box);
        }

                @bottom-center {
            content: string(chapter);
              font-family: var(--font-sans);
             font-size: var(--fs-num);
              font-weight: 500;
             text-align: left;
              position: relative;
             top: var(--margin-box);
             width: calc(var(--unit)*3.5);
        }

           @bottom-right {
            content: counter(page);
            font-family: var(--font-sans);
             font-size: var(--fs-num);
              font-weight: 500;
             text-align: right;
              position: relative;
             top: var(--margin-box);
        }

            
    }

      

    @page chapter:first {
        @top-left-corner { content: none; }
        @top-left { content: none; }
        @top-center { content: none; }
        @top-right { content: none; }
        @top-right-corner { content: none; }
        @left-top { content: none; }
        @left-middle { content: none; }
        @left-bottom { content: none; }
        @right-top { content: none; }
        @right-middle { content: none; }
        @right-bottom { content: none; }
        @bottom-left-corner { content: none; }
        @bottom-left { content: none; }
        @bottom-center { content: none; }
        @bottom-right { content: none; }
        @bottom-right-corner { content: none; }
    }
    @page:blank {
        @top-left-corner { content: none; }
        @top-left { content: none; }
        @top-center { content: none; }
        @top-right { content: none; }
        @top-right-corner { content: none; }
        @left-top { content: none; }
        @left-middle { content: none; }
        @left-bottom { content: none; }
        @right-top { content: none; }
        @right-middle { content: none; }
        @right-bottom { content: none; }
        @bottom-left-corner { content: none; }
        @bottom-left { content: none; }
        @bottom-center { content: none; }
        @bottom-right { content: none; }
        @bottom-right-corner { content: none; }
    }

    
}




#section__content h1 .h1-count{
    string-set: chapterCount content(text);
}

#section__content h1 .h1-text{
    string-set: chapter content(text);
}


.chapter{
    page: chapter;
    break-before: page;
}