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

$width: 176mm;
$height: 240mm;
$top: 10mm;
$bottom: 14mm;
$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(var(--content-w)/7);
    --unit: 80px;
}


@media print {
    @page {
        size: $width $height;
        margin-top: $top;
        margin-bottom: $bottom;

        // bleed: 6mm;
        // marks: crop;
    }
    @page:left {
        margin-left: $outside;
        margin-right: $inside;

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

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

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

        @bottom-left {
            content: string(chapterCount);
              font-family: var(--font-sans);
             font-size: var(--fs-num);
             text-align: left;
             width: $indent;
        }

                @bottom-center {
            content: string(chapter);
              font-family: var(--font-sans);
             font-size: var(--fs-num);
             text-align: left;
        }

           @bottom-right {
            content: counter(page);
            font-family: var(--font-sans);
             font-size: var(--fs-num);
             text-align: right;
        }

            
    }
    @page: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; }
    }

     @page chapter {
         margin-left: $outside;
        margin-right: $outside;
        @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;
}