/* Public form: mobile friendly, modern grey/blue (with design settings)
   - clean spacing + soft shadows
   - accessible focus states
   - subtle micro-interactions (hover/active)
*/
.mkf-wrap,
.mkf-wrap * ,
.mkf-wrap *::before,
.mkf-wrap *::after{box-sizing:border-box}

/* Layout width wrapper (per-form) */
.mkf-outer{width:100%;}
.mkf-width-max .mkf-wrap{--mkf-max-width: 920px;}
.mkf-width-wide .mkf-wrap{--mkf-max-width: 1280px;}
.mkf-width-custom .mkf-wrap{--mkf-max-width: 1100px;}

/* Break out of theme content width for wide/custom/full (prevents being limited by the theme container) */
.mkf-width-full,
.mkf-width-wide,
.mkf-width-custom{
  /* Desktop breakout: extend beyond the theme container.
     NOTE: 100vw can be wider than the visible viewport on mobile (scrollbar / safe-area),
     which may cause horizontal overflow. We neutralize this on small screens below. */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow-x:hidden;
}

.mkf-width-full .mkf-wrap{max-width:none;width:100%;margin-left:0;margin-right:0;}
.mkf-width-wide .mkf-wrap,
.mkf-width-custom .mkf-wrap{width:100%;margin-left:auto;margin-right:auto;}

.mkf-wrap{
  /* Design tokens */
  --mkf-radius: 20px;
  --mkf-radius-sm: 14px;
  --mkf-shadow: 0 22px 60px rgba(16,24,40,.12);
  --mkf-shadow-sm: 0 14px 34px rgba(16,24,40,.10);
  /* gets overwritten in JS when accent is set via the Builder */
  --mkf-accent-soft: rgba(34,113,177,.18);
  --mkf-muted: rgba(11,31,53,.62);
  --mkf-input-fs: 15px;

  width:100%;
  max-width: var(--mkf-max-width, 920px);
  margin:16px auto;
  padding:22px;
  background: var(--mkf-bg, #fff);
  color: var(--mkf-text, #0b1f35);
  border:1px solid var(--mkf-card-border, #e4e8ef);
  border-radius: var(--mkf-radius);
  box-shadow: var(--mkf-shadow-sm);
  font-family: var(--mkf-font, inherit);
  font-weight: var(--mkf-weight, 400);
  font-style: var(--mkf-style, normal);
}
.mkf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mkf-title{margin:0;font-size:22px;line-height:1.15;letter-spacing:-.012em}
.mkf-draft-statusline{display:flex;justify-content:flex-end;margin-top:10px}
.mkf-draft-status{font-size:13px;color:var(--mkf-muted)}
.mkf-draft-status a{margin-left:6px}
.mkf-form{margin-top:14px}
.mkf-page{display:none}
.mkf-page.mkf-grid{
  display:none;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap:16px;
}
.mkf-field-wrap{
  position:relative;
  min-width:0;
  padding:0;
  border:0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:none;
}
.mkf-field-wrap:hover{box-shadow:none;transform:none}
.mkf-label{display:block;font-weight:700;margin-bottom:8px;font-size:12px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--mkf-muted)}
.mkf-input{display:block;width:100%;min-width:0;padding:14px 14px;border-radius:14px;border:1px solid var(--mkf-input-border, #d7deea);background: var(--mkf-input-bg, #fff);color:inherit;font-size:var(--mkf-input-fs, 15px);line-height:1.2;box-shadow: inset 0 1px 1px rgba(16,24,40,.06);transition:border-color .15s ease, box-shadow .15s ease}
.mkf-input::placeholder{color:rgba(11,31,53,.42)}
.mkf-input:focus{outline:none;border-color: var(--mkf-accent, #2271b1);box-shadow: 0 0 0 3px var(--mkf-accent-soft)}
.mkf-input:hover{border-color: rgba(11,31,53,.22)}
.mkf-radio{display:flex;flex-direction:column;gap:8px}
.mkf-choice{display:flex;gap:10px;align-items:center}
.mkf-consent-box{display:flex;flex-direction:column;gap:6px}
.mkf-consent{align-items:flex-start}
.mkf-consent input{margin-top:3px}
.mkf-consent-text{line-height:1.25}
.mkf-consent-text a{color:var(--mkf-accent, #2271b1);text-decoration:underline}
.mkf-hint{font-size:13px;color:var(--mkf-muted);margin-left:28px}
.mkf-required{position:absolute;top:2px;right:0;color:#b42318;font-weight:900;font-size:14px;line-height:1}
.mkf-error{margin-top:8px;color:#b42318;font-size:13px}

.mkf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;justify-content:flex-end}
.mkf-btn{border:0;border-radius:12px;padding:12px 18px;cursor:pointer;font-weight:800;font-size:var(--mkf-input-fs, 15px);line-height:1.1;display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;box-shadow: 0 10px 22px rgba(16,24,40,.10)}
.mkf-btn:active{transform: translateY(1px)}
.mkf-primary{background: var(--mkf-accent, #2271b1);color:#fff}
.mkf-primary:hover{filter:brightness(.96);box-shadow: 0 10px 22px rgba(16,24,40,.12)}
.mkf-secondary{background:#f4f7fb;color:#0b1f35;border:1px solid var(--mkf-input-border, #d7deea);box-shadow:none}
.mkf-secondary:hover{filter:brightness(.98);box-shadow: 0 10px 22px rgba(16,24,40,.10)}
.mkf-next{background:#0b1f35;color:#fff;box-shadow: 0 12px 26px rgba(11,31,53,.18)}
.mkf-next:hover{filter:brightness(1.05);box-shadow: 0 10px 22px rgba(16,24,40,.14)}
.mkf-small{padding:8px 10px;border-radius:12px;font-weight:600}
.mkf-danger{background:#b42318;color:#fff}
.mkf-result{margin-top:12px;font-weight:700}
.mkf-result.ok{color:#067647}
.mkf-result.err{color:#b42318}

.mkf-signature{display:flex;flex-direction:column;gap:10px}
.mkf-sig-canvas{width:100%;height:auto;border:1px dashed rgba(196,207,222,1);border-radius:14px;background: var(--mkf-input-bg, #fff);touch-action:none}
.mkf-sig-tools{display:flex;gap:10px}

.mkf-repeater-row{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.mkf-repeater-row .mkf-input{flex:1}

/* Responsive: on tablets allow max. 2 columns to avoid too narrow fields */
@media (max-width: 900px){
  .mkf-page.mkf-grid{gap:8px}
  .mkf-col-1,.mkf-col-2,.mkf-col-3,.mkf-col-4,.mkf-col-5{grid-column: span 6}
  .mkf-col-7,.mkf-col-8,.mkf-col-9,.mkf-col-10,.mkf-col-11{grid-column: span 12}
}

/* Responsive: collapse 2-column fields a bit earlier (small tablets) */
@media (max-width: 820px){
  .mkf-col-6{grid-column: span 12}
}

@media (max-width: 640px){
  /* Prevent horizontal overflow on mobile when the form is configured as full/wide/custom.
     On small screens we don't need the 100vw breakout, and it can introduce a few pixels
     of overflow (esp. iOS/Android address bar, scrollbars, safe areas). */
  .mkf-width-full,
  .mkf-width-wide,
  .mkf-width-custom{
    width:100%;
    margin-left:0;
    margin-right:0;
  }

  .mkf-wrap{padding:14px;margin:12px auto;max-width:100%}
  .mkf-actions{justify-content:stretch}
  .mkf-btn{width:100%;justify-content:center}
  .mkf-field-wrap{grid-column: span 12 !important}
}

/* Extra safeguard: never allow the public form wrapper to exceed the viewport width */
.mkf-outer,
.mkf-wrap{max-width:100%}

.mkf-locker{max-width:520px;margin:18px auto;padding:14px;background: var(--mkf-bg, #fff);border:1px solid var(--mkf-card-border, #e4e8ef);border-radius:18px}
.mkf-locker input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--mkf-input-border, #d7deea);margin-top:6px;background: var(--mkf-input-bg, #fff)}
.mkf-locker button{margin-top:10px;border:0;border-radius:14px;padding:12px 14px;background: var(--mkf-accent, #2271b1);color:#fff;font-weight:700;cursor:pointer}
.mkf-locked{max-width:520px;margin:18px auto;padding:14px;border:1px solid var(--mkf-card-border, #e4e8ef);border-radius:18px;background: var(--mkf-bg, #fff)}

.mkf-progress{display:flex;gap:8px;align-items:center;margin-left:auto}
.mkf-dot{width:12px;height:12px;border-radius:999px;background:rgba(215,222,234,1);display:inline-block;box-shadow: inset 0 0 0 1px rgba(11,31,53,.08)}
.mkf-dot.is-active{background: var(--mkf-accent, #2271b1);box-shadow: 0 0 0 3px var(--mkf-accent-soft)}

/* 12-col layout helpers (Breite pro Feld) */
.mkf-col-12{grid-column: span 12}
.mkf-col-11{grid-column: span 11}
.mkf-col-10{grid-column: span 10}
.mkf-col-9{grid-column: span 9}
.mkf-col-8{grid-column: span 8}
.mkf-col-7{grid-column: span 7}
.mkf-col-6{grid-column: span 6}
.mkf-col-5{grid-column: span 5}
.mkf-col-4{grid-column: span 4}
.mkf-col-3{grid-column: span 3}
.mkf-col-2{grid-column: span 2}
.mkf-col-1{grid-column: span 1}


/* Honeypot: hidden from humans */
.mkf-hp-wrap{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* reCAPTCHA spacing */
.mkf-recaptcha{
  margin: 14px 0 10px 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mkf-field-wrap,
  .mkf-btn,
  .mkf-input{transition:none !important}
  .mkf-field-wrap:hover{transform:none}
}

/* Submit button hover fill animation (per form via data-submit-fill="1") */
.mkf-wrap[data-submit-fill="1"] .mkf-primary{
  position:relative;
  overflow:hidden;
  background: var(--mkf-submit-bg, var(--mkf-accent, #2271b1));
  color: var(--mkf-submit-text, #ffffff);
}
.mkf-wrap[data-submit-fill="1"] .mkf-primary:hover{
  filter:none;
  color: var(--mkf-submit-hover-text, #ffffff);
}
.mkf-wrap[data-submit-fill="1"] .mkf-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--mkf-submit-hover-bg, #0b1f35);
  transform: scaleX(0);
  transform-origin: var(--mkf-submit-origin, left);
  transition: transform var(--mkf-submit-dur, 320ms) cubic-bezier(.2,.8,.2,1);
  z-index:0;
}
.mkf-wrap[data-submit-fill="1"] .mkf-primary:hover::before,
.mkf-wrap[data-submit-fill="1"] .mkf-primary:focus-visible::before{
  transform: scaleX(1);
}
.mkf-wrap[data-submit-fill="1"] .mkf-primary .mkf-btn-label{
  position:relative;
  z-index:1;
}
.mkf-wrap[data-submit-fill="1"] .mkf-primary:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--mkf-accent-soft), 0 10px 22px rgba(16,24,40,.12);
}

@media (prefers-reduced-motion: reduce){
  .mkf-wrap[data-submit-fill="1"] .mkf-primary::before{transition:none !important}
}

/* ---------------------------------------------------------
   Telephone country selector (intl-tel-input)
   - shows flag + dial code (default: DE +49)
--------------------------------------------------------- */
.mkf-wrap .iti{width:100%;display:block}
.mkf-wrap .iti input[type="tel"].mkf-input{padding-left:90px}
.mkf-wrap .iti__selected-country,
.mkf-wrap .iti__selected-country-container{border-radius:14px 0 0 14px}
/* Match dial code typography to input */
.mkf-wrap .iti__selected-country{font-family:inherit;font-size:var(--mkf-input-fs, 15px);line-height:1.2;color:inherit}
.mkf-wrap .iti__selected-dial-code{font-family:inherit;font-size:var(--mkf-input-fs, 15px);line-height:1.2;color:inherit}
.mkf-wrap .iti__country-list{z-index:99999}