body {
    font-family: "Inter", sans-serif;
    margin: 0; /* Abstand oben */
    padding: 90px;
    background-color: #ffffff;

    /* zentrieren der Box */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container für die zwei Spalten */
.container {
    display: flex; /*nebeneinander*/
    max-width: 1200px;
    width: 1200px;
    background: #ffffff;
    box-shadow: 0 4px 12px #00000014;
}

/* Linke Spalte (Text) */
.willkommen {
    flex: 800px; /*wie gross ist die linke spalte*/
    padding: 40px;
}

/* Überschrift links */
.willkommen h1 {
    color: #004c89;
    margin-bottom: 20px;
}

/* Absatz */
.willkommen p {
    line-height: 1.3; /* zeilenabstand */
    margin-bottom: 35px; /* grösse der Lücke */
}

.abstand p {
    margin-bottom: 15px;
    line-height: 1.2;
}

.willkommen h3 {
    color: #004c89;
    font-family: "Inter", sans-serif;
    margin-top: 40px;     /* Abstand gegen oben*/
    margin-bottom: 10px;  /* kleinerer Abstand zum nächsten Absatz */
    line-height: 1.2;     /* normale Zeilenhöhe */
}

.opendesklink {
    color: #004a99;
    text-decoration: none;
}

.opendesklink:link, a:visited {
    color: #004a99;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    color: #005eaa;
    font-weight: bold;
}

ul {
    padding-left: 20px; /*einrückung der Liste*/
}

ul li {
    margin-bottom: 20px; /* Abstand zwischen den Listeneinträgen */
}

/* Logos */
.logos {
    display: flex;
    justify-content: center;
    align-items: center; /* vertikale Ausrichtung */
    gap: 40px;           /* Abstand zwischen den Logos */
    margin-top: 30px;
}

.adfinis {
    width: 190px;
}

.steppingstone {
    width: 250px;
}

/*.openDesk {
    width: 180px;
}*/


/* Rechte Spalte (Formular) */
.anmeldeformular {
    flex: 50%; /*wie gross ist die rechte spalte*/
    background: #ffffff;
    display: flex;
    flex-direction: column; /*vertikale anordnung*/
    justify-content: center;
    padding: 40px;
}

.logo-container {
    position: absolute;
    top: 150px;   /* Abstand von oben */
    right: 550px; /* Abstand von rechts */
}

/*Layout des Formulars*/
form {
    display: flex;
    flex-direction: column;
    gap: 15px; /*abstand festlegen*/
}



/*Eingabefelder*/
.name,
.email,
.firma {
    padding: 12px;
    font-size: 16px;
    border: 1px solid ;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

/* Rahmenfarbe */
input:focus {
    border-color: #004a99; /*Farbe checkbox*/
}

/*formular wenn nicht ausgefüllt*/
input[required] {
  border: 1px solid #004a99;
}

input[required]:focus {
  border-color: #004a99; /* Bootstrap Rot */
  box-shadow: 0 0 5px #004a99;
}

.was-validated input:invalid {
  border-color: #d9534f;
}


/* Checkbox */
.checkbox {
    font-size: 14px;
    color: #004c89;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}


/* Design des Buttons */
button {
    background-color: #004a99;
    color: #ffffff;
    padding: 12px; /* Grösse Button */
    text-align: center; /* ort text */
    font-size: 16px; /* Grösse Schrift */
    border: none; /* Keine Umrandung */
    border-radius: 25px; /* rundung */
    margin-top: 10px; /* Abstand zum Formular */
    transition: background-color 0.3s; /* Wann vervärbt sich der hintergrund des Buttons */
}

/* Hover Effekt beim Button*/
button:hover {
    background-color: #005eaa; /* beim darübergehen des Buttons (mit der Maus) welche Farbe wird der Button */
}


@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    body {
        margin: 0; /* Abstand oben */
        padding: 30px;
        background-color: #ffffff;
    }

    .logos {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .adfinis {
        width: 190px;
        margin-top: 30px; /* abstand oben */
    }

    .steppingstone {
        width: 250px;
        margin-top: 30px; /* abstand oben */
    }

    .openDesk {
        width: 150px;
        margin-top: 30px; /* abstand oben */
    }

    .logo-container {
        position: absolute;
        top: 5px;   /* Abstand von oben */
        right: 70px; /* Abstand von rechts */
    }

}

@media (min-width: 768px) and (max-width: 1590px) {
    .logo-container {
        top: 145px;
        right: 120px;
    }
}