/* ==================================================
   Inzinger Webseite
   user.css Version 1.0

   Teil 1:
   Grundsystem
   Karten
   Startseite
   ================================================== */


/* ==================================================
   01 - Zentrale Variablen
   ================================================== */

:root {

    --website-color: #003b6f;
    --text-color: #333333;
    --card-bg: #ffffff;

    --card-radius: 16px;
    --card-shadow: 0 5px 15px rgba(0,0,0,0.12);

}


/* ==================================================
   02 - Allgemeines
   ================================================== */

body {
    color: var(--text-color);
}


/* Links */

a {
    color: var(--website-color);
}


/* ==================================================
   03 - Cassiopeia Header ausblenden
   ================================================== */

.container-header {
    display: none;
}



/* ==================================================
   04 - Einheitliches Kartensystem
   ================================================== */


/* Allgemeine Joomla Karten */

.content-card,
.item-page,
.blog-item,
.category-desc,
.contact {

    background: var(--card-bg);

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

}



/* Innenabstand Module */

.content-card .card-body {

    padding: 2rem;

}



/* Überschriften Karten */

.content-card h1,
.content-card h2,
.content-card h3,
.item-page h1,
.item-page h2,
.item-page h3,
.blog-item h1,
.blog-item h2,
.blog-item h3,
.category-desc h1,
.category-desc h2,
.category-desc h3,
.contact h1,
.contact h2,
.contact h3 {

    color: var(--website-color);

}



/* Allgemeiner Text */

.content-card p,
.item-page p,
.blog-item p,
.category-desc p,
.contact p {

    color: var(--text-color);

    line-height: 1.6;

}



/* ==================================================
   05 - Titelbild / Startseite
   ================================================== */


/* Titelbild zentriert */

.container-top-a img {

    display: block;

    margin-left: auto;
    margin-right: auto;

    max-width: 100%;

}



/* Welcome Card */

.container-top-b {

    text-align: left;

}


.container-top-b h3 {

    text-align: center;

}



.container-top-b h5 {

    margin-top: 1rem;

}



/* ==================================================
   06 - Familienkarten
   ================================================== */


.family-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 1rem;

}



.family-photo img {

    max-width: 100%;

    height: auto;

}



.family-name {

    margin-top: 1rem;

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--website-color);

}



/* kleiner Bewegungseffekt */

.family-card:hover {

    transform: translateY(-5px);

    transition: transform .25s ease;

}
/* ==================================================
   07 - Einzelbeiträge
   ================================================== */


.item-page {

    padding: 2rem;

}



.item-page p {

    color: var(--text-color);

    line-height: 1.6;

}




/* ==================================================
   08 - Kategorieansicht Beiträge
   ================================================== */


/* einzelne Beitragskarten */

.com-content-category-blog__item.blog-item {

    background: var(--card-bg);

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    margin-bottom: 2rem;

    overflow: hidden;

}



/* Innenabstand des Beitrags */

.com-content-category-blog__item .item-content {

    padding: 2rem;

}



/* Beitrag Überschriften */

.com-content-category-blog__item h1,
.com-content-category-blog__item h2,
.com-content-category-blog__item h3,
.com-content-category-blog__item h4 {

    color: var(--website-color);

}

/* Beitragstitel Größe */

.com-content-category-blog__item h2 {

    font-size: 1.4rem;

}



/* Beitragstext */

.com-content-category-blog__item p {

    color: var(--text-color);

    line-height: 1.6;

}

/* Bilder in Beiträgen */

.blog-item .item-content img,
.item-page img {

    max-width: 100%;

    height: auto;

    border-radius: 12px;

    margin: 1rem auto;

    display: block;

}


/* ==================================================
   09 - Kategorie Beschreibung
   ================================================== */


.category-desc {

    padding: 2rem;

    margin-bottom: 2rem;

}



.category-desc p {

    color: var(--text-color);

    line-height: 1.6;

}



.category-desc h1,
.category-desc h2,
.category-desc h3,
.category-desc h4,
.category-desc h5 {

    color: var(--website-color);

}



/* ==================================================
   10 - Aufklappbereiche DETAILS
   ================================================== */


details {

    margin-top: 1rem;

}



summary {

    cursor: pointer;

    color: var(--website-color);

    font-weight: 600;

    list-style: none;

}



summary::-webkit-details-marker {

    display: none;

}



summary::after {

    content: " ▶";

    font-size: .8rem;

}


details[open] summary::after {

    content: " ▲";

}




/* ==================================================
   11 - Kontaktseite
   ================================================== */


.contact {

    padding: 2rem;

}



.contact h1,
.contact h2,
.contact h3 {

    color: var(--website-color);

}



.contact a {

    color: var(--website-color);

    text-decoration: none;

}



.contact a:hover {

    text-decoration: underline;

}



/* Kontaktformular */

.contact-form input,
.contact-form textarea,
.contact-form select {

    border-radius: 8px;

}



.contact-form button,
.contact-form .btn {

    background: var(--website-color);

    color: #ffffff;

    border-radius: 8px;

    border: none;

}
/* ==================================================
   12 - Footer
   ================================================== */


/* Hintergrund Cassiopeia überschreiben */

.container-footer,
.container-footer.footer,
.container-footer.full-width,
.container-footer .grid-child {

    background: #ffffff !important;

    background-image: none !important;

}



/* Footer Inhalt zentrieren */

.container-footer .grid-child {

    display: flex !important;

    justify-content: center !important;

    align-items: center;

}



/* Footer Menü horizontal */

.container-footer ul.mod-menu,
.container-footer ul.nav {

    display: flex !important;

    flex-direction: row !important;

    justify-content: center !important;

    align-items: center !important;

    flex-wrap: wrap;

    gap: 1.5rem;

    margin: 0;

    padding: 0;

    list-style: none;

}



/* Menüpunkte */

.container-footer ul.mod-menu li,
.container-footer ul.nav li {

    display: inline-flex !important;

    width: auto !important;

    margin: 0;

    padding: 0;

}



/* Links */

.container-footer ul.mod-menu a,
.container-footer ul.nav a {

    color: var(--website-color) !important;

    text-decoration: none !important;

}



/* aktiver Menüpunkt */

.container-footer .nav-item.active a {

    text-decoration: none !important;

    font-weight: normal !important;

}




/* ==================================================
   13 - Breadcrumbs
   ================================================== */


/* global ausblenden */

/*.mod-breadcrumbs__wrapper {

/*    display: none;

/*}




/* ==================================================
   14 - Responsive Tablet
   ================================================== */


@media (max-width: 992px) {


    .content-card .card-body,
    .item-page,
    .blog-item .item-content,
    .category-desc,
    .contact {

        padding: 1.5rem;

    }


}



/* ==================================================
   15 - Responsive Handy
   ================================================== */


@media (max-width: 576px) {


    .content-card .card-body,
    .item-page,
    .blog-item .item-content,
    .category-desc,
    .contact {

        padding: 1rem;

    }



    .container-footer ul.mod-menu,
    .container-footer ul.nav {

        gap: 1rem;

    }


}