```css
/* =========================================================
   ALLGEMEINE ANPASSUNGEN
   Joomla 6.1.2 – Cassiopeia Child Template

   Dieser Bereich enthält allgemeine Anpassungen der Website,
   die keinem einzelnen Bereich wie Header, Navigation,
   Offcanvas oder Footer eindeutig zugeordnet sind.
   ========================================================= */


/* ---------------------------------------------------------
   1. H1-Überschrift

   Ändert:
   - Farbe der H1-Überschrift
   - Schriftgröße

   Farbe:
   #971212 = Stadtelternrat-Rot

   !important sorgt dafür, dass diese Vorgabe gegenüber
   anderen Template-Regeln Vorrang erhält.
   --------------------------------------------------------- */

h1 {
    color: #971212 !important;
    font-size: 14px !important;
}


/* ---------------------------------------------------------
   2. Überschriften innerhalb von Beiträgen

   Betrifft:
   - einzelne Beiträge (.item-page)
   - Blog-Darstellungen (.blog-item)

   Die Cassiopeia-CSS-Variable für Überschriften wird
   auf das Stadtelternrat-Rot gesetzt.
   --------------------------------------------------------- */

.item-page,
.blog-item {
    --heading-color: #971212;
}


/* ---------------------------------------------------------
   3. Abstand zwischen Banner und Breadcrumb

   Der untere Außenabstand des Banner-Bereichs wird
   entfernt.

   Dadurch liegt der Breadcrumb-Bereich näher am Banner.

   Zusätzlich sind Änderungen hinterlegt für die Position "Topbar"
   falls das Modul "Adresszeile" mal aktiviert werden sollte.
   Hat den Vorteil, dass das Logo dichter an der Topbar anliegt und
   die Topbar von der Optik schmaler ist.
   --------------------------------------------------------- */

.container-banner {
    margin-bottom: 0 !important;
}

/* Topbar wesentlich schmaler */
.container-topbar {
    padding: 0;
}

/* Modul ohne Außenabstände */
.container-topbar .mod-custom,
.container-topbar p {
    margin: 0;
    padding: 0;
}

/* HR-Linien kleiner */
.container-topbar hr {
    margin: 3px 0;
}

/* Logo dichter an die Topbar */
.navbar-brand {
    margin-top: 4px;
    margin-bottom: 4px;
}

.navbar-brand img {
    display: block;
    margin: 0 auto;
}

/* Navigation direkt unter das Logo */
.container-nav {
    margin-top: 0;
    padding-top: 0;
}

/* Grid-Abstände entfernen */
.container-header {
    row-gap: 0;
}

/* ---------------------------------------------------------
   4. Abstand oberhalb des Breadcrumb-Bereichs

   Der obere Innenabstand des Breadcrumb-Bereichs wird
   entfernt.

   Dadurch wird der Abstand zwischen Banner und Breadcrumb
   weiter reduziert.
   --------------------------------------------------------- */

.container-breadcrumbs {
    padding-top: 0 !important;
}


/* =========================================================
   HEADER – LOGO UND HAUPTMENÜ

   Zweck:
   - Logo im Header zentrieren
   - Hauptmenü zentrieren
   - Suchmodul wird hier nicht verändert
   - Das mobile Cassiopeia-Menü bleibt grundsätzlich erhalten
   ========================================================= */


/* ---------------------------------------------------------
   5. Header und Logo zentrieren

   Der Header wird als vertikaler Flex-Container aufgebaut.

   Dadurch können Logo und darunterliegende Elemente
   sauber mittig ausgerichtet werden.
   --------------------------------------------------------- */

.container-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ---------------------------------------------------------
   6. Logo im Header zentrieren

   margin: 0 auto sorgt dafür, dass das Logo innerhalb
   seines verfügbaren Bereichs mittig positioniert wird.
   --------------------------------------------------------- */

.container-header .navbar-brand {
    margin: 0 auto;
}


/* ---------------------------------------------------------
   7. Hauptmenü zentrieren

   Der Navigationsbereich erhält die komplette verfügbare
   Breite.

   Die enthaltenen Elemente werden horizontal und vertikal
   zentriert.
   --------------------------------------------------------- */

.container-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ---------------------------------------------------------
   8. Menü-Modul innerhalb der Navigation zentrieren

   Das Menü selbst wird als Flex-Container dargestellt.
   --------------------------------------------------------- */

.container-nav .mod-menu {
    display: flex;
    justify-content: center;
}


/* ---------------------------------------------------------
   9. Navigation auf volle Breite setzen

   Dadurch kann das Hauptmenü über die gesamte Breite
   des Navigationsbereichs zentriert werden.
   --------------------------------------------------------- */

.container-nav nav {
    width: 100%;
}


/* ---------------------------------------------------------
   10. Hauptmenü-Liste zentrieren

   Die eigentliche Joomla-Menüliste wird mittig innerhalb
   der verfügbaren Breite ausgerichtet.
   --------------------------------------------------------- */

.container-nav ul.mod-menu {
    justify-content: center;
    width: 100%;
}


/* =========================================================
   ADMINISTRATION – OFFCANVAS

   Zweck:
   - Das Administrationsmenü wird über den Button
     "Admin" geöffnet.
   - Das Offcanvas erscheint auf der rechten Seite.
   - Der Button wird ausschließlich auf Desktop angezeigt.
   - Auf Mobil bleibt das normale Cassiopeia-Hamburgermenü
     zuständig.

   HTML / PHP:
   Der Offcanvas-Container befindet sich in index.php
   und verwendet die ID:

       #administrationOffcanvas

   Das Joomla-Modul für die Administration befindet sich
   auf der Modulposition:

       offcanvas
   ========================================================= */


/* ---------------------------------------------------------
   11. DESKTOP – Hauptmenü und Admin-Button nebeneinander

   Diese Regeln gelten ab einer Bildschirmbreite von
   mindestens 992px.

   Das Hauptmenü bleibt zentriert.
   Der zusätzliche Admin-Button wird daneben platziert.
   --------------------------------------------------------- */

@media (min-width: 992px) {

    .container-nav {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    /* -----------------------------------------------------
       12. Breite des Menü-Moduls

       Das Menü-Modul nimmt nur die Breite ein,
       die tatsächlich benötigt wird.

       Dadurch kann der Admin-Button daneben stehen.
       ----------------------------------------------------- */

    .container-nav .mod-menu {
        width: auto;
    }


    /* -----------------------------------------------------
       13. Breite der Navigation

       Die Navigation wird auf ihre tatsächlich benötigte
       Breite reduziert.
       ----------------------------------------------------- */

    .container-nav nav {
        width: auto;
    }


    /* -----------------------------------------------------
       14. Breite der Menü-Liste

       Auch die Joomla-Menüliste wird nicht künstlich
       auf 100 % Breite gezogen.
       ----------------------------------------------------- */

    .container-nav ul.mod-menu {
        width: auto;
    }


    /* -----------------------------------------------------
       15. Admin-Button

       Darstellung:
       - Haus-Symbol
       - darunter "Admin"
       - Stadtelternrat-Rot
       - kein Rahmen
       - transparenter Hintergrund

       Der Button wird vertikal aufgebaut.
       ----------------------------------------------------- */

    .offcanvas-menu-button {
        margin-left: 1.5rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: gold;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 2px;
        white-space: nowrap;
        flex-shrink: 0;

        cursor: pointer;
    }


    /* -----------------------------------------------------
   16. Eigenes Symbol des Admin-Buttons

   Statt des standardmäßigen Cassiopeia-/Joomla-Haus-
   Symbols wird ein eigenes Bild verwendet.

   Bild:
       SchulePic16x16.png

   Das Bild liegt auf der Website unter:
       /images/webmaster/SchulePic16x16.png

   WICHTIG:
   Das Symbol erhält seine eigene Darstellung und wird
   nicht mehr über die rote Button-Farbe eingefärbt.

   Die Originalgröße des Bildes beträgt 16 x 16 Pixel.
   ----------------------------------------------------- */

.offcanvas-menu-button .icon-home {
    display: none;
}

.offcanvas-menu-button::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;

    background-image: url("https://stadtelternrat.de/images/webmaster/SchulePic16x16.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

    /* -----------------------------------------------------
       17. Text "Admin" unter dem Haus-Symbol

       Der Text wird kleiner als das Haus-Symbol dargestellt.
       ----------------------------------------------------- */

    .offcanvas-menu-label {
        font-size: 0.75rem;
        line-height: 1;
        color: gold;
    }


    /* -----------------------------------------------------
       18. Hover / Fokus des Admin-Buttons

       Beim Überfahren mit der Maus oder beim Tastaturfokus
       bleibt der Button bewusst schlicht.

       Es gibt:
       - keinen zusätzlichen Rahmen
       - keinen Schatten
       - keinen Hintergrund
       ----------------------------------------------------- */

    .offcanvas-menu-button:hover,
    .offcanvas-menu-button:focus {
        color: #971212;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

}


/* =========================================================
   OFFCANVAS – AUSSEHEN UND GRÖSSE

   WICHTIG:
   Diese Einstellungen betreffen NICHT den Admin-Button.

   Sie bestimmen das Fenster, das sich nach dem Klick
   auf "Admin" öffnet.
   ========================================================= */


/* ---------------------------------------------------------
   19. Breite des Administrations-Fensters

   AKTUELL:
       250px

   Beispiele für spätere Anpassungen:

       300px = schmal
       360px = normal
       400px = breit

   Wenn die Breite geändert wird, sollten beide Angaben
   denselben Wert erhalten:

       --bs-offcanvas-width
       width

   Hintergrund:
       #f4f6f7
   --------------------------------------------------------- */

#administrationOffcanvas {
    --bs-offcanvas-width: 250px !important;
    width: 250px !important;
    background-color: #f4f6f7;
}


/* ---------------------------------------------------------
   20. Überschrift "Administration"

   Legt fest:
   - Farbe
   - Schriftgröße
   - Schriftstärke

   Die Überschrift verwendet das Stadtelternrat-Rot.
   --------------------------------------------------------- */

#administrationOffcanvas .offcanvas-title {
    color: #971212;
    font-size: 1.3rem;
    font-weight: 600;
}


/* ---------------------------------------------------------
   21. Links des Administrationsmenüs

   Die normalen Links werden schwarz dargestellt.
   --------------------------------------------------------- */

#administrationOffcanvas .offcanvas-body a {
    color: #000000;
}


/* ---------------------------------------------------------
   22. Links des Administrationsmenüs – Hover

   Beim Überfahren mit der Maus wird der Link
   Stadtelternrat-Rot.
   --------------------------------------------------------- */

#administrationOffcanvas .offcanvas-body a:hover {
    color: #971212;
}


/* =========================================================
   MOBILE – CASSIOPEIA STANDARD

   WICHTIG:
   Hier wird NICHT in Cassiopeias mobiles Hauptmenü
   eingegriffen.

   Cassiopeia übernimmt auf Mobil:
   - Hamburger-Button
   - Öffnen / Schließen
   - Untermenüs
   - responsive Navigation

   Der zusätzliche Admin-Button wird auf Mobil
   vollständig ausgeblendet.
   ========================================================= */


/* ---------------------------------------------------------
   23. Admin-Button auf Mobil ausblenden

   Bis einschließlich 992px Bildschirmbreite wird der
   zusätzliche Admin-Button nicht angezeigt.

   Das normale Cassiopeia-Hamburgermenü bleibt davon
   unberührt.
   --------------------------------------------------------- */

@media (max-width: 992px) {

    .offcanvas-menu-button {
        display: none !important;
    }

}


/* =========================================================
   ENDE: HEADER / ADMINISTRATION / OFFCANVAS
   ========================================================= */


/* =========================================================
   GESAMTDESIGN – FARBEN UND AUSRICHTUNG

   Dieser Bereich enthält allgemeine Anpassungen des
   Cassiopeia-Layouts.

   Hier werden insbesondere:
   - Hintergrundfarben
   - Menüfarben
   - Hamburger-Button
   - Topbar
   - zusätzliche Menübereiche
   - Seitenhintergrund
   - Footer

   angepasst.
   ========================================================= */


/* ---------------------------------------------------------
   24. Header – Hintergrundfarbe

   Der Header erhält einen hellgrauen Hintergrund.

   background-image: none verhindert, dass ein eventuell
   vorhandenes Cassiopeia-Hintergrundbild angezeigt wird.
   --------------------------------------------------------- */

.container-header {
    background-color: darkred;
    background-image: none;
}


/* ---------------------------------------------------------
   25. Hauptmenü – Textfarbe

   Die Menütexte im Header werden in
   Stadtelternrat-Rot dargestellt.
   --------------------------------------------------------- */

.container-header .mod-menu {
    color: gold;
}

/* ---------------------------------------------------------
   25a. Mobile Menü – Menüüberschriften
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    .container-header .mod-menu .mod-menu__heading {
        color: #000000 !important;
    }

    .container-header .mod-menu a {
        color: #000000 !important;
    }
}

/* ---------------------------------------------------------
   26. Hamburger-Menü – Farbe und Rahmen

   Betrifft den mobilen Hamburger-Button.

   Farbe:
       slategray

   Rahmen:
       1px solid #eee
   --------------------------------------------------------- */

.container-header .navbar-toggler {
    color: slategray;
    border: 1px solid #eee;
}


/* ---------------------------------------------------------
   27. Topbar – Hintergrundfarbe

   Die obere zusätzliche Leiste erhält einen
   hellen Hintergrund.
   --------------------------------------------------------- */

.topbar {
    background-color: darkred;
}


/* ---------------------------------------------------------
   28. Zweiter Menübereich – Zentrierung

   Der Inhalt von .container-menu2 wird horizontal
   zentriert.
   --------------------------------------------------------- */

.container-menu2 {
    justify-content: center;
}


/* ---------------------------------------------------------
   29. Gesamter Seitenbereich – Hintergrundfarbe

   Der Hauptbereich des Seitenlayouts erhält einen
   hellen Hintergrund.
   --------------------------------------------------------- */

.site-grid {
    background-color: #f4f6f7;
}


/* ---------------------------------------------------------
   30. Header-Bereich – Hintergrundfarbe

   Der entsprechende .header-Bereich erhält ebenfalls
   den hellen Hintergrund.
   --------------------------------------------------------- */

.header {
    background-color: darkred;
}


/* ---------------------------------------------------------
   31. Top-Bereich / Menü 2 – Hintergrundfarbe

   Das Joomla-Modul innerhalb von .container-top-b
   erhält den gleichen hellen Hintergrund.
   --------------------------------------------------------- */

.container-top-b .mod-menu {
    background-color: #f4f6f7;
}


/* ---------------------------------------------------------
   32. Footer

   Der Footer wird:
   - mittig ausgerichtet
   - mit grauer Schrift dargestellt
   - hellgrau hinterlegt
   - ohne Hintergrundbild dargestellt
   - Menüeinträge werden horizontal dargestellt

   Dadurch wird der Footer optisch vom Hauptinhalt
   abgegrenzt.
   --------------------------------------------------------- */

.footer {
    color: gold;
    background-color: darkred;
    background-image: none;
    text-align: center;
}

footer .menu-horizontal {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================================================
   MEGA-MENÜ – NUR FÜR MENÜPUNKT 102

   Joomla 6.1.2 – Cassiopeia Child

   WICHTIG:
   Dieses Mega-Menü wird ausschließlich für den Joomla-
   Menüpunkt mit der Item-ID 102 angewendet.

   Der Menüpunkt muss deshalb weiterhin die Klasse
   .item-109 besitzen.

   Das Mega-Menü wird ausschließlich auf Desktop
   aktiviert.

   Auf Mobil wird NICHT in Cassiopeias Standard-
   Navigation eingegriffen.
   ========================================================= */


/* =========================================================
   DESKTOP – MEGA-MENÜ
   ========================================================= */

@media (min-width: 992px) {


    /* -----------------------------------------------------
       33. Grundposition des Hauptmenüs

       position: relative dient als Bezugspunkt für das
       absolut positionierte Mega-Menü.
       ----------------------------------------------------- */

    .container-header .mod-menu {
        position: relative;
    }


    /* -----------------------------------------------------
       34. Nur Menüpunkt 102 als Bezugspunkt

       .item-102 kennzeichnet den Joomla-Menüpunkt,
       für den das Mega-Menü erstellt wird.
       ----------------------------------------------------- */

    .container-header .mod-menu > .item-102 {
        position: relative;
    }


    /* -----------------------------------------------------
       35. Mega-Menü – Grundaufbau

       Das Untermenü von Menüpunkt 102 wird zunächst
       ausgeblendet.

       Es wird beim Überfahren des Menüpunktes sichtbar.

       Wichtige Eigenschaften:

       top:
           Position direkt unterhalb des Hauptmenüpunktes.

       left / transform:
           Positionierung des Mega-Menüs.

       width:
           1200px Gesamtbreite.

       background:
           Hellgrauer Hintergrund.

       padding:
           Innenabstand.

       grid-template-columns:
           Drei gleich breite Spalten.

       gap:
           Abstand zwischen den Spalten.

       box-shadow:
           Leichter Schatten.

       border-radius:
           Abgerundete Ecken.

       z-index:
           Das Mega-Menü liegt über anderen Elementen.
       --------------------------------------------------------- */

    .container-header .mod-menu > .item-102 > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 30%;
        transform: translateX(-30%);
        width: 1200px;
        background: lightgray;
        padding: 2rem;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        box-shadow: 0 12px 30px rgba(0,0,0,.18);
        border-radius: 12px;
        z-index: 9999;
    }


    /* -----------------------------------------------------
       36. Mega-Menü öffnen

       Sobald der Mauszeiger über Menüpunkt 102 bewegt
       wird, wird das Untermenü als CSS-Grid angezeigt.
       --------------------------------------------------------- */

    .container-header .mod-menu > .item-102:hover > ul {
        display: grid;
    }


    /* -----------------------------------------------------
       37. Listenpunkte im Mega-Menü

       Die Standard-Aufzählungszeichen werden entfernt.
       --------------------------------------------------------- */

    .container-header .mod-menu > .item-102 ul li {
        list-style: none;
    }


    /* -----------------------------------------------------
       38. Links innerhalb des Mega-Menüs

       Die Links werden als Blockelement dargestellt.

       WICHTIG:
       Hier wurde die ungültige Angabe

           display: box;

       bereinigt.

       Korrekt ist:

           display: block;

       Dadurch kann der Link den vorgesehenen Bereich
       vollständig als Blockelement nutzen.

       Weitere Einstellungen:
       - Schriftgröße: 15px
       - Zeilenhöhe: 0.5
       - vertikaler Innenabstand: 1rem
       --------------------------------------------------------- */

    .container-header .mod-menu > .item-102 ul li a {
        display: block;
        font-size: 15px;
        line-height: 0.5;
        padding: 0.25rem 0;
    }


    /* -----------------------------------------------------
       39. Überschriften der Mega-Menü-Spalten

       Die Überschriften werden:
       - rot
       - unterstrichen
       - größer
       - etwas kräftiger

       dargestellt.

       Dadurch können die einzelnen Menübereiche
       leichter unterschieden werden.
       --------------------------------------------------------- */

    .container-header .mod-menu > .item-102 > ul > li > .mod-menu__heading {
        color: #971212;
        text-decoration: underline;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: .25rem;
        display: block;
    }


    /* -----------------------------------------------------
       40. Trennlinien zwischen Mega-Menü-Spalten

       Zwischen den Spalten wird eine vertikale Linie
       in Stadtelternrat-Rot dargestellt.

       Die letzte Spalte erhält keine Trennlinie.
       --------------------------------------------------------- */

    .container-header .mod-menu > .item-102 > ul > li:not(:last-child) {
        border-right: 1.5px solid #971212;
        padding-right: 1.5rem;
    }


    /* -----------------------------------------------------
       41. Untermenüs innerhalb der Mega-Menü-Spalten

       Die verschachtelten Untermenüs sollen innerhalb
       der jeweiligen Spalten dauerhaft sichtbar bleiben.

       Deshalb werden Cassiopeia-Standardregeln für
       Darstellung, Sichtbarkeit und Positionierung
       hier gezielt überschrieben.

       display:
           Untermenü sichtbar als Block.

       visibility / opacity:
           Untermenü vollständig sichtbar.

       height:
           Automatische Höhe.

       position:
           static, damit es normal innerhalb der Spalte
           angeordnet wird.

       box-shadow:
           Kein zusätzlicher Schatten.
       --------------------------------------------------------- */

    .container-header .mod-menu > .item-102 .mod-menu__sub .mod-menu__sub {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        position: static;
        width: auto;
        padding: 0;
        margin-top: .3rem;
        box-shadow: none;
    }

}



/* =========================================================
   MOBIL – CASSIOPEIA STANDARD

   WICHTIG:
   Dieser Bereich bleibt bewusst leer.

   Auf Mobil wird das Mega-Menü nicht durch eigene
   CSS-Regeln verändert.

   Cassiopeia übernimmt weiterhin:

   - Hamburger-Button
   - Öffnen / Schließen
   - aria-hidden
   - Toggle-Funktion
   - Untermenüs
   - responsive Navigation

   Dadurch bleibt die mobile Joomla-Navigation möglichst
   nah am Cassiopeia-Standard.
   ========================================================= */


/*
   BEWUSST LEER LASSEN!

   Keine zusätzlichen Regeln für das mobile Hauptmenü
   hinzufügen, sofern dies nicht ausdrücklich erforderlich
   ist.

   Änderungen am mobilen Cassiopeia-Menü können sich auf
   die Standard-Toggle-Funktion und Untermenüs auswirken.
*/


/* =========================================================
   ENDE DER USER.CSS

   Dokumentation:
   Die CSS-Regeln sind nach Funktionsbereichen sortiert.

   Empfohlene Reihenfolge bei zukünftigen Änderungen:

   1. Allgemeine Anpassungen
   2. Header / Logo / Hauptmenü
   3. Administration / Offcanvas
   4. Mobile Navigation
   5. Gesamtdesign / Farben
   6. Mega-Menü
   7. Mobile Cassiopeia-Regeln

   So können zukünftige Webmaster schnell erkennen,
   wo eine bestimmte Änderung vorgenommen werden muss.
   ========================================================= */