/* Styling Formulare */
/*Keine Platzhalter verwenden*/
/*----------------------------------
Schriftarten
------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/*Variablen*/

:root {
	--white: hsl(40, 100%, 97%);
    --background: radial-gradient(circle at center, #F3EEFF 0%, #7640E5 100%); /*Mehr Farben unter: https://www.mediaevent.de/tutorial/farbcodes.html*/
    /*--background-gradient: conic-gradient(from 0.25turn at 50% 30%, #f69d3c, 10deg, #3f87a6, 350deg, #ebf8e1); /*Mehr Infos & Gradienten: https://www.makeuseof.com/css-background-gradients/ */
	--color-form: rgba(255,255,255,0.3); /*Hintergrund der Formularfelder*/
    --color-font: #222222;
}

/*VariablenEnde*/


/*Reset - ändern wenn du weißt was du tust*/
*::before,
*::after {
    box-sizing: border-box;
    position: relative;
	background: transparent;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
}

html,
body {
    font-size: 100%;
    /*wir übernehmen die schriftgröße des Users*/
    font: inherit;
    /*Übernehme die Schriftart des Browser/Betriebssysten*/
    vertical-align: baseline;
    /*Schreibt die Schrift auf der Grundlinie*/
	line-height: 1.5;
	font-weight: 500;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 700;
	color: var(--color-font);
	text-align:center; /*Überschrift Werte: left,center,right*/
}
/*Reset-Ende*/


/*Explizites Styling*/

body{
	font-family: 'Poppins', sans-serif;
	background: var(--background); /*hier könnte auch die Variable --background genutzt werden*/
	min-height: 100vh;
	color: var(--color-font);

}

form{
	background-color: var(--color-form);
	border-top: 1px solid var(--color-form);
	border-left: 1px solid var(--color-form);
  	box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);
  	position: relative;
    border-radius: 1em;
    margin: 2em 2em;
	padding: 1em;

}

input:not(.checkbox-inline):not(.checkbox):not(.radio-inline):not(.radio),
.form-group > textarea,
.form-group > select,
.form-group > button{
	background: var(--color-form);
    border: none;
    border-left: 1px solid var(--color-form);
    border-top: 1px solid var(--color-form);
    border-radius: 1em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	color: var(--color-font);
	
	
}
.form-group > button{
	border: 2px solid var(--color-form);

}


.form-group > button:hover,
.form-group > button:visited,
.form-group > button:active{
	mix-blend-mode: screen !important;
}


.required-item {
    display:none;
}

.help-description {
    color: var(--white);
}

.other-text {
    max-width: 200px;
    margin-top: 10px;
}


.form-result {
    border: 2px solid #16a765;
    padding: 20px;
    text-align: center;
    font-size: large;
    font-weight: bold;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 3px;
}