@charset "utf-8";

/* Einbinden der Schriftart */
@font-face {
    font-family: 'HoboStdMedium';
    src: url('file:///C|/Users/admin/AppData/Local/Temp/fz3temp-4/HoboStdMedium.woff2') format('woff2'),
url('file:///C|/Users/admin/AppData/Local/Temp/fz3temp-4/HoboStdMedium.woff') format('woff'),
url('file:///C|/Users/admin/AppData/Local/Temp/fz3temp-4/HoboStdMedium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Allgemeine Stile */
html, 
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'HoboStdMedium', sans-serif;
    background: #363636;
			background: #ffffff;
    color: #9b8a70;
}

/* Header */
header {
    padding: 32px;
    text-align: center;
}

/* Laufschrift */
.style-laufschrift {
    font-size: 20px;
	margin-bottom: 20px;
}

/* Logo */
.style-logo {
    display: block;
    margin: 0 auto;
	width: 50%; /* Passt sich an die Bildschirmgröße an */
    max-width: 400px; /* Begrenzung der maximalen Größe */
	margin-bottom: 50px;
	padding-top: 20px;
}

/* Philosophie-Bereich */
.philosophie {
    display: flex;
    flex-direction: column; /* Stapelt die Elemente untereinander */
    align-items: center; /* Zentriert alles horizontal */
    text-align: center;
    padding: 50px 20px; /* Abstand zum Rand */
	position: relative;
}

/* Philosophie-Bild */
.philosophie-photo {
    display: block;
    width: 80%; /* Setzt die Bildbreite auf 80% der Elterncontainer-Breite */
    max-width: 800px; /* Setzt eine Maximalgröße für das Bild */
    height: auto;
    margin: 20px auto;
}

/* Überschrift Philosophie */
.philosophie-headline {
    color: #d6ca2d;
    font-size: 50px;
    margin-bottom: 20px; /* Abstand zum Text */
	text-align: left;
}

/* Philosophie-Text */
.philosophie-description {
    max-width: 70%; /* Begrenzte Breite für gute Lesbarkeit */
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

.philosophie-container {
    position: relative; /* Wir benötigen eine relative Positionierung für das schwebende Herz */
}

/* Schwebendes Herz */
.heart {
    position: absolute;
    top: -60px; /* Positioniert das Herz etwas oberhalb der Überschrift */
    right: -190px; /* Positioniert es an die rechte Seite der Überschrift */
    font-size: 50px; /* Größe des Herzens */
    color: #d6ca2d; /* Gleiche Farbe wie die Überschrift */
    transform: rotate(20deg); /* Drehung des Herzens um 30 Grad */
    animation: heartFloat 2s infinite ease-in-out; /* Schwebende Animation */
    z-index: 10; /* Stellt sicher, dass das Herz über anderen Inhalten schwebt */
}

/* Schwebende Animation */
@keyframes heartFloat {
    0% {
        transform: rotate(20deg) translateY(0); /* Ausgangsposition */
    }
    50% {
        transform: rotate(20deg) translateY(-10px); /* Schwebt nach oben */
    }
    100% {
        transform: rotate(20deg) translateY(0); /* Zurück zur Ausgangsposition */
    }
}




/* Patenschaftsbereich */
.carousel-patenschaft {
    position: relative;
    width: 100%; /* Volle Breite auf mobilen Geräten */
    max-width: 600px; /* Maximale Breite */
    height: auto; /* Automatische Höhe */
    overflow: hidden; /* Verhindert das Überlaufen des Inhalts */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Carousel-Bilder */
.carousel-patenschaft > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    width: 100%;
}

.slide-patenschaft {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.slide-patenschaft[data-active] {
    display: flex;
}

.slide-patenschaft > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    padding: 5px;
}

/* Buttons für das Carousel */
.carousel-button-patenschaft {
    position: absolute;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    font-size: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: 5px;
    padding: 10px;
}

.carousel-button-patenschaft:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-button-patenschaft.prev {
    left: 10px;
}

.carousel-button-patenschaft.next {
    right: 10px;
}

/* Flexbox-Container für das Patenschafts-Carousel und den Text */
.carousel-patenschaft-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

/* Patenkinder-Textbereich */
.patenkinder-text {
    width: 50%;
    text-align: left;
    display: flex;
    flex-direction: column;
    max-width: 70%;
    font-size: 18px;
    line-height: 1.5;
}

/* Patenkinder-Überschrift */
.patenkinder-headline {
    font-size: 60px;
    font-weight: normal;
    color: #d6ca2d;
    padding: 5px 20px;
    text-align: left;
    width: 100%;
}

/* Patenkinder-Beschreibung */
.patenkinder-description {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 20px;
    padding-top: 5px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Container für den Zähler */
.counter-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

/* Der Zähler Box */
.counter-box {
    color: #d6ca2d;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

/* Text innerhalb der Zählerbox */
.counter-text {
    font-size: 18px;
    color: #9b8a70;
    font-weight: normal;
    margin-top: 10px;
}

/* Für den mobilen Bereich (Bildschirme kleiner als 768px) */
@media (max-width: 768px) {
    .carousel-patenschaft-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
		text-align: center;
    }

    .patenkinder-headline {
        font-size: 40px;
        padding: 10px 0;
        text-align: center;
        width: 100%;
    }

    .carousel-patenschaft {
        width: 100%;
        height: auto;
        max-width: 600px;
        display: flex;
        justify-content: center;
    }
}







/* Schulbau-Bereich */
.schulbau {
    text-align: center;
    padding: 50px 20px;
}

/* Schulbau Header */
.schulbau-header {
    margin-bottom: 30px; /* Abstand unterhalb der Header */
}

.schulbau-title {
    font-size: 60px;
    color: #d6ca2d; /* Gelbe Farbe für die Überschrift */
    margin-bottom: 10px; /* Abstand nach unten */
	font-weight: normal;
}

.schulbau-description {
    font-size: 18px;
    width: 97%;
    margin: 0 auto;
    line-height: 1.5;
	padding-top: 20px;
    gap: 10px; /* Abstand zwischen den Absätzen */
}

/* Container für alle Bilder */
.schulbau-images {
    display: flex;
    flex-direction: column; /* Bilder untereinander anordnen */
    justify-content: center;
    align-items: center; /* Zentriert die Bilder */
    gap: 20px; /* Abstand zwischen den Bildern */
}








/* Container für alle Abschnitte */
.image-text-container {
    display: flex;
    flex-direction: column;  /* Stellt sicher, dass die Abschnitte untereinander angezeigt werden */
    gap: 20px;  /* Abstand zwischen den Abschnitten */
}

/* Container für das Bild */
.image-container {
    position: relative;
    overflow: hidden;
    width: 100%;  /* Das Bild nimmt die gesamte Breite ein */
    height: auto;
}

/* Das Bild selbst */
.image-container img {
    width: 100%;  /* Das Bild nimmt die gesamte Breite des Containers ein */
    height: auto;  /* Höhe wird proportional angepasst */
    object-fit: cover;  /* Erhält das Seitenverhältnis */
}









/* Container für den Text */
.writing-text-container {
    display: flex;
    justify-content: center; /* Zentriert den Text horizontal */
    align-items: center; /* Zentriert den Text vertikal */
    width: 100%;
    height: 100px; /* Kann je nach Bedarf angepasst werden */
    overflow: hidden; /* Verhindert, dass der Text außerhalb des Containers sichtbar wird */
}

/* Schrift-Animation für den "Schreib-Effekt" */
.writing-text {
    font-size: 2rem; /* Schriftgröße */
    font-weight: bold; /* Fettgedruckt */
    color: #d6ca2d; /* Gelbe Farbe */
    white-space: nowrap; /* Verhindert das Umbruchverhalten */
    width: 0; /* Start-Breite auf 0 */
    overflow: hidden; /* Verhindert, dass der Text außerhalb des Containers sichtbar wird */
    animation: none; /* Keine Animation zu Beginn */
    transition: width 0.5s ease-out;
}

/* Animation, um den Text zu "schreiben" */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Wenn der Text sichtbar ist, wird die Animation gestartet */
.writing-text.visible {
    animation: typing 5s ease-in-out forwards;  /* Verwende 'ease-in-out' für eine sanftere Animation */
}


/* Mobile Ansicht Anpassungen */
@media (max-width: 768px) {
	.style-logo {
		max-width: 95%;
		margin: 0 auto;
		}
    /* Einheitliche Breite für alle Texte, basierend auf der Breite des Patenschaft-Texts */
    .patenkinder-text,
	.patenkinder-description,
    .philosophie-description,
    .schulbau-description,
    .impressum-text{
        width: 100%; /* Gleiche Breite wie der Patenschaft-Text */
        max-width: 95%; /* Maximale Breite */
        margin: 0 auto; /* Zentriert die Texte */
        text-align: center; /* Text zentriert */
        font-size: 16px; /* Einheitliche Schriftgröße */
        line-height: 1.6;
    }
	
	.style-laufschrift{
        font-size: 30px; /* Einheitliche Schriftgröße */
    }
		.style-logo{
		max-width: 95%;    }

    /* Erstes Bild bei Philosophie soll so breit sein wie Schulbau-Bilder */
    .philosophie-photo:first-child {
        width: 100%; /* Volle Breite */
        max-width: 600px; /* Gleiche Breite wie Schulbau-Fotos */
        height: auto; /* Höhe bleibt automatisch */
        display: block;
        margin: 0 auto; /* Zentriert das Bild */
    }

    /* Letzter Satz: "Gemeinsam machen wir diesen Traum wahr" */
    .writing-text {
        font-size: 16px; /* Kleinere Schriftgröße, damit es nicht abgeschnitten wird */
    }
	 /* Mehr Abstand zwischen der Überschrift "Philosophie" (mit Herz) und dem Bild darüber */
    .philosophie-container {
        margin-top: 40px; /* Erhöht den Abstand */
    }
	.writing-text { 
  		font-size: 18px;
		max-width:90%;
    }
	
	.counter-section { 
  		display: flex;
		justify-conten: center;
		align-items: center;
		width: 100%;
    }
	
	

}








/* Container für das gesamte Impressum */
.impressum {
    display: flex;              /* Flexbox aktivieren */
    flex-direction: column;     /* Elemente untereinander anordnen */
    gap: 20px;                  /* Abstand zwischen den Elementen */
    width: 100%;                /* Volle Breite der Seite */
    padding: 20px;              /* Innenabstand für das Impressum */
    box-sizing: border-box;
	text-align: center;
}

/* Überschrift des Impressums */
.impressum-headline {
    font-size: 24px;            /* Schriftgröße */
    font-weight: bold;          /* Fettgedruckt */
    margin: 0;                  /* Kein Außenabstand */
}