/* ============================================
   markItUp! Editor - LA MIDNIGHT (Brutalist)
   Basis: markItUp! by Jay Salvat, MyBB-Set by StefanT (GPLv3)
   Angepasst fuer: LA MIDNIGHT Theme, MyBB 1.8
   Autor der Anpassung: Rogue RPG BB

   WICHTIG - hier steht das komplette Design.
   Diese Datei wird vom Plugin als letzte geladen und
   ueberschreibt deshalb die mitgelieferte Skin-Datei
   (skins/simple/style.css) vollstaendig. Wer etwas
   aendern will, aendert es hier.

   Icons: keine icons.png mehr. Jedes Icon ist ein
   kleines SVG in einer CSS-Variable, das als Maske
   ueber den Button gelegt wird. Die Farbe kommt aus
   background-color - dadurch passen sich die Icons
   Dark/Light und der Akzentfarbe von allein an.
   ============================================ */

/* --------------------------------------------
   Icon-Bibliothek
   Jede Zeile ist ein 24x24 Outline-Icon als data-URI.
   -------------------------------------------- */
.mybbeditor {
    --mu-ico-bold:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h6a4 4 0 0 1 0 8H7z'/%3E%3Cpath d='M7 12h7a4 4 0 0 1 0 8H7z'/%3E%3C/svg%3E");
    --mu-ico-italic:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='15' y1='4' x2='19' y2='4'/%3E%3Cline x1='5' y1='20' x2='9' y2='20'/%3E%3Cline x1='15' y1='4' x2='9' y2='20'/%3E%3C/svg%3E");
    --mu-ico-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v7a6 6 0 0 0 12 0V3'/%3E%3Cline x1='4' y1='21' x2='20' y2='21'/%3E%3C/svg%3E");
    --mu-ico-left:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='17' y1='10' x2='3' y2='10'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='17' y1='18' x2='3' y2='18'/%3E%3C/svg%3E");
    --mu-ico-center:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='18' y1='10' x2='6' y2='10'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='18' y1='18' x2='6' y2='18'/%3E%3C/svg%3E");
    --mu-ico-right:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='10' x2='7' y2='10'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='21' y1='18' x2='7' y2='18'/%3E%3C/svg%3E");
    --mu-ico-justify:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='10' x2='3' y2='10'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='21' y1='18' x2='3' y2='18'/%3E%3C/svg%3E");
    --mu-ico-font:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 7 4 4 20 4 20 7'/%3E%3Cline x1='9' y1='20' x2='15' y2='20'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3C/svg%3E");
    --mu-ico-size:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 18 7 7l4.5 11'/%3E%3Cline x1='4' y1='14.5' x2='10' y2='14.5'/%3E%3Cpath d='M14 18l3.5-8 3.5 8'/%3E%3Cline x1='15.2' y1='15.5' x2='19.8' y2='15.5'/%3E%3C/svg%3E");
    --mu-ico-color:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7l5.3 5.3a7.5 7.5 0 1 1-10.6 0z'/%3E%3C/svg%3E");
    --mu-ico-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='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%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    --mu-ico-email:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E");
    --mu-ico-link:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    --mu-ico-video:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolygon points='10 9 15.5 12 10 15'/%3E%3C/svg%3E");
    --mu-ico-ul:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='6' x2='21' y2='6'/%3E%3Cline x1='9' y1='12' x2='21' y2='12'/%3E%3Cline x1='9' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='4' cy='6' r='1'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Ccircle cx='4' cy='18' r='1'/%3E%3C/svg%3E");
    --mu-ico-ol:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='6' x2='21' y2='6'/%3E%3Cline x1='10' y1='12' x2='21' y2='12'/%3E%3Cline x1='10' y1='18' x2='21' y2='18'/%3E%3Cpath d='M3 4.5 4.4 3.6V8'/%3E%3Cpath d='M2.7 11.4c.6-.8 2-.6 2.1.4.1.8-2.1 1.8-2.1 3.1h2.4'/%3E%3Cpath d='M2.8 17.3h2.3l-1.3 1.6c1.2.1 1.5 1.9-.1 2.2-.5.1-1-.1-1.2-.4'/%3E%3C/svg%3E");
    --mu-ico-code:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
    --mu-ico-php:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'/%3E%3Cline x1='12' y1='19' x2='20' y2='19'/%3E%3C/svg%3E");
    --mu-ico-quote:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.76-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h1c0 5-1 6-3 6'/%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.25-.76-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h1c0 5-1 6-3 6'/%3E%3C/svg%3E");

    /* Pfeile der Klappmenues */
    --mu-ico-caret:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --mu-ico-caret-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

/* --------------------------------------------
   Stellschrauben
   Hier drehen, wenn etwas groesser oder kleiner soll.
   -------------------------------------------- */
.mybbeditor {
    --mu-bg:            var(--bg-input, #111111);
    --mu-bg-bar:        var(--bg-alt, #0a0a0a);
    --mu-bg-menu:       var(--bg-card, #0f0f0f);
    --mu-border:        var(--border, #1a1a1a);
    --mu-border-strong: var(--border-light, #2a2a2a);
    --mu-text:          var(--text, #e5e5e5);
    --mu-text-dim:      var(--text-dim, #888888);
    --mu-accent:        var(--accent, #ff4422);
    --mu-font-mono:     var(--font-mono, 'Space Mono', 'Courier New', monospace);
    --mu-font-body:     var(--font-body, 'Inter', system-ui, sans-serif);

    --mu-btn:      38px;    /* Klickflaeche eines Toolbar-Buttons */
    --mu-icon:     19px;    /* sichtbare Icon-Groesse darin */
    --mu-gap:      4px;     /* Abstand zwischen zwei Buttons */
    --mu-group:    14px;    /* Abstand links/rechts vom Trennstrich */
    --mu-height:   460px;   /* Starthoehe des Schreibfelds */
    --mu-menu:     210px;   /* Mindestbreite der Klappmenues */
    --mu-radius:   0;       /* Brutalist: keine runden Ecken */
    --mu-speed:    .15s;
}

/* Heller Modus: das Orange-Rot des Themes ist auf hellem Grund
   zu kontrastarm (2.85:1). Abgedunkelt sind es 4.45:1. */
[data-theme="light"] .mybbeditor {
    --mu-accent: #c9300f;
}

/* --------------------------------------------
   Grundgeruest
   -------------------------------------------- */
.mybbeditor .markItUp * {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

.mybbeditor,
.mybbeditor .markItUp {
    width: 100%;
    float: none;
}

.mybbeditor .markItUp {
    margin: 0;
    border: 1px solid var(--mu-border-strong);
    background: var(--mu-bg);
}

.mybbeditor .markItUpContainer {
    font-family: var(--mu-font-body);
    font-size: 12px;
}

/* Das eigentliche Schreibfeld */
.mybbeditor .markItUpEditor {
    display: block;
    width: 100%;
    height: var(--mu-height);
    min-height: 200px;
    padding: 18px 20px;
    border: 0;
    border-top: 1px solid var(--mu-border);
    background: var(--mu-bg);
    color: var(--mu-text);
    font-family: var(--mu-font-mono);
    font-size: 13px;
    line-height: 1.7;
    resize: vertical;
    clear: both;
    overflow: auto;
}

.mybbeditor .markItUpEditor:focus {
    /* Fokus muss sichtbar bleiben - Barrierefreiheit */
    box-shadow: inset 0 0 0 1px var(--mu-accent);
}

.mybbeditor .markItUpEditor::placeholder {
    color: var(--mu-text-dim);
}

/* Das Theme begrenzt in global.css das Nachrichtenfeld auf
   max-width: 600px - und zwar ueber eine ID. Deshalb hier
   ebenfalls mit ID dagegenhalten. */
#message.markItUpEditor,
.mybbeditor .markItUp #message {
    width: 100%;
    max-width: none;
}

.mybbeditor .markItUpPreviewFrame {
    width: 100%;
    height: 300px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--mu-border);
    background: var(--mu-bg);
    overflow: auto;
}

.mybbeditor .markItUpFooter {
    width: 100%;
}

/* Anfasser zum Groesse-Ziehen: per CSS gezeichnet statt handle.png */
.mybbeditor .markItUpResizeHandle {
    width: 100%;
    height: 12px;
    margin: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--mu-border-strong) 0 1px,
        transparent 1px 4px
    );
    background-size: 28px 10px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: ns-resize;
    overflow: hidden;
}

/* --------------------------------------------
   Toolbar
   -------------------------------------------- */
.mybbeditor .markItUpHeader {
    display: block;
    padding: 5px 8px;
    background: var(--mu-bg-bar);
}

.mybbeditor .markItUpHeader > ul {
    display: flex;
    flex-wrap: wrap;        /* bricht auf schmalen Bildschirmen um */
    align-items: center;
    gap: var(--mu-gap);
    list-style: none;
}

.mybbeditor .markItUpHeader ul li {
    list-style: none;
    position: relative;
    float: none;
    margin: 0;
}

/* Untermenue oeffnet bei Hover */
.mybbeditor .markItUpHeader ul li:hover > ul {
    display: block;
}

/* Trennstrich zwischen den Button-Gruppen */
.mybbeditor .markItUpHeader ul .markItUpSeparator {
    width: 1px;
    height: 20px;
    margin: 0 var(--mu-group);
    background: var(--mu-border-strong);
    overflow: hidden;
    text-indent: -10000px;
}

/* --------------------------------------------
   Buttons der ersten Reihe
   -------------------------------------------- */
.mybbeditor .markItUpHeader > ul > li > a {
    display: block;
    width: var(--mu-btn);
    height: var(--mu-btn);
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--mu-radius);
    text-indent: -10000px;   /* Text nur noch fuer Screenreader */
    overflow: hidden;
    background-image: none;  /* alte Sprite-Grafik abschalten */
    background-color: var(--mu-text-dim);
    background-repeat: no-repeat;
    transition: background-color var(--mu-speed) linear,
                border-color var(--mu-speed) linear;
}

.mybbeditor .markItUpHeader > ul > li > a:hover,
.mybbeditor .markItUpHeader > ul > li > a:focus {
    background-color: var(--mu-accent);
    border-color: var(--mu-border-strong);
}

/* --------------------------------------------
   Klappmenues
   -------------------------------------------- */

/* Kleiner Pfeil an Buttons mit Untermenue */
.mybbeditor .markItUpHeader ul .markItUpDropMenu {
    background: none;        /* alte menu.png abschalten */
    margin-right: 0;
}

.mybbeditor .markItUpHeader ul .markItUpDropMenu > a::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 3px;
    width: 9px;
    height: 9px;
    background-color: var(--mu-text-dim);
    -webkit-mask: var(--mu-ico-caret) no-repeat center / 9px 9px;
            mask: var(--mu-ico-caret) no-repeat center / 9px 9px;
    pointer-events: none;
}

.mybbeditor .markItUpHeader ul .markItUpDropMenu > a:hover::after,
.mybbeditor .markItUpHeader ul .markItUpDropMenu > a:focus::after {
    background-color: var(--mu-accent);
}

.mybbeditor .markItUpHeader ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    width: auto;
    min-width: var(--mu-menu);
    padding: 0;
    background: var(--mu-bg-menu);
    border: 1px solid var(--mu-border-strong);
    box-shadow: var(--shadow, 0 4px 20px rgba(0, 0, 0, .5));
}

.mybbeditor .markItUpHeader ul ul li {
    float: none;
    width: auto;
    height: auto;
    border-bottom: 1px solid var(--mu-border);
}

.mybbeditor .markItUpHeader ul ul li:last-child {
    border-bottom: 0;
}

/* Menueeintraege: Hoehe richtet sich nach dem Text,
   damit auch grosse Schriftgroessen hineinpassen. */
.mybbeditor .markItUpHeader ul ul a {
    display: block;
    width: auto;
    height: auto;
    padding: 9px 16px;
    text-indent: 0;
    background: none;
    color: var(--mu-text);
    font-family: var(--mu-font-body);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color var(--mu-speed) linear,
                color var(--mu-speed) linear;
}

.mybbeditor .markItUpHeader ul ul a:hover,
.mybbeditor .markItUpHeader ul ul a:focus {
    background: var(--mu-accent);
    color: var(--bg, #050505);
}

.mybbeditor .markItUpHeader ul ul .markItUpSeparator {
    width: auto;
    height: 1px;
    margin: 0;
}

/* Untermenue der dritten Ebene */
.mybbeditor .markItUpHeader ul ul ul {
    top: -1px;
    left: 100%;
}

.mybbeditor .markItUpHeader ul ul .markItUpDropMenu {
    background: none;
}

.mybbeditor .markItUpHeader ul ul .markItUpDropMenu > a::after {
    right: 10px;
    bottom: 50%;
    transform: translateY(50%);
    -webkit-mask-image: var(--mu-ico-caret-r);
            mask-image: var(--mu-ico-caret-r);
}

/* --------------------------------------------
   Zuordnung Button -> Icon
   Reihenfolge entspricht dem markupSet in set.js
   (Trenner werden dort nicht mitgezaehlt).
   -------------------------------------------- */
.mybbeditor .markItUpHeader > ul > li.markItUpButton1 > a {
    -webkit-mask: var(--mu-ico-bold) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-bold) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Fett */
.mybbeditor .markItUpHeader > ul > li.markItUpButton2 > a {
    -webkit-mask: var(--mu-ico-italic) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-italic) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Kursiv */
.mybbeditor .markItUpHeader > ul > li.markItUpButton3 > a {
    -webkit-mask: var(--mu-ico-underline) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-underline) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Unterstrichen */
.mybbeditor .markItUpHeader > ul > li.markItUpButton4 > a {
    -webkit-mask: var(--mu-ico-left) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-left) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Linksbuendig */
.mybbeditor .markItUpHeader > ul > li.markItUpButton5 > a {
    -webkit-mask: var(--mu-ico-center) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-center) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Zentriert */
.mybbeditor .markItUpHeader > ul > li.markItUpButton6 > a {
    -webkit-mask: var(--mu-ico-right) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-right) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Rechtsbuendig */
.mybbeditor .markItUpHeader > ul > li.markItUpButton7 > a {
    -webkit-mask: var(--mu-ico-justify) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-justify) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Blocksatz */
.mybbeditor .markItUpHeader > ul > li.markItUpButton8 > a {
    -webkit-mask: var(--mu-ico-font) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-font) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Schriftart */
.mybbeditor .markItUpHeader > ul > li.markItUpButton9 > a {
    -webkit-mask: var(--mu-ico-size) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-size) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Schriftgroesse */
.mybbeditor .markItUpHeader > ul > li.markItUpButton10 > a {
    -webkit-mask: var(--mu-ico-color) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-color) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Farbe */
.mybbeditor .markItUpHeader > ul > li.markItUpButton11 > a {
    -webkit-mask: var(--mu-ico-image) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-image) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Bild */
.mybbeditor .markItUpHeader > ul > li.markItUpButton12 > a {
    -webkit-mask: var(--mu-ico-email) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-email) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* E-Mail */
.mybbeditor .markItUpHeader > ul > li.markItUpButton13 > a {
    -webkit-mask: var(--mu-ico-link) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-link) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Link */
.mybbeditor .markItUpHeader > ul > li.markItUpButton14 > a {
    -webkit-mask: var(--mu-ico-video) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-video) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Video */
.mybbeditor .markItUpHeader > ul > li.markItUpButton15 > a {
    -webkit-mask: var(--mu-ico-ul) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-ul) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Liste */
.mybbeditor .markItUpHeader > ul > li.markItUpButton16 > a {
    -webkit-mask: var(--mu-ico-ol) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-ol) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Nummerierte Liste */
.mybbeditor .markItUpHeader > ul > li.markItUpButton17 > a {
    -webkit-mask: var(--mu-ico-code) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-code) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Code */
.mybbeditor .markItUpHeader > ul > li.markItUpButton18 > a {
    -webkit-mask: var(--mu-ico-php) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-php) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* PHP */
.mybbeditor .markItUpHeader > ul > li.markItUpButton19 > a {
    -webkit-mask: var(--mu-ico-quote) no-repeat center / var(--mu-icon) var(--mu-icon);
            mask: var(--mu-ico-quote) no-repeat center / var(--mu-icon) var(--mu-icon);
} /* Zitat */

/* --------------------------------------------
   Klappmenue: Schriftart (Button 8)
   Eintraege zeigen die Schrift in echt.
   -------------------------------------------- */
.mybbeditor .markItUpButton8 .arial          { font-family: Arial, sans-serif; }
.mybbeditor .markItUpButton8 .arial_black    { font-family: 'Arial Black', sans-serif; }
.mybbeditor .markItUpButton8 .comic_sans_ms  { font-family: 'Comic Sans MS', cursive; }
.mybbeditor .markItUpButton8 .courier_new    { font-family: 'Courier New', monospace; }
.mybbeditor .markItUpButton8 .georgia        { font-family: Georgia, serif; }
.mybbeditor .markItUpButton8 .impact         { font-family: Impact, sans-serif; }
.mybbeditor .markItUpButton8 .sans_serif     { font-family: sans-serif; }
.mybbeditor .markItUpButton8 .serif          { font-family: serif; }
.mybbeditor .markItUpButton8 .times_new_roman{ font-family: 'Times New Roman', serif; }
.mybbeditor .markItUpButton8 .trebuchet_ms   { font-family: 'Trebuchet MS', sans-serif; }
.mybbeditor .markItUpButton8 .verdana        { font-family: Verdana, sans-serif; }

/* --------------------------------------------
   Klappmenue: Schriftgroesse (Button 9)
   -------------------------------------------- */
.mybbeditor .markItUpButton9 ul     { min-width: 230px; }
.mybbeditor .markItUpButton9 .size1 a { font-size: 11px; }
.mybbeditor .markItUpButton9 .size2 a { font-size: 12px; }
.mybbeditor .markItUpButton9 .size3 a { font-size: 14px; }
.mybbeditor .markItUpButton9 .size4 a { font-size: 16px; }
.mybbeditor .markItUpButton9 .size5 a { font-size: 19px; }
.mybbeditor .markItUpButton9 .size6 a { font-size: 23px; }
.mybbeditor .markItUpButton9 .size7 a { font-size: 28px; }

/* --------------------------------------------
   Klappmenue: Farben (Button 10)
   Raster aus neun Farbfeldern statt Textliste.
   -------------------------------------------- */
.mybbeditor .markItUpButton10 ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: auto;
    min-width: 0;
    padding: 5px;
}

.mybbeditor .markItUpButton10 ul li {
    width: 30px;
    height: 30px;
    border-bottom: 0;
    overflow: hidden;
}

.mybbeditor .markItUpButton10 ul a {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--mu-border-strong);
    text-indent: -10000px;
}

.mybbeditor .markItUpButton10 ul a:hover,
.mybbeditor .markItUpButton10 ul a:focus {
    border-color: var(--mu-text);
}

.mybbeditor .markItUpButton10 .col1-1 a { background: #ffd400; }
.mybbeditor .markItUpButton10 .col1-2 a { background: #ff8800; }
.mybbeditor .markItUpButton10 .col1-3 a { background: #e02020; }
.mybbeditor .markItUpButton10 .col2-1 a { background: #2d6cff; }
.mybbeditor .markItUpButton10 .col2-2 a { background: #8b3dd6; }
.mybbeditor .markItUpButton10 .col2-3 a { background: #2fa84f; }
.mybbeditor .markItUpButton10 .col3-1 a { background: #ffffff; }
.mybbeditor .markItUpButton10 .col3-2 a { background: #808080; }
.mybbeditor .markItUpButton10 .col3-3 a { background: #000000; }

/* --------------------------------------------
   Klappmenue: Video (Button 14)
   -------------------------------------------- */
.mybbeditor .markItUpButton14 ul { min-width: 170px; }

/* --------------------------------------------
   Schmale Bildschirme
   -------------------------------------------- */
@media (max-width: 640px) {
    .mybbeditor {
        --mu-btn: 40px;      /* groessere Flaeche zum Antippen */
        --mu-group: 8px;
        --mu-height: 320px;
        --mu-menu: 180px;
    }

    .mybbeditor .markItUpEditor {
        padding: 14px;
    }

    /* Klappmenues duerfen nicht aus dem Bild laufen */
    .mybbeditor .markItUpHeader ul ul ul {
        top: 100%;
        left: 0;
    }
}