/* Allgemeine Stile */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff; /* Weiß */
    color: #000; /* Schwarz */
}

/* Navigationsleiste-Stile */

nav {
    background-color: #680000; /* Dunkelrot */
    text-align: center;
    padding: 10px 0;
    position: relative; /* Position für den Schatten-Effekt */
    overflow: hidden; /* Verhindert das Überlaufen des Schattens */
    transition: background-color 0.5s ease; /* Verlängerte Übergangszeit für die Hintergrundfarbe */
}

nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Die gesamte Höhe des Bildschirms */
    background: linear-gradient(to right, #000, #680000); /* Verlauf von Schwarz zu Dunkelrot */
    opacity: 0; /* Anfangs keine Sichtbarkeit */
    transition: opacity 0.3s ease; /* Übergang für die Sichtbarkeit (0.3 Sekunden) */
    z-index: -1; /* Hinter die Navigationsleiste legen */
}

nav:hover::before {
    opacity: 1; /* Bei Hover wird der Schatten sichtbar */
}

nav:hover {
    background-color: #830404; /* Ändere die Hintergrundfarbe bei Hover auf Rot */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

nav ul li a:hover {
    text-decoration: underline;
}

/* Header-Stile */

header {
    background-color: #000; /* Schwarz */
    color: #fff;
    text-align: center;
    padding: 25px 0;
}

/* Abschnitt-Stile */

section {
    padding: 50px;
    background-color: #fff; /* Weiß */
    text-align: center;
}

section h2 {
    font-family: 'Hind', sans-serif;
    font-size: 24px;
    color: #680000; /* Dunkelrot */
    margin-bottom: 20px;
    font-family: 'Pacifico', cursive; /* Schreibschrift-Schriftart für Überschrift */
}

section p {
    font-size: 16px;
    color: #000; /* Schwarz */
}

/* Stile für Links (optional) */

a {
    color: #a66767; /* Rot */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Texteinblendung rechts mit smoother Übergangszeit */
.nav-text {
    opacity: 0;
    transition: opacity 0.5s ease; /* Verlängerte Übergangszeit */
    position: absolute;
    top: 50%;
    right: 20px; /* Abstand vom rechten Rand */
    transform: translateY(-50%);
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

nav:hover .nav-text {
    opacity: 1;
}

/* ... deine vorhandenen CSS-Stile ... */

/* Stile für die Laufleiste */
.ticker {
    background-color: #000; /* Hintergrundfarbe der Laufleiste */
    color: #fff; /* Textfarbe */
    overflow: hidden;
    white-space: nowrap; /* Verhindert Zeilenumbrüche im Text */
}

.ticker-text {
    display: inline-block;
    animation: ticker 40s linear infinite; /* 30 Sekunden Animation (Anpassen nach Bedarf) */
    padding: 10px 0;
}

/* Animation für die Laufleiste */
@keyframes ticker {
    from {
        transform: translateX(100%); /* Startposition ganz rechts */
    }
    to {
        transform: translateX(-100%); /* Endposition ganz links */
    }
}

.ticker-paused {
    animation-play-state: paused;
}

footer {
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    padding: 1rem;
    transition: background-color 0.3s ease;
}