/* Allgemeines */
/* "*" steht für alle Element */
* {
    box-sizing: border-box;
}

/* Fonts */
@font-face {
    font-family: "Glacial";
    src: url(../fonts/GlacialIndifference-Regular.otf) format("opentype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }

/* Formular */

.formbox {
    padding: 2px 0;
}

/* mit größer Zeichen > werden nur die Labelelement angesprochen, die sich in der Formbox als nächstes Kindelement befinden. */
/* display block macht hier, dass alle Element nur in einer Zeile angezeigt werden. */
.formbox > label:first-child {
    display: block;
    font-size: 1.1rem;
}
/* die Eckige Klammer soll beweriken, dass die Regeln nicht auf die Input Checkbox angewandt wird. Sommit wird der Input nur vom Type "text" berücksicht, durch Komma
trennen, können weiter input Elemente definiert werden */
.formbox > input[type="text"],
.formbox > input[type="number"],
.formbox > input[type="password"],
.formbox > input[type="email"],
.formbox > input[type="date"],
.formbox > input[type="tel"],
.formbox textarea
{
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #333;
    font-size: 1.1rem; /* Schriftgröße in der Box */
}

/* Checkboxs wird hier gestylt und ausgerichtet*/
.formbox > input[type="checkbox"] {
    width: 30px;
    height: 30px;
    accent-color: #DDC7B0;
}

.ordertext > textarea {
    height: 100px;
}


.formbox > label:last-child {
    position: relative;
    vertical-align: middle;
    bottom: 8px;
}

.formbox > input[type="button"]
{
    font-family: "Glacial", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.2rem;
    border: 0;
    border-radius: 10px;
    padding: 6px 16px;
    margin: 8px 8px 0 0;
    width: 100%;
    background-color: #DDC7B0; 
    cursor: pointer; 
}

.missingInput::before {
    content: "Geben sie die Mussfelder an";
    color: red;
    position: relative;
    
    
}
.formbox button {
    font-family: "Glacial", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.2rem;
    border: 0;
    border-radius: 10px;
    padding: 6px 16px;
    margin: 8px 8px 0 0;
    cursor: pointer;
    
}

fieldset .formbox button {
    width: 100%;
}

fieldset {
    margin: auto;
    padding: 0.3rem;
}

.formbox > button[type="submit"] {    
    background-color: #DDC7B0;    
}

.halfbutton {
    width: 100%;
}   
    

.formbox > button[type="submit"]:hover,
.formbox > input[type="button"]:hover
 {
    background-color: #BFA38A;
}

.formbox > button[type="reset"] {
    background-color: white;
}

.formbox select {
    /* mit dem folgendem Befehl wird der Pfeil ausgeschalten */
    appearance: none;
    outline: 0;
    box-shadow: none;
    border: 1px solid #333;
    border-radius: 10px;
    color: #333;
    background-color: #fff;
    font-size: 1.0rem;
    padding: 6px 16px;
    width: 100%;
    cursor: pointer;
}
.formbox option {
    font-size: 0.8rem;
}

.formbox .select {
    position: relative;
    display: flex;
    width: 100%;
    height: 38px;
    overflow: hidden;
    border-radius: 10px;
}
/* mit dem folgendem wird der Pfeil realisiert */
.formbox .select::after {
    content: "\25bc";
    position: absolute;
    top: 0;
    right: 0;
    color: #D8F2DE;
    background-color: #DDC7B0;
    padding: 12px 16px;
    pointer-events: none;
    transition: 0.75s all ease;
}

.formbox .select:hover::after {
    background-color: #BFA38A;
}

/* meine Erweiterungen */
.kontakt-adresse {
    margin-top: 1rem;
}

/* Dialog Box stylen */
.modal12 {
    max-width: 25em;
    border: none;
    z-index: 98;
   
}

.modal12::backdrop {
    background: #F2F2F2;
    opacity: 0.8;
}

/* RadioButton wird hier gestylt und ausgerichtet*/
dialog .formbox > input[type="checkbox"] {
    accent-color: #D8F2DE;
    width: 20px;
    height: 20px;
    cursor: pointer;    
}

dialog .formbox > label:last-child {
    position: relative;
    vertical-align: middle;
    bottom: 5px;
    cursor: pointer;
}

.checkAusrichten {
    display: flex;
    justify-content: center;
    gap: 10%;
    margin-bottom: 10px;
    background-color: #DDC7B0;
}

.ergebnis {
    display: flex;
    width: 100%;
    border: 0.5px black solid;
    border-radius: 2.5px;
    background-color: #fff;
    padding: 0.5rem;
    margin-top: 0.5rem;
       
}
.ergebnis > p {
    padding: 0;
    margin: 0;
    width: 50%;
}
.ergebnis p:last-child{
    text-align: right;
    
}
.test {
    display: flex;
    width: 100%;
    border: 0.5px black solid;
    border-radius: 2.5px;
    background-color: #fff;
    padding: 0.5rem;
    
}

/* Slieder Button positionieren */
.toggle label {
	position: relative;
	display: inline-block;
	/*width: 0em;*/
	height: 3.5em;
    
}

/* Ursprünglichen Checkbox viereck ausschalten */
.toggle input {
	display: none;
}
/* Slieder Button erzeugen */
.toggle .slider {
	/* Grundfläche */
	
	position: absolute;
	cursor: pointer;
	top: 1.5em;
	left: 0.0em;
	width: 4em;
	height: 2em;
	background-color: #c32e04;
	/* red */
	
	transition: all .3s ease-in-out;
	border-radius: 1em;
}
.toggle .slider:before {
	/* verschiebbarer Button runder weißer Kreis erzeugt */
	
	position: absolute;
	content: "";
	height: 1.6em;
	width: 1.6em;
	left: 0.2em;
	bottom: 0.2em;
	background-color: white;
	border-radius: 50%;
	transition: all .3s ease-in-out;
}
/* sobald der slider gedrückt wird auf Grün umgeschalten. */
.toggle input:checked + .slider {
	background-color: #D8F2DE;
	/* green */
}

/* Bin nich sicher was hier passiert */
.toggle input:focus + .slider {
	background-color: pink;
	box-shadow: 0 0 1px #D8F2DE;
}
.toggle input:checked + .slider:before {
	transform: translateX(1.9em);
}
.text .slider:after {
	/* Text vor dem FlipFlop-Schalter */
	
	position: absolute;
	content: "nein";
	color: #c32e04;
	font-weight: bold;
	height: 1.6em;
	left: -2.5em;
	bottom: 0.2em;
}
.text input:checked + .slider:after {
	/* Text hinter dem FlipFlop-Schalter */
	
	position: absolute;
	content: "ja";
	color: #D8F2DE;
	left: 4.5em;
}

.modal12::backdrop {
    background: black;
}

/* Kontaktseite mit Produktinformationen */
.produkte {
    display: flex;
    flex-wrap: wrap;
}
.produkte p {
    padding: 2px;
}

@media screen and (max-width: 430px) {
    .LogIn {     
        display: none;
    }    
}