/*
   * Design tokens match waldemaster-item-card-editor/public.css bzw.
   * waldemaster-generators (Teal/Gold/Pergament, Georgia-Serife, flache
   * 1px-Konturen statt Glass/Blur), damit alle Frontend-Werkzeuge wie aus
   * einer Hand wirken. Die Karten-Klassen heissen hier mcard/m* (statt
   * card/frame/... im Item-Editor), damit beide Editoren notfalls auf
   * derselben Seite koexistieren koennen, ohne sich die Karten-Styles
   * gegenseitig zu ueberschreiben.
   */
  .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;

    --pvScale: 1;

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

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

  .wmx-side-head{ padding:6px 4px 12px; }
  /* .wmx-title/.wmx-panel-h/.wmx-form-title/.wmx-a4h/.wmx-instructions-h sind
     echte Ueberschriften (h2/h3/h4) statt divs, fuer eine sinnvolle
     Dokumentstruktur (SEO + Screenreader) - margin:0 haelt das Aussehen
     dabei exakt wie im Item-Editor, ohne die 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-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; }

  /* Nebeneinander (flex row, je 50% Breite) reicht bei einer laengeren
     Uebersetzung (z.B. Deutsch) nicht und der Text bricht mitten im Wort
     ab. Untereinander bekommt jeder Button die volle Breite - das reicht
     fuer praktisch jede Uebersetzung, ohne haessliche Umbrueche. Gleiches
     Prinzip unten bei .wmx-actions/.wmx-sendgrid. */
  .wmx-seg{ display:flex; flex-direction:column; border:1px solid var(--wmx-teal); border-radius:4px; overflow:hidden; }
  .wmx-segbtn{
    border:0; border-top:1px solid var(--wmx-teal);
    background:#fff; padding:9px 10px; font-weight:700; cursor:pointer; color:var(--wmx-teal); font-family:inherit;
    white-space:normal; overflow-wrap:break-word; text-align:center; line-height:1.3;
  }
  .wmx-segbtn:first-child{ border-top:0; }
  .wmx-segbtn:not(.active):hover{ background:var(--wmx-teal-tint); }
  .wmx-segbtn.active{ background:var(--wmx-teal); color:var(--wmx-on-teal); }

  .wmx-actions{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
  .wmx-btn{
    border:1px solid var(--wmx-teal); border-radius:4px; padding:10px 14px; font-weight:700; cursor:pointer;
    background:var(--wmx-teal); color:var(--wmx-on-teal); font-family:inherit;
    min-height:40px;
    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;
  }
  .wmx-btn:hover{ background:var(--wmx-teal-light); border-color:var(--wmx-teal-light); }
  .wmx-btn-ghost{ background:#fff; color:var(--wmx-teal); }
  .wmx-btn-ghost:hover{ background:var(--wmx-teal); color:var(--wmx-on-teal); }

  .wmx-sendbox{
    margin-top:12px;
    padding:12px;
    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);
  }
  .wmx-sendgrid{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
  }
  .wmx-sendbtn{
    min-height:40px;
    padding:9px 10px;
    font-size:13px;
    line-height:1.3;
    white-space:normal;
    overflow-wrap:break-word;
    text-align:center;
  }
  .wmx-sendbtn.is-loaded{
    background:var(--wmx-gold);
    color:var(--wmx-ink);
    border-color:var(--wmx-gold);
  }
  .wmx-sendbtn.is-loaded:hover{ background:#b88f47; border-color:#b88f47; }

  .wmx-hint{ margin-top:6px; font-size:12px; color:var(--wmx-muted2); line-height:1.4; }

  .wmx-a4box{
    margin-top:14px; padding:14px;
    border:1px solid var(--wmx-divider);
    border-radius:var(--wmx-radius);
    background:var(--wmx-panel);
  }
  .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-a4grid{ display:grid; grid-template-columns: 1fr; gap:10px; margin-top:10px; }
  .wmx-a4slot{
    position:relative;
    border:1px solid var(--wmx-divider);
    border-left:4px solid var(--wmx-gold);
    border-radius:var(--wmx-radius); padding:12px; background:#fff;
  }
  .wmx-a4slot-h{
    font-weight:700; font-size:12px; color:var(--wmx-ink); margin-bottom:8px;
    display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
  }
  .wmx-a4slot.has-csv .wmx-a4slot-h::after{
    content:"CSV ready";
    font-size:10px; letter-spacing:.03em; font-weight:700; text-transform:uppercase;
    color:var(--wmx-teal);
    background:var(--wmx-teal-tint);
    padding:4px 8px; border-radius:999px;
  }

  .wmx-a4row{ display:grid; grid-template-columns: 1fr; gap:6px; margin-bottom:10px; min-width:0; }
  .wmx-a4btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:9px 12px; border-radius:4px; border:1px solid var(--wmx-teal);
    background:#fff; cursor:pointer; width:100%; min-height:40px;
  }
  .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:normal; overflow-wrap:break-word; text-align:center; }

  .wmx-a4meta{
    width:100%; min-width:0; font-size:12px;
    color:var(--wmx-muted); font-weight:700;
    padding:8px 10px; border:1px solid var(--wmx-divider);
    background:var(--wmx-panel); border-radius:4px;
    white-space:normal; word-break:break-word;
  }
  .wmx-a4meta.ok{
    color:var(--wmx-teal);
    border-color:var(--wmx-teal-tint);
    background:var(--wmx-teal-tint);
  }
  .wmx-a4ta{ min-height:64px; margin-top:8px; }

  .wmx-a4slot-btns{ display:flex; flex-direction:row; gap:8px; margin-top:10px; }
  .wmx-a4slot-btn{
    min-height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:4px; padding:8px 10px;
    font-weight:700; font-size:12.5px; cursor:pointer; font-family:inherit;
    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;
  }
  .wmx-a4slot-edit{ flex:1 1 auto; border:1px solid var(--wmx-teal); background:#fff; color:var(--wmx-teal); }
  .wmx-a4slot-edit:hover{ background:var(--wmx-teal); color:var(--wmx-on-teal); }
  .wmx-a4slot-clear{ flex:0 0 auto; border:1px solid var(--wmx-gold); background:#fff; color:var(--wmx-ink); }
  .wmx-a4slot-clear:hover{ background:var(--wmx-gold-tint); }

  .wmx-tip{ margin-top:12px; padding-top:12px; border-top:1px solid var(--wmx-divider); }
  .wmx-tip-h{ font-size:11px; font-weight:700; letter-spacing:.35px; text-transform:uppercase; color:var(--wmx-muted2); margin-bottom:6px; }
  .wmx-tip-p{ color:var(--wmx-muted); font-size:13px; line-height:1.45; }

  .wmx-grid{ display:grid; grid-template-columns: 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-card{
    width:420px; height:560px;
    border-radius:18px;
    position:relative;
    overflow:hidden;
    background:#0d5f5a;
    box-shadow: 0 18px 26px rgba(0,0,0,.25);
  }
  @media (max-width: 1200px){ .wmx-card{ width:100%; max-width:420px; } }

  .wmx-mflip{
    position:absolute; top:10px; right:10px; z-index:50;
    border:1px solid var(--wmx-teal); border-radius:999px; padding:8px 14px;
    font-weight:700; cursor:pointer; font-family:inherit;
    background:var(--wmx-teal); color:var(--wmx-on-teal);
    display:none;
  }
  .wmx-mflip:hover{ background:var(--wmx-teal-light); border-color:var(--wmx-teal-light); }
  @media (max-width: 980px){ .wmx-mflip{ display:block; } }

  .wmx-card-inner{ width:100%; height:100%; position:relative; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
  .wmx-card-inner.is-flipped{ transform: rotateY(180deg); }
  .wmx-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:18px; overflow:hidden; }
  .wmx-back{ transform: rotateY(180deg); }

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

  .wmx-cardpanel{
    background:var(--wmx-surface);
    border:1px solid var(--wmx-divider);
    border-radius:var(--wmx-radius);
    padding:16px;
  }
  .wmx-form-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    border-bottom:2px solid var(--wmx-teal);
    padding:0 0 12px; margin-bottom:14px;
  }
  .wmx-form-title{ margin:0; font-weight:700; font-size:16px; letter-spacing:.2px; }
  .wmx-form-sub{ color:var(--wmx-muted2); font-size:13px; }

  .wmx-formgrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
  @media (max-width: 1200px){ .wmx-formgrid{ grid-template-columns: 1fr; } }

  .wmx-formgrid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px; }
  @media (max-width: 1200px){ .wmx-formgrid2{ grid-template-columns: 1fr; } }
  .wmx-wide{ grid-column: 1 / -1; }
  .wmx-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }

  /* Attributswerte-Eingaben (heisst absichtlich nicht .wmx-abilities wie im
     Item-Editor, weil dort dieselbe Klasse Karten-Styles traegt). */
  .wmx-abigrid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:12px; }
  @media (max-width: 1200px){ .wmx-abigrid{ grid-template-columns: repeat(2, 1fr); } }

  /* ===== Editor sections — one gold accent bar per section ===== */
  .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,
  .wmx-editor-section .wmx-formgrid2{ margin-top:0; }
  .wmx-editor-subgrid{ display:grid; grid-template-columns:1fr; gap:12px; }

  .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; }

  /* ===== 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; }

  /* ===== MONSTER CARD (Vorschau in echten mm, per zoom skaliert —
     identische Masse wie der Druck-Export, siehe public.js) ===== */
  .mcard{ width:63.5mm; height:88mm; border-radius:2.6mm; overflow:hidden; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .mframe{ position:relative; width:100%; height:100%; background:#0d5f5a; border-radius:2.6mm; padding:2.6mm; }
  .minner{ position:relative; width:100%; height:100%; border:.55mm solid rgba(214,163,64,.95); border-radius:2.2mm; }

  .mbrand{
    position:absolute; left:2mm; right:2mm; top:1mm;
    display:flex; align-items:center; justify-content:center;
    color:#d6a340; text-align:center; font-weight:900; font-size:10.5pt;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-family:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
    text-transform:uppercase;
  }

  /* FRONT */
  .mart{
    position:absolute; left:0.4mm; right:0.4mm; top:8.2mm; bottom:0.4mm;
    border-radius:2mm; background:#f3ecd8;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    padding:3mm 3mm 10mm;
  }
  .mname{
    position:absolute; left:1.6mm; right:1.6mm; bottom:1.6mm;
    font-weight:750; font-size:9pt; line-height:1.0;
    display:flex; align-items:flex-end; justify-content:center;
    padding:1.6mm 1mm 0.2mm;
    text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:clip;
    font-family:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
    background: linear-gradient(to top, rgba(243,236,216,.92), rgba(243,236,216,0));
    color:#444;
    pointer-events:none;
  }

  .wmx-noart{ font-weight:900; color:rgba(0,0,0,.45); letter-spacing:.10em; font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial; }
  .wmx-img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; display:none; transform:translateZ(0); }

  /* BACK */
  .mvp{
    position:absolute; left:0.4mm; right:0.4mm; top:0.4mm; bottom:0.4mm;
    border-radius:2mm; background:#f3ecd8;
    overflow:hidden;
  }
  .mviewport{ position:absolute; left:0; right:0; top:0; bottom:7mm; overflow:hidden; }
  .mscale{ transform-origin:top left; width:100%; padding:2mm 3mm 0; }

  .mtitle{
    font-weight:750; font-size:14pt; line-height:1.05;
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-family:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif; color:#333;
  }
  .msub{
    text-align:center; margin-top:0.4mm;
    font-size:9.5pt; font-weight:700; color:rgba(0,0,0,.70);
  }
  .mrule{ height:.3mm; background:#d6a340; border-radius:999px; margin:1.6mm 0; }

  .mline3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2mm; font-size:9.5pt; color:#111; }
  .mline3 b{ font-weight:950; }

  .mabi{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.6mm; }
  .mabiBox{
    text-align:center; display:flex; flex-direction:column;
    align-items:center; justify-content:center; overflow:hidden; min-height:9mm;
  }
  .mabiK{ font-size:8.2pt; font-weight:950; letter-spacing:.08em; text-transform:uppercase; line-height:1; white-space:nowrap; color:#0d5f5a; }
  .mabiV{ margin-top:.9mm; font-size:8.6pt; font-weight:400; line-height:1.05; white-space:nowrap; color:#111; }

  .msmall{ font-size:8.9pt; line-height:1.25; color:#111; display:grid; gap:1mm; }
  .msmall b{ font-weight:950; }

  .mblockH{ font-size:9pt; font-weight:950; letter-spacing:.08em; text-transform:uppercase; color:#0d5f5a; margin-bottom:1mm; }
  .mblockT{ font-size:9.1pt; line-height:1.22; color:#111; white-space:pre-wrap; }

  .mfoot{
    position:absolute; left:0; right:0; bottom:0; height:7mm;
    background:transparent; color:#0d5f5a;
    font-weight:950; font-size:8.5pt;
    padding:2mm 3.6mm;
    display:flex; justify-content:space-between; align-items:center;
    font-family:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
  }

  /* Vorschau-Skalierung: mm-Karte in das 420x560-Vorschaufeld einpassen. */
  .wmx-pvstage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  /* zoom statt transform:scale(): transform-Skalierung rastert den Karten-
     Layer zuerst in Originalgroesse und streckt dann die Bitmap, was beim
     Hochskalieren fuer die Vorschau sichtbar unscharf wird. zoom laesst den
     Browser stattdessen bei der Zielgroesse neu layouten/rendern -> scharf. */
  .wmx-pvscale{ zoom: var(--pvScale); }
  /* Uralt-Browser ohne zoom-Unterstuetzung: lieber die alte (leicht
     unscharfe) transform-Skalierung als eine winzige, gar nicht skalierte
     Vorschau. */
  @supports not (zoom: 1){
    .wmx-pvscale{ transform:scale(var(--pvScale)); transform-origin:center center; }
  }
  .wmx-measure{ position:absolute; left:-9999px; top:-9999px; width:63.5mm; height:88mm; }

  @media print{ #wmce-monster-editor{ display:none !important; } }

/*
 * 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.
 */
.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; }

/*
 * ===== Harte Anti-Magenta-Schicht =====
 * Das Waldemaster-Seiten-Theme faerbt Buttons (inkl. :hover/:focus/:active)
 * magenta und nutzt dabei teils selbst !important. Ueber die Editor-ID
 * #wmce-monster-editor gewinnen diese Regeln die Spezifitaet, egal mit
 * welchen Klassen-Selektoren das Theme kommt - gleiches Muster wie im Spell
 * Card Editor und in wmg-shared.css. Deckt alle Button-Varianten dieses
 * Editors ab, damit ueberall Teal/Gold statt Theme-Magenta greift.
 */
#wmce-monster-editor .wmx-btn,
#wmce-monster-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;
}
#wmce-monster-editor .wmx-btn:hover,
#wmce-monster-editor .wmx-btn:focus,
#wmce-monster-editor .wmx-btn:focus-visible,
#wmce-monster-editor .wmx-btn:active{
  background:var(--wmx-teal-light) !important; color:var(--wmx-on-teal) !important; border-color:var(--wmx-teal-light) !important;
}
#wmce-monster-editor .wmx-btn-ghost,
#wmce-monster-editor .wmx-btn-ghost:visited{
  background:#fff !important; color:var(--wmx-teal) !important; border:1px solid var(--wmx-teal) !important;
}
#wmce-monster-editor .wmx-btn-ghost:hover,
#wmce-monster-editor .wmx-btn-ghost:focus,
#wmce-monster-editor .wmx-btn-ghost:focus-visible,
#wmce-monster-editor .wmx-btn-ghost:active{
  background:var(--wmx-teal) !important; color:var(--wmx-on-teal) !important; border-color:var(--wmx-teal) !important;
}
/* Segment-Tabs (Front/Back) */
#wmce-monster-editor .wmx-segbtn{
  background:#fff !important; color:var(--wmx-teal) !important; border-top-color:var(--wmx-teal) !important;
  box-shadow:none !important; text-shadow:none !important; outline:none !important;
}
#wmce-monster-editor .wmx-segbtn.active{ background:var(--wmx-teal) !important; color:var(--wmx-on-teal) !important; }
/* Datei-/Import-Buttons (labels) */
#wmce-monster-editor .wmx-file,
#wmce-monster-editor .wmx-a4btn{ background:#fff !important; border:1px solid var(--wmx-teal) !important; box-shadow:none !important; }
#wmce-monster-editor .wmx-file:hover,
#wmce-monster-editor .wmx-a4btn:hover{ background:var(--wmx-teal) !important; }
#wmce-monster-editor .wmx-file span,
#wmce-monster-editor .wmx-a4btn span{ color:var(--wmx-teal) !important; }
#wmce-monster-editor .wmx-file:hover span,
#wmce-monster-editor .wmx-a4btn:hover span{ color:var(--wmx-on-teal) !important; }
/* "To Card X" Send-Buttons */
#wmce-monster-editor .wmx-sendbtn{ background:#fff !important; color:var(--wmx-teal) !important; border:1px solid var(--wmx-teal) !important; }
#wmce-monster-editor .wmx-sendbtn:hover{ background:var(--wmx-teal) !important; color:var(--wmx-on-teal) !important; }
#wmce-monster-editor .wmx-sendbtn.is-loaded{ background:var(--wmx-gold) !important; color:var(--wmx-ink) !important; border-color:var(--wmx-gold) !important; }
/* A4-Slot-Buttons (Back to Editor / Clear) */
#wmce-monster-editor .wmx-a4slot-btns{ display:flex !important; flex-direction:row !important; gap:8px !important; margin-top:10px !important; }
#wmce-monster-editor .wmx-a4slot-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-height:36px !important; margin:0 !important; padding:8px 10px !important; border-radius:4px !important;
  font-family:inherit !important; font-weight:700 !important; text-transform:none !important;
  box-shadow:none !important; text-shadow:none !important; text-decoration:none !important; outline:none !important;
}
#wmce-monster-editor .wmx-a4slot-edit{
  flex:1 1 auto !important; width:auto !important;
  background:#fff !important; color:var(--wmx-teal) !important; border:1px solid var(--wmx-teal) !important;
}
#wmce-monster-editor .wmx-a4slot-edit:hover,
#wmce-monster-editor .wmx-a4slot-edit:focus,
#wmce-monster-editor .wmx-a4slot-edit:active{
  background:var(--wmx-teal) !important; color:var(--wmx-on-teal) !important; border-color:var(--wmx-teal) !important;
}
#wmce-monster-editor .wmx-a4slot-clear{
  flex:0 0 auto !important; width:auto !important;
  background:#fff !important; color:var(--wmx-ink) !important; border:1px solid var(--wmx-gold) !important;
}
#wmce-monster-editor .wmx-a4slot-clear:hover,
#wmce-monster-editor .wmx-a4slot-clear:focus,
#wmce-monster-editor .wmx-a4slot-clear:active{
  background:var(--wmx-gold-tint) !important; color:var(--wmx-ink) !important; border-color:var(--wmx-gold) !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).
 * ------------------------------------------------------------------ */
#wmceImportFromText::before,
#wmceImportFile + span::before,
input[id^="wmceA4Img"] + span::before,
input[id^="wmceA4Csv"] + 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.
 * ------------------------------------------------------------------ */
#wmceCopyPreview::before,
#wmceExportTXT::before,
#wmceExportPrint::before,
#wmceA4Print::before,
#wmceReset::before,
button[id^="wmceA4Clear"]::before,
button[id^="wmceSendA4_"]::before,
button[id^="wmceA4Edit"]::before,
#wmceImageInput + span::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;
}
#wmceA4Clear1::before,
#wmceA4Clear2::before,
#wmceA4Clear3::before,
button[id^="wmceA4Edit"]::before{ width:12px; height:12px; margin-right:5px; vertical-align:-1px; }
#wmceCopyPreview::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"); }
#wmceExportTXT::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"); }
#wmceExportPrint::before, #wmceA4Print::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"); }
#wmceReset::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"); }
button[id^="wmceA4Clear"]::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[id^="wmceSendA4_"]::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"); }
button[id^="wmceA4Edit"]::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"); }
#wmceImageInput + span::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='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%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='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); }