/* ==========================================
   GENUSSWERK THÖRL - JOOMLA 6
   CASSIOPEIA - USER.CSS
   ========================================== */


/* ==========================================
   1. LOGO UND MENÜ
   ========================================== */

/* Logo und Menü untereinander */
.grid-child.container-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 5px;
}

/* Logo-Modul zentrieren */
.grid-child.container-nav .mod-custom {
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center;
}

/* Absatzabstände entfernen */
.grid-child.container-nav .mod-custom p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo-Bild */
.grid-child.container-nav .mod-custom img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Menü-Modul */
.grid-child.container-nav .navbar {
    margin: 0 auto !important;
    padding: 0 !important;
    width: auto;
}

/* Menüpunkte */
.grid-child.container-nav .navbar-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}


/* ==========================================
   2. KONTAKTSEITE
   ========================================== */

/* Gesamte Kontaktseite zentrieren */
.com-contact {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Kontaktcontainer */
.com-contact .com-contact__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

/* Überschrift Kontakt */
.com-contact .com-contact__container > h2 {
    width: 100%;
    margin: 0 auto 25px;
    text-align: center;
}

/* Kontaktinformationen */
.com-contact .com-contact__info {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

/* Adresse, Telefon und Website */
.com-contact dl.com-contact__address {
    display: grid;
    grid-template-columns: 25px minmax(0, max-content);
    column-gap: 12px;
    row-gap: 6px;

    width: fit-content;
    max-width: 100%;
    margin: 0 auto 30px !important;
    padding: 0;

    text-align: left;
}

/* Joomla Standardformatierung zurücksetzen */
.com-contact dl.com-contact__address dt,
.com-contact dl.com-contact__address dd {
    float: none;
    clear: none;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Symbole links */
.com-contact dl.com-contact__address dt {
    grid-column: 1;
}

/* Texte rechts */
.com-contact dl.com-contact__address dd {
    grid-column: 2;
    min-width: 0;
}

/* Lange Weblinks umbrechen */
.com-contact__address a {
    overflow-wrap: anywhere;
}

/* Kontaktformular */
.com-contact__form {
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
}

/* Formularüberschriften */
.com-contact__form h3 {
    text-align: center;
}

/* Eingabefelder */
.com-contact__form input,
.com-contact__form textarea {
    max-width: 100%;
}


/* ==========================================
   3. BEITRÄGE ZENTRIEREN
   ========================================== */

/* Gesamter Beitrag */
.com-content-article {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Überschriften und Texte */
.com-content-article .page-header,
.com-content-article .com-content-article__body {
    text-align: center;
}

/* Bilder */
.com-content-article img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================
   4. MOBILE ANSICHT
   ========================================== */

@media (max-width: 768px) {

    /* Logo und Menü */
    .grid-child.container-nav {
        gap: 5px;
    }

    /* Menüabstände */
    .grid-child.container-nav .navbar-nav {
        gap: 10px;
        justify-content: center;
    }

    /* Kontaktbereich */
    .com-contact {
        padding: 0 15px;
    }

    /* Kontaktinformationen */
    .com-contact dl.com-contact__address {
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 10px;
    }

    /* Beiträge */
    .com-content-article {
        padding: 0 15px;
    }
}


/* ==========================================
   KONTAKTDATEN OPTISCH ZENTRIEREN
   ========================================== */

/* Texte innerhalb des Kontaktblocks zentrieren */
.com-contact dl.com-contact__address dd {
    text-align: center !important;
}

/* Symbole bleiben links */
.com-contact dl.com-contact__address dt {
    text-align: center;
}


/* ==========================================
   5. HEADER - HINTERGRUNDFARBE
   ========================================== */

/* Hintergrundfarbe für Logo und Menü */
.container-header {
    background-color: #FFFAF0 !important;
    background-image: none !important;
}


/* ==========================================
   6. FOOTER - GENUSSWERK THÖRL
   ========================================== */

/* Footer gleiche Farbe wie Header */
.container-footer {
    background-color: #FFFAF0 !important;
    background-image: none !important;
    color: #171717 !important;

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

    width: 100%;
    min-height: 0;
    height: auto;

    margin: 0;
    padding: 8px 10px !important;
    text-align: center;
}

/* Joomla Footer-Container */
.container-footer .grid-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin: 0;
    padding: 0 !important;
    gap: 0;
}

/* Footer-Modul */
.container-footer .mod-custom,
.container-footer .moduletable {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/* Absatzabstände entfernen */
.container-footer p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Copyright */
.genusswerk-copyright {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* Copyright-Link neutral */
.genusswerk-copyright a,
.genusswerk-copyright a:visited,
.genusswerk-copyright a:hover,
.genusswerk-copyright a:active,
.genusswerk-copyright a:focus {
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Kein optischer Hover-Effekt */
.genusswerk-copyright a:hover {
    opacity: 1;
}