/*
 * Design tokens match waldemaster-generators/trap-generator und
 * waldemaster-item-card-editor/public.css (Teal/Gold/Pergament,
 * Georgia-Serife, flache 1px-Konturen statt Glass/Blur), damit alle
 * Frontend-Werkzeuge wie aus einer Hand wirken. Das Kartendesign selbst
 * (sc-*, roter Rahmen, waehlbare Rahmenfarbe) bleibt unveraendert wie im
 * urspruenglichen Spell Card Sheet - nur das UI drumherum traegt die
 * Waldemaster-Optik.
 */
.wmx{
  --wmx-teal:#0c857b; --wmx-teal-light:#49a49c; --wmx-teal-tint:#e7f3f2;
  --wmx-gold:#c9a35c; --wmx-gold-tint:#f7f0e2;
  --wmx-parchment-dark:#e5e1d6; --wmx-panel:#faf7f0;
  --wmx-ink:#262421; --wmx-on-teal:#ffffff;
  --wmx-muted:#6b6558; --wmx-muted2:#8a8474;
  --wmx-surface:#ffffff; --wmx-divider:var(--wmx-parchment-dark);
  --wmx-radius:8px;

  /* Rahmenfarbe der Zauberkarte (per Color-Picker aenderbar). */
  --red:#7b0b0b;

  font-family: Georgia, 'Times New Roman', serif;
  color:var(--wmx-ink);
}
.wmx *{ box-sizing:border-box; }

.wmx-shell{ display:grid; grid-template-columns: 380px 1fr; gap:18px; align-items:start; }
@media (max-width: 980px){ .wmx-shell{ grid-template-columns: 1fr; } }

.wmx-side-head{ padding:6px 4px 12px; }
/* Ueberschriften sind echte h2/h3/h4 (SEO + Screenreader) - margin:0 haelt
   das Aussehen wie bei divs, ohne Browser-Default-Abstaende. */
.wmx-title{ margin:0; font-weight:700; font-size:20px; letter-spacing:.2px; }
.wmx-sub{ color:var(--wmx-muted2); margin-top:4px; font-size:12.5px; }

.wmx-panel{
  background:var(--wmx-surface);
  border:1px solid var(--wmx-divider);
  border-radius:var(--wmx-radius);
  padding:14px;
}
.wmx-panel-h{
  margin:0 0 10px 0;
  font-weight:700; font-size:12px; letter-spacing:.35px; text-transform:uppercase;
  color:var(--wmx-ink);
}

.wmx-row2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px; }
@media (max-width: 980px){ .wmx-row2{ grid-template-columns: 1fr; } }

.wmx-field{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.wmx-label{ display:block; font-size:11px; color:var(--wmx-ink); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }

.wmx-input, .wmx-textarea{
  width:100%; background:#fff; border:1px solid var(--wmx-divider); border-radius:4px;
  padding:8px 10px; outline:none; font-size:14px; color:var(--wmx-ink); font-family:inherit;
}
.wmx-input:focus, .wmx-textarea:focus{
  border-color:var(--wmx-teal);
  box-shadow:0 0 0 2px var(--wmx-teal-tint);
}
.wmx-input::placeholder, .wmx-textarea::placeholder{ color: var(--wmx-muted2); }
.wmx-textarea{ min-height:140px; resize:vertical; }

.wmx-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
}

.wmx-file{
  display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px;
  border:1px solid var(--wmx-teal); border-radius:4px; background:#fff; cursor:pointer;
  width:100%; min-height:40px;
}
.wmx-file:hover{ background:var(--wmx-teal); }
.wmx-file:hover span{ color:var(--wmx-on-teal); }
.wmx-file input{ display:none; }
.wmx-file span{ font-weight:700; color:var(--wmx-teal); overflow-wrap:break-word; text-align:center; }

/* Buttons untereinander mit voller Breite - nebeneinander reicht bei
   laengeren deutschen Uebersetzungen nicht. flex-direction/width mit
   !important, weil das Seiten-Theme Buttons und Flex-Container sonst
   wieder in eine Reihe zwingt (gleiches Muster wie bei der
   Magenta-Ueberschreibung). */
.wmx-actions{ display:flex !important; flex-direction:column !important; gap:10px; margin-top:12px; }
/* Farben/Hintergruende mit !important, weil das Seiten-Theme Buttons sonst
   Magenta einfaerbt (auch in :focus/:active-Zustaenden) - gleiches Muster
   wie beim EN/DE-Umschalter in wmg-shared.css. */
.wmx-btn{
  border:1px solid var(--wmx-teal) !important; border-radius:4px; padding:10px 14px; font-weight:700; cursor:pointer;
  background:var(--wmx-teal) !important; color:var(--wmx-on-teal) !important; font-family:inherit;
  min-height:40px; width:100%;
  white-space:normal; overflow-wrap:break-word; text-align:center; line-height:1.3;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  outline-color:var(--wmx-teal);
  box-shadow:none !important;
  text-decoration:none !important;
}
.wmx-btn:hover,
.wmx-btn:focus,
.wmx-btn:active{ background:var(--wmx-teal-light) !important; border-color:var(--wmx-teal-light) !important; color:var(--wmx-on-teal) !important; }
.wmx-btn-ghost{ background:#fff !important; color:var(--wmx-teal) !important; }
.wmx-btn-ghost:hover,
.wmx-btn-ghost:focus,
.wmx-btn-ghost:active{ background:var(--wmx-teal) !important; color:var(--wmx-on-teal) !important; border-color:var(--wmx-teal) !important; }

.wmx-hint{ margin-top:0; font-size:12px; color:var(--wmx-muted2); }
.wmx-hint b{ color:var(--wmx-ink); }

/* ===== Farbwahl (Rahmenfarbe) ===== */
.wmx-colorrow{ display:flex; align-items:center; gap:10px; }
.wmx-swatchwrap{
  width:42px; height:42px; border-radius:4px;
  border:1px solid var(--wmx-divider); background:#fff; padding:5px;
  position:relative; flex:0 0 auto;
}
.wmx-swatch-in{
  display:block; width:100%; height:100%; border-radius:3px;
  background:var(--red); border:1px solid rgba(0,0,0,.08);
}
.wmx-color-overlay{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; border:0; padding:0; margin:0;
}
.wmx-hex{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.02em;
}

/* ===== A4-Bereich (9 Slots) ===== */
.wmx-a4box{ margin-top:14px; padding-top:12px; border-top:1px solid var(--wmx-divider); }
.wmx-a4h{
  margin:0;
  font-weight:700; font-size:12px; letter-spacing:.35px; text-transform:uppercase;
  color:var(--wmx-ink);
}
.wmx-a4sub{ margin-top:6px; font-size:12.5px; color:var(--wmx-muted2); }

.wmx-a4grid9{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }

.wmx-a4slot{
  border:1px solid var(--wmx-divider);
  border-radius:var(--wmx-radius);
  padding:10px;
  background:var(--wmx-panel);
  overflow:hidden;
}
.wmx-a4slot.has-csv{ border-color:var(--wmx-teal); }
.wmx-a4slot-h{ font-weight:700; font-size:12px; color:var(--wmx-ink); margin-bottom:8px; }

.wmx-a4btn{
  display:flex; align-items:center; justify-content:center;
  padding:9px 12px; border-radius:4px;
  border:1px solid var(--wmx-teal); background:#fff; cursor:pointer; width:100%;
}
.wmx-a4btn:hover{ background:var(--wmx-teal); }
.wmx-a4btn:hover span{ color:var(--wmx-on-teal); }
.wmx-a4btn input{ display:none; }
.wmx-a4btn span{ font-weight:700; color:var(--wmx-teal); white-space:nowrap; }

.wmx-a4meta{
  width:100%; font-size:12px; color:var(--wmx-muted); font-weight:700;
  padding:8px 10px; border:1px solid var(--wmx-divider); background:#fff;
  border-radius:4px; word-break:break-word; margin-top:8px;
}
.wmx-a4meta.ok{
  color:var(--wmx-teal);
  border-color:var(--wmx-teal);
  background:var(--wmx-teal-tint);
}

.wmx-a4ta{ min-height:76px; margin-top:8px; }

/* Slot-Buttons ("Zurueck in den Editor" / "Leeren") - nur sichtbar, wenn
   der Slot gefuellt ist (Steuerung in updateA4Visibility()). Nebeneinander
   mit !important, damit das Seiten-Theme sie nicht umbaut. */
.wmx-a4slotbtns{
  display:flex !important;
  flex-direction:row !important;
  gap:8px;
  margin-top:8px;
}
.wmx-a4slot-btn{
  flex:1 1 auto !important;
  min-width:0;
  border:1px solid var(--wmx-teal); border-radius:4px;
  padding:8px 10px; min-height:36px;
  background:#fff; color:var(--wmx-teal);
  font-weight:700; font-family:inherit; font-size:12.5px;
  cursor:pointer;
  white-space:normal; overflow-wrap:break-word; text-align:center; line-height:1.3;
  transition: background .15s ease, color .15s ease;
}
.wmx-a4slot-btn:hover{ background:var(--wmx-teal); color:var(--wmx-on-teal); }
.wmx-a4slot-btn-clear{
  flex:0 0 auto !important;
  border-color:var(--wmx-gold);
  color:var(--wmx-ink);
}
.wmx-a4slot-btn-clear:hover{ background:var(--wmx-gold-tint); color:var(--wmx-ink); }

/* ===== Hauptbereich ===== */
.wmx-grid{ display:grid; grid-template-columns:minmax(300px,420px) 1fr; gap:18px; align-items:start; }
@media (max-width: 1200px){ .wmx-grid{ grid-template-columns:1fr; } }

.wmx-cardwrap{ position:sticky; top:10px; }
@media (max-width: 1200px){ .wmx-cardwrap{ position:relative; top:auto; } }

.wmx-cardbox{
  width:min(100%,420px);
  aspect-ratio:63.5 / 88;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 22px rgba(38,36,33,.16);
  border:1px solid var(--wmx-divider);
}

.wmx-pvstage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; overflow:hidden;
}

.wmx-pvscale{
  transform-origin:center center;
  filter:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.wmx-pvstage .sc-card,
.wmx-pvstage .sc-card *{ text-rendering:geometricPrecision; }

.wmx-measure{
  position:absolute; left:-9999px; top:-9999px;
  width:63.5mm; height:88mm;
}

.wmx-note{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--wmx-divider);
  border-radius:var(--wmx-radius);
  background:var(--wmx-panel);
}
.wmx-note-k{
  font-weight:700; font-size:11px; letter-spacing:.35px; text-transform:uppercase;
  color:var(--wmx-muted2);
}
.wmx-note-v{ margin-top:4px; font-size:13px; font-weight:700; color:var(--wmx-ink); }

/* ===== Formular ===== */
.wmx-cardpanel{
  background:var(--wmx-surface);
  border:1px solid var(--wmx-divider);
  border-radius:var(--wmx-radius);
  padding:18px;
}

.wmx-form-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  border-bottom:1px solid var(--wmx-divider);
  padding-bottom:14px; margin-bottom:14px;
}
.wmx-form-title{ margin:0; font-weight:700; font-size:18px; }
.wmx-form-sub{ color:var(--wmx-muted2); font-size:12.5px; }

.wmx-formgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:14px; row-gap:14px; margin-bottom:14px;
}
.wmx-formgrid-duration{ grid-template-columns:minmax(180px,1fr) 2fr; margin-bottom:0; }
@media (max-width: 1200px){
  .wmx-formgrid, .wmx-formgrid-duration{ grid-template-columns:1fr; }
}

.wmx-body-field{ margin:0; }
#wmxFBody{ min-height:188px; }

.wmx-editor-subgrid{ display:grid; grid-template-columns:1fr; gap:12px; }
.wmx-wide{ min-width:0; }

/* Editor-Abschnitte - eine goldene Akzentleiste pro Abschnitt, wie im
   Item Card Editor. */
.wmx-editor-section{
  margin-top:14px;
  padding:12px 12px 12px 16px;
  border:1px solid var(--wmx-divider);
  border-left:4px solid var(--wmx-gold);
  border-radius:var(--wmx-radius);
  background:#fff;
}
.wmx-form-head + .wmx-editor-section{ margin-top:0; }
.wmx-editor-section-h{
  margin:0 0 10px 0;
  font-weight:700; font-size:11px; letter-spacing:.35px; text-transform:uppercase;
  color:var(--wmx-muted2);
}
.wmx-editor-section .wmx-formgrid{ margin-top:0; }

.wmx-settings-section{
  margin:0 0 14px 0;
  padding:14px 14px 14px 16px;
  border:1px solid var(--wmx-divider);
  border-left:4px solid var(--wmx-gold);
  border-radius:var(--wmx-radius);
  background:#fff;
}
.wmx-settings-section .wmx-panel-h{ margin:0 0 12px 0; }
.wmx-settings-section .wmx-row2:last-child{ margin-bottom:0; }

/* ===== Sendbox (aktuelles CSV an A4-Slot) ===== */
.wmx-sendbox{
  width:100%;
  padding:14px;
  border:1px solid var(--wmx-divider);
  border-radius:var(--wmx-radius);
  background:var(--wmx-panel);
}
.wmx-sendbox-h{
  font-weight:700; font-size:11px; letter-spacing:.35px; text-transform:uppercase;
  color:var(--wmx-muted2);
  margin-bottom:10px;
}
.wmx-sendgrid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px; width:100%;
}
@media (max-width: 720px){
  .wmx-sendgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
.wmx-btn-mini{ width:100% !important; padding:10px 8px; font-size:13px; min-height:38px; }
.wmx-btn-mini.is-loaded{ background:var(--wmx-teal) !important; color:var(--wmx-on-teal) !important; }

/* Noch nicht verfuegbare "Zu Karte N"-Buttons: sichtbar, aber verblasst
   und nicht klickbar (disabled wird in updateA4Visibility() gesetzt). */
.wmx-btn-mini.is-locked,
.wmx-btn-mini.is-locked:hover,
.wmx-btn-mini.is-locked:focus,
.wmx-btn-mini.is-locked:active{
  opacity:.35 !important;
  cursor:not-allowed !important;
  background:#fff !important;
  color:var(--wmx-teal) !important;
  border-color:var(--wmx-teal) !important;
}

/* ===== Instructions Panel ===== */
.wmx-instructions{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--wmx-divider);
  border-radius:var(--wmx-radius);
  background:var(--wmx-panel);
}
.wmx-instructions-h{
  margin:0 0 10px 0;
  font-weight:700; font-size:12px; letter-spacing:.35px; text-transform:uppercase;
  color:var(--wmx-muted2);
}
.wmx-instructions-sub{ font-size:13.5px; line-height:1.5; color:var(--wmx-ink); }
.wmx-instructions-sub p{ margin:0 0 8px 0; }
.wmx-instructions-sub ol,
.wmx-instructions-sub ul{ margin:8px 0 0 18px; padding:0; }
.wmx-instructions-sub li{ margin-bottom:6px; }
.wmx-instructions-sub hr{ border:0; border-top:1px solid var(--wmx-divider); margin:10px 0; }

/*
 * EN/DE-Sprachumschalter + sprachspezifische Bloecke (i18n in public.js).
 * data-wmg-show="en|de": ganze Bloecke (reich formatierte Hinweise/Anleitung)
 * werden nur in der passenden Sprache gezeigt; Standard ohne JS = Englisch.
 * !important gegen Theme-Magenta (gleiches Muster wie wmg-shared.css).
 */
.wmx-side-head-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wmx .wmg-lang-toggle{ display:inline-flex; border:1px solid rgba(15,23,32,.2); border-radius:4px; overflow:hidden; }
.wmx .wmg-lang-btn{
	appearance:none; -webkit-appearance:none; border:0;
	background:#fff !important; color:#5a6472 !important;
	font:inherit; font-size:11px; font-weight:700; letter-spacing:.06em;
	padding:4px 10px; min-height:24px; cursor:pointer;
	transition: background .15s ease, color .15s ease;
}
.wmx .wmg-lang-btn + .wmg-lang-btn{ border-left:1px solid rgba(15,23,32,.2); }
.wmx .wmg-lang-btn:hover{ color:#0c857b !important; }
.wmx .wmg-lang-btn.active{ background:#0c857b !important; color:#fff !important; }

.wmx [data-wmg-show="de"]{ display:none; }
body.wmg-lang-de .wmx [data-wmg-show="de"]{ display:block; }
body.wmg-lang-de .wmx [data-wmg-show="en"]{ display:none; }

/* =====================================================================
 * ZAUBERKARTE (sc-*) - unveraendert aus dem urspruenglichen Spell Card
 * Sheet uebernommen; --red kommt vom Editor (Rahmenfarbe).
 * ===================================================================== */
.sc-card{
  width:63.5mm;
  height:88mm;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.sc-frame{
  width:100%; height:100%;
  background:var(--red);
  padding:1.25mm;
  border-radius:2.9mm;
  overflow:hidden;
}

.sc-inner{
  width:100%; height:100%;
  background:var(--red);
  position:relative; overflow:hidden;
  border-radius:2.1mm;
}

.sc-head{
  position:absolute; left:0; right:0; top:0; height:8.8mm;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:0 2mm;
}

.sc-name{
  color:#000; font-weight:950; font-size:10.2pt; letter-spacing:.02em;
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:clip;
  font-family:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
}

.sc-meta{
  position:absolute; left:0; right:0; top:8.8mm; height:18.2mm;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  border-top:0.55mm solid var(--red);
  border-bottom:0.55mm solid var(--red);
}

.sc-cell{
  background:#fff;
  border-right:0.55mm solid var(--red);
  border-bottom:0.55mm solid var(--red);
  padding:1.0mm 1.4mm;
  display:flex; flex-direction:column; overflow:hidden;
}
.sc-cell:nth-child(2n){ border-right:0; }
.sc-cell:nth-last-child(-n+2){ border-bottom:0; }

.sc-lbl{
  color:var(--red); font-weight:950; font-size:6.3pt; letter-spacing:.08em;
  text-transform:uppercase; line-height:1; flex:0 0 auto;
}

.sc-val{
  margin-top:.7mm; color:#000; font-weight:850; font-size:7.4pt; line-height:1.05;
  white-space:normal; word-break:break-word; overflow-wrap:anywhere;
  flex:1 1 auto; min-height:0; overflow:hidden;
}

.sc-bodyvp{
  position:absolute; left:0; right:0; top:27.0mm; bottom:7.45mm;
  background:#fff; overflow:hidden;
}

.sc-bodypad{
  padding:1.6mm 2.0mm 1.2mm;
  height:100%; overflow:hidden;
}

.sc-body{
  color:#000; font-size:6.35pt; line-height:1.18;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
}

.sc-footer{
  position:absolute; left:-0.15mm; right:-0.15mm; bottom:-0.15mm; height:7.9mm;
  background:var(--red);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.15mm; gap:2mm;
  border-bottom-left-radius:2.1mm;
  border-bottom-right-radius:2.1mm;
  z-index:5;
}

.sc-footL, .sc-footR{
  color:#fff; font-weight:900; font-size:7.0pt;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sc-footR{ text-align:right; }

/*
 * Harte Anti-Magenta-Schicht: das Seiten-Theme faerbt Buttons (inkl.
 * :focus/:active) magenta und nutzt dabei teils selbst !important. Ueber
 * die ID #wsce-spell-editor gewinnen diese Regeln die Spezifitaet, egal
 * mit welchen Klassen-Selektoren das Theme kommt. Deckt alle Button-
 * Varianten des Editors ab.
 */
#wsce-spell-editor .wmx-btn,
#wsce-spell-editor .wmx-btn:visited{
  background:var(--wmx-teal) !important;
  color:var(--wmx-on-teal) !important;
  border:1px solid var(--wmx-teal) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  text-decoration:none !important;
  outline:none !important;
}
#wsce-spell-editor .wmx-btn:hover,
#wsce-spell-editor .wmx-btn:focus,
#wsce-spell-editor .wmx-btn:focus-visible,
#wsce-spell-editor .wmx-btn:active{
  background:var(--wmx-teal-light) !important;
  color:var(--wmx-on-teal) !important;
  border-color:var(--wmx-teal-light) !important;
  box-shadow:none !important;
  outline:2px solid var(--wmx-teal-tint) !important;
  outline-offset:1px !important;
}
#wsce-spell-editor .wmx-btn-ghost,
#wsce-spell-editor .wmx-btn-ghost:visited{
  background:#fff !important;
  color:var(--wmx-teal) !important;
  border:1px solid var(--wmx-teal) !important;
}
#wsce-spell-editor .wmx-btn-ghost:hover,
#wsce-spell-editor .wmx-btn-ghost:focus,
#wsce-spell-editor .wmx-btn-ghost:focus-visible,
#wsce-spell-editor .wmx-btn-ghost:active{
  background:var(--wmx-teal) !important;
  color:var(--wmx-on-teal) !important;
  border-color:var(--wmx-teal) !important;
}
#wsce-spell-editor .wmx-btn-mini.is-loaded{
  background:var(--wmx-teal) !important;
  color:var(--wmx-on-teal) !important;
}
#wsce-spell-editor .wmx-btn-mini.is-locked,
#wsce-spell-editor .wmx-btn-mini.is-locked:hover,
#wsce-spell-editor .wmx-btn-mini.is-locked:focus,
#wsce-spell-editor .wmx-btn-mini.is-locked:active{
  opacity:.35 !important;
  cursor:not-allowed !important;
  background:#fff !important;
  color:var(--wmx-teal) !important;
  border-color:var(--wmx-teal) !important;
  outline:none !important;
}
/* Slot-Buttons: auch Layout/Typografie ueber die ID absichern, damit das
   Theme die Optik (nebeneinander, breiter Editor-Button + schmaler
   goldener Clear) nicht mit eigenen Button-Regeln verbiegen kann. */
#wsce-spell-editor .wmx-a4slotbtns{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  gap:8px !important;
  margin-top:8px !important;
}
#wsce-spell-editor .wmx-a4slot-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  min-height:36px !important;
  margin:0 !important;
  padding:8px 10px !important;
  border-radius:4px !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  background:#fff !important;
  color:var(--wmx-teal) !important;
  border:1px solid var(--wmx-teal) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  text-decoration:none !important;
  outline:none !important;
}
#wsce-spell-editor .wmx-a4slot-btn:hover,
#wsce-spell-editor .wmx-a4slot-btn:focus,
#wsce-spell-editor .wmx-a4slot-btn:active{
  background:var(--wmx-teal) !important;
  color:var(--wmx-on-teal) !important;
}
#wsce-spell-editor .wmx-a4slot-btn-clear{
  flex:0 0 auto !important;
  width:auto !important;
  border-color:var(--wmx-gold) !important;
  color:var(--wmx-ink) !important;
  background:#fff !important;
}
#wsce-spell-editor .wmx-a4slot-btn-clear:hover,
#wsce-spell-editor .wmx-a4slot-btn-clear:focus,
#wsce-spell-editor .wmx-a4slot-btn-clear:active{
  background:var(--wmx-gold-tint) !important;
  color:var(--wmx-ink) !important;
  border-color:var(--wmx-gold) !important;
}
#wsce-spell-editor .wmx-a4btn,
#wsce-spell-editor .wmx-file{
  background:#fff !important;
  border-color:var(--wmx-teal) !important;
}
#wsce-spell-editor .wmx-a4btn span,
#wsce-spell-editor .wmx-file span{ color:var(--wmx-teal) !important; }
#wsce-spell-editor .wmx-a4btn:hover,
#wsce-spell-editor .wmx-file:hover{ background:var(--wmx-teal) !important; }
#wsce-spell-editor .wmx-a4btn:hover span,
#wsce-spell-editor .wmx-file:hover span{ color:var(--wmx-on-teal) !important; }

@media print{ #wsce-spell-editor{ display:none !important; } }

/* ------------------------------------------------------------------
 * Import-Icon (Pfeil in Ablage) fuer alle Import-Buttons: als Mask ueber
 * currentColor statt Inline-SVG im Markup, weil der Sprachwechsel
 * (i18n-Baustein) textContent ersetzt und ein SVG im Element loeschen
 * wuerde; ::before bleibt davon unberuehrt und folgt der Textfarbe
 * automatisch (auch beim Hover).
 * ------------------------------------------------------------------ */
#wmxImportFromText::before,
#wmxImportFile + span::before,
.wmxA4File + span::before{
  content:""; display:inline-block; width:14px; height:14px;
  margin-right:7px; vertical-align:-2px; background:currentColor;
  -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='M12 13V3'/%3E%3Cpath d='m8 7 4-4 4 4'/%3E%3Cpath d='M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%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='M12 13V3'/%3E%3Cpath d='m8 7 4-4 4 4'/%3E%3Cpath d='M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------------------
 * Aktions-Icons (gleiches Muster wie das Import-Icon: Mask ueber
 * currentColor per ::before; uebersteht den EN/DE-Sprachwechsel und
 * folgt der Textfarbe inkl. Hover). Basisregel + je Icon die Mask.
 * ------------------------------------------------------------------ */
#wmxCopyPreview::before,
#wmxExportTXT::before,
#wmxPrintSingle::before,
#wmxA4Print::before,
#wmxReset::before,
#wmxA4Clear::before,
.wmxA4SlotClear::before,
button[data-send]::before,
.wmxA4Edit::before{
  content:""; display:inline-block; width:14px; height:14px;
  margin-right:7px; vertical-align:-2px; background:currentColor;
  -webkit-mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat;
  mask-position:center; mask-size:contain; mask-repeat:no-repeat;
}
.wmxA4SlotClear::before,
button[data-send]::before,
.wmxA4Edit::before{ width:12px; height:12px; margin-right:5px; vertical-align:-1px; }
#wmxCopyPreview::before{ -webkit-mask-image: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%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); mask-image: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%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
#wmxExportTXT::before{ -webkit-mask-image: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='M12 3v10'/%3E%3Cpath d='m8 9 4 4 4-4'/%3E%3Cpath d='M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E"); mask-image: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='M12 3v10'/%3E%3Cpath d='m8 9 4 4 4-4'/%3E%3Cpath d='M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E"); }
#wmxPrintSingle::before, #wmxA4Print::before{ -webkit-mask-image: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='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='7'/%3E%3C/svg%3E"); mask-image: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='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='7'/%3E%3C/svg%3E"); }
#wmxReset::before{ -webkit-mask-image: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='M3 4v6h6'/%3E%3Cpath d='M3.5 15a9 9 0 1 0 2.1-9.4L3 10'/%3E%3C/svg%3E"); mask-image: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='M3 4v6h6'/%3E%3Cpath d='M3.5 15a9 9 0 1 0 2.1-9.4L3 10'/%3E%3C/svg%3E"); }
#wmxA4Clear::before, .wmxA4SlotClear::before{ -webkit-mask-image: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='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='m19 6-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E"); mask-image: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='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='m19 6-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E"); }
button[data-send]::before{ -webkit-mask-image: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='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E"); mask-image: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='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E"); }
.wmxA4Edit::before{ -webkit-mask-image: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='M19 12H5'/%3E%3Cpath d='m11 18-6-6 6-6'/%3E%3C/svg%3E"); mask-image: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='M19 12H5'/%3E%3Cpath d='m11 18-6-6 6-6'/%3E%3C/svg%3E"); }