/* 
*
*	BASICS
*	@MEDIA
*
*/


/* 
*	
*	BASICS
*
*/
#content .full-cta{
	background-color: var(--color-contrast);
	color: var(--color-secondary);
}
input {
	background:#fff;
	font-family:var(--font-family);
	width:100%;
}
.error {
	color: red;
}
.delete {
	background-image: url("../images/close.svg");
	width: 15px;
	height: 14px;
	background-size: 14px;
	background-repeat: no-repeat;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 10px;
	margin-left: 5px;
	display: none;
}
.form-upload {
	display: flex;
}
.tab { display:none; }
.steps {
	height:16px;
	text-align:center;
}
.end { text-align: center; }
.form-button-group {
	display:flex;
	justify-content:center;
}
.form-summary,.form-input-group {
	font-weight:300;
	margin-right:auto;
	margin-left:auto;
}
.step {
	background-color:#bbb;
	border:none;
	border-radius:50%;
	display:inline-block;
	height:16px;
	margin:0 2px;
	opacity:.48;
	width:16px;
}
.previous,.next {
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	border:0;
	border-radius:4px;
	color:#fff;
	cursor: pointer;
}
.previous {	background-color:#bbb; }
.form-end .previous { background-color: #5d717b; }
.next {	background-color:#00aeb6; }
.form-acceptance {
	margin-right:auto;
	margin-left:auto;
}
.form-steps-control {
	display:flex;
	justify-content:space-between;
}
.form-radio {
	display: grid;
	gap:24px;
	grid-template-columns:64px auto;
	height:32px;
	line-height:32px;
}
.form-button:hover {
	cursor:pointer;
}
.form-button label {
	cursor:pointer;
}
.form-summary span {
	font-weight:400;
}
.tab h2, .tab h3 {
	text-align:center;
}
.tab.form-end > div:first-of-type{
	align-items: center;
	display: flex;
	flex-direction: column;
}
input[type="text"],input[type="email"],input[type="tel"] {
	border:1px solid rgba(24,24,24,.24);
	border-radius:4px;
	height:40px;
	padding-right:16px;
	padding-left:16px;
}
input[type="checkbox"]:not(#searchtoggle, #contact-container input[type="checkbox"]) {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border:2px solid #00aeb6;
	border-radius:2px;
	cursor:pointer;
	float:left;
	height:24px;
	margin-right:4px;
	outline:2px solid #fff;
	width:24px;
}
input[type="checkbox"]:checked:not(#searchtoggle, #contact-container input[type="checkbox"]) {
	background:#00aeb6;
	outline-color:#fff;
}
input[type="checkbox"]:checked:not(#searchtoggle, #contact-container input[type="checkbox"]):after {
	content:"\2714\fe0e";
	color:#fff;
	display:block;
	font-size:16px;
	margin-left:4px;
}
input.invalid {
	background:#fdd;
}
input:disabled {
	opacity: .5;
}
.step.active {
	background-color:#04AA6D;
	opacity: 1;
}
.step.finish {
	background-color:#04AA6D;
}
.form-button-group .form-button {
	background-color:#00aeb6;
	background-repeat:no-repeat;
	color:#fff;
}
.form-radio:not(:last-child) {
	margin-bottom:12px;
}
.form-button-group .form-button input {
	appearance:none;
	-webkit-appearance:none;
	background:transparent;
	border:0;
	height:100%;
	width:100%;
}
.form-button-group .form-button label {
	position:absolute;
}
.form-radio input[type=radio] {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background-color:#fff;
	border:1px solid rgba(24,24,24,.24);
	border-radius:50%;
	cursor: pointer;
	display:grid;
	height:24px;
	margin-top:4px;
	padding:0;
	place-content:center;
	width:24px;
}
.text-contrast{
  color: #00aeb6;
}
.form-radio label:focus-within {
  color: #00aeb6;
}
.form-radio input[type=radio]::before {
	background-color:#00aeb6;
	border-radius:50%;
	box-shadow:inset 24px 24px #00aeb6;
	content:"";
	transform:scale(0);
	transition: 120ms transform ease-in-out;
  }
.form-radio input[type=radio]:checked {
	background-color:#00aeb6;
}
.form-radio input[type=radio]:focus {
	outline:max(2px, 0.15em) solid rgba(24,24,24,.24);
	outline-offset: max(2px, 0.15em);
}
.form-radio input[type=radio]:checked::before {
	transform:scale(1);
}
.form-quelle{
	flex-wrap: wrap;
}
.form-quelle img {
	height: 30px;
	width: 30px;
}
.form-quelle label{
	align-items: center;
	background-color: var(--color-contrast);
	border-radius: 8px;
	color: var(--color-secondary);
	cursor: pointer;
	display: flex;
	gap: 8px;
	padding: 16px;
	width: min(100% , 300px);
	margin: 12px;
	height: 70px;
}
.form-quelle .is-query .input-content{
	align-items: center;
	display: flex;
	position: relative;
	height: 100%;
	flex: 1;
}
.form-quelle .is-query .input-content input[type=text]{
	display: none;
	background-color: var(--color-contrast);
	border: 1px solid rgba(255,255,255, .6);
	border-radius: 4px;
	color: var(--color-secondary);
	height: 35px;
	padding-left: 8px;
	padding-right: 8px;
	width: 100%;
}
.form-quelle .is-query .input-content span{
	font-size: 16px;
	position: absolute;
	left: 0;
	opacity: 1;
	transition: all .1s ease-in-out;
	width: max-content;
	z-index: 1;
}
.form-quelle input[type=radio]{
	height: 35px;
	width: 20px;
	appearance: none;
	border-radius: 100px;
	background-color: var(--color-secondary);
	position: relative;
}
.form-quelle input[type=radio]::after{
	background-color: var(--color-contrast-plus);
	content: '';
	height: 27px;
	width: 12px;
	border-radius: 100px;
	position: absolute;
	margin: 4px;
	transform-origin: center;
	clip-path: circle(0 at center center);
	transition: clip-path ease-in-out 200ms;
}
.form-quelle input[type=radio]:checked::after{
	clip-path: circle(100% at center center);
	transition: clip-path ease-in-out 200ms;
}
.form-quelle .is-query input[type=radio]:checked ~ .input-content span{
	background-color: var(--color-contrast);
	padding-left: 8px;
	padding-right: 8px;
	font-size: 12px;
	transform:translate(6px, -18px);
	transition: all .1s ease-in-out;
	line-height: 1;
}
.form-quelle .is-query input[type=radio]:checked ~ .input-content input[type=text]{
	display: inline;
}
#bewForm {
	background-color:#ffffff;
	margin-right:auto;
	margin-left:auto;
	margin-bottom: 32px;
}
#myFachrichtungen {
	border:1px solid rgba(24,24,24,.24);
	border-radius:4px;
	font-size:20px;
	height:64px;
	padding-right:16px;
	padding-left:16px;
}
#sending {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#sending img {
	height: auto;
	width: 50px;
}
#sendDataArzt, #sendDataFPflege, #sendDataPflege {
	background-color:var(--color-contrast-plus);
	border:none;
	border-radius:12px;
	color:var(--color-secondary);
	display:flex;
	font-family:var(--font-family-headlines);
	font-size:22px;
	font-weight:600;
	max-width:350px;
	justify-content:center;
	margin-right:auto;
	margin-left:auto;
	padding: 10px;
	width:100%;
	white-space: normal;
}
#personal-data .form-button-group {
	align-items:center;
	flex-direction:column;
}
/* 
*
* @MEDIA
*
*/
@media screen and (max-width:639px) {
	.form-end .full-cta {
		padding-right: 16px;
		padding-left: 16px;
	}
	.form-radio,.form-acceptance,.form-summary,.form-input-group {
		width:100%;
		max-width:480px;
	}
	.steps {
		margin-bottom:24px;
	}
	.previous,.next {
		height:32px;
		line-height:32px;
		padding-right:16px;
		padding-left:16px;
	}
	.form-button-group {
		align-items:center;
		flex-direction:column;
	}
	.form-button-group,.form-steps-control {
		margin-top:24px;
	}
	.form-input {
		margin-top:12px;
	}
	.form-button-group + .form-input {
		margin-top:24px;
	}
	
	.form-button-group .form-button {
		background-position:left 16px center;
		background-size:40px auto;
		border-radius:8px;
		font-size:15px;
		height:64px;
		padding:8px;
		width:280px;
	}
	.form-button-group .form-button label {
		height:48px;
		line-height:48px;
		padding-left:64px;
		width:264px;
	}
	.form-button-group .form-button label span {
		display:flex;
		height:48px;
	}
	.form-button-group .form-button:not(:last-child) {
		margin-bottom:12px;
	}
	.form-quelle label{
		margin: 12px 0;
	}
	#upload-container {
		margin-right:auto;
		margin-bottom:24px;
		margin-left:auto;
		width:auto;
		max-width:480px;
	}
	#bewForm {
		border-radius:24px 0 24px 24px;
		padding:24px 20px;
		width:calc(100vw - 32px);
	}
	#myFachrichtungen {
		margin-top:24px;
	}
	#personal-data h2 {
		font-size: 32px;
	}
	#personal-data h3 {
		margin-top:32px;
		margin-right:auto;
		margin-left:auto;
		width:auto;
		max-width:480px;
	}
	#personal-data .form-input {
		margin-right:auto;
		margin-left:auto;
		width:100%;
		max-width:480px;
	}
	#sendDataArzt, #sendDataFPflege, #sendDataPflege {
		margin-top:24px;
	}
}

@media screen and (min-width:640px) {
	.form-button-group .form-button label {
		align-items:flex-end;
		display:flex;
		justify-content:center;
		line-height:1.25;
		text-align:center;
	}
}
@media screen and (min-width:640px) and (max-width:959px) {
	.form-end .full-cta {
		padding-right: 24px;
		padding-left: 24px;
	}
	.form-radio,
	.form-acceptance,
	.form-summary,
	.form-input-group,
	#upload-container,
	#personal-data h3,
	#personal-data .form-input {
		width:480px;
	}
	.steps { margin-bottom:32px; }
	.previous,.next {
		height:48px;
		line-height:48px;
		padding-right:16px;
		padding-left:16px;
	}
	.form-button-group,
	.form-button-group + .form-input,
	#sendDataArzt, 
	#sendDataFPflege, 
	#sendDataPflege, 
	#personal-data h3 {
		margin-top:32px;
	}
	.form-steps-control { margin-top:24px; }
	.form-input { margin-top:12px; }
	
	.form-button-group .form-button {
		background-position:center 16px;
		background-size:48px auto;
		border-radius:8px;
		font-size:15px;
		height:144px;
		padding:8px;
		width:calc((100% - 48px) / 5);
	}
	.form-button-group .form-button label {
		height:128px;
		line-height:1.125;
		width:calc((100% - 48px) / 5 - 31px);
	}
	.form-button-group .form-button label span {
		display:flex;
		height:48px;
	}
	.form-button-group .form-button:not(:last-child) {
		margin-right:12px;
	}
	#content {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	#upload-container {
		margin-bottom:32px;
	}
	#bewForm {
		border-radius:24px 0 24px 24px;
		padding:24px 20px;
		width:calc(100vw - 32px);
	}
	#myFachrichtungen {
		margin-top:24px;
	}
	#personal-data h2 {
		font-size: 40px;
	}

	#upload-container, 
	#personal-data .form-input, 
	#personal-data h3 {
		margin-right:auto;
		margin-left:auto;
	}
}
@media screen and (max-width:959px) {
	#sendDataArzt, #sendDataFPflege, #sendDataPflege {
		/* height:40px;
		line-height:40px; */
	}
}
@media screen and (min-width:960px) {
	.form-end .full-cta {
		font-size: 20px;
		padding-right: 32px;
		padding-left: 32px;
	}
	.form-button-group .form-button label span {
		display:flex;
		height:40px;
	}
	#upload-container {
		margin-right:auto;
		margin-bottom:48px;
		margin-left:auto;
	}
	#personal-data h3 {
		font-size:22px;
		margin-top:48px;
		margin-right:auto;
		margin-left:auto;
		text-align:center;
	}
	#sendDataArzt, #sendDataFPflege, #sendDataPflege {
		/* height:48px;
		line-height:48px; */
	}
}
@media screen and (min-width:960px) and (max-width:1679px) {
	.form-radio,
	.form-acceptance,
	.form-summary,
	.form-input-group, 
	#sendDataArzt, 
	#sendDataFPflege, 
	#sendDataPflege, 
	#upload-container, 
	#personal-data h3, 
	#personal-data .form-input {
		width:480px;
	}
	.steps { margin-bottom:48px; }
	.previous,.next {
		height:48px;
		line-height:48px;
		padding-right:16px;
		padding-left:16px;
	}
	.form-button-group, 
	.form-button-group + .form-input {
		margin-top:48px;
	}
	.form-steps-control, 
	#sendDataArzt, 
	#sendDataFPflege, 
	#sendDataPflege, 
	#myFachrichtungen {
		margin-top:24px;
	}
	.form-input { margin-top:12px; }
	.form-button-group .form-button {
		background-position:center top 20px;
		background-size:56px auto;
		border-radius:8px;
		height:144px;
		padding:16px 8px;
		width:144px;
	}
	.form-button-group .form-button label {
		height:112px;
		width:128px;
	}
	.form-button-group .form-button:not(:last-child) { margin-right:24px; }
	#bewForm {
		border-radius:48px 0 48px 48px;
		padding:48px 40px;
		width:896px;
	}
	#personal-data h2 { font-size: 48px; }
	#personal-data .form-input {
		margin-right:auto;
		margin-left:auto;
	}
}
@media screen and (min-width:1680px) {
	.form-radio,
	.form-acceptance,
	.form-summary,
	.form-input-group, 
	#upload-container, 
	#sendDataArzt, 
	#sendDataFPflege, 
	#sendDataPflege, 
	#personal-data h3,
	#personal-data .form-input {
		width:608px;
	}
	.steps { margin-bottom:64px; }
	.previous,
	.next {
		height:48px;
		line-height:48px;
		padding-right:16px;
		padding-left:16px;
	}
	.form-button-group, 
	.form-button-group + .form-input, 
	#sendDataArzt, 
	#sendDataFPflege, 
	#sendDataPflege {
		margin-top:64px;
	}
	.form-steps-control, 
	#myFachrichtungen {
		margin-top:32px;
	}
	.form-input { margin-top:16px; }
	
	.form-button-group .form-button {
		background-position:center top 24px;
		background-size:64px auto;
		border-radius:8px;
		height:160px;
		padding:16px;
		width:160px;
	}
	.form-button-group .form-button label {
		height:128px;
		width:128px;
	}
	.form-button-group .form-button:not(:last-child) { margin-right:64px; }
	#bewForm {
		border-radius:64px 0 64px 64px;
		padding:64px;
		width:1184px;
	}
	#personal-data h2 { font-size: 56px; }
	#personal-data .form-input {
		margin-right:auto;
		margin-left:auto;
	}
}