/************************************************************
 GOLDEN HOUR – markItUp Editor
 ------------------------------------------------------------
 Icons  : Myths-Set (defaultcolor24) als Sprite
          -> /jscripts/markitup/sets/mybb/toolbar_true.png
 Look   : Toolbar + Textarea im dunklen Marineblau der
          Eingabefelder (fügt sich in den Editor ein),
          einheitliche Button-Kästchen, Gold-Hover.

 >>> FARBEN HIER ANPASSEN <<<  (Variablen am .mybbeditor)
************************************************************/
.mybbeditor{
  --ed-bg:rgba(8,10,16,.55);     /* Toolbar + Textarea (wie Eingabefelder) */
  --ed-panel:#141a2b;            /* Dropdown-Panel (deckend) */
  --ed-line:#2a3149;             /* Rahmen / Trenner (Navy) */
  --ed-ink:#e8e4d8;              /* Text (creme) */
  --ed-gold:#f7e86a;             /* Gold-Akzent (Hover) */
  --ed-gold-soft:rgba(247,232,106,.15); /* Gold-Fläche Hover */
}

/* Sprite-Pfad zentral (falls die Datei woanders liegt: hier ändern) */
.mybbeditor .markItUpHeader > ul > li > a,
.markItUpHeader > ul > li > a{
  --ed-sprite:url(/jscripts/markitup/sets/mybb/toolbar_true.png);
}

/* ---------- Container / Breite ---------- */
.mybbeditor,
.markItUp{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* ============================================================
   TOOLBAR – fügt sich in den Editor ein
   ============================================================ */
.mybbeditor .markItUpHeader,
.markItUpHeader{
  padding:6px 7px!important;
  background:var(--ed-bg)!important;
  border:1px solid var(--ed-line)!important;
  border-bottom:1px solid var(--ed-line)!important;
  border-radius:6px 6px 0 0;
  box-sizing:border-box!important;
  overflow:visible!important;
}

/* Button-Reihe: Flexbox */
.mybbeditor .markItUpHeader > ul,
.markItUpHeader > ul{
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:6px!important;
  list-style:none!important;
}

/* ---------- Button-Kästchen (jedes Icon in eigener Zelle, Sweet-Illusion-Aufteilung) ---------- */
.mybbeditor .markItUpHeader > ul > li,
.markItUpHeader > ul > li{
  position:relative!important;
  float:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  margin:0!important;
  padding:0!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid var(--ed-line)!important;
  border-radius:4px;
  list-style:none!important;
  box-sizing:border-box!important;
  transition:.15s ease;
}

.mybbeditor .markItUpHeader > ul > li:hover,
.markItUpHeader > ul > li:hover{
  border-color:var(--ed-gold)!important;
  background:var(--ed-gold-soft)!important;
}

/* ---------- Icon = Myths-Sprite auf dem <a> ---------- */
.mybbeditor .markItUpHeader > ul > li > a,
.markItUpHeader > ul > li > a{
  display:block!important;
  width:24px!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  background-image:var(--ed-sprite)!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
  border:0!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* ---------- Sprite-Position je Button (TL-Set-Reihenfolge) ---------- */
.mybbeditor .markItUpButton1  > a{background-position:-50px  0!important;} /* Fett        */
.mybbeditor .markItUpButton2  > a{background-position:-225px 0!important;} /* Kursiv      */
.mybbeditor .markItUpButton3  > a{background-position:-625px 0!important;} /* Unterstr.   */
.mybbeditor .markItUpButton4  > a{background-position:-275px 0!important;} /* Links       */
.mybbeditor .markItUpButton5  > a{background-position:-75px  0!important;} /* Zentriert   */
.mybbeditor .markItUpButton6  > a{background-position:-475px 0!important;} /* Rechts      */
.mybbeditor .markItUpButton7  > a{background-position:-250px 0!important;} /* Blocksatz   */
.mybbeditor .markItUpButton8  > a{background-position:-175px 0!important;} /* Schriftart  */
.mybbeditor .markItUpButton9  > a{background-position:-500px 0!important;} /* Größe       */
.mybbeditor .markItUpButton10 > a{background-position:-125px 0!important;} /* Farbe       */
.mybbeditor .markItUpButton11 > a{background-position:-200px 0!important;} /* Bild        */
.mybbeditor .markItUpButton12 > a{background-position:-150px 0!important;} /* E-Mail      */
.mybbeditor .markItUpButton13 > a{background-position:-300px 0!important;} /* Link        */
.mybbeditor .markItUpButton14 > a{background-position:-650px 0!important;} /* Video       */
.mybbeditor .markItUpButton15 > a{background-position:-600px 0!important;} /* Liste       */
.mybbeditor .markItUpButton16 > a{background-position:-325px 0!important;} /* Num. Liste  */
.mybbeditor .markItUpButton17 > a{background-position:-100px 0!important;} /* Code        */
.mybbeditor .markItUpButton18 > a{background-position:-350px 0!important;} /* PHP         */
.mybbeditor .markItUpButton19 > a{background-position:-450px 0!important;} /* Zitat       */

/* ---------- Trenner ---------- */
.mybbeditor .markItUpHeader > ul > li.markItUpSeparator,
.markItUpHeader > ul > li.markItUpSeparator{
  width:1px!important;
  height:20px!important;
  margin:0 3px!important;
  padding:0!important;
  background:var(--ed-line)!important;
  border:0!important;
  border-radius:0;
  overflow:hidden!important;
  text-indent:-9999px!important;
}
.mybbeditor .markItUpHeader > ul > li.markItUpSeparator:hover{
  background:var(--ed-line)!important;
  border:0!important;
}

/* ============================================================
   DROPDOWNS (Schriftart / Größe / Farbe / Video)
   ============================================================ */
.mybbeditor .markItUpHeader ul ul{
  display:none!important;
  position:absolute!important;
  top:32px!important;
  left:0!important;
  z-index:99999!important;
  min-width:170px!important;
  margin:0!important;
  padding:6px!important;
  background:var(--ed-panel)!important;
  border:1px solid var(--ed-line)!important;
  border-radius:4px;
  box-shadow:0 12px 28px rgba(0,0,0,.5)!important;
  list-style:none!important;
}
.mybbeditor .markItUpHeader li:hover > ul{display:block!important;}

.mybbeditor .markItUpHeader ul ul li{
  position:relative!important;
  float:none!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  box-sizing:border-box!important;
}
.mybbeditor .markItUpHeader ul ul li:last-child{border-bottom:0!important;}

.mybbeditor .markItUpHeader ul ul a{
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:26px!important;
  margin:0!important;
  padding:7px 10px!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  color:var(--ed-ink)!important;
  font-size:12px!important;
  line-height:1.3!important;
  text-indent:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.mybbeditor .markItUpHeader ul ul a:hover{
  background:var(--ed-gold-soft)!important;
  color:var(--ed-gold)!important;
}

/* ---------- Farb-Auswahl (Button 10) ---------- */
.mybbeditor .markItUpButton10 ul{
  min-width:0!important;
  width:93px!important;
  padding:4px!important;
}
.mybbeditor .markItUpButton10 ul li{
  float:left!important;
  width:25px!important;
  height:25px!important;
  min-height:0!important;
  margin:1px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.75)!important;
}
.mybbeditor .markItUpButton10 ul a{
  width:25px!important;
  height:25px!important;
  min-height:0!important;
  padding:0!important;
  background-image:none!important;
  text-indent:-9999px!important;
}
.mybbeditor .markItUpButton10 ul a:hover{outline:1px solid var(--ed-gold)!important;}
.mybbeditor .markItUpButton10 .col1-1 a{background:yellow!important;}
.mybbeditor .markItUpButton10 .col1-2 a{background:orange!important;}
.mybbeditor .markItUpButton10 .col1-3 a{background:red!important;}
.mybbeditor .markItUpButton10 .col2-1 a{background:blue!important;}
.mybbeditor .markItUpButton10 .col2-2 a{background:purple!important;}
.mybbeditor .markItUpButton10 .col2-3 a{background:green!important;}
.mybbeditor .markItUpButton10 .col3-1 a{background:white!important;}
.mybbeditor .markItUpButton10 .col3-2 a{background:gray!important;}
.mybbeditor .markItUpButton10 .col3-3 a{background:black!important;}

/* ============================================================
   TEXTAREA – bündig unter der Toolbar, gleiches Navy
   ============================================================ */
.mybbeditor textarea,
.markItUpEditor,
form #message,
#message{
  width:100%!important;
  max-width:100%!important;
  min-height:320px!important;
  padding:14px!important;
  background:var(--ed-bg)!important;
  border:1px solid var(--ed-line)!important;
  border-top:0!important;
  border-radius:0 0 6px 6px;
  color:var(--ed-ink)!important;
  font-family:"Verdana","Arial","Helvetica",sans-serif!important;
  font-size:14px!important;
  line-height:1.6!important;
  resize:vertical;
  box-sizing:border-box!important;
}
.mybbeditor textarea::placeholder,#message::placeholder{color:rgba(232,228,216,.4)!important;}

/* markItUp-Fußleiste (Resize-Griff) weg – Textarea hat resize */
.markItUpFooter{display:none!important;}

/* ============================================================
   MOBIL
   ============================================================ */
@media(max-width:620px){
  .mybbeditor .markItUpHeader,
  .markItUpHeader{
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
  }
  .mybbeditor .markItUpHeader > ul,
  .markItUpHeader > ul{
    width:max-content!important;
    min-width:100%!important;
    flex-wrap:nowrap!important;
  }
  .mybbeditor .markItUpHeader > ul > li,
  .markItUpHeader > ul > li{flex:0 0 auto!important;}
  .mybbeditor textarea,
  .markItUpEditor,
  form #message,
  #message{min-height:240px!important;font-size:15px!important;}
  .mybbeditor .markItUpHeader ul ul{max-width:calc(100vw - 32px)!important;}
}