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 {
    max-width: 1200px;
    width: 1200px;
    background: #ffffff;
    box-shadow: 0 4px 12px #00000014;
}

main.flex {
    display: flex;
}

footer {
	padding: 40px;
	text-align: center;
}

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

h1, h2, h3 {
    color: #004c89;
	margin-top: 0;
    margin-bottom: 20px;
}

.willkommen p {
    line-height: 1.3; /* zeilenabstand */
    margin-bottom: 15px;
}

.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 */
}

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

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

a:hover, a:active {
    color: #005eaa;
}

ul {
    padding-left: 20px;
}

ul li {
    margin-bottom: 20px;
}

.logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	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;
	justify-content: center;
	padding: 40px;
	gap: 40px;
}

.logo-container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	/*
	position: absolute;
	top: 150px;
	right: 550px;
	*/
}

#openDeskLogo {
	/*transform: scale(2);*/
	width: 300px;
}

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

/*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;
	cursor: pointer;
}

/* 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 */
	cursor: pointer;
}

/* 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) {
    main.flex {
        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;
    }

    .steppingstone {
        width: 250px;
        margin-top: 30px;
    }

    .openDesk {
        width: 150px;
        margin-top: 30px;
    }

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

}

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