@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';
}

/* ------------ Header ------------ */
.hero-image {
  display: flex;
  justify-content: center;
  gap: 30px; /* Etwas mehr Abstand für Desktop */
  align-items: center;
  height: 250px;
  background-color: #f5f3f0;
  position: relative;
  padding: 0 20px; /* Sicherer Abstand an den Seiten */
}

.hero-image img {
  max-height: 70%; /* Leicht angepasst für besseres Scaling */
  max-width: 40%;
  width: auto;
  height: auto;
  object-fit: contain; /* Stellt sicher, dass das Bild skaliert, ohne sich zu verzerren */
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333; /* Farbe geändert, um auf hellem Hintergrund sichtbar zu sein */
  width: 90%; /* Verhindert, dass Text an den Rand stößt */
}

.hero-text h1 {
    font-size: 2.5rem; /* Start-Schriftgröße für den Titel */
    margin: 0;
}


/* ------------ Andere Elemente ------------ */
.stellarnav {
	margin-bottom: 5vh;
}

aside {
	font-size: 85%;
}

footer {
	margin-top: 5vh;
	font-size: 85%;
	border-top: 1px solid #ccc;
	padding: 1rem 0;
}


/* ############################################ */
/* ## Responsive Anpassungen mit Media Queries ## */
/* ############################################ */

/* --- Für Tablets (bis 768px Breite) --- */
@media (max-width: 768px) {
    .hero-image {
        height: 200px; /* Header etwas flacher machen */
        gap: 20px;
    }

    .hero-text h1 {
        font-size: 2rem; /* Schriftgröße des Titels reduzieren */
    }
}


/* --- Für Mobilgeräte (bis 480px Breite) --- */
@media (max-width: 480px) {
    .hero-image {
        flex-direction: column; /* Bilder untereinander anordnen */
        height: auto;           /* Höhe automatisch an den Inhalt anpassen */
        padding: 20px 0;        /* Oben/unten Abstand hinzufügen */
        gap: 15px;
    }

    .hero-image img {
        max-width: 60%; /* Bilder dürfen breiter sein, da sie untereinander stehen */
        max-height: 80px; /* Maximale Höhe für die Logos festlegen */
    }

    .hero-text h1 {
        font-size: 1.5rem; /* Schriftgröße für sehr kleine Geräte weiter reduzieren */
    }
}