/* ==============================
   Blog-Artikel Container
============================== */
.blog-container {
    max-width: 1400px;                     /* maximale Breite des Blogbereichs */
    margin: 20px auto;                     /* zentriert den Blogbereich horizontal */
    padding: 30px;                         /* Innenabstand innerhalb des Containers */
    border: none;                          /* kein äußerer Rahmen */
    border-radius: 10px;                   /* abgerundete Ecken */
    color: #f8f8f8;                        /* Textfarbe */
}

/* Einzelne Blog-Beiträge */
.blog-container .blog-item {
    border: 1px solid #f8f8f8;            /* Rahmen um jeden Beitrag */
    border-radius: 8px;                    /* abgerundete Ecken */
    padding: 20px;                         /* Innenabstand */
    margin-bottom: 20px;                   /* Abstand zwischen Beiträgen */
    background-color: rgba(255,255,255,0.05); /* leicht abgehobener Hintergrund */
    overflow: hidden;                      /* Floatende Bilder korrekt einbeziehen */
}

.com-content-category-blog.blog {
    background-color: rgba(0, 0, 0, 0.75); /* schwarz mit 75% Deckkraft */
    backdrop-filter: blur(3px); /* Weichzeichner */
    border-radius: 6px; /* abgerundete Ecken */
}

/* ==============================
   BLOG PAGINATION
============================== */
.blog-container .pagination { 
    margin-top: 30px;           /* Abstand nach oben zum Blogbereich */
    text-align: center;          /* Zentriert die Buttons horizontal */
    padding: 0;                  /* Kein zusätzlicher Innenabstand */
    list-style: none;            /* Aufzählungszeichen entfernen */
}

.blog-container .pagination li {
    display: inline-flex;        /* Inline, aber Flex für Zentrierung */
    align-items: center;         /* Vertikal zentriert */
    justify-content: center;     /* Horizontal zentriert */
    margin: 0 5px;               /* Abstand zwischen den Buttons */
    min-width: 40px;             /* Einheitliche Mindestbreite */
    height: 40px;                /* Einheitliche Höhe */
}

.blog-container .page-link {
    display: flex;               /* Flex für Inhalt zentrieren */
    align-items: center;         /* Vertikal zentriert */
    justify-content: center;     /* Horizontal zentriert */
    width: 100%;                 /* Volle Breite des li */
    height: 100%;                /* Volle Höhe des li */
    padding: 0;                  /* Kein extra Padding */
    border-radius: 2px;          /* Abgerundete Ecken */
    text-decoration: none;       /* Keine Unterstreichung */
    color: #0073aa;              /* Textfarbe */
    background-color: #fff;      /* Hintergrundfarbe */
    transition: all 0.3s;        /* Sanfter Übergang beim Hover */
}

.blog-container .page-link:hover {
    background-color: #0073aa;   /* Hintergrundfarbe beim Hover */
    color: #fff;                 /* Textfarbe beim Hover */
}

.blog-container .pagination .active span {
    background-color: #0073aa;   /* Hintergrundfarbe aktive Seite */
    color: #fff;                 /* Textfarbe aktive Seite */
    border-color: #0073aa;       /* Rahmenfarbe aktive Seite */
}
/* Passkey Button bei der Anmeldemaske ausblenden */
.plg_system_webauthn_login_button {
  display: none;
}

/* Textfarbe schwarz bei Passwortvergessen und zurücksetzen Formularen */
.com-users-reset-confirm__form input,
.com-users-reset-confirm__form label,
.com-users-reset-confirm__form legend {
  color: #000 !important;
}
.com-users-reset-complete__form,
.com-users-reset-complete__form legend,
.com-users-reset-complete__form label,
.com-users-reset-complete__form input,
.com-users-reset-complete__form button,
.com-users-reset-complete__form div,
.com-users-reset-complete__form meter,
.com-users-reset-complete__form .text-center {
  color: #000 !important;
}
/* Textfarbe für das Eingabefeld */
#jform_email {
    color: black !important; /* Text schwarz */
}