/* SVASS SEPA-Mandat – Frontend */
.svse-wrap { max-width: 720px; margin: 0 auto; font-family: system-ui, sans-serif; }
.svse-row { margin: 0 0 14px; display: flex; flex-direction: column; }
.svse-label { font-weight: 600; margin-bottom: 4px; }
.svse-req { color: #c0392b; }
.svse-wrap input[type=text],
.svse-wrap input[type=email],
.svse-wrap input[type=date],
.svse-wrap textarea {
  padding: 8px 10px; border: 1px solid #bbb; border-radius: 4px; font: inherit;
}
.svse-boxed { letter-spacing: 4px; text-transform: uppercase; }
.svse-hint { color: #666; font-size: 12px; margin-top: 2px; }
.svse-signature { border: 1px dashed #999; padding: 8px; background: #fff; }
.svse-signature-canvas { display: block; width: 100%; max-width: 600px; height: 180px; background: transparent; touch-action: none; cursor: crosshair; }
.svse-sig-clear { margin-top: 6px; }
.svse-actions { text-align: right; margin-top: 20px; }
.svse-submit { padding: 10px 18px; background: #005ea8; color: #fff; border: 0; border-radius: 4px; font-weight: 600; cursor: pointer; }
.svse-error-msg { color: #c0392b; font-size: 13px; margin-top: 2px; }
.svse-row.has-error input,
.svse-row.has-error textarea { border-color: #c0392b; }

/* WICHTIG: hidden-Attribut schlägt display:flex — sonst wäre das Modal von Anfang an sichtbar. */
.svse-modal[hidden] { display: none !important; }
.svse-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.svse-success[hidden] { display: none !important; }
.svse-modal-inner { background: #fff; padding: 22px; border-radius: 6px; max-width: 420px; width: 90%; }
.svse-modal input { width: 100%; padding: 10px; border: 1px solid #aaa; border-radius: 4px; margin: 8px 0 14px; }
.svse-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.svse-modal-cancel { background: #eee; color: #333; border: 0; padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.svse-modal-send { background: #2b7a2b; color: #fff; border: 0; padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.svse-success { margin-top: 14px; padding: 14px; background: #eaf6ea; border: 1px solid #cbe4cb; border-radius: 4px; }
.svse-download-btn { display: inline-block; margin-top: 6px; padding: 10px 16px; background: #2b7a2b; color: #fff !important; text-decoration: none; border-radius: 4px; font-weight: 600; }
.svse-download-btn:hover { background: #236823; }

/* HTML-Textblock — dezenter Infokasten zwischen den Feldern */
.svse-row.svse-type-html { display: block; }
.svse-html-block { padding: 10px 14px; background: #f5f7fa; border-left: 4px solid #2b7a2b; border-radius: 4px; margin: 4px 0 14px; }
.svse-html-block p:last-child { margin-bottom: 0; }

/* Vorschau-Schritt vor dem Absenden */
.svse-preview[hidden] { display: none !important; }
.svse-preview { margin: 8px 0 16px; padding: 16px; background: #fafafa; border: 1px solid #ddd; border-radius: 6px; }
.svse-preview-title { margin: 0 0 4px; }
.svse-preview-hint { color: #444; margin: 0 0 12px; }
.svse-preview-frame { border: 1px solid #ccc; background: #fff; }
.svse-preview-iframe { display: block; width: 100%; height: 780px; border: 0; }
.svse-preview-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; flex-wrap: wrap; }
.svse-preview-back { background: #eee; color: #333; border: 0; padding: 10px 16px; border-radius: 4px; cursor: pointer; font-weight: 600; }
.svse-preview-confirm { background: #2b7a2b; color: #fff; border: 0; padding: 10px 18px; border-radius: 4px; cursor: pointer; font-weight: 600; }
.svse-preview-confirm:hover { background: #236823; }
@media (max-width: 640px) {
  .svse-preview-iframe { height: 520px; }
  .svse-preview-actions { flex-direction: column-reverse; }
  .svse-preview-actions button { width: 100%; }
}

/* Optionale Vor-/Nach-Texte (Reiter „Mitteilungen").
   Diese beiden Blöcke sollen die volle Fensterbreite nutzen und aus dem
   720-px-Container ausbrechen. Trick: 98 vw breit, mittig zentriert. */
.svse-intro,
.svse-success-intro {
    box-sizing: border-box;
    width: 93vw;
    max-width: 93vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 22px;
    border-radius: 4px;
}
.svse-intro         { margin: 0 auto 18px; background: #f5f9ff; border: 1px solid #cfe0f4; }
.svse-success-intro { margin: 18px auto 0;  background: #fff8e5; border: 1px solid #f0d68a; }
.svse-success-intro[hidden] { display: none !important; }

@media (max-width: 640px) {
    .svse-intro,
    .svse-success-intro {
        width: 90vw;
        max-width: 90vw;
        padding: 12px 14px;
        font-size: 0.92rem;
        line-height: 1.4;
    }
    .svse-intro h1, .svse-success-intro h1 { font-size: 1.25rem; }
    .svse-intro h2, .svse-success-intro h2 { font-size: 1.1rem; }
    .svse-intro h3, .svse-success-intro h3 { font-size: 1rem; }
}