CSS counter-reset funktioniert nicht so, wie er soll

[plenist]

Moin allerseits, kurz zu mir: bin nun schon einige Zeit "aus dem Beruf" und befasse mich derzeit mit der Umgestaltung einer HTML-Seite zu einer Druckausgabe.

Um nun die Abbildungen innerhalb der Kapitel mit einem Bildtext zu versorgen, der "Abb. x.y: 'Text zum Bild'" umfaßt, um daraus später ein Abbildungsverzeichnis zu erstellen, habe ich die CSS-Funktion Counter() eingesetzt. Einen Counter, der die Kapitel zählen soll und eine Counter, der die Abbildungen zum jeweiligen Kapitel zählen soll. Mein Wissensstand bis jetzt:

1. counter-reset setzt den Counter auf Null, counter-increment erhöht den counter jeweils um 1
2. Es muß eine, ich sag mal "Instanz" geben, an der festgemacht wird, wann der Counter hochgezählt wird, in meinem Fall bei jedem Auftreten von <h3>.
3. mit den Pseudo-Klassen :: before und ::after können dann die Werte vom Counter ausgegeben werden

Soweit sogut, das funktioniert auch so - grundsätzlich, nur daß beim Wechsel des Kapitels der Counter für die Abbildungen nicht wieder heruntergesetzt wird, sondern im neuen Kapitel mit dem um 1 erhöhten Wert des Counters für die Abbildungen aus dem vorherigen Kapitel ausgegeben wird.

Beispiel: auf Seite 6 (= Kapitel 6) gibt es 2 Abbildungen, die mit 6.1 und 6.2 gezählt werden. In Kapitel 7 gibt es 2 Abbildungen, die eigentlich mit 7.1 und 7.2 gezählt werden sollen, aber als 7.3 und 7.4 erscheinen.

Frage: Wie bekomme ich es hin, daß der Counter für die Abbildungen beim Kapitelwechsel auf Null gesetzt wird und nicht einfach mit dem bisher aufaddierten Wert weitergeführt wird?

Meine CSS- und HTML-Datei hab ich hier mal als Bild angefügt

Ich hoffe, man kann es lesen.

Was ich noch nicht verstehe, ist, daß es so aussieht, als ob das Rücksetzen des Counters für die Abbildungen funktioniert, denn wenn ich direkt nach dem Auftauchen von <h3> mit h3::after den aktuellen Stand ausgeben, erhalte ich als Abb-Counter die Null. Soweit ich es verstanden habe, bezieht sich der Counter auf den ihn umgebenden Container bzw. den ihm übergeordneten, im Beispiel also das div innerhalb von "Inhalt". Aber ganz egal, wo ich das <h3> "hinsetze" (direkt unterhalb von "page", oder unterhalb von "header" oder unterhalb von "Inhalt" oder direkt in das <div> unterhalb von "Inhalt"), es wird nie die korrekte Nummerierung angezeigt, trotz Kapitelwechsel werden die Abbildung weiter hochgezählt. Kann mir bitte mal jemand den Schubs in die richtige Richtung geben?

Schöne Grüße an alle Mitlesenden hier

Klaus