html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    background-image: url('template/images/background_half_trans.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
}
/* Benutzerdefinierter CSS-Stil für die row-Höhe */
.custom-row {
    height: 600px; /* Ändern Sie die Höhe nach Bedarf */
}
#driverSlider {
    height: 100%; /* Ändern Sie die Höhe nach Bedarf */
  
}
.login-container {
    background-color: white;
}
.header-flex-container {
    display: flex;
    width:100%; /* Nutzt die gesamte Bildschirmbreite */
    align-items: center;
    justify-content: center;
    gap: 20px; /* Optional: Abstand zwischen den Elementen */
}
.header-image {
    flex: 4; /* Bilder nehmen jeweils 1 Teil des verfügbaren Platzes ein */
    text-align: center;
    width: auto; /* Behält das Seitenverhältnis des Bildes bei */
    height: 50%; /* Setzt die Höhe des Bildes auf 50% der ursprünglichen Höhe */

    /* Weitere Stile für die Bilder */

}
 .svg-container {
    flex: 4; /* SVG nimmt 4 Teile des verfügbaren Platzes ein */
    text-align: center; /* Zentriert den Inhalt der SVG-Container */
}

.svg-container svg {
    width: 100%; /* SVG nimmt die gesamte Breite seines Containers ein */
    height: auto; /* Höhe automatisch anpassen */
}


.karriert {
    height: 25px;
    /* margin-left: 15px;
    margin-right: 15px; */
    /* margin-top: 280px; */
    background-image: url('template/images/karriert.jpg');
    background-repeat: repeat-x;
    z-index: 0;
  }
.carousel-item img {
    width: 75%;
    margin: auto; /* Zentriert das Bild */
}
.rennserie-button {
    padding: 10px 15px; /* oder eine andere geeignete Größe */
    font-size: 16px; /* oder eine andere geeignete Schriftgröße */
    /* Weitere Stile nach Bedarf, wie Farbe, Rand, etc. */
}
.rennen-liste {
    max-height: 350px; /* Anpassen basierend auf der Höhe deiner Listenelemente */
    overflow-y: auto;
}

.content-wrap {
    flex: 1;
}

   .footer {
       flex-shrink: 0;
   }

   .footer-custom {
       background-color: black;
       color: white;
       padding: 20px 0;

   }


   .red-background-white-text {
       background-color: #c4151c;
       color: white;
   }


   /* Weitere Styles hier */

svg {
    font-family: "Faster One", sans-serif;
    width: 100%;
    height: 100%;
}

svg text {
    fill: rgba(196, 21, 28, 1); /* Füllen Sie den Text mit einer festen Farbe */
    /* animation: stroke 5s infinite alternate;
    stroke-width: 2;
    stroke: #c4151c;*/
    font-size: 100px; 
}



@keyframes stroke {
    0% {
        fill: rgba(196, 21, 28, 0);
        stroke: rgba(196, 21, 28, 1);
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 2;
    }

    70% {
        fill: rgba(196, 21, 28, 0);
        stroke: rgba(196, 21, 28, 1);
    }

    80% {
        fill: rgba(196, 21, 28, 0);
        stroke: rgba(196, 21, 28, 1);
        stroke-width: 3;
    }

    100% {
        fill: rgba(196, 21, 28, 1);
        stroke: rgba(196, 21, 28, 0);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
    }
}

.wrapper {
    background-color: #FFFFFF
}

;