/* Modul Unterschrift | Frontend. Aufbau und Werte aus GA (29.09.2026), siehe assets/js/signature.js.
   Farben: --bfvpm-sig-primaer faellt auf die Elementor-Primaerfarbe zurueck, sonst auf das BFV-Blau.
   Die !important stehen gegen globale Theme-Regeln fuer button/img (seoes-child, blackforestmaster). */

/* an den Elementen selbst, nicht an :root — Elementor setzt --e-global-color-primary an body (.elementor-kit-N) */
.bfvpm-sig-feld, .bfvpm-sig { --bfvpm-sig-primaer: var(--e-global-color-primary, #1d4e81); }

/* --- alte Eingaben ausblenden (nur dort, wo der Baustein die Flaeche gesetzt hat) --- */
.bfvpm-sig-nf .bfv_unterschriftPlatzhalter,
.bfvpm-sig-nf .signatureArea,
.bfvpm-sig-nf .nf-field-description .sigInfo { display: none !important; }
.bfvpm-sig-nf .nf-field-description.bfvpm-sig-leer { display: none !important; }
.signatureArea { display: none !important; } /* KG: Overlay liegt als Elementor-Widget ausserhalb des Felds */
.bfvpm-sig-wpf .wpforms-signature-wrap,
.bfvpm-sig-wpf .savesig { display: none !important; }
.bfvpm-sig-form .wpforms-field.signatur-hinweis { display: none !important; } /* "Smartphone drehen" – steht jetzt im Blatt */

/* --- Flaeche im Formular: wie die Upload-Flaeche --- */
.bfvpm-sig-feld { display: flex !important; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box;
  width: 100%; min-height: 150px; margin: 4px 0 0; padding: 24px 18px !important; cursor: pointer; text-align: center;
  background: #f8fafc !important; border: 1.5px dashed #b9c6d4 !important; border-radius: 6px !important; box-shadow: none !important;
  color: #5b6675; font-size: 14px; font-weight: 400; line-height: 1.55; text-decoration: none !important;
  transition: border-color .15s, background-color .15s; -webkit-tap-highlight-color: transparent; }
/* Ninja Forms ordnet per flex-order: Beschriftung 5, Beschreibung 10, Element 15 — ohne order stuende die Flaeche ueber der Beschriftung */
.bfvpm-sig-nf .field-wrap > .bfvpm-sig-feld { order: 12; flex: 0 0 100%; }

/* ☠️ ALLES IN DER FLAECHE MIT !important. WPForms (classic, wpforms-full.min.css) setzt fuer JEDES Element im
   Formular zurueck: div.wpforms-container-full .wpforms-form * { position:static; width:auto; height:auto;
   background:none; border:0; margin:0; padding:0; font-size:100%; text-decoration:none; … } — spezifischer als
   eine Klasse. Am 29.09. auf MG live: der Kreis wurde 0x0 und nicht positioniert, sein ::before (inset:11px)
   spannte sich ueber das halbe Formular und fing die Klicks auf die AGB-Haekchen ab. */
.bfvpm-sig-feld { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 150px !important;
  margin: 4px 0 0 !important; padding: 24px 18px !important; cursor: pointer; text-align: center !important;
  background: #f8fafc !important; border: 1.5px dashed #b9c6d4 !important; border-radius: 6px !important; box-shadow: none !important;
  color: #5b6675 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.55 !important; text-decoration: none !important;
  float: none !important; overflow: hidden !important; transition: border-color .15s, background-color .15s; -webkit-tap-highlight-color: transparent; }
.bfvpm-sig-feld:hover { border-color: var(--bfvpm-sig-primaer) !important; background: #eef3f8 !important; background: color-mix(in srgb, var(--bfvpm-sig-primaer) 6%, #fff) !important; }
.bfvpm-sig-feld:focus-visible { outline: 3px solid #ffaf00 !important; outline-offset: 2px !important; }
.bfvpm-sig-feld__kreis { position: relative !important; display: block !important; flex: 0 0 auto !important; width: 44px !important; height: 44px !important;
  margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; overflow: hidden !important;
  background: #e3ecf5 !important; background: color-mix(in srgb, var(--bfvpm-sig-primaer) 13%, #fff) !important; }
/* Stift in der Primaerfarbe des Portals (JG ist braun-rot, GA/GB blau) — per Maske statt fester SVG-Farbe */
.bfvpm-sig-feld__kreis::before { content: "" !important; position: absolute !important; top: 11px !important; left: 11px !important; right: 11px !important; bottom: 11px !important;
  width: auto !important; height: auto !important; background: var(--bfvpm-sig-primaer) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3Cpath d='M13 20h8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3Cpath d='M13 20h8'/%3E%3C/svg%3E") center / contain no-repeat; }
.bfvpm-sig-feld__titel { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--bfvpm-sig-primaer) !important; }
.bfvpm-sig-feld__unter { display: block !important; margin: 2px 0 0 !important; padding: 0 !important; font-size: 14px !important; }
.bfvpm-sig-feld__bild { display: block !important; position: static !important; max-width: 100% !important; max-height: 130px !important; width: auto !important; height: auto !important;
  margin: 0 auto !important; padding: 0 !important; border: 0 !important; background: none !important; }
.bfvpm-sig-feld__bild[hidden] { display: none !important; }
.bfvpm-sig-feld__aendern { display: none !important; margin: 12px 0 0 !important; padding: 10px 18px !important; border: 1px solid #cfd8e2 !important; border-radius: 6px !important;
  background: #fff !important; color: var(--bfvpm-sig-primaer) !important; font-size: 15px !important; font-weight: 600 !important; width: auto !important; height: auto !important; }
.bfvpm-sig-feld:hover .bfvpm-sig-feld__aendern { border-color: var(--bfvpm-sig-primaer) !important; }
.bfvpm-sig-feld.da { min-height: 0 !important; padding: 16px 18px !important; }
.bfvpm-sig-feld.da .bfvpm-sig-feld__aendern { display: inline-block !important; }
.bfvpm-sig-feld.da .bfvpm-sig-feld__kreis,
.bfvpm-sig-feld.da .bfvpm-sig-feld__titel,
.bfvpm-sig-feld.da .bfvpm-sig-feld__unter { display: none !important; }

/* --- Blatt --- */
html.bfvpm-sig-offen, html.bfvpm-sig-offen body { overflow: hidden !important; }
.bfvpm-sig { position: fixed; inset: 0; z-index: 100000; background: rgba(15, 30, 45, .55); display: none; align-items: center; justify-content: center;
  overscroll-behavior: contain; font-size: 16px; line-height: 1.4; }
.bfvpm-sig.an { display: flex; }
/* iOS: langes Druecken beim Unterschreiben markierte sonst Text */
.bfvpm-sig, .bfvpm-sig * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
.bfvpm-sig__box { background: #fff; border-radius: 12px; width: min(760px, 94vw); display: flex; flex-direction: column; padding: 18px 20px 20px; color: #1d2b3a; font-family: inherit; }
.bfvpm-sig__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bfvpm-sig__titel { font-size: 20px !important; font-weight: 700; margin: 0 !important; line-height: 1.2; color: #1d2b3a; }
.bfvpm-sig button.bfvpm-sig__zu { background: none !important; border: 0 !important; color: #5f7d9c !important; font-size: 16px !important; font-weight: 600;
  padding: 8px 4px !important; cursor: pointer; min-height: 44px; box-shadow: none !important; width: auto !important; margin: 0 !important; text-transform: none !important; }
.bfvpm-sig__tipp { margin: 4px 0 12px !important; font-size: 15px !important; color: #4a5b6c; line-height: 1.4; padding: 0 !important; }
.bfvpm-sig__feld { position: relative; height: 300px; border: 2px solid #cfd8e2; border-radius: 10px; background: #fff; touch-action: none; overflow: hidden; }
.bfvpm-sig__feld.hat { border-color: var(--bfvpm-sig-primaer); }
.bfvpm-sig__feld canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: crosshair; touch-action: none; z-index: 2; max-width: none !important; }
.bfvpm-sig__linie { position: absolute; left: 6%; right: 6%; bottom: 26%; border-bottom: 2px solid #9fb0c2; pointer-events: none; z-index: 1; }
.bfvpm-sig__linie span { position: absolute; left: 0; bottom: 4px; font-size: 22px; line-height: 1; color: #9fb0c2; font-weight: 700; }
.bfvpm-sig__leer { position: absolute; left: 0; right: 0; bottom: calc(26% + 34px); text-align: center; font-size: 22px; color: #b3c0cd; pointer-events: none; z-index: 1; transition: opacity .15s; }
.bfvpm-sig__feld.hat .bfvpm-sig__leer { opacity: 0; }
.bfvpm-sig__fehler { margin: 10px 0 0 !important; color: #b3261e; font-size: 15px; font-weight: 600; }
.bfvpm-sig__fehler[hidden] { display: none !important; }
.bfvpm-sig__dreh { display: none; gap: 8px; align-items: center; justify-content: center; margin: 12px 0 0 !important; padding: 10px 12px !important;
  font-size: 15px; font-weight: 600; line-height: 1.35; color: #3d3000; background: #fff3c4; border: 1px solid #f0c419; border-radius: 8px; }
.bfvpm-sig__dreh svg { flex: 0 0 auto; }
.bfvpm-sig__knoepfe { display: flex; gap: 10px; margin-top: 14px; }
.bfvpm-sig button.bfvpm-sig__neu, .bfvpm-sig button.bfvpm-sig__ok { min-height: 52px; border-radius: 8px !important; font-size: 17px !important; font-weight: 700;
  cursor: pointer; padding: 10px 16px !important; box-shadow: none !important; line-height: 1.2; margin: 0 !important; text-transform: none !important; letter-spacing: normal; }
.bfvpm-sig button.bfvpm-sig__neu { flex: 0 0 auto; width: auto !important; background: #fff !important; color: #1d2b3a !important; border: 2px solid #cfd8e2 !important; }
.bfvpm-sig button.bfvpm-sig__ok { flex: 1 1 auto; width: auto !important; background: var(--bfvpm-sig-primaer) !important; color: #fff !important; border: 2px solid var(--bfvpm-sig-primaer) !important; }
.bfvpm-sig button.bfvpm-sig__ok[disabled] { opacity: .4; cursor: not-allowed; }
.bfvpm-sig button:focus-visible { outline: 3px solid #f0a500; outline-offset: 2px; }

/* Handy: Vollbild */
@media (max-width: 767px), (max-height: 520px) {
  .bfvpm-sig { background: #fff; align-items: stretch; }
  .bfvpm-sig__box { width: 100%; height: 100%; height: 100dvh; border-radius: 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
  .bfvpm-sig__feld { flex: 1 1 auto; height: auto; min-height: 180px; }
}
@media (max-width: 767px) and (orientation: portrait) {
  .bfvpm-sig:not(.bfvpm-sig--maus) .bfvpm-sig__dreh { display: flex; }
  .bfvpm-sig__feld { flex: 0 0 auto; height: min(52vh, 380px); }
  .bfvpm-sig__dreh { order: 9; text-align: center; }
}
@media (max-height: 520px) {
  .bfvpm-sig__tipp { display: none; }
  .bfvpm-sig__titel { font-size: 17px !important; }
  .bfvpm-sig__knoepfe { margin-top: 8px; }
  .bfvpm-sig button.bfvpm-sig__neu, .bfvpm-sig button.bfvpm-sig__ok { min-height: 44px; }
}