/* Public form: mobile friendly, modern grey/blue (with design settings) */
.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{
  width:100%;
  max-width: var(--mkf-max-width, 920px);
  margin:14px auto;
  padding:14px;
  background: var(--mkf-bg, #fff);
  color: var(--mkf-text, #0b1f35);
  border:1px solid var(--mkf-card-border, #e4e8ef);
  border-radius:18px;
  box-shadow:0 8px 18px rgba(16,24,40,.06);
  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:18px}
.mkf-draft-statusline{display:flex;justify-content:flex-end;margin-top:10px}
.mkf-draft-status{font-size:13px;color:rgba(11,31,53,.65)}
.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:10px;
}
.mkf-field-wrap{
  position:relative;
  min-width:0;
  padding:10px;
  border:1px solid var(--mkf-card-border, #e4e8ef);
  border-radius:14px;
  background: var(--mkf-card-bg, #fbfcff);
}
.mkf-label{display:block;font-weight:600;margin-bottom:6px;font-size:15px;line-height:1.2}
.mkf-input{display:block;width:100%;min-width:0;padding:10px 11px;border-radius:10px;border:1px solid var(--mkf-input-border, #d7deea);background: var(--mkf-input-bg, #fff);color:inherit;font-size:15px;line-height:1.2}
.mkf-input:focus{outline:2px solid var(--mkf-accent, #2271b1);border-color: var(--mkf-accent, #2271b1)}
.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:rgba(11,31,53,.65);margin-left:28px}
.mkf-required{position:absolute;top:8px;right:10px;color:#b42318;font-weight:800}
.mkf-error{margin-top:8px;color:#b42318;font-size:13px}

.mkf-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mkf-btn{border:0;border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:700;font-size:14px;line-height:1.2}
.mkf-primary{background: var(--mkf-accent, #2271b1);color:#fff}
.mkf-secondary{background:#eef2f6;color:#0b1f35;border:1px solid var(--mkf-input-border, #d7deea)}
.mkf-next{background:#0b1f35;color:#fff}
.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:10px;margin:12px auto;max-width:100%}
  .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:6px;align-items:center}
.mkf-dot{width:10px;height:10px;border-radius:999px;background:rgba(215,222,234,1);display:inline-block}
.mkf-dot.is-active{background: var(--mkf-accent, #2271b1)}

/* 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;
}