Bestandteil der Lösung
======================
- Benutzer-Syntax-Elemente:
    [akkordeon_container=|]
    [akkordeon_element=|]
- CSS in eigener Datei gekapselt:
    akk-box.css 
- JavaScript in eigener Datei: 
    own_js.js   (enthält auch weiteren Code für andere Module)

1. Funktionalität
===================
Detailinformationen können per Klick auf die Titelzeile ein- und ausgeblendet werden.

- Mehrere Elemente können gleichzeitig geöffnet sein (Checkbox-Variante).
- Ein erneuter Klick auf die Titelzeile schließt das jeweilige Element wieder.
- Titel und Inhalt können beliebiges HTML enthalten (Text, Listen, Bilder, Plugins …).
- Optional können zusätzliche CSS-Klassen angegeben werden, um Container und Elemente individuell zu stylen (z. B. kompakt, farbiges Theme, inline).

BEISPIEL:
---------
[akkordeon_container=is-compact|
[akkordeon_element=Titel erster  Klickbalken|Inhalt erstes Akkordeon ... Weiterer Inhalt, Bilder, Elemente ...]

[akkordeon_element=Titel zweiter Klickbalken|Inhalt zweites Akkordeon ... Weiterer Inhalt, Bilder, Elemente ...]

[akkordeon_element=Titel n-ter Klickbalken|Inhalt n-tes Akkordeon ... Weiterer Inhalt, Bilder, Elemente ...]
]

Erklärung zum Beispiel:

Umfassendes Containerelement: 
[akkordeon_container=CSS-Klasse optional| Kindelemente ]

- kann optional eine Klasse bekommen
- über diese Klasse (hier is-compact) wird das Aussehen in der akk-box.css gestylt
- es stehen bereits einige Gestaltungsklassen zur Verfügung
- man kann auch beim akkordeon_container = eigene Klassen angeben (auch mehrere)
- diese müssen dann in der akk-box.css angelegt und definiert werden. Dafür ist der Bereich Modifikatoren am Ende vorgesehen.
- is-compact  --> eigene Klasse; kompaktere Gestaltung; CSS am Ende der akk-box.css

Einzelne Elemente:
[akkordeon_element=Titel|Inhalt]
****************************************************************************************************

Hier die Theorie und Umsetzung

2. HTML für diese Lösung
========================
2.1. Umfassender Container für mehrere Elemente

<div class="mz-akk-box styling-klassen">
    Element 1
    ...
    Element n
</div>

2.2. Einzelnes Element

<div class="mz-akk-item">
    <label class="mz-akk-header">
        <input class="mz-akk-toggle" type="checkbox" />
        <span class="mz-akk-title">Titelzeile</span>
    </label>
    <div class="mz-akk-body">Versteckter Inhalt</div>
</div>

Da die Lösung vier Parameter benötigt (Klassen, Element, Titel, Inhalt), 
wird dies über zwei verschachtelte Benutzersyntax-Elemente umgesetzt.

2.3. Nachbildung als Benutzer-Syntax-Elemente

akkordeon_container = <div class="mz-akk-box {DESCRIPTION}">{VALUE}</div>
kkordeon_element = <div class="mz-akk-item"><label class="mz-akk-header"><input class="mz-akk-toggle" type="checkbox" name="mz-akk" /><span class="mz-akk-title">{DESCRIPTION}</span></label><div class="mz-akk-body">{VALUE}</div></div>

2.4. Aufruf im Editor
2.4.1.Benutzerelement akkordeon_container einfügen

[akkordeon_container={DESCRIPTION}|{VALUE}]

- übersichtliche Schreibweise
[akkordeon_container={DESCRIPTION}|
{VALUE}
]

{DESCRIPTION}	optional; kann leer bleiben; nimmt eine / mehrere Klassen für indiv. Gestaltung per CSS (z. B. is-compact, light-sky, …)
{VALUE} 	nimmt Akkordeon-Elemente 1 ... n auf

2.4.2. Benuterelemente akkordeon_element einfügen

[akkordeon_element={DESCRIPTION}|{VALUE}]

- übersichtliche Schfreibweise
[akkordeon_element={DESCRIPTION}|
{VALUE}
]

{DESCRIPTION}  Sichtbarer Titeltext
{VALUE}        versteckter Inhalt; beliebig

2.4.3. Beide elemente kombinieren

[akkordeon_container=light-sky|
    [akkordeon_element=Titel 1|Inhalt 1]
    [akkordeon_element=Titel 2|Inhalt 2]
	...
    [akkordeon_element=Titel n|Inhalt n]
]
        
3. Installation
=================
3.1. Automatisiert mit Install-Routine

Gesonderte Anleitung in !install.txt

3.2. Alle Schritte manuell selbst durchführen

- das ZIP-Archiv enthält alles benötigte; Archiv entpacken.
- akk-box.css in Verzeichnis css bei style.css ablegen
- akk-box.css einbinden:
	a) als Datei per Import in style.css am ANFANG, vor allen CSS-Anweisungen einfügen!
        	@import url("akk-box.css");      
	b) Inhalt von akk-box.css kopieren und komplett am Ende der style.css anhängen
- JavaScript-Datei own_js.js in Ordner js einfügen
	Ordner js liegt im 'LayoutName' neben Ordner css; falls nicht vorhanden, anlegen
- own_js.js im Template einbauen; am Besten vor schließendem body-Tag
        <script src="{LAYOUT_DIR}/js/own_js.js" defer></script>
        </body>     
- die beiden Benutzer-Syntax-Elemente anlegen
	sind auch in Datei user-syntax.txt asbgelegt
	Admin --> Einsellungen --> Eigene Syntax-Elemente anlegen: per Kopie einfügen
    
    akkordeon_container = <div class="mz-akk-box {DESCRIPTION}">{VALUE}</div>
    akkordeon_element = <div class="mz-akk-item"><label class="mz-akk-header"><input class="mz-akk-toggle" type="checkbox" name="mz-akk" /><span class="mz-akk-title">{DESCRIPTION}</span></label><div class="mz-akk-body">{VALUE}</div></div>

4. Hinweis zu JavaScript
========================

Die Lösung funktioniert auch ohne JavaScript:

    - Das Ein-/Ausklappen der Inhalte wird über die Checkbox (.mz-akk-toggle) und CSS (:has()) gesteuert.
    - In alten Browsern ohne Unterstützung für :has() greift Fallback:
    - Alle Inhalte sind dann einfach sichtbar (kein Akkordeon, aber lesbar).

Mehrkomfort mit JS:

    - Wenn ein Element nach unten ausklappt und aus dem sichtbaren Bereich rutscht, kann own_js.js den Titel samt Inhalt automatisch nach oben scrollen
    - Wer auf JS lieber verzichtet, verliert nur diesen Komfort – die Grundfunktion (wo unterstützt) bleibt

5. CSS-Modifikatoren
====================

Verfügbare Modifikatoren (Beispiele aus deinem CSS):
    - is-compact – kompakteres Layout
    - theme-softblue – dezentes blaues Theme
    - light-sky – helles, luftiges Theme (inkl. Dark-Mode-Anpassung)
    - warm-sand – warmes „Sand“-Theme (inkl. Dark-Mode-Anpassung)
    - dark-slate – dunkles, kontrastreiches Theme
    - is-inline – Elemente eher „nebenbei“ in der Seite (optional inline)

Hinweis:
Über --mz-akk-icon-url kann das Icon im Titel anpaßt werden. Weitere SVG-Dateien im Ordner icons innerhalb von Ordner css
Darauf achten, dass der Pfad zur icons/*.svg relativ zur akk-box.css stimmt.

