/* Facebook-Icon im Hauptmenü in Originalfarbe färben */
.sp-megamenu-parent .fa-facebook, 
.sp-megamenu-parent .fa-facebook-f {
    color: #1877F2 !important;
    transition: color 0.3s ease;
}

/* Optional: Farbe beim Drüberfahren (Hover) leicht verändern */
.sp-megamenu-parent .fa-facebook:hover, 
.sp-megamenu-parent .fa-facebook-f:hover {
    color: #135cb4 !important;
}

/* Schriftgröße für alle Untermenüpunkte anpassen */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-size: 14px !important; /* Hier die gewünschte Größe eintragen */
}

/* Den Abstand des Dropdown-Menüs nach oben verringern */
.sp-megamenu-parent .sp-dropdown {
    top: 100% !important; /* Richtet das Menü exakt an der Unterkante des Menüpunkts aus */
    margin-top: -4px !important; /* Verhindert zusätzlichen Abstand */
}
#sp-header {
    border: 2px solid #ff6600 !important;
}

/* Featured-Badge in Blog-Listen ausblenden */
.article-list .article .featured-article-badge {
    display: none !important;
    visibility: hidden !important;
}
/* Blendet das rote Featured-Badge in der Beitrags-Einzelansicht aus */
.article-details .featured-article-badge {
    display: none !important;
}

/* Sicherheitshalber für alle Badge-Varianten des Templates */
span.featured-article-badge {
    display: none !important;
}
/* Verringert den oberen Abstand für alle Beitrags- und Blog-Seiten */
.com-content #sp-main-body {
    padding-top: 20px !important;
}


/* Abstand zwischen Artikel-Container und dem umschließenden Main-Body */
#sp-main-body {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Eigenschaften der Artikel */
.article-details, .article-list .article {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  border: 2px solid #ff6600; /*orange*/
  background-color: #7faddb; /*blau*/
  padding:25px;
  border-radius: 10px;
}

/* Stil für alle Tabellen in Beiträgen */
.article-details table {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    font-family: inherit;
}

/* Tabellenkopf (Header) farblich anpassen */
.article-details table th {
    background-color: #76A1CC; /* dunkleres blau als Grundfarbe */
    color: #f2f2f2;            /* hellgraue Schrift */
    font-size: 22px;
    padding: 12px;
    text-align: center;
    border: 2px solid #ff6600; /* orange*/
}

/* Tabellenzeilen stylen */
.article-details table td {
    padding: 10px;
    border: 1px solid #ff6600; /*orange*/
}

/******* Hier geht es um die Listenansicht im Archiv **************/
/* Den Container der Kategorieliste anpassen */
.com-content-category .category-list {
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
/* Die Tabelle in der Kategorieliste stylen */
.com-content-category table.category {
    width: 100%;
    background-color: #7faddb;  /* Standardblau */
    border-collapse: collapse;
}
/* Alle Links (Beitragstitel, Autorennamen etc.) in der Tabelle hellgrau färben */
.com-content-category table.category a {
    color: #f2f2f2 !important;
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
  margin-left: 30px;
}
/* Tabellenzeilen stylen & Hover-Effekt hinzufügen */
.com-content-category table.category tbody tr {
    transition: background-color 0.2s ease;
}

.com-content-category table.category tbody tr:hover {
    background-color: #f1f3f5; /* Hellgrau beim Drüberfahren */
}

.com-content-category table.category tbody td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
}