body, html {
    height: 100%;
    margin: 0;
}

.left-side {
    background-color: white;
    color: rgb(1,0,101);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: bold;
    padding-top: 250px;
    writing-mode: vertical-rl; /* Text vertikal ausrichten */
    text-orientation: mixed;  /* Text orientieren */
    transform: rotate(180deg); /* Drehe den Text, damit er korrekt lesbar ist */
}

.left-side-logo {
    background-color: white;
    color: rgb(1,0,101);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: bold;
    padding: 20px;
}

.right-side-logo {
    background-color: rgb(212,242,245);
    color: rgb(1,0,101);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.right-side {
    background-color: rgb(212,242,245);
    display: flex;
    justify-content: center;
    padding: 20px;
    padding-top: 80px;
}

.card {
    background-color: rgb(212,242,245);
    border-style: none;
    width: 100%;
    max-width: 1040px;
    font-size: 1.5rem;
    color: rgb(1,0,101);
}

.form-section {
    padding: 20px;
}

.btn-primary {
    background-color: rgb(1,0,101);
}

.btn-primary:hover {
    background-color: white;
    color: rgb(1,0,101);
    border-style: none;
}


/* FONTS */

/* Definiere die Light-Schriftart */
@font-face {
    font-family: 'CustomLightFont'; /* Name der Schriftart */
    src: url('../assets/fonts/VIATypeTT-Light1.woff2') format('woff2'),
         url('../assets/fonts/VIATypeTT-Light1.woff') format('woff');
}

/* Definiere die Medium-Schriftart */
@font-face {
    font-family: 'CustomMediumFont'; /* Name der Schriftart */
    src: url('../assets/fonts/VIATypeTT-Medium1.woff2') format('woff2'),
         url('../assets/fonts/VIATypeTT-Medium1.woff') format('woff');
}

/* Klasse für Light-Schriftart */
.font-light {
    font-family: 'CustomLightFont', sans-serif; /* Verwende die Light-Schriftart */
}

/* Klasse für Medium-Schriftart */
.font-medium {
    font-family: 'CustomMediumFont', sans-serif; /* Verwende die Medium-Schriftart */
}

.font-dark-blue {
    color: rgb(1,0,101);
}

.font-white {
    color: rgb(212,242,245);
}

/* RESULTS */

/* CSS Grid für dynamische Spalten, die sich an die Breite anpassen */
#registrations-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Dynamisch, mind. 250px pro Element */
    gap: 20px; /* Abstand zwischen den Elementen */
    padding: 0;
    list-style-type: none; /* Entferne die Standard-Punkte von der Liste */
}

.list-group-item {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: rgba(0,0,0,0);
    border-style: none;
    font-size: clamp(1rem, 3vw, 2.5rem); /* Dynamische Schriftgröße */
    word-break: break-word; /* Lange Wörter umbrechen */
    text-align: center; /* Text zentrieren */
    line-height: 1.2; /* Zeilenhöhe für bessere Lesbarkeit */
}

.result {
    background-color: rgb(1,0,101) !important;
    overflow: hidden;
}

.img1 {
    position: fixed;
    left:200px;
    top:500px;
    width: 1000px;
}

.disclaimer {
    padding-top: 80px;
    font-size: 0.7em;
}