.com-content-category-blog__item img {
    height: auto;
    max-width: 100%;
    border-radius: 4px; /* Optional: macht die Ecken leicht rund */
}

/* Erzeugt ein 4-Spalten-Gitter für ALLE Kategorie-Blogs */
.com-content-category-blog__items {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 3 Spalten */
    gap: 20px !important;
}

/* Sorgt dafür, dass die Bilder nicht aus der Box ausbrechen */
.com-content-category-blog__item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 4px;
}

/* Mobil-Ansicht: Auf Handys nur 1 Spalte */
@media (max-width: 768px) {
    .com-content-category-blog__items {
        grid-template-columns: 1fr !important;
    }
}

/* 1. Versteckt Autor und Details NUR in der Blog-Übersicht (Galerie-Kacheln) */
.com-content-category-blog .article-info,
.com-content-category-blog .info-block {
    display: none !important;
}

/* 2. Stellt sicher, dass die Info in der Einzelansicht (Beitrag) SICHTBAR bleibt */
.com-content-article .article-info,
.com-content-article .info-block {
    display: block !important;
}

/* 3. Speziell für deine Galerie-Seite (traum-grid), falls das Template dort anders reagiert */
.traum-grid .com-content-category-blog .article-info {
    display: none !important;
}

.com-content-category-blog__item .page-header h2 { display: none; }

/* Die Hintergrundfarbe der gesamten Website anpassen */
body.site {
    background-color: #D6EAFB;
    background: linear-gradient(to bottom, #EAF5FF, #D6EAFB);
}
  
/* HEADER Hintergrund für alle Geräte */
.site-header,
.container-header,
.container-header .grid-child {
    background: linear-gradient(to top, #E0F0FF, #6FA8E6) !important;
    /* Mobil: Höhe passt sich automatisch dem Inhalt/Logo an */
    min-height: 0; 
}

/* HEADER Nur auf größeren Bildschirmen (ab 992px) die feste Höhe erzwingen */
@media (min-width: 992px) {
    .site-header,
    .container-header,
    .container-header .grid-child {
        min-height: 200px;
    }
}

/* Header auf volle Breite ohne Seitenabstände */
.container-header {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Entfernt Abstände im inneren Raster des Headers */
.container-header .grid-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* Stellt sicher, dass das Logo-Link-Element keine Abstände hat */
.navbar-brand {
    margin-right: 0 !important;
    padding: 0 !important;
}

/* Topbar passend einfärben */
.container-topbar,
.topbar {
    background: linear-gradient(to top, #6FA8E6, #356FBD) !important;
}

/* Footer */
.site-footer,
.container-footer,
footer {
    background: linear-gradient(to bottom, #D2E9FB, #7FB6EE, #3F79C9) !important;
    color: #031343 !important;
}

/* Links im Footer */
.site-footer a,
.container-footer a,
footer a {
    color: #031343 !important;
}

/* Link Hover (optional, wirkt moderner) */
.site-footer a:hover,
.container-footer a:hover,
footer a:hover {
    color: #EEEDFD  !important;
}

/* Header Texte */
.container-header .navbar-brand,
.container-header .site-title,
.container-header .site-description,
.container-header a {
    color: #031343  !important;
}
.container-header .site-title {
    font-size: 28px;
    font-weight: 600;
    color: #ffffff !important;
}

.container-header .site-description {
    font-size: 14px;
    color: #134382  !important;
 }

.container-header .navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center; /* zentriert */
}

/* Menü Links */
.container-topbar a {
  color: #031343 !important;
  font-weight: 400 !important;
  font-size: 18px !important;
}

.container-topbar a:hover {
  color: #1E3A8A !important;
}

/* Topbar Container zentrieren */
.container-topbar {
  display: flex;
  justify-content: center;   /* GANZER Block wird zentriert */
}

/* Menü selbst */
.container-topbar .mod-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto;            /* wichtig! */
  padding: 16px;
  list-style: none;
}

/* ALLE Titel in Content-Bereichen */
.item-title,
.page-header h1,
.page-header h2,
.page-header h3 {
  font-size: 24px !important;
  color: #011552  !important;
  text-decoration: none !important;
  text-align: center !important;
}

/* Titel-Links */
.item-title a,
.page-header a {
  color: #031343 !important;
  text-decoration: none !important;
}

.item-title a:hover,
.page-header a:hover {
  color: #1E3A8A !important;
}

/* H1 Titeln in Content-Bereichen */
h1 {
  text-align: center !important;
  line-height: 1.2 !important;
  font-size: 20px !important;
  color: #031f6c !important;
  margin-bottom: 13px;
}

/* Trennlinien Content-Bereichen */
.page-header {
  border-bottom: 2px solid #ccc;
  padding-bottom: 12px;
  margin-bottom: 25px;
}

.page-header h1 {
  margin-bottom: 0;
}

.page-header {
  border-bottom: 1px solid #a1cbff;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

/* Modulen Aussicht */
.card,
.moduletable {
  background: #B3D7F7;
  padding: 8px;
  border: 2px solid #224faa;
  border-radius: 10px;
}

.moduletable h3,
.card h3 {
  font-size: 22px;
  color: #031343;
  border-bottom: 2px solid #E7F4FF;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

/* Pagination Button Aussicht */
.com-content-pagination,
.pagination__wrapper {
  display: block !important;
  text-align: center !important;
}
.pagination__wrapper .pagination {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
@media (max-width: 768px) {
  .com-content-pagination,
  .pagination__wrapper {
    text-align: center !important;
  }

  .com-content-pagination .counter {
    text-align: center !important;
    width: 100%;
  }
}

.pagination__wrapper .page-link {
  color: #E6F3FE;
  background: #629BDD;
  border: 1px solid #3f76df;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.pagination__wrapper .page-link:hover {
  background: #A6C8F0;;
  color: #2a2b68;;
  border-color: #3f76df;
}
.pagination__wrapper .active .page-link {
  background: #A6C8F0;
  color: #2a2b68;
  border-color: #3f76df;
}
.pagination__wrapper .disabled .page-link {
  opacity: 0.4;
  background: #D6ECFF;
  color: #8BB2E1;
}
@media (max-width: 480px) {
  .pagination__wrapper .page-link {
    padding: 5px 8px;
    font-size: 13px;
    min-width: 34px;
  }
}
.pagination__wrapper .page-link {
  min-width: 38px;
  text-align: center;
}
/* Alle Buttons vereinheitlichen */
.btn {
  background: #629BDD;
  color: #E6F3FE;
  font-size: 13px;
  padding:5px 5px;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn:hover {
  background: #A6C8F0;
  color: #2a2b68;
}

/* Abstand zu Komments und anderen Blöcken */
.item-page .com-content-article__body {
  margin-bottom: 60px;
  padding-bottom: 25px;
  border-bottom: 1px solid #528cd2;
}

/* Alle Eingabefelder vereinheitlichen */
input,
textarea,
select {
  background-color: #f7f7f7;
  color: #333;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}
input:focus,
textarea:focus,
select:focus {
  background-color: #fff;
  border-color: #333;
  outline: none;
}
.form-control {
  background-color: #d8ecff;
  border: 1px solid #98c4f4;
  border-radius: 6px;
}
#comments-form .grippie {
    height: auto !important;
    min-height: 28px !important;
    overflow: visible !important;

    background: transparent !important;
    background-image: none !important;

    border: none !important;
    padding: 6px 0 !important;
    margin-top: 6px !important;

    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#comments-form .grippie .counter {
    font-size: 12px;
    font-weight: 500;
    color: #031343;

    background: linear-gradient(to right, #eef5ff, #dbe9ff);
    padding: 5px 12px;
    border-radius: 10px;
    border: 1px solid #a1c1fd;

    box-shadow: 0 2px 6px rgba(3, 19, 67, 0.08);
}

/* Alle Einträge von JoomGallery entfernen */
img[src*="joomgallery"] {
    display: none !important;
}

/* Trennlinien Startseite und Kategorien */
.blog .item,
.blog-item {
    margin-bottom: 50px;
    padding-bottom: 35px;
    position: relative;
}

.blog .item::after,
.blog-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(3, 19, 67, 0.2), transparent);
}

/* Bilder, Abstand, Rarmen */
.bilder-modul img {
    border-radius: 12px;
    padding: 6px;
    background: #d6e6ff;
    border: 1px solid #b8c9ff;
    box-shadow: 0 6px 18px rgba(3, 19, 67, 0.12);
    max-width: 100%;
    height: auto;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin-bottom: 15px;
}

.bilder-modul img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(3, 19, 67, 0.18);
}

.bilder-modul h3,
.bilder-modul .newsflash-title {
    font-size: 24px;
    font-weight: 600;
    color: #031343;
    text-align: center;
    margin-top: 10px;
    transition: color 0.25s ease;
}

.bilder-modul a {
    color: inherit;
    text-decoration: none;
}

.bilder-modul a:hover h3,
.bilder-modul a:hover {
    color: #1E3A8A;
}

/* Beiträge Aussehen */

.com-content-article {
    color: #031343;
}

.com-content-article h1,
.com-content-article h2,
.com-content-article h3 {
    color: #031343;
}

.com-content-article p {
    color: #031343;
}

.com-content-article a {
    color: #1E3A8A;
    font-weight: 500;
    text-decoration: none;
}

.com-content-article a:hover {
    color: #0B2A6F;
    text-decoration: underline;
}

.com-content-article h1 + p,
.com-content-article h1 + div {
    margin-top: 30px;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.0rem; }
h3 { font-size: 0.5rem; }

/* Vergrößert das Logo-Bild auf die volle verfügbare Breite */
.container-header .navbar-brand img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Entfernt Einschränkungen des umschließenden Containers */
.container-header .navbar-brand {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Grund-Stil des Buttons nach oben (bleibt unsichtbar, bis Joomla ihn einblendet) */
a.back-to-top-link {
    background-color: #3E78C3 !important;
    color: #E3F1FE !important;
    border: 3px solid #B3D7F7 !important; 
    border-radius: 8px !important;
    transition: all 0.3s ease-in-out;
    /* ENTFERNT: display: inline-flex !important; */
    /* ENTFERNT: opacity: 1 !important; */
}

/* Hover-Zustand (Hellere Variante) des Buttons nach oben */
a.back-to-top-link:hover, 
a.back-to-top-link:focus {
    background-color: #1E3A8A !important; 
    color: #FFFFFF !important;
    border-color: #A4CAF2 !important; 
    transform: scale(1.05);
}

/* Icon-Farbe sicherstellen des Buttons nach oben */
a.back-to-top-link::before,
a.back-to-top-link .icon-chevron-up::before {
    color: #000000; /* Hier deine gewünschte Farbe eintragen */
}

/* Bild Aussehen in Beiträgen die von Kategorie kommen */
/* Bild im Beitrag zentrieren und stylen */
.full-image {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  margin-bottom: 25px;
}

.full-image img {
    max-width: 30%;
    height: auto;
    border: 6px solid #84baff;
    padding: 6px;
    background-color: #e2f1fd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* Avp Audioplayer */
/* 1. Der Container (äußerer Rahmen) */
.avPlayerWrapper .avPlayerContainer .avPlayerBlock {
    background-color: #5690d4 !important; /* Sehr helles Grau - passt zu allem */
    border: 2px solid #4a8ad6 !important;
    border-radius: 10px !important;
    padding: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    max-width: 600px;
    margin: 20px auto !important; 
    display: block;
    transition: all 0.3s ease-in-out; /* Stellt sicher, dass Hover funktioniert */
}

/* 2. Hover-Effekt für den Container */
.avPlayerWrapper .avPlayerContainer .avPlayerBlock:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    border-color: #5396E3 !important; /* Dein Blau erscheint beim Drüberfahren */
}

/* 3. Das Audio-Element im Inneren */
.avPlayerWrapper .avPlayerContainer .avPlayerBlock audio {
    filter: none !important; /* Keine Farb-Experimente mehr */
    width: 100% !important;
    height: 45px !important;
    /* Wir machen den Browser-Hintergrund weiß, damit Schwarz/Blau darauf wirkt */
    background-color: #5690d4  !important; 
    border-radius: 5px;
}