/* =========================
   SPA Frontend – DROP-IN
   ========================= */

.spa-wrap { margin: 24px auto; padding: 30px; border: 1px solid #e8e8e8; border-radius: 14px; background:#fff; }
.spa-title { margin: 0 0 14px 0; }
.spa-step-head { margin-bottom: 12px; }
.spa-step-kicker { font-size: 12px; color:#666; }
.spa-step-title { margin: 6px 0 0 0; }

/* Inputs */
.spa-label { display:block; font-weight:600; margin-bottom:6px; }
.spa-req { color:#c00; }
.spa-hint { font-size: 12px; color:#666; margin-top:6px; }

.spa-input, .spa-textarea, .spa-select {
  width:100%;
  padding:10px 12px;
  border:1px solid #d9d9d9;
  border-radius:10px;
  box-sizing:border-box;
}
.spa-textarea { min-height:110px; }

/* Heading */
.spa-heading {
  margin-top: 18px;
  padding-top: 10px;
  border-top:1px dashed #ddd;
  font-size: 16px;
  font-weight: 800;
}

/* Nav */
.spa-nav { display:flex; gap:10px; margin-top: 14px; }
.spa-btn { appearance:none; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; background:#111; color:#fff; }
.spa-btn:hover { opacity:.92; }
.spa-btn-lite { background:#f2f2f2; color:#111; border:1px solid #ddd; }

.spa-msg { margin-top:12px; color:#0a5; }
.spa-msg.is-error { color:#b00020; }

/* Signature */
.spa-signature { border:1px dashed #ccc; border-radius:12px; padding:12px; }
.spa-sign-canvas { width:100%; height:auto; border:1px solid #ddd; border-radius:10px; background:#fff; }
.spa-sign-actions { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.spa-sign-upload input { display:none; }

/* Errors */
.spa-error {
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  background:#fff3f3;
  border:1px solid #ffd0d0;
  color:#8a0a0a;
  font-size:12px;
}
.spa-field.has-error .spa-input,
.spa-field.has-error .spa-textarea,
.spa-field.has-error .spa-select {
  border-color:#d33;
  box-shadow:0 0 0 2px rgba(211,51,51,.08);
}

/* =========================
   GRID (12 Spalten) – EINZIGE WAHRHEIT
   ========================= */

.spa-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  width:100%;
}

/* Wichtig: Felder im Grid bekommen KEIN eigenes margin – spacing kommt über gap */
.spa-grid > .spa-field,
.spa-grid > .spa-heading,
.spa-grid > .spa-divider,
.spa-grid > .spa-spacer{
  box-sizing: border-box;
  margin: 0;         /* killt dein altes .spa-field { margin:14px 0 } im Grid-Kontext */
  min-width: 0;
}

/* Außerhalb eines .spa-grid dürfen spa-field weiterhin Luft haben */
.spa-field { margin: 14px 0; }

/* Wenn spa-field direkt im Grid liegt: margin weg */
.spa-grid > .spa-field { margin: 0; }

/* Spalten-Spans */
.spa-col{ grid-column: span 12; }
.spa-col-12{ grid-column: span 12; }
.spa-col-11{ grid-column: span 11; }
.spa-col-10{ grid-column: span 10; }
.spa-col-9 { grid-column: span 9; }
.spa-col-8 { grid-column: span 8; }
.spa-col-7 { grid-column: span 7; }
.spa-col-6 { grid-column: span 6; }
.spa-col-5 { grid-column: span 5; }
.spa-col-4 { grid-column: span 4; }
.spa-col-3 { grid-column: span 3; }
.spa-col-2 { grid-column: span 2; }
.spa-col-1 { grid-column: span 1; }

/* Mobile: alles untereinander */
@media (max-width: 700px){
  .spa-col,
  .spa-col-1,.spa-col-2,.spa-col-3,.spa-col-4,.spa-col-5,.spa-col-6,
  .spa-col-7,.spa-col-8,.spa-col-9,.spa-col-10,.spa-col-11,.spa-col-12{
    grid-column: span 12 !important;
  }
}

/* =========================
   Repeat
   ========================= */

.spa-repeat-list { display:flex; flex-direction:column; gap:10px; }
.spa-repeat-item { border:1px solid #eee; border-radius:12px; padding:12px; background:#fafafa; }
.spa-repeat-item__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.spa-repeat-item__title { font-weight:800; }

/* Repeat-Innerbox */
.spa-repeat-item__fields {
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:10px;
}

/* Innerhalb repeat-item__fields ist wieder ein .spa-grid -> margins bleiben weg */
.spa-repeat-add { margin-top:10px; }

/* =========================
   Divider / Spacer (neue Formelemente)
   ========================= */

.spa-divider{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 4px 0;
}
.spa-divider::before{
  content:"";
  display:block;
  height:1px;
  width:100%;
  border-top:1px solid #ddd;
}
.spa-divider-dashed::before{ border-top-style:dashed; }
.spa-divider-solid::before{ border-top-style:solid; }

.spa-divider__label{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color:#666;
  padding: 2px 10px;
  border:1px solid #e6e6e6;
  border-radius: 999px;
  background:#fff;
  transform: translateY(-0.5px);
}

.spa-spacer{ width:100%; }
.spa-spacer-xs{ height: 6px; }
.spa-spacer-sm{ height: 10px; }
.spa-spacer-md{ height: 16px; }
.spa-spacer-lg{ height: 24px; }
.spa-spacer-xl{ height: 36px; }

/* =========================
   Checkbox / Radio – größer & schöner
   ========================= */

/* Container für Gruppen */
.spa-choice{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Baseline */
.spa-choice-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
  line-height:1.35;
}

/* Native Inputs verstecken (aber zugänglich lassen) */
.spa-choice-item input[type="checkbox"],
.spa-choice-item input[type="radio"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Custom UI */
.spa-choice-ui{
  flex: 0 0 22px;
  width:22px;
  height:22px;
  border-radius: 7px;          /* checkbox default */
  border: 2px solid #cfcfcf;
  background:#fff;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 2px;
}

/* Radio rund */
.spa-choice-item--radio .spa-choice-ui{
  border-radius: 999px;
}

/* Label */
.spa-choice-label{
  display:block;
  font-size:14px;
  color:#111;
}

/* Hover */
.spa-choice-item:hover .spa-choice-ui{
  border-color:#999;
}

/* Focus */
.spa-choice-item input:focus + .spa-choice-ui{
  box-shadow: 0 0 0 3px rgba(17,17,17,.10);
  border-color:#111;
}

/* Checked – Checkbox */
.spa-choice-item--check input:checked + .spa-choice-ui{
  border-color:#111;
  background:#111;
}
.spa-choice-item--check input:checked + .spa-choice-ui::after{
  content:"";
  width:10px;
  height:6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  margin-top:-1px;
}

/* Checked – Radio */
.spa-choice-item--radio input:checked + .spa-choice-ui{
  border-color:#111;
}
.spa-choice-item--radio input:checked + .spa-choice-ui::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#111;
}

/* Optionaler Caption-Style (wenn du Label + Radios getrennt renderst) */
.spa-choice-caption{
  font-size: 12px;
  color:#666;
  margin-top: 6px;
}