form-view
{
   display: block;
   width: 720px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 24px;
}
form-view .label
{
	display: block;
	color: #702A2A;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.2px;
	margin-bottom: 0;
}
form-view .fields
{
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   gap: 32px;
   margin-bottom: 32px;
}
form-view .form-field
{
   width: 100%;
}
@media screen and (min-width: 600px)
{
   form-view .form-field[half="true"]
   {
      width: calc((100% - 32px) / 2);
   }
}
@media screen and (max-width: 500px)
{
   form-view .fields
   {
      gap: 16px;
      margin-bottom: 16px;
   }
}

form-view .boot
{
   cursor: pointer;
   display: block;
   color: var(--color-background-input);
   font-size: 18px;
   line-height: 150%;
   height: 48px;
   text-align: center;
   background: var(--color-accent-1);
   border: 1px solid var(--color-accent-1);
   width: 100%;
   max-width: 400px;
   margin-left: auto;
   margin-right: auto;
   padding: 0;
}
form-view .fields:has(> .form-field[valid="false"][changed="true"]) ~ .boot,
form-view .fields:has(> .form-field[valid="false"][required="true"]) ~ .boot
{
   border-color: var(--color-primary);
   color: var(--color-primary);
   background-color: transparent;
   cursor: not-allowed;
}

form-view > .required-text
{
   color: var(--color-subtext, #717171);
   font-feature-settings: 'liga' off, 'clig' off;
   font-size: 13px;
   line-height: 130%;
   margin-bottom: 32px;
}

form-view .success-view
{
   width: 100%;
   max-width: 400px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   flex-direction: column;
   align-items: center;
}

form-view .success-view > p
{
   margin-bottom: 32px;
}

form-view .phonescreen
{
	fill: var(--color-accent-1);
}


/* form-view input,
form-view select,
form-view textarea
{
   background-color: var(--color-background);
}
form-view > *
{
   margin-bottom: 32px;
}
form-view > *[half="true"]
{
   width: calc(50% - 15px);
   display: inline-block;
}
form-view > *[half="true"]:has( + *[half="true"])
{
   margin-right: 30px;
}

form-view > *[half="false"]
{
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}
form-view > *[type="textarea"],
form-view > *[type="select"]
{
   padding: unset;
}

form-view *[changed="true"][valid="false"] input,
form-view *[changed="true"][valid="false"] textarea
{
   border-color: var(--system-danger);
}

form-view .radio,
form-view .radio > div
{
   display: flex;
   align-items: center;
}
form-view .radio
{
   flex-wrap: wrap;
   align-items: first baseline;
   gap: 40px;
   border-bottom: 1px solid var(--color-background-input);
}
form-view .radio > div
{
   margin-bottom: 10px;
}

form-view *[type="single-radio"][required="true"] > .label::after,
form-view *[type="date"][required="true"] > .label::after,
form-view *[type="time"][required="true"] > .label::after,
form-view *[type="file"][required="true"] > .label::after,
form-view *[type="textarea"][required="true"] > .label::after
{
   content: "*";
}
form-view .radio span
{
   white-space: normal;
   font-size: 16px;
   margin-right: 10px;
}
form-view input[type="radio"]:checked + span
{
   color: var(--color-accent-1);
}
form-view input[type="radio"]
{
   margin: 0 5px 0 0;
   appearance: none;
   font: inherit;
   color: black;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: var(--color-background-input);
   display: grid;
   place-content: center;
   cursor: pointer;
   position: relative;
   z-index: 1;
}
form-view svg:has(+ input[type="radio"])
{
   width: 20px;
   height: 20px;
   top: 0px;
   left: 0;
   position: absolute;
   background-size: cover;
   content: "";
   background-color: white;
}
form-view input[type="radio"]:checked {
	border: unset;
	background: transparent;
}
form-view svg:has(+ input[type="radio"]) *[fill]
{
   fill: var(--color-accent-1);
}
form-view svg:has(+ input[type="radio"]) *[stroke]
{
   stroke: var(--color-accent-1);
}







form-view input[type="text"],
form-view input[type="tel"],
form-view input[type="email"],
form-view input[type="date"],
form-view input[type="time"],
form-view input[type="file"],
form-view textarea
{
   outline: 0;
   width: 100%;
   min-height: calc(21px * 1);
   border: 0;
   border-bottom: 1px solid var(--color-background-input);
   background-color: var(--color-background-input);
   padding: 12px;
   box-sizing: border-box;
}
form-view textarea
{
   min-height: calc(21px * 5);
}
body[os] form-view input[type="text"],
body[os] form-view input[type="tel"],
body[os] form-view input[type="email"],
body[os] form-view input[type="date"],
body[os] form-view input[type="time"],
body[os] form-view input[type="file"],
body[os] form-view textarea
{
   width: 100%;
   max-width: 100%;
   min-width: 100%;
}

form-view *::placeholder
{
   font-size: 16px;
   color: var(--color-text);
   opacity: 1;
}

form-view textarea
{
   height: calc(21px * 5);
}

form-view div:has(> select)
{
   padding: 12px;
   background: var(--color-background-input);
   margin-bottom: 10px;
}
form-view select
{
   width: 100%;
   border: 0;
   display: block;
   outline: 0;
   cursor: pointer;
   border-bottom: 1px solid var(--color-background-input);
   font-size: 16px;
   background: var(--color-background-input);
   padding: 0;
}
form-view select option
{
   cursor: pointer;
}
form-view div[type="checkbox"] div[type="checkbox"]
{
   display: flex;
   align-items: center;
}
form-view div[type="checkbox"] > span
{
   max-width: calc(100% - 44px);
   margin-left: 16px;
}
form-view .checkbox
{
   position: relative;
   display: inline-block;
   max-height: 28px;
   max-width: 28px;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
}
form-view .checkmark
{
   position: absolute;
   top: 0px;
   left: 0px;
   height: 24px;
   width: 23px;
   background-color: var(--color-secondary);
   border: 2px solid var(--color-accent-1);
   border-radius: 9px;
}
form-view input[type="checkbox"]:checked ~ .checkmark
{
   border: unset;
}
form-view .checkmark:after
{
   display: none;
   background-image: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 24.5225C6.34315 24.5225 3.51472 24.5225 1.75736 22.7651C0 21.0077 0 18.1793 0 12.5225C0 6.86561 0 4.03718 1.75736 2.27982C3.51472 0.522461 6.34315 0.522461 12 0.522461C17.6569 0.522461 20.4853 0.522461 22.2426 2.27982C24 4.03718 24 6.86561 24 12.5225C24 18.1793 24 21.0077 22.2426 22.7651C20.4853 24.5225 17.6569 24.5225 12 24.5225ZM16.8364 8.88606C16.4849 8.53459 15.9151 8.53459 15.5636 8.88606L10.2 14.2497L8.4364 12.4861C8.08492 12.1346 7.51508 12.1346 7.1636 12.4861C6.81213 12.8375 6.81213 13.4074 7.1636 13.7589L9.5636 16.1589C9.91508 16.5103 10.4849 16.5103 10.8364 16.1589L16.8364 10.1589C17.1879 9.80738 17.1879 9.23754 16.8364 8.88606Z" fill="%23EF6D00"/></svg>');
   position: absolute;
   height: 28px;
   width: 27px;
   background-size: 27px 28px;
   content: "";
}
form-view input[type="checkbox"]:checked ~ .checkmark:after
{
   display: block;
}

form-view input[type="file"]
{
   display: block;
   min-width: 100%;
   max-width: 100%;
   cursor: pointer;
   position: relative;
   font-size: 16px;
}
form-view input[type="file"]::file-selector-button
{
   display: none;
}
form-view input[type="file"]::placeholder
{
   cursor: pointer;
}
form-view .fake-file
{
   background-color: white;
   height: 32px;
   border-radius: 4px;
   position: relative;
   color: black;
   display: flex;
   align-items: center;
   padding: 0 10px;
}
form-view .fake-file:empty::after
{
   content: "Datei Auswählen";
   position: relative;
   right: 0;
   top: 0;
   color: var(--color-text);
} */