* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

:root {
    --rot1: #ff1100;
    --rot2: #db6755;
    --weiss: #ffffff;
    --grau: #5f6767;
    --schwarz: #000000;
}

a {
    text-decoration: none;
    color: var(--rot1);
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: var(--rot2);
}

/* Navbar container */

.navbar {
    height: 10vh;
    background-color: var(--weiss);
    font-family: Arial;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
}



/* Links inside the navbar */
.navbar a {
    float: left;
    font-size: 3vh;
    color: var(--schwarz);
    text-align: center;
    padding: 1vh 2vw 1vh 2vw;
    text-decoration: none;
    border-radius: 7.5px;
}

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;

}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 3vh;
    border: none;
    outline: none;
    color: var(--schwarz);
    padding: 1vh 2vw 1vh 2vw;
    background-color: inherit;
    font-family: inherit;
    /* Important for vertical align on mobile phones */
    margin: 0;
    /* Important for vertical align on mobile phones */
    border-radius: 7.5px;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: var(--rot1);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--weiss);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 7.5px;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: var(--schwarz);
    padding: 2vh 2vw;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: var(--grau);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.login {
    display: inline-block;
    background-color: var(--rot1);
}

.header-links{
    float: right;
}

.logo img {
    height: 10vh;
    background-size: cover;
    margin-left: -5vw;
    margin-bottom: -5vh;
    background-position: 0%;
}

.logo a {
    padding: 0;
}



/* main.html */

.hero {
    background-image: url(../pictures/hero.jpg);
    height: 90vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero button {
    width: 10%;
    height: 8%;
    background-color: red;
    border-radius: 5px;
    border: none;
    position: absolute;
    left: 45%;
    top: 50%;
}

.hero-text{
    padding: 5vh 10vw;
    font-size: 1.2rem;
    background-color: var(--grau);
}

/* Logo Abschnitt*/
.logo {
    background-color: var(--weiss);
    display: flex;
    justify-content: space-between;
    padding: 0 5vw;
    margin-bottom: 5vh;
}

/* Rennkalender Abschnitt*/

.rennkalender{
    background-color: var(--grau);
}

.rennkalender h2{
    text-align: center;
    padding-top: 5vh;
    margin-bottom: 5vh;
}

.rennkalender h3 {
    text-align: center;
    padding-top: 5vh;
    margin-bottom: 5vh;
}

.kachel {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 5%;
    background-clip: border-box;
    transition: background-size 0.2s;
    transition-timing-function: cubic-bezier(.07, 1.41, .82, 1.41);
    display: inline-block;
    width: 26vw;
    height: 33vh;
    margin-left: 5.5vw;
    margin-bottom: 5vh;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.mauren-kalender {
    background-image: url(../pictures/kacheln-mauren/mauren-kalender.png);
}

.mauren-kalender:hover {
    background-image: url(../pictures/kacheln-mauren/mauren-kalender-hover.png);
}

.hiltensweiler-kalender {
    background-image: url(../pictures/kacheln-hiltensweiler/hiltensweiler-kalender.png);
}

.hiltensweiler-kalender:hover {
    background-image: url(../pictures/kacheln-hiltensweiler/hiltensweiler-kalender-hover.png);
}

.fricktal-kalender {
    background-image: url(../pictures/kacheln-fricktal/fricktal-kalender.png);
}

.fricktal-kalender:hover {
    background-image: url(../pictures/kacheln-fricktal/fricktal-kalender-hover.png)
}

.homburg-kalender {
    background-image: url(../pictures/kacheln-homburg/homburg-kalender.png);
}

.homburg-kalender:hover {
    background-image: url(../pictures/kacheln-homburg/homburg-kalender-hover.png);
}

.gunterswilen-kalender {
    background-image: url(../pictures/kacheln-gunterswilen/gunterswilen-kalender.png);
}

.gunterswilen-kalender:hover {
    background-image: url(../pictures/kacheln-gunterswilen/gunterswilen-kalender-hover.png);
}

.uesslingen-kalender {
    background-image: url(../pictures/kacheln-uesslingen/uesslingen-kalender.png);
}

.uesslingen-kalender:hover {
    background-image: url(../pictures/kacheln-uesslingen/uesslingen-kalender-hover.png);
}

.halingen-kalender {
    background-image: url(../pictures/kacheln-fun/pulling-kalender.png);
}

.halingen-kalender:hover {
    background-image: url(../pictures/kacheln-fun/pulling-kalender-hover.png);
}

.altstaetten-kalender {
    background-image: url(../pictures/kacheln-fun/sumo-kalender.png);
}

.altstaetten-kalender:hover {
    background-image: url(../pictures/kacheln-fun/sumo-kalender-hover.png);
}

.andelfingen-kalender {
    background-image: url(../pictures/kacheln-fun/chopper-circus.png);
}

.andelfingen-kalender:hover {
    background-image: url(../pictures/kacheln-fun/chopper-circus-hover.png);
}

/* Resultate Abschnitt */


.resultate h2 {
    text-align: center;
    padding-top: 5vh;
    margin-bottom: 5vh;
}



.championship-resultate {
    background-image: url(../pictures/kacheln-championship/championship-resultate.png);
    margin-left: 37.25vw;
}

.championship-resultate:hover {
    background-image: url(../pictures/kacheln-championship/championship-resultate-hover.png);
}

.mauren-resultate {
    background-image: url(../pictures/kacheln-mauren/mauren-resultate.png);
}

.mauren-resultate:hover {
    background-image: url(../pictures/kacheln-mauren/mauren-resultate-hover.png);
}

.fricktal-resultate {
    background-image: url(../pictures/kacheln-fricktal/fricktal-resultate.png);
}

.fricktal-resultate:hover {
    background-image: url(../pictures/kacheln-fricktal/fricktal-resultate-hover.png)
}

.homburg-resultate {
    background-image: url(../pictures/kacheln-homburg/homburg-resultate.png);
}

.homburg-resultate:hover {
    background-image: url(../pictures/kacheln-homburg/homburg-resultate-hover.png);
}

.gunterswilen-resultate {
    background-image: url(../pictures/kacheln-gunterswilen/gunterswilen-resultate.png);
}

.gunterswilen-resultate:hover {
    background-image: url(../pictures/kacheln-gunterswilen/gunterswilen-resultate-hover.png);
}

.hiltensweiler-resultate {
    background-image: url(../pictures/kacheln-hiltensweiler/hiltensweiler-resultate.png);
}

.hiltensweiler-resultate:hover {
    background-image: url(../pictures/kacheln-hiltensweiler/hiltensweiler-resultate-hover.png);
}

.uesslingen-resultate {
    background-image: url(../pictures/kacheln-uesslingen/uesslingen-resultate.png);
}

.uesslingen-resultate:hover {
    background-image: url(../pictures/kacheln-uesslingen/uesslingen-resultate-hover.png);
}

/* Angemeldete Fahrer Abschnitt */
.angemeldete-fahrer {
    background-color: var(--grau);
}

.angemeldete-fahrer h2 {
    text-align: center;
    padding-top: 5vh;
    margin-bottom: 5vh;
}

.championship-angemeldete-fahrer {
    background-image: url(../pictures/kacheln-championship/championship-angemeldet.png);
    margin-left: 37.25vw;
}

.championship-angemeldete-fahrer:hover {
    background-image: url(../pictures/kacheln-championship/championship-angemeldet-hover.png);
}

.mauren-angemeldete-fahrer {
    background-image: url(../pictures/kacheln-mauren/mauren-angemeldet.png);
}

.mauren-angemeldete-fahrer:hover {
    background-image: url(../pictures/kacheln-mauren/mauren-angemeldet-hover.png);
}

.hiltensweiler-angemeldete-fahrer {
    background-image: url(../pictures/kacheln-hiltensweiler/hiltensweiler-angemeldet.png);
}

.hiltensweiler-angemeldete-fahrer:hover {
    background-image: url(../pictures/kacheln-hiltensweiler/hiltensweiler-angemeldet-hover.png);
}

.fricktal-angemeldete-fahrer {
    background-image: url(../pictures/kacheln-fricktal/fricktal-angemeldet.png);
}

.fricktal-angemeldete-fahrer:hover {
    background-image: url(../pictures/kacheln-fricktal/fricktal-angemeldet-hover.png)
}

.homburg-angemeldete-fahrer {
    background-image: url(../pictures/kacheln-homburg/homburg-angemeldet.png);
}

.homburg-angemeldete-fahrer:hover {
    background-image: url(../pictures/kacheln-homburg/homburg-angemeldet-hover.png);
}

.gunterswilen-angemeldete-fahrer {
    background-image: url(../pictures/kacheln-gunterswilen/gunterswilen-angemeldet.png);
}

.gunterswilen-angemeldete-fahrer:hover {
    background-image: url(../pictures/kacheln-gunterswilen/gunterswilen-angemeldet-hover.png);
}

.uesslingen-angemeldete-fahrer {
    background-image: url(../pictures/kacheln-uesslingen/uesslingen-angemeldet.png);
}

.uesslingen-angemeldete-fahrer:hover {
    background-image: url(../pictures/kacheln-uesslingen/uesslingen-angemeldet-hover.png);
}

/* Zahlungsdaten Abschnitt */


.zahlungsdaten h2 {
    text-align: center;
    padding-top: 5vh;
    margin-bottom: 5vh;
}



.championship-zahlungsdaten {
    background-image: url(../pictures/kacheln-championship/championship-resultate.png);
    margin-left: 37.25vw;
}

.championship-zahlungsdaten:hover {
    background-image: url(../pictures/kacheln-championship/championship-resultate-hover.png);
}

.mauren-zahlungsdaten {
    background-image: url(../pictures/kacheln-mauren/mauren-zahlungsdaten.png);
}

.mauren-zahlungsdaten:hover {
    background-image: url(../pictures/kacheln-mauren/mauren-zahlungsdaten-hover.png);
}

.fricktal-zahlungsdaten {
    background-image: url(../pictures/kacheln-fricktal/fricktal-zahlungsdaten.png);
}

.fricktal-zahlungsdaten:hover {
    background-image: url(../pictures/kacheln-fricktal/fricktal-zahlungsdaten-hover.png)
}

.homburg-zahlungsdaten {
    background-image: url(../pictures/kacheln-homburg/homburg-zahlungsdaten.png);
}

.homburg-zahlungsdaten:hover {
    background-image: url(../pictures/kacheln-homburg/homburg-zahlungsdaten-hover.png);
}

.gunterswilen-zahlungsdaten {
    background-image: url(../pictures/kacheln-gunterswilen/gunterswilen-zahlungsdaten.png);
}

.gunterswilen-zahlungsdaten:hover {
    background-image: url(../pictures/kacheln-gunterswilen/gunterswilen-zahlungsdaten-hover.png);
}

.hiltensweiler-zahlungsdaten {
    background-image: url(../pictures/kacheln-hiltensweiler/hiltensweiler-zahlungsdaten.png);
}

.hiltensweiler-zahlungsdaten:hover {
    background-image: url(../pictures/kacheln-hiltensweiler/hiltensweiler-zahlungsdaten-hover.png);
}

.uesslingen-zahlungsdaten {
    background-image: url(../pictures/kacheln-uesslingen/uesslingen-zahlungsdaten.png);
}

.uesslingen-zahlungsdaten:hover {
    background-image: url(../pictures/kacheln-uesslingen/uesslingen-zahlungsdaten-hover.png);
}

/* Form Abschnitt */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20vh 10vw;
}

/* Footer Abschnitt */
.footer {
    display: flex;
    justify-content: space-evenly;
}

.footer-links {
    display: flex;
    flex-direction: column;
}

.footer-rechts {
    display: flex;
    flex-direction: column;
}

/* Verzichtserklärung */
.verzichtserklärung {
    text-decoration: dashed;
}