:root {
  --cassiopeia-color-primary: #ffffff;
  --cassiopeia-color-link: #ffffff;
   --cassiopeia-color-hover: #ffffff;
  --body-bg: #ffffff;
}

/* Entfernt die Unterstreichung von Links */
a {
    text-decoration: none !important;
	color: #808080 !important; /* Farbe für Links beim Hover */
}

/* Fügt die Unterstreichung nur beim Hover hinzu */
a:hover {
    text-decoration: underline !important;
	color: #505050 !important; /* Farbe für Links beim Hover */
}

.container-below-top * {
    color: #808080 !important; /* Setze die Textfarbe auf grau */
}
.container-below-top *:hover {
    color: #505050 !important; /* Setze die Textfarbe beim Hover-Effekt auf ein dunkleres Grau */
}

body {
    background: 
    linear-gradient(to top, rgba(255, 255, 255, 0), #ffffff 75%), 
    url(/images/hintergrund.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
/* .footer { 
    background-color: #aaa;

/* Startseite ohne Template-Hintergrund */
body.itemid-101 {  /* 101 ist die Menü-ID des Beitrags */
    background-color: white !important;
    background-image: none !important;
}

/* xxxxxxxxxxx KONTAKTSEITE ANPASSEN xxxxxxxxxxx */

/* Ändert die com-contact__container Klasse */
.com-contact__container {
    display: block; /* Flexbox-Layout deaktivieren */
    padding: 20px; /* Beispiel: Innenabstand hinzufügen */
}

/* Verkleinert das Bild in der com-contact__thumbnail Klasse */
    .com-contact__thumbnail {
    margin-bottom: 20px; /* Abstand zwischen Bild und Text */
}

.com-contact__thumbnail img {
    margin-top: 20px; /* Abstand zwischen Oben und Bild */
    width: 100%; /* Passt die Bildbreite an die Containerbreite an */
    max-width: 100%; /* Begrenzung der maximalen Bildbreite */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    display: block; /* Bild als Blockelement anzeigen */
    margin-left: 0; /* Bild linksbündig ausrichten */
}

/* Stil für die Kontaktinformationen */
.com-contact__info {
    margin-top: 20px; /* Abstand zwischen Oben und Bild */
    margin-bottom: 50px; /* Abstand zwischen Bild und unten*/
}

/* Bilder nebeneinander setzen */
.responsive-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.responsive-container img,
.responsive-container iframe {
  max-width: 30%;
  height: auto;
  flex: 1 1 30%;
  box-sizing: border-box;
  margin: 5px;
}

.btn-primary {
    --btn-color: #808080;
    --btn-hover-color: #505050;
}

footer.container-footer {
    display: flex; /* Stellt sicher, dass die Elemente horizontal ausgerichtet sind */
    justify-content: space-between; /* Abstand zwischen den Blöcken */
    align-items: center; /* Vertikale Zentrierung */
    flex-wrap: wrap; /* Ermöglicht Zeilenumbruch bei kleineren Bildschirmen */
    padding: 0px 20px; /* Optional: Abstand innerhalb des Footers */
	color: #808080; /* Setzt die Schriftfarbe auf Grau */
}

footer .grid-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Zeilenumbruch bei Bedarf */
    width: 100%;
}

footer ul.mod-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px; /* Abstand zwischen den Links */
}

footer ul.mod-menu li {
    margin: 0;
}

footer ul.mod-menu a {
    text-decoration: none;
    color: inherit;
}

footer #mod-custom111 {
    margin: 0;
    padding: 0;
}

footer #mod-custom111 p {
    margin: 0; /* Entfernt unnötige Abstände */
    line-height: 1.5; /* Setzt die Zeilenhöhe */
}