/* Banner Styles */
.banner {
    background: linear-gradient(90deg, #6127ff, #0ac6ff); /* Farbverlauf von orange-rot zu gelb-orange */
    color: white; /* Textfarbe */
    padding: 22px 0px; /* Kleinere Abstände oben und unten */
    position: absolute; /* Fixiert den Banner am oberen Rand der Seite */
    display: none;
    top: 0;
    left: 0;
    width: 100%; /* Banner ist über die gesamte Breite der Seite */
    z-index: 10; /* Sicherstellen, dass der Banner über anderen Inhalten bleibt */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichtes Schatten für Tiefe */
}

/* Text Styles innerhalb des Banners */
.banner-text {
    text-align: center; /* Text zentrieren */
    max-width: 1000px; /* Begrenzte Breite des Textes */
    margin: 0 auto; /* Zentriert den Textblock */
}

/* Überschrift Styling */
.banner h1 {
    font-size: 26px; /* Etwas kleinere Schriftgröße */
    margin: 0 0 10px; /* Abstand unter der Überschrift */
}

/* Absatz Styling */
.banner p {
    font-size: 16px; /* Kleinere Schriftgröße für den Text */
    line-height: 1.6; /* Zeilenhöhe für besseren Textfluss */
    margin-bottom: 20px; /* Abstand nach dem Text */
}

/* Button Styling */
.btn {
    display: inline-block; /* Macht den Button inline */
    padding: 8px 24px; /* Abstände innerhalb des Buttons */
    font-size: 16px; /* Schriftgröße des Buttons */
    color: rgb(255, 255, 255); /* Schriftfarbe */
    background-color: #553fd3; /* Hintergrundfarbe des Buttons */
    text-decoration: none; /* Entfernt die Unterstreichung */
    border: none;
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.3s; /* Weicher Übergang beim Hover */
}
.btn:hover {
    background-color: #644dc9; /* Farbänderung beim Hover */
}