@font-face {
    font-family: 'Kumbh Sans';
    src: url('../font/KumbhSans-Regular.woff2') format('woff2'),
        url('../font/KumbhSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kumbh Sans';
    src: url('../font/KumbhSans-Bold.woff2') format('woff2'),
        url('../font/KumbhSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



body, html {
    height: 100%;
	font-family:'Kumbh Sans';
}


.hero-image {
  background-image:  url("../clouds.png");
  width: 100%;
  height: 80vh;
  margin-top: -100px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  position: relative;
}


.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.stellarnav {
	margin-bottom:5vH;
	margin-top: -15vh;
}

aside {
	font-size:85%;
}

footer {
margin-top:5vH;
font-size:85%;
border-top:1px solid #ccc;
padding:1rem 0;
}
 
footer {
display: flex;
justify-content: center;
align-items: center;
padding: 30px 15px; /* Etwas mehr Padding */
background: #2f4888;
text-align: center; /* Zentriert den gesamten Footer-Inhalt auf mobilen Geräten */
}
 
.footer-content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 960px;
}
 
.footer-links {
margin-bottom: 15px;
width: 100%;
}
 
.footer-links a {
text-decoration: none;
color: #dac6f4;
margin: 0 10px;
font-size: 0.9em;
}
 
.footer-links a:hover {
text-decoration: underline;
}
.social-media-container {
display: flex;
flex-wrap: wrap; /* Erlaubt Umbruch auf sehr kleinen Bildschirmen */
align-items: center;
justify-content: center;
 
}
 
.social-icon {
text-decoration: none;
border: 0;
width: 36px;
height: 36px;
padding: 2px;
margin: 5px;
border-radius: 25%;
background-color: #2f4888;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.2s ease; /* Kleine Hover-Animation */
}
.social-icon:hover {
transform: scale(1.1);
 
box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 0 15px var(--glow-color-primary);
text-shadow: none;
}
 
.social-icon img {
display: block;
width: 36px;
height: 36px;
object-fit;}
 


.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
 
/* GEÄNDERT: Statt 100% Breite wird eine prozentuale Breite mit max-width verwendet, */
/* damit der Container auf Mobilgeräten nicht an den Rändern klebt. */
width: 95%;
max-width: 960px;
 
border: 2px solid #4d9a40; /* Rand etwas dezenter gestaltet */
background-color: white;
margin: 0 auto 40px auto; /* Zentriert den Wrapper und fügt unten Abstand hinzu */
padding: 20px;
box-sizing: border-box; /* Stellt sicher, dass Padding in die Breite eingerechnet wird */
}
 
.content-wrapper p {
text-align: center;
margin-bottom: 1em;
max-width: 100%;
box-sizing: border-box;
}
 
.content-wrapper img,
.content-wrapper video {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto; /* Zentriert und gibt vertikalen Abstand */
}