CSS Counter - Problem mit Container

[MrMurphy1]

Hallo

Das erste CSS dient nur der Anzeige und hat dem Problem nichts zu tun:

      h1, h2, h3 {
         font-size: 1rem;
      }
      h1, h2, h3 {
         margin-left: 1rem;
         display: flex;
      }
      h1::before,
      h2::before,
      h3::before {
         background-color: gold;
         font-size: 1rem;
         width: 5rem;
         margin-right: 1rem;
      }

Jetzt zum Problem:

Mit dem folgenden CSS

      body {
         counter-reset: ebene1;
      }
      h1 {
         counter-reset: ebene2;
      }
      h2 {
         counter-reset: ebene3;
      }
      h3 {
         counter-reset: ebene4;
      }
      h1::before {
         counter-increment: ebene1;
      }
      h2::before {
         counter-increment: ebene2;
      }
      h3::before {
         counter-increment: ebene3;
      }
      h1::before {
         content: 
            counter(ebene1) " "
         ;
      }
      h2::before {
         content: 
            counter(ebene1) "." 
            counter(ebene2) " "
         ;
      }
      h3::before {
         content: 
            counter(ebene1) "." 
            counter(ebene2) "." 
            counter(ebene3) " "
         ;
      }

und dem HTML

   <h1>1</h1>
   <h2>1.1</h2>
   <h2>1.2</h2>
   <h2>1.3</h2>
   <h3>1.3.1</h3>
   <h3>1.3.2</h3>

zeigt der Counter erwartungsgemäß die in den Überschriften hinterlegte Aufzählung, also

1

1.1

1.2

1.3

1.3.1

1.3.2

In der Praxis werden auf fast jeder Webseite Container wie header, main, footer, nav, section, article, div und so weiter hinzugefügt. Dadurch gerät jedoch der Zähler durcheinander. Mit dem HTML

   <h1>1</h1>
   <h2>1.1</h2>
   <h2>1.2</h2>
   <div>
      <h2>1.3</h2>
      <h3>1.3.1</h3>
   </div>
   <h3>1.3.2</h3>

wird

1

1.1

1.2

1.3

1.3.1

1.3.1

ausgegeben. Von der ersten h3 zur zweiten h3 zählt der Counter also nicht weiter.

Gibt es CSS-Anweisungen um den Counter zu veranlassen sich nur an den Überschriften zu orientieren?

Gruss

MrMurphy