/* Globale Einstellungen & Body */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Poppins-Regular.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/rubik-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

}

body {
    font-family: Poppins;
    font-size: 120%;
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border in der Elementbreite enthalten sind */
    min-height: 100vh; /* Mindesthöhe des Viewports für Sticky Footer */
    text-align: center;
}
        @media (max-width: 768px) {
        
 body {
   
    font-size: 100%;
   
  
}       
        
        
h1, h2 { 
 font-size: 100%;
	}
}
/* Header & Navigation */
header {
    background-color: #4D769E;
    color: white;
    padding: 5px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: sticky; /* Macht den Header klebrig */
    top: 0; /* Bleibt 0px vom oberen Rand des Viewports entfernt */
    z-index: 1000; /* Stellt sicher, dass der Header über anderen Inhalten liegt */
    max-height: 50px;
}

nav {
    max-width: 1200px; /* Maximale Breite der Navigation */
    margin: 0 auto; /* Zentriert die Navigation */
    padding: 0 20px; /* Innenabstand links/rechts */
}

.main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Ordnet die Menüpunkte horizontal an */
    justify-content: space-around; /* Verteilt die Menüpunkte gleichmäßig */
    align-items: center;
}

.main-nav > li {
    position: relative; /* Wichtig für die Positionierung der Dropdown-Menüs */
}

.main-nav > li::before {
  content: '↴'; /* Beliebiger Inhalt, z.B. ein Unicode-Zeichen */
  color: white;
  position: absolute;
  left: 20px;
  top: 10px;
}


.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    white-space: nowrap; /* Verhindert Zeilenumbruch bei längeren Menüpunkten */
    transition: background-color 0.3s ease;
}

.main-nav a:hover {
    background-color: #496C8E;
}

.menu-toggle {
    display: none;
}


/* Dropdown-Menüs */
.dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #3C61BC;
    position: absolute;
    top: 100%; /* Platziert das Dropdown direkt unter dem Hauptmenüpunkt */
    left: 0;
    min-width: 160px; /* Mindestbreite der Dropdown-Menüs */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none; /* Standardmäßig ausgeblendet */
    z-index: 1000; /* Stellt sicher, dass das Dropdown über anderen Inhalten liegt */
}

.dropdown-menu li a {
    padding: 10px 20px;
    color: white;
}

.dropdown-menu li a:hover {
    background-color: #5397AD;
}

/* Dropdown beim Hover anzeigen */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Hauptinhaltsbereich */
.content-wrapper {
    flex-grow: 1; /* Lässt den Inhalt den verbleibenden Platz einnehmen (für Sticky Footer) */
    margin: 0px auto; /* Zentriert den Inhaltsbereich mit vertikalem Abstand */
    padding: 0 0px; /* Innenabstand links/rechts */
	}


.main-content {
   background-color: #fff;
    padding: 2px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow-x: hidden;
    width:100%;
}


.main-content .full-width-image-container {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -30px;
    margin-bottom: 30px;
    position: relative; /* Wichtig für die Positionierung des Overlays */
    z-index: 1;
    }

.main-content .full-width-image-container img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
}

/* Stil für den Text über dem Full-Width-Bild */
.image-overlay-text {
    position: absolute; /* Absolut positioniert innerhalb des Bild-Containers */
    top: 50%; /* Startpunkt in der Mitte des Containers */
    left: 50%; /* Startpunkt in der Mitte des Containers */
    transform: translate(-50%, -50%); /* Zentriert den Text perfekt */
    color: white; /* Helle Schriftfarbe für Kontrast zum Bild */
    text-align: center; /* Text zentrieren */
    width: 90%; /* Nimmt fast die gesamte Breite des Bildes ein */
    max-width: 800px; /* Optional: Maximale Breite für bessere Lesbarkeit auf sehr großen Bildschirmen */
    padding: 20px;
    box-sizing: border-box; /* Padding in die Breite einbeziehen */
    z-index: 2; /* Liegt über dem Bild (z-index: 1) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Leichter Schatten für bessere Lesbarkeit */
}

.image-overlay-text h2 {
    font-size: 3em; /* Große Schriftgröße für die Hauptüberschrift */
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.image-overlay-text p {
    font-size: 1.2em; /* Etwas kleinere Schriftgröße für den Untertitel */
    margin: 0;
}

.page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
    padding: 20px; /* Optional: Etwas Abstand zum Bildschirmrand */
}

.flex-container	{
width: 80%;  min-height: 80vh; margin: 120px 15% 10px 15%; float:none; clear:both; text-align: center;	}

.sole	{
background-color: #f0f0f0;
width: 25%;
height: 250px;
float:left;
padding: 20px;
margin: 20px;

}


.box100 {
width: 47%; height: 100px; float:left; margin:auto; text-align: left;
	font-family: 'Rubik', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1em;
	color: #000000;

}

.text {
    max-width: 750px;
    /* 'margin: auto' wird nicht mehr für die Zentrierung benötigt */
    
    padding: 20px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
}


.tebi {
    display: flex;
    flex-direction: column; /* Standard: Untereinander gestapelt */
    gap: 20px;
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.tebi-text-content {
    flex: 1;
    text-align: left; /* Standard: linksbündig */
    /* flex-basis und min-width sind hier nicht nötig */
}

.tebi-image-container {
    flex: 1;
    width: 100%;
    text-align: center;
}

.tebi-image-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px auto; /* Kein oberer Abstand */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tebi-image-caption {
    font-style: italic;
    font-size: 0.9em;
    color: #555;
}


/* === Desktop-Stile === */
/* Diese Stile werden nur aktiv, wenn der Bildschirm BREITER als 768px ist */

@media (min-width: 769px) {
    .tebi {
        flex-direction: row; /* Ändert auf nebeneinander */
        gap: 40px;
        padding: 20px;
    }

    .tebi-text-content {
        flex-basis: 60%;
        min-width: 300px;
    }

    .tebi-image-container {
        flex-basis: 35%;
        max-width: 500px; /* Maximale Breite für das Bild auf Desktop */
    }

    .tebi-image-container img {
        margin: 30px auto 10px auto; /* Oberer Abstand für Desktop */
    }
}
.image-container a:hover img {
    opacity: 0.8; /* Bild wird leicht transparent */
    transition: opacity 0.3s ease; /* Sanfter Übergang */
}
        /* Media Query für größere Bildschirme (ab 768px) */
        @media (min-width: 768px) {
            .text-image-section {
                flex-direction: row; /* Auf größeren Bildschirmen nebeneinander */
                text-align: left; /* Textausrichtung für bessere Lesbarkeit neben Bild */
                justify-content: space-between; /* Verteilt den Platz zwischen Text und Bild */
            }

            .text-content {
                order: 2; /* Stellt sicher, dass der Text zuerst kommt */
            }

            .image-container {
                order: 1; /* Stellt sicher, dass das Bild danach kommt */
            }
}





/* Footer */
footer {
    background-color: #E5E5E5;
    color: #4D4D4D;
    text-align: center;
    padding: 20px 0;
    margin-top: auto; /* Klebt den Footer an den unteren Rand, wenn der Inhalt kurz ist */
}

/* Responsive Anpassungen (Mobile First) */
@media (max-width: 1100px) {
.menu-toggle {
        display: block; /* Zeigt den Button */
        background: none;
        border: none;
        color: white;
        font-size: 30px;
        cursor: pointer;
        padding: 10px 0;
        float: right;
    }
    
    /* Haupt-Navigationsliste auf Mobilgeräten: Vertikal und standardmäßig versteckt */
    .main-nav {
        flex-direction: column; /* Vertikale Anordnung der Menüpunkte */
        width: 100%;
        position: absolute;
        top: 50px; /* Platz unter dem Burger-Icon/Nav-Container-Rand lassen */
        left: 0;
        background-color: #4D769E;
        z-index: 1000;
        
        /* Verstecken mit max-height für sanften Übergang */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    /* Zustand: Menü ist aktiv und wird eingeblendet (durch JavaScript gesetzt) */
    .main-nav.active {
        max-height: 500px; /* Ausreichende Höhe zum Anzeigen des Inhalts */
        border-top: 1px solid #444;
    }

    /* Mobile Menüpunkte stylen */
   .dropdown {
    width: 100%; /* Volle Breite */
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: center; /* Zentriert horizontal */
    align-items: center;   /* Zentriert vertikal */
    height: 40px; /* <-- Beispielhöhe, passen Sie dies an */
}

    .dropdown a {
        text-align: center;
            align-items: center;   /* Zentriert vertikal */
            margin-top:26px;
    }
    
    /* Entfernt den Float-Effekt des Toggle-Buttons, falls er gesetzt ist, um Platz zu sparen */
    .main-nav-container::after {
        content: "";
        display: table;
        clear: both;
    }
    
        .main-content .full-width-image-container {
        margin-left: calc(50% - 50vw); /* Behält die Full-Width-Logik bei */
        margin-right: calc(50% - 50vw);
        margin-top: 0px; /* Anpassung an mobiles Padding */
        margin-bottom: 20px;
    }
    .image-overlay-text {
        padding: 15px;
        width: 95%; /* Etwas mehr Breite auf kleinen Bildschirmen */
    }

    .image-overlay-text h2 {
        font-size: 2em; /* Kleinere Schriftgröße auf mobilen Geräten */
    }

    .image-overlay-text p {
        font-size: 1em;
    }
    
    .box100 {
width: 90%; min-height: 150px; float:none; margin:auto 10px auto 10px; text-align: left;
	}
    
    
}

.two-column-section {
    padding: 40px 20px; /* Innenabstand oben/unten und seitlich */
    max-width: 1200px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentriert den Abschnitt auf der Seite */
    text-align: center; /* Zentriert den Titel */
}

.section-title {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 40px;
}

/* Flexbox für die Spalten */
.column-container {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht das Umbrechen in mehrere Zeilen */
    gap: 30px; /* Abstand zwischen den "feature-item" Elementen */
    justify-content: center; /* Zentriert die Items horizontal */
}

/* Styling für jedes einzelne Feature-Item */
.feature-item {
    display: flex; /* Aktiviert Flexbox innerhalb jedes Items */
    align-items: flex-start; /* Icons oben ausrichten */
    flex-direction: column; /* Standard: Icon über Text (für kleine Bildschirme) */
    text-align: center; /* Text zentriert, wenn Icons oben */
    flex: 1 1 calc(100% - 20px); /* Nimmt volle Breite auf kleinen Bildschirmen */
    max-width: 550px; /* Maximale Breite pro Item */
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.feature-icon {
    width: 50px; /* Feste Breite des Icons */
    height: 50px; /* Feste Höhe des Icons */
    margin-bottom: 15px; /* Abstand unter dem Icon */
    display: block; /* Zentrierung erleichtern */
    margin-left: auto;
    margin-right: auto;
}

.feature-content h3 {
    font-size: 1.4em;
    color: #444;
    margin-bottom: 10px;
}

.feature-content p {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
}

/* Media Queries für Responsivität */

/* Tablet-Ansicht: 2 Spalten */
@media (min-width: 768px) {
    .column-container {
        justify-content: space-between; /* Verteilt Elemente gleichmäßig */
    }

    .feature-item {
        flex: 1 1 calc(50% - 30px); /* 2 Spalten mit Abstand */
        flex-direction: row; /* Icon und Text nebeneinander */
        text-align: left; /* Text linksbündig */
        align-items: center; /* Icons und Text vertikal zentriert */
    }

    .feature-icon {
        margin-bottom: 0; /* Entfernt unteren Abstand */
        margin-right: 20px; /* Abstand rechts vom Icon */
        margin-left: 0; /* Linksbündig für Icon */
    }

    .feature-content h3 {
        margin-top: 0; /* Korrigiert oberen Rand für h3 */
    }
}

/* Desktop-Ansicht (Optional, falls du mehr als 2 Spalten möchtest, oder feinere Abstimmung) */
@media (min-width: 1024px) {
    .feature-item {
        /* Bleibt bei 2 Spalten, aber passt sich evtl. besser an breitere Container an */
        /* Oder hier könnte man auch 3 Spalten machen: flex: 1 1 calc(33.333% - 20px); */
    }
}

/* Kleine Mobilgeräte: Feinabstimmung */
@media (max-width: 480px) {
    .two-column-section {
        padding: 30px 15px;
    }

    .section-title {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    .feature-item {
        padding: 20px;
    }

    .feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .feature-content h3 {
        font-size: 1.2em;
    }

    .feature-content p {
        font-size: 0.9em;
    }
}




.footer-heading {
            margin-bottom: 15px;
            color: #333;
            font-size: 1.2em;
        }

        /* Flexbox für die Logos */
        .logo-container {
            display: flex;
            flex-wrap: wrap; /* Ermöglicht das Umbrechen der Logos auf kleinere Bildschirme */
            justify-content: center; /* Zentriert die Logos horizontal */
            align-items: center; /* Zentriert die Logos vertikal */
            gap: 20px; /* Abstand zwischen den Logos */
            margin-bottom: 20px;
        }

        .logo-container img {
            max-width: 240px; /* Maximale Breite der Logos */
            height: auto; /* Höhe automatisch anpassen */
            display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
            
        }

        /* Styling für den "Weitere Unterstützer" Link */
        .more-supporters-link {
            display: inline-block;
            margin-top: 10px;
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }

        .more-supporters-link:hover {
            text-decoration: underline;
        }

        /* Media Queries für Responsivität (Beispiele) */
        @media (max-width: 768px) {
            .logo-container img {
                max-width: 100px; /* Kleinere Logos auf Tablets */
            }
        }

        @media (max-width: 480px) {
            .footer-heading {
                font-size: 1em; /* Kleinere Überschrift auf Mobilgeräten */
            }
            .logo-container {
                gap: 15px; /* Kleinerer Abstand auf Mobilgeräten */
            }
            .logo-container img {
                max-width: 80px; /* Noch kleinere Logos auf Mobilgeräten */
            }
        }
a {
color: #518F51;
 font-weight: bold;
}

p {
margin: 1em auto 2em auto;
font-size: 120%;
max-width: 100%;
}

ul {
    display: block;
    list-style-type: none;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

ul {
  list-style: none;
  padding-left: 0;
  font-size: 120%;
}

li {
font-family: Rubik;
  padding-left: 1.5em; /* Schafft Platz für den benutzerdefinierten Marker */
  padding-bottom: 1.5em; /* Schafft Platz für den benutzerdefinierten Marker */
  position: relative;
}

.tebi-text-conten >>li::before {
  content: '✓'; /* Beliebiger Inhalt, z.B. ein Unicode-Zeichen */
  color: green;
  position: absolute;
  left: 0;
  top: 0;
}

h1, h2 {
font-family: Rubik;
    display: block;
    font-size: 3em;
    margin-block-start: 2.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 15%;
    margin-inline-end: 15%;
    font-weight: bold;
    unicode-bidi: isolate;
    max-width: 80%;
}
h2 {
font-size: 2em;
    margin-block-start: 1.67em;
    margin-block-end: 1em;
    }
 @media (max-width: 768px) {
h1, h2 { 
margin:15% 20px 15% 20px; text-align: center;font-size: 1.8em;
	}
	p {
margin: 1em auto 2em auto;
font-size: 100%;
max-width: 80%;
}
}