/* 1. Globale Schriftgröße auf ca. 70% herunterskalieren (Beez3-Kompaktheit) */
:root {
    font-size: 0.75rem; 
}

body {
    font-size: 1rem; 
    line-height: 1.4;
}

/* 2. Linien über und unter dem Beitragstitel im Beez3-Stil */
.item-title, 
.page-header h1, 
.page-header h2, 
.item-page h1, 
.item-page h2 {
    border-top: 1px solid #cccccc !important;    /* Linie über dem Titel */
    border-bottom: 1px solid #cccccc !important; /* Linie unter dem Titel */
    padding-top: 6px !important;                 
    padding-bottom: 6px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    display: block !important;                   /* Zwingt die Linien über die volle Breite */
}

/* 3. Unterstreichung bei allen Beitragslinks komplett entfernen */
.item-title a,
.com-content-category-blog__item h2 a,
.item-page h1 a,
.item-page h2 a,
main a {
    text-decoration: none !important; 
}

/* Optional: Ein dezenter Effekt, wenn man mit der Maus über den Link fährt */
.item-title a:hover,
main a:hover {
    text-decoration: underline !important; 
}

/* ==========================================================================
   Fußzeile (Desktop flexibel, Mobile untereinander)
   ========================================================================== */
footer.footer {
    display: flex !important;
    justify-content: space-between; /* Links links, Menü rechts auf Desktop */
    align-items: center;
    flex-wrap: wrap;
    gap: 15px; /* Abstand, falls Elemente umbrechen */
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #cccccc;
}

/* Das Menü im Footer horizontal darstellen */
footer.footer .mod-menu,
footer.footer ul {
    display: flex !important;
    flex-direction: row !important; 
    gap: 20px !important;          
    list-style: none !important;    
    margin: 0 !important;
    padding: 0 !important;
}

footer.footer .mod-menu li,
footer.footer ul li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* ── Mobile Optimierung für das Smartphone ── */
@media (max-width: 767.98px) {
    /* 1. Footer-Inhalt zentrieren und untereinander stapeln */
    footer.footer {
        flex-direction: column !important;
        text-align: center;
        gap: 10px;
    }

    /* 2. Das Burger-Menü aushebeln: Menü immer voll anzeigen */
    footer.footer .navbar-toggler {
        display: none !important; /* Versteckt den Burger-Button */
    }

    footer.footer .collapse:not(.show), 
    footer.footer .collapsing {
        display: block !important; /* Erzwingt die Anzeige der Links */
        height: auto !important;
        transition: none !important;
    }

    /* 3. Links auf Mobile nebeneinander zentrieren */
    footer.footer .mod-menu,
    footer.footer ul {
        justify-content: center;
    }
}


/* Telefonnummern vor Bots schützen, durch verkehrt herum eintragen */
.tel-safe {
    direction: rtl;
    unicode-bidi: bidi-override;
}

/* Löst das Icon vom Bildschirmrand und erlaubt die Platzierung im Header */
.joomla-accessibility-button {
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 10;
}

/* Falls der Header-Container relativ positioniert ist, 
   richtet sich das Icon exakt an dessen rechtem Rand aus */
#sp-header, .header, .topbar { /* Ersetze dies durch die ID/Klasse deines Headers */
    position: relative;
}

/* ==========================================================================
   4. Schriftgrößen-Wechsler (A- / A / A+)
   ========================================================================== */
.font-resizer {
    display: flex;
    gap: 6px;
    margin: 10px 0;
    justify-content: flex-end;
}

.font-resizer {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;  /* Das schiebt das gesamte Element nach ganz rechts */
    margin-right: 0;    /* Hält es bündig am rechten Rand */
    width: max-content; /* Sorgt dafür, dass der Container nur so groß wie die Buttons ist */
}

.font-resizer button:hover {
    background-color: #e0e0e0;
    border-color: #bbbbbb;
}

.font-resizer button:active {
    transform: scale(0.95);
}

body {
    transition: font-size 0.2s ease-in-out;
}


/* ==========================================================================
   5. Header-Bilder nebeneinander ausrichten (Größen optimiert)
   ========================================================================= */
.custom-header-brand {
    display: flex !important;
    align-items: center;       /* Zentriert beide Bilder vertikal zueinander */
    gap: 30px;                 /* Etwas mehr Abstand zwischen den großen Bildern */
    flex-wrap: wrap;           /* Erlaubt den Umbruch auf Handys, statt zu quetschen */
}

.custom-header-brand .header-logo {
    height: 100px !important;  /* Deutlich größer auf dem Desktop (vorher 60px) */
    width: auto !important;
    max-width: 100%;
    flex-shrink: 0;            /* Verbietet dem Browser, das Logo zu verkleinern */
}

.custom-header-brand .header-extra {
    height: 85px !important;   /* Passend dazu das Zusatzbild vergrößert (vorher 50px) */
    width: auto !important;
    max-width: 100%;
    flex-shrink: 0;            /* Verbietet dem Browser, das Zusatzbild zu quetschen */
}

/* ── Mobile Optimierung für das Smartphone ── */
@media (max-width: 767.98px) {
    .custom-header-brand {
        flex-direction: column !important; /* Stapelt Logo und Zusatzbild untereinander */
        justify-content: center;
        align-items: center;
        gap: 15px;             
        width: 100%;           
        text-align: center;
    }

    .custom-header-brand .header-logo {
        height: 65px !important; /* Spürbar größer auf dem Smartphone (vorher 50px) */
    }

    .custom-header-brand .header-extra {
        height: 55px !important; /* Spürbar größer auf dem Smartphone (vorher 40px) */
    }
}