/* KONTAKT */
.powermail_form {
	display:flex;
	flex-direction: row;
	gap:0px;
	flex-wrap: wrap;
	margin-top:35px; 
}

.powermail_form > div  {
	/* flex:0 0 100%; */
}

/* Lehrstelle fieldset 1 - 3 */
.powermail_form .powermail_fieldset_1 {
	margin-right:80px; 
}

.powermail_form .powermail_fieldset_1,
.powermail_form .powermail_fieldset_2 {
	flex:1 1 44%;
}

.powermail_form .powermail_fieldset_3 {
	flex:1 1 100%;
} 

.powermail_form .powermail_fieldset_2 > .row:nth-of-type(1) {
	padding-top:0px;
}

/* Schnupperlehre fieldset 4 - 6 */
.powermail_form .powermail_fieldset_4 {
	margin-right:80px; 
}


.powermail_form .powermail_fieldset_4,
.powermail_form .powermail_fieldset_5 {
	flex:1 1 44%;
}

.powermail_form .powermail_fieldset_6 {
	flex:1 1 100%;
}


.tx-powermail  .container-fluid {
	width: 100%;
	padding-right: 0 !important;
	padding-left: 0 !important;
	margin-right:0 !important;
	margin-left: 0 !important;
}

.tx-powermail legend{
  display:none; 
}

.tx-powermail label{
	color:var(--clr-default);
	font-family:var(--ff-sec);
	font-weight:500; 
	font-size:17px;
}

.tx-powermail label .filesize {
	display: inline-block;
	margin-left: 15px;
	font-size: 13px;
	font-weight: 400;
	opacity: .75;
}

.tx-powermail h3 {
	display: none;
}

.form-control {
	font-family:var(--ff-prim);
	font-size:18px;
	font-weight:400; 
	color:var(--clr-default);
	background-color:transparent;
	border: 2px solid var(--clr-default);
    padding: 12px 14px !important; 
	outline: 0;
    border-radius:0 !important; 
}

.form-control:focus {
	color: var(--clr-default) !important;
	background-color:transparent !important;
	border: 2px solid var(--clr-default);
	outline: 0;
    box-shadow:none !important; 
}

/* 29.7.2026 - Jahr Auswahl ausblenden */
.row:has(> .powermail_fieldwrap_jahr) {
	display: none;
}
.powermail_fieldset_1 .row:nth-of-type(2) {
	margin-block-start: 0rem !important;
}



/* Radio Buttons */
.powermail_fieldwrap_jahr > div {
	display:flex;
	flex-direction: row;
	gap:10px;
	flex-wrap: wrap;
}

.powermail_fieldwrap_jahr .form-label,
.powermail_fieldwrap_jahr  .powermail_field_error_container {
	flex: 0 0 100%;
	margin-bottom:0px !important;
}

.powermail_fieldwrap_jahr .powermail_radiowrap {
	flex: 0 0 110px;
	width:110px;
	height:30px;
	margin-top:0px !important;
	padding-top:0 !important; 
}


.form-check-input:checked[type="radio"] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
}

.tx-powermail input[type="radio"]::before {
	display:none !important;
}

.form-check-input:checked {
	background-color: #fff !important;
	border-color: transparent !important;
}

.form-check-input:focus {
	border-color:none !important;
	box-shadow:none !important;
}


.layout1.col-md-6 {
	width:100% !important; 
}

.powermail_fieldwrap_type_text {
	color:var(--clr-default);
}



select {
	cursor: pointer;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	background-image: none;
	
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320.4 449.9L337.4 432.9L497.4 272.9L514.4 255.9L480.5 222L463.5 239L320.5 382L177.5 239L160.5 222L126.6 255.9L143.6 272.9L303.6 432.9L320.6 449.9z' fill='%23ffffff' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 32px 32px; 	
	background-position-x: 98%;
	background-position-y: 50%;
	/* Native Dropdown: dunkles System-UI (Chromium/Safari) */
	color-scheme: dark;
}

/* Option-Liste: dunkler Hintergrund + weisse Schrift.
   Native <option>-Styles sind browserseitig eingeschraenkt,
   color/background greifen aber in Chromium, Firefox und Edge. */
.tx-powermail select option {
	background-color: var(--clr-ter);
	color: var(--clr-default);
}

.tx-powermail select option:disabled,
.tx-powermail select option:checked {
	background-color: var(--clr-prim);
	color: var(--clr-default);
}

.tx-powermail select option:hover {
	background-color: var(--clr-prim);
	color: var(--clr-default);
}



/* Upload-Feld: Box mit Icon + "Hochladen" statt nativem Datei-Input.
   Das JS (custom.js) wrappt den Input in .powermail-upload-box, damit
   Icon/Text unabhaengig von Label und Fehlermeldung zentriert sind. */
.powermail-upload-box {
	position: relative;
	display: block;
}

.powermail_fieldwrap_type_file input[type="file"],
.powermail_fieldwrap_type_file input[type="file"]:hover,
.powermail_fieldwrap_type_file input[type="file"]:focus {
	width: 100%;
	/* versteckt "Keine Datei ausgewählt." bzw. den nativen Dateinamen;
	   !important noetig, weil .form-control:focus die Farbe sonst zuruecksetzt */
	color: transparent !important;
	cursor: pointer;
	/* vertikales Padding wie .form-control, links Platz fuer das Icon */
	padding: 12px 14px 12px 60px !important;
	/* feste Hoehe (wie uebrige .form-control), damit Icon/Text zentriert werden koennen */
	height: 54px;
}

/* "Durchsuchen..."-Button des nativen Inputs ausblenden */
.powermail_fieldwrap_type_file input[type="file"]::file-selector-button {
	display: none;
}

.powermail_fieldwrap_type_file input[type="file"]::-webkit-file-upload-button {
	display: none;
}

/* Upload-Icon */
.powermail-upload-box::before {
	content: '';
	position: absolute;
	left: 20px;
	/* fix auf die Mitte des 54px hohen Inputs (erstes Element der Box);
	   50% wuerde verrutschen, wenn Powermail die Fehlermeldung in die Box einfuegt */
	top: 27px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	background-color: var(--clr-default);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l6 6-1.8 1.8-2.9-2.9V16h-2.6V7.4L7.8 10.3 6 8.5l6-6zM4 18.5h16V21H4v-2.5z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l6 6-1.8 1.8-2.9-2.9V16h-2.6V7.4L7.8 10.3 6 8.5l6-6zM4 18.5h16V21H4v-2.5z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	pointer-events: none;
}

/* Beschriftung "Hochladen" bzw. gewaehlter Dateiname */
.powermail-upload-box::after {
	content: 'Hochladen';
	position: absolute;
	left: 60px;
	top: 27px;
	transform: translateY(-50%);
	color: var(--clr-default);
	font-family: var(--ff-prim);
	font-size: 18px;
	font-weight: 400;
	pointer-events: none;
}

/* Nach der Dateiauswahl zeigt das JS den Dateinamen via data-file an */
.powermail-upload-box[data-file]::after {
	content: attr(data-file);
}


/* Loading Spinner (#c99, unterhalb #fetch-content) */
.loader {
	position: relative;
	display: none;
	width: 340px;
	max-width: 100%;
	height: 340px;
}

.loader.is-active {
	display: flex;
}

.loader img {
	display: block;
	max-width: 100%;
	height: auto;
}


/* Submit Buttons */
input[type="submit"] {
	margin-top:10px; 
}

.powermail_fieldwrap_type_submit .powermail_field {
	position:relative;
}

.powermail_fieldwrap_submit-help .powermail_field {
	display:flex;
	flex-direction: row;
	gap:50px;
}

.powermail_fieldwrap_submit-help {
	margin-top:35px;
}


/* Powermail Submit Button */
.btn-cta-anim.powermail-submit::before {
	background-color:#e30613;
}

.btn-cta-anim.powermail-submit .btn-wedge {
	background-color: var(--clr-prim);
}

.btn-cta-anim.powermail-submit .btn-wedge:before {
	background-color: var(--clr-default);
}

.btn-cta-anim.powermail-submit:hover .btn-icon::after {
	background-color: var(--clr-sec);
}


/* Powermail Help Button */
.btn-cta-anim.powermail-help::before {
	background-color:#d4d4d4;
}

.btn-cta-anim.powermail-help .btn-text {
	color: #fff !important;
}

.btn-cta-anim.powermail-help .btn-wedge {
	background-color: var(--clr-prim);
}

.btn-cta-anim.powermail-help  .btn-icon::after {
	background-color: #fff;
}

.btn-cta-anim.powermail-help:hover .btn-icon::after {
	background-color: #fff;
}


/* Powermail Error Messages */
.powermail-errors-list {
	color: var(--clr-sec);
	list-style-type: "";
	margin-block: .25rem 0;
	margin-inline: 0;
	padding: 0;
}

.tx-powermail .powermail_fieldset .powermail-errors-list > li {
	padding: 3px 6px !important;
	color:rgb(155, 255, 146);
	font-weight: 500 !important;
	font-size: 15px;
}

.tx-powermail .powermail_fieldset .powermail-errors-list > li::marker {
	color:rgb(155, 255, 146);
}


/* Fehler-Icon im Feld (Override der powermail basic.css):
   weisses Ausrufezeichen-Dreieck, vertikal zentriert */
   .tx-powermail input:not([type="checkbox"], [type="radio"], [type="submit"], [type="reset"], [type="range"], [type="hidden"]):user-invalid,
   .tx-powermail input:not([type="checkbox"], [type="radio"], [type="submit"], [type="reset"], [type="range"], [type="hidden"]).powermail_field_error {
	
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320.5 64C335.2 64 348.7 72.1 355.7 85L571.7 485C578.4 497.4 578.1 512.4 570.9 524.5C563.7 536.6 550.6 544 536.5 544L104.5 544C90.4 544 77.4 536.6 70.2 524.5C63 512.4 62.7 497.4 69.4 485L285.4 85C292.4 72.1 305.9 64 320.6 64zM117.9 496L523.1 496L320.5 120.8L117.9 496zM320.5 456C302.8 456 288.5 441.7 288.5 424C288.5 406.3 302.8 392 320.5 392C338.2 392 352.5 406.3 352.5 424C352.5 441.7 338.2 456 320.5 456zM320.5 248C339.1 248 353.5 264.1 351.5 282.6L344.4 346.7C343 358.8 332.7 368 320.5 368C308.3 368 298 358.8 296.7 346.7L289.6 282.6C287.6 264.1 302 248 320.6 248z' fill='%239bff92'/%3E%3C/svg%3E");
	
	   background-position: calc(100% - 10px) center;
	   background-repeat: no-repeat;
	   background-size: 16px;
	   padding-inline-end: 2.625rem;
   }
   




/* powermail form return */
.powermail_create  {
	margin-bottom:100px;
}

.powermail_create h3 {
	display:block !important; 
}

.powermail_create h4 {
	max-width:780px; 
}




@media screen and (max-width: 1800px) { 

	.powermail_field .btn-primary {
		right:calc(-2 * var(--cont-padding));

	}
}


@media screen and (max-width: 991.5px) { 


	.powermail_field .btn-primary {
		padding: 30px 200px 30px 30px !important;
		bottom: -130px;
	}

	
	.powermail_fieldwrap_type_submit .powermail_field:after {
		top:53px; 
	}
		
}


@media screen and (max-width: 767.5px) { 


	/* Formulare */
	.powermail_form {
		display: flex;
		flex-direction: column;
		gap: 0px;
		flex-wrap: wrap;
		margin-top: 35px;
	}

	.powermail_form .powermail_fieldset_1 {
		margin-right:0px; 
	}

	.powermail_form .powermail_fieldset_1,
	.powermail_form .powermail_fieldset_2 {
		flex:1 1 100%;
	}

	.powermail_form .powermail_fieldset_2 > .row:nth-of-type(1),
	.powermail_form .powermail_fieldset_5 > .row:nth-of-type(1) {
		padding-top:25px;
	}

	.powermail_form .powermail_fieldset_4 {
		margin-right:0px; 
	}

	.powermail_form .powermail_fieldset_4,
	.powermail_form .powermail_fieldset_5 {
		flex:1 1 100%;
	}

	.powermail_field .btn-primary {
		padding: 30px 120px 30px 30px !important;
		bottom: -120px;
	}
	
	.powermail_fieldwrap_type_submit .powermail_field::after {
		top: 55px;
		width: 45px;
		height: 45px;
		right: 25px;
	}
	
	.powermail_fieldwrap_type_submit .powermail_field:hover::after {
		right: 10px;
	}

	.powermail_fieldwrap_submit-help .powermail_field {
		flex-direction: column;
		gap: 40px;
	}
	
}



@media screen and (max-width: 575.5px) { 

	.powermail_input,
	.powermail_textarea {
		width: 100%;
	}

	.powermail_field .btn-primary {
		padding: 17px 95px 17px 17px !important;
		bottom: -90px;
	}

	.powermail_fieldwrap_type_submit .powermail_field::after {
		right: 10px;
		top: 46px;
		width: 32px;
		height: 32px;
	}

	.powermail_fieldwrap_type_submit .powermail_field:hover::after {
		right: 0px;
	}

	.tx-powermail label {
		font-size: 16px;
	}

	.form-control {
		font-size: 16px;
		padding: 9px 12px !important;
	}

	.loader {
		width: 280px;
		max-width: 100%;
		height: 280px;
	}

}