@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 body {
            background: #fff;
/*            font-family: 'Arial', sans-serif;*/
            font-family: "Inter", sans-serif;
            font-size:  15px;
                color: #002147;
        }
        h1,h2,h3,h4,h5,h6{
            font-family: "Arvo", serif;
        }
        .flatpickr-calendar {
            border-radius: 10px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.1);
/*            font-family: 'Arial', sans-serif;*/
        }
        .flatpickr-day.selected {
            background-color: #ff9900;
            border-color: #ff9900;
            color: #fff;
        }
        .flatpickr-monthDropdown-months,
        .numInputWrapper input {
            color: #ff9900;
        }
        .form-wrapper {
            background: #fff;
            max-width: 850px;
            border-radius: 20px;
            box-shadow: 0 6px 30px rgba(0,0,0,0.1);
            margin: 24px auto;
            padding: 24px;
            position: relative;
            /*width: min(100%, 980px);*/
        }

        .form-title {
            font-weight: 400;
            margin-bottom: 20px;
            color: #002147;
        }

        /* Step Progress Bar */
        .stepper-wrapper {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            position: relative;
        }
        .stepper-item:not(:last-child)::before {
            content: '';
            position: absolute;
            top: calc(50% - 15px);
            left: 50%;
            width: 100%;
            height: 3px;
            background-color: #dfe5ec;
            z-index: 0;
            transform: translateY(-50%);
        }
        .stepper-item {
            z-index: 1;
            text-align: center;
            position: relative;
            flex: 1;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .step-counter {
            width: 40px;
            height: 40px;
            line-height: 40px;
            background: #dfe5ec;
            color: #00142b;
            border-radius: 50%;
            display: inline-block;
            font-weight: bold;
            position: relative;
            z-index: 2;
            transition: all 0.3s;
        }
        .step-name {
            font-size: 13px;
            margin-top: 10px;
            color: #666;
        }
        .stepper-item.active .step-counter {
            background: #46b972;
            color: #fff;
        }
        .stepper-item.completed .step-counter {
            background: #46b972;
            color: #fff;
        }

        /* Form steps */
        .step {
            display: none;
        }
        .step.active {
            display: block;
        }
        .btn-next, .btn-next:hover {
            background-color: #45b971;
            border: none;
            color: white;
            border: 1px solid #45b971;
        }
.btn-prev {
    background-color: rgb(0 0 0 / 60%);
    color: #fff;
    border: 1px solid rgb(0 0 0 / 60%);
}
        p#lager-hint {
            color: #46b972;
        }
        p#lager-hint1 {
         color: #243f5c;
         font-size: 13px;
       }
       p#lager-hint1 u {
        color: #46b972;
        font-weight: 600;
       }
        label {
            font-weight: 400;
        }

        /* Orange input error style */
        .is-invalid {
          border: 1px solid rgb(179 31 31 / 80%) !important;
          box-shadow: none;
        }      

        .field-error {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-top: 6px;
          color: #b03200;
          font-size: 13px;
          line-height: 1.2;
        }
        .field-error[aria-hidden="true"]{ display:none !important; }
        .field-error .err-icon {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #ffa94d;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 12px;
          background: #fff3e0;
          color: #d67b00;
          flex: 0 0 18px;
          display:none;
        }
        .err-icon{ font-weight:600; }
        /* Orange line under all h5 headings */
        .form-wrapper h4, .form-wrapper h5 {
            position: static;
            padding-bottom: 0px;
            margin-bottom: 8px;
            border-bottom: 2px solid #1a1a1a1a;
            font-size: 22px;
            font-weight: 400;
        }

        .form-wrapper h4::after,
        .form-wrapper h5::after{
          content: none !important;
        }

        .file-chip{
          /*border: 2px solid #46b972;
          border-radius: 8px;*/
          padding: 10px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .file-chip__name{
          display: inline-block;
          max-width: 560px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #333;
          text-decoration: none;
        }
        .file-chip__name:hover{ text-decoration: underline; }
        .file-chip__trash{ color: #dc3545; }
        .file-chip__trash:hover{ color: #bb2d3b; }


        #file-name{
          display:inline-block;
          max-width: 560px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .field-error .err-msg { display: inline-block; }

        select.is-placeholder-shown { color: #9fa6b2; }
        select.use-placeholder option[disabled][value=""] { color: #9fa6b2; }
        select.use-placeholder option:not([disabled]) { color: #212529; }

        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance:none; margin:0;
        }
        input[type="number"] { -moz-appearance:textfield; appearance:textfield; }

        .form-control.is-invalid,
        .was-validated .form-control:invalid { background-image: none !important; padding-right: .75rem; }
        .form-select.is-invalid,
        .was-validated .form-select:invalid { background-image: var(--bs-form-select-bg-img) !important; padding-right: 2.25rem; }

        .step:last-of-type .form-check-input.is-invalid ~ .form-check-label,
        .step:last-of-type .form-check-input:invalid ~ .form-check-label { color: inherit !important; }

        input::placeholder {
            color: #9fa6b2 !important;
        }

        img.que-icon {
            width: 18px;
            margin-left: 5px;
            margin-bottom: 3px;
        }

        /* Left-side popup */
        #label-popup{
          position: absolute;
          left: 16px;
          top: 30%;
          transform: translateY(-50%);
          width: min(420px, calc(100vw - 32px));
          max-height: calc(100vh - 120px);
          overflow: auto;
          background: #fff;
          border-radius: 14px;
          box-shadow: 0 12px 40px rgba(0,0,0,.18);
          border: 1px solid #00000021;
          padding: 16px;
          z-index: 9999;
          min-height: 127px;
          visibility: hidden;
          opacity: 0;
          transition: all 0.3s ease;
        }
        #label-popup.show{ display: block; visibility: visible; opacity:1 }

        .label-popup__inner{ position: relative; }
        .label-popup__close{
          position: absolute;
          right: -8px; top: -8px;
          width: 28px; height: 28px;
          border-radius: 50%;
          border: none;
          background: #222; color: #fff;
          font-size: 18px; line-height: 1;
          cursor: pointer;
        }
        .label-popup__title{
          font-weight: 600; margin: 0 0 8px;
          color: #333;
          padding-right: 15px;
        }
        .label-popup__image{
          max-width: 100%;
          height: auto;
          border-radius: 8px;
          margin: 6px 0 10px;
          border: 1px solid #eee;
        }
        .label-popup__desc{
          color: #444; font-size: 14px; line-height: 1.45;
          white-space: pre-wrap;
        }

        form#buildingForm .step label {
            display: inline-grid;
            margin-bottom: .1rem;
            grid-template-columns: 1fr auto;
            align-items: center;
            font-size: 14px;
        }

        form#buildingForm .step .form-control,
        form#buildingForm .step .form-select {
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
            min-height: 38px !important;
/*            font-size: 15px;*/
font-size: 14px;
            background-color: #f0f2f4;
            border-color: #d7d9db;
        }
form#buildingForm .step input::placeholder,
form#buildingForm .step select::placeholder{
    font-size: 14px;
}

        .step > div {
            margin-bottom: 1rem;
        }

        .step > div.row > div {margin-bottom: 0 !important;row-gap: 1rem;}
        .label-popup__loader {
            max-width: 88px;
            margin: 0 auto;
        }

        .label-popup__loader img {
            width: 100%;
        }
        @media ( max-width: 767px ){
            #label-popup{
                left: 50% !important;
                transform: translate( -50%, -50%);
            }
            .label-popup__title{
                font-size: 18px;
            }
        }


  .vacancy-row { gap: .5rem; }
  .vacancy-row .form-control { min-width: 0; }
  .vacancy-row .input-group { flex: 0 0 9rem; }
  @media (max-width: 768px){ .vacancy-row { flex-wrap: wrap; } }
  /* Hide the remove button on the very first row entirely */
#lager-rows .lager-row:first-child .lager-remove {
  display: none !important;   /* no width → no gap */
}
#lager-rows1 .lager-row1:first-child .lager-remove1 {
  display: none !important;   /* no width → no gap */
}

@media (max-width: 992px){
  .form-wrapper{ padding: 20px; border-radius: 16px; }
}
@media (max-width: 576px){
  .form-wrapper{ padding:14px }
  .row>[class^="col-"], .row>[class*=" col-"]{ padding-left:8px; padding-right:8px }
  .step > .row, .row.mb-3 { row-gap: 10px }
}

/* ---------- Buttons: stack on small screens ---------- */
/*.d-flex .btn-step, .d-flex .btn { white-space: nowrap; }*/
/*@media (max-width: 576px){
  .d-flex.justify-content-between.mt-4{ gap:10px; flex-wrap:wrap }
  .d-flex.justify-content-between.mt-4 .btn{ flex:1 1 100% }
}*/

/* ---------- Form fields: make rows wrap nicely ---------- */
.step > .row, .row.mb-3{ row-gap: 14px; }
.input-group{ flex-wrap: nowrap; }
@media (max-width: 576px){
  .input-group{ flex-wrap:wrap }
  .input-group>.form-control{ flex:1 1 100% }
  .input-group>.input-group-text{ width:100%; justify-content:center }
}

/* number inputs: prevent overflow on tiny screens */
input[type="number"], input[type="text"], input[type="email"], input[type="tel"], select{
  min-height: 42px;
}

/* ---------- Stepper: scrollable on mobile, compact labels ---------- */
.stepper-wrapper{ overflow-x:auto; gap:12px; padding-bottom:8px }
.stepper-item{ min-width:84px }
@media (max-width: 576px){
  .step-name{ display:none }
  .step-counter{ width:34px; height:34px; line-height:34px }
}
.stepper-item.active .step-counter {
    box-shadow: 0 0 0 4px #46b9722e;
}

//* --- Vacancy / Lager rows wrap on small screens --- */
.vacancy-row, .lager-row{ gap:8px; flex-wrap:wrap }
.vacancy-row .input-group, .lager-row .input-group{ flex:1 1 180px; max-width:none }

.vacancy-row, .lager-row1{ gap:8px; flex-wrap:wrap }
.vacancy-row .input-group, .lager-row1 .input-group{ flex:1 1 180px; max-width:none }



/* Backdrop when popup open */
.body-backdrop::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9998;
}

/* Safer tap targets */
label, .form-check-label{ -webkit-tap-highlight-color: transparent }

.input-group:has(#clear-emails-confirm),
.input-group:has(.input-group-text) {
    display: grid;
    grid-template-columns: 1fr auto;
}

.input-group:has(#clear-emails-confirm) input#emails_confirm ,
.input-group:has(.input-group-text) input.form-control{
    width: 100%;
}
@media ( max-width: 576px ){
    .stepper-item:not(:last-child)::before{
        top: 50%;
    }
}
.label-popup__image-wrap {
    max-width: 190px;
    margin: 0 auto;
}
.inline-link {
    display: inline-block;
    margin-left: 5px;
}
.lager-row {
    display: grid !important;
    grid-template-columns: 1fr auto 20px;
    max-width: 490px;
    column-gap: 10px;
}

.lager-row .input-group.me-2 {
    margin: 0 !important;
}

.lager-row input.form-control {
    margin: 0 !important;
}
.lager-row .input-group.me-2 {
    width: auto !important;
    max-width: 150px !important;
}

.lager-row1 {
    display: grid !important;
    grid-template-columns: 1fr auto 20px;
    max-width: 490px;
    column-gap: 10px;
}

.lager-row1 .input-group.me-2 {
    margin: 0 !important;
}

.lager-row1 input.form-control {
    margin: 0 !important;
}
.lager-row1 .input-group.me-2 {
    width: auto !important;
    max-width: 150px !important;
}


.vacancy-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 35px;
}

.vacancy-row .input-group {
    max-width: 100% !important;
}

.vacancy-row input.form-control {
    margin: 0 !important;
}

.vacancy-row .input-group.ms-2 {
    margin: 0 !important;
}
@media ( max-width: 576px ) {
    .vacancy-row{
        position: relative;
        grid-template-columns: 1fr;
        padding-right: 40px;
    }
    .vacancy-row button.vac-remove {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0 !important;
    }

    div#vacant_rows {
        row-gap: 14px !important;
    }
}

#lager-open {
    color: #46b972;
    text-decoration: none;
}
.form_check_bg {
    padding: 10px 5px 10px 40px;
    background: #f0f2f4;
    border-left: 8px solid #46b972;
}
.btn-ausweis, .btn-ausweis:hover {
    background: #46b972 !important;
    color: #fff;
    border: 1px solid #46b972 !important;
}



 .alert-success{ display:none !important; }

    .eg-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999;
      display:flex; align-items:center; justify-content:center; }
    .eg-modal{ width:min(560px,92vw); background:#fff; border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.22);
      padding:22px; 
/*      font-family:Arial;*/
       }
    .eg-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
    .eg-head img{ height:28px; }
    .eg-title{ font-size:18px; font-weight:400; margin:2px 0 0; }
    .eg-hr{ height:1px; background:#e7e7e7; margin:12px 0; }
    .eg-order{ text-align:right; font-size:14px; }
    .eg-row{ margin:10px 0 12px; }
    .eg-strong{ font-weight:400; color:#222; }
    .eg-small{ font-size:13px; color:#666; }
    .eg-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    font-size: 14px;
    background-color: #f0f2f4;
    border-color: #d7d9db;
}
    .eg-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
    .eg-btn {
    appearance: none;
/*    border: 1px solid #ddd;*/
/*    background: #fff;*/
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    background-color: rgb(0 0 0 / 60%);
    color: #fff;
    border: 1px solid rgb(0 0 0 / 60%);
}
    .eg-btn[disabled]{ opacity:.5; cursor:not-allowed; }
    .eg-btn-primary {
    background: #46b972;
    border-color: #46b972;
    color: #fff;
    font-weight: 500;
}
    .eg-error{ color:#b00020; font-size:12px; margin-top:6px; display:none; }
    .eg-ok{ background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; padding:8px 10px; border-radius:10px; font-size:14px; display:none; }
    /* checkbox label black + semi-bold */
    .eg-privacy{ color:#000; font-weight:600; line-height:1.35; }
    .eg-privacy a {
    color: #46b972;
    text-decoration: none;
}
   button.btn.btn-warning.btn-next:hover {
    background: #46b972;
    color: #fff;
}
.underlined-text {
    border-bottom: 2px solid #ffebcb;
    padding-bottom: 2px;
    margin-bottom: 8px !important;
}

.btn{
    font-size: 14px;
    line-height: 1.7;
}
button.save-btn.top-save-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    float: unset;
    margin: 0;
}
/*@media ( max-width: 767px ){
    .step > div:not():has(.save-btn) {
        margin: 0;
        margin-top: -20px;
    }
    button.save-btn {
        float: unset;
        margin-bottom: -10px;
    }
}*/
.form-wrapper h5 + span, .form-wrapper h5 + p {
    display: block;
    margin-top: -8px !important;
}

@media ( min-width: 768px ){
.row-fill > div {
    padding: 0;
}

.row-fill {
    margin: 0;
    gap: 0rem;
}

.row-fill > div:not(:last-child) {
    padding-right: 12px;
}

.row-fill > div:not(:first-of-type) {
    padding-left: 12px;
}
}

.bottom-btns-wrap {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start ;
}
@media ( max-width: 576px ){
    button.save-btn.top-save-btn {
        top: 12px;
        right: 12px;
        padding: 5px 5px;
        font-size: 13px;
    }
    .btn{
        font-size: 13px;
        padding: 5px;
    }
    .form-title {
        text-align: left !important;
        padding-right: 118px;
        font-size: 18px;
        word-break: break-word;
}
.form-wrapper h4, .form-wrapper h5 {
    font-size: 18px;
}
body, form#buildingForm .step label {
    font-size: 13px;
}
}

.italic-font{
    font-size: 13px;
}

.min-h-auto{
    min-height: auto !important;
} 
.form-wrapper h5 + span, .form-wrapper h5 + p {
    display: block;
    margin-top: -8px !important;
    font-style: italic;
    color: #808080;
} 
.flatpickr-calendar .flatpickr-current-month{ 
    padding: 0 !important;
}
.flatpickr-calendar input[type="number"], .flatpickr-calendar input[type="text"], .flatpickr-calendar input[type="email"], .flatpickr-calendar input[type="tel"], select{
    min-height: 34px !important;
}
.flatpickr-calendar .flatpickr-next-month,
.flatpickr-calendar .flatpickr-prev-month{
    display: flex;
    align-items: center;
}   

@media ( max-width: 767px ){
    body{
        width: 100%;
        transform: scale(0.9);
        transform-origin: top;
    }
}

.btn-outline-warning {
    --bs-btn-color: #46b972;
    --bs-btn-border-color: #46b972;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #46b972;
    --bs-btn-hover-border-color: #46b972;
    --bs-btn-focus-shadow-rgb: 255,193,7;
    --bs-btn-active-bg: #46b972;
    --bs-btn-active-border-color: #46b972;
    --bs-btn-disabled-color: #46b972;
    --bs-btn-disabled-border-color: #46b972;
}
.input-group-text{
    font-size: 15px;
    line-height: 1;
}
button#lager-add, #lager-add1 {
    min-height: unset;
    padding: 0;
    width: 22px;
    height: 22px;
    line-height: 1;
}
@media ( max-width: 767px ){
    .form-control::placeholder {
    transform: scale(0.9);
    transform-origin: left;
}
.form-control, select,.input-group-text{
    font-size: 100% !important;
}
}
.leading-normal{
    line-height: 1;
}
.larger-row-flex {
    display: block !important;
    max-width: 100%;
}

.larger-row-flex .input-group.me-2 {
    max-width: 100% !important;
}
.mt-4 {
    margin-top: 40px !important;
}
.lager-remove-btn, #lager-remove1 {
    padding: 0;
    margin: 0;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-\[35px\] {
    margin-top: 35px !important;
}

span.anzeige_label {
    color: #46b972;
    text-decoration: underline;
}
#billing-info-text p {
    margin-bottom: 22px;
}

#billing-info-text {
    margin-bottom: 50px !important;
}
.btn-outline-secondary,.btn-outline-primary, form#buildingForm .step button.form-control {
    --bs-btn-color: #46b972;
    --bs-btn-border-color: #46b972;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #46b972;
    --bs-btn-hover-border-color: #46b972;
    --bs-btn-focus-shadow-rgb: 108,117,125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #46b972;
    --bs-btn-active-border-color: #46b972;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #46b972;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #46b972;
    --bs-gradient: none;
}
label.add-notes1, label.add-notes2, .add-notes3 {
    color: #189953 !important;
}
.input-group-text {
    background-color: #f0f2f4;
    border-color: #d7d9db;
}
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus,.form-control:focus, .form-select:focus {
   box-shadow: none;
}
form#buildingForm .step .form-control:focus, form#buildingForm .step .form-select:focus{
    border-color: #46b972;
}
span.flatpickr-day.today {
    border-color: transparent;
    background: #45b97126;
}
form#buildingForm .step button.form-control {
    background: transparent;
    border-color: var(--bs-btn-border-color);
}

form#buildingForm .step button.form-control:hover {
    background: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}
.flatpickr-day.selected {
    background: #45b971;
    border-color: #45b971;
}
a {
    color: #46b972;
}
.alert-warning {
    background: #dfe5ec36;
    border-color: rgb(179 31 31 / 80%);
    color: #b03200;
}
input#pm_agree {
    accent-color: #46b972 !important;
}

.form__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 13px;
}

.form__footer--logo {
    max-width: 177px;
}

.form__footer--logo svg {
    width: 100%;
    display: block;
}
@media ( max-width: 767px ){
    .form__footer {
        display: grid;
        gap: 10px;
    }
}