html {
    background: url(/images/sterne01_hd.jpg) no-repeat fixed;
    background-size: cover;
  overflow-y: scroll !important; /* Eine stabile Scrollleiste */
    overflow-x: hidden !important; /* Kein horizontales Scrollen */
  background-color: #000 !important;
}

body {
  background: url(/images/sterne01_hd.jpg) no-repeat fixed;
    background-size: cover;
    color: #FFFFFF; /* Globale Schriftfarbe */
    max-width: 700px;
    margin: 0 auto; /* Zentriert den Inhalt */
  }

.header, .navbar {
    background: transparent !important; 
  }
h1, h2, h3, h4 {
    color: #FFFFFF; /* Farbe für Überschriften */
    /*max-width: 60vw !important; /* Passt sich dynamisch an die Bildschirmgröße an */
          }
h2.item-title, h2, .page-header h1, .h2 {
    font-size: 28px !important;
    max-width: 700px !important;
    white-space: normal !important; /* Erlaubt Umbrüche */
    word-wrap: break-word !important; /* Zwingt lange Wörter zum Umbruch */
    overflow-wrap: break-word !important; /* Bricht Wörter automatisch um */
}
.parent-container {
    display: flex;
    justify-content: center;
    width: 100%;
}
/* Schriftgröße auf Mobilgeräten verkleinern */
@media (max-width: 576px) {
    h2.item-title, .page-header h1 .h2 {
        font-size: 24px !important; /* Kleinere Schriftgröße für Mobilgeräte */
        white-space: normal !important; /* Ermöglicht Umbruch */
    }
}
a {
    color: #FFFFFF; /* Linkfarbe */
    text-decoration: none;
}

a:hover {
    color: #3C3C3C; 
}

.meta-info, .article-date, .article-author, figcaption.caption {
    color: #FFFFFF;
}

dd.createdby, time[datetime] {
    color: #818181;
}

h2.item-title a {
    text-decoration: none !important; 
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a:not([class]) {
    text-decoration: none !important;
}
body.buch-category-style .com-content-category-blog h1, 
body.buch-category-style .com-content-category-blog h2, 
body.buch-category-style .com-content-category-blog p {
    font-size: 18px !important; /* Gilt nur für die Kategorieseite */
}
body.buch-category-style .com-content-category-blog__item {
    margin-bottom: -50px !important; /* Weniger Abstand zwischen den Artikeln */
}
body.buch-category-style .com-content-category-blog__item .page-header {
    margin-bottom: -15px !important; /* Weniger Abstand zwischen Titel und Text */
  padding-bottom: 10px !important;
  margin-top: -5px !important; /* Weniger Abstand über dem Vorschautext */
}

.btn-primary {
    background-color: black !important;
    color: white !important;
  border-color: white !important;
}
.btn {
    background-color: black !important;
    color: white !important;
  border-color: white !important;
  float: right;
}
.input-group {
      display: flex;
    align-items: center;
    justify-content: center;
  }
.me-2 { visibility: hidden !important; }
.awesomplete ul {
    background-color: white; /* Hintergrundfarbe */
    color: black; /* Schriftfarbe */
  }
.awesomplete mark {
    background-color: #D3D3D3; /* Farbe der Markierung */
    color: black; /* Schriftfarbe */
  
}

.pagination .page-item .page-link {
    border-color: black !important;
}
@media (max-width: 576px) {
    .pagination__wrapper {
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        background: rgba(0, 0, 0, 0.8); /* Optionaler Hintergrund */
        padding: 5px;
        border-radius: 5px;
        z-index: 999;
    }
}
@media (max-width: 576px) {
    .page-info {
        position: fixed;
        bottom: 200px; /* Höher setzen, damit sie gut sichtbar bleibt */
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8); /* Optionaler Hintergrund für bessere Sichtbarkeit */
        padding: 5px;
        border-radius: 5px;
        z-index: 1000;
        color: white; /* Falls die Schriftfarbe angepasst werden muss */
        font-size: 14px; /* Falls es zu groß dargestellt wird */
    }
}
.back-to-top-link {
    background-color: black !important;
    color: white !important;
    border-color: white !important;
    border-radius: 5px;
    padding: 10px;
    /*position: fixed;*/
    bottom: 20px;
    right: 30px;
    transition: opacity 0.3s ease-in-out; /* Sanfte Einblendung */
}

.page-link {
    background-color: black !important;
    color: white !important;
    border: 1px solid white !important;
}

.items-more {
    display: none;
}


/* @media (max-width: 991px) {
    .grid-child.container-nav {
        position: relative;
        margin-top: -10px;
        padding-top: 0;
        border-bottom: none; /* Blendet die Linie auf kleinen Bildschirmen aus */
    }
}

/*@media (min-width: 992px) {
    .container-header nav,
    .grid-child.container-nav,
    .navbar,
    .navbar-expand-md {
        position: relative !important;
        margin-top: -20px !important;
        padding-top: 0px !important;
        transform: translateY(-20px) !important;
    }
}

    /*.grid-child.container-nav::after {
        content: "";
        display: block;
        width: 79%;
        height: 1px;
        background-color: black;
        position: absolute;
        bottom: 18px;
        left: 2.6%; /* Korrigierte Formatierung */
        /*right: 17.5%; /* Korrigierte Formatierung */
    }
}

.px-3 {
    padding-left: 0.1rem !important;
  padding-right: 0.1rem !important; /* Gleiches Padding für rechts */
}

/*.breadcrumb-item.active {
    color: white !important;
}

/*.breadcrumb {
    display: flex;
    gap: 10px;
}*/

/* Seiteninhalt weiter unterhalb des Menüs */
.site-grid .grid-child.container-component {
    margin-top: -20px !important;
  min-width: 340px !important;
    }

.mod-list li.active > a {
    border-bottom: 2px solid white !important;
}

.article-info.text-muted span::before, 
.article-info.text-muted span::after {
    display: none !important;
}

.createdby {
    visibility: hidden !important;
}

.createdby span {
    visibility: visible !important;
    text-align: left !important;
    display: block !important;
}

.published time {
    text-align: left !important;
    display: block !important;
}

.published {
    margin-top: -24px !important;
  }

.createdby {
    margin-bottom: -24px !important;
}

.published, .createdby {
    position: relative;
    top: -32px;
}

.article, .blog-item, .post {
  /*transform: translateY(0px); /* Verschiebt jeden Beitrag leicht nach oben */
    margin-bottom: 10px !important; /* Abstand unter Beiträgen */
   padding-bottom: 10px !important; /* Abstand unter Beiträge */
  padding: 10px !important;
  
    /*margin: 10px 0 !important; /* Entfernt den äußeren Abstand */
  /*box-sizing: border-box !important; /* Stellt sicher, dass das Padding korrekt berechnet wird */
  }
/*.flex-container {
    display: flex;
    gap: 10px; /* Abstand zwischen Spalten */
}
figure.left.item-image {
    margin-bottom: 0px !important; /*Abstand zwischen Vorschaubildtext und Überschrift*/
}
.article .intro-text {
    margin-top: 0px !important;/* für abstand zwischen einleitungstext und überschrift */
    padding-top: -10px !important;
    display: block !important; /* Falls `display: flex` oder `inline` aktiv ist */
}
/*.item-image {
    order: 2; /* Stellt das Bild nach dem Titel */
}
/*.item-title {
    order: 1; /* Stellt den Titel ganz nach oben */
}
/*.item-intro {
    order: 1; /* Stellt den Einleitungstext direkt unter den Titel */
}
.article {
    display: block;
    flex-direction: column-reverse; /* Tauscht Bild und Titel */
}
/*.mod-menu {
    display: flex;
    justify-content: center;
    gap: 4px; /* Einheitlicher Abstand */
      /*justify-content: center; /* Zentriert die Menüpunkte */
    /*align-items: center;
  overflow: visible !important; /* Stellt sicher, dass das Menü sich nicht selbst scrollbar macht */
}
.mod-menu li {
  width: auto; /* Verhindert erzwungene 100%-Breite */
    display: flex;
        gap: 4px; /* Einheitlicher Abstand */
  margin-right: 4px; /* Abstand zwischen den Menüpunkten */
        justify-content: center; /* Zentriert die Menüpunkte */
    align-items: center;
  overflow: visible !important; /* Stellt sicher, dass das Menü sich nicht selbst scrollbar macht */
    }
@media (max-width: 576px) {
    .back-to-top-link {
        bottom: 90px; /* Höher setzen */
      /*.page-info {
        /*bottom: 200px !important; /* Noch höher als der Button setzen */
    }
}

/* === Grundlegende Einstellungen für das Logo & die Grafiken === */

/* === Hauptlogo (Schriftzug in der Mitte) === */
.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Linke & rechte Grafik an die Seiten */
    width: auto;
    position: relative;
  min-width: 340px !important;
}

.logo-container {
  position: relative; /* Damit sich das Logo nicht verschiebt */
    display: flex;
  flex-grow: 1; /* Sorgt dafür, dass das Logo den verfügbaren Platz nutzt */
            justify-content: center; /* Verteilt die Elemente gleichmäßig */
    align-items: center;
    width: 100%;
    gap: 0px; /* Abstand zwischen Logo & Extra-Grafiken */
}
.logo-container img {
  align-items: center;
       width: 85%; /* Skalierung auf kleinere Größe */
  padding-left: 10px;
    }

/* Linke Extra-Grafik */
.grafik-links {
    position: relative;
    left: 10px;
    width: 45px;
}

/* Rechte Extra-Grafik */
.extra-grafik {
    position: absolute;
    right: 10px;
    width: 40px;
    height: auto;
  top: 15px; /* Bewegt die Grafik */
}

 /*Menüpunkt "impressum" auf Desktop ausblenden */
 /*@media (min-width: 701px) {*/
    li.nav-item.item-115 {
        display: none !important; /* Menüpunkt vollständig ausblenden */
    }
}

@media (min-width: 992px) {
    .nav-item.item-115 {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    li.nav-item.item-115 {
        display: flex !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important; /* Menüpunkt wird außerhalb des sichtbaren Bereichs verschoben */
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Beide Extra-Grafiken auf Mobilgeräten ausblenden */
@media (max-width: 576px) {
    .grafik-links {
      position: absolute !important;
        left: 3px; /* Abstand vom linken Rand */
        max-width: 35px !important; /* Verkleinert die linke Grafik */
        height: auto !important;
    }

    .extra-grafik {
      position: absolute !important;
        right: 10px; /* Abstand vom rechten Rand */
        top: 0px !important; /* Verschiebt die rechte Grafik nach oben */
      max-width: 30px !important; /* Verkleinert die rechte Grafik */
        height: auto !important;
    }

    .grafik-links, .extra-grafik {
      position: relative !important;
        display: block !important; /* Stellt sicher, dass sie sichtbar bleiben */
        visibility: visible !important;
        opacity: 1 !important; /* Macht sie tatsächlich sichtbar */
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Hauptlogo auf Mobilgeräten verkleinern */
@media (max-width: 576px) {
  .logo-container {
    position: relative;
            display: flex;
    flex-wrap: nowrap; /* Verhindert Überlappen */
        justify-content: center;
        align-items: center;
        width: 100%; /* Sicherstellen, dass der Container die gesamte Breite nutzt */
        /*text-align: center; /* Falls zusätzliche Textinhalte enthalten sind */
    }
    .logo-container img {
              width: 90%; /* Skalierung auf kleinere Größe */
      padding-left: 20px; /* Abstand zum linken Element */
    }
}

/* Einstellungen für das Navbar-Menü */
.navbar {
    display: flex !important; /* Stellt sicher, dass das Menü sichtbar ist */
    justify-content: center;
    align-items: center;
  min-width: 340px !important;
}

.navbar ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0px; /* Abstand zwischen den Menüpunkten */
}

.navbar ul li a {
    text-decoration: none;
    font-weight: normal;
    color: #333;
}
.grid-child {
    display: flex;
    flex-direction: column; /* Elemente untereinander statt nebeneinander */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Standard-Navigation (Desktop) */
.navbar-collapse ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1px; /* Weniger Abstand für Desktop */
}

/* Hamburger-Menü (Mobile) */
@media (max-width: 576px) {
  .navbar-toggler {
    display: none !important;
    margin-bottom: 15px; /* Erhöht den Abstand zwischen Hamburger-Icon und Menü */
}
  .navbar-collapse {
    overflow: hidden; /* Verhindert das Zusammenziehen der Margins */
    display: block !important; /* Menü bleibt offen */
    max-height: 300px; /* Sicherstellen, dass es die volle Höhe hat */
    overflow: hidden;
}
  .navbar-collapse.hidden {
    max-height: 0;
    overflow: hidden;
}
    .navbar-collapse ul {
      display: flex;
        flex-wrap: wrap; /* Falls das Menü zweizeilig ist */
        row-gap: 0px; /* Abstand zwischen den Zeilen reduzieren */
        column-gap: 30px; /* Abstand zwischen den Menüeinträgen */
      /*line-height: 0.6; /* Reduziert den Abstand zwischen den Zeilen */
       /* gap: 10px; /* Größerer Abstand für das mobile Menü */
      margin-top: 20px; /* Erhöht den Abstand zum Hamburger-Menü */
          }
  .navbar-collapse ul li img {
    vertical-align: middle; /* Stellt sicher, dass die Grafiken sich an die Zeilenhöhe anpassen */
    max-height: 1.5em; /* Passt die Höhe an die Schriftgröße an */
    margin-top: -5px; /* Hebt die Grafiken leicht an */
        }
}
/* Für sehr kleine Bildschirme bis 686px */
@media (max-width: 340px) {
    body {
        max-width: 100%; /* Volle Breite für bessere Darstellung */
      margin: 0 auto; /* Zentriert den Inhalt */
    }
}

/* Für mittlere Bildschirme zwischen 687px und 991px */
@media (min-width: 576px) and (max-width: 991px) {
    body {
        max-width: 700px; /* Deine gewünschte Begrenzung */
      margin: 0 auto; /* Zentriert den Inhalt */}
      .mod-menu li {
  /*width: auto; /* Verhindert erzwungene 100%-Breite */
    display: flex;
          margin-right: 20px; /* Abstand zwischen den Menüpunkten */
        justify-content: center; /* Zentriert die Menüpunkte */
    align-items: center;}
        .logo-container img {
              width: 85%;
          padding-left: 30px;
              }
    .grafik-links {
      position: absolute !important;
        left: 20px; /* Abstand vom linken Rand */
        max-width: 35px !important; /* Verkleinert die linke Grafik */
        height: auto !important;
    }

    .extra-grafik {
      position: absolute !important;
        right: 50px; /* Abstand vom rechten Rand */
        top: 0px !important; /* Verschiebt die rechte Grafik nach oben */
      max-width: 30px !important; /* Verkleinert die rechte Grafik */
        height: auto !important;
    }

    .grafik-links, .extra-grafik {
      position: relative !important;
        display: block !important; /* Stellt sicher, dass sie sichtbar bleiben */
        visibility: visible !important;
        opacity: 1 !important; /* Macht sie tatsächlich sichtbar */
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
  .navbar-collapse {
    overflow: hidden; /* Verhindert das Zusammenziehen der Margins */
    display: block !important; /* Menü bleibt offen */
    max-height: 300px; /* Sicherstellen, dass es die volle Höhe hat */
    overflow: hidden;
}
 .blog-items.masonry-2 {
    column-count: 2;
    column-gap: 2rem;
  }

  .blog-item {
    break-inside: avoid;
    margin-bottom: 2rem;
  }
  }
  

/* Für große Bildschirme ab 992px */
@media (min-width: 992px) {
    body {
        max-width: 700px; /* Deine gewünschte Begrenzung */
    }
}
.navbar-toggler {
    display: none !important;
}