```css
/* =========================================================
   CSS-1×1 – KLEINE LEGENDE

   display: flex;
      = Elemente werden flexibel nebeneinander/untereinander angeordnet

   flex-direction: row;
      = Elemente stehen nebeneinander

   flex-direction: column;
      = Elemente stehen untereinander

   justify-content: center;
      = Inhalt wird horizontal bzw. entlang der Hauptachse zentriert

   align-items: center;
      = Inhalt wird auf der anderen Achse zentriert

   gap: 20px;
      = Abstand zwischen mehreren Elementen

   margin: 0 auto;
      = außen kein Abstand oben/unten und horizontal automatisch zentriert

   padding: 20px;
      = Innenabstand eines Elements

   width: 100%;
      = Element nimmt die komplette verfügbare Breite ein

   max-width: 1200px;
      = Element darf maximal 1200px breit werden

   background: #ffffff;
      = Hintergrundfarbe

   color: #202020;
      = Textfarbe

   border-radius: 10px;
      = Ecken abrunden

   box-shadow:
      = Schatten um ein Element

   font-size: 1.2rem;
      = Schriftgröße

   font-weight: 700;
      = Schriftstärke / fett

   text-decoration: none;
      = z. B. Unterstreichung eines Links entfernen

   transition:
      = weiche Animation bei Änderungen, z. B. Hover

   @media (max-width: 900px)
      = Regeln gelten nur für Bildschirmbreiten bis 900px
        (Tablet / kleinere Geräte)

   !important
      = Regel soll andere Joomla-/Template-Regeln übersteuern

   #f0a000
      = Farbe im HEX-Format
        #RRGGBB → Rot / Grün / Blau

   ========================================================= */


/* =========================================================
   1. GRUNDDESIGN
   ========================================================= */

body {
    background: #f6f6f4;
    color: #202020;
}

.site-grid {
    background: transparent;
}


/* =========================================================
   2. HEADER / LOGO
   ========================================================= */

.container-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 1320px !important;

    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    box-sizing: border-box !important;
}


/* Logo */

.container-header .navbar-brand {
    display: flex;
    align-items: center;
}

.container-header .navbar-brand img {
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
}


/* Linker Bereich des Headers */

header.container-header > .grid-child:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
}


/* Navigation neben dem Logo */

header.container-header > .container-nav {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;

    margin-left: 20px !important;

    display: flex;
    align-items: center;
}


/* =========================================================
   3. HAUPTNAVIGATION
   ========================================================= */

header.container-header .mod-menu {
    display: flex !important;
    flex-direction: row !important;

    justify-content: flex-start !important;

    gap: 15px !important;

    margin: 0 !important;

    font-size: 1.3rem !important;

    flex-wrap: wrap !important;

    background: transparent !important;
}


/* Navigationslinks */

header.container-header .mod-menu > li > a {
    color: #202020 !important;

    background: transparent !important;

    text-decoration: none !important;

    border-bottom: 3px solid transparent !important;

    padding-bottom: 4px !important;

    transition:
        border-color 0.2s ease,
        color 0.2s ease !important;
}


/* Hover */

header.container-header .mod-menu > li > a:hover,
header.container-header .mod-menu > li > a:focus {
    background: transparent !important;

    color: #e99a00 !important;

    border-bottom-color: currentColor !important;
}


/* Aktiver Menüpunkt */

header.container-header .mod-menu > li.current > a,
header.container-header .mod-menu > li.active > a {
    background: transparent !important;

    color: #e99a00 !important;

    border-bottom: 3px solid currentColor !important;
}


/* =========================================================
   4. ALLGEMEINE MODULE / KARTEN
   ========================================================= */

.card {
    border: none !important;

    border-radius: 16px !important;

    box-shadow: none !important;

    background: transparent;
}


/* Karteninhalt */

.card-body {
    background: transparent;

    padding-left: 0;
    padding-right: 0;
}


/* Überschriften der Module */

.card-header {
    background: transparent !important;

    border: none !important;

    padding: 20px 15px 10px !important;
}

.card-header h2,
.card-header h3 {
    color: #202020;

    font-weight: 700;
}


/* =========================================================
   5. ALLGEMEINE ÜBERSCHRIFTEN
   ========================================================= */

h1,
h2,
h3,
h4 {
    color: #202020;
}


/* Orange Akzentlinie unter Überschriften */

h2::after,
h3::after {
    content: "";

    display: block;

    width: 45px;
    height: 3px;

    background: #f0a000;

    margin-top: 8px;

    border-radius: 3px;
}


/* =========================================================
   6. LINKS
   ========================================================= */

a {
    color: #d88900;
}

a:hover {
    color: #b86f00;
}


/* =========================================================
   7. "AKTUELL IN LAGGENBECK"
   ========================================================= */

.card:nth-of-type(2) {
    background: #fff8e8 !important;

    border-left: 5px solid #f0a000 !important;

    border-radius: 16px !important;

    padding: 10px 25px 20px !important;

    margin-top: 35px !important;
    margin-bottom: 35px !important;
}


/* =========================================================
   8. DIE VIER THEMENBEREICHE
   ========================================================= */

.card-body h3 {
    position: relative;

    padding-bottom: 12px;

    margin-bottom: 14px;
}


/* Orange Akzentlinie */

.card-body h3::after {
    content: "";

    display: block;

    width: 40px;
    height: 3px;

    background: #f0a000;

    border-radius: 3px;

    margin-top: 9px;
}


/* Abstand zwischen den Bereichen */

.card-body > div {
    margin-bottom: 10px;
}

/* =========================================================
   9. ENGAGEMENT-BEREICH
   ========================================================= */

.engagement-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.engagement-grid .engagement-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 28px 25px !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 14px !important;
    text-align: center !important;
}

/* Tablet */
@media (max-width: 900px) {
    .engagement-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Smartphone */
@media (max-width: 600px) {
    .engagement-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   10. MITGLIEDERÜBERSICHT
   ========================================================= */

.item-page ul {
    columns: 3;

    column-gap: 50px;

    padding-left: 20px;
}


/* Verhindert, dass ein einzelner Eintrag
   unschön über zwei Spalten verteilt wird */

.item-page ul li {
    break-inside: avoid;

    margin-bottom: 8px;
}


/* =========================================================
   11. FOOTER
   ========================================================= */

.footer {
    background: transparent;

    padding: 10px 20px;
}


/* Footer-Menü */

.footer .mod-menu {
    display: flex !important;

    flex-direction: row !important;

    justify-content: center;

    align-items: center;

    gap: 25px;

    background: #eeeeee;

    padding: 10px 25px;

    margin: 0 auto;

    width: fit-content;

    border-radius: 3px;
}


/* Einzelne Footer-Menüpunkte */

.footer .mod-menu > li {
    display: block !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* Footer-Links */

.footer .mod-menu > li > a {
    display: inline-block;

    color: #333333;

    text-decoration: none;

    font-size: 0.9rem;

    padding: 0;
}


/* Footer Hover */

.footer .mod-menu > li > a:hover {
    color: #000000;

    text-decoration: underline;
}


/* =========================================================
   12. TABLET
   Bildschirmbreite bis 900px
   ========================================================= */

@media (max-width: 900px) {

    /* Header */

    header.container-header {
        flex-direction: column !important;

        align-items: center !important;

        width: 100% !important;

        max-width: 100% !important;
    }


    /* Logo */

    .container-header .navbar-brand img {
        max-height: 65px !important;
    }


    /* Navigation */

    header.container-header > .container-nav {
        margin-left: 0 !important;

        margin-top: 15px !important;

        width: 100% !important;
    }


    header.container-header .mod-menu {
        justify-content: center !important;

        flex-wrap: wrap !important;

        gap: 10px !important;
    }


    /* Mitglieder */

    .item-page ul {
        columns: 2;
    }
}


/* =========================================================
   13. SMARTPHONE
   Bildschirmbreite bis 600px
   ========================================================= */

@media (max-width: 600px) {

    /* Logo */

    .container-header .navbar-brand img {
        max-height: 85px !important;
    }


    /* Mitglieder */

    .item-page ul {
        columns: 1;
    }
}


/* =========================================================
   14. ENGAGEMENT-BEREICH AUF KLEINEN BILDSCHIRMEN
   ========================================================= */

@media (max-width: 800px) {

    .engagement-grid {
        flex-direction: column !important;
    }
}


/* =========================================================
   GEMEINSAM FÜR LAGGENBECK – unterhalb von UNSERE MITGLIEDER
   ========================================================= */

.container-bottom-b {
    display: block !important;
}

.container-bottom-b > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Hauptüberschrift Startseite */
h1 {
    color: #e99a00 !important;
}














/* =========================================================
   WIR ... FÜR LAGGENBECK
   GLOBALER SEITENHINTERGRUND
   ========================================================= */

/* ---------------------------------------------------------
   1. Grundhintergrund
   --------------------------------------------------------- */

html {
    background: #f7f6f2;
}

body {
    background-color: #f7f6f2;
    background-image: url('/images/background/laggenbeck-hintergrund.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    margin: 50, auto;
    background-size: 100% auto;
    background-attachment: fixed;
}


/* ---------------------------------------------------------
   2. Joomla-Hauptbereich transparent machen
   --------------------------------------------------------- */

.site-grid {
    background: transparent;
}


/* ---------------------------------------------------------
   3. Hauptinhalt
   --------------------------------------------------------- */

.site-grid > .container-component {
    background: transparent;
}


/* ---------------------------------------------------------
   4. Artikelbereich
   --------------------------------------------------------- */

.com-content-article {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 8px;
    padding: 1.5rem 2rem;
}


/* ---------------------------------------------------------
   5. Module / Karten
   --------------------------------------------------------- */

.card {
    background: rgba(255, 255, 255, 0.94);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}


/* ---------------------------------------------------------
   6. Kartenkopf
   --------------------------------------------------------- */

.card-header {
    background: transparent;
    border-bottom: 0;
}


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

.container-header {
    background: rgba(255, 255, 255, 0.96);
}


/* ---------------------------------------------------------
   8. Breadcrumbs
   --------------------------------------------------------- */

.breadcrumb {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
}


/* ---------------------------------------------------------
   9. Große Bildschirme
   Mehr Raum zwischen Hintergrund und Inhalt
   --------------------------------------------------------- */

@media (min-width: 1400px) {

    .site-grid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .com-content-article {
        padding: 2rem 2.5rem;
    }
}


/* ---------------------------------------------------------
   10. Tablet
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    body {
        background-size: auto 900px;
        background-position: center top;
        background-attachment: scroll;
    }

    .com-content-article {
        padding: 1.25rem 1.5rem;
    }
}


/* ---------------------------------------------------------
   11. Smartphone
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    body {
        background-size: auto 700px;
        background-position: center top;
        background-attachment: scroll;
    }

    .com-content-article {
        padding: 1rem;
        border-radius: 6px;
    }

    .card {
        border-radius: 6px;
    }
}