body{
overflow-y: scroll;
}
main{
& > header:has(+ .pmform){
display:none;
}
}
/* ============================================================
Powermail – Styling
/* ============================================================*/
.pmform:not(.bewerbung, .fleet),
.powermail_form-disabled:not(.bewerbung, .fleet) {
.formularext .btnnb.btnmore{
span {
margin-left: 4px;
margin-right: 0px;
width: 30px !important;
pointer-events: none !important;
svg{
position: absolute;
left: 0px !important;
top: 0;
transition: all .3s ease-in-out;
pointer-events: none !important;
}
}
&:hover{
span{
transform: translateX(8px);
}
}
&.btnback{
&:hover{
background: var(--pm-brand) !important;
color: white !important;
}
}
}
.powermail_form {
--pm-radius: 8px;
--pm-border: #d9dde3;
--pm-border-focus: #111;
--pm-bg: #fff;
--pm-text: hsl(0, 0%, 7%);
--pm-muted: #6b7280;
--pm-danger: #cf2317;
--pm-bg-gray: #f1f1f1;
--pm-brand: #0070BA;
--pm-shadow-focus: 0 0 0 4px rgba(0, 0, 0, 0.08);
--pm-pad-x: 1rem;
--pm-grid-gap: 2rem;
/* icon block */
--pm-icon-size: 20px;
--pm-icon-block-width: 54px;
--pm-icon-block-bg: var(--pm-bg-gray);
--pm-icon-block-radius: 6px;
--pm-icon-divider:var(--pm-bg-gray);
--pm-icon-color: hsl(0, 0%, 12%);
/* control sizing */
--pm-control-height: 54px;
--pm-control-pad-y: 0.95rem;
color: var(--pm-text);
}
/* ----------------------------------------------------------
FIELDSET GRID
---------------------------------------------------------- */
.powermail_form .powermail_fieldset div.fieldset-inner {
margin: 0 0 1rem;
display: block;
@media (min-width: 600px) {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--pm-grid-gap);
align-items: start;
}
}
.powermail_form .powermail_legend {
margin-top: 0;
margin-bottom: .5rem;
font-size:calc(1.275rem + .3vw) !important;
font-weight: 600 !important;
line-height: 1.2;
font-family: "Montserrat", sans-serif !important;
@media (min-width: 600px) {
grid-column: 1 / -1;
margin-bottom: 0;
font-size: 1.5rem !important;
&:first-child{
margin-top: 1.25rem;
margin-bottom: -.5rem;
/*border-bottom: 2px solid red;*/
}
}
}
/* ----------------------------------------------------------
FIELD WRAPS + LAYOUTS
---------------------------------------------------------- */
.powermail_form .powermail_fieldwrap {
margin-bottom: 2.75rem;
@media (min-width: 600px) {
margin-bottom: 1.25rem;
grid-column: 1 / -1;
}
.powermail_field{
position: relative;
}
}
.powermail_form .powermail_fieldwrap.labelhidden {
& > label{
display:none;
}
}
.powermail_form .powermail_fieldwrap.layout2 { @media (min-width: 600px) { grid-column: span 2; } }
.powermail_form .powermail_fieldwrap.layout3 { @media (min-width: 600px) { grid-column: span 3; } }
.powermail_form .powermail_fieldwrap.layout4 { @media (min-width: 600px) { grid-column: span 4; } }
.powermail_form .powermail_fieldwrap.layout5 { @media (min-width: 600px) { grid-column: span 5; } }
.powermail_form .powermail_fieldwrap.layout6 { @media (min-width: 600px) { grid-column: span 6; } }
.powermail_form .powermail_fieldwrap.layout7 { @media (min-width: 600px) { grid-column: span 7; } }
.powermail_form .powermail_fieldwrap.layout8 { @media (min-width: 600px) { grid-column: span 8; } }
/* ----------------------------------------------------------
LABELS
---------------------------------------------------------- */
.powermail_form :where(.powermail_label, .form-label) {
display: inline-block;
font-weight: 700;
margin-bottom: 0.25rem;
line-height: 1.35;
color: var(--pm-brand);
text-transform: uppercase;
}
.powermail_form :where(.powermail_label, .form-label) .mandatory {
color: var(--pm-danger);
margin-left: 0.25rem;
}
/* ----------------------------------------------------------
BASE CONTROLS (LOCKED HEIGHT)
---------------------------------------------------------- */
.powermail_form :where(
.powermail_input,
.powermail_select,
.powermail_date,
.powermail_file,
.form-control
) {
width: 100%;
height: var(--pm-control-height);
background: var(--pm-bg);
border: 1px solid var(--pm-border);
border-radius: var(--pm-radius);
padding: 0 var(--pm-pad-x);
font-size: 1rem;
line-height: 1;
display: flex;
align-items: center;
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Center the file input button */
.powermail_form .powermail_file {
}
.powermail_form input[type="file"]::-webkit-file-upload-button {
transform: translateY(0);
margin: 0 2rem 0 -.75rem;
padding: 1rem 2rem;
height: 54px;
position: relative ;
}
.powermail_form textarea,
.powermail_form .powermail_textarea {
width: 100%;
background: var(--pm-bg);
border: 1px solid var(--pm-border);
border-radius: var(--pm-radius);
padding: 1.1rem var(--pm-pad-x);
font-size: 1rem;
line-height: 1.4;
min-height: 160px;
resize: vertical;
box-sizing: border-box;
}
.powermail_form :where(
.powermail_input,
.powermail_select,
.powermail_date,
.powermail_file,
.powermail_textarea,
textarea
):focus {
outline: none;
border-color: var(--pm-border-focus);
box-shadow: var(--pm-shadow-focus);
}
/* ----------------------------------------------------------
ERROR
---------------------------------------------------------- */
.powermail_form :where(.powermail_field_error, .is-invalid, [aria-invalid="true"]) {
border-color: var(--pm-danger) !important;
/*box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12) !important;*/
}
.powermail_form .powermail-errors-list {
list-style: none;
margin: 3px 0 0 0;
padding: 0;
font-size: 0.75rem;
font-weight: 400;
color: var(--pm-danger);
position: absolute;
top: 5.5rem;
line-height: 1.2;
}
.powermail_form .powermail_field_error_container.check-field-error .powermail-errors-list {
top: unset;
bottom: -1.5em;
}
/* ----------------------------------------------------------
SELECT CHEVRON (LOCKED)
---------------------------------------------------------- */
.powermail_form select,
.powermail_form .powermail_select {
appearance: none;
padding-right: 3.25rem;
background-image: none;
}
/* ----------------------------------------------------------
ICONS
---------------------------------------------------------- */
.powermail_form :is(
.powermail_fieldwrap_type_input,
.powermail_fieldwrap_type_textarea,
.powermail_fieldwrap_type_date,
.powermail_fieldwrap_type_file,
.powermail_fieldwrap_type_select
) .powermail_field {
display: grid;
grid-template-rows: auto auto;
gap: 0.4rem;
position: relative;
align-items: start;
}
/* Pin controls into row 2 */
.powermail_form :is(
.powermail_fieldwrap_type_input,
.powermail_fieldwrap_type_date,
.powermail_fieldwrap_type_file,
.powermail_fieldwrap_type_select
) .powermail_field > :where(input, select) {
grid-row: 2;
}
/* textarea stays row 2 too */
.powermail_form .powermail_fieldwrap_type_textarea .powermail_field > textarea {
grid-row: 2;
}
/* padding left */
.powermail_form :is(
.powermail_fieldwrap_type_input,
.powermail_fieldwrap_type_textarea,
.powermail_fieldwrap_type_date,
.powermail_fieldwrap_type_file,
.powermail_fieldwrap_type_select
) .powermail_field :where(
input,
textarea,
select
) {
padding-left: calc(var(--pm-icon-block-width) + 0.75rem);
}
/* icon block – locked to control row even with errors */
.powermail_form :is(
.powermail_fieldwrap_type_input,
.powermail_fieldwrap_type_date,
.powermail_fieldwrap_type_file,
.powermail_fieldwrap_type_select
) .powermail_field::before {
content: "";
position: absolute;
left: 1px;
top: calc(100% - var(--pm-control-height) + 1px);
height: calc(var(--pm-control-height) - 2px);
width: var(--pm-icon-block-width);
background: var(--pm-icon-block-bg);
border-radius: var(--pm-icon-block-radius) 0 0 var(--pm-icon-block-radius);
border-right: 1px solid var(--pm-icon-divider);
box-sizing: border-box;
pointer-events: none;
}
/* textarea block full height – FIXED (starts at textarea top) */
.powermail_form .powermail_fieldwrap_type_textarea .powermail_field::before {
content: "";
position: absolute;
left: 1px;
/* START EXACTLY AT TEXTAREA TOP
exception for safari/
*/
top: calc(1.35rem + .7rem); /* label line-height + gap */
bottom: 1px;
width: var(--pm-icon-block-width);
background: var(--pm-icon-block-bg);
border-radius: var(--pm-icon-block-radius) 0 0 var(--pm-icon-block-radius);
border-right: 1px solid var(--pm-icon-divider);
box-sizing: border-box;
pointer-events: none;
}
/* icon */
.powermail_form :is(
.powermail_fieldwrap_type_input,
.powermail_fieldwrap_type_date,
.powermail_fieldwrap_type_file,
.powermail_fieldwrap_type_select
) .powermail_field::after {
content: "";
position: absolute;
left: calc((var(--pm-icon-block-width) - var(--pm-icon-size)) / 2);
top: calc(100% - var(--pm-control-height) + (var(--pm-control-height) - var(--pm-icon-size)) / 2);
width: var(--pm-icon-size);
height: var(--pm-icon-size);
background: var(--pm-icon-color);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
pointer-events: none;
}
/* textarea icon pinned top inside textarea */
.powermail_form .powermail_fieldwrap_type_textarea .powermail_field::after {
content: "";
position: absolute;
left: calc((var(--pm-icon-block-width) - var(--pm-icon-size)) / 2);
top: calc(1.35rem + .7rem + 1rem); /* match textarea bg start + inner padding */
width: var(--pm-icon-size);
height: var(--pm-icon-size);
background: var(--pm-icon-color);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
pointer-events: none;
}
/* ----------------------------------------------------------
DEFAULT ICONS
---------------------------------------------------------- */
/* Default input icon */
.powermail_form .powermail_fieldwrap_type_input .powermail_field::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Clean calendar icon (datepicker) */
.powermail_form .powermail_fieldwrap_type_date .powermail_field::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Notepad-like textarea icon */
.powermail_form .powermail_fieldwrap_type_textarea .powermail_field::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Select icon – chevron down */
.powermail_form .powermail_fieldwrap_type_select .powermail_field::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* File upload icon */
.powermail_form .powermail_fieldwrap_type_file .powermail_field::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* ----------------------------------------------------------
SPECIAL ICON OVERRIDES BY FIELD
---------------------------------------------------------- */
/* Email icon */
.powermail_form .powermail_fieldwrap_type_input .powermail_field:has(input[type="email"])::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Phone icon */
.powermail_form .powermail_fieldwrap_type_input .powermail_field:has(input[type="tel"])::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Numeric icon (number inputs) */
.powermail_form .powermail_fieldwrap_type_input .powermail_field:has(input[type="number"])::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Hide native date icon but keep it clickable over full area */
.powermail_form input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
cursor: pointer;
z-index: 1;
background: red;
}
/* ----------------------------------------------------------
CHECKBOXES (BOOTSTRAP RESET)
---------------------------------------------------------- */
.powermail_form .powermail_fieldwrap_type_check div.checkbox {
background:none;
position: relative;
padding-left: 1.75rem;
input{
position: absolute;
top: 0;
left: 0;
}
}
/* ----------------------------------------------------------
RADIOS (BOOTSTRAP RESET)
---------------------------------------------------------- */
.powermail_form .powermail_fieldwrap_type_radio .powermail_field {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
align-items: start;
}
.powermail_form .powermail_fieldwrap_type_radio .powermail_field > label {
width: 100%;
margin-bottom: 0.35rem;
}
.powermail_form .form-check.powermail_radiowrap {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0 !important;
margin: 0 !important;
@media (min-width: 1200px) {
max-width: 46%;
}
}
.powermail_form .form-check.powermail_radiowrap input[type="radio"] {
margin: 0 !important;
}
/* ----------------------------------------------------------
SUBMIT BUTTON
---------------------------------------------------------- */
.powermail_form .powermail_fieldwrap_type_submit {
grid-column: 1 / -1;
@media (min-width: 600px) {
display: flex;
justify-content: flex-start;
}
}
.powermail_form .powermail_fieldwrap_type_submit input[type="submit"] {
display: block;
width: 100%;
border-radius: var(--pm-radius);
padding: 1rem 1.25rem;
font-weight: 800;
border: 2px solid transparent;
background: var(--pm-brand);
color: #fff;
@media (min-width: 600px) {
width: 100%;
}
}
.powermail_form .powermail_fieldwrap_type_submit input[type="submit"]:hover {
background: #fff;
color: var(--pm-brand);
border-color: var(--pm-brand);
}
/* Placeholder fade */
.powermail_form input:focus::placeholder,
.powermail_form textarea:focus::placeholder {
color: transparent;
}
.form-check-input, .powermail_checkbox{
width: 1.25rem;
min-width: 1.25rem;
height: 1.25rem;
align-self: start;
border: 1px solid #777;
&:checked{
background: white;
border: 1px solid var(--pm-brand);
box-shadow: inset 0px 0 0 4px var(--pm-brand);
}
}
/* ----------------------------------------------------------
TAB HEADER
---------------------------------------------------------- */
.powermail_multistep_navigation{
background: var(--pm-bg-gray);
position: relative;
width: 100%;
padding: 1.5rem 0;
border-radius: var(--pm-radius);
margin: 2.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
/*
@media (max-width: 599px) {
flex-direction: column;
}
*/
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
width: calc(100% - 5rem);
margin: 0 auto;
background: var(--pm-brand);
transform: translateY(-50%);
z-index: 0;
}
button.btn{
display: flex !important;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .25rem;
flex: unset !important;
background: var(--pm-bg-gray) !important;
border: none;
outline: none !important;
box-shadow: none !important;
border-radius: unset;
padding: 0 2rem;
margin: 0 2.5rem;
@media (max-width: 1200px) {
padding: 0 .5rem;
margin: 0 1rem;
}
counter-increment: step-counter;
width: auto !important;
transition: all .3s ease-in-out;
font-size: 1rem;
font-weight: 600;
color: var(--pm-text);
text-wrap: nowrap;
@media (max-width: 1200px) {
font-size: 0;
}
&:before{
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--pm-brand);
width: 2rem;
height: 2rem;
border-radius: 50%;
font-size: 1rem !important;
font-weight: 600;
color: var(--pm-text);
background: white;
content: counter(step-counter);
transition: all .3s ease-in-out;
}
&.active, &:hover{
color: var(--pm-brand);
&:before{
background: var(--pm-brand);
color: white;
border-color: var(--pm-brand);
}
}
}
}
.powermail_fieldwrap_type_text{
label{
padding-bottom: .5rem;
}
p{
font-family: "Montserrat", sans-serif;
line-height: 1.525;
color: var(--pm-text);
max-width: 950px;
font-size: 1rem;
margin-bottom: .25em;
}
a{
color: var(--pm-brand);
text-decoration: underline;
&:hover{
color: darken(var(--pm-brand), 10%);
}
}
}
}