$width: 176mm;
$height: 240mm;
$top: 6mm;
$bottom: 20mm;
$inside: 12mm;
$outside: 6mm;
$content-h: calc($height - $top - $bottom - 1mm);
$content-w: calc($width - $inside - $outside);
$gap: 4mm;
$indent: 10mm;


@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-2_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;

        @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{
    break-before: right;
    
}


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


#section__content{
    columns: 2;
    column-gap: $gap;
    column-fill: auto;
}


// Title chapter

#section__content h1{
    break-before: left;
    break-after: page;
    page: chapter;
}
#section__content h1 .h1-count{
    string-set: chapterCount content(text);
}

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