/* couture margot – cm-tools (Formular, Sticky, interaktive Widgets). Nutzt die Theme-Variablen (--cm-*). */

/* ---------------- Anfrage-Formular ---------------- */
.cm-form{ background:#f4fae6; border:1px solid #d8e6bb; border-radius:16px; padding:28px; box-shadow:0 18px 50px rgba(22,33,28,.10); }
.cm-field{ display:block; margin-bottom:16px; }
.cm-field > span{ display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; color:var(--cm-ink,#111511); }
.cm-field input, .cm-field select, .cm-field textarea{
  width:100%; padding:12px 14px; border:1.5px solid #c4d1b0; border-radius:10px; font:inherit; background:#fff; color:var(--cm-ink,#111511);
}
.cm-field input::placeholder, .cm-field textarea::placeholder{ color:#8a9382; }
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus{ outline:none; border-color:var(--cm-green,#99FF33); box-shadow:0 0 0 3px rgba(153,255,51,.35); }
.cm-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cm-form-hint{ font-size:.82rem; color:var(--cm-muted,#5c6b63); margin:4px 0 16px; }
.cm-hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.cm-form .cm-btn{ width:100%; text-align:center; border:0; }
.cm-form-ok{ background:var(--cm-green-soft,#ECFFCF); border:1px solid #cdf29a; color:var(--cm-ink,#111511); padding:20px 24px; border-radius:16px; font-weight:600; }
.cm-form-err{ background:#fdeceb; border:1px solid #f5c6c2; color:#a12a22; padding:16px 20px; border-radius:12px; margin-bottom:16px; }
@media(max-width:560px){ .cm-field-row{ grid-template-columns:1fr; } }

/* ---------------- Sticky WhatsApp / Anruf ---------------- */
.cm-sticky{ position:fixed; right:16px; bottom:16px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.cm-sticky-btn{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; font-weight:700; font-size:.9rem; box-shadow:0 10px 26px rgba(0,0,0,.22); transition:transform .15s; }
.cm-sticky-btn:hover{ transform:translateY(-2px); }
.cm-sticky-wa{ background:#25d366; color:#fff; }
.cm-sticky-wa:hover{ color:#fff; }
.cm-sticky-tel{ background:var(--cm-green,#99FF33); color:var(--cm-ink,#111511); border:2px solid var(--cm-ink,#111511); }
.cm-sticky-tel:hover{ color:var(--cm-ink,#111511); }
@media(max-width:560px){ .cm-sticky-btn span{ display:none; } .cm-sticky-btn{ padding:14px; } }

/* ---------------- Interaktive Tools ---------------- */
.cm-tool{ background:#fff; border:1px solid var(--cm-line,#e5ece8); border-radius:16px; padding:28px; box-shadow:0 18px 50px rgba(22,33,28,.09); max-width:820px; margin:0 auto; }
.cm-tool h3{ margin:0 0 6px; font-size:1.3rem; }
.cm-tool-lead{ color:var(--cm-muted,#5c6b63); margin:0 0 18px; }
.cm-calc-select{ width:100%; padding:12px 14px; border:1.5px solid var(--cm-line,#e5ece8); border-radius:10px; font:inherit; margin-bottom:12px; background:#fff; }
.cm-calc-express{ display:flex; gap:8px; align-items:center; font-size:.92rem; color:var(--cm-ink-2,#2b3a32); }
.cm-calc-out{ margin-top:18px; padding-top:18px; border-top:1px solid var(--cm-line,#e5ece8); }
.cm-calc-price{ font-size:2rem; font-weight:800; color:var(--cm-ink,#111511); }
.cm-calc-price span{ color:var(--cm-muted,#5c6357); }
.cm-calc-price span{ font-size:1rem; font-weight:600; color:var(--cm-muted,#5c6b63); }
.cm-calc-time{ color:var(--cm-ink-2,#2b3a32); font-weight:600; margin-top:2px; }
.cm-calc-hint{ color:var(--cm-muted,#5c6b63); font-size:.9rem; margin:8px 0 14px; }
.cm-stain-steps{ margin:14px 0 0 18px; list-style:decimal; }
.cm-stain-steps li{ margin:0 0 8px; }
.cm-stain-warn{ background:var(--cm-gold-soft,#f6efdd); border-radius:10px; padding:12px 16px; margin-top:14px; font-size:.92rem; }
.cm-stain-cta{ margin-top:14px; font-weight:600; }
.cm-symbol-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.cm-symbol{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border:1.5px solid var(--cm-line,#e5ece8); border-radius:12px; background:#fff; cursor:pointer; transition:border-color .15s,transform .15s; }
.cm-symbol:hover{ transform:translateY(-2px); }
.cm-symbol.is-active{ border-color:var(--cm-green,#99FF33); box-shadow:0 0 0 3px rgba(153,255,51,.35); }
.cm-symbol-glyph{ font-size:1.7rem; line-height:1; }
.cm-symbol-name{ font-size:.72rem; color:var(--cm-muted,#5c6b63); text-align:center; }
.cm-symbol-detail{ margin-top:16px; padding-top:16px; border-top:1px solid var(--cm-line,#e5ece8); min-height:1px; }
.cm-symbol-detail p{ color:var(--cm-ink-2,#2b3a32); margin:6px 0 0; }