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

#section__content{
    margin-left: 28mm;

      h1, h2, h3  {
        &::before{
            content: attr(data-counter);
        }
    }

   h4, h5, h6{
        &::before{
            content: attr(data-counter) ". ";
        }
    }


    h1, h2, h3 , h4{
        break-inside: avoid;
        break-after: avoid;
        text-wrap: balance;

        /* hack for avoiding break-after */
        margin-bottom: calc(var(--baseline)*-3);
        &::after{
            content: '';
            display: block;
            height: calc(var(--baseline)*3);
        }
    }

     h5, h6 {
        break-inside: avoid;
        break-after: avoid;
        text-wrap: balance;

        /* hack for avoiding break-after */
        margin-bottom: calc(var(--baseline)*-2);
        &::after{
            content: '';
            display: block;
            height: calc(var(--baseline)*2);
            // background-color: rgba(255, 255, 0, 0.595);
        }
    }


    h1 + ol + p,
    h2 + ol + p,
    h3 + ol + p,
    h4 + ol + p,
    h5 + ol + p,
    h6 + ol + p{
        text-indent: 0;
    }

 



    

    h2{
        font-family: var(--font-title);
        font-size: 1.1rem;
        font-weight: 500;
        text-transform: uppercase;
        line-height: calc(var(--baseline)*1.2);
        position: relative;
        margin-top: calc(var(--baseline)*1 + 6px);
        padding-bottom: calc(var(--baseline)*1);
        padding-right: 2ch;
        padding-left: calc(var(--indent)*2);
        &::before{
            position: absolute;
            left: 0;
        //    display: block;
        //     font-size: var(--fs-num);  
        //     padding-left: var(--indent);    
        }
    }

    

    h3{
        font-family: var(--font-title);
        font-weight: 500;
        font-size: 1rem;
        line-height: calc(var(--baseline)*1);

        // padding-left: var(--indent);
        padding-right: calc(var(--indent)*2);
        position: relative;
        margin-top: calc(var(--baseline)*1 + 4px);
        padding-bottom: calc(var(--baseline)*0.75);
                padding-left: calc(var(--indent)*2);
        &::before{

            position: absolute;
            left: 0;
        }
    }

    h4{
        font-family: var(--font-title);
        font-weight: 500;
        font-size: 0.9rem;
        line-height: calc(var(--baseline)*1);
        padding-right: calc(var(--indent)*2);
        position: relative;
        margin-top: calc(var(--baseline)*1 + 4px);
        padding-bottom: calc(var(--baseline)*0.75);
        text-decoration: underline 1px #cfcfcf;
        text-underline-offset: 3px;

            padding-left: calc(var(--indent)*2);
        &::before{

            // position: absolute;
            // left: 0;
        }
    }


     h5{
        font-family: var(--font-title);
        font-weight: 500;
        font-size: 0.8rem;
        line-height: calc(var(--baseline)*1);
        padding-left: calc(var(--indent)*2);
        // padding-right: calc(var(--indent)*2);
        position: relative;
        margin-top: calc(var(--baseline)*1 + 4px);
        padding-bottom: calc(var(--baseline)*0.25);
    }

    h6{
           font-family: var(--font-title);
        font-weight: 500;
             font-size: 0.8rem;
         margin-top: calc(var(--baseline)*0.5);
         padding-bottom: calc(var(--baseline)*0.25);
         color: #666;
    }


    

}

[data-id="section__content"][data-split-from] > :first-child {
        margin-top: 0;
}

   h1{
        font-family: var(--font-title);
        font-size: 1.6rem;
        font-weight: 500;
        text-transform: uppercase;
        line-height: calc(var(--baseline)*1.6);
        // text-align: center;
        position: relative;
        margin-top: calc(var(--baseline)*2 - 3px);
        padding-bottom: calc(var(--baseline)*1);
        padding-left: calc(var(--indent)*2);
        padding-right: 1ch;

        
        &::before{
            //  font-size: var(--fs-num);    
            //  width: 2ch;
            //  height: 2ch;
            //  border: 1px solid currentColor;
            //  border-radius: 50%;   
            //  display: flex;
            //  align-items: center;  
            //  justify-content: center;
             position: absolute;
             left: 0;
             width: calc(var(--indent)*2 - 0.5ch);
            //  border-bottom: 2px solid #cfcfcf;
            //  top: 3px;
        }
    }

    section h1:first-of-type{
        margin-top: 3px!important;
    }