:root {
    --color-silver: #C0C0C0;
    --color-grey: #808080;
    --color-red: #c30431;
    --font-primary: Arial, sans-serif;
}
body {
    font-family: var(--font-primary);
    color: #3f3b3b;
    background-color: #f0efe7;
    margin: 0;
    padding: 0;
}

.header {
    background-color: var(--color-grey);
    color: white;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.main-navigation ul li a {
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s;
}
.nav-links li a:hover {
    background-color: rgba(195, 4, 49, 0.7);
}
.ribbon-container {
    background-color: var(--color-grey);
    text-align: center;
}

.ribbon ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.ribbon ul li {
    margin: 10px;
}

.ribbon ul li a {
    display: block;
    background-color: var(--color-red);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.ribbon ul li a:hover {
    background-color: rgba(195, 4, 49, 0.5);
}

.hamburger-menu {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    margin-bottom: 5px;
    background-color: #333;
}

.hamburger-menu {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 20px;
    color: #c30431;
    z-index: 2;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: white;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-grey);
    right: 0;
    top: 60px;
    width: 200px;
    border: 1px solid #ccc;
    z-index: 1;
}

/* Stil für Links innerhalb von .dropdown-content */
.dropdown-content a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
}

/* Hover-Effekt für Links */
.dropdown-content a:hover {
    background-color: #666; /* Alternativ zum 'darken' Effekt */
}

/* Anzeigen des Dropdown-Menüs, wenn es aktiv ist */
.dropdown-content.active {
    display: block;
}

/* Versteckt das mobile Hamburger-Menü auf größeren Bildschirmen */
.hamburger-menu-mobile {
    display: none;
    margin-top: 15px;
}
.hamburger-menu-mobile span {
    display: block;
    width: 25px;
    height: 3px;
    margin-bottom: 5px;
    margin-top: 5px;
    background-color: white;
}

.dropdown-content-mobile {
    display: none;
    position: absolute;
    background-color: var(--color-grey);
    right: 0;
    top: 60px;
    width: 100px;
    border: 1px solid #ccc;
    z-index: 1;
}
/* Stil für Links innerhalb von .dropdown-content */
.dropdown-content-mobile a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
}

.site-footer {
    background-color: var(--color-grey);
    color: white;
    padding: 1rem 0;
    font-size: 0.875rem;
}

.footer-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-nav {
    display: flex;
    justify-content: center;  /* Zentriert die Navigation */
    width: 100%;              /* Gibt der Navigation volle Breite */
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;  /* Zentriert die Links innerhalb der Navigation */
    width: 100%;              /* Ermöglicht eine gleichmäßige Verteilung der Links */
}

.footer-nav ul li {
    margin: 0 20px;           /* Erhöht den Abstand zwischen den Links */
}

.footer-nav ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: var(--color-red);
}

@media (max-width: 768px) {
    /* Anpassung für das Dropdown-Menü, um zusätzliche Links anzuzeigen */
    .dropdown-content {
        width: 100%; /* Optional: Breite des Dropdown-Menüs auf kleine Bildschirme anpassen */
        top: 50px; /* Justierung basierend auf der Höhe Ihrer Navigation */
    }
    
    /* Stellen Sie sicher, dass .hamburger-menu sichtbar ist */
    .hamburger-menu {
        display: block;
        position: absolute;
        top: 20px; /* Passen Sie dies entsprechend der Struktur Ihres Headers an */
        right: 20px;
        z-index: 100; /* Stellt sicher, dass das Menü über anderen Elementen liegt */
    }
    .hamburger-menu-mobile {
        display: block; /* Zeigt das mobile Hamburger-Menü auf kleinen Bildschirmen */
        position: absolute;
        top: 20px; /* Passen Sie dies entsprechend der Struktur Ihres Headers an */
        right: 20px;
        z-index: 100; /* Stellt sicher, dass das Menü über anderen Elementen liegt */
    }
    
    .dropdown-content-mobile {
        display: none;
        position: fixed; /* 'fixed' für eine feststehende Position auf dem Bildschirm */
        background-color: var(--color-grey);
        right: 0; /* Positioniert das Dropdown-Menü rechtsbündig */
        top: 60px; /* Abstand vom oberen Rand */
        width: auto; /* oder eine spezifische Breite, z.B. 250px, für die gewünschte Breite des Dropdowns */
        min-width: 100px; /* Mindestbreite des Dropdown-Menüs */
        border: 1px solid #ccc;
        z-index: 1;
    }
    /* Anzeigen des Dropdown-Menüs für mobile Geräte, wenn es aktiv ist */
    .dropdown-content-mobile.active {
        display: block;
    }

.header, .footer-container, .content-h, .umrandeter-kasten, .umrandeter-kasten-head {
    flex-direction: column;
    padding: 0 10px;
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border innerhalb der Breite des Elements enthalten sind */
}

.nav-links, .footer-nav ul {
    flex-direction: column;
    align-items: center;
}

.nav-links li a, .footer-nav ul li {
    margin-bottom: 10px;
}

.text-bereich-mid h3 {
    text-align: center;
}
.umrandeter-kasten h3 {
    text-align: center;
}
.bildplatzhalter, .bildBC, .imgbchead {
    width: 100%; /* Bildbreite auf 100% setzen */
    margin: 20px 0; /* Mehr Abstand oben und unten */
}
.imgpartner {
    width: 100%; /* Das Bild nimmt maximal 90% der Bildschirmbreite ein */
    max-width: 100%; /* Stellt sicher, dass das Bild nicht breiter als 90% wird */
    height: auto; /* Passt die Höhe automatisch an, um das Seitenverhältnis zu bewahren */
    margin: 0 auto; /* Zentriert das Bild horizontal */
    display: block; /* Stellt das Bild als Block-Element dar, um 'margin: auto' wirksam zu machen */
   
}

.text-bereich, .text-bereich-head {
    width: 100%; /* Textbereichbreite auf 100% setzen */
    padding: 10px 0; /* Anpassung des Paddings */
}

.text-bereich-mid {
    width: 80%; /* Textbereichbreite auf 100% setzen */
    padding-left: 5%; /* Anpassung des Paddings */
}

.hamburger-menu {
    display: block;
}

nav ul {
    display: flex;
    flex-direction: column;
}

/* Sorgt dafür, dass das Hamburger-Menü und die Dropdown-Links auf kleinen Bildschirmen sichtbar sind */
.dropdown-content {
    display: none; /* Standardmäßig versteckt, wird durch JavaScript umgeschaltet */
    position: fixed; /* Ändert von 'absolute' zu 'fixed', um Vollbild auf mobilen Geräten zu ermöglichen */
    top: 60px; /* Abstand vom oberen Rand, justieren nach Bedarf */
    left: 0;
    width: 100%; /* Vollbildbreite */
    box-sizing: border-box; /* Berücksichtigt Padding im Element's Breite */
    padding: 10px;
    border-top: 1px solid #ccc; /* Fügt eine obere Grenze hinzu, um es vom Header zu trennen */
}
.dropdown-content a {
    color: white; /* Farbanpassungen falls notwendig */
    padding: 10px;
    display: block; /* Stellt sicher, dass Links blockweise angeordnet sind */
}
.header, .ribbon-container, .ribbon {
    width: 100%; /* Sorgt dafür, dass der Header die gesamte Breite ausnutzt */
}
.ribbon-container {
     display: none;
}
h1 {
    max-width: calc(100% - 50px); /* 50px entspricht der Breite des Hamburger-Icons plus etwas Abstand */
    margin-right: auto; /* Zentriert den h1-Text, wenn weniger Platz ist */
    padding-right: 50px; /* Verhindert, dass der Text das Hamburger-Icon überlappt */
}
  /* Anpassungen für Checkboxen */
.checkbox-group {
flex-direction: column;
align-items: flex-start;
}

.checkbox-group div {
margin-right: 0; /* Entfernt den rechten Rand, da dies auf kleineren Bildschirmen nicht notwendig ist */
margin-bottom: 2px; /* Fügt einen unteren Rand hinzu, um Platz zwischen den Checkboxen zu schaffen */
}
}
@media (max-width: 768px) {
.footer-content {
    flex-direction: column;
    align-items: center;
}

.footer-nav ul {
    flex-direction: column;
}

.footer-nav ul li {
    margin-bottom: 10px;  /* Erhöht den Abstand zwischen den Links, wenn sie untereinander stehen */
}

.footer-nav ul li:last-child {
    margin-bottom: 0;    /* Entfernt den Abstand unter dem letzten Link */
}
}